.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(15,39,71,.08)}
.nav-wrap{max-width:1720px;margin:0 auto;display:grid;grid-template-columns:minmax(280px,1fr) auto minmax(280px,1fr);align-items:center;column-gap:22px;padding:0 30px;min-height:88px}
.brand{grid-column:1;justify-self:start;display:flex;align-items:center;text-decoration:none;min-width:0;max-width:min(520px,100%)}
.brand-image-only img{display:block;width:auto;max-width:100%;height:68px;object-fit:contain;object-position:left center}
.main-nav{grid-column:2;justify-self:center;display:flex;align-items:center;justify-content:center;gap:4px;margin:0}
.menu-toggle{grid-column:3;justify-self:end;display:none}
.main-nav>a,.nav-parent-link{font-family:var(--nav-font,Inter,Segoe UI,Arial,sans-serif);font-size:var(--nav-size,14px);color:var(--nav-text,#10213d)!important;background:var(--nav-bg,transparent);display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:12px 11px;border-radius:9px;white-space:nowrap;font-weight:500;transition:.18s}.main-nav>a:hover,.nav-parent-link:hover{color:var(--nav-active,#1769e0)!important;background:color-mix(in srgb,var(--nav-active,#1769e0) 8%,transparent)}.main-nav>a.active{color:var(--nav-active,#1769e0)!important}.front-nav-icon{width:18px;height:18px;flex:0 0 18px;color:var(--nav-icon,#1769e0);overflow:visible}.front-nav-icon.child-icon{color:var(--child-icon,var(--nav-icon,#1769e0))}.nav-dropdown{position:relative;font-family:var(--nav-font);font-size:var(--nav-size)}.nav-dropdown:after{content:"";position:absolute;left:-4px;right:-4px;top:100%;height:16px}.submenu-toggle{display:none}.dropdown-menu{display:grid;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(7px);position:absolute;z-index:120;top:calc(100% + 8px);left:50%;min-width:240px;max-width:360px;background:var(--sub-bg,#fff);border:1px solid rgba(17,42,80,.10);border-radius:14px;padding:8px;box-shadow:0 18px 46px rgba(15,39,71,.18);transition:.15s ease;translate:-50% 0}.nav-dropdown:hover>.dropdown-menu,.nav-dropdown:focus-within>.dropdown-menu,.nav-dropdown.open>.dropdown-menu{visibility:visible;opacity:1;pointer-events:auto;transform:none}.dropdown-menu a{display:flex!important;align-items:center;gap:9px;padding:11px 12px!important;border-radius:9px;color:var(--sub-text,#17233b)!important;text-decoration:none;font-size:calc(var(--nav-size,14px) - 1px);font-family:var(--nav-font);font-weight:400;white-space:normal}.dropdown-menu a:hover,.dropdown-menu a:focus{background:var(--sub-active-bg,#eef4ff)!important;color:var(--sub-active-text,#1558be)!important}.nav-caret{font-size:11px;font-weight:400}
.brand-upload-box .brand-preview-shell{margin-top:12px;padding:14px 18px;border:1px solid #dbe5f0;border-radius:14px;background:linear-gradient(135deg,#fff,#f7faff);display:flex;align-items:center;min-height:110px}.brand-upload-box .brand-preview{width:auto!important;max-width:100%!important;height:auto!important;max-height:100px!important;object-fit:contain!important;margin:0!important}
@media(max-width:1400px){.nav-wrap{grid-template-columns:minmax(230px,.8fr) auto minmax(80px,.8fr);padding:0 20px}.brand{max-width:390px}.brand-image-only img{height:58px}.main-nav>a,.nav-parent-link{padding:11px 8px}}
@media(max-width:1180px){.nav-wrap{display:grid;grid-template-columns:1fr auto;min-height:74px;padding:0 16px}.brand{grid-column:1;max-width:min(520px,calc(100vw - 90px))}.brand-image-only img{height:54px;max-width:100%}.menu-toggle{grid-column:2;display:block;border:1px solid #dbe4ef;background:#fff;border-radius:9px;width:42px;height:42px}.main-nav{grid-column:1/-1;justify-self:stretch;display:none;position:absolute;top:74px;left:12px;right:12px;background:#fff;border:1px solid #e0e7f0;border-radius:14px;box-shadow:0 18px 45px rgba(15,39,71,.16);padding:10px;align-items:stretch;max-height:calc(100vh - 95px);overflow:auto}.main-nav.open{display:grid}.main-nav>a,.nav-parent-link{width:100%;padding:12px}.nav-dropdown{display:grid;grid-template-columns:1fr 42px}.submenu-toggle{display:block;border:0;background:#edf3fb;border-radius:8px;color:#234e79}.dropdown-menu{position:static;grid-column:1/-1;display:none;visibility:visible;opacity:1;pointer-events:auto;transform:none;translate:none;box-shadow:none;border:0;border-left:2px solid var(--nav-active,#1769e0);border-radius:0;margin:4px 0 6px 16px;padding:4px 0 4px 8px}.nav-dropdown:hover>.dropdown-menu{display:none}.nav-dropdown.open>.dropdown-menu{display:grid}.nav-dropdown:after{display:none}}
@media(max-width:600px){.nav-wrap{min-height:68px}.brand-image-only img{height:46px}.main-nav{top:68px}}
.pro-article{max-width:1080px;margin:34px auto;padding:40px}.pro-article h1{font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.2}.article-breadcrumb{display:flex;gap:8px;align-items:center;color:#718096;font-size:13px;margin-bottom:20px}.article-breadcrumb a{color:var(--a);text-decoration:none}.pro-article .rich-content{font-size:17px;line-height:1.85;color:#324158}@media(max-width:720px){.pro-article{margin:14px;padding:22px}.pro-article .rich-content{font-size:16px}}


/* ============================================================
   SMKN 5 - Penyesuaian logo & navbar
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */

/* Hapus card/background logo: logo kembali tampil bersih */
.brand.brand-image-only{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    clip-path:none !important;
    padding:0 !important;
    overflow:visible !important;
    min-height:0 !important;
    transform:none !important;
}
.brand.brand-image-only::before,
.brand.brand-image-only::after{
    content:none !important;
    display:none !important;
}

/* Logo diberi ruang dari sisi kiri agar tidak terlalu mepet */
@media (min-width:1181px){
    .site-header .header-inner,
    .site-header .nav-inner,
    .main-header .header-inner{
        padding-left:34px;
    }

    .brand.brand-image-only{
        margin-left:18px;
    }
}

/* Navbar digeser lagi ~2x dibanding revisi sebelumnya.
   Angka bertingkat supaya tetap aman pada desktop yang lebih sempit. */
@media (min-width:1601px){
    .main-nav{transform:translateX(420px)}
}
@media (min-width:1401px) and (max-width:1600px){
    .main-nav{transform:translateX(240px)}
}
@media (min-width:1181px) and (max-width:1400px){
    .main-nav{transform:translateX(108px)}
}

/* Di tablet/HP jangan dipaksa bergeser */
@media (max-width:1180px){
    .brand.brand-image-only{
        margin-left:8px;
    }
    .main-nav{
        transform:none !important;
    }
}


/* ============================================================
   SUBMENU FRONTEND — WARNA DARI ADMIN + TAMPILAN PROFESIONAL
   Menimpa rule lama site.css yang memaksa background putih.
   Berlaku untuk seluruh 25 template.
   ============================================================ */

body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu{
    background:var(--sub-bg,#ffffff) !important;
    color:var(--sub-text,#17233b) !important;
    border:1px solid color-mix(in srgb,var(--sub-text,#17233b) 12%,transparent) !important;
    border-radius:16px !important;
    padding:9px !important;
    box-shadow:
        0 18px 42px rgba(15,39,71,.16),
        0 4px 12px rgba(15,39,71,.06) !important;
    overflow:hidden;
}

/* aksen kecil di bagian atas submenu agar menyatu dengan navbar */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu::before{
    content:"";
    position:absolute;
    top:0;
    left:14px;
    right:14px;
    height:3px;
    border-radius:0 0 8px 8px;
    background:var(--nav-active,#1769e0);
    opacity:.9;
}

/* item submenu */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a{
    position:relative;
    display:flex !important;
    align-items:center;
    gap:10px;
    min-height:43px;
    padding:10px 12px !important;
    border-radius:10px !important;
    color:var(--sub-text,#17233b) !important;
    background:transparent !important;
    font-weight:500 !important;
    line-height:1.35;
    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease !important;
}

/* separator halus antar item */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a + a::before{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    top:-1px;
    height:1px;
    background:color-mix(in srgb,var(--sub-text,#17233b) 9%,transparent);
}

/* hover/aktif memakai warna admin */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a:hover,
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a:focus,
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a.active{
    background:var(--sub-active-bg,#eef4ff) !important;
    color:var(--sub-active-text,#1558be) !important;
    transform:translateX(2px);
    box-shadow:inset 3px 0 0 var(--sub-active-text,#1558be);
}

/* warna ikon submenu tetap mengikuti menu anak */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu .front-nav-icon{
    color:var(--child-icon,var(--nav-icon,#1769e0)) !important;
}

/* Desktop: posisi lebih rapat dan presisi ke parent */
@media(min-width:1181px){
    body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu{
        top:calc(100% + 5px) !important;
        min-width:260px !important;
        max-width:380px !important;
    }
}

/* Mobile: background admin tetap dipakai, tetapi tanpa floating shadow */
@media(max-width:1180px){
    body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu{
        background:var(--sub-bg,#ffffff) !important;
        border-left:3px solid var(--nav-active,#1769e0) !important;
        border-radius:10px !important;
        box-shadow:none !important;
        margin:5px 0 7px 14px !important;
        padding:6px !important;
    }
}


/* ============================================================
   GARIS DEKORATIF DI BAWAH NAVBAR
   Biru — emas — biru dengan kilau tengah.
   Tidak mengganggu submenu dan berlaku pada 25 template.
   ============================================================ */
body[class*="theme-"] .site-header{
    position:sticky;
    border-bottom:0 !important;
    box-shadow:0 4px 18px rgba(15,39,71,.055) !important;
}

/* garis utama */
body[class*="theme-"] .site-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    z-index:5;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb,var(--nav-active,#1769e0) 70%,#fff) 7%,
            var(--nav-active,#1769e0) 29%,
            #e3b13b 48%,
            #f5cf68 50%,
            #e3b13b 52%,
            var(--nav-active,#1769e0) 71%,
            color-mix(in srgb,var(--nav-active,#1769e0) 70%,#fff) 93%,
            transparent 100%
        );
    box-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 4px 10px rgba(18,72,150,.08);
}

/* bentuk kilau/diamond halus di tengah */
body[class*="theme-"] .site-header::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-2px;
    width:88px;
    height:8px;
    z-index:6;
    pointer-events:none;
    transform:translateX(-50%);
    background:
        linear-gradient(
            115deg,
            transparent 0 28%,
            rgba(231,181,58,.18) 29% 42%,
            #e3b13b 43% 49%,
            #f6d97c 50%,
            #e3b13b 51% 57%,
            rgba(231,181,58,.18) 58% 71%,
            transparent 72%
        );
    filter:drop-shadow(0 0 5px rgba(227,177,59,.24));
}

/* Pada template yang memakai warna aktif berbeda, bagian biru otomatis mengikuti warna navbar admin. */
body[class*="theme-"] .site-header .nav-wrap{
    position:relative;
    z-index:7;
}

/* Tablet/HP: tetap elegan namun lebih tipis. */
@media(max-width:1180px){
    body[class*="theme-"] .site-header::after{
        height:3px;
    }
    body[class*="theme-"] .site-header::before{
        width:64px;
        height:6px;
        bottom:-1px;
    }
}


/* ============================================================
   NAVBAR BOTTOM ACCENT — PREMIUM RIBBON
   Lebih ringan, elegan, dan modern.
   Berlaku pada seluruh 25 template.
   ============================================================ */

/* matikan versi dekorasi sebelumnya */
body[class*="theme-"] .site-header::after{
    content:"" !important;
    position:absolute !important;
    left:28px !important;
    right:28px !important;
    bottom:-1px !important;
    height:3px !important;
    z-index:5 !important;
    pointer-events:none !important;
    border-radius:999px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb,var(--nav-active,#1769e0) 55%,transparent) 7%,
            var(--nav-active,#1769e0) 28%,
            color-mix(in srgb,var(--nav-active,#1769e0) 78%,#ffffff) 43%,
            #d9a928 49%,
            #f4d36f 50%,
            #d9a928 51%,
            color-mix(in srgb,var(--nav-active,#1769e0) 78%,#ffffff) 57%,
            var(--nav-active,#1769e0) 72%,
            color-mix(in srgb,var(--nav-active,#1769e0) 55%,transparent) 93%,
            transparent 100%
        ) !important;

    box-shadow:
        0 2px 8px color-mix(in srgb,var(--nav-active,#1769e0) 12%,transparent),
        0 1px 0 rgba(255,255,255,.7) inset !important;
}

/* pusat aksen seperti badge/ribbon kecil */
body[class*="theme-"] .site-header::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-5px !important;
    width:58px !important;
    height:10px !important;
    z-index:6 !important;
    pointer-events:none !important;
    transform:translateX(-50%) !important;

    background:
        linear-gradient(
            135deg,
            transparent 0 16%,
            rgba(217,169,40,.22) 17% 29%,
            #d9a928 30% 42%,
            #f4d36f 43% 50%,
            #d9a928 51% 58%,
            rgba(217,169,40,.22) 59% 71%,
            transparent 72% 100%
        ) !important;

    clip-path:polygon(
        0 50%,
        22% 18%,
        42% 18%,
        50% 0,
        58% 18%,
        78% 18%,
        100% 50%,
        78% 82%,
        58% 82%,
        50% 100%,
        42% 82%,
        22% 82%
    ) !important;

    filter:
        drop-shadow(0 2px 4px rgba(217,169,40,.18))
        drop-shadow(0 0 6px rgba(244,211,111,.10)) !important;
}

/* shadow navbar dibuat halus agar aksen terlihat premium */
body[class*="theme-"] .site-header{
    border-bottom:0 !important;
    box-shadow:
        0 8px 24px rgba(15,39,71,.045),
        0 1px 0 rgba(15,39,71,.025) !important;
}

/* opsi visual untuk layar lebar */
@media(min-width:1400px){
    body[class*="theme-"] .site-header::after{
        left:42px !important;
        right:42px !important;
    }
}

/* tablet dan HP: tetap tipis, tanpa efek berlebihan */
@media(max-width:1180px){
    body[class*="theme-"] .site-header::after{
        left:14px !important;
        right:14px !important;
        height:2px !important;
    }

    body[class*="theme-"] .site-header::before{
        width:46px !important;
        height:8px !important;
        bottom:-4px !important;
    }
}


/* ============================================================
   FIX LAYERING SUBMENU + PERTAHANKAN ORNAMEN GARIS NAVBAR
   ============================================================ */
body[class*="theme-"] .site-header{
    overflow:visible !important;
    isolation:isolate !important;
}

/* Dekorasi garis tetap di bawah seluruh elemen menu */
body[class*="theme-"] .site-header::before,
body[class*="theme-"] .site-header::after{
    z-index:2 !important;
    pointer-events:none !important;
}

/* Navbar dan dropdown berada di layer lebih tinggi */
body[class*="theme-"] .site-header .nav-wrap,
body[class*="theme-"] .site-header .main-nav,
body[class*="theme-"] .site-header .nav-dropdown{
    position:relative !important;
    z-index:20 !important;
}

body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu{
    z-index:9999 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Pastikan item submenu tidak tertutup dan warna admin tetap terbaca */
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu > a{
    position:relative !important;
    z-index:10000 !important;
    color:var(--sub-text,#17233b) !important;
}

/* Saat dropdown belum aktif, tetap mengikuti mekanisme show/hide bawaan */
body[class*="theme-"] .main-nav .nav-dropdown:not(:hover):not(:focus-within) > .dropdown-menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

body[class*="theme-"] .main-nav .nav-dropdown:hover > .dropdown-menu,
body[class*="theme-"] .main-nav .nav-dropdown:focus-within > .dropdown-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}


/* ============================================================
   FINAL NAVBAR ORNAMENT FIX v10
   Pertahankan layering submenu; perbaiki hanya visual garis.
   ============================================================ */
body[class*="theme-"] .site-header::after{
    content:"" !important;
    position:absolute !important;
    left:32px !important;
    right:32px !important;
    bottom:-1px !important;
    height:4px !important;
    border-radius:999px !important;
    pointer-events:none !important;
    z-index:2 !important;

    /* Biru -> biru muda -> emas -> biru muda -> biru.
       Zona emas dibuat lebih lebar agar benar-benar menyatu. */
    background:linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb,var(--nav-active,#1769e0) 30%,transparent) 4%,
        var(--nav-active,#1769e0) 17%,
        color-mix(in srgb,var(--nav-active,#1769e0) 72%,#ffffff) 36%,
        #9dbef0 43%,
        #d4b05b 47%,
        #efc34f 49%,
        #ffe394 50%,
        #efc34f 51%,
        #d4b05b 53%,
        #9dbef0 57%,
        color-mix(in srgb,var(--nav-active,#1769e0) 72%,#ffffff) 64%,
        var(--nav-active,#1769e0) 83%,
        color-mix(in srgb,var(--nav-active,#1769e0) 30%,transparent) 96%,
        transparent 100%
    ) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.88) inset,
        0 3px 8px color-mix(in srgb,var(--nav-active,#1769e0) 12%,transparent) !important;
}

/* Ornamen tengah menyatu dengan garis, tidak tampak ditempel */
body[class*="theme-"] .site-header::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-4px !important;
    width:72px !important;
    height:10px !important;
    transform:translateX(-50%) !important;
    pointer-events:none !important;
    z-index:3 !important;
    clip-path:polygon(
        0 50%, 30% 38%, 40% 22%, 47% 22%,
        50% 0, 53% 22%, 60% 22%, 70% 38%,
        100% 50%, 70% 62%, 60% 78%, 53% 78%,
        50% 100%, 47% 78%, 40% 78%, 30% 62%
    ) !important;
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,176,91,.22) 20%,
        #d4b05b 38%,
        #efc34f 46%,
        #ffe394 50%,
        #efc34f 54%,
        #d4b05b 62%,
        rgba(212,176,91,.22) 80%,
        transparent 100%
    ) !important;
    filter:
        drop-shadow(0 0 4px rgba(239,195,79,.34))
        drop-shadow(0 1px 2px rgba(126,89,10,.12)) !important;
}

/* Navbar/dropdown tetap di atas ornamen */
body[class*="theme-"] .site-header .nav-wrap,
body[class*="theme-"] .site-header .main-nav,
body[class*="theme-"] .site-header .nav-dropdown{
    position:relative !important;
    z-index:20 !important;
}
body[class*="theme-"] .main-nav .nav-dropdown > .dropdown-menu{
    z-index:9999 !important;
}

@media(min-width:1400px){
    body[class*="theme-"] .site-header::after{
        left:44px !important;
        right:44px !important;
    }
}
@media(max-width:1180px){
    body[class*="theme-"] .site-header::after{
        left:14px !important;
        right:14px !important;
        height:3px !important;
    }
    body[class*="theme-"] .site-header::before{
        width:54px !important;
        height:8px !important;
        bottom:-3px !important;
    }
}


/* ============================================================
   PENGATURAN HEADER & NAVBAR DARI ADMIN — GLOBAL 25 TEMPLATE
   Nilai posisi adalah adjustment dari desain desktop yang sudah ada.
   ============================================================ */
@media(min-width:1181px){
    body[class*="theme-"] .site-header .nav-wrap{
        min-height:var(--header-navbar-height,88px) !important;
    }
    body[class*="theme-"] .site-header .brand.brand-image-only{
        margin-left:calc(18px + var(--header-logo-shift,0px)) !important;
    }
    body[class*="theme-"] .site-header .brand-image-only img{
        height:var(--header-logo-height,68px) !important;
        max-height:calc(var(--header-navbar-height,88px) - 12px) !important;
    }
    body[class*="theme-"] .site-header .main-nav{
        gap:var(--header-menu-gap,4px) !important;
    }
    body[class*="theme-"] .site-header .main-nav>a,
    body[class*="theme-"] .site-header .nav-parent-link{
        font-size:var(--header-menu-font-size,14px) !important;
        font-weight:var(--header-nav-font-weight,500) !important;
    }
    body[class*="theme-"] .site-header .front-nav-icon{
        width:var(--header-nav-icon-size,18px) !important;
        height:var(--header-nav-icon-size,18px) !important;
        flex-basis:var(--header-nav-icon-size,18px) !important;
    }
    body[class*="theme-"] .site-header .dropdown-menu a{
        font-size:calc(var(--header-menu-font-size,14px) - 1px) !important;
        font-weight:var(--header-nav-font-weight,500) !important;
    }
}
@media(min-width:1601px){
    body[class*="theme-"] .site-header .main-nav{transform:translateX(calc(420px + var(--header-menu-shift,0px))) !important}
}
@media(min-width:1401px) and (max-width:1600px){
    body[class*="theme-"] .site-header .main-nav{transform:translateX(calc(240px + var(--header-menu-shift,0px))) !important}
}
@media(min-width:1181px) and (max-width:1400px){
    body[class*="theme-"] .site-header .main-nav{transform:translateX(calc(108px + var(--header-menu-shift,0px))) !important}
}
/* Tablet/HP tetap responsif; ukuran admin desktop tidak dipaksa ke mobile. */
@media(max-width:1180px){
    body[class*="theme-"] .site-header .main-nav{transform:none !important}
}


/* ============================================================
   FIX SLIDER UKURAN LOGO — ADMIN BENAR-BENAR MENGONTROL LOGO
   Logo tidak lagi dibatasi oleh tinggi navbar.
   Navbar otomatis memberi ruang jika logo lebih besar.
   Berlaku untuk seluruh 25 template.
   ============================================================ */
@media(min-width:1181px){
    body[class*="theme-"] .site-header .nav-wrap{
        min-height:max(
            var(--header-navbar-height,88px),
            calc(var(--header-logo-height,68px) + 18px)
        ) !important;
    }

    body[class*="theme-"] .site-header .brand.brand-image-only{
        min-height:var(--header-logo-height,68px) !important;
        display:flex !important;
        align-items:center !important;
        overflow:visible !important;
    }

    body[class*="theme-"] .site-header .brand-image-only img{
        height:var(--header-logo-height,68px) !important;
        max-height:none !important;
        width:auto !important;
        max-width:min(100%,620px) !important;
        object-fit:contain !important;
        object-position:left center !important;
        flex:0 0 auto !important;
    }
}

/* Ukuran admin desktop tidak dipaksakan ke HP/tablet agar navbar tetap responsif. */
@media(max-width:1180px){
    body[class*="theme-"] .site-header .brand-image-only img{
        max-height:none;
    }
}


/* Navbar correction: scoped to frontend header; keep existing menu behavior. */
body[class*="theme-"] .site-header .main-nav > a.active::after {
    content: "";
    position: absolute;
    top: auto !important;
    bottom: 4px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 3px !important;
    transform: none !important;
    pointer-events: none;
}
@media (max-width: 1180px) {
    body[class*="theme-"] .site-header .nav-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        grid-template-rows: auto auto;
        align-items: center;
        align-content: start;
        gap: 0 12px;
        height: auto !important;
        min-height: 68px !important;
        padding: 8px 16px !important;
    }
    body[class*="theme-"] .site-header .brand.brand-image-only {
        grid-column: 1;
        grid-row: 1;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    body[class*="theme-"] .site-header .brand-image-only img {
        width: auto !important;
        height: auto !important;
        max-height: 54px !important;
        max-width: 100% !important;
        object-fit: contain;
    }
    body[class*="theme-"] .site-header .menu-toggle {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        margin: 0 !important;
        background: #edf3fb !important;
        color: #10213d !important;
        border: 1px solid #c7d6e8 !important;
        border-radius: 9px;
        font-size: 24px !important;
        line-height: 1;
        cursor: pointer;
    }
    body[class*="theme-"] .site-header .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        translate: none !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60vh !important;
        max-height: min(60dvh, 480px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 8px 0 4px !important;
        padding: 8px !important;
        box-sizing: border-box;
        align-items: stretch !important;
        align-content: start !important;
        justify-content: stretch !important;
        gap: 4px !important;
        background: #fff !important;
    }
    body[class*="theme-"] .site-header .main-nav.open {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body[class*="theme-"] .site-header .main-nav > a,
    body[class*="theme-"] .site-header .main-nav .nav-parent-link {
        position: relative;
        min-width: 0;
        min-height: 44px;
        width: 100%;
        padding: 12px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.4 !important;
        font-size: 14px !important;
    }
    body[class*="theme-"] .site-header .main-nav > a.active {
        color: var(--nav-active, #1769e0) !important;
        background: #edf3fb !important;
        border-radius: 8px;
    }
    body[class*="theme-"] .site-header .main-nav > a.active::after {
        display: none !important;
        content: none !important;
    }
    body[class*="theme-"] .site-header .main-nav .nav-dropdown {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        width: 100%;
        min-width: 0;
        align-items: start;
        gap: 0 4px;
    }
    body[class*="theme-"] .site-header .main-nav .nav-parent-link {
        grid-column: 1;
        grid-row: 1;
    }
    body[class*="theme-"] .site-header .main-nav .nav-caret {
        display: none;
    }
    body[class*="theme-"] .site-header .main-nav .submenu-toggle {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: #edf3fb;
        color: #10213d;
        cursor: pointer;
    }
    /* Mobile dropdown uses document flow, and opens only via its arrow. */
    body[class*="theme-"] .site-header .main-nav .nav-dropdown > .dropdown-menu {
        position: static !important;
        grid-column: 1 / -1;
        grid-row: 2;
        inset: auto !important;
        transform: none !important;
        translate: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 4px 0 6px 12px !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }
    body[class*="theme-"] .site-header .main-nav .nav-dropdown.open > .dropdown-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    body[class*="theme-"] .site-header .main-nav .nav-dropdown > .dropdown-menu > a {
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        transform: none !important;
    }
    body[class*="theme-"] .site-header .menu-toggle:focus-visible,
    body[class*="theme-"] .site-header .submenu-toggle:focus-visible {
        outline: 2px solid #1769e0;
        outline-offset: 2px;
    }
}