/* Tema terang/gelap untuk semua halaman (landing, dokumen, login, dasbor). html[data-theme] diatur theme-init.js / theme.js.
   Token dasar ada di :root (style.css / site.css); mode gelap menukar pasangan ink/chalk agar teks dan tombol tetap terbaca. */
:root{--surface:#fff;--surface-2:#f3f3f3;--text:#1f1f1f;--border:#c9c9c9;--canvas:#f1f0ec;--tint-b:#eef4ff}
html[data-theme=dark]{color-scheme:dark;--surface:#1b1a19;--surface-2:#262422;--text:#f1ede7;--border:#3d3a36;--canvas:#121110;--tint-b:#1d2636;--pumice:#121110;--stone:#1d1b19;--ink:#f1ede7;--chalk:#121110;--muted:#a8a29a;--sulfur:#4d4a1f}
html[data-theme=dark] body{background:var(--pumice);color:var(--ink)}
html[data-theme=dark] header.nav{background:color-mix(in srgb,#121110 92%,transparent)}
html[data-theme=dark] .pillnav a:hover{background:var(--ink);color:var(--chalk)}
html[data-theme=dark] .btn.primary{color:#070607;border-color:var(--ember)}
html[data-theme=dark] .doc code{background:#2a2725}
html[data-theme=dark] .doc pre{background:#0b0a09}
html[data-theme=dark] .doc h2{border-top-color:#5a5651}
html[data-theme=dark] .doc th,html[data-theme=dark] .doc td{border-bottom-color:#5a5651}
html[data-theme=dark] .doc th{color:#a8a29a}
html[data-theme=dark] .doc a{color:#ff9a6b}
html[data-theme=dark] .callout{color:#070607}
html[data-theme=dark] [aria-label=Language]{background:rgba(30,28,26,.92)!important;border-color:rgba(255,255,255,.2)!important}
html[data-theme=dark] [aria-label=Language] a{color:#eee!important}
html[data-theme=dark] [aria-label=Language] a[aria-current=true]{background:#eee!important;color:#111!important}
/* tombol tema mengambang (kanan bawah, sejajar EN | ID) */
.fl{position:fixed;z-index:2147483000;display:flex;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.fl-r{right:8px;bottom:34px}
.fl button{display:grid;place-items:center;width:30px;height:26px;border:0;border-radius:999px;background:transparent;color:#222;cursor:pointer}
.fl button[aria-pressed=true]{background:#222;color:#fff}
.fl button:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
html[data-theme=dark] .fl{background:rgba(30,28,26,.92);border-color:rgba(255,255,255,.2)}
html[data-theme=dark] .fl button{color:#eee}
html[data-theme=dark] .fl button[aria-pressed=true]{background:#eee;color:#111}
/* tampilan v2: tombol bahasa & tema dalam satu kapsul mengambang di kanan bawah (#fl-dock), anak-anaknya berkelas in-bar */
#fl-dock{position:fixed;right:16px;bottom:16px;z-index:2147483000;display:flex;gap:4px;align-items:center;padding:4px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.1);color:#1d1d1f}
html[data-theme=dark] #fl-dock{background:rgba(28,28,30,.8);border-color:rgba(255,255,255,.14);color:#f5f5f7}
#fl-dock .in-bar{border:0!important}
@media print{#fl-dock{display:none}}
.fl.in-bar,[aria-label=Language].in-bar{position:static!important;box-shadow:none!important;background:transparent!important;border:1px solid var(--hair,rgba(0,0,0,.16))!important;height:32px;align-items:center;padding:2px!important;flex:none}
.fl.in-bar button{width:28px;height:26px;padding:0!important;border:0!important;border-radius:999px!important;color:inherit;display:grid;place-items:center}.fl.in-bar button:hover{background:transparent}
.fl.in-bar button[aria-pressed=true],[aria-label=Language].in-bar [aria-current=true],[aria-label=Language].in-bar [aria-pressed=true]{background:#1d1d1f!important;color:#fff!important}
[aria-label=Language].in-bar a,[aria-label=Language].in-bar button{font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif!important;padding:6px 9px!important;color:inherit!important;background:transparent!important;border-radius:999px!important;height:26px;display:inline-flex;align-items:center}
html[data-theme=dark] .fl.in-bar button[aria-pressed=true],html[data-theme=dark] [aria-label=Language].in-bar [aria-current=true],html[data-theme=dark] [aria-label=Language].in-bar [aria-pressed=true]{background:#f5f5f7!important;color:#000!important}
/* cadangan geser halaman (lihat theme-init.js & site.js): hanya isi (main, footer) yang bergeser, header tetap */
html.vt-in main,html.vt-in footer{animation:vtf-in .6s cubic-bezier(.2,.8,.2,1) both}
html.vt-out main,html.vt-out footer{animation:vtf-out .32s cubic-bezier(.4,0,1,1) both}
@keyframes vtf-in{from{transform:translateX(80px);opacity:0}}@keyframes vtf-out{to{transform:translateX(-80px);opacity:0}}