/* Mode gelap (hitam dan karbon). Aktif bila <html data-tema="gelap">, diatur tombol bulan sabit. Teks, logo, dan ikon putih keabuan. */

/* Tombol tema */
.tema-tombol { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; margin: 0 4px; transition: background .2s, transform .2s; }
.tema-tombol svg { width: 22px; height: 22px; }
.tema-tombol:hover { background: rgba(255,255,255,.16); transform: rotate(-12deg); }
.situs-header.is-gulir .tema-tombol { border-color: var(--border); }
.situs-header.is-gulir .tema-tombol:hover { background: var(--biru-muda); }
.bar-atas .tema-tombol { width: 40px; height: 40px; border-color: var(--border); color: var(--navy); margin: 0 2px; }
.bar-atas .tema-tombol:hover { background: var(--biru-muda); }
@media (max-width: 860px) { .nav-utama .tema-tombol { align-self: flex-start; margin: 6px 0; } }

html[data-tema="gelap"] {
  color-scheme: dark;
  --putih: #0B0C0F; --abu: #111317; --biru-muda: #131E2B; --border: #2A2E36; --navy: #EEF1F5;
  --teks: #E4E7EB; --teks-2: #A8AEB9; --hijau-muda: #12301F; --hijau-teks: #6FD6A0;
  --bayang: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.4);
  --bayang-l: 0 2px 6px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.55);
}
html[data-tema="gelap"] body { background: #0B0C0F; color: var(--teks); }
html[data-tema="gelap"] a { color: #7CBDF5; }
html[data-tema="gelap"] a:hover { color: #B7DAFA; }
html[data-tema="gelap"] h1, html[data-tema="gelap"] h2, html[data-tema="gelap"] h3 { color: #F1F3F6; }
html[data-tema="gelap"] .eyebrow { color: #7CBDF5; }

/* Header, hero, pita biru jadi karbon */
html[data-tema="gelap"] .situs-header { background: #0B0C0F; color: #EEF1F5; }
html[data-tema="gelap"] .situs-header.is-gulir { background: rgba(11,12,15,.92); color: #EEF1F5; box-shadow: 0 1px 0 #2A2E36; }
html[data-tema="gelap"] .nav-utama a { color: #E4E7EB; }
html[data-tema="gelap"] .nav-utama a:hover, html[data-tema="gelap"] .is-gulir .nav-utama a:hover { background: rgba(255,255,255,.1); color: #fff; }
html[data-tema="gelap"] .tema-tombol { border-color: #3A3F49; }
html[data-tema="gelap"] .tema-tombol:hover { background: rgba(255,255,255,.1); }
html[data-tema="gelap"] .situs-header.is-gulir .wordmark .logo-putih, html[data-tema="gelap"] .bar-atas .wordmark .logo-putih { display: block; }
html[data-tema="gelap"] .situs-header.is-gulir .wordmark .logo-warna, html[data-tema="gelap"] .bar-atas .wordmark .logo-warna { display: none; }
html[data-tema="gelap"] .hero, html[data-tema="gelap"] .di-biru, html[data-tema="gelap"] .hero-halaman, html[data-tema="gelap"] .band, html[data-tema="gelap"] .cta.di-biru {
  background: radial-gradient(900px 420px at 85% -10%, rgba(30,144,230,.20), transparent 60%), linear-gradient(135deg, #07080A 0%, #101419 100%); color: #EEF1F5; }
html[data-tema="gelap"] .hero .lingkaran { background: rgba(255,255,255,.04); }
html[data-tema="gelap"] .hero .eyebrow { color: #9CCBF3; }
html[data-tema="gelap"] .hero h1, html[data-tema="gelap"] .hero h2, html[data-tema="gelap"] .hero-halaman h1 { color: #F5F7FA; }
html[data-tema="gelap"] .hero__sub, html[data-tema="gelap"] .hero__catatan, html[data-tema="gelap"] .hero-halaman p { color: #BFC5CF; }
html[data-tema="gelap"] .tombol-putih { background: #E9EDF2; color: #0B0C0F; }
html[data-tema="gelap"] .tombol-putih:hover { background: #fff; color: #0B0C0F; }
html[data-tema="gelap"] .tombol-garis { color: #E4E7EB; border-color: #3A3F49; background: transparent; }
html[data-tema="gelap"] .tombol-garis:hover { background: #1A1D23; color: #fff; border-color: #5A6070; }
html[data-tema="gelap"] .tombol-garis-putih { color: #E9EDF2; border-color: rgba(233,237,242,.5); }
html[data-tema="gelap"] .situs-header:not(.is-gulir) .nav-utama .tombol-utama { background: #E9EDF2; color: #0B0C0F; }
html[data-tema="gelap"] .akun__masuk { background: #16181D; color: #EEF1F5; border-color: #3A3F49; }
html[data-tema="gelap"] .akun__masuk:hover { background: #1D2026; }
html[data-tema="gelap"] .akun__langganan, html[data-tema="gelap"] .akun__info { color: #A8AEB9; }
html[data-tema="gelap"] .nl-kotak, html[data-tema="gelap"] .nl-pilih { background: #16181D; color: #E4E7EB; }

/* Seksi */
html[data-tema="gelap"] .seksi { background: #0B0C0F; }
html[data-tema="gelap"] .seksi-abu { background: #111317; }
html[data-tema="gelap"] .seksi-muda { background: #0F1822; }
html[data-tema="gelap"] .seksi__sub, html[data-tema="gelap"] .catatan-kecil { color: #A8AEB9; }
html[data-tema="gelap"] .statistik { background: transparent; }

/* Kartu dan permukaan */
html[data-tema="gelap"] .kartu, html[data-tema="gelap"] .u .kartu, html[data-tema="gelap"] .kelas-kartu, html[data-tema="gelap"] .jalur-kartu,
html[data-tema="gelap"] .u .stat, html[data-tema="gelap"] .u .why-frame, html[data-tema="gelap"] .faq details, html[data-tema="gelap"] .u .faq details,
html[data-tema="gelap"] .gerbang__kartu, html[data-tema="gelap"] .perangkat, html[data-tema="gelap"] .modul-chip, html[data-tema="gelap"] .fakta__kartu,
html[data-tema="gelap"] .rantai li, html[data-tema="gelap"] .kartu-modul, html[data-tema="gelap"] .bagian-baris, html[data-tema="gelap"] .catatan-sel,
html[data-tema="gelap"] .jalur li, html[data-tema="gelap"] .jalur-urutan .langkah, html[data-tema="gelap"] .kelas-samping, html[data-tema="gelap"] .masukan-panel,
html[data-tema="gelap"] .tutor-panel { background: #16181D; border-color: #2A2E36; color: var(--teks); }
html[data-tema="gelap"] .kartu p, html[data-tema="gelap"] .kelas-kartu p, html[data-tema="gelap"] .jalur-kartu p { color: #A8AEB9; }
html[data-tema="gelap"] .u .kartu-harga-pro { background: linear-gradient(180deg, #181B21 0%, #121A24 100%); border-color: #2B8CE6; }
html[data-tema="gelap"] .u .kotak-akses, html[data-tema="gelap"] .u .kosong { background: #131E2B; border-color: #2A2E36; }
html[data-tema="gelap"] .u .kutipan blockquote, html[data-tema="gelap"] .poin-cek li, html[data-tema="gelap"] .u .founder-narasi p { color: #D5D9E0; }
html[data-tema="gelap"] .u .stat strong, html[data-tema="gelap"] .u .harga__nilai { color: #6DB8F5 !important; }
html[data-tema="gelap"] .u .stat span, html[data-tema="gelap"] .u .why-teks p { color: #A8AEB9; }
html[data-tema="gelap"] .u .persona-ilus { background: #1B2633; }
html[data-tema="gelap"] .u .kartu-persona:nth-child(3n+2) .persona-ilus { background: #2B2417; }
html[data-tema="gelap"] .u .kartu-persona:nth-child(3n) .persona-ilus { background: #15281E; }
html[data-tema="gelap"] .u .why-bar, html[data-tema="gelap"] .u .m-jejak, html[data-tema="gelap"] .perangkat__bar { background: #1D2026; border-color: #2A2E36; }
html[data-tema="gelap"] .u .why-bar em { color: #A8AEB9; }
html[data-tema="gelap"] .u .m-titik { background: #16181D; border-color: #2A2E36; color: #A8AEB9; }
html[data-tema="gelap"] .u .m-titik.nyala { background: #1570C8; color: #fff; border-color: #1570C8; }
html[data-tema="gelap"] .u .tag-daftar li { background: #1D2026; color: #A8AEB9; }
html[data-tema="gelap"] .u .lencana { background: #1B2633; color: #CFE6FB; }
html[data-tema="gelap"] .u .lencana-hijau, html[data-tema="gelap"] .lencana-tersedia { background: #12301F; color: #7FE0AB; }
html[data-tema="gelap"] .u .lencana-oranye, html[data-tema="gelap"] .lencana-segera { background: #33260F; color: #F7C46A; }
html[data-tema="gelap"] .u .lencana-abu, html[data-tema="gelap"] .lencana-rencana { background: #1D2026; color: #A8AEB9; border-color: #2A2E36; }
html[data-tema="gelap"] .u .filter button { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .u .filter button[aria-pressed="true"] { background: #E9EDF2; color: #0B0C0F; border-color: #E9EDF2; }
html[data-tema="gelap"] .u .why-no { background: #1570C8; }
html[data-tema="gelap"] .jalur-ilus, html[data-tema="gelap"] .harga-ilus { filter: none; }
html[data-tema="gelap"] .u .ikon-bulat, html[data-tema="gelap"] .cerita__ikon { background: #1B2633; color: #7CBDF5; }
html[data-tema="gelap"] .jalur__ikon { background: #1B2633; color: #7CBDF5; }
html[data-tema="gelap"] .poin-cek .ikon { color: #6FD6A0; }
html[data-tema="gelap"] .tab-babak button { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .tab-babak button[aria-selected="true"] { background: #E9EDF2; color: #0B0C0F; }
html[data-tema="gelap"] .u .why-kedua { border-color: #16181D; }

/* Footer */
html[data-tema="gelap"] .situs-footer { background: #07080A; color: #B9BFCA; }
html[data-tema="gelap"] .situs-footer a { color: #E4E7EB; }
html[data-tema="gelap"] .footer__newsletter .tombol-garis-putih, html[data-tema="gelap"] .footer__newsletter .tombol { color: #E4E7EB; border-color: #3A3F49; }

/* Ruang belajar */
html[data-tema="gelap"] .halaman-belajar, html[data-tema="gelap"] .penampil, html[data-tema="gelap"] .penampil iframe, html[data-tema="gelap"] .gerbang { background: #0B0C0F; }
html[data-tema="gelap"] .bar-atas, html[data-tema="gelap"] .sidebar { background: #111317; border-color: #2A2E36; color: #E4E7EB; }
html[data-tema="gelap"] .tombol-bar { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .tombol-bar:hover, html[data-tema="gelap"] .tema-tombol:hover { background: #1D2026; }
html[data-tema="gelap"] .cari input { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .sb-bagian a:hover, html[data-tema="gelap"] .sb-modul__kepala:hover, html[data-tema="gelap"] .sidebar__kaki a:hover { background: #1D2026; }
html[data-tema="gelap"] .sb-bagian a[aria-current="page"] { background: #17283A; color: #fff; }
html[data-tema="gelap"] .sb-modul__no { background: #1D2026; color: #E4E7EB; }
html[data-tema="gelap"] .akun__foto-huruf { background: #2A2E36; }
html[data-tema="gelap"] textarea, html[data-tema="gelap"] input[type="text"], html[data-tema="gelap"] input[type="email"] { background: #0F1115; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .penampil.is-memuat .penampil__muat { background: #16181D; }
html[data-tema="gelap"] .tutor-pesan.jawab { background: #1D2026; color: #E4E7EB; }
html[data-tema="gelap"] .tutor-chip { color: #E4E7EB; border-color: #3A3F49; }
html[data-tema="gelap"] .tutor-chip:hover { background: #1D2026; }
html[data-tema="gelap"] .tutor-status.galat { color: #FF8A80; } html[data-tema="gelap"] .tutor-status.ok { color: #7FE0AB; }
html[data-tema="gelap"] a.tombol-utama, html[data-tema="gelap"] a.tombol-utama:hover { color: #fff; }
html[data-tema="gelap"] .tutor-pil { color: #fff; }
/* Dipindah dari fun.css agar berlaku juga di halaman tulisan tangan */
html[data-tema="gelap"] .u .hero .hero__sub { background: rgba(0,0,0,.45); color: #EEF1F5; }
html[data-tema="gelap"] .u .why-tutor { background: linear-gradient(160deg, #131E2B, #16181D); }
html[data-tema="gelap"] .tutor-mock { background: #16181D; border-color: #2A2E36; }
html[data-tema="gelap"] .tm-jawab { background: #1D2026; color: #E4E7EB; }
html[data-tema="gelap"] .tm-isi { border-color: #2A2E36; color: #8D94A0; }
html[data-tema="gelap"] .langkah { background: #1B1E24; }
html[data-tema="gelap"] .langkah::before, html[data-tema="gelap"] .langkah-langganan li::before, html[data-tema="gelap"] .rantai__no { background: #2B8CE6; color: #fff; border-color: transparent; }
html[data-tema="gelap"] .langkah a { color: #8CC6F8; }
html[data-tema="gelap"] .langkah-rencana > span:not(.lencana) { color: #A8AEB9; }
html[data-tema="gelap"] .kelas-kartu h3 a, html[data-tema="gelap"] .kelas-tautan { color: #F1F3F6; }
html[data-tema="gelap"] .kelas-meta, html[data-tema="gelap"] .kelas-jalur, html[data-tema="gelap"] .jalur-untuk { color: #A8AEB9; }
html[data-tema="gelap"] .lencana { background: #1B2633; color: #CFE6FB; }
html[data-tema="gelap"] .u .harga-ilus, html[data-tema="gelap"] .jalur-ilus { background: transparent; }
html[data-tema="gelap"] .nav-tombol { color: #EEF1F5; }
html[data-tema="gelap"] .akun__masuk span, html[data-tema="gelap"] .akun__masuk { color: #EEF1F5; }
html[data-tema="gelap"] .perangkat__url, html[data-tema="gelap"] .peta__label, html[data-tema="gelap"] .fakta__label, html[data-tema="gelap"] .pilar__isi p, html[data-tema="gelap"] .lead { color: #A8AEB9; }
html[data-tema="gelap"] .pilar__nomor, html[data-tema="gelap"] .label-latihan { color: #7CBDF5; }
html[data-tema="gelap"] .pilar__gambar { background: #131E2B; }
html[data-tema="gelap"] .cerita__fakta, html[data-tema="gelap"] .kutip-masalah, html[data-tema="gelap"] .sasaran { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .peta__modul, html[data-tema="gelap"] .peta__babak { background: #16181D; color: #E4E7EB; border-color: #2A2E36; }
html[data-tema="gelap"] .tombol-utama { color: #fff; }
html[data-tema="gelap"] .chip-ambang, html[data-tema="gelap"] .pil, html[data-tema="gelap"] .pil-putih, html[data-tema="gelap"] .kartu-modul__kepala, html[data-tema="gelap"] .kartu-modul__badan { background: #16181D; color: #EEF1F5; border-color: #2A2E36; }
html[data-tema="gelap"] .pil-opsional { background: #33260F; color: #F7C46A; border-color: #5A431B; }
html[data-tema="gelap"] .label-latihan { background: #33260F; color: #F7C46A; }
html[data-tema="gelap"] .kartu-modul__no { color: #7CBDF5; }
html[data-tema="gelap"] .lewati { background: #E9EDF2; color: #0B0C0F; }
@media (max-width: 860px) {
  html[data-tema="gelap"] .nav-utama { background: #0B0C0F; color: #EEF1F5; border-top-color: #2A2E36; box-shadow: 0 16px 32px rgba(0,0,0,.6); }
  html[data-tema="gelap"] .nav-utama a { color: #EEF1F5; }
  html[data-tema="gelap"] .tema-tombol { color: #EEF1F5; border-color: #5A6070; }
}
html[data-tema="gelap"] .perangkat__bar { background: #23262D !important; border-color: #2A2E36; }
html[data-tema="gelap"] .perangkat__url { color: #C5CAD3; }
html[data-tema="gelap"] .catatan-modul { background: #2A2214; border-color: #5A431B; color: #F3DDB0; }
html[data-tema="gelap"] .catatan-modul * { color: inherit; }
html[data-tema="gelap"] .perangkat__url { background: #14161B; }

/* Beri masukan di mode gelap */
html[data-tema="gelap"] .masukan-pil { background: #16181D; color: #EEF1F5; border-color: #3A3F49; }
html[data-tema="gelap"] .masukan-pil:hover { background: #1D2026; border-color: #5AA9EE; }
html[data-tema="gelap"] .masukan-pil svg { color: #7CBDF5; }
html[data-tema="gelap"] .masukan-bagian { color: #7CBDF5; }
html[data-tema="gelap"] .masukan-tutup { color: #C5CAD3; }
html[data-tema="gelap"] .masukan-tutup:hover { background: #1D2026; color: #fff; }
html[data-tema="gelap"] .masukan-catatan, html[data-tema="gelap"] .masukan-hitung { color: #A8AEB9; }
html[data-tema="gelap"] .masukan-status.ok { color: #7FE0AB; } html[data-tema="gelap"] .masukan-status.galat { color: #FF8A80; }