/* ============================================================
   JPSD v5.5 ULTIMATE — Teal Final + Bootstrap Override Maksimal
   
   CARA PASANG:
   1. Settings > Website > Appearance > Stylesheet
   2. Hapus / delete file lama  
   3. Save dulu (pastikan kosong)
   4. Upload file ini
   5. Save
   ============================================================ */
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
 
/* ============================================================
   RESET GLOBAL
   ============================================================ */
html { color: #333; }
body {
  font-family: 'Noto Sans', sans-serif !important;
  background-color: #fff;
  line-height: 1.6;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
::selection { background-color: #1B7A6E; color: #fff; }
 
/* ============================================================
   LINKS GLOBAL
   ============================================================ */
a { color: #1B7A6E; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #155f56; text-decoration: underline; }
a:focus { color: #155f56; outline: 2px dashed #1B7A6E; outline-offset: 2px; }
 
/* ============================================================
   HEADER BANNER
   ============================================================ */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 135px;
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisguz45_thkqY46TlwkfUT0sy6TOHeNys9TewaHEQTmBKaeUH3Aya_WSDX9V8HJDEr4fzpGpLPjpVtW6Kdre0gd4wKG-UMyet6oTPSo46QoXBiRXO9tTEsX8ALyM2JncV9W8tcj0Q3dCKPL4CRMeaSJoLrd8TZBm2tbc8WrJ72Gx-0w9gFOTaJI4jFGuM/s1200/Jurnal%20Pengajaran%20Sekolah%20Dasar%20(2025).png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
 
/* ============================================================
   SEMBUNYI LOGIN/REGISTER & IKON STATISTIK
   ============================================================ */
#navigationUser { display: none !important; }
.article-summary img[src*="muhammadnasir"] { display: none !important; }
 
/* ============================================================
   NAVBAR BRAND — IKON HOME
   Uncomment CARA 2 jika sudah punya logo PNG
   ============================================================ */
.navbar-brand {
  font-size: 0 !important;
  color: transparent !important;
  display: inline-block !important;
  width: 50px !important;
  height: 50px !important;
  position: relative !important;
  padding: 0 !important;
  margin-left: 15px !important;
}
.navbar-brand::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 28px !important; height: 28px !important;
  background-color: #ffffff !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>") no-repeat center !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>") no-repeat center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  display: block !important;
}
/*
   CARA 2 — Logo PNG, uncomment + ganti URL:
.navbar-brand {
  font-size: 0 !important; color: transparent !important;
  display: inline-block !important; width: 160px !important;
  height: 50px !important; padding: 4px 0 !important;
  margin-left: 10px !important;
  background-image: url('GANTI_URL_LOGO.png') !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  background-position: left center !important;
}
.navbar-brand::before { display: none !important; }
*/
 
/* ============================================================
   HEADER LOGO AREA
   ============================================================ */
.site-name { text-align: center; }
.site-name a.navbar-brand-logo { display: block; padding: 0; }
.site-name a.navbar-brand-logo img,
.navbar-brand-logo img,
h1.site-name img {
  max-height: 180px !important; width: auto !important;
  max-width: 100% !important; height: auto !important;
  display: block; margin: 0 auto;
}
.navbar-default { border: none !important; margin-bottom: 0 !important; }
 
/* ============================================================
   NAVBAR — TEAL (OVERRIDE BOOTSTRAP CERULEAN MAKSIMAL)
   Bootstrap Cerulean mendefinisikan navbar dengan warna biru terang.
   Kita override dengan semua kombinasi selector yang mungkin.
   ============================================================ */
 
/* Level 1: selector tunggal */
.navbar-default { background-color: #1B7A6E !important; background-image: none !important; border-color: #155f56 !important; }
 
/* Level 2: kombinasi dengan elemen parent */
header.navbar.navbar-default,
header#headerNavigationContainer,
.pkp_structure_head .navbar-default,
div.container-fluid,
#nav-menu,
.navbar-collapse,
.navbar-collapse.collapse { background-color: #1B7A6E !important; background-image: none !important; }
 
/* Level 3: selector dengan pseudo dan state */
.navbar-default:before,
.navbar-default:after { background-color: #1B7A6E !important; }
 
/* Hamburger button di HP */
.navbar-default .navbar-toggle { border-color: rgba(255,255,255,.4) !important; background-color: rgba(255,255,255,.1) !important; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: rgba(255,255,255,.2) !important; }
.navbar-default .navbar-toggle .icon-bar { background-color: #ffffff !important; }
 
/* Link navbar */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff !important;
  background-color: transparent !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 44px !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(255,255,255,.18) !important;
}
 
/* Badge merah di link */
.navbar-default .navbar-nav .badge { background-color: #dc3545 !important; color: #fff !important; }
 
/* Search form di navbar */
.navbar-form .form-control {
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 16px !important;
  background-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.navbar-form .form-control::placeholder { color: rgba(255,255,255,.7) !important; }
.navbar-form .btn-default,
.navbar-form .btn.btn-default {
  background-color: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #000 !important;
}
 
/* Dropdown */
.dropdown-menu { border-radius: 4px !important; font-family: 'Noto Sans', sans-serif !important; font-size: 14px !important; }
.dropdown-menu > li > a { color: #333 !important; min-height: 40px !important; display: flex !important; align-items: center !important; }
.dropdown-menu > li > a:hover { background-color: #E8F5F1 !important; color: #1B7A6E !important; }
 
/* ============================================================
   CONTENT AREA
   ============================================================ */
.pkp_structure_content { background-color: #f8f9fa !important; }
.journal-description { text-align: justify; line-height: 1.7; color: #444; font-size: 14px; margin-bottom: 20px; }
 
/* ============================================================
   HEADINGS & SEKSI
   ============================================================ */
.cmp_announcements .page-header h2,
.current_issue .page-header h2,
.sections .page-header h2,
.page-header {
  color: #1B7A6E !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  border-bottom: 3px solid #239182 !important;
  padding-bottom: 6px !important;
}
.cmp_announcements .media-heading a,
.announcement-summary .media-heading a,
.article-summary .media-heading a { color: #1B7A6E !important; font-weight: 600 !important; }
.cmp_announcements .media-heading a:hover,
.article-summary .media-heading a:hover { color: #0f4f46 !important; }
 
/* ============================================================
   ARTIKEL & TOMBOL
   ============================================================ */
.article-summary.media { border-bottom: 1px solid #d5e8e4 !important; padding: 18px 0 !important; }
 
/* Override Bootstrap .btn-primary biru */
.btn-primary,
a.btn-primary,
a.galley-link.btn.btn-primary,
a.galley-link.btn.btn-primary.pdf,
a.btn.btn-primary.read-more,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #1B7A6E !important;
  background-image: none !important;
  border-color: #155f56 !important;
  color: #ffffff !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  min-height: 36px !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
}
.btn-primary:hover,
a.galley-link.btn.btn-primary.pdf:hover,
a.btn.btn-primary.read-more:hover {
  background-color: #155f56 !important;
  border-color: #0f4f46 !important;
}
 
/* ============================================================
   SIDEBAR OJS DEFAULT BLOCKS
   ============================================================ */
.pkp_block .title {
  background: #1B7A6E !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 4px 4px 0 0 !important;
}
.pkp_block .content ul li a { color: #1B7A6E !important; font-weight: 600 !important; }
.pkp_block .content ul li a:hover { color: #155f56 !important; }
 
/* ============================================================
   SIDEBAR CUSTOM BLOCK (.jpsd-sb-*)
   Sebagai backup jika inline style tidak cukup
   ============================================================ */
.jpsd-sb-head { background: linear-gradient(90deg, #1B7A6E, #239182) !important; }
.jpsd-sb-list li a { color: #1B7A6E !important; font-weight: 600 !important; }
.jpsd-sb-list li a:hover { background: #E8F5F1 !important; color: #0f4f46 !important; }
 
/* ============================================================
   FOOTER — OVERRIDE TOTAL SEMUA SELECTOR
   ============================================================ */
footer.footer,
.footer[role="contentinfo"] {
  background-color: #2C3E50 !important;
  border-top: 3px solid #1B7A6E !important;
  padding: 28px 0 !important;
  font-family: 'Noto Sans', sans-serif !important;
  line-height: 1.7 !important;
}
 
/* Paksa SEMUA elemen dalam footer jadi terang */
footer.footer *,
.footer[role="contentinfo"] * {
  color: #e8e8e8 !important;
  font-family: 'Noto Sans', sans-serif !important;
}
 
/* Nama jurnal */
footer.footer .footer-left p strong,
footer.footer .col-md-6 p strong,
footer.footer strong,
footer.footer b,
.footer[role="contentinfo"] strong,
.footer[role="contentinfo"] b {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
 
/* Alamat (class style9) */
footer.footer p.style9,
footer.footer .footer-right p,
footer.footer .footer-right p.style9,
.footer p.style9 {
  color: #b8cdd0 !important;
  font-size: 12px !important;
}
 
/* Teks CC dan paragraf langsung */
footer.footer .col-md-10 > p,
footer.footer .col-md-10 p,
.footer[role="contentinfo"] .col-md-10 > p {
  color: #e8e8e8 !important;
  font-size: 12px !important;
}
 
/* SEMUA link footer — teal terang */
footer.footer a,
footer.footer a:link,
footer.footer a:visited,
footer.footer a:any-link,
.footer[role="contentinfo"] a,
.footer[role="contentinfo"] a:link,
.footer[role="contentinfo"] a:visited {
  color: #5DCAA5 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(93,202,165,.35) !important;
}
footer.footer a:hover,
.footer[role="contentinfo"] a:hover {
  color: #9FE1CB !important;
}
 
/* OJS brand logo */
footer.footer .col-md-2 img,
.footer .col-md-2 img { opacity: .75 !important; filter: brightness(1.4) !important; }
 
/* CC badge */
footer.footer img[alt*="Creative Commons"],
footer.footer img[alt*="Lisensi"],
footer.footer img[src*="creativecommons"] { opacity: .9 !important; }
 
/* ============================================================
   TABEL
   ============================================================ */
table th { background-color: #1B7A6E !important; color: #fff !important; font-family: 'Noto Sans', sans-serif !important; font-weight: 700 !important; }
table tr:hover { background-color: #E8F5F1 !important; }
 
/* ============================================================
   INPUT — cegah auto-zoom Android
   ============================================================ */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], textarea, select {
  font-size: 16px !important;
  font-family: 'Noto Sans', sans-serif !important;
}
 
/* ============================================================
   RESPONSIVE TABLET (768px)
   ============================================================ */
@media (max-width: 768px) {
  body::before { height: 100px; }
  .site-name a.navbar-brand-logo img, .navbar-brand-logo img, h1.site-name img { max-height: 120px !important; }
  .article-summary .media-heading { font-size: 14px; }
  .article-summary .authors .consent { font-size: 12px; }
  .cmp_announcements .media-heading a, .announcement-summary .media-heading a { font-size: 14px !important; }
  .issue-toc .heading .thumbnail img, .issue-toc .heading .cover img { max-height: 200px !important; }
  .pkp_structure_main { width: 100% !important; }
}
 
/* ============================================================
   RESPONSIVE HP / ANDROID (480px)
   ============================================================ */
@media (max-width: 480px) {
  body::before { height: 80px; }
  .site-name a.navbar-brand-logo img, .navbar-brand-logo img, h1.site-name img { max-height: 80px !important; }
  .navbar-default .navbar-nav > li > a { padding: 12px 10px !important; font-size: 13px !important; }
  .article-summary .media-heading { font-size: 13px !important; line-height: 1.5; }
  .issue-toc .heading .thumbnail img, .issue-toc .heading .cover img { max-height: 150px !important; width: 100% !important; height: auto !important; }
  a.galley-link.btn.btn-primary.pdf {
    padding: 10px 16px !important; font-size: 13px !important;
    display: block !important; width: 100% !important;
    text-align: center !important; margin-top: 8px !important;
  }
  .cmp_announcements .page-header h2, .current_issue .page-header h2,
  .sections .page-header h2, .page-header { font-size: 18px !important; }
  footer.footer, .footer[role="contentinfo"] { font-size: 12px !important; padding: 20px 12px !important; text-align: center !important; }
  footer.footer .footer-left, footer.footer .footer-right,
  .footer .col-md-6 { text-align: center !important; margin-bottom: 8px !important; }
  .journal-description { font-size: 13px; }
  .jpsd-sb-list li a { padding: 10px !important; font-size: 12px !important; min-height: 44px !important; }
  .jpsd-sb-head { padding: 10px !important; }
  .jpsd-sb-head-title { font-size: 11px !important; }
}
 
/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, #nav-menu, #sidebar, footer.footer { display: none !important; }
  body::before { display: none !important; }
  .pkp_structure_content { background: white !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}