/* Header situs utama (14 Nov 2026; warna tema Akademik): SATU gaya untuk semua halaman ber-header homeNavApp().
   Markup: scripts/templat/header-beranda.html → node scripts/sync-header.mjs (jangan sunting <nav data-nls-header> di halaman).
   Sengaja tidak bergantung pada Tailwind CDN / hasil build atau font halaman, agar tampil sama di beranda, blog, program, dll.
   Warna HANYA dari token /lib/nls-tema.css (var(--nls-*)); kelas warna Tailwind di templat ditimpa di bawah. */

.nls-header,
.nls-header button,
.nls-header a,
.nls-header p,
.nls-header span:not(.material-symbols-outlined) {
    font-family: var(--nls-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* Lebar isi header sama di semua halaman (beberapa halaman mendefinisikan .container-max sendiri) */
.nls-header > .container-max { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; }

/* Merek: selalu satu baris */
.nls-header .nls-brand { flex-shrink: 0; }
.nls-header .nls-brand > span { white-space: nowrap; }
@media (max-width: 420px) {
    .nls-header .nls-brand { gap: 8px !important; }
    .nls-header .nls-brand > span { font-size: 1.2rem; }
}

/* ===== Warna tema (token /lib/nls-tema.css). Awalan :root .nls-header[data-nls-header] menang dari Tailwind & theme.css ===== */
:root .nls-header[data-nls-header] { background-color: var(--nls-surface) !important; border-color: var(--nls-line) !important; }
:root.dark nav.nls-header[data-nls-header] { background-color: var(--nls-surface) !important; border-color: var(--nls-line) !important; }
:root .nls-header[data-nls-header] .text-on-background,
:root .nls-header[data-nls-header] .text-slate-800,
:root .nls-header[data-nls-header] .text-slate-700 { color: var(--nls-text) !important; }
:root .nls-header[data-nls-header] .text-on-surface-variant,
:root .nls-header[data-nls-header] .text-slate-600,
:root .nls-header[data-nls-header] .text-slate-500 { color: var(--nls-muted) !important; }
:root .nls-header[data-nls-header] .text-primary,
:root .nls-header[data-nls-header] .hover\:text-primary:hover { color: var(--nls-primary) !important; }
:root .nls-header[data-nls-header] .border-primary { border-color: var(--nls-primary) !important; }
:root .nls-header[data-nls-header] .hover\:bg-primary\/5:hover { background-color: var(--nls-soft) !important; }
:root .nls-header[data-nls-header] .bg-\[\#FF8A00\] { background-color: var(--nls-accent) !important; color: var(--nls-on-accent) !important; }
:root .nls-header[data-nls-header] .border-gray-100,
:root .nls-header[data-nls-header] .border-slate-200,
:root .nls-header[data-nls-header] .border-blue-200 { border-color: var(--nls-line) !important; }
:root .nls-header[data-nls-header] .bg-blue-50\/50,
:root .nls-header[data-nls-header] .bg-slate-50,
:root .nls-header[data-nls-header] .bg-slate-100 { background-color: var(--nls-soft) !important; }
/* menu tarik-turun & laci HP */
:root .nls-header[data-nls-header] .absolute.bg-white,
:root .nls-header[data-nls-header] [x-show="isMobileMenuOpen"] { background-color: var(--nls-surface) !important; border-color: var(--nls-line) !important; }
:root .nls-header[data-nls-header] [x-show="activeDesktopMenu"] a:hover { background-color: var(--nls-soft) !important; }

/* Merek */
:root .nls-header[data-nls-header] .nls-brand { color: var(--nls-primary) !important; }

/* Tombol Try Out + label CBT */
:root .nls-header[data-nls-header] .nls-nav-tryout {
    background: var(--nls-soft) !important;
    border: 1.5px solid var(--nls-line) !important;
    padding: 0.38rem 0.65rem 0.38rem 0.85rem !important;
    border-radius: var(--nls-radius-pill) !important;
    gap: 0.45rem !important;
    white-space: nowrap;
    flex-shrink: 0;
}
:root .nls-header[data-nls-header] .nls-nav-tryout:hover { border-color: var(--nls-primary) !important; }
:root .nls-header[data-nls-header] .nls-nav-tryout .text-slate-800 { color: var(--nls-text) !important; }
:root .nls-header[data-nls-header] .nls-nav-tryout__cbt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.14rem 0.45rem !important;
    border-radius: var(--nls-radius-pill) !important;
    background: var(--nls-primary) !important;
    color: var(--nls-on-primary) !important;
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Tombol utama "Yuk Belajar" (aksen tema) */
:root .nls-header[data-nls-header] .nls-nav-cta {
    background: var(--nls-accent) !important;
    color: var(--nls-on-accent) !important;
    font-weight: 800 !important;
    padding: 0.58rem 1.25rem !important;
    border-radius: var(--nls-radius-pill) !important;
    white-space: nowrap;
    box-shadow: var(--nls-shadow-sm) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}
:root .nls-header[data-nls-header] .nls-nav-cta:hover {
    transform: translateY(-1px) !important;
    background: var(--nls-accent-hover) !important;
    color: var(--nls-on-accent) !important;
}