/* DIBANGKITKAN oleh scripts/tema-isi.mjs — JANGAN disunting langsung. Tema "Akademik" untuk isi halaman domain utama. */
/* 1. Palet: biru/langit/nila/sian → navy, oranye → merah tua, slate → abu tema, token merek → tema (amber/ungu/hijau/merah tetap) */
html:root {
    --color-blue-50: #f2f5f9;
    --color-blue-100: #e3e9f1;
    --color-blue-200: #c7d3e2;
    --color-blue-300: #a0b4cc;
    --color-blue-400: #6f8bad;
    --color-blue-500: #4a6a91;
    --color-blue-600: #2f5179;
    --color-blue-700: #1e3a5f;
    --color-blue-800: #182f4d;
    --color-blue-900: #13243b;
    --color-blue-950: #0c1727;
    --color-sky-50: #f2f5f9;
    --color-sky-100: #e3e9f1;
    --color-sky-200: #c7d3e2;
    --color-sky-300: #a0b4cc;
    --color-sky-400: #6f8bad;
    --color-sky-500: #4a6a91;
    --color-sky-600: #2f5179;
    --color-sky-700: #1e3a5f;
    --color-sky-800: #182f4d;
    --color-sky-900: #13243b;
    --color-sky-950: #0c1727;
    --color-indigo-50: #f2f5f9;
    --color-indigo-100: #e3e9f1;
    --color-indigo-200: #c7d3e2;
    --color-indigo-300: #a0b4cc;
    --color-indigo-400: #6f8bad;
    --color-indigo-500: #4a6a91;
    --color-indigo-600: #2f5179;
    --color-indigo-700: #1e3a5f;
    --color-indigo-800: #182f4d;
    --color-indigo-900: #13243b;
    --color-indigo-950: #0c1727;
    --color-cyan-50: #f2f5f9;
    --color-cyan-100: #e3e9f1;
    --color-cyan-200: #c7d3e2;
    --color-cyan-300: #a0b4cc;
    --color-cyan-400: #6f8bad;
    --color-cyan-500: #4a6a91;
    --color-cyan-600: #2f5179;
    --color-cyan-700: #1e3a5f;
    --color-cyan-800: #182f4d;
    --color-cyan-900: #13243b;
    --color-cyan-950: #0c1727;
    --color-orange-50: #fbf3f3;
    --color-orange-100: #f6e2e3;
    --color-orange-200: #edc4c7;
    --color-orange-300: #e09aa0;
    --color-orange-400: #cf6870;
    --color-orange-500: #bd414b;
    --color-orange-600: #a92b35;
    --color-orange-700: #8f222b;
    --color-orange-800: #741d24;
    --color-orange-900: #5e1a20;
    --color-orange-950: #350b0f;
    --color-slate-50: #f4f5f7;
    --color-slate-100: #eceff3;
    --color-slate-200: #d9dee5;
    --color-slate-300: #c0c7d1;
    --color-slate-400: #9aa6b4;
    --color-slate-500: #6b7684;
    --color-slate-600: #5a6573;
    --color-slate-700: #3a4553;
    --color-slate-800: #263140;
    --color-slate-900: #161c24;
    --color-slate-950: #0e1217;
    --color-primary: #1e3a5f;
    --color-on-primary: #ffffff;
    --color-primary-container: #2f5179;
    --color-on-primary-container: #e3e9f1;
    --color-secondary: #8f222b;
    --color-secondary-container: #a92b35;
    --color-on-secondary-container: #ffffff;
    --color-surface: #f4f5f7;
    --color-surface-bright: #f4f5f7;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f0f2f5;
    --color-surface-container: #e8edf3;
    --color-surface-container-high: #dde3ea;
    --color-on-surface: #16202c;
    --color-on-surface-variant: #5a6573;
    --color-primary-fixed: #dbe4ef;
    --color-primary-fixed-dim: #a0b4cc;
    --color-on-primary-fixed: #0c1727;
    --color-on-background: #16202c;
    --color-surface-alt: #f0f2f5;
    --color-deep-navy: #1e2a38;
    --color-action-blue: #2f5179;
    --color-brand-blue: #1e3a5f;
    --color-brand-light: #2f5179;
    --color-brand-surface: #f4f5f7;
    --color-surface-light: #f4f5f7;
    --color-border-muted: #d9dee5;
}
/* 1b. Kelas teks token: harus menang dari "a { color: inherit }" CSS lain yang tak berlapis (mis. privat/tailwind.css) */
:root .text-on-secondary-container, :root .text-on-primary, :root .text-on-primary-container { color: var(--color-on-secondary-container) !important; }
:root .text-on-primary { color: var(--color-on-primary) !important; } :root .text-on-primary-container { color: var(--color-on-primary-container) !important; }
/* 2. Judul memakai huruf Fraunces */
:root body h1, :root body h2, :root body h3:not(.uppercase) { font-family: var(--nls-font-heading) !important; letter-spacing: -0.005em !important; }
:root body .prose :is(h1, h2, h3) { font-family: var(--nls-font-heading) !important; }
/* 3. Kelas warna bebas yang dipakai halaman */
:root .bg-\[\#0284c7\] { background-color: var(--nls-c-navy) !important; }
:root .bg-\[\#091E3A\] { background-color: var(--nls-c-footer) !important; }
:root .bg-\[\#0A2540\] { background-color: var(--nls-c-footer) !important; }
:root .bg-\[\#FF8A00\] { background-color: var(--nls-c-red) !important; color: var(--nls-on-accent-solid) !important; }
:root .bg-\[\#FF8A00\]\/20 { background-color: color-mix(in srgb, var(--nls-c-red) 20%, transparent) !important; }
:root .border-\[\#0284c7\] { border-color: var(--nls-c-navy) !important; }
:root .border-\[\#FF8A00\] { border-color: var(--nls-c-red) !important; }
:root .border-\[\#FF8A00\]\/40 { border-color: color-mix(in srgb, var(--nls-c-red) 40%, transparent) !important; }
:root.dark .dark\:bg-\[\#0B132B\] { background-color: var(--nls-c-dk-bg) !important; }
:root.dark .dark\:bg-\[\#0b132b\] { background-color: var(--nls-c-dk-bg) !important; }
:root.dark .dark\:bg-\[\#0f182e\] { background-color: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:bg-\[\#111A33\] { background-color: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:bg-\[\#131D38\] { background-color: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:bg-\[\#131D38\]\/95 { background-color: color-mix(in srgb, var(--nls-c-dk-surface) 95%, transparent) !important; }
:root.dark .dark\:bg-\[\#131d38\] { background-color: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:from-\[\#0B132B\] { --tw-gradient-from: var(--nls-c-dk-bg) !important; }
:root.dark .dark\:from-\[\#0f182e\] { --tw-gradient-from: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:from-\[\#111A33\] { --tw-gradient-from: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:to-\[\#0B132B\] { --tw-gradient-to: var(--nls-c-dk-bg) !important; }
:root.dark .dark\:to-\[\#0f182e\] { --tw-gradient-to: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:via-\[\#0f182e\] { --tw-gradient-via: var(--nls-c-dk-surface) !important; }
:root.dark .dark\:via-\[\#131d38\] { --tw-gradient-via: var(--nls-c-dk-surface) !important; }
:root .focus\:ring-\[\#0284C7\]:focus { --tw-ring-color: var(--nls-c-navy) !important; }
:root .focus\:ring-\[\#FF8A00\]:focus { --tw-ring-color: var(--nls-c-red) !important; }
:root .from-\[\#0E9BDF\] { --tw-gradient-from: var(--nls-c-navy) !important; }
:root .from-\[\#FF8A00\] { --tw-gradient-from: var(--nls-c-red) !important; }
:root .group:hover .group-hover\:text-\[\#0284c7\] { color: var(--nls-c-navy) !important; }
:root .group:hover .group-hover\:text-\[\#FF8A00\] { color: var(--nls-c-red) !important; }
:root .hover\:bg-\[\#0284c7\]:hover { background-color: var(--nls-c-navy) !important; }
:root .hover\:bg-\[\#ff9d24\]:hover { background-color: var(--nls-c-red) !important; color: var(--nls-on-accent-solid) !important; }
:root .text-\[\#006493\] { color: var(--nls-c-navy) !important; }
:root .text-\[\#0284C7\] { color: var(--nls-c-navy) !important; }
:root .text-\[\#0284c7\] { color: var(--nls-c-navy) !important; }
:root .text-\[\#0A2540\] { color: var(--nls-c-navy) !important; }
:root .text-\[\#0E9BDF\] { color: var(--nls-c-navy) !important; }
:root .text-\[\#FF8A00\] { color: var(--nls-c-red) !important; }
:root .to-\[\#0284C7\] { --tw-gradient-to: var(--nls-c-navy) !important; }
:root .to-\[\#0369A1\] { --tw-gradient-to: var(--nls-c-navy) !important; }
:root .to-\[\#0A2540\] { --tw-gradient-to: var(--nls-c-footer) !important; }
:root .to-\[\#0B5A8A\] { --tw-gradient-to: var(--nls-c-navy) !important; }
:root .to-\[\#0E9BDF\] { --tw-gradient-to: var(--nls-c-navy) !important; }
:root .to-\[\#EA580C\] { --tw-gradient-to: var(--nls-c-red) !important; }
:root .to-\[\#FF6B00\] { --tw-gradient-to: var(--nls-c-red) !important; }
:root .to-\[\#FF8A00\] { --tw-gradient-to: var(--nls-c-red) !important; }
:root .to-\[\#FF8A00\]\/5 { --tw-gradient-to: color-mix(in srgb, var(--nls-c-red) 5%, transparent) !important; }
:root .via-\[\#0284C7\] { --tw-gradient-via: var(--nls-c-navy) !important; }
:root .via-\[\#0B5A8A\] { --tw-gradient-via: var(--nls-c-navy) !important; }
:root .via-\[\#0E9BDF\] { --tw-gradient-via: var(--nls-c-navy) !important; }
/* 4. Aturan warna merek di theme.css (terang & gelap) → token tema (hanya di halaman domain utama) */
html.dark:root body {
    background-color: var(--nls-c-dk-bg) !important
}
html.dark:root main {
    background-color: var(--nls-c-dk-bg) !important
}
html.dark:root section, html.dark:root .bg-surface, html.dark:root .bg-surface-bright, html.dark:root .bg-surface-cream, html.dark:root .bg-surface-container-lowest, html.dark:root .bg-surface-container-low, html.dark:root .bg-surface-container, html.dark:root .bg-surface-container-high, html.dark:root .bg-surface-container-highest, html.dark:root .bg-slate-50, html.dark:root .bg-slate-100, html.dark:root .bg-gray-50, html.dark:root .bg-gray-100, html.dark:root section[class*="bg-[linear-gradient"], html.dark:root section[class*="bg-gradient-to"], html.dark:root div[class*="bg-gradient-to-b from-[#F0F7FF]"], html.dark:root div[class*="bg-gradient-to-b from-surface"] {
    background-color: var(--nls-c-dk-bg) !important
}
html.dark:root .tonal-card:hover, html.dark:root .elevated-card:hover, html.dark:root .card:hover, html.dark:root .bg-white:hover {
    border-color: var(--nls-c-dk-primary) !important
}
html.dark:root .text-primary, html.dark:root .text-primary-container, html.dark:root .text-action-blue, html.dark:root a.text-primary {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root a.text-primary:hover {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .text-secondary-container {
    color: var(--nls-c-dk-red) !important
}
html.dark:root .bg-primary-fixed, html.dark:root .bg-primary-fixed-dim {
    background-color: color-mix(in srgb, var(--nls-c-navy-2) 20%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--nls-c-dk-primary) 40%, transparent) !important;
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .bg-primary-fixed *, html.dark:root .bg-primary-fixed-dim * {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root span.bg-primary, html.dark:root .bg-primary:not(button):not(a):not(div.w-12):not(div.w-10):not(div.w-16) {
    background-color: var(--nls-c-navy-2) !important
}
html.dark:root span.bg-secondary-container, html.dark:root .bg-secondary-container, html.dark:root .bg-secondary-fixed, html.dark:root .text-on-secondary-container.bg-secondary-container {
    background-color: var(--nls-c-dk-red-solid) !important
}
html.dark:root .bg-primary-container {
    background-color: color-mix(in srgb, var(--nls-c-navy-2) 20%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--nls-c-dk-primary) 40%, transparent) !important;
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .bg-primary-container *, html.dark:root .text-on-primary-container {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .bg-blue-50, html.dark:root .bg-blue-100, html.dark:root .bg-sky-50, html.dark:root .bg-sky-100 {
    background-color: color-mix(in srgb, var(--nls-c-navy-2) 40%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--nls-c-dk-primary) 60%, transparent) !important;
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .bg-blue-50 *, html.dark:root .bg-blue-100 * {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root nav, html.dark:root header, html.dark:root .fixed.top-0, html.dark:root .sticky.top-0 {
    background-color: color-mix(in srgb, var(--nls-c-dk-bg) 96%, transparent) !important
}
html.dark:root .absolute.bg-white, html.dark:root [x-show="activeDesktopMenu"] {
    background-color: var(--nls-c-dk-surface) !important
}
html.dark:root [x-show="isMobileMenuOpen"] {
    background-color: var(--nls-c-dk-bg) !important
}
html.dark:root footer h2, html.dark:root footer h3, html.dark:root footer .text-\[\#0B5A8A\] {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root footer a:hover {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root footer .icon-\[mdi--map-marker\], html.dark:root footer .icon-\[mdi--phone\], html.dark:root footer .icon-\[mdi--email\], html.dark:root footer .icon-\[mdi--camera\] {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root footer button.bg-\[\#0B5A8A\], html.dark:root footer a.bg-\[\#0B5A8A\] {
    background-color: var(--nls-c-navy-2) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--nls-c-navy-2) 30%, transparent) !important
}
html.dark:root footer button.bg-\[\#0B5A8A\]:hover, html.dark:root footer a.bg-\[\#0B5A8A\]:hover {
    background-color: var(--nls-c-navy-2) !important
}
html.dark:root details, html.dark:root .faq-card, html.dark:root [x-data*="open"], html.dark:root [x-data*="faq"] {
    background-color: var(--nls-c-dk-surface) !important
}
:root .theme-toggle-btn:hover {
    border-color: var(--nls-c-navy);
    color: var(--nls-c-navy)
}
html.dark:root .mentor-testimonial-card {
    background: color-mix(in srgb, var(--nls-c-dk-surface) 95%, transparent)
}
:root .partner-logo-item:hover {
    border-color: var(--nls-c-navy) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--nls-c-navy) 18%, transparent) !important
}
:root .admin-card-osn {
    background: linear-gradient(145deg, var(--nls-c-soft) 0%, var(--nls-c-soft) 100%) !important;
    border: 2.5px solid var(--nls-c-on-dark) !important;
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--nls-c-navy) 25%, transparent) !important
}
html.dark:root .admin-card-osn {
    border: 2.5px solid var(--nls-c-dk-primary) !important
}
:root .hero-badge-pill {
    background: color-mix(in srgb, var(--nls-c-navy) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--nls-c-navy) 28%, transparent) !important;
    color: var(--nls-c-navy) !important
}
html.dark:root .hero-badge-pill {
    background: color-mix(in srgb, var(--nls-c-navy-2) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--nls-c-dk-primary) 35%, transparent) !important;
    color: var(--nls-c-dk-primary) !important
}
:root .cal-header-card {
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--nls-c-navy) 8%, transparent) !important
}
html.dark:root .cal-header-card {
    background-color: var(--nls-c-dk-surface) !important
}
html.dark:root .article-header-card {
    background-color: var(--nls-c-dk-surface) !important
}
:root .cal-header-icon-box {
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--nls-c-navy) 30%, transparent);
    border: 2px solid var(--nls-c-line);
    background: linear-gradient(135deg, var(--nls-c-soft) 0%, var(--nls-c-soft) 100%) !important
}
html.dark:root .cal-header-icon-box {
    border-color: var(--nls-c-dk-primary) !important
}
:root .tab-cat-btn.active-osn {
    background: linear-gradient(135deg, var(--nls-c-navy) 0%, var(--nls-c-navy) 100%) !important;
    border-color: var(--nls-c-on-dark) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--nls-c-navy) 45%, transparent) !important
}
:root .badge-cat-osn {
    background: var(--nls-c-soft) !important;
    color: var(--nls-c-navy) !important;
    border: 1.5px solid var(--nls-c-on-dark) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--nls-c-navy) 20%, transparent) !important
}
html.dark:root .badge-cat-osn {
    color: var(--nls-c-dk-primary) !important;
    border: 1.5px solid var(--nls-c-dk-primary) !important
}
:root .badge-cat-all {
    background: var(--nls-c-soft) !important;
    border: 1.5px solid var(--nls-c-line) !important
}
html.dark:root .badge-cat-all {
    color: var(--nls-c-dk-primary) !important;
    border: 1.5px solid var(--nls-c-dk-primary) !important
}
html.dark:root .article-card-image-wrap {
    background-color: var(--nls-c-dk-bg) !important
}
:root article h2:hover, :root article h3:hover, :root .article-card h2:hover, :root .article-card-title:hover {
    color: var(--nls-c-navy) !important
}
html.dark:root article, html.dark:root .article-card, html.dark:root [class*="card-accent"] {
    background-color: var(--nls-c-dk-surface) !important
}
html.dark:root article h2:hover, html.dark:root article h3:hover, html.dark:root .article-card-title:hover {
    color: var(--nls-c-dk-primary) !important
}
html.dark:root .article-modal-card {
    background-color: var(--nls-c-dk-surface) !important
}
html:root:not(.dark) [class*="bg-sky-50"][class*="border-sky-500"] {
    background: var(--nls-c-dk-soft) !important;
    border: 2px solid var(--nls-c-dk-primary) !important;
    box-shadow: 0 3px 0 var(--nls-c-navy-2) !important;
    color: var(--nls-c-dk-primary) !important
}
html.dark:root [class*="bg-brand-950"][class*="border-brand-500"] {
    background: color-mix(in srgb, var(--nls-c-navy-2) 18%, transparent) !important;
    border: 2px solid var(--nls-c-dk-primary) !important;
    box-shadow: 0 3px 0 var(--nls-c-navy-2) !important
}
html:root:not(.dark) [class*="bg-brand-600"][class*="text-white"] {
    background: var(--nls-c-navy-2) !important;
    border-color: var(--nls-c-dk-primary) !important;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--nls-c-navy-2) 35%, transparent) !important
}
html.dark:root [class*="bg-brand-500"][class*="text-white"] {
    background: var(--nls-c-navy-2) !important;
    border-color: var(--nls-c-dk-primary) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--nls-c-navy-2) 40%, transparent) !important
}
:root .reforge-card:hover, :root .tonal-card:hover, :root #bimbel .tonal-card:hover {
    border-color: var(--nls-c-navy) !important;
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--nls-c-navy) 12%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--nls-c-navy) 8%, transparent) !important
}
html.dark:root .reforge-card:hover, html.dark:root .tonal-card:hover {
    border-color: var(--nls-c-dk-primary) !important
}
:root .btn-electric, :root a.bg-primary, :root button.bg-primary {
    background-color: var(--nls-c-navy) !important;
    border: 1px solid var(--nls-c-navy) !important;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--nls-c-navy) 20%, transparent) !important
}
:root .btn-electric:hover, :root a.bg-primary:hover, :root button.bg-primary:hover {
    background-color: var(--nls-c-navy) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--nls-c-navy) 35%, transparent) !important
}