/* Tema 2 "Kosmik": luar angkasa, neon magenta ke jingga, planet di kartu angka.
   Semua aturan berada di bawah html[data-tema="kosmik"], jadi tema lain tidak terpengaruh.
   Planet dan bintang digambar dengan gradien CSS (tanpa file gambar), supaya tetap ringan. */
html[data-tema="kosmik"] {
  --latar: #10051d; --panel: #1b0b30; --kartu: rgba(40, 16, 66, .72); --kartu-kuat: rgba(70, 30, 108, .7);
  --garis: rgba(255, 120, 190, .22); --teks: #fdf3ff; --redup: #c9a9d8;
  --utama: #ff3d9a; --utama-terang: #ff8cc4; --aksen: #ff9a3d; --aksen-terang: #ffc27a;
  --pelangi: linear-gradient(90deg, #ff3d9a, #ff9a3d);
  --biru-muda: rgba(255, 61, 154, .16);
  --judul: "Space Grotesk", Sora, "Segoe UI", system-ui, sans-serif;
  --tepi-neon: linear-gradient(135deg, rgba(255, 61, 154, .75), rgba(255, 154, 61, .45) 55%, rgba(120, 80, 255, .5));
}

/* Langit: bintang kecil yang diulang + kabut magenta dan jingga */
html[data-tema="kosmik"] body {
  background:
    radial-gradient(1.2px 1.2px at 22px 34px, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 118px 86px, rgba(255, 220, 240, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 176px 22px, rgba(255, 200, 150, .7), transparent 60%),
    radial-gradient(1px 1px at 64px 152px, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 204px 168px, rgba(210, 190, 255, .6), transparent 60%),
    radial-gradient(900px 560px at 8% -12%, rgba(255, 61, 154, .26), rgba(255, 61, 154, 0) 70%),
    radial-gradient(820px 560px at 104% 108%, rgba(255, 154, 61, .20), rgba(255, 154, 61, 0) 70%),
    radial-gradient(700px 500px at 60% 40%, rgba(110, 60, 220, .14), rgba(110, 60, 220, 0) 70%),
    var(--latar);
  background-size: 240px 200px, 240px 200px, 240px 200px, 240px 200px, 240px 200px, auto, auto, auto, auto;
  background-attachment: fixed;
}
html[data-tema="kosmik"] a { color: #ffb08a; }
html[data-tema="kosmik"] a:hover { color: #ffd2b8; }
html[data-tema="kosmik"] :focus-visible { outline-color: var(--aksen); }
html[data-tema="kosmik"] h2 { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--aksen-terang); }
html[data-tema="kosmik"] .mono { color: #e6cdf2; }

/* Menu samping */
html[data-tema="kosmik"] .samping { background: rgba(20, 7, 36, .78); border-right-color: rgba(255, 61, 154, .35); box-shadow: 1px 0 24px rgba(255, 61, 154, .12); }
html[data-tema="kosmik"] .merek b { letter-spacing: .08em; text-transform: uppercase; }
html[data-tema="kosmik"] .logo { background: linear-gradient(135deg, #ff3d9a, #ff9a3d); box-shadow: 0 0 22px rgba(255, 61, 154, .6); }
html[data-tema="kosmik"] .butir { color: #d9bfe6; text-transform: uppercase; letter-spacing: .07em; font-size: 13px; }
html[data-tema="kosmik"] .butir:hover, html[data-tema="kosmik"] .anak:hover { background: rgba(255, 61, 154, .12); }
html[data-tema="kosmik"] a.butir.aktif, html[data-tema="kosmik"] .anak.aktif {
  background: linear-gradient(90deg, rgba(255, 61, 154, .38), rgba(255, 154, 61, .1));
  border-color: rgba(255, 90, 170, .75); box-shadow: 0 0 16px rgba(255, 61, 154, .35), inset 0 0 12px rgba(255, 61, 154, .15);
}
html[data-tema="kosmik"] .anak { color: #cdb0dc; }
html[data-tema="kosmik"] .isi-grup > div { border-left-color: rgba(255, 61, 154, .3); }
html[data-tema="kosmik"] .tanda-segera { color: #b995c9; border-color: rgba(255, 120, 190, .3); }
html[data-tema="kosmik"] .inisial { background: linear-gradient(135deg, #ff3d9a, #7b4dff); color: #fff; box-shadow: 0 0 0 2px rgba(255, 61, 154, .5); border-radius: 50%; }
html[data-tema="kosmik"] .cari-atas { background: rgba(30, 12, 50, .8); border-radius: 99px; }

/* Panel berbingkai neon */
html[data-tema="kosmik"] .kartu, html[data-tema="kosmik"] .angka, html[data-tema="kosmik"] .kpi a, html[data-tema="kosmik"] dialog {
  border: 1px solid transparent;
  background: linear-gradient(rgba(27, 11, 48, .94), rgba(22, 8, 40, .94)) padding-box, var(--tepi-neon) border-box;
  box-shadow: 0 0 22px rgba(255, 61, 154, .10);
}
html[data-tema="kosmik"] .kartu-masuk { background: linear-gradient(rgba(27, 11, 48, .96), rgba(22, 8, 40, .96)) padding-box, var(--tepi-neon) border-box; box-shadow: 0 0 60px rgba(255, 61, 154, .25); }
html[data-tema="kosmik"] a.angka:hover, html[data-tema="kosmik"] .kpi a:hover { box-shadow: 0 0 28px rgba(255, 61, 154, .35); }
html[data-tema="kosmik"] .angka b, html[data-tema="kosmik"] .kpi .nilai, html[data-tema="kosmik"] .tahap .jumlah { text-shadow: 0 0 18px rgba(255, 140, 196, .55); }

/* Kartu angka di Beranda: tiap kartu punya planet sendiri */
html[data-tema="kosmik"] .kpi a { position: relative; overflow: hidden; min-height: 150px; }
html[data-tema="kosmik"] .kpi a > * { position: relative; z-index: 1; }
html[data-tema="kosmik"] .kpi .nilai { font-size: 40px; }
/* Planet di pojok kanan bawah, cukup redup supaya tulisan di atasnya tetap terbaca */
html[data-tema="kosmik"] .kpi a::before {
  content: ""; position: absolute; z-index: 0; right: -40px; bottom: -52px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd0e6, #ff4fa6 38%, #7a1458 72%, #2a0626 100%);
  box-shadow: 0 0 46px rgba(255, 61, 154, .55); opacity: .42;
}
/* cincin planet */
html[data-tema="kosmik"] .kpi a::after {
  content: ""; position: absolute; z-index: 0; right: -76px; bottom: -4px; width: 222px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(255, 170, 214, .55); border-left-color: transparent; transform: rotate(-18deg); opacity: .5;
}
html[data-tema="kosmik"] .kpi .cip { background: rgba(16, 5, 29, .78); border: 1px solid rgba(255, 255, 255, .14); }
html[data-tema="kosmik"] .kpi .label { color: #e6cdf2; }
html[data-tema="kosmik"] .kpi a:nth-child(2)::before { background: radial-gradient(circle at 32% 28%, #fff0c2, #ff9a3d 36%, #c2410c 70%, #3a0e05 100%); box-shadow: 0 0 56px rgba(255, 154, 61, .65); }
html[data-tema="kosmik"] .kpi a:nth-child(2)::after { display: none; }
html[data-tema="kosmik"] .kpi a:nth-child(3)::before { background: radial-gradient(circle at 32% 28%, #d6fff7, #2dd4bf 38%, #0f5f66 72%, #06222b 100%); box-shadow: 0 0 46px rgba(45, 212, 191, .5); }
html[data-tema="kosmik"] .kpi a:nth-child(3)::after { border-color: rgba(150, 240, 230, .5); border-left-color: transparent; transform: rotate(14deg); }
html[data-tema="kosmik"] .kpi a:nth-child(4)::before { background: radial-gradient(circle at 32% 28%, #f3e2ff, #a56bff 38%, #4a1f9a 72%, #170a35 100%); box-shadow: 0 0 46px rgba(165, 107, 255, .55); }
html[data-tema="kosmik"] .kpi a:nth-child(4)::after { display: none; }
html[data-tema="kosmik"] .w-ungu { background: rgba(255, 61, 154, .22); color: #ff9fce; }
html[data-tema="kosmik"] .w-biru { background: rgba(255, 154, 61, .2); color: #ffc27a; }

/* Tombol, isian, saringan */
html[data-tema="kosmik"] .tombol { border-radius: 99px; background: rgba(60, 24, 96, .7); }
html[data-tema="kosmik"] .tombol.utama { background: var(--pelangi); color: #1c0420; box-shadow: 0 0 18px rgba(255, 61, 154, .45); }
html[data-tema="kosmik"] .tombol.hijau { background: var(--hijau); }
html[data-tema="kosmik"] .tombol.merah { background: var(--merah); }
html[data-tema="kosmik"] .tombol.besar { border-radius: 16px; }
html[data-tema="kosmik"] .butir.keluar { background: transparent; }
html[data-tema="kosmik"] .tombol.utama:hover { color: #1c0420; }
html[data-tema="kosmik"] .tombol.kecil { border-radius: 99px; }
html[data-tema="kosmik"] input, html[data-tema="kosmik"] select, html[data-tema="kosmik"] textarea { background: rgba(30, 12, 50, .8); border-color: rgba(255, 120, 190, .28); }
html[data-tema="kosmik"] input::placeholder, html[data-tema="kosmik"] textarea::placeholder { color: #a987ba; }
html[data-tema="kosmik"] .saring button { background: rgba(40, 16, 66, .7); color: #dcc4e8; }
html[data-tema="kosmik"] .saring button.aktif { background: rgba(255, 61, 154, .3); border-color: #ff5aaa; color: #fff; box-shadow: 0 0 14px rgba(255, 61, 154, .35); }
html[data-tema="kosmik"] .saring.tab-besar button.aktif { background: var(--pelangi); border-color: transparent; color: #1c0420; }
html[data-tema="kosmik"] .jatuhkan { border-color: rgba(255, 120, 190, .4); background: rgba(40, 16, 66, .4); }
html[data-tema="kosmik"] .jatuhkan:hover, html[data-tema="kosmik"] .jatuhkan.diatas { border-color: var(--aksen); background: rgba(255, 154, 61, .1); }
html[data-tema="kosmik"] .cip-kecil a { background: rgba(40, 16, 66, .7); color: #dcc4e8; }

/* Tabel, peringatan, lencana */
html[data-tema="kosmik"] td { border-bottom-color: rgba(255, 120, 190, .12); }
html[data-tema="kosmik"] tr.bisa-klik:hover td { background: rgba(255, 61, 154, .07); }
html[data-tema="kosmik"] .peringatan.biru { border-color: rgba(255, 90, 170, .55); color: #ffd6ea; }
html[data-tema="kosmik"] .s-masuk { background: rgba(255, 61, 154, .2); color: #ff9fce; }
html[data-tema="kosmik"] .s-packing { background: rgba(165, 107, 255, .22); color: #d3b6ff; }
html[data-tema="kosmik"] .s-batal, html[data-tema="kosmik"] .s-belum_bayar { background: rgba(255, 255, 255, .1); color: #d9bfe6; }
html[data-tema="kosmik"] .lencana { border: 1px solid rgba(255, 255, 255, .12); }
html[data-tema="kosmik"] .barang { background: rgba(16, 5, 29, .65); }
html[data-tema="kosmik"] .barang .variasi { color: var(--aksen-terang); }
html[data-tema="kosmik"] .tahap .rel { background: rgba(255, 255, 255, .1); }
html[data-tema="kosmik"] dialog::backdrop { background: rgba(10, 2, 20, .75); }