/* Mode gelap + ukuran huruf. Mode gelap hanya aktif di halaman informasi (lihat skrip di <head>); donasi & event/e-tiket dikecualikan. */
html[data-huruf="1"] main, html[data-huruf="1"] .footer { zoom: 1.1; }
html[data-huruf="2"] main, html[data-huruf="2"] .footer { zoom: 1.22; }

html[data-tema="dark"] {
  color-scheme: dark;
  --bg: #0d1512; --bg-2: #111b17; --paper: #15201c; --ink: #e8efeb; --ink-2: #c5d1cb; --muted: #94a69e; --line: #263530;
  --em: #46c19c; --em-l: #16302a; --gold: #d2aa62;
}
html[data-tema="dark"] ::selection { background: #0b6b54; }
html[data-tema="dark"] .btn-primary { background: #0b6b54; color: #fff; }
html[data-tema="dark"] .btn-primary:hover { background: #0f8466; }
html[data-tema="dark"] .badge { background: #0b6b54; }
html[data-tema="dark"] .nav { background: rgba(13,21,18,.78); }
html[data-tema="dark"] .nav.scrolled { background: rgba(13,21,18,.92); box-shadow: 0 6px 30px -18px rgba(0,0,0,.8); }
html[data-tema="dark"] .nav-panel, html[data-tema="dark"] .nav-search, html[data-tema="dark"] .nav-tema { background: var(--paper); }
html[data-tema="dark"] .burger span, html[data-tema="dark"] .burger span::before, html[data-tema="dark"] .burger span::after { background: var(--ink); }
html[data-tema="dark"] .drawer { background: var(--paper); border-color: var(--line); }
html[data-tema="dark"] .page-hero { background: linear-gradient(180deg, #12261f, var(--bg)); }
html[data-tema="dark"] input, html[data-tema="dark"] textarea, html[data-tema="dark"] select { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
/* kotak peringatan / catatan */
html[data-tema="dark"] :is(.dz-warn, .qf-dup, .cr-w, .sh-info, .kb-msg.err, .kj-note, .prose .note, .kj-chg, .kj-lv.soon, .pill.pay) { background: #2a2515; color: #e7d6a0 !important; }
html[data-tema="dark"] :is(.app-msg.err, .dn-note, .dn-pill.bad, .qf-err) { background: #3a1f1c; color: #f2b8b2; }
html[data-tema="dark"] :is(.kj-card.st-pending, .kj-card.st-libur) { background: var(--bg-2); border-color: var(--line); }
html[data-tema="dark"] .sh-tw tr.jum td, html[data-tema="dark"] .sh-tw tr.jum th { background: #1a2a24; }
html[data-tema="dark"] .q-rs mark { background: #5a4a1c; color: #fff; }
html[data-tema="dark"] .kh-k small em.wt { background: #232d29; color: var(--muted); }
html[data-tema="dark"] img { filter: brightness(.92); }
html[data-tema="dark"] .nav-logo img, html[data-tema="dark"] .footer img { filter: none; }

/* tombol & panel tampilan */
.nav-tema { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--em); background: #fff; font: 700 15px var(--f-display); cursor: pointer; transition: background .25s, border-color .25s; }
.nav-tema:hover { background: var(--em-l); border-color: var(--em); }
@media (max-width: 760px) { .nav-cta .nav-tema { display: none; } }
.drawer a.drawer-tema, .drawer button.drawer-tema { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.drawer button.drawer-tema:hover { background: var(--em-l); }
.drawer button.drawer-tema b { flex: none; width: 20px; text-align: center; color: var(--em); font-family: var(--f-display); }
.tema-pop { position: fixed; z-index: 120; top: calc(var(--nav-h) + 8px); right: max(14px, 4vw); width: min(300px, calc(100vw - 28px)); padding: 16px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }
.tema-pop[hidden] { display: none; }
.tema-pop h4 { font: 700 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tema-pop h4 + .tema-seg { margin-bottom: 14px; }
.tema-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.tema-seg button { padding: 9px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14px var(--f-body); cursor: pointer; }
.tema-seg button[aria-pressed="true"] { background: var(--em); color: #fff; box-shadow: 0 6px 14px -8px rgba(11,107,84,.9); }
html[data-tema="dark"] .tema-seg button[aria-pressed="true"] { background: #0b6b54; }
.tema-seg.hs button:nth-child(1) { font-size: 13px; } .tema-seg.hs button:nth-child(2) { font-size: 16px; } .tema-seg.hs button:nth-child(3) { font-size: 19px; }
.tema-note { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); }
html[data-tema="dark"] .subnav { background: rgba(13,21,18,.92); }
html[data-tema="dark"] .pl-b { --pl-bg: #2a2417; --pl-k: #e0bf7e; --pl-mute: #b9a883; --pl-line: rgba(224,191,126,.2); color: #f0e6cf; }
.dt-off { position: fixed; z-index: 130; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin-inline: auto; padding: 10px 16px; border-radius: 14px; background: #2b2616; color: #f0e2b2; font-size: 13.5px; line-height: 1.45; text-align: center; box-shadow: 0 14px 34px -16px rgba(0,0,0,.6); }