/*
 * compatibility.css — 1001Tekno Child Theme v3.2
 * Full-width fix: semua konten sejajar dengan header (max-width 1200px, padding 1.5rem)
 */

/* ==========================================================================
   0. LAYOUT ALIGNMENT — semua konten sejajar dengan header
   
   Header: .inside-header { max-width: 1200px; padding: 0 1.5rem; margin: auto }
   Konten harus sama persis agar visual sejajar kiri-kanan
   ========================================================================== */

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Reset semua GP wrapper ke full width */
#page,
#page.site,
#page.hfeed,
.site.grid-container,
.site.container,
.grid-container.container,
#page.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#content,
#content.site-content,
.site-content,
.site-content .content-area,
.content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

.site-main,
#primary.site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inside-article,
.separate-containers .inside-article,
.one-container .inside-article {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Grid container global reset */
.grid-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================================
   SEJAJAR DENGAN HEADER
   Header pakai: max-width 1200px, padding 0 1.5rem, margin auto
   Semua konten harus pakai ukuran yang SAMA PERSIS
   ========================================================================= */

/* Header */
.inside-header {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* .inside-navigation disembunyikan sepenuhnya (lihat section FIX HAMBURGER DUPLIKAT) */

/* Semua .container di child theme kita — SAMA dengan header */
.container,
.site-main .container,
main .container,
.site-footer .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Single post: .single-layout harus punya constraint yang sama */
.single-layout,
.single-article,
.page-article {
  max-width: 100% !important;
  width: 100% !important;
}



/* entry-content & entry-featured-image: lebar identik
   Keduanya child langsung .single-article → width 100% dari parent yang sama */
.entry-content,
.single-article .entry-content,
.single-article .entry-featured-image {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Cancel GP alignwide/alignfull di dalam entry-content */
.entry-content .alignwide,
.entry-content .alignfull,
body.no-sidebar .entry-content .alignwide,
body.no-sidebar .entry-content .alignfull,
body:not(.no-sidebar) .entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hero — full viewport width, keluar dari semua container */
.home-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Related posts — flow normal seperti konten lain, tidak perlu full-bleed */
.related-posts {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
}

/*
 * compatibility.css — 1001Tekno Child Theme v3.0
 * Override semua konflik GeneratePress + fix dari audit:
 * - CSS duplikat dicegah
 * - Font GP di-override
 * - Warna link/hover diperbaiki
 * - Footer gelap dipaksakan
 * - Container conflict diselesaikan
 * - H1 duplikat ditangani via GP filter
 * - Mobile touch targets 44px
 * - Breadcrumb duplikat disembunyikan
 */

/* ==========================================================================
   1. REMAP GP COLOR TOKENS ke design system kita
   ========================================================================== */
:root {
  --contrast:   #0F172A;
  --contrast-2: #475569;
  --contrast-3: #94A3B8;
  --base:       #E2E8F0;
  --base-2:     #F8FAFC;
  --base-3:     #FFFFFF;
  --accent:     #0066FF;
}

/* ==========================================================================
   2. FONT — GP override font-family, kita paksa Plus Jakarta Sans
   ========================================================================== */
body,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
input, textarea, select, button,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
}

code, kbd, samp, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* ==========================================================================
   3. WARNA LINK — GP override a:hover ke --contrast (hitam)
   ========================================================================== */
a:hover,
a:focus,
a:active {
  color: #0047CC !important;
}
.entry-title a:hover {
  color: #0066FF !important;
}

/* ==========================================================================
   4. FOOTER — GP .site-info { background: var(--base-3) } membuat footer putih
   ========================================================================== */
.site-footer {
  background: #0F172A !important;
  color: rgba(255,255,255,.6) !important;
}
.site-footer a {
  color: rgba(255,255,255,.55) !important;
}
.site-footer a:hover {
  color: #ffffff !important;
}
.footer-widgets,
.site-info {
  background: transparent !important;
  color: inherit !important;
}

/* ==========================================================================
   5. FIX CSS DUPLIKAT — style.css di-load 2x oleh WP + GP
      Dicegah di PHP lewat wp_dequeue, tapi tambahkan spesifisitas body.tekno-child
   ========================================================================== */
body.tekno-child {
  font-size: 1rem;
  line-height: 1.6;
  color: #0F172A;
  background-color: #F8FAFC;
}

/* ==========================================================================
   6. CONTAINER CONFLICT — GP grid-container vs .container kita
   ========================================================================== */
.site-content .container {
  padding-inline: 0;
}
body > .container,
.site-footer .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ==========================================================================
   7. GP SEPARATE-CONTAINERS — background putih + padding 40px ikut GP
   ========================================================================== */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   8. NAVIGASI — harmonisasi dengan design system
   ========================================================================== */
.main-navigation .main-nav ul li a {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  transition: color 150ms ease, background 150ms ease !important;
  text-decoration: none !important;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
  color: #0066FF !important;
  background: #E8F0FF !important;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: #0066FF !important;
  background: #E8F0FF !important;
}

/* ==========================================================================
   9. BUTTON — GP override button { background: #55555e }
   ========================================================================== */
.btn-primary,
input[type="submit"],
.search-submit {
  background-color: #0066FF !important;
  color: #ffffff !important;
  border-color: #0066FF !important;
}
.btn-primary:hover,
input[type="submit"]:hover,
.search-submit:hover {
  background-color: #0047CC !important;
  color: #ffffff !important;
}

/* ==========================================================================
   10. SIDEBAR WIDGET — GP .sidebar .widget { background: var(--base-3) }
   ========================================================================== */
.sidebar .widget,
.widget-area .widget {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* ==========================================================================
   11. ENTRY META
   ========================================================================== */
.entry-meta,
.entry-meta a {
  color: #94A3B8 !important;
}

/* ==========================================================================
   12. FORM INPUT — GP override background, border
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background-color: #ffffff !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 8px !important;
  color: #0F172A !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  padding: 0.75rem 1rem !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #0066FF !important;
  box-shadow: 0 0 0 3px rgba(0,102,255,.15) !important;
  outline: none !important;
}

/* ==========================================================================
   13. SEARCH FORM
   ========================================================================== */
.search-form {
  display: flex !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.search-form:focus-within {
  border-color: #0066FF !important;
  box-shadow: 0 0 0 3px rgba(0,102,255,.15) !important;
}
.search-field {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.75rem 1rem !important;
}

/* ==========================================================================
   14. DISABLE GP BACK-TO-TOP (pakai milik kita)
   ========================================================================== */
a.generate-back-to-top {
  display: none !important;
}

/* ==========================================================================
   14b. PAGINATION — Fix horizontal layout
   
   HTML dari paginate_links() di index.php:
   <nav class="pagination-wrapper">
     <span class="page-numbers current">1</span>
     <a class="page-numbers" href="...">2</a>
     <span class="page-numbers dots">…</span>
     <a class="page-numbers next page-numbers" href="...">Berikutnya ›</a>
   </nav>
   
   Masalah: .page-numbers adalah elemen langsung anak .pagination-wrapper
   ========================================================================== */

/* WRAPPER: flex row horizontal */
.pagination-wrapper,
.paging-navigation,
.navigation.pagination,
nav.pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #E2E8F0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

/* Jika output paginate_links dibungkus div/p tambahan */
.pagination-wrapper > div,
.pagination-wrapper > p {
  display: contents !important;
  margin: 0 !important;
}

/* SEMUA .page-numbers — target langsung child dari wrapper */
.pagination-wrapper > .page-numbers,
.pagination-wrapper > a.page-numbers,
.pagination-wrapper > span.page-numbers,
.paging-navigation .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 0.75rem !important;
  margin: 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  transition: all 150ms ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  float: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Hover */
.pagination-wrapper > a.page-numbers:hover,
.paging-navigation a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover {
  background: #E8F0FF !important;
  border-color: #0066FF !important;
  color: #0066FF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0,102,255,.15) !important;
}

/* Current */
.pagination-wrapper > span.page-numbers.current,
.pagination-wrapper > .page-numbers.current,
.paging-navigation .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background: #0066FF !important;
  border-color: #0066FF !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(0,102,255,.35) !important;
  pointer-events: none !important;
}

/* Dots */
.pagination-wrapper > span.page-numbers.dots,
.pagination-wrapper > .page-numbers.dots,
.paging-navigation .page-numbers.dots {
  border-color: transparent !important;
  background: transparent !important;
  color: #94A3B8 !important;
  pointer-events: none !important;
  min-width: 24px !important;
}

/* Prev / Next */
.pagination-wrapper > .page-numbers.prev,
.pagination-wrapper > .page-numbers.next,
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
  padding: 0 1rem !important;
  font-weight: 600 !important;
  min-width: auto !important;
  gap: 0.25rem !important;
}

.pagination-wrapper > .page-numbers.prev:hover,
.pagination-wrapper > .page-numbers.next:hover,
.paging-navigation .page-numbers.prev:hover,
.paging-navigation .page-numbers.next:hover {
  background: #0066FF !important;
  border-color: #0066FF !important;
  color: #ffffff !important;
}

/* Mobile */
@media (max-width: 480px) {
  .pagination-wrapper > .page-numbers,
  .pagination-wrapper > a.page-numbers,
  .pagination-wrapper > span.page-numbers,
  .paging-navigation .page-numbers {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 0.8125rem !important;
  }
  .pagination-wrapper > .page-numbers.prev,
  .pagination-wrapper > .page-numbers.next {
    padding: 0 0.625rem !important;
  }
}

/* ==========================================================================
   15. BREADCRUMB DUPLIKAT — sembunyikan yang dari hook generate_after_header
       Yang valid: breadcrumb di dalam template (inside .site-main)
   ========================================================================== */
body > .container > .breadcrumb-nav,
body > .container > script + .breadcrumb-nav {
  display: none !important;
}

/* ==========================================================================
   16. POST CARD IMAGE
   ========================================================================== */
.post-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================================================
   17. MOBILE — Touch targets minimal 44px, font size hero
   ========================================================================== */
@media (max-width: 768px) {
  /* Touch targets */
  .main-navigation .main-nav ul li a,
  .btn, button,
  input[type="submit"],
  .search-submit,
  .page-numbers,
  .back-to-top {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* GP padding fix */
  .separate-containers .inside-article,
  .separate-containers .page-header {
    padding: 0 !important;
  }
  .inside-header {
    padding-inline: 1rem !important;
  }

  /* Hero responsif */
  .home-hero {
    padding-block: 3rem !important;
  }
  .home-hero__headline {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  .home-hero__description {
    font-size: 1rem !important;
  }

  /* Blog layout stack di mobile */
  .blog-layout {
    grid-template-columns: 1fr !important;
  }
  .blog-sidebar {
    display: none !important;
  }
  .post-grid {
    grid-template-columns: 1fr !important;
  }
  .post-card--featured {
    grid-template-columns: 1fr !important;
  }

  /* Nav links post */

  /* Author box stack */
  .author-box {
    flex-direction: column !important;
  }

  /* Archive toolbar */
  .archive-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   18. DARK MODE — Remap GP tokens
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --contrast:   #F1F5F9;
    --contrast-2: #CBD5E1;
    --contrast-3: #64748B;
    --base:       #334155;
    --base-2:     #1E293B;
    --base-3:     #0F172A;
    --accent:     #3B82F6;
  }
  body.tekno-child {
    background-color: #0F172A !important;
    color: #F1F5F9 !important;
  }
  .site-header {
    background: rgba(15,23,42,.95) !important;
    border-color: #334155 !important;
  }
  .separate-containers .inside-article,
  .separate-containers .comments-area {
    background: transparent !important;
  }
  .sidebar .widget,
  .widget-area .widget {
    background: #1E293B !important;
    border-color: #334155 !important;
  }
}

/* ==========================================================================
   19. PRINT
   ========================================================================== */
@media print {
  .site-header, .site-footer, .sidebar, .back-to-top,
  .reading-progress, nav, .share-btn { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   GP FOOTER OVERRIDE — Style untuk footer custom kita via hook
   ========================================================================== */

/* Sembunyikan GP default site-info */
.site-info {
  display: none !important;
}

/* GP footer-widgets area */
.footer-widgets { display: none !important; }

/* ==========================================================================
   GP LAYOUT FIX — separate-containers padding kacau
   ========================================================================== */

/* GP separate-containers inject .inside-article yang punya background putih
   dan padding. Kita reset total. */
.separate-containers .inside-article {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* GP .content-area width fix — jika no-sidebar, paksa 100% */
body.no-sidebar .site-content .content-area {
  width: 100% !important;
}

body.no-sidebar .site-content {
  grid-template-columns: 1fr !important;
}

/* GP adds .grid-container to #page, pastikan tidak menambah padding ganda */
.grid-container {
  max-width: 100% !important;
}

/* Site main tidak perlu extra padding dari GP */
.site-main {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   GP HEADER FIX — pastikan header kita override GP header style
   ========================================================================== */

/* GP .inside-header punya padding sendiri, harmonisasikan */
.inside-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.5rem !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  min-height: 64px !important;
}

/* GP navigation */
#site-navigation {
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE — GP 768px breakpoint override
   ========================================================================== */

@media (max-width: 768px) {
  .inside-header {
    padding: 0 1rem !important;
    min-height: 56px !important;
  }
}

/* ==========================================================================
   FORCE FULL WIDTH — override semua GP layout width rules
   ========================================================================== */

/* GP generate-style-inline-css: .site-content .content-area{width:70%}
   dan .is-right-sidebar{width:30%} — kita reset semua */

.site-content .content-area,
.site-content .content-area.grid-70,
body.no-sidebar .site-content .content-area,
body.no-sidebar .content-area,
.content-area {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* GP sidebar column — sembunyikan sepenuhnya */
.widget-area,
.is-right-sidebar,
.is-left-sidebar,
.sidebar-widget-area,
#sidebar,
.sidebar {
  display: none !important;
  width: 0 !important;
}

/* GP site-content flex/grid container */
.site-content,
#content.site-content {
  display: block !important;
  width: 100% !important;
}

/* GP one-container / grid-container max-width */
.site-content > .inside-article,
.one-container .container {
  max-width: 100% !important;
}

/* GP grid-container padding reset */
.site-content .grid-container {
  padding: 0 !important;
}

/* ==========================================================================
   FULL WIDTH FIX — GP .site.grid-container membatasi lebar
   Terlihat di source: <div class="site grid-container container hfeed" id="page">
   ========================================================================== */

/* GP #page wrapper */
#page.site,
#page.site.grid-container,
#page.hfeed,
.site.grid-container.container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GP .site-content wrapper */
#content.site-content,
.site-content#content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Konten di dalam .container child theme kita
   sudah punya max-width:1200px sendiri — tidak perlu double constrain */
.site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GP inside-article padding yang menyebabkan whitespace */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Hero section harus benar-benar full width, keluar dari semua constraint */
.home-hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ==========================================================================
   FIX: HAMBURGER MENU DUPLIKAT DI MOBILE
   Struktur HTML GP:
     <header class="site-header">
       <div class="inside-header"> logo
     </header>
     <nav class="main-navigation nav-below-header">   ← nav utama GP
       <div class="inside-navigation">
         <ul class="main-nav"> ... </ul>             ← menu desktop (PERTAHANKAN)
         <button class="menu-toggle">≡ Menu</button> ← hamburger KE-2 (sembunyikan di mobile)

   Solusi:
   - Desktop : tampilkan .main-nav horizontal seperti biasa ✅
   - Mobile  : sembunyikan HANYA .menu-toggle di .inside-navigation
               hamburger di .inside-header dikontrol via JS custom
   ========================================================================== */

/* ── DESKTOP: nav GP tampil normal ── */
.nav-below-header,
.main-navigation.nav-below-header,
.inside-navigation {
  display: block;
}

/* ── MOBILE: dropdown dari hamburger di .inside-header ── */
@media (max-width: 768px) {

  /* Sembunyikan hamburger ke-2 bawaan GP */
  .inside-navigation .menu-toggle,
  .nav-below-header .menu-toggle {
    display: none !important;
  }

  /* Sembunyikan nav-below-header default di mobile;
     posisi ulang agar dropdown muncul tepat di bawah sticky header */
  .nav-below-header,
  .main-navigation.nav-below-header {
    position: fixed !important;
    top: 56px !important;        /* tinggi .inside-header di mobile */
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    border-top: 1px solid #E2E8F0 !important;

    /* Sembunyikan: overflow + max-height 0 untuk animasi smooth */
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }

  /* .inside-navigation mengikuti parent */
  .nav-below-header .inside-navigation {
    padding: 0.5rem 0 1rem !important;
  }

  /* Saat dibuka oleh JS (class toggled-on) */
  .nav-below-header.toggled-on {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Tampilkan .main-nav saat toggled-on */
  .nav-below-header.toggled-on .main-nav,
  .nav-below-header.toggled-on .inside-navigation {
    display: block !important;
  }

  /* Styling item menu di mobile */
  .nav-below-header .main-nav ul,
  .nav-below-header .main-nav {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .nav-below-header .main-nav li {
    display: block !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }

  .nav-below-header .main-nav li a {
    display: block !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
  }

  .nav-below-header .main-nav li a:hover,
  .nav-below-header .main-nav li a:focus {
    background: #F8FAFC !important;
    color: #0066FF !important;
  }

  .nav-below-header .main-nav li.current-menu-item > a,
  .nav-below-header .main-nav li.current_page_item > a {
    color: #0066FF !important;
    font-weight: 600 !important;
    background: #EFF6FF !important;
  }

  /* Sub-menu indentasi */
  .nav-below-header .main-nav ul ul {
    padding-left: 1rem !important;
    border-top: 1px solid #F1F5F9 !important;
  }

  /* Hamburger ke-1 di inside-header: tetap tampil */
  .inside-header .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 0.5rem !important;
    cursor: pointer !important;
  }
}