/* ==========================================================
   TEMA TERANG — "Ivory & Gold". Aktif bila html[data-tema="terang"].
   Tema gelap (bawaan) = style.css + adegan.css apa adanya.
   Objek "perangkat" (jam, kartu GO, radar, ponsel, laptop,
   ikon kanal) sengaja tetap gelap: di atas gading ia tampil
   seperti benda nyata berbahan kaca & logam.
   ========================================================== */
html[data-tema="terang"] {
  color-scheme: light;
  --malam: #f6f0e4;
  --hutan: #efe6d4;
  --hutan-2: #e7dcc6;
  --gading: #14261e;
  --redup: #4a5c53;
  --redup-2: #7b8a82;
  --emas: #a8832f;
  --emas-muda: #8c6a22;
  --emas-tua: #6b5019;
  --garis: rgba(140, 106, 34, .28);
  --garis-halus: rgba(20, 38, 30, .1);
  --kaca: rgba(255, 252, 244, .82);
  --merah: #b4513f;
}
html[data-tema="terang"] body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(212, 178, 106, .22), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(170, 205, 185, .35), transparent 65%),
    var(--malam);
}
html[data-tema="terang"] body::after { opacity: .035; mix-blend-mode: multiply; }

/* navigasi & menu */
html[data-tema="terang"] .nav.padat, html[data-tema="terang"].kunci-gulir .nav { background: rgba(246, 240, 228, .88); }
html[data-tema="terang"] .lembar-menu { background: radial-gradient(600px 400px at 80% 0%, rgba(212, 178, 106, .2), transparent 70%), rgba(246, 240, 228, .98); }
html[data-tema="terang"] .bahasa-daftar { background: rgba(255, 252, 244, .98); }
html[data-tema="terang"] .burger span:not(.vh) { background: var(--gading); }
html[data-tema="terang"] .bahasa-tombol, html[data-tema="terang"] .burger, html[data-tema="terang"] .tema-tombol { background: rgba(255, 255, 255, .5); }

/* tombol & judul emas */
html[data-tema="terang"] .tombol-emas { background: linear-gradient(135deg, #f0dca6, #d4b26a 55%, #b8914a); color: #1a140a; box-shadow: 0 10px 28px -14px rgba(140, 106, 34, .7); }
html[data-tema="terang"] .tombol-garis { color: var(--emas-tua); background: rgba(255, 255, 255, .45); }
html[data-tema="terang"] .hero-judul { background: linear-gradient(180deg, #c9a45a 0%, #a8832f 45%, #6b5019 100%); -webkit-background-clip: text; background-clip: text; }
html[data-tema="terang"] .hero-judul .titik { color: #a8832f; -webkit-text-fill-color: #a8832f; }
html[data-tema="terang"] .hero-kabut { background: radial-gradient(700px 500px at 72% 45%, rgba(212, 178, 106, .25), transparent 70%), radial-gradient(500px 400px at 20% 80%, rgba(150, 200, 175, .35), transparent 70%); }
html[data-tema="terang"] .jam-sesi { color: var(--emas-tua); }
html[data-tema="terang"] .undangan { background: rgba(212, 178, 106, .16); color: var(--emas-tua); }

/* kemampuan / GO */
html[data-tema="terang"] .kem-butir.aktif { background: linear-gradient(90deg, rgba(212, 178, 106, .22), transparent); }
html[data-tema="terang"] .rel-butir.aktif { background: rgba(212, 178, 106, .16); }
html[data-tema="terang"] .rel-butir.aktif .rel-no { color: #fff; }
html[data-tema="terang"] .peraga-hasil { color: var(--emas-tua) !important; }
html[data-tema="terang"] .rem-baris .rem-kartu { background: rgba(255, 255, 255, .55); }
html[data-tema="terang"] .rem-kata { background: #14261e; color: #efdca9; }
html[data-tema="terang"] .jaga-masuk { stroke: rgba(20, 38, 30, .3); }
html[data-tema="terang"] .jaga-harga { stroke: #a8832f; }
html[data-tema="terang"] .lg-harga::before { background: #a8832f; }
html[data-tema="terang"] .lg-masuk::before { background: repeating-linear-gradient(90deg, rgba(20, 38, 30, .45) 0 4px, transparent 4px 8px); }

/* kanal, penghubung, lencana */
html[data-tema="terang"] .alir-garis { background: linear-gradient(90deg, transparent, rgba(140, 106, 34, .4), transparent); }
html[data-tema="terang"] .lencana li { background: rgba(180, 81, 63, .07); }
html[data-tema="terang"] .bab-kanal, html[data-tema="terang"] .bab-aman { background: radial-gradient(800px 420px at 50% 60%, rgba(212, 178, 106, .18), transparent 70%); }
html[data-tema="terang"] .kom-cahaya { background: radial-gradient(circle, rgba(37, 211, 102, .12), rgba(212, 178, 106, .18) 40%, transparent 70%); }

/* formulir, chat, mitra */
html[data-tema="terang"] .isian input, html[data-tema="terang"] .chat-tulis textarea, html[data-tema="terang"] .pembuat input { background: #fffdf8; color: var(--gading); border-color: rgba(20, 38, 30, .16); }
html[data-tema="terang"] .salon-form, html[data-tema="terang"] .salon-chat { box-shadow: 0 50px 90px -60px rgba(60, 45, 10, .5); }
html[data-tema="terang"] .chat-kepala, html[data-tema="terang"] .chat-tulis { background: rgba(255, 255, 255, .55); }
html[data-tema="terang"] .gelembung.sarah { background: #fff; border-color: rgba(20, 38, 30, .08); color: var(--gading); }
html[data-tema="terang"] .gelembung.sistem { color: var(--emas-tua); }
html[data-tema="terang"] .mengetik { background: #fff; }
html[data-tema="terang"] .chat-saran button { color: var(--emas-tua); background: rgba(212, 178, 106, .14); }
html[data-tema="terang"] .hasil-baris code { background: #fffdf8; color: var(--gading); border: 1px solid var(--garis-halus); }
html[data-tema="terang"] .hasil-judul { color: var(--emas-tua); }
html[data-tema="terang"] .pesan-galat { color: #9f3b2b; }
html[data-tema="terang"] .pintu-kartu { background: rgba(255, 255, 255, .5); }
html[data-tema="terang"] .pintu-utama { background: linear-gradient(170deg, rgba(212, 178, 106, .22), rgba(212, 178, 106, .05) 70%); }
html[data-tema="terang"] .kaki { background: #efe6d4; }
html[data-tema="terang"] .tautan-kecil, html[data-tema="terang"] .catatan-kecil a { color: var(--emas-tua); }

/* tombol tema */
.tema-tombol { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--garis-halus); background: rgba(255, 255, 255, .03); color: var(--redup); display: grid; place-items: center; padding: 0; transition: color .3s ease, border-color .3s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.tema-tombol:hover { color: var(--emas-muda); border-color: var(--garis); transform: rotate(-20deg); }
.tema-tombol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tema-tombol .ikon-matahari { display: none; }
html[data-tema="terang"] .tema-tombol .ikon-bulan { display: none; }
html[data-tema="terang"] .tema-tombol .ikon-matahari { display: block; }
/* transisi halus saat berganti tema (hanya saat tombol diketuk) */
html.ganti-tema, html.ganti-tema * { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease !important; }
@media (max-width: 420px) { .tema-tombol { width: 36px; height: 36px; } }

/* Objek "perangkat" tetap memakai palet gelap di tema terang (teksnya harus terang) */
html[data-tema="terang"] :is(.kartu-go, .radar, .jam-pil, .simpul-ikon, .ikon-bulat, .hp-badan, .apung) {
  --gading: #f3ede1; --redup: #a3b5ab; --redup-2: #6f857a; --emas: #d4b26a; --emas-muda: #efdca9; --emas-tua: #8f7133;
  --garis: rgba(212, 178, 106, .2); --garis-halus: rgba(243, 237, 225, .08); color: var(--gading);
}
html[data-tema="terang"] .kartu-go .tombol-garis { color: var(--emas-muda); background: rgba(212, 178, 106, .06); }
html[data-tema="terang"] .kartu-pita { background: #14261e; }
/* gelembung emas: gading terang, teks gelap */
html[data-tema="terang"] :is(.gt-1, .tokoh-ucap) { background: linear-gradient(135deg, #f6e6b8, #e2c47f); color: #1a140a; }
html[data-tema="terang"] .gt-2 { background: #fffdf8; color: #1a140a; box-shadow: 0 12px 30px -14px rgba(60, 45, 10, .45); }
html[data-tema="terang"] .gt-3 { background: #14261e; color: #efdca9; border-color: rgba(212, 178, 106, .3); }