/* =====================================================================
   gelap.css · Mode gelap dasbor (dimuat paling akhir).
   Konsep: "malam di kedai". Latar tinta navy, kartu permukaan yang sedikit lebih terang.
   Di gelap, kesan timbul datang dari permukaan yang lebih terang + sorot tipis di tepi atas,
   bukan dari bayangan (bayangan hampir tak terlihat di latar gelap).
   Semua aturan menempel ke html[data-gelap] (diatur tema-awal.js), jadi menang atas warna terang arah C.
   ===================================================================== */
html[data-gelap] {
  color-scheme: dark;
  --latar: #0b0e19; --kartu: #141a2b; --kartu-2: #192034; --kartu-3: #1e263d; --isian-latar: #10141f;
  --teks: #eef0f8; --redup: #a6acc4; --samar: #8a91ab; --teks-menu: rgba(238, 240, 248, .78);
  --garis: rgba(255, 255, 255, .07); --garis-kuat: rgba(255, 255, 255, .14); --garis-isian: #4b526e; --abu-latar: rgba(255, 255, 255, .07);
  --merek: #9fb0ff; --merek-tua: #c3cdff; --merek-terang: #4a5fc4; --merek-muda: rgba(142, 162, 255, .14); --merek-lembut: rgba(142, 162, 255, .07);
  --aksen: #ff8796; --aksen-teks: #ff9aa7; --aksen-muda: rgba(255, 135, 150, .14);
  --hijau: #5fd68a; --hijau-latar: rgba(95, 214, 138, .14); --kuning: #ffd264; --kuning-latar: rgba(255, 210, 100, .13); --kuning-garis: #e8b23a;
  --merah: #ff7f70; --merah-latar: rgba(255, 122, 107, .15); --biru: #8cb8ff; --biru-latar: rgba(122, 178, 255, .14);
  --abu: #c9cde0; --kepala-kaca: rgba(14, 18, 31, .72); --kepala-latar: rgba(16, 20, 34, .96);
  --tirai-menu: rgba(0, 0, 0, .45); --tirai-padat: rgba(6, 8, 14, .86); --tirai: rgba(3, 5, 12, .6);
  --s-hijau: #1d7f4c; --s-kuning: #e0a03a; --s-kuning-teks: #241600; --s-merah: #c63d53; --s-biru: #3d68c4; --s-ungu: #8a5fd6; --s-abu: #5f667e; --s-toska: #179086;
  --sorot-atas: inset 0 1px 0 rgba(255, 255, 255, .06);
  --timbul: var(--sorot-atas), 0 0 0 1px rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .7);
  --timbul-naik: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .4), 0 20px 44px -14px rgba(0, 0, 0, .85);
  background: #0b0e19;
}
html[data-gelap] body { background: #0b0e19; color: var(--teks); }
html[data-gelap] body::before { background: radial-gradient(circle, rgba(64, 86, 190, .32) 0%, rgba(64, 86, 190, 0) 68%); opacity: 1; }
html[data-gelap] body::after { background: radial-gradient(circle, rgba(226, 86, 111, .16) 0%, rgba(226, 86, 111, 0) 68%); opacity: 1; }
html.ganti-tema, html.ganti-tema *, html.ganti-tema *::before, html.ganti-tema *::after {
  transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, box-shadow 360ms ease, fill 360ms ease !important;
}

/* Kepala dan panel */
html[data-gelap] .kepala { background: var(--kepala-kaca); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
html[data-gelap] .kepala.panel-buka, html[data-gelap] .panel-menu { background: #141a2b; }
html[data-gelap] .menu-kecil-isi, html[data-gelap] .menu-widget-isi { background: #171d30; border-color: rgba(255, 255, 255, .08); box-shadow: var(--sorot-atas), 0 24px 60px rgba(0, 0, 0, .6); }
html[data-gelap] .profil-kapsul { background: var(--kartu); border-color: var(--garis); }
html[data-gelap] .profil-kapsul:hover, html[data-gelap] .terbuka > .profil-kapsul { background: var(--kartu-2); }
html[data-gelap] .titik-angka { border-color: #0e1220; color: #2a0d13; }
html[data-gelap] .baru-kapsul, html[data-gelap] .baru-kapsul:hover, html[data-gelap] .terbuka > .baru-kapsul { color: #fff; background: linear-gradient(120deg, #3a4fb3, #5568cc 60%, #d0566f); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
html[data-gelap] .merek-ikon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* Sapaan */
html[data-gelap] .sapa-nama { background-image: linear-gradient(95deg, #c3cdff 0%, #9fa6ff 45%, #ff8fa0 90%); }
html[data-gelap] .pil-waktu { background: var(--kartu); color: var(--teks); box-shadow: var(--timbul); }
html[data-gelap] .pil-waktu i, html[data-gelap] .pil-waktu i::after { background: #3ddc84; }
html[data-gelap] .sapa-v3 .sejak a.sejak-pil, html[data-gelap] .sapa-v3 .sejak a.sejak-pil:hover { color: #9fb0ff; }
html[data-gelap] .sapa-v3 .sejak a.sejak-pil.merah, html[data-gelap] .sapa-v3 .sejak a.sejak-pil.merah:hover { color: #ff8a7a; }
html[data-gelap] .ajak-notif { background: var(--kartu); border-color: var(--garis); box-shadow: var(--sorot-atas); }
html[data-gelap] .chip-sembunyi { background: rgba(255, 255, 255, .04); }

/* Tombol */
html[data-gelap] .tombol:not(.tombol-utama):not(.tombol-hantu) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--teks); }
html[data-gelap] .tombol:not(.tombol-utama):not(.tombol-hantu):hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: var(--teks); }
html[data-gelap] .tombol-utama, html[data-gelap] .tombol-utama:hover { background: linear-gradient(120deg, #3a4fb3, #5568cc); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
html[data-gelap] .hero-utama .tombol-utama, html[data-gelap] .hero-utama .tombol-utama:hover { background: #fff; color: #1f2f6b; }
html[data-gelap] .hero-utama .tombol:not(.tombol-utama):not(.tombol-hantu) { background: rgba(6, 10, 28, .35); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* Kartu widget: permukaan + sorot atas */
html[data-gelap] .widget { background: var(--kartu); border: 0; box-shadow: var(--timbul); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-gelap] .widget.hero { background: transparent; box-shadow: none; }
.js html[data-gelap] .widget.terlihat.miring, html.js[data-gelap] .widget.terlihat.miring { box-shadow: var(--timbul-naik); }
html[data-gelap] .widget::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(159, 176, 255, .07), transparent 45%); }
html[data-gelap] .widget-hitung { background: rgba(142, 162, 255, .14); color: #c3cdff; }
html[data-gelap] .widget-alat { background: #1e263d; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }

/* Hero: gradasi lebih dalam supaya tidak menyilaukan */
html[data-gelap] .hero-isi { background: linear-gradient(135deg, #1a2660 0%, #2a3a88 46%, #6c3c7c 82%, #c64b64 118%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 44px -10px rgba(0, 0, 0, .7); }
html[data-gelap] .hero-isi::before { opacity: .7; }

/* Ringkasan */
html[data-gelap] .rk-baris:hover { background: rgba(255, 255, 255, .04); }
html[data-gelap] .meter i { background: linear-gradient(90deg, #6f84ff, #ff8796); }
html[data-gelap] .titik-slot i { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
html[data-gelap] .titik-slot i.selesai, html[data-gelap] .titik-slot i.belum, html[data-gelap] .titik-slot i.absen { box-shadow: none; }

/* To do */
html[data-gelap] .saring-tugas button { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: var(--teks); }
html[data-gelap] .saring-tugas button:hover { border-color: rgba(255, 255, 255, .3); }
html[data-gelap] .saring-tugas button[aria-pressed="true"] { background: #e7ebff; border-color: #e7ebff; color: #141a33; }
html[data-gelap] .saring-tugas button[aria-pressed="true"] i { color: #4a5578; }
html[data-gelap] .saring-tugas button.merah[aria-pressed="true"] { background: var(--s-merah); border-color: var(--s-merah); color: #fff; }
html[data-gelap] .saring-tugas button.merah[aria-pressed="true"] i { color: #fff; }
html[data-gelap] .tugas.v3 li + li { box-shadow: 0 -1px 0 rgba(255, 255, 255, .05); }
html[data-gelap] .tugas.v3 li:hover, html[data-gelap] .tugas.v3 li:focus-within { background: var(--kartu-3); box-shadow: var(--timbul-naik); }
html[data-gelap] .tugas.v3 li:hover + li { box-shadow: none; }
html[data-gelap] .tugas.v3 li:not(.selesai) .tugas-judul { color: var(--teks); }
html[data-gelap] .tugas.v3 li:not(.selesai):hover .tugas-judul { color: #c3cdff; }
html[data-gelap] .tugas li.lewat { background: linear-gradient(90deg, rgba(255, 122, 107, .1), transparent); }
html[data-gelap] .tugas-centang span { border-color: rgba(255, 255, 255, .28); }
html[data-gelap] .tugas-kaki { border-top-color: rgba(255, 255, 255, .06); }
html[data-gelap] .urgensi.p1, html[data-gelap] .l-hari-ini { background: #e0412f; color: #fff; }

/* Sedang berjalan */
html[data-gelap] .jl { background: var(--kartu-2); box-shadow: var(--timbul); }
html[data-gelap] .jl:hover { box-shadow: var(--timbul-naik); }
html[data-gelap] .jl-navy { --warna: #8ea2ff; }
html[data-gelap] .jl-pita { background: color-mix(in srgb, var(--warna) 20%, #192034); color: color-mix(in srgb, var(--warna) 55%, #ffffff); }
html[data-gelap] .jl-giliran { background: rgba(0, 0, 0, .28); color: var(--teks); }
html[data-gelap] .jl-kaki { border-top-color: rgba(255, 255, 255, .06); }
html[data-gelap] .jl .tombol.terkirim { background: var(--hijau-latar); color: var(--hijau); border-color: transparent; }
html[data-gelap] .cincin::before { background: var(--kartu-2); }
html[data-gelap] .orang-mini .avatar, html[data-gelap] .avatar { background: rgba(255, 135, 150, .16); color: #ffb0bb; }

/* Kosong, kilat */
html[data-gelap] .tugas-kosong img { filter: brightness(.92); }
html[data-gelap] .kilat { background: #262c45; box-shadow: var(--sorot-atas), 0 14px 36px rgba(0, 0, 0, .55); }

html[data-gelap] .menu-kecil-isi .notif-kaki a:hover, html[data-gelap] .menu-kecil-isi .mk-item:hover { background: rgba(255, 255, 255, .06); }
html[data-gelap] .menu-kecil-isi .segmen-tema { background: rgba(255, 255, 255, .06); }
html[data-gelap] .menu-kecil-isi .segmen-tema button[aria-pressed="true"] { background: #262e48; }
html[data-gelap] .menu-kecil-isi, html[data-gelap] .menu-widget-isi { box-shadow: var(--sorot-atas), 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 40px -8px rgba(0, 0, 0, .65); }