/* LIVEANGKA — lobby malam: navy, royal blue, cyan. Tanpa sidebar: header bawa menu, spanduk, kategori, kartu (model Codex), keluaran. */
:root {
  --malam: #060B22; --malam-2: #0A1233; --panel: #0E1A40; --panel-2: #13234F; --panel-3: #1A2E63;
  --garis: #24397A; --garis-2: #3560B8;
  --putih: #F3F4FF; --redup: #A6B4E6; --redup-2: #6E7FBF;
  --biru-royal: #1E6FE8; --biru-terang: #4DA3FF; --biru-tinta: #0A2A6B; --cyan: #33E8FF; --cyan-2: #8AF4FF; --emas: #FFC53D;
  --merah: #FF5B7A; --hijau: #3EF0A6;
  --tampil: "Chakra Petch", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --piksel: "Silkscreen", "Chakra Petch", monospace;
  --mono: "Azeret Mono", "JetBrains Mono", Consolas, monospace;
  --teks: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --radius: 14px; --sisi: 236px; --lebar: 1360px;
  /* token lama, dipakai kartu model Codex (v2) apa adanya */
  --tinta: #0B0F1C; --papan: #121828; --papan-2: #182034; --papan-3: #1F2942; --kapur: #EFE9DA; --kapur-60: #A9AFC2; --kapur-40: #6F7690; --amber: #F6B424; --amber-2: #FFD56A; --amber-tinta: #3A2A08; --biru: #6C8CFF; --tampil-kartu: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --timbul: inset 0 1px 0 #ffffff26, inset 0 -2px 0 #00000055, 0 6px 14px -6px #000c;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--malam); scroll-behavior: smooth; }
body { margin: 0; font: 400 14.5px/1.5 var(--teks); color: var(--putih); min-height: 100vh; -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 500px at 15% -10%, #0d2a6a 0%, transparent 60%), radial-gradient(700px 420px at 100% 0%, #0a3b5c66 0%, transparent 60%), var(--malam);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--tampil); font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.piksel { margin: 0; font: 400 9px/1.4 var(--piksel); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.sorot { color: var(--cyan-2); }
.hijau { color: var(--hijau); } .merah { color: var(--merah); }
.redup { color: var(--redup-2); }
.alis { margin: 0 0 6px; font: 700 11px/1 var(--teks); letter-spacing: .14em; text-transform: uppercase; color: var(--redup-2); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.judul-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.judul-baris h2 { font-size: 22px; padding-left: 12px; border-left: 3px solid var(--biru-terang); line-height: 1; }
.titik { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--merah); box-shadow: 0 0 8px var(--merah); animation: kedip 1.2s infinite; }
@keyframes kedip { 50% { opacity: .25; } }

/* ---------- tombol ---------- */
.tombol-neon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 13px/1 var(--tampil); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #4DA3FF, #1E6FE8 55%, #1556B8); box-shadow: var(--timbul), 0 0 18px #1e6fe855; transition: transform .12s, box-shadow .12s, filter .12s; }
.tombol-neon:hover { filter: brightness(1.08); box-shadow: var(--timbul), 0 0 26px #1e6fe888; }
.tombol-neon:active { transform: translateY(2px); box-shadow: inset 0 2px 4px #0006; }
.tombol-neon:disabled { opacity: .55; cursor: default; }
.tautan { color: var(--cyan-2); font-weight: 700; font-size: 13px; }
.tautan:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- merek + menu header ---------- */
.merek { display: flex; align-items: center; gap: 10px; }
.merek-tanda { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9 0 8%, transparent 40%), radial-gradient(circle, var(--biru-royal) 0 58%, #0f3f9a 100%); box-shadow: inset -3px -5px 8px #0006, 0 4px 10px #000a; position: relative; }
.merek-tanda::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.merek-tanda::after { content: "21"; position: absolute; font: 700 10px var(--mono); color: var(--malam); }
.merek-teks b { display: block; font: 700 20px/1 var(--tampil); letter-spacing: .04em; color: var(--putih); }
.merek-teks i { font-style: normal; color: var(--cyan); }
.merek-teks small { display: block; margin-top: 2px; white-space: nowrap; }
.kepala-nav { display: flex; gap: 4px; margin-left: 6px; }
.kepala-nav a, .bilah-bawah a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--redup); transition: background .15s, color .15s; white-space: nowrap; }
.kepala-nav a:hover { color: var(--putih); background: var(--panel); }
.kepala-nav a.aktif { color: #fff; background: linear-gradient(90deg, #123f9a, #0f2a66); box-shadow: inset 0 0 0 1px var(--garis-2); }
.kepala-nav svg { flex: none; color: var(--biru-terang); } .kepala-nav a.aktif svg { color: var(--cyan); }

/* ---------- header + isi ---------- */
.utama { min-width: 0; overflow-x: clip; }
.kepala { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 clamp(14px, 2.5vw, 32px); background: #060b22cc; backdrop-filter: blur(14px); border-bottom: 1px solid var(--garis); }
.kepala-sela { flex: 1; }
.cari { display: flex; align-items: center; gap: 10px; flex: 1 1 120px; min-width: 0; max-width: 420px; margin-left: auto; padding: 0 14px; height: 40px; background: var(--panel); border: 1px solid var(--garis); border-radius: 10px; color: var(--redup-2); }
.cari:focus-within { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 3px #33e8ff22; }
.cari input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--putih); }
.cari input::placeholder { color: var(--redup-2); }
.indikator { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--garis); background: var(--panel); font-size: 12px; font-weight: 700; color: var(--redup); white-space: nowrap; }
.indikator i { width: 7px; height: 7px; border-radius: 50%; background: var(--redup-2); }
.indikator.ada { color: var(--putih); border-color: #ff5b7a55; } .indikator.ada i { background: var(--merah); box-shadow: 0 0 8px var(--merah); animation: kedip 1.2s infinite; }
.indikator b { font-family: var(--mono); color: var(--cyan-2); }
.jam { display: flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--panel); color: var(--cyan-2); font-size: 14px; }
.jam small { color: var(--redup-2); font: 400 8px var(--piksel); letter-spacing: .1em; }
.isi { max-width: var(--lebar); margin: 0 auto; padding: 24px clamp(14px, 2.5vw, 32px) 60px; }
.isi > section { margin-bottom: 30px; }
.bawah { max-width: var(--lebar); margin: 0 auto; padding: 20px clamp(14px, 2.5vw, 32px) 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--redup-2); font-size: 12px; border-top: 1px solid var(--garis); }
.bawah a { color: var(--redup); text-decoration: underline; text-underline-offset: 3px; }
.bilah-bawah { display: none; }

/* ---------- spanduk (banner) ---------- */
.spanduk { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 24px; align-items: center; min-height: 340px; padding: 34px 36px; border-radius: 20px; border: 1px solid var(--garis-2); overflow: hidden;
  background: radial-gradient(600px 300px at 0% 100%, #1e6fe855 0%, transparent 70%), radial-gradient(500px 260px at 100% 0%, #33e8ff22 0%, transparent 70%), linear-gradient(135deg, #12245c, #0c1a44 60%, #091433);
  box-shadow: inset 0 1px 0 #ffffff14, 0 30px 60px -40px #000; }
.spanduk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: linear-gradient(90deg, transparent 0 39px, #ffffff08 39px 40px), linear-gradient(0deg, transparent 0 39px, #ffffff08 39px 40px); background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000, transparent 85%); }
.spanduk.ramping { grid-template-columns: 1fr; min-height: 0; padding: 30px 34px; }
.spanduk-teks { position: relative; }
.spanduk-teks h1 { margin: 12px 0 0; font-size: clamp(34px, 3.4vw, 48px); letter-spacing: .01em; color: var(--putih); text-shadow: 0 0 30px #1e6fe855; text-wrap: balance; }
.spanduk-teks h1 span { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--biru-terang)); -webkit-background-clip: text; background-clip: text; }
.spanduk-sub { margin: 14px 0 0; max-width: 54ch; color: var(--redup); font-size: 15px; }
.spanduk-sub b { color: var(--putih); font-family: var(--mono); font-weight: 700; }
.spanduk-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; }
.spanduk-sorot { position: relative; min-height: 270px; }
.sorotan { position: relative; height: 100%; min-height: 270px; padding: 22px 22px 22px 24px; border-radius: 16px; border: 1px solid var(--garis-2); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background: var(--panel); box-shadow: inset 0 1px 0 #ffffff14, 0 20px 40px -24px #000; }
.sorotan-art { position: absolute; inset: 0; background-image: linear-gradient(180deg, #09143322, #091433f0 80%), var(--kota-img); background-size: 100% 100%, cover; filter: saturate(1.05); }
.sorotan-art.kota-thailand, .sorotan-art.kota-cambodia, .sorotan-art.kota-amerika, .sorotan-art.kota-london, .sorotan-art.kota-malaysia, .sorotan-art.kota-indonesia { background-image: linear-gradient(180deg, #09143322, #091433f0 80%), var(--kota-img); background-size: 100% 100%, cover; }
.sorotan-art.kota-netral { background-image: linear-gradient(180deg, #09143333, #091433f0 80%), radial-gradient(ellipse at 50% 20%, #1e5fd8, transparent 65%), repeating-linear-gradient(135deg, #122a66 0 2px, #0c1038 2px 26px); background-size: 100% 100%, 100% 100%, 100% 100%; }
.sorotan-logo { align-self: flex-end; margin: 0 0 auto; width: 122px; height: 78px; object-fit: contain; filter: drop-shadow(0 10px 12px #000b); animation: melayang 6s ease-in-out infinite; }
.sorotan > * { position: relative; }
.sorotan h2 { font-size: clamp(26px, 2.6vw, 36px); }
.sorotan-jam { margin: 0; color: var(--redup); font-size: 13px; } .sorotan-jam b { color: var(--putih); }
.sorotan-hitung { display: inline-block; margin: 6px 0 4px; font-size: clamp(34px, 3vw, 44px); font-weight: 700; color: var(--cyan-2); text-shadow: 0 0 22px #33e8ff66; letter-spacing: .02em; }
.sorotan.fase-menunggu .sorotan-hitung { color: var(--merah); text-shadow: 0 0 22px #ff5b7a66; animation: kedip 1.2s infinite; }
.sorotan .tombol-neon { align-self: flex-start; margin-top: 8px; height: 40px; }
@keyframes melayang { 50% { transform: translateY(-8px) rotate(2deg); } }

/* ---------- kategori ---------- */
.kategori { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.cip { display: flex; flex-wrap: wrap; gap: 6px; }
.cip button, .cip-wilayah a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border: 1px solid var(--garis); border-radius: 999px; background: var(--panel); color: var(--redup); cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: var(--timbul); white-space: nowrap; }
.cip button b, .cip-wilayah b { font-size: 11px; font-weight: 500; color: var(--redup-2); }
.cip button:hover, .cip-wilayah a:hover { color: var(--putih); border-color: var(--garis-2); }
.cip button.aktif, .cip-wilayah a.aktif { background: linear-gradient(180deg, #4DA3FF, #1E6FE8 60%, #1556B8); border-color: #4da3ff; color: #fff; }
.cip button.aktif b, .cip-wilayah a.aktif b { color: #fff; }
.cip .titik { animation: none; }
.cip-wilayah { padding-left: 18px; border-left: 1px solid var(--garis); }

/* ---------- jalur live & segera ---------- */
.jalur-daftar { list-style: none; margin: 0; padding: 4px 2px 6px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.jalur-daftar::-webkit-scrollbar { display: none; }
.jalur-petak { flex: 0 0 auto; scroll-snap-align: start; }
.jalur-petak a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 260px; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--garis); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--timbul); transition: border-color .15s, transform .15s; }
.jalur-petak a:hover { border-color: var(--garis-2); transform: translateY(-2px); }
.jalur-logo { width: 56px; height: 36px; object-fit: contain; }
.jalur-teks b { display: block; font: 700 14px/1.1 var(--tampil); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jalur-teks small { font-size: 11px; color: var(--redup-2); }
.jalur-petak .hitung { font-size: 15px; color: var(--cyan-2); min-width: 7ch; text-align: right; }
.jalur-petak.fase-menunggu a { border-color: #ff5b7a66; box-shadow: var(--timbul), 0 0 18px #ff5b7a33; } .jalur-petak.fase-menunggu .hitung { color: var(--merah); animation: kedip 1.2s infinite; }
.jalur-petak.fase-live .hitung { color: var(--hijau); }
.jalur-petak.fase-tutup .hitung { color: var(--emas); }

/* ---------- bola bernomor ---------- */
.bola-baris { display: inline-flex; gap: .22em; font-size: 34px; align-items: center; }
.bola-baris.kecil { font-size: 20px; gap: .16em; }
.bola-baris.besar { font-size: 44px; gap: .2em; margin: 6px 0 4px; }
.bola { --c: #8A93B8; position: relative; display: inline-grid; place-items: center; width: 1em; height: 1em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, #ffffffd0 0 6%, #ffffff40 18%, transparent 38%), radial-gradient(circle at 50% 50%, var(--c) 0 62%, color-mix(in srgb, var(--c) 45%, #000) 100%);
  box-shadow: inset -.06em -.1em .16em #0007, 0 .1em .18em #000a, 0 0 .3em color-mix(in srgb, var(--c) 45%, transparent); }
.bola::before { content: ""; position: absolute; width: .58em; height: .58em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e8eaf6); box-shadow: inset 0 -.04em .06em #0003; }
.bola span { position: relative; font: 700 .42em/1 var(--mono); color: #0a1230; }
.bola.kosong { --c: #2a3168; } .bola.kosong span { color: var(--redup-2); }
.bola.d0 { --c: #B9BFD6; } .bola.d1 { --c: #FF5F6D; } .bola.d2 { --c: #FF9F43; } .bola.d3 { --c: #FFD166; } .bola.d4 { --c: #4EE39A; }
.bola.d5 { --c: #2DD4BF; } .bola.d6 { --c: #5AA9FF; } .bola.d7 { --c: #8B7BFF; } .bola.d8 { --c: #C77DFF; } .bola.d9 { --c: #FF6BD6; }
.bola-baris.baru .bola { animation: bola-masuk .55s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes bola-masuk { from { transform: translateY(-.9em) rotate(-40deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- kartu pasaran: MODEL CODEX (v2), diambil apa adanya dari backups/lobby-v2, dicakup ke .rak ---------- */
.rak .ubin-baris { display: inline-flex; gap: .16em; perspective: 300px; font-size: 30px; }
.rak .ubin-baris.kecil { font-size: 17px; gap: .12em; }
.rak .ubin-baris { align-items: center; }
.rak .ubin { position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.42em; border-radius: .13em; background: linear-gradient(180deg, #232d48 0%, #1c2439 50%, #171e31 50%, #141a2c 100%); color: var(--amber); font: 700 1em/1 var(--mono); box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #00000080, 0 6px 14px -8px #000; text-shadow: 0 0 14px #f6b42455; transform-style: preserve-3d; backface-visibility: hidden; }
.rak .ubin::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tinta); opacity: .95; }
.rak .ubin.kosong { color: var(--kapur-40); text-shadow: none; }
.rak .ubin.putar { animation: flap .26s ease-in-out; }
.rak .ubin.hidup { animation: nyala .6s ease-out; }
.rak { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rak .kartu { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 0; background: var(--papan); border: 1px solid var(--garis); border-radius: var(--radius); transition: border-color .15s, transform .15s; content-visibility: auto; contain-intrinsic-size: 300px 250px; }
.rak .kartu:hover { border-color: var(--garis-2); transform: translateY(-1px); }
.rak .kartu.fase-menunggu { border-color: color-mix(in srgb, var(--merah) 55%, var(--garis)); box-shadow: 0 0 0 1px #ff5a5a22, 0 12px 30px -20px #ff5a5a88; }
.rak .kartu.fase-live { border-color: color-mix(in srgb, var(--hijau) 40%, var(--garis)); }
.rak .kartu-kepala { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.rak .logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--papan-3); }
.rak .logo.besar { width: 64px; height: 64px; border-radius: 14px; }
.rak .logo-kosong { display: grid; place-items: center; font: 900 16px var(--tampil-kartu); color: var(--kapur-40); }
.rak .kartu-judul { min-width: 0; }
.rak .kartu-judul h3 { font-size: 22px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rak .kartu-judul span { display: block; font-size: 12px; color: var(--kapur-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rak .pil { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11px/1 var(--teks); letter-spacing: .1em; text-transform: uppercase; background: var(--papan-3); color: var(--kapur-60); white-space: nowrap; }
.rak .pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rak .pil-menunggu { background: #ff5a5a22; color: var(--merah); }
.rak .pil-menunggu::before { animation: kedip 1s infinite; }
.rak .pil-live { background: #43d69a1f; color: var(--hijau); }
.rak .pil-tutup { background: #f6b42420; color: var(--amber-2); }
.rak .pil-buka { color: var(--kapur-60); }
.rak .pil-libur, .rak .pil-terlambat { color: var(--kapur-40); }
.rak .hadiah { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--tinta); border-radius: 10px; border: 1px solid #ffffff08; }
.rak .hadiah-kecil { display: flex; gap: 14px; font-size: 13px; color: var(--kapur-60); font-family: var(--mono); }
.rak .hadiah-kecil b { display: block; font: 700 10px/1 var(--teks); letter-spacing: .12em; text-transform: uppercase; color: var(--kapur-40); margin-bottom: 3px; }
.rak .kartu-kaki { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--kapur-40); }
.rak .kartu-kaki .tgl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rak .kartu-kaki .hitung { font-family: var(--mono); color: var(--kapur-60); white-space: nowrap; }
.rak .kartu.fase-menunggu .hitung { color: var(--merah); }
.rak .kartu.fase-tutup .hitung { color: var(--amber-2); }
.rak .kartu.fase-live .hitung { color: var(--hijau); }
.rak .aksi { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px -14px 0; border-top: 1px solid var(--garis); }
.rak .aksi a { padding: 11px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--kapur-60); border-right: 1px solid var(--garis); }
.rak .aksi a:last-child { border-right: 0; }
.rak .aksi a:hover { color: var(--amber); background: #ffffff05; }
.rak .aksi a:first-child { color: var(--kapur); }
.rak .hadiah-besar { display: flex; flex-direction: column; gap: 14px; align-items: center; }
@media (max-width: 560px) { .rak { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rak .ubin.putar, .rak .ubin.hidup, .rak .pil-menunggu::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .rak .kartu { transition: none; } }
.rak { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rak .kartu { position: relative; padding: 18px 18px 0; gap: 16px; border: 1px solid #388ae3; overflow: hidden; background: radial-gradient(ellipse at 100% 0, #217dd18c, transparent 65%), linear-gradient(145deg, #123a83, #0b2459 55%, #081a40); box-shadow: inset 0 2px 1px #8bdeff66, inset 0 -2px 1px #0008, 0 9px 22px #0007, 0 0 14px #0965dd18; }
.rak .kartu:hover { border-color: #82e4ff; transform: translateY(-3px); box-shadow: inset 0 2px #c0f4ff77, 0 14px 28px #0009, 0 0 22px #168fff33; }
.rak .kartu.fase-live { border-color: #4ea4dc; }
.rak .kartu.fase-menunggu { border-color: #ff8a99; }
.rak .kartu-kepala { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
.rak .logo { width: 48px; height: 48px; border: 1px solid #95d8ff80; box-shadow: 0 3px 8px #0007; }
.rak .kartu-judul h3 { font-size: 24px; text-shadow: 0 2px 3px #0006; }
.rak .kartu-judul span { font-size: 10px; margin-top: 4px; color: #b5cfee; }
.rak .pil { font-size: 9px; letter-spacing: .05em; padding: 0 7px; }
.rak .pil-buka { color: #b9e9ff; background: #278dff33; }
.rak .hadiah { align-items: center; gap: 15px; padding: 18px 10px 14px; border: 1px solid #3678bb; background: linear-gradient(180deg, #020a21, #071636); box-shadow: inset 0 4px 16px #000a, 0 1px #83d2ff26; }
.rak .ubin-baris.utama { font-size: clamp(30px, 2.8vw, 40px); gap: .18em; }
.rak .ubin { color: #e0f7ff; background: linear-gradient(180deg, #2359a1, #13376b 49%, #0a234d 50%, #154483); border: 1px solid #58abed80; text-shadow: 0 2px 0 #001634, 0 0 12px #4cc8ff80; box-shadow: inset 0 2px #b9ebff55, inset 0 -2px #0007, 0 3px 0 #010818, 0 5px 12px #0009; }
.rak .hadiah-kecil { width: 100%; justify-content: space-around; text-align: center; color: #dfecff; }
.rak .hadiah-kecil b { color: #8daed8; }
.rak .kartu-kaki { flex-wrap: wrap; gap: 4px 10px; font-size: 10px; }
.rak .aksi { margin: 0 -18px; background: linear-gradient(180deg, #16428a, #0a2454); border-top-color: #367aca; }
.rak .aksi a { font-size: 12px; padding: 13px 0; color: #bdd9fc; border-right-color: #285496; }
.rak .aksi a:first-child { color: #8beaff; background: #1679ca22; }
.rak .aksi a:hover { color: #fff; background: #2385eb44; }
@media (min-width: 1200px) { .rak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rak { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 560px) { .rak .ubin-baris.utama { font-size: 38px; } }
.rak { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.rak .kartu { padding:12px 14px 0; gap:11px; border:2px solid #609fdd; border-radius:15px; background:linear-gradient(135deg,#204881,#071638 60%,#123265); box-shadow:inset 0 0 0 3px #0b1a3a,inset 0 0 0 4px #6396ba66,0 3px 0 #01081b,0 0 0 1px #020a20,0 10px 23px #0009; contain-intrinsic-size:300px 370px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.rak .kartu::after { content:''; position:absolute; inset:4px; pointer-events:none; border:1px solid #7dc9ff55; border-radius:10px; }
.rak .kartu-art { position:absolute; top:5px; left:5px; right:5px; height:182px; background-image:var(--kota-img); background-size:cover; border-radius:9px 9px 0 0; transition:filter .4s,transform .7s; mask-image:linear-gradient(#000 62%,transparent); }
.rak .kartu-art.kota-netral { background-image:linear-gradient(90deg,#081a4955,transparent),var(--kota-img); background-size:cover; background-position:center 47%; }
.rak .kartu:hover { transform:translateY(-5px); border-color:#b0ecff; box-shadow:inset 0 0 0 3px #14366b,0 0 0 1px #469dff,0 16px 28px #000a,0 0 25px #1489ff55; }
.rak .kartu:hover .kartu-art { filter:brightness(1.22); transform:scale(1.04); }
.rak .kartu-kepala { position:relative; padding-top:103px; grid-template-columns:38px minmax(0,1fr); gap:9px; align-items:center; }
.rak .kartu-kepala .logo { width:38px; height:38px; border:2px solid #e6c783; border-radius:9px; box-shadow:0 3px 7px #000a; background:#092656; }
.rak .kartu-kepala .pil { position:absolute; right:0; top:0; box-shadow:0 2px 6px #0009; border:1px solid #a9ddff77; background:#03132dcc; color:#a5ebff; padding:0 8px; height:22px; }
.rak .kartu-kepala .pil-live { color:#8cfac7; border-color:#67db9f; }
.rak .kartu-kepala .pil-menunggu { color:#ffdf83; border-color:#f8d175; }
.rak .kartu-judul h3 { font:900 23px/.98 var(--tampil-kartu); letter-spacing:.01em; color:#fff4d3; text-shadow:0 2px #633e16,0 3px #000,2px 0 #07122d,-2px 0 #07122d; white-space:normal; }
.rak .kartu-judul span { font-size:8px; text-shadow:0 1px 3px #000; margin-top:5px; color:#c3d7ef; }
.rak .hadiah { position:relative; padding:9px 8px 12px; gap:9px; border:2px solid #3f7dc1; border-radius:9px; background:linear-gradient(#02091b,#081a3c); box-shadow:0 1px #9ad1f677,inset 0 3px 7px #000; }
.rak .hadiah-label { color:#9bbddd; letter-spacing:1.4px; font-size:8px; font-weight:800; }
.rak .ubin-baris.utama { font-size:31px; gap:.13em; justify-content:center; }
.rak .kartu .ubin { color:#103367; background:linear-gradient(#94b7d2,#edf9ff 23%,#fff 47%,#c5e5fa 50%,#ecf7ff 73%,#7faccb); border:1px solid #e1f9ff; border-radius:4px; text-shadow:0 1px #fff,0 2px #89a9ca; box-shadow:inset 0 3px 6px #42678677,0 2px 0 #000,0 0 8px #65c5ff22; font-family:Georgia,serif; font-weight:900; width:1.05em; height:1.3em; }
.rak .kartu .ubin::after { background:#265f9633; }
.rak .kartu .ubin.kosong { color:#6985a2; }
.rak .hadiah-kecil { font-size:11px; }
.rak .hadiah-kecil b { font-size:8px; letter-spacing:1px; margin-bottom:4px; }
.rak .kartu-kaki { position:relative; min-height:30px; align-items:center; font-size:9px; gap:3px; }
.rak .kartu-kaki .hitung { font-size:8px; }
.rak .aksi { position:relative; margin:0 -10px 5px; padding:0 5px 6px; border:0; gap:5px; grid-template-columns:repeat(3,1fr); background:transparent; }
.rak .aksi a { padding:8px 0; border:1px solid #39649f; background:linear-gradient(#244c84,#102750); border-radius:5px; font-size:9px; box-shadow:inset 0 1px #91bdec33,0 2px #010817; }
.rak .aksi a:first-child { grid-column:1/-1; color:#fff2c4; font-size:12px; letter-spacing:.8px; text-transform:uppercase; background:linear-gradient(#3aafff,#1b72d7 48%,#1455ae 52%,#2469c1); border:1px solid #8adfff; box-shadow:inset 0 1px #c8f4ff,0 3px #020d26; padding:10px 0; }
.rak .aksi a:first-child span { font-size:9px; padding-left:7px; }
.rak .aksi a:last-child { border-right:1px solid #39649f; }
.rak .aksi a:hover { filter:brightness(1.3); background:linear-gradient(#3279c6,#164583); }
.rak .aksi a:active { transform:translateY(2px); }
.rak .kartu.reveal-start { opacity:0; transform:translateY(24px) scale(.98); }
.rak .kartu.reveal-in { animation:card-enter .55s both; animation-delay:var(--reveal-delay,0ms); }
@media (min-width:1700px) { .rak { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1199px) { .rak { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .rak { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .rak { gap:16px; grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) { .rak .kartu { padding:14px 16px 0; } }
@media (max-width:600px) { .rak .kartu-art { height:225px; } }
@media (max-width:600px) { .rak .kartu-kepala { padding-top:140px; grid-template-columns:46px minmax(0,1fr); gap:11px; } }
@media (max-width:600px) { .rak .kartu-kepala .logo { width:46px; height:46px; } }
@media (max-width:600px) { .rak .kartu-judul h3 { font-size:30px; } }
@media (max-width:600px) { .rak .kartu-judul span { font-size:10px; } }
@media (max-width:600px) { .rak .kartu .ubin-baris.utama { font-size:40px; } }
@media (max-width:600px) { .rak .hadiah { gap:12px; padding:12px; } }
@media (max-width:600px) { .rak .hadiah-label { font-size:9px; } }
@media (max-width:600px) { .rak .hadiah-kecil { font-size:13px; } }
@media (max-width:600px) { .rak .kartu-kaki { font-size:10px; } }
@media (max-width:600px) { .rak .kartu-kaki .hitung { font-size:9px; } }
@media (max-width:600px) { .rak .aksi { margin-inline:-10px; } }
@media (max-width:600px) { .rak .aksi a { font-size:10px; padding:9px 0; } }
@media (max-width:600px) { .rak .aksi a:first-child { padding:12px; } }
@media (prefers-reduced-motion:reduce) { .rak .hero-art, .rak .hero-stars i, .rak .game-cta::after, .rak .siaran i, .rak .hero-caption i, .rak .kartu.reveal-in { animation:none; } }
@media (prefers-reduced-motion:reduce) { .rak .kartu.reveal-start { opacity:1;transform:none; } }
@media (prefers-reduced-motion:reduce) { .rak .kartu, .rak .kartu-art, .rak .game-cta { transition:none; } }
.rak .kartu-art:is(.kota-thailand, .rak .kota-cambodia, .rak .kota-amerika, .rak .kota-london, .rak .kota-malaysia, .rak .kota-indonesia) { background-image:var(--kota-img); background-size:cover; }
.rak .kartu-art { height:230px; mask-image:linear-gradient(#000 60%,transparent); }
.rak .kartu-kepala { display:block; padding-top:96px; min-height:173px; }
.rak .kartu-kepala .logo { position:absolute; left:8px; top:7px; width:64px; height:64px; object-fit:contain; padding:4px; border:2px solid #ffe5a6; border-radius:12px; background:linear-gradient(145deg,#143c70ee,#03091fee); box-shadow:inset 0 1px #fff4ce99,0 3px #382716,0 0 0 2px #07102e,0 0 18px #22b5ff66,0 7px 15px #0009; }
.rak .kartu-kepala .logo-kosong { display:grid; place-items:center; }
.rak .kartu-judul { position:relative; isolation:isolate; text-align:center; padding:11px 6px 8px; border:1px solid #d8b369; border-radius:7px; background:linear-gradient(180deg,#173a77dd,#070e2aee 55%,#102b60ee); box-shadow:inset 0 1px #fff0b577,inset 0 -2px #010714,0 0 0 2px #08142f,0 0 0 3px #458dce88,0 0 17px #239dff44; }
.rak .kartu-judul::before { content:'✦'; position:absolute; left:calc(50% - 9px); top:-12px; width:18px; background:#0d2855; color:#ffe9a8; font-size:16px; line-height:20px; text-shadow:0 0 8px #ffdb8888; }
.rak .kartu-judul h3 { overflow:visible; white-space:normal; text-overflow:clip; overflow-wrap:anywhere; font:900 italic 27px/1.02 var(--tampil-kartu); letter-spacing:.02em; color:#fff0a9; -webkit-text-stroke:.3px #fff4c9; text-shadow:0 1px #bc7826,0 2px #9c5013,0 3px #552c12,1px 4px #000,0 0 10px #fcb63f55,0 0 18px #46a9ff88; }
.rak .kartu-judul span { white-space:normal; overflow:visible; text-overflow:clip; font-size:8px; line-height:1.5; margin-top:6px; color:#c4dcf7; }
.rak .kartu-kepala .pil { right:0; top:5px; }
.rak .kartu::before { content:''; position:absolute; z-index:2; pointer-events:none; left:0; top:0; bottom:0; width:100%; border-radius:13px; background:linear-gradient(120deg,transparent 25%,#bdf3ffb3 42%,#fff4c9 48%,transparent 58%); background-size:350% 100%; padding:2px; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:bezel-shine 7s ease-in-out infinite; }
.rak .kartu:nth-child(3n+2)::before { animation-delay:-2.5s; }
.rak .kartu:nth-child(3n)::before { animation-delay:-4.7s; }
.rak .logo.besar { padding:4px; }
@media (max-width:600px) { .rak .kartu-kepala { min-height:200px; padding-top:119px; } }
@media (max-width:600px) { .rak .kartu-kepala .logo { width:74px; height:74px; top:13px;left:10px;padding:5px; } }
@media (max-width:600px) { .rak .kartu-art { height:255px; } }
@media (max-width:600px) { .rak .kartu-judul { padding:12px 9px 9px; } }
@media (max-width:600px) { .rak .kartu-judul h3 { font-size:32px; } }
@media (max-width:600px) { .rak .kartu-judul span { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .rak .kartu::before { animation:none;opacity:.35; } }
.rak .kartu { overflow:hidden; }
.rak .kartu::after { box-shadow:inset 0 0 20px #159bff13; }
.rak .kartu:nth-child(5n+1) .kartu-judul::after { content:'NEW'; position:absolute; right:-9px; top:-12px; padding:4px 9px; transform:rotate(8deg); border:1px solid #ffe995; border-radius:3px; background:linear-gradient(#ff9051,#df2441); color:#fff7bd; font:900 8px var(--teks); box-shadow:0 2px 0 #4b132d,0 0 11px #ff4066; }
.rak .kartu:nth-child(5n+3) .kartu-judul::after { content:'HOT'; position:absolute; right:-9px; top:-12px; padding:4px 9px; transform:rotate(8deg); border:1px solid #a5f2ff; border-radius:3px; background:linear-gradient(#36d8ff,#136bd0); color:#fff; font:900 8px var(--teks); box-shadow:0 2px 0 #061a4e,0 0 11px #30c8ff; }
.rak .kartu:nth-child(n) .kartu-judul::after { content:none }
.rak { gap:42px 24px;padding-top:35px }
.rak .kartu { overflow:visible;content-visibility:visible;contain:none;isolation:isolate }
.rak .kartu-art { height:230px;border-radius:11px 11px 0 0;transition:filter .4s }
.rak .kartu-art.kota-netral { background-image:radial-gradient(ellipse at 50% 20%,#277bc7,transparent 65%),repeating-linear-gradient(135deg,#193d76 0 2px,#071e44 2px 28px) }
.rak .kartu-kepala { padding-top:143px;min-height:215px;perspective:700px }
.rak .kartu-kepala .logo { top:50px;left:50%;width:132px;height:88px;max-width:65%;object-fit:contain;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:translateX(-50%);filter:drop-shadow(0 8px 5px #000a);transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s;z-index:4;pointer-events:none }
.rak .kartu-kepala .pil { top:0 }
.rak .kartu-judul { background:linear-gradient(#091b40bb,#07142fee);border:0;box-shadow:none;padding:10px 3px 7px }
.rak .kartu-judul::before { content:none }
.rak .kartu-judul h3 { font-style:normal;font-size:25px;color:#f3f8ff;-webkit-text-stroke:0;text-shadow:0 3px 4px #000 }
.rak .kartu:focus-within { z-index:8 }
.rak .kartu:focus-within .logo { transform:translateX(-50%) translateY(-85px) scale(1.3);filter:drop-shadow(0 22px 10px #000b) }
.rak .kartu:focus-within .kartu-art { filter:brightness(.55) }
@media (hover:hover) and (pointer:fine) { .rak .kartu:hover { z-index:8;transform:translateY(-4px) } }
@media (hover:hover) and (pointer:fine) { .rak .kartu:hover .logo { transform:translateX(-50%) translateY(-85px) scale(1.3);filter:drop-shadow(0 22px 10px #000b) drop-shadow(0 0 14px #78cfff66) } }
@media (hover:hover) and (pointer:fine) { .rak .kartu:hover .kartu-art { filter:brightness(.55);transform:none } }
@media (hover:hover) and (pointer:fine) { .rak .kartu:hover .aksi a:first-child { box-shadow:0 0 20px #228eff88 } }
@media (max-width:600px) { .rak { gap:40px } }
@media (max-width:600px) { .rak .kartu-kepala { padding-top:160px;min-height:235px } }
@media (max-width:600px) { .rak .kartu-kepala .logo { width:156px;height:103px;top:45px } }
@media (max-width:600px) { .rak .kartu-judul h3 { font-size:30px } }
@media (prefers-reduced-motion:reduce) { .rak .kartu-kepala .logo, .rak .kartu-art { transition:none } }
/* posisi atlas: kartu (satu lapis, model Codex) dan sorotan/kepala pasaran (dua lapis: gradasi + atlas) */
.rak .kartu-art.kota-thailand, .rak .kartu-art.kota-cambodia, .rak .kartu-art.kota-amerika, .rak .kartu-art.kota-london, .rak .kartu-art.kota-malaysia, .rak .kartu-art.kota-indonesia { background-image: var(--kota-img); background-size: cover; }
.rak .kartu-art.kota-macau { background-position: 0 0; } .rak .kartu-art.kota-singapore { background-position: 100% 0; } .rak .kartu-art.kota-sydney { background-position: 0 100%; } .rak .kartu-art.kota-hongkong { background-position: 100% 100%; }
.rak .kartu-art.kota-thailand { background-position: 0 0; } .rak .kartu-art.kota-cambodia { background-position: 50% 0; } .rak .kartu-art.kota-amerika { background-position: 100% 0; }
.rak .kartu-art.kota-london { background-position: 0 100%; } .rak .kartu-art.kota-malaysia { background-position: 50% 100%; } .rak .kartu-art.kota-indonesia { background-position: 100% 100%; }
.sorotan-art.kota-macau, .kepala-pasaran.kota-macau { background-position: 0 0, 0 0; } .sorotan-art.kota-singapore, .kepala-pasaran.kota-singapore { background-position: 0 0, 100% 0; }
.sorotan-art.kota-sydney, .kepala-pasaran.kota-sydney { background-position: 0 0, 0 100%; } .sorotan-art.kota-hongkong, .kepala-pasaran.kota-hongkong { background-position: 0 0, 100% 100%; }
.sorotan-art.kota-thailand, .kepala-pasaran.kota-thailand { background-position: 0 0, 0 0; } .sorotan-art.kota-cambodia, .kepala-pasaran.kota-cambodia { background-position: 0 0, 50% 0; } .sorotan-art.kota-amerika, .kepala-pasaran.kota-amerika { background-position: 0 0, 100% 0; }
.sorotan-art.kota-london, .kepala-pasaran.kota-london { background-position: 0 0, 0 100%; } .sorotan-art.kota-malaysia, .kepala-pasaran.kota-malaysia { background-position: 0 0, 50% 100%; } .sorotan-art.kota-indonesia, .kepala-pasaran.kota-indonesia { background-position: 0 0, 100% 100%; }
.pesan-kosong { text-align: center; color: var(--redup-2); padding: 40px 0; }

/* ---------- tabel & keluaran ---------- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--panel); box-shadow: var(--timbul); }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th { text-align: left; padding: 11px 14px; font: 400 8px/1 var(--piksel); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); border-bottom: 1px solid var(--garis); background: var(--malam-2); white-space: nowrap; }
.tabel td { padding: 9px 14px; border-bottom: 1px solid #ffffff08; vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: #ffffff05; }
.tabel .tgl { color: var(--redup); white-space: nowrap; }
.sel-pasaran { display: flex; align-items: center; gap: 10px; }
.sel-pasaran img, .tabel-logo { width: 44px; height: 28px; object-fit: contain; flex: none; }
.sel-pasaran b { display: block; font: 700 14px/1.1 var(--tampil); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.sel-pasaran small { font-size: 11px; color: var(--redup-2); }
.halaman-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.halaman-nav a, .halaman-nav i { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--garis); border-radius: 8px; background: var(--panel); font-family: var(--mono); font-size: 13px; color: var(--redup); font-style: normal; box-shadow: var(--timbul); }
.halaman-nav a.aktif { background: var(--biru-royal); border-color: var(--biru-terang); color: #fff; font-weight: 700; }

/* ---------- kepala pasaran + tab ---------- */
.kepala-pasaran { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 26px; margin-bottom: 22px; border-radius: 18px; border: 1px solid var(--garis-2); overflow: hidden; background-color: var(--panel); background-image: linear-gradient(90deg, #0c1a44f2 30%, #0c1a44aa 70%, #0c1a4466), var(--kota-img); background-size: 100% 100%, cover; box-shadow: inset 0 1px 0 #ffffff14, 0 24px 50px -36px #000; }
.kepala-pasaran.kota-thailand, .kepala-pasaran.kota-cambodia, .kepala-pasaran.kota-amerika, .kepala-pasaran.kota-london, .kepala-pasaran.kota-malaysia, .kepala-pasaran.kota-indonesia { background-image: linear-gradient(90deg, #0c1a44f2 30%, #0c1a44aa 70%, #0c1a4466), var(--kota-img); background-size: 100% 100%, cover; }
.kepala-pasaran.kota-netral { background-image: linear-gradient(90deg, #0c1a44f2 30%, #0c1a44aa 70%, #0c1a4466), radial-gradient(ellipse at 80% 20%, #1e5fd8, transparent 60%); background-size: 100% 100%, 100% 100%; }
.logo.besar { width: 120px; height: 78px; object-fit: contain; filter: drop-shadow(0 10px 12px #000b); }
.kepala-teks h1 { font-size: clamp(30px, 4vw, 48px); text-shadow: 0 0 30px #1e6fe855; }
.kepala-teks .piksel a { text-decoration: underline; text-underline-offset: 3px; }
.jadwal { margin: 8px 0 0; color: var(--redup); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13.5px; }
.jadwal b { color: var(--putih); font-weight: 500; }
.jadwal .hitung { font-size: 13px; color: var(--cyan-2); }
.tab { display: flex; gap: 4px; padding: 4px; background: #060b22cc; border: 1px solid var(--garis); border-radius: 10px; backdrop-filter: blur(6px); }
.tab a { padding: 8px 14px; border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--redup); }
.tab a.aktif { background: linear-gradient(180deg, #4DA3FF, #1E6FE8 60%, #1556B8); color: #fff; box-shadow: var(--timbul); }
.tab a:not(.aktif):hover { color: var(--putih); background: var(--panel-2); }
.tab.kecil a { padding: 6px 12px; font-family: var(--mono); }

/* ---------- panggung live ---------- */
.panggung { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.panggung-utama { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 480px; padding: 40px 24px; text-align: center; border: 1px solid var(--garis-2); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 4px #0c1a44, inset 0 0 0 5px var(--garis-2), 0 30px 60px -40px #000; }
.panggung-utama::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, #09143366, #091433f2 85%), var(--kota-img); background-size: 100% 100%, cover; filter: saturate(1.05); }
.panggung-utama.kota-thailand::before, .panggung-utama.kota-cambodia::before, .panggung-utama.kota-amerika::before, .panggung-utama.kota-london::before, .panggung-utama.kota-malaysia::before, .panggung-utama.kota-indonesia::before { background-image: linear-gradient(180deg, #09143366, #091433f2 85%), var(--kota-img); background-size: 100% 100%, cover; }
.panggung-utama.kota-netral::before { background-image: linear-gradient(180deg, #09143366, #091433f2 85%), radial-gradient(ellipse at 50% 20%, #1e5fd8, transparent 65%), repeating-linear-gradient(135deg, #122a66 0 2px, #0c1038 2px 26px); background-size: 100% 100%, 100% 100%, 100% 100%; }
.panggung-utama.kota-macau::before { background-position: 0 0, 0 0; } .panggung-utama.kota-singapore::before { background-position: 0 0, 100% 0; } .panggung-utama.kota-sydney::before { background-position: 0 0, 0 100%; } .panggung-utama.kota-hongkong::before { background-position: 0 0, 100% 100%; }
.panggung-utama.kota-thailand::before { background-position: 0 0, 0 0; } .panggung-utama.kota-cambodia::before { background-position: 0 0, 50% 0; } .panggung-utama.kota-amerika::before { background-position: 0 0, 100% 0; }
.panggung-utama.kota-london::before { background-position: 0 0, 0 100%; } .panggung-utama.kota-malaysia::before { background-position: 0 0, 50% 100%; } .panggung-utama.kota-indonesia::before { background-position: 0 0, 100% 100%; }
.panggung-utama::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff04 3px 4px); pointer-events: none; }
.panggung[data-fase="menunggu"] .panggung-utama { border-color: #ff5b7a88; box-shadow: inset 0 0 0 4px #0c1a44, inset 0 0 0 5px #ff5b7a66, 0 0 60px -20px var(--merah); }
.mundur .piksel { font-size: 11px; margin-bottom: 16px; text-shadow: 0 0 12px #33e8ff66; }
.mundur-angka { display: inline-block; padding: 14px 18px; border-radius: 14px; background: #060b22bb; border: 1px solid var(--garis-2); box-shadow: var(--timbul); }
.mundur-ket { display: flex; justify-content: space-around; margin: 12px 0 0; font: 400 8px/1 var(--piksel); letter-spacing: .16em; text-transform: uppercase; color: var(--redup-2); }
.undian { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hadiah-besar { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.baris-hadiah { display: flex; align-items: center; gap: 16px; }
.label-hadiah { min-width: 64px; text-align: right; font: 400 8px/1 var(--piksel); letter-spacing: .14em; text-transform: uppercase; color: var(--redup-2); }
.shio-besar { margin: 4px 0 0; color: var(--redup); }
.shio-besar b { font-family: var(--tampil); font-size: 30px; letter-spacing: .05em; text-transform: uppercase; color: var(--cyan-2); text-shadow: 0 0 18px #33e8ff66; }
.pesan { margin: 0; color: var(--redup); font-size: 14px; }
.panggung-riwayat { padding: 18px; border: 1px solid var(--garis); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--timbul); }
.daftar-riwayat { list-style: none; margin: 0; padding: 0; }
.daftar-riwayat li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
.daftar-riwayat .tgl { grid-column: 1 / -1; font-size: 12px; color: var(--redup-2); }
.panggung-riwayat .tautan { display: inline-block; margin-top: 12px; }

/* ---------- ubin flip (panggung) ---------- */
.ubin-baris { display: inline-flex; gap: .16em; align-items: center; font-size: 30px; }
.ubin-baris.sedang { font-size: 34px; }
.ubin-baris.raksasa { font-size: clamp(54px, 9vw, 96px); gap: .14em; }
.ubin-baris.jam { font-size: clamp(44px, 7vw, 76px); gap: .1em; perspective: none; }
.ubin { position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.42em; border-radius: .13em; background: linear-gradient(180deg, #232B6E 0%, #1A2058 50%, #141A4A 50%, #0F1440 100%); color: var(--putih); font: 700 1em/1 var(--mono); border: 1px solid #3a459e99; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #00000080, 0 8px 18px -8px #000; text-shadow: 0 0 12px #33e8ff44; }
.ubin::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--malam); opacity: .95; }
.ubin.kosong { color: var(--redup-2); text-shadow: none; }
.ubin.putar { animation: flap .26s ease-in-out; }
.ubin.hidup { animation: nyala .6s ease-out; }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(-88deg); } 100% { transform: rotateX(0); } }
@keyframes nyala { 0% { box-shadow: inset 0 1px 0 #ffffff14, 0 0 0 0 #33e8ff88; } 100% { box-shadow: inset 0 1px 0 #ffffff14, 0 0 0 18px #33e8ff00; } }
.ubin-baris.jam .ubin.sela { width: .5em; background: none; border: 0; box-shadow: none; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.ubin-baris.jam .ubin.sela::after { display: none; }
/* Split flap hitung mundur: dua daun berengsel di tengah, perspektif per ubin (titik hilang = engselnya sendiri). */
.ubin.flip-jam { overflow: visible; transform: none; perspective: 420px; perspective-origin: 50% 50%; transform-style: flat; }
.ubin.flip-jam::after { z-index: 5; pointer-events: none; height: 2px; background: #060b22; box-shadow: 0 1px #ffffff22; }
.flip-bayang { position: absolute; inset: 0; background: linear-gradient(#02040f, #05071c); opacity: 0; pointer-events: none; }
.flip-panel { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; pointer-events: none; }
.flip-atas { top: 0; transform-origin: center bottom; border-radius: .1em .1em 0 0; background: linear-gradient(#232B6E, #1A2058); }
.flip-bawah { bottom: 0; transform-origin: center top; border-radius: 0 0 .1em .1em; background: linear-gradient(#141A4A, #0F1440); }
.flip-isi { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; line-height: 1; }
.flip-atas .flip-isi { top: 0; } .flip-bawah .flip-isi { bottom: 0; }
.flip-bergerak { z-index: 3; will-change: transform; } .flip-bawah.flip-bergerak { z-index: 4; }

/* ---------- kotak ringkasan, paito, prediksi ---------- */
.ringkas-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kotak { padding: 14px 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--garis); border-radius: 12px; box-shadow: var(--timbul); }
.kotak b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--putih); }
.kotak small { display: block; margin-top: 4px; font-size: 12px; color: var(--redup-2); }
.paito-atas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.legenda i, .paito-sel i, .frek-batang i { font-style: normal; }
.tabel.paito th, .tabel.paito td { text-align: center; padding: 6px 6px; }
.tabel.paito th.tgl { text-align: left; font-size: 12px; font-family: var(--mono); letter-spacing: 0; color: var(--redup); }
.paito-sel { display: inline-flex; gap: 2px; }
.paito-sel i, .legenda i { display: inline-grid; place-items: center; width: 22px; height: 26px; border-radius: 5px; font: 700 13px var(--mono); color: #0a1230; }
.legenda { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.paito-sel.hampa { color: var(--redup-2); }
.paito-sel i.d0, .legenda i.d0, .frek-batang i.d0 { background: #B9BFD6; } .paito-sel i.d1, .legenda i.d1, .frek-batang i.d1 { background: #FF5F6D; } .paito-sel i.d2, .legenda i.d2, .frek-batang i.d2 { background: #FF9F43; } .paito-sel i.d3, .legenda i.d3, .frek-batang i.d3 { background: #FFD166; } .paito-sel i.d4, .legenda i.d4, .frek-batang i.d4 { background: #4EE39A; }
.paito-sel i.d5, .legenda i.d5, .frek-batang i.d5 { background: #2DD4BF; } .paito-sel i.d6, .legenda i.d6, .frek-batang i.d6 { background: #5AA9FF; } .paito-sel i.d7, .legenda i.d7, .frek-batang i.d7 { background: #8B7BFF; } .paito-sel i.d8, .legenda i.d8, .frek-batang i.d8 { background: #C77DFF; } .paito-sel i.d9, .legenda i.d9, .frek-batang i.d9 { background: #FF6BD6; }
.frek-baris { margin-top: 24px; }
.frek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.frek { padding: 14px; background: var(--panel); border: 1px solid var(--garis); border-radius: 12px; }
.frek > .piksel { margin-bottom: 10px; }
.frek-batang { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 90px; align-items: end; }
.frek-batang span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.frek-batang i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; }
.frek-batang b { font: 500 11px var(--mono); color: var(--redup-2); }
.prediksi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.prediksi-kotak { padding: 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--timbul); content-visibility: auto; contain-intrinsic-size: 330px 260px; }
.prediksi-kotak.besar { padding: 24px; }
.prediksi-kotak header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.prediksi-kotak header h3 { font-size: 19px; }
.prediksi-kotak header .mono { color: var(--redup-2); font-size: 13px; }
.prediksi-inti { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 14px; background: var(--malam-2); border-radius: 10px; border: 1px solid var(--garis); }
.prediksi-inti b { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: .08em; color: var(--putih); }
.prediksi-inti b.sorot { color: var(--cyan-2); text-shadow: 0 0 16px #33e8ff44; }
.prediksi-top { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin-top: 10px; }
.prediksi-top p { margin: 4px 0 0; font-size: 15px; line-height: 1.7; letter-spacing: .04em; color: var(--putih); word-spacing: .3em; }
.prediksi-dasar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.metode { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--garis); color: var(--redup-2); font-size: 13px; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .spanduk { grid-template-columns: 1fr; padding: 26px 22px; min-height: 0; }
  .panggung { grid-template-columns: 1fr; }
  .kepala-pasaran { grid-template-columns: auto 1fr; }
  .kepala-pasaran .tab { grid-column: 1 / -1; }
  .prediksi-top { grid-template-columns: 1fr; }
  .cip-wilayah { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .kepala-nav { display: none; }
  .kepala-sela { display: none; }
  .bilah-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: #060b22ee; backdrop-filter: blur(14px); border-top: 1px solid var(--garis); }
  .bilah-bawah a { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 10px; letter-spacing: .02em; }
  .bilah-bawah a.aktif { color: var(--cyan-2); }
  .isi { padding-bottom: 96px; }
  .bawah { padding-bottom: 100px; }
}
@media (max-width: 640px) {
  .utama { overflow-x: clip; }
  .kepala { gap: 8px; height: 58px; padding: 0 12px; }
  .merek-teks { display: none; }
  .cari { flex: 1 1 0; min-width: 0; max-width: none; height: 36px; padding: 0 10px; }
  .indikator { padding: 0 9px; height: 30px; font-size: 0; gap: 6px; } .indikator b { font-size: 12px; }
  .jam { height: 30px; font-size: 12px; padding: 0 9px; } .jam small { display: none; }
  .mundur .piksel { font-size: 10px; }
  .isi { padding-left: 14px; padding-right: 14px; }
  .spanduk { padding: 22px 16px; border-radius: 16px; }
  .spanduk-teks h1 { font-size: 30px; }
  .spanduk-sub { font-size: 13.5px; }
  .spanduk-sorot, .sorotan { min-height: 240px; }
  .sorotan-logo { width: 92px; height: 60px; top: 14px; right: 14px; }
  .kategori { flex-direction: column; align-items: stretch; gap: 8px; }
  .cip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .rak { grid-template-columns: 1fr; gap: 24px 12px; }
  .kartu-art { height: 120px; }
  .jalur-petak a { min-width: 230px; }
  .baris-hadiah { flex-direction: column; gap: 6px; }
  .label-hadiah { text-align: center; min-width: 0; }
  .ubin-baris.raksasa { font-size: 15vw; }
  .ubin-baris.jam { font-size: 9.5vw; }
  .mundur-angka { padding: 10px; }
  .kepala-pasaran { padding: 18px; } .logo.besar { width: 84px; height: 56px; }
  .tab { flex-wrap: wrap; } .tab a { padding: 8px 10px; }
  .kotak b { overflow-wrap: anywhere; }
  .keluaran-tabel th:first-child, .keluaran-tabel td:first-child, .sel-pasaran small { display: none; }
  .keluaran-tabel .sel-pasaran img { width: 36px; height: 24px; }
  .tabel td { padding: 8px 10px; } .tabel th { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ubin.putar, .ubin.hidup, .titik, .pil-menunggu::before, .indikator.ada i, .sorotan-logo, .sorotan-hitung, .jalur-petak.fase-menunggu .hitung, .bola-baris.baru .bola { animation: none; }
  .kartu, .kartu-art .logo, .kartu-art, .jalur-petak a, .tombol-neon { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- HALAMAN SELAIN LOBBY (live, riwayat, paito, prediksi, status): TAMPILAN CODEX v2 apa adanya, dicakup ke .isi ---------- */
body:not([data-halaman="beranda"]) .isi h1, body:not([data-halaman="beranda"]) .isi h2, body:not([data-halaman="beranda"]) .isi h3 { margin: 0; font-family: var(--tampil-kartu); font-weight: 900; letter-spacing: .01em; line-height: 1; }
body:not([data-halaman="beranda"]) .isi .mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
body:not([data-halaman="beranda"]) .isi .amber { color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .hijau { color: var(--hijau); }
body:not([data-halaman="beranda"]) .isi .merah { color: var(--merah); }
body:not([data-halaman="beranda"]) .isi .redup { color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .alis { margin: 0 0 6px; font: 700 11px/1 var(--teks); letter-spacing: .14em; text-transform: uppercase; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .sorot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; margin-bottom: 28px; }
body:not([data-halaman="beranda"]) .isi .sorot.ramping { grid-template-columns: 1fr; margin-bottom: 20px; }
body:not([data-halaman="beranda"]) .isi .sorot-teks h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: .005em; text-transform: uppercase; color: var(--kapur); max-width: 14ch; }
body:not([data-halaman="beranda"]) .isi .sorot-sub { margin: 16px 0 0; color: var(--kapur-60); max-width: 52ch; }
body:not([data-halaman="beranda"]) .isi .sorot-sub b { color: var(--amber); font-weight: 700; }
body:not([data-halaman="beranda"]) .isi .saring { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 18px; }
body:not([data-halaman="beranda"]) .isi .cari { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; padding: 0 14px; height: 42px; background: var(--papan); border: 1px solid var(--garis); border-radius: 10px; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .cari:focus-within { border-color: var(--amber); color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .cari input { flex: 1; height: 100%; background: none; border: 0; outline: 0; color: var(--kapur); }
body:not([data-halaman="beranda"]) .isi .cari input::placeholder { color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .cip { display: flex; flex-wrap: wrap; gap: 6px; }
body:not([data-halaman="beranda"]) .isi .cip button { height: 36px; padding: 0 12px; border: 1px solid var(--garis); border-radius: 999px; background: var(--papan); color: var(--kapur-60); cursor: pointer; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
body:not([data-halaman="beranda"]) .isi .cip button .mono { font-size: 12px; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .cip button:hover { border-color: var(--garis-2); color: var(--kapur); }
body:not([data-halaman="beranda"]) .isi .cip button.aktif { background: var(--amber); border-color: var(--amber); color: var(--amber-tinta); }
body:not([data-halaman="beranda"]) .isi .cip button.aktif .mono { color: var(--amber-tinta); }
body:not([data-halaman="beranda"]) .isi .pesan-kosong { text-align: center; color: var(--kapur-40); padding: 40px 0; }
body:not([data-halaman="beranda"]) .isi .ubin-baris { display: inline-flex; gap: .16em; perspective: 300px; font-size: 30px; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.kecil { font-size: 17px; gap: .12em; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.sedang { font-size: 34px; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.raksasa { font-size: clamp(54px, 9vw, 96px); gap: .14em; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam { font-size: clamp(44px, 8vw, 80px); gap: .1em; }
body:not([data-halaman="beranda"]) .isi .ubin-baris { align-items: center; }
body:not([data-halaman="beranda"]) .isi .ubin { position: relative; display: inline-grid; place-items: center; width: 1.08em; height: 1.42em; border-radius: .13em; background: linear-gradient(180deg, #232d48 0%, #1c2439 50%, #171e31 50%, #141a2c 100%); color: var(--amber); font: 700 1em/1 var(--mono); box-shadow: inset 0 1px 0 #ffffff12, 0 2px 0 #00000080, 0 6px 14px -8px #000; text-shadow: 0 0 14px #f6b42455; transform-style: preserve-3d; backface-visibility: hidden; }
body:not([data-halaman="beranda"]) .isi .ubin::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tinta); opacity: .95; }
body:not([data-halaman="beranda"]) .isi .ubin.kosong { color: var(--kapur-40); text-shadow: none; }
body:not([data-halaman="beranda"]) .isi .ubin.putar { animation: flap .26s ease-in-out; }
body:not([data-halaman="beranda"]) .isi .ubin.hidup { animation: nyala .6s ease-out; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam .ubin { color: var(--kapur); text-shadow: none; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam .ubin.sela { width: .5em; background: none; box-shadow: none; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam .ubin.sela::after { display: none; }
body:not([data-halaman="beranda"]) .isi .logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--papan-3); }
body:not([data-halaman="beranda"]) .isi .logo.besar { width: 64px; height: 64px; border-radius: 14px; }
body:not([data-halaman="beranda"]) .isi .logo-kosong { display: grid; place-items: center; font: 900 16px var(--tampil-kartu); color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .pil { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11px/1 var(--teks); letter-spacing: .1em; text-transform: uppercase; background: var(--papan-3); color: var(--kapur-60); white-space: nowrap; }
body:not([data-halaman="beranda"]) .isi .pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body:not([data-halaman="beranda"]) .isi .pil-menunggu { background: #ff5a5a22; color: var(--merah); }
body:not([data-halaman="beranda"]) .isi .pil-menunggu::before { animation: kedip 1s infinite; }
body:not([data-halaman="beranda"]) .isi .pil-live { background: #43d69a1f; color: var(--hijau); }
body:not([data-halaman="beranda"]) .isi .pil-tutup { background: #f6b42420; color: var(--amber-2); }
body:not([data-halaman="beranda"]) .isi .pil-buka { color: var(--kapur-60); }
body:not([data-halaman="beranda"]) .isi .pil-libur, body:not([data-halaman="beranda"]) .isi .pil-terlambat { color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .hadiah { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--tinta); border-radius: 10px; border: 1px solid #ffffff08; }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil { display: flex; gap: 14px; font-size: 13px; color: var(--kapur-60); font-family: var(--mono); }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil b { display: block; font: 700 10px/1 var(--teks); letter-spacing: .12em; text-transform: uppercase; color: var(--kapur-40); margin-bottom: 3px; }
body:not([data-halaman="beranda"]) .isi .aksi { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px -14px 0; border-top: 1px solid var(--garis); }
body:not([data-halaman="beranda"]) .isi .aksi a { padding: 11px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--kapur-60); border-right: 1px solid var(--garis); }
body:not([data-halaman="beranda"]) .isi .aksi a:last-child { border-right: 0; }
body:not([data-halaman="beranda"]) .isi .aksi a:hover { color: var(--amber); background: #ffffff05; }
body:not([data-halaman="beranda"]) .isi .aksi a:first-child { color: var(--kapur); }
body:not([data-halaman="beranda"]) .isi .kepala-pasaran { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--garis); }
body:not([data-halaman="beranda"]) .isi .kepala-teks h1 { font-size: clamp(34px, 5vw, 56px); text-transform: uppercase; }
body:not([data-halaman="beranda"]) .isi .kepala-teks .alis a { text-decoration: underline; text-underline-offset: 3px; }
body:not([data-halaman="beranda"]) .isi .jadwal { margin: 8px 0 0; color: var(--kapur-60); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body:not([data-halaman="beranda"]) .isi .jadwal b { color: var(--kapur); font-weight: 500; }
body:not([data-halaman="beranda"]) .isi .jadwal .hitung { font-family: var(--mono); font-size: 13px; color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .tab { display: flex; gap: 4px; padding: 4px; background: var(--papan); border: 1px solid var(--garis); border-radius: 10px; }
body:not([data-halaman="beranda"]) .isi .tab a { padding: 8px 14px; border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--kapur-60); }
body:not([data-halaman="beranda"]) .isi .tab a.aktif { background: var(--amber); color: var(--amber-tinta); }
body:not([data-halaman="beranda"]) .isi .tab a:not(.aktif):hover { color: var(--kapur); background: var(--papan-2); }
body:not([data-halaman="beranda"]) .isi .tab.kecil a { padding: 6px 12px; font-family: var(--mono); }
body:not([data-halaman="beranda"]) .isi .panggung { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
body:not([data-halaman="beranda"]) .isi .panggung-utama { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 460px; padding: 40px 24px; text-align: center; background: linear-gradient(180deg, #0f1526, #0a0e1a); border: 1px solid var(--garis-2); border-radius: var(--radius); overflow: hidden; }
body:not([data-halaman="beranda"]) .isi .panggung-utama::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff03 3px 4px); pointer-events: none; }
body:not([data-halaman="beranda"]) .isi .panggung[data-fase="menunggu"] .panggung-utama { border-color: color-mix(in srgb, var(--merah) 50%, var(--garis-2)); box-shadow: 0 0 60px -30px var(--merah); }
body:not([data-halaman="beranda"]) .isi .mundur .alis { font-size: 12px; margin-bottom: 14px; color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .mundur-ket { display: flex; justify-content: space-around; margin: 10px 0 0; font: 700 10px/1 var(--teks); letter-spacing: .16em; text-transform: uppercase; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .undian { display: flex; flex-direction: column; align-items: center; gap: 18px; }
body:not([data-halaman="beranda"]) .isi .hadiah-besar { display: flex; flex-direction: column; gap: 14px; align-items: center; }
body:not([data-halaman="beranda"]) .isi .baris-hadiah { display: flex; align-items: center; gap: 16px; }
body:not([data-halaman="beranda"]) .isi .label-hadiah { min-width: 64px; text-align: right; font: 700 11px/1 var(--teks); letter-spacing: .14em; text-transform: uppercase; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .shio-besar { margin: 4px 0 0; color: var(--kapur-60); }
body:not([data-halaman="beranda"]) .isi .shio-besar b { font-family: var(--tampil-kartu); font-size: 30px; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .pesan { margin: 0; color: var(--kapur-60); font-size: 14px; }
body:not([data-halaman="beranda"]) .isi .tombol { height: 40px; padding: 0 18px; border: 1px solid var(--garis-2); border-radius: 10px; background: var(--papan-2); color: var(--kapur); font-weight: 700; cursor: pointer; }
body:not([data-halaman="beranda"]) .isi .tombol:hover { border-color: var(--amber); color: var(--amber); }
body:not([data-halaman="beranda"]) .isi .panggung-riwayat { padding: 18px; background: var(--papan); border: 1px solid var(--garis); border-radius: var(--radius); }
body:not([data-halaman="beranda"]) .isi .panggung-riwayat h2 { font-size: 22px; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }
body:not([data-halaman="beranda"]) .isi .daftar-riwayat { list-style: none; margin: 0; padding: 0; }
body:not([data-halaman="beranda"]) .isi .daftar-riwayat li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
body:not([data-halaman="beranda"]) .isi .daftar-riwayat .tgl { grid-column: 1 / -1; font-size: 12px; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .tautan { display: inline-block; margin-top: 12px; color: var(--amber); font-weight: 700; font-size: 13px; }
body:not([data-halaman="beranda"]) .isi .ringkas-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
body:not([data-halaman="beranda"]) .isi .kotak { padding: 14px 16px; background: var(--papan); border: 1px solid var(--garis); border-radius: 12px; }
body:not([data-halaman="beranda"]) .isi .kotak b { display: block; font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--kapur); }
body:not([data-halaman="beranda"]) .isi .kotak small { display: block; margin-top: 4px; font-size: 12px; color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--papan); }
body:not([data-halaman="beranda"]) .isi .tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
body:not([data-halaman="beranda"]) .isi .tabel th { text-align: left; padding: 12px 14px; font: 700 11px/1 var(--teks); letter-spacing: .12em; text-transform: uppercase; color: var(--kapur-40); border-bottom: 1px solid var(--garis); background: var(--papan-2); white-space: nowrap; }
body:not([data-halaman="beranda"]) .isi .tabel td { padding: 10px 14px; border-bottom: 1px solid #ffffff08; vertical-align: middle; }
body:not([data-halaman="beranda"]) .isi .tabel tr:last-child td { border-bottom: 0; }
body:not([data-halaman="beranda"]) .isi .tabel tbody tr:hover td { background: #ffffff04; }
body:not([data-halaman="beranda"]) .isi .tabel .tgl { color: var(--kapur-60); white-space: nowrap; }
body:not([data-halaman="beranda"]) .isi .halaman-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
body:not([data-halaman="beranda"]) .isi .halaman-nav a, body:not([data-halaman="beranda"]) .isi .halaman-nav i { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--garis); border-radius: 8px; background: var(--papan); font-family: var(--mono); font-size: 13px; color: var(--kapur-60); font-style: normal; }
body:not([data-halaman="beranda"]) .isi .halaman-nav a.aktif { background: var(--amber); border-color: var(--amber); color: var(--amber-tinta); font-weight: 700; }
body:not([data-halaman="beranda"]) .isi .paito-atas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
body:not([data-halaman="beranda"]) .isi .legenda i, body:not([data-halaman="beranda"]) .isi .paito-sel i, body:not([data-halaman="beranda"]) .isi .frek-batang i { font-style: normal; }
body:not([data-halaman="beranda"]) .isi .tabel.paito th, body:not([data-halaman="beranda"]) .isi .tabel.paito td { text-align: center; padding: 6px 6px; }
body:not([data-halaman="beranda"]) .isi .tabel.paito th.tgl { text-align: left; font-size: 12px; }
body:not([data-halaman="beranda"]) .isi .paito-sel { display: inline-flex; gap: 2px; }
body:not([data-halaman="beranda"]) .isi .paito-sel i, body:not([data-halaman="beranda"]) .isi .legenda i { display: inline-grid; place-items: center; width: 22px; height: 26px; border-radius: 5px; font: 700 13px var(--mono); color: #0b0f1c; }
body:not([data-halaman="beranda"]) .isi .legenda { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
body:not([data-halaman="beranda"]) .isi .paito-sel.kosong { color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .d0 { background: #C9CDD9; }
body:not([data-halaman="beranda"]) .isi .d1 { background: #FF6B6B; }
body:not([data-halaman="beranda"]) .isi .d2 { background: #FF9F43; }
body:not([data-halaman="beranda"]) .isi .d3 { background: #FFD166; }
body:not([data-halaman="beranda"]) .isi .d4 { background: #6EE7A0; }
body:not([data-halaman="beranda"]) .isi .d5 { background: #2DD4BF; }
body:not([data-halaman="beranda"]) .isi .d6 { background: #60A5FA; }
body:not([data-halaman="beranda"]) .isi .d7 { background: #818CF8; }
body:not([data-halaman="beranda"]) .isi .d8 { background: #C084FC; }
body:not([data-halaman="beranda"]) .isi .d9 { background: #F472B6; }
body:not([data-halaman="beranda"]) .isi .frek-baris { margin-top: 24px; }
body:not([data-halaman="beranda"]) .isi .frek-baris h2 { font-size: 22px; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }
body:not([data-halaman="beranda"]) .isi .frek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
body:not([data-halaman="beranda"]) .isi .frek { padding: 14px; background: var(--papan); border: 1px solid var(--garis); border-radius: 12px; }
body:not([data-halaman="beranda"]) .isi .frek-batang { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 90px; align-items: end; }
body:not([data-halaman="beranda"]) .isi .frek-batang span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
body:not([data-halaman="beranda"]) .isi .frek-batang i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; }
body:not([data-halaman="beranda"]) .isi .frek-batang b { font: 500 11px var(--mono); color: var(--kapur-40); }
body:not([data-halaman="beranda"]) .isi .prediksi-satu .alis { margin-bottom: 10px; }
body:not([data-halaman="beranda"]) .isi .prediksi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
body:not([data-halaman="beranda"]) .isi .prediksi-kotak { padding: 16px; background: var(--papan); border: 1px solid var(--garis); border-radius: var(--radius); content-visibility: auto; contain-intrinsic-size: 340px 260px; }
body:not([data-halaman="beranda"]) .isi .prediksi-kotak.besar { padding: 24px; }
body:not([data-halaman="beranda"]) .isi .prediksi-kotak header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
body:not([data-halaman="beranda"]) .isi .prediksi-kotak header h3 { font-size: 22px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
body:not([data-halaman="beranda"]) .isi .prediksi-kotak header .mono { color: var(--kapur-40); font-size: 13px; }
body:not([data-halaman="beranda"]) .isi .prediksi-inti { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 14px; background: var(--tinta); border-radius: 10px; border: 1px solid #ffffff08; }
body:not([data-halaman="beranda"]) .isi .prediksi-inti b { display: block; font-size: 22px; font-weight: 700; letter-spacing: .08em; color: var(--kapur); }
body:not([data-halaman="beranda"]) .isi .prediksi-inti b.amber { color: var(--amber); text-shadow: 0 0 16px #f6b42444; }
body:not([data-halaman="beranda"]) .isi .prediksi-top { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin-top: 10px; }
body:not([data-halaman="beranda"]) .isi .prediksi-top p { margin: 0; font-size: 15px; line-height: 1.7; letter-spacing: .04em; color: var(--kapur); word-spacing: .3em; }
body:not([data-halaman="beranda"]) .isi .prediksi-dasar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
body:not([data-halaman="beranda"]) .isi .metode { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--garis); color: var(--kapur-40); font-size: 13px; }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .sorot, body:not([data-halaman="beranda"]) .isi .panggung { grid-template-columns: 1fr; } }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .kepala-pasaran { grid-template-columns: auto 1fr; } }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .kepala-pasaran .tab { grid-column: 1 / -1; } }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .prediksi-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .baris-hadiah { flex-direction: column; gap: 6px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .label-hadiah { text-align: center; min-width: 0; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .ubin-baris.raksasa { font-size: 15vw; } }
@media (prefers-reduced-motion: reduce) { body:not([data-halaman="beranda"]) .isi .ubin.putar, body:not([data-halaman="beranda"]) .isi .ubin.hidup, body:not([data-halaman="beranda"]) .isi .pil-menunggu::before { animation: none; } }
body:not([data-halaman="beranda"]) .isi .sorot { gap: 22px; grid-template-columns: 1.2fr 1fr; }
body:not([data-halaman="beranda"]) .isi .sorot-teks { position: relative; isolation: isolate; overflow: hidden; padding: 36px; border: 1px solid #49b7ff; border-radius: 22px; background: radial-gradient(ellipse at 90% 5%, #0cc5ff66, transparent 50%), linear-gradient(125deg, #174ba8, #102f83 55%, #071b48); box-shadow: inset 0 2px 1px #aff1ff80, inset 0 -5px 22px #04102f, 0 0 0 4px #0c285a, 0 16px 44px #0008, 0 0 25px #0a82ff24; display: flex; flex-direction: column; justify-content: center; min-height: 340px; }
body:not([data-halaman="beranda"]) .isi .sorot-teks::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background: repeating-linear-gradient(120deg, transparent 0 65px, #56caff22 66px 67px, transparent 68px 130px), repeating-linear-gradient(60deg, transparent 0 65px, #56caff22 66px 67px, transparent 68px 130px); mask-image: linear-gradient(90deg, transparent, #000); }
body:not([data-halaman="beranda"]) .isi .sorot-teks::after { content: ''; position: absolute; width: 220px; height: 220px; right: -130px; bottom: -120px; border: 28px solid #43c6ff66; border-radius: 50%; box-shadow: 0 0 0 16px #2473cd44, 0 0 50px #259aff; z-index: -1; }
body:not([data-halaman="beranda"]) .isi .sorot-teks .alis { color: #aeeaff; line-height: 1.6; }
body:not([data-halaman="beranda"]) .isi .sorot-teks h1 { max-width: 18ch; font-size: clamp(38px, 4.4vw, 66px); line-height: 1.04; text-shadow: 0 3px 0 #062564, 0 5px 20px #0005; }
body:not([data-halaman="beranda"]) .isi .sorot-sub { line-height: 1.9; color: #c6dcff; }
body:not([data-halaman="beranda"]) .isi .sorot-sub b { color: #a7efff; }
body:not([data-halaman="beranda"]) .isi .sorot.ramping .sorot-teks { min-height: 210px; }
body:not([data-halaman="beranda"]) .isi .sorot.ramping h1 { max-width: 30ch; }
body:not([data-halaman="beranda"]) .isi .saring { padding: 16px; margin-top: 28px; background: linear-gradient(180deg, #102956, #091831); border: 1px solid #245995; border-radius: 14px; box-shadow: inset 0 1px #ffffff14, 0 8px 20px #0003; }
body:not([data-halaman="beranda"]) .isi .cari { background: #030e26; border-color: #285488; max-width: none; }
body:not([data-halaman="beranda"]) .isi .cari input { min-width: 0; font-size: 13px; }
body:not([data-halaman="beranda"]) .isi .cip button { border-radius: 8px; background: #102c59; }
body:not([data-halaman="beranda"]) .isi .cip button.aktif, body:not([data-halaman="beranda"]) .isi .tab a.aktif, body:not([data-halaman="beranda"]) .isi .halaman-nav a.aktif, body:not([data-halaman="beranda"]) .isi .tombol { color: #fff; background: linear-gradient(180deg, #2ba9fb, #1261c6 55%, #144aa2); border-color: #68d5ff; box-shadow: inset 0 1px #d5f6ff88, 0 3px 0 #03142f, 0 4px 14px #008bff33; text-shadow: 0 1px 2px #073679; }
body:not([data-halaman="beranda"]) .isi .cip button.aktif .mono { color: #dcf7ff; }
body:not([data-halaman="beranda"]) .isi .logo { width: 48px; height: 48px; border: 1px solid #95d8ff80; box-shadow: 0 3px 8px #0007; }
body:not([data-halaman="beranda"]) .isi .pil { font-size: 9px; letter-spacing: .05em; padding: 0 7px; }
body:not([data-halaman="beranda"]) .isi .pil-buka { color: #b9e9ff; background: #278dff33; }
body:not([data-halaman="beranda"]) .isi .hadiah { align-items: center; gap: 15px; padding: 18px 10px 14px; border: 1px solid #3678bb; background: linear-gradient(180deg, #020a21, #071636); box-shadow: inset 0 4px 16px #000a, 0 1px #83d2ff26; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.utama { font-size: clamp(30px, 2.8vw, 40px); gap: .18em; }
body:not([data-halaman="beranda"]) .isi .ubin { color: #e0f7ff; background: linear-gradient(180deg, #2359a1, #13376b 49%, #0a234d 50%, #154483); border: 1px solid #58abed80; text-shadow: 0 2px 0 #001634, 0 0 12px #4cc8ff80; box-shadow: inset 0 2px #b9ebff55, inset 0 -2px #0007, 0 3px 0 #010818, 0 5px 12px #0009; }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil { width: 100%; justify-content: space-around; text-align: center; color: #dfecff; }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil b { color: #8daed8; }
body:not([data-halaman="beranda"]) .isi .aksi { margin: 0 -18px; background: linear-gradient(180deg, #16428a, #0a2454); border-top-color: #367aca; }
body:not([data-halaman="beranda"]) .isi .aksi a { font-size: 12px; padding: 13px 0; color: #bdd9fc; border-right-color: #285496; }
body:not([data-halaman="beranda"]) .isi .aksi a:first-child { color: #8beaff; background: #1679ca22; }
body:not([data-halaman="beranda"]) .isi .aksi a:hover { color: #fff; background: #2385eb44; }
body:not([data-halaman="beranda"]) .isi .panggung-utama { border: 2px solid #4bc9ff; background: radial-gradient(ellipse at 50% 0, #124c9c, transparent 70%), linear-gradient(#0c2557, #040e26); box-shadow: inset 0 0 0 5px #11376a, inset 0 0 40px #008bff22, 0 0 22px #008bff2b, 0 16px 36px #0008; }
body:not([data-halaman="beranda"]) .isi .panggung-riwayat, body:not([data-halaman="beranda"]) .isi .prediksi-kotak, body:not([data-halaman="beranda"]) .isi .kotak, body:not([data-halaman="beranda"]) .isi .frek { background: linear-gradient(140deg, #123169, #091a3b); border-color: #3069a8; box-shadow: inset 0 1px #85ccff26, 0 8px 22px #0004; }
body:not([data-halaman="beranda"]) .isi .tabel th { background: linear-gradient(#164688, #0d2c5d); color: #badbff; }
body:not([data-halaman="beranda"]) .isi .tabel tbody tr:nth-child(even) { background: #0f2c5a66; }
body:not([data-halaman="beranda"]) .isi .prediksi-inti b.amber { text-shadow: 0 0 16px #33caff44; }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .sorot { grid-template-columns: 1fr; } }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .sorot-teks { min-height: 280px; } }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .sorot-teks h1 { max-width: 24ch; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .sorot-teks { padding: 26px 22px; min-height: 290px; border-radius: 18px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .sorot-teks h1 { font-size: 43px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .sorot-sub { font-size: 13px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .saring { padding: 12px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .cari { flex-basis: 100%; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .cip { gap: 8px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .cip button { font-size: 11px; padding: 0 9px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .ubin-baris.utama { font-size: 38px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .prediksi-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .panggung-utama { padding: 30px 12px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .ubin-baris.jam { font-size: 9vw; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .tab { flex-wrap: wrap; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .tab a { padding: 8px 10px; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .kotak b { overflow-wrap: anywhere; } }
@media (max-width: 560px) { body:not([data-halaman="beranda"]) .isi .sorot.ramping h1 { font-size: 36px; } }
body:not([data-halaman="beranda"]) .isi .cip button { height:52px; padding:0 15px; border-radius:10px; border:1px solid #4274b5; border-bottom:3px solid #020b23; color:#bdcfec; background:linear-gradient(#234b8c,#0c2455 52%,#0a1b40); box-shadow:inset 0 1px #acdfff55,0 2px #2868ac66; font-size:11px; font-weight:700; }
body:not([data-halaman="beranda"]) .isi .cip button.aktif { background:linear-gradient(#4dc5ff,#2374d6 48%,#184ead 51%,#2361c8); border-color:#79dbff; border-bottom-color:#113777; box-shadow:inset 0 2px #e8fcff88,0 2px #318bdb,0 0 20px #1581f644; }
body:not([data-halaman="beranda"]) .isi .aktif .kategori-icon { color:#fff0b2; }
body:not([data-halaman="beranda"]) .isi .cip button .mono { border-radius:5px; background:#01091b44; padding:2px 5px; font-size:10px; }
body:not([data-halaman="beranda"]) .isi .cari input { font-size:11px; }
body:not([data-halaman="beranda"]) .isi .kota-macau { background-position:0 0; }
body:not([data-halaman="beranda"]) .isi .kota-singapore { background-position:100% 0; }
body:not([data-halaman="beranda"]) .isi .kota-sydney { background-position:0 100%; }
body:not([data-halaman="beranda"]) .isi .kota-hongkong { background-position:100% 100%; }
body:not([data-halaman="beranda"]) .isi .hadiah { position:relative; padding:9px 8px 12px; gap:9px; border:2px solid #3f7dc1; border-radius:9px; background:linear-gradient(#02091b,#081a3c); box-shadow:0 1px #9ad1f677,inset 0 3px 7px #000; }
body:not([data-halaman="beranda"]) .isi .hadiah-label { color:#9bbddd; letter-spacing:1.4px; font-size:8px; font-weight:800; }
body:not([data-halaman="beranda"]) .isi .ubin-baris.utama { font-size:31px; gap:.13em; justify-content:center; }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil { font-size:11px; }
body:not([data-halaman="beranda"]) .isi .hadiah-kecil b { font-size:8px; letter-spacing:1px; margin-bottom:4px; }
body:not([data-halaman="beranda"]) .isi .aksi { position:relative; margin:0 -10px 5px; padding:0 5px 6px; border:0; gap:5px; grid-template-columns:repeat(3,1fr); background:transparent; }
body:not([data-halaman="beranda"]) .isi .aksi a { padding:8px 0; border:1px solid #39649f; background:linear-gradient(#244c84,#102750); border-radius:5px; font-size:9px; box-shadow:inset 0 1px #91bdec33,0 2px #010817; }
body:not([data-halaman="beranda"]) .isi .aksi a:first-child { grid-column:1/-1; color:#fff2c4; font-size:12px; letter-spacing:.8px; text-transform:uppercase; background:linear-gradient(#3aafff,#1b72d7 48%,#1455ae 52%,#2469c1); border:1px solid #8adfff; box-shadow:inset 0 1px #c8f4ff,0 3px #020d26; padding:10px 0; }
body:not([data-halaman="beranda"]) .isi .aksi a:first-child span { font-size:9px; padding-left:7px; }
body:not([data-halaman="beranda"]) .isi .aksi a:last-child { border-right:1px solid #39649f; }
body:not([data-halaman="beranda"]) .isi .aksi a:hover { filter:brightness(1.3); background:linear-gradient(#3279c6,#164583); }
body:not([data-halaman="beranda"]) .isi .aksi a:active { transform:translateY(2px); }
body:not([data-halaman="beranda"]) .isi .panggung-utama { isolation:isolate; border:4px ridge #87bded; box-shadow:0 0 0 5px #07142b,0 0 0 7px #285b9f,0 15px 35px #0009; }
body:not([data-halaman="beranda"]) .isi .panggung-utama::before { background-image:linear-gradient(#03102d44,#03102ded),var(--kota-img); background-size:100% 100%,cover; z-index:-1; opacity:.9; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-macau::before { background-position:0 0,0 0; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-singapore::before { background-position:0 0,100% 0; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-sydney::before { background-position:0 0,0 100%; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-hongkong::before { background-position:0 0,100% 100%; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-netral::before { background-image:linear-gradient(#03102d88,#03102df5),var(--kota-img); background-size:cover; }
body:not([data-halaman="beranda"]) .isi .panggung .ubin { background:linear-gradient(#92afcb,#fff 25%,#eef9ff 50%,#b7d3eb 51%,#f0fbff 75%,#728eaa); color:#123366; text-shadow:0 2px #fff; border:2px solid #d4ecff; font-family:Georgia,serif; box-shadow:inset 0 4px 7px #274c7866,0 4px #000,0 0 15px #448ed333; }
body:not([data-halaman="beranda"]) .isi .panggung .ubin::after { background:#28548955; }
body:not([data-halaman="beranda"]) .isi .panggung .ubin-baris.jam .ubin { color:#17376a; }
body:not([data-halaman="beranda"]) .isi .panggung .ubin-baris.jam .ubin.sela { color:#8fdfff; border:0; }
body:not([data-halaman="beranda"]) .isi .kepala-teks h1 { font-family:Georgia,serif; font-size:clamp(27px,4vw,46px); font-style:italic; color:#fff0b5; text-shadow:0 2px #755226,0 4px #000; }
body:not([data-halaman="beranda"]) .isi .sorot.ramping .sorot-teks h1 { font-family:Georgia,serif; font-size:clamp(30px,4vw,44px); font-style:italic; }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .cip { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .cip button { height:45px; font-size:10px; justify-content:center; padding:0 8px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .hadiah { gap:12px; padding:12px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .hadiah-label { font-size:9px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .hadiah-kecil { font-size:13px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .aksi { margin-inline:-10px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .aksi a { font-size:10px; padding:9px 0; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .aksi a:first-child { padding:12px; } }
@media (max-width:600px) { body:not([data-halaman="beranda"]) .isi .panggung .ubin-baris.raksasa { font-size:13vw; } }
body:not([data-halaman="beranda"]) .isi .kota-cambodia, body:not([data-halaman="beranda"]) .isi .kota-amerika, body:not([data-halaman="beranda"]) .isi .kota-london, body:not([data-halaman="beranda"]) .isi .kota-malaysia, body:not([data-halaman="beranda"]) .isi .kota-indonesia) { background-image:var(--kota-img); background-size:cover; }
body:not([data-halaman="beranda"]) .isi .kota-thailand { background-position:0 0; }
body:not([data-halaman="beranda"]) .isi .kota-cambodia { background-position:50% 0; }
body:not([data-halaman="beranda"]) .isi .kota-amerika { background-position:100% 0; }
body:not([data-halaman="beranda"]) .isi .kota-london { background-position:0 100%; }
body:not([data-halaman="beranda"]) .isi .kota-malaysia { background-position:50% 100%; }
body:not([data-halaman="beranda"]) .isi .kota-indonesia { background-position:100% 100%; }
body:not([data-halaman="beranda"]) .isi .panggung-utama:is(.kota-thailand, body:not([data-halaman="beranda"]) .isi .kota-cambodia, body:not([data-halaman="beranda"]) .isi .kota-amerika, body:not([data-halaman="beranda"]) .isi .kota-london, body:not([data-halaman="beranda"]) .isi .kota-malaysia, body:not([data-halaman="beranda"]) .isi .kota-indonesia)::before { background-image:linear-gradient(#03102d44,#03102ded),var(--kota-img); background-size:100% 100%,cover; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-thailand::before { background-position:0 0,0 0; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-cambodia::before { background-position:0 0,50% 0; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-amerika::before { background-position:0 0,100% 0; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-london::before { background-position:0 0,0 100%; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-malaysia::before { background-position:0 0,50% 100%; }
body:not([data-halaman="beranda"]) .isi .panggung-utama.kota-indonesia::before { background-position:0 0,100% 100%; }
body:not([data-halaman="beranda"]) .isi .logo.besar { object-fit:contain; background:#06152f; }
body:not([data-halaman="beranda"]) .isi .logo.besar { padding:4px; }
@keyframes bezel-shine { 0%,25% { background-position:140% 0;opacity:.2; } 55% { opacity:1; } 85%,100% { background-position:-60% 0;opacity:.2; } }
body:not([data-halaman="beranda"]) .isi .coin-one { right:42%; bottom:25%; }
body:not([data-halaman="beranda"]) .isi .coin-two { right:9%; bottom:17%; color:#7beaff; text-shadow:0 0 14px #36c9ff; animation-delay:1.2s; }
@keyframes marquee-light { 0%,100% { opacity:.35; transform:scale(.7); } 45% { opacity:1; transform:scale(1.25); } }
@keyframes badge-float { 0%,100% { transform:rotate(8deg) translateY(0); } 50% { transform:rotate(5deg) translateY(-5px); } }
@keyframes coin-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-12px) rotate(22deg); } }
@keyframes rail-bob { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-3px); } }
@keyframes hud-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.16); } }
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam { perspective:none; }
body:not([data-halaman="beranda"]) .isi .ubin.flip-jam { overflow:visible; transform:none; perspective:420px; perspective-origin:50% 50%; transform-style:flat; }
body:not([data-halaman="beranda"]) .isi .flip-bayang { position:absolute; inset:0; background:linear-gradient(#071a3a,#0b2450); opacity:0; pointer-events:none; }
body:not([data-halaman="beranda"]) .isi .ubin.flip-jam::after { z-index:5; pointer-events:none; height:2px; background:#21466a77; box-shadow:0 1px #ffffff66; }
body:not([data-halaman="beranda"]) .isi .flip-panel { position:absolute; left:0; right:0; height:50%; overflow:hidden; backface-visibility:hidden; pointer-events:none; }
body:not([data-halaman="beranda"]) .isi .flip-atas { top:0; transform-origin:center bottom; border-radius:.1em .1em 0 0; background:linear-gradient(#92afcb,#fff 50%,#eef9ff); }
body:not([data-halaman="beranda"]) .isi .flip-bawah { bottom:0; transform-origin:center top; border-radius:0 0 .1em .1em; background:linear-gradient(#b7d3eb,#f0fbff 50%,#728eaa); }
body:not([data-halaman="beranda"]) .isi .flip-isi { position:absolute; left:0; right:0; height:200%; display:grid; place-items:center; line-height:1; }
body:not([data-halaman="beranda"]) .isi .flip-atas .flip-isi { top:0; }
body:not([data-halaman="beranda"]) .isi .flip-bawah .flip-isi { bottom:0; }
body:not([data-halaman="beranda"]) .isi .flip-bergerak { z-index:3; will-change:transform; }
body:not([data-halaman="beranda"]) .isi .flip-bawah.flip-bergerak { z-index:4; }
/* perbaikan split-flap tetap berlaku di atas gaya v2: perspektif per ubin, bayangan daun, pantulan */
body:not([data-halaman="beranda"]) .isi .ubin-baris.jam { perspective: none; }
body:not([data-halaman="beranda"]) .isi .ubin.flip-jam { overflow: visible; transform: none; perspective: 420px; perspective-origin: 50% 50%; transform-style: flat; }
body:not([data-halaman="beranda"]) .isi .flip-bayang { position: absolute; inset: 0; background: linear-gradient(#071a3a, #0b2450); opacity: 0; pointer-events: none; }

/* ---------- paito warna: saringan (di atas gaya v2) ---------- */
body:not([data-halaman="beranda"]) .isi .paito-saring { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, .8fr) minmax(120px, .5fr); gap: 12px 18px; align-items: end; padding: 16px 18px; margin-bottom: 16px; background: linear-gradient(140deg, #123169, #091a3b); border: 1px solid #3069a8; border-radius: 14px; box-shadow: inset 0 1px #85ccff26, 0 8px 22px #0004; }
body:not([data-halaman="beranda"]) .isi .paito-saring .alis { margin-bottom: 8px; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol { display: flex; flex-wrap: wrap; gap: 6px; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol button { width: 38px; height: 34px; border: 2px solid transparent; border-radius: 7px; font: 700 13px var(--mono); color: #0b0e2a; cursor: pointer; box-shadow: 0 2px 0 #000a; transition: transform .1s; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol button:hover { transform: translateY(-1px); }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol button.aktif { border-color: #fff; box-shadow: 0 0 0 2px #14366b, 0 0 12px #8ff; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .paito-hapus { background: #0b1a44; color: #cfe4ff; border: 1px solid #3d6aa8; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d0 { background: #C9CDD9; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d1 { background: #FF6B6B; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d2 { background: #FF9F43; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d3 { background: #FFD166; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d4 { background: #6EE7A0; }
body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d5 { background: #2DD4BF; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d6 { background: #60A5FA; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d7 { background: #818CF8; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d8 { background: #C084FC; } body:not([data-halaman="beranda"]) .isi .paito-warna-tombol .d9 { background: #F472B6; }
body:not([data-halaman="beranda"]) .isi .paito-pilih { display: block; }
body:not([data-halaman="beranda"]) .isi .paito-pilih select { width: 100%; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid #3d6aa8; background: #0b1a44; color: #eaf3ff; font: 600 13px var(--teks); }
body:not([data-halaman="beranda"]) .isi .paito-posisi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body:not([data-halaman="beranda"]) .isi .paito-posisi input { width: 96px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #3d6aa8; background: #0b1a44; color: #eaf3ff; font: 700 13px var(--mono); text-align: center; letter-spacing: .1em; }
body:not([data-halaman="beranda"]) .isi .paito-posisi input::placeholder { color: #6f8fbf; letter-spacing: .1em; font-weight: 700; }
body:not([data-halaman="beranda"]) .isi .paito-posisi .tombol { height: 36px; padding: 0 14px; }
body:not([data-halaman="beranda"]) .isi .paito-ket { grid-column: 1 / -1; margin: 0; font-size: 12px; }
body:not([data-halaman="beranda"]) .isi .tabel.paito th small { display: block; margin-top: 2px; font: 700 9px var(--mono); color: #8fdfff; letter-spacing: 0; }
body:not([data-halaman="beranda"]) .isi .paito-sel i.jumlah { background: #0b1a44; color: #8fdfff; border: 1px solid #3d6aa8; margin-left: 4px; }
body:not([data-halaman="beranda"]) .isi .tabel.paito.disaring .paito-sel i.redup { opacity: .18; filter: saturate(0); }
body:not([data-halaman="beranda"]) .isi .tabel.paito.disaring .paito-sel i.sorot { box-shadow: 0 0 0 2px #fff, 0 0 10px #8ff; transform: scale(1.08); }
body:not([data-halaman="beranda"]) .isi .tabel.paito.disaring tr.tanpa-sorot th { opacity: .35; }
@media (max-width: 900px) { body:not([data-halaman="beranda"]) .isi .paito-saring { grid-template-columns: 1fr 1fr; } body:not([data-halaman="beranda"]) .isi .paito-warna { grid-column: 1 / -1; } }
@media (max-width: 600px) { body:not([data-halaman="beranda"]) .isi .paito-saring { grid-template-columns: 1fr; } body:not([data-halaman="beranda"]) .isi .paito-posisi input { width: 64px; } }

/* ---------- buku mimpi ---------- */
body:not([data-halaman="beranda"]) .isi .mimpi-saring { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 18px; }
body:not([data-halaman="beranda"]) .isi .mimpi-saring .tab a small { margin-left: 6px; font-size: 11px; opacity: .8; }
body:not([data-halaman="beranda"]) .isi .mimpi-saring .cari { flex: 1 1 320px; max-width: 520px; height: 44px; }
body:not([data-halaman="beranda"]) .isi .mimpi-saring .cari .tombol { height: 32px; padding: 0 14px; margin-right: -6px; }
body:not([data-halaman="beranda"]) .isi .mimpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
body:not([data-halaman="beranda"]) .isi .mimpi-kartu { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid #3069a8; background: linear-gradient(140deg, #123169, #091a3b); box-shadow: inset 0 1px #85ccff26, 0 8px 22px #0004; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 300px 360px; }
body:not([data-halaman="beranda"]) .isi .mimpi-atas { position: relative; background: #fff; }
body:not([data-halaman="beranda"]) .isi .mimpi-gambar { display: block; width: 100%; height: auto; }
body:not([data-halaman="beranda"]) .isi .mimpi-gambar.kosong { display: grid; place-items: center; height: 120px; color: #6f8fbf; background: #0b1a44; font-size: 12px; }
body:not([data-halaman="beranda"]) .isi .mimpi-nomor { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 9px; border-radius: 8px; background: #0b1a44; color: #8fdfff; font-size: 15px; font-weight: 700; border: 1px solid #3d6aa8; box-shadow: 0 2px 8px #000a; }
body:not([data-halaman="beranda"]) .isi .mimpi-kata { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 4px; }
body:not([data-halaman="beranda"]) .isi .mimpi-kata span { padding: 5px 10px; border-radius: 999px; border: 1px solid #3d6aa8; background: #0b1a44; color: #eaf3ff; font-size: 12.5px; font-weight: 600; }
body:not([data-halaman="beranda"]) .isi .mimpi-kartu footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px 12px; margin-top: auto; color: #8fdfff; font-size: 13px; }
body:not([data-halaman="beranda"]) .isi .mimpi-4d-kata { font-weight: 600; }
body:not([data-halaman="beranda"]) .isi .tabel.mimpi-4d td.mono { color: #8fdfff; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

/* ---------- hover kartu ala olxjay: artwork miring ke belakang (perspektif), logo melompat ke depan, tombol LIVE DRAW muncul ---------- */
.rak .kartu { perspective: 900px; }
.rak .kartu-art { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s, box-shadow .45s; will-change: transform; }
.rak .kartu:hover .kartu-art, .rak .kartu:focus-within .kartu-art { transform: perspective(900px) translateY(-4%) rotateX(24deg); filter: brightness(.45) saturate(.8); box-shadow: 2px 35px 32px -8px #000c; }
.rak .kartu-kepala { perspective: none; }
.rak .kartu-kepala .logo { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
.rak .kartu:hover .kartu-kepala .logo, .rak .kartu:focus-within .kartu-kepala .logo { transform: translateX(-50%) translateY(-34px) scale(1.6); filter: drop-shadow(0 30px 22px #000e) drop-shadow(0 0 22px #4ec9ff55); }
.rak .kartu-tombol-hover { position: absolute; left: 50%; top: 182px; z-index: 7; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 10px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  font: 900 13px/1 var(--tampil-kartu); letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #ff5a5a, #e01a1a 55%, #b70d0d); border: 1px solid #ff9c9c; box-shadow: inset 0 1px 0 #ffffff66, inset 0 -2px 0 #0006, 0 8px 18px #000b, 0 0 18px #ff2a2a66; transition: transform .35s cubic-bezier(.2,.8,.2,1) .05s, opacity .3s .05s; }
.rak .kartu-tombol-hover span { font-size: 10px; }
.rak .kartu:hover .kartu-tombol-hover, .rak .kartu:focus-within .kartu-tombol-hover { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rak .kartu-tombol-hover:hover { filter: brightness(1.12); }
.rak .kartu:hover .kartu-judul, .rak .kartu:focus-within .kartu-judul { opacity: .55; }
@media (max-width: 600px) { .rak .kartu-tombol-hover { top: 205px; } }
@media (prefers-reduced-motion: reduce) { .rak .kartu-art, .rak .kartu-kepala .logo, .rak .kartu-tombol-hover { transition: none; } .rak .kartu:hover .kartu-art, .rak .kartu:focus-within .kartu-art { transform: none; } }

/* header padat (5 menu): rapatkan di layar menengah biar jam tidak terpotong */
@media (max-width: 1500px) { .kepala { gap: 10px; } .kepala-nav a { padding: 9px 9px; gap: 6px; } .indikator { padding: 0 10px; } }
@media (max-width: 1280px) { .merek-teks small { display: none; } .kepala-nav a span { font-size: 13px; } }
@media (max-width: 1100px) and (min-width: 901px) { .kepala-nav svg { display: none; } }

/* ---------- PARALAKS kartu lobby (public/halaman/paralaks.js mengisi --nx/--ny -1..1 dan --gx/--gy) ----------
   Kartu miring mengikuti kursor; gambar kota (belakang) bergeser berlawanan, logo (depan) bergeser searah & lebih jauh,
   isi kartu ikut sedikit. Kilau cahaya mengikuti kursor. Tanpa JS / layar sentuh: cuma terangkat lurus. */
.rak .kartu { --nx: 0; --ny: 0; --gx: 50%; --gy: 50%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
.rak .kartu:hover, .rak .kartu:focus-within { z-index: 9; transform: translateY(-4px); border-color: #b0ecff; box-shadow: inset 0 0 0 3px #14366b, 0 0 0 1px #6fc4ff, 0 22px 34px -14px #000d, 0 0 24px #1e8bff44; }
.rak .kartu.paralaks { transition: transform .12s linear, box-shadow .4s, border-color .3s;
  transform: perspective(1000px) translateY(-6px) rotateX(calc(var(--ny) * -9deg)) rotateY(calc(var(--nx) * 11deg));
  box-shadow: inset 0 0 0 3px #14366b, 0 0 0 1px #6fc4ff, calc(var(--nx) * -18px) calc(26px + var(--ny) * -10px) 40px -14px #000e, 0 0 28px #1e8bff4d; }
/* lapisan belakang: gambar kota, tanpa rebah; digeser berlawanan kursor dan sedikit diperbesar biar tepinya tidak kelihatan */
.rak .kartu:hover .kartu-art, .rak .kartu:focus-within .kartu-art { transform: none; box-shadow: none; filter: brightness(.8) saturate(1); }
.rak .kartu.paralaks .kartu-art { transition: transform .12s linear, filter .4s; transform: scale(1.1) translate(calc(var(--nx) * -9px), calc(var(--ny) * -7px)); filter: brightness(.85); }
/* lapisan depan: logo naik sedikit lalu ikut kursor lebih jauh */
.rak .kartu:hover .kartu-kepala .logo, .rak .kartu:focus-within .kartu-kepala .logo { transform: translateX(-50%) translateY(-16px) scale(1.18); filter: drop-shadow(0 22px 16px #000d) drop-shadow(0 0 18px #4ec9ff55); }
.rak .kartu.paralaks .kartu-kepala .logo { transition: transform .12s linear, filter .4s; transform: translateX(calc(-50% + var(--nx) * 16px)) translateY(calc(-16px + var(--ny) * 12px)) scale(1.18); }
/* lapisan tengah: judul, kotak hasil, tombol bergeser tipis */
.rak .kartu.paralaks .kartu-judul, .rak .kartu.paralaks .hadiah { transition: transform .12s linear; transform: translate(calc(var(--nx) * 5px), calc(var(--ny) * 4px)); }
.rak .kartu:hover .kartu-judul, .rak .kartu:focus-within .kartu-judul { opacity: 1; }
/* kilau cahaya mengikuti kursor */
.rak .kartu::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--gx) var(--gy), #ffffff24, #7fd4ff12 30%, transparent 60%); mix-blend-mode: screen; }
.rak .kartu.paralaks::after { opacity: 1; }
/* tombol merah LIVE DRAW tidak dipakai lagi di efek paralaks */
.rak .kartu-tombol-hover { display: none; }
@media (prefers-reduced-motion: reduce) { .rak .kartu, .rak .kartu.paralaks { transition: none; transform: none; } .rak .kartu::after { display: none; } }

/* ================= RAPIKAN LOBBY (17 Sep 2026) ================= */
/* 1. header sejajar dengan tepi konten (lebar maks sama dengan .isi) */
.kepala { gap: 12px; padding-inline: max(clamp(14px, 2.5vw, 32px), calc((100% - var(--lebar)) / 2 + clamp(14px, 2.5vw, 32px))); }
.kepala .cari { max-width: 280px; }
.kepala .jam, .kepala .indikator { flex: none; }

/* 2. spanduk: kolom sama tinggi, tanpa ruang kosong; sorotan disusun rapi (logo kanan atas, isi kiri) */
.spanduk { align-items: stretch; min-height: 0; padding: 32px 34px; gap: 28px; }
.spanduk-teks { display: flex; flex-direction: column; justify-content: center; }
.spanduk-sub { max-width: 60ch; text-wrap: pretty; line-height: 1.6; }
.spanduk-aksi { margin-top: 22px; }
.spanduk-sorot { min-height: 0; display: flex; }
.sorotan { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-content: center;
  grid-template-areas: "alis logo" "nama logo" "jam logo" "angka angka" "tombol tombol"; padding: 24px 26px; }
.sorotan > .sorotan-art { grid-area: auto; }
.sorotan > .piksel { grid-area: alis; align-self: end; }
.sorotan > h2 { grid-area: nama; }
.sorotan > .sorotan-jam { grid-area: jam; }
.sorotan > .sorotan-logo { grid-area: logo; align-self: center; margin: 0; width: 120px; height: 76px; }
.sorotan > .sorotan-hitung, .sorotan > .bola-baris { grid-area: angka; justify-self: start; margin: 14px 0 6px; }
.sorotan > .tombol-neon { grid-area: tombol; justify-self: start; margin-top: 6px; }

/* 3. baris saringan jadi satu toolbar */
.kategori { justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--timbul); }
.kategori .cip button, .kategori .cip-wilayah a { height: 34px; box-shadow: none; }
.cip-wilayah { padding-left: 14px; }

/* 4. judul bagian: tinggi sejajar, keterangan kanan terbaca */
.judul-baris { align-items: center; margin-bottom: 14px; }
.judul-baris h2 { font-size: 20px; }
.judul-baris .piksel { font-size: 9px; color: var(--redup-2); padding: 5px 10px; border: 1px solid var(--garis); border-radius: 999px; background: var(--panel); }

/* 5. jalur live: petak sama lebar, ujung kanan memudar menandakan bisa digeser */
.jalur-daftar { gap: 12px; padding: 2px 0 4px; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 60px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 60px), transparent); }
.jalur-petak a { width: 256px; min-width: 0; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px 10px 10px; }
.jalur-logo { width: 52px; height: 34px; }
.jalur-petak .hitung { min-width: 0; font-size: 14px; font-weight: 700; }

/* 6. jarak antarbagian seragam; ruang atas kartu cukup untuk logo yang naik saat paralaks */
.isi > section { margin-bottom: 32px; }
.isi > .spanduk { margin-bottom: 20px; }
.rak { padding-top: 22px; }

@media (max-width: 1100px) {
  .spanduk { padding: 26px 22px; }
  .sorotan { padding: 22px; }
  .kategori { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .kategori { padding: 8px; border-radius: 12px; }
  .kategori .cip { width: 100%; }
  .cip-wilayah { padding-left: 0; }
  .sorotan { grid-template-areas: "alis logo" "nama logo" "jam jam" "angka angka" "tombol tombol"; }
  .sorotan > .sorotan-logo { width: 84px; height: 54px; }
  .jalur-petak a { width: 230px; }
}
@media (max-width: 640px) {
  .spanduk-teks h1 { font-size: 28px; }
  .spanduk-teks > .piksel { font-size: 8px; }
  .spanduk-sub { font-size: 13.5px; line-height: 1.55; }
  .spanduk-aksi { gap: 12px; }
  .sorotan > h2 { font-size: 24px; }
  .sorotan > .sorotan-hitung { font-size: 34px; margin: 10px 0 4px; }
}
@media (max-width: 640px) {
  .sorotan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "alis" "nama" "jam" "angka" "tombol"; }
  .sorotan > .sorotan-logo { justify-self: start; margin-bottom: 8px; }
  .judul-baris h2 { font-size: 18px; }
  .judul-baris .piksel { display: none; }
  .kepala .cari input::placeholder { font-size: 13px; }
}

/* ================= LOBBY LEBIH "GAME": emboss, emas seperlunya, lampu marquee, pita result (17 Sep 2026) ================= */
:root { --emas-1: #fff0a9; --emas-2: #ffd35a; --emas-3: #e39a21; --emas-tepi: #b8741c;
  --judul-emas: 0 1px #bc7826, 0 2px #9c5013, 0 3px #552c12, 1px 4px #000, 0 0 12px #fcb63f55, 0 0 22px #46a9ff66; }

/* header: bar kaca biru berlapis dengan garis emas tipis di bawah */
.kepala { background: linear-gradient(180deg, #0f2a66f2, #081636f2); border-bottom: 1px solid #2f5fb0; box-shadow: 0 1px 0 #ffd35a33, 0 10px 30px -12px #000c; }
.merek-teks b { font-style: italic; letter-spacing: .02em; color: var(--emas-1); text-shadow: var(--judul-emas); }
.merek-teks b i { color: #8ff0ff; text-shadow: 0 1px #0a6a8a, 0 2px #063f5a, 1px 3px #000, 0 0 14px #33e8ff88; }
.merek-tanda { box-shadow: inset -3px -5px 8px #0006, 0 0 0 2px var(--emas-tepi), 0 0 0 4px #0b1a44, 0 4px 14px #000a; }
.kepala-nav a { border: 1px solid transparent; }
.kepala-nav a:hover { background: linear-gradient(180deg, #1c4a94, #10306a); border-color: #3d6aa8; }
.kepala-nav a.aktif { background: linear-gradient(180deg, #3aafff, #1b72d7 48%, #1455ae 52%, #2469c1); border-color: #8adfff; box-shadow: inset 0 1px #c8f4ff, 0 3px #020d26, 0 0 16px #1e8bff66; }
.kepala .jam { background: #020816; border-color: #2f5fb0; box-shadow: inset 0 2px 6px #000, 0 0 0 1px #ffd35a22; }
.kepala .jam .mono { color: #8ff0ff; text-shadow: 0 0 10px #33e8ffaa; }

/* pita result berjalan */
.pita { position: sticky; top: 64px; z-index: 19; display: flex; align-items: stretch; height: 40px; background: linear-gradient(180deg, #06112e, #030a1f); border-bottom: 1px solid #1d3f80; box-shadow: inset 0 1px #ffd35a22;
  padding-inline: max(0px, calc((100% - var(--lebar)) / 2 + clamp(14px, 2.5vw, 32px))); }
.pita-label { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 24px 0 16px; font: 900 italic 12px/1 var(--tampil-kartu, var(--tampil)); letter-spacing: .1em; color: #2a1600; background: linear-gradient(180deg, #ffe58a, #ffc43a 50%, #e39a21 51%, #f7b733); box-shadow: inset 0 1px #fff6; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.pita-label .titik { background: #d0122f; box-shadow: 0 0 8px #ff4060; }
.pita-jalur { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.pita-isi { display: inline-flex; align-items: center; gap: 18px; height: 100%; white-space: nowrap; padding-left: 18px; animation: pita-jalan 70s linear infinite; }
.pita:hover .pita-isi { animation-play-state: paused; }
.pita-isi a { display: inline-flex; align-items: center; gap: 10px; color: #cfe4ff; font-size: 12.5px; }
.pita-isi a b { font: 700 13px/1 var(--tampil); letter-spacing: .04em; text-transform: uppercase; color: var(--emas-1); }
.pita-isi a:hover b { color: #fff; }
.pita-isi > i { font-style: normal; color: #ffd35a; opacity: .7; font-size: 10px; }
.pita-bola { font-size: 22px; gap: 3px; }
@keyframes pita-jalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* spanduk: artwork kota di kanan + lampu marquee di bingkai + judul emas timbul */
.spanduk { border: 2px solid #3f86d6; box-shadow: inset 0 0 0 4px #0b1d48, inset 0 0 0 5px #2a5aa0, 0 0 0 1px #ffd35a33, 0 30px 60px -30px #000, 0 0 40px -10px #1e8bff55; overflow: visible; isolation: isolate; }
.spanduk::before { border-radius: inherit; z-index: -1; }
.spanduk-art { position: absolute; inset: 0; z-index: -2; border-radius: 18px; overflow: hidden; background-image: linear-gradient(90deg, #0a1c48 30%, #0a1c48d9 50%, #0a1c4855 75%, #0a1c4833), var(--kota-img); background-size: 100% 100%, cover; filter: saturate(1.1); }
.spanduk-art.kota-thailand, .spanduk-art.kota-cambodia, .spanduk-art.kota-amerika, .spanduk-art.kota-london, .spanduk-art.kota-malaysia, .spanduk-art.kota-indonesia { background-image: linear-gradient(90deg, #0a1c48 30%, #0a1c48d9 50%, #0a1c4855 75%, #0a1c4833), var(--kota-img); background-size: 100% 100%, cover; }
.spanduk-art.kota-netral { background-image: linear-gradient(90deg, #0a1c48 30%, #0a1c48d9 55%, #0a1c4866), radial-gradient(ellipse at 80% 30%, #1e5fd8, transparent 60%), repeating-linear-gradient(135deg, #122a66 0 2px, #0c1a44 2px 26px); background-size: 100% 100%, 100% 100%, 100% 100%; }
.spanduk-art.kota-macau { background-position: 0 0, 0 0; } .spanduk-art.kota-singapore { background-position: 0 0, 100% 0; } .spanduk-art.kota-sydney { background-position: 0 0, 0 100%; } .spanduk-art.kota-hongkong { background-position: 0 0, 100% 100%; }
.spanduk-art.kota-thailand { background-position: 0 0, 0 0; } .spanduk-art.kota-cambodia { background-position: 0 0, 50% 0; } .spanduk-art.kota-amerika { background-position: 0 0, 100% 0; }
.spanduk-art.kota-london { background-position: 0 0, 0 100%; } .spanduk-art.kota-malaysia { background-position: 0 0, 50% 100%; } .spanduk-art.kota-indonesia { background-position: 0 0, 100% 100%; }
.spanduk-lampu { position: absolute; inset: -9px; z-index: 3; pointer-events: none; border-radius: 26px; padding: 9px;
  background: radial-gradient(circle, #fff7c2 0 2px, #ffc93c 3px, #ffc93c00 5px) 0 0 / 26px 26px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px #ffb300aa); animation: lampu-kedip 1.6s steps(2, jump-none) infinite; }
.spanduk-lampu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 9px; background: radial-gradient(circle, #cfefff 0 2px, #4cc8ff 3px, #4cc8ff00 5px) 13px 13px / 26px 26px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: lampu-kedip 1.6s steps(2, jump-none) infinite reverse; }
@keyframes lampu-kedip { 0% { opacity: 1; } 100% { opacity: .35; } }
.spanduk-teks h1 { font-family: var(--tampil-kartu, var(--tampil)); font-weight: 900; font-style: italic; font-size: clamp(40px, 4.2vw, 62px); line-height: .98; letter-spacing: .01em; color: var(--emas-1); text-shadow: var(--judul-emas); }
.spanduk-teks h1 span { color: #8ff0ff; background: none; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: 0 1px #0a6a8a, 0 2px #084f6c, 0 3px #04283a, 1px 4px #000, 0 0 16px #33e8ff88; }
.spanduk-teks > .piksel { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; color: #2a1600; background: linear-gradient(180deg, #ffe58a, #ffc43a 50%, #e39a21 51%, #f7b733); box-shadow: inset 0 1px #fff6, 0 3px #3a2400, 0 0 14px #ffb30044; font-size: 8.5px; }
.spanduk-sub { color: #d6e6ff; text-shadow: 0 1px 2px #000a; }
.spanduk-sub b { color: var(--emas-2); }

/* tombol utama: merah-emas timbul dengan kilau lewat */
.spanduk .tombol-neon, .sorotan .tombol-neon { position: relative; overflow: hidden; height: 48px; padding: 0 26px; font: 900 italic 15px/1 var(--tampil-kartu, var(--tampil)); letter-spacing: .08em; color: #fff;
  background: linear-gradient(180deg, #ff6a6a, #e0141f 50%, #b30c16 51%, #d61b26); border: 2px solid #ffd35a; box-shadow: inset 0 1px #ffb3b3, 0 4px #5a0008, 0 0 20px #ff2a2a55; text-shadow: 0 2px #6a0009; }
.sorotan .tombol-neon { height: 42px; font-size: 13px; }
.spanduk .tombol-neon::after, .sorotan .tombol-neon::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, #ffffff88, transparent); transform: skewX(-20deg); animation: kilau-tombol 3.2s ease-in-out infinite; }
@keyframes kilau-tombol { 0%, 60% { left: -60%; } 90%, 100% { left: 140%; } }
.spanduk .tombol-neon:active, .sorotan .tombol-neon:active { transform: translateY(3px); box-shadow: inset 0 2px 4px #0008, 0 1px #5a0008; }
.spanduk .tautan { color: #8ff0ff; }

/* sorotan: panel kaca gelap berbingkai emas, hitung mundur di papan LED */
.sorotan { background: linear-gradient(160deg, #0d2354f0, #06122ef5); border: 2px solid #3f86d6; box-shadow: inset 0 0 0 3px #081a3f, inset 0 0 0 4px #ffd35a44, 0 18px 40px -16px #000e; backdrop-filter: blur(4px); }
.sorotan > h2 { font-family: var(--tampil-kartu, var(--tampil)); font-weight: 900; font-style: italic; font-size: clamp(30px, 3vw, 42px); color: var(--emas-1); text-shadow: var(--judul-emas); }
.sorotan > .piksel { color: #8ff0ff; }
.sorotan > .sorotan-hitung { padding: 8px 16px 6px; border-radius: 10px; background: #020816; border: 1px solid #2f5fb0; box-shadow: inset 0 3px 10px #000, 0 0 0 1px #ffd35a22; font-size: clamp(34px, 3vw, 46px); }
.sorotan > .sorotan-logo { filter: drop-shadow(0 12px 14px #000c) drop-shadow(0 0 16px #4ec9ff55); }

/* toolbar saringan: tab game timbul */
.kategori { background: linear-gradient(180deg, #102a60, #0a1b44); border: 1px solid #2f5fb0; box-shadow: inset 0 1px #85ccff26, 0 0 0 1px #ffd35a1f, 0 10px 24px -14px #000; }
.kategori .cip button, .kategori .cip-wilayah a { background: linear-gradient(180deg, #1c3f7c, #0f2754); border-color: #36609f; color: #cfe0ff; box-shadow: inset 0 1px #8fc3ff33, 0 2px #020d26; }
.kategori .cip button.aktif, .kategori .cip-wilayah a.aktif { background: linear-gradient(180deg, #3aafff, #1b72d7 48%, #1455ae 52%, #2469c1); border-color: #8adfff; box-shadow: inset 0 1px #c8f4ff, 0 2px #020d26, 0 0 14px #1e8bff66; }
.kategori .cip button.aktif b, .kategori .cip-wilayah a.aktif b { color: var(--emas-1); }

/* judul bagian: emas miring timbul dengan ornamen */
.judul-baris h2 { font-family: var(--tampil-kartu, var(--tampil)); font-weight: 900; font-style: italic; font-size: 28px; letter-spacing: .02em; color: var(--emas-1); text-shadow: var(--judul-emas); border-left: 0; padding-left: 0; display: inline-flex; align-items: center; gap: 12px; }
.judul-baris h2::before { content: ""; width: 26px; height: 26px; flex: none; background: radial-gradient(circle at 35% 30%, #fff9 0 10%, transparent 40%), radial-gradient(circle, #ffd35a 0 55%, #b8741c 100%); border-radius: 50%; box-shadow: 0 0 0 2px #0b1a44, 0 0 0 3px #ffd35a88, 0 0 12px #ffb30066; }
.judul-baris h2::after { content: "»"; color: #ffd35a; font-style: normal; text-shadow: 0 0 10px #ffb300aa; }
.judul-baris .piksel { color: #8ff0ff; border-color: #2f5fb0; background: #0a1b44; }

/* jalur live: petak timbul, hitung mundur di LED */
.jalur-petak a { background: linear-gradient(180deg, #16376f, #0c2150); border-color: #36609f; box-shadow: inset 0 1px #8fc3ff33, 0 3px #020d26, 0 10px 20px -12px #000; }
.jalur-petak a:hover { border-color: #8adfff; box-shadow: inset 0 1px #c8f4ff55, 0 3px #020d26, 0 0 18px #1e8bff55; }
.jalur-teks b { color: var(--emas-1); font-style: italic; }
.jalur-petak .hitung { padding: 5px 8px; border-radius: 7px; background: #020816; border: 1px solid #2a4f90; box-shadow: inset 0 2px 6px #000; text-shadow: 0 0 10px currentColor; }

@media (max-width: 900px) { .pita { top: 58px; } }
@media (max-width: 640px) {
  .pita { height: 36px; } .pita-label { font-size: 10px; padding: 0 16px 0 10px; } .pita-bola { font-size: 18px; }
  .spanduk-teks h1 { font-size: 34px; }
  .judul-baris h2 { font-size: 22px; } .judul-baris h2::before { width: 20px; height: 20px; }
  .spanduk-lampu { inset: -7px; padding: 7px; background-size: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .pita-isi, .spanduk-lampu, .spanduk-lampu::after, .spanduk .tombol-neon::after, .sorotan .tombol-neon::after { animation: none; } }

/* perbaikan lobby game: artwork spanduk kelihatan, lampu marquee bulat rapi di keempat sisi, petak jalur tidak terpotong */
.spanduk { background: #0a1c48; }
.spanduk::before { z-index: 0; }
.spanduk-art { z-index: 0; }
.spanduk-teks, .spanduk-sorot { position: relative; z-index: 1; }
.spanduk-lampu { inset: -13px; padding: 0; border-radius: 30px; -webkit-mask: none; mask: none; filter: drop-shadow(0 0 5px #ffb300aa);
  background:
    radial-gradient(circle, #fff7c2 0 2px, #ffc93c 3px, #ffc93c00 5px) center top / 26px 13px repeat-x,
    radial-gradient(circle, #fff7c2 0 2px, #ffc93c 3px, #ffc93c00 5px) center bottom / 26px 13px repeat-x,
    radial-gradient(circle, #fff7c2 0 2px, #ffc93c 3px, #ffc93c00 5px) left center / 13px 26px repeat-y,
    radial-gradient(circle, #fff7c2 0 2px, #ffc93c 3px, #ffc93c00 5px) right center / 13px 26px repeat-y; }
.spanduk-lampu::after { padding: 0; -webkit-mask: none; mask: none;
  background:
    radial-gradient(circle, #d8f4ff 0 2px, #4cc8ff 3px, #4cc8ff00 5px) calc(50% + 13px) top / 26px 13px repeat-x,
    radial-gradient(circle, #d8f4ff 0 2px, #4cc8ff 3px, #4cc8ff00 5px) calc(50% + 13px) bottom / 26px 13px repeat-x,
    radial-gradient(circle, #d8f4ff 0 2px, #4cc8ff 3px, #4cc8ff00 5px) left calc(50% + 13px) / 13px 26px repeat-y,
    radial-gradient(circle, #d8f4ff 0 2px, #4cc8ff 3px, #4cc8ff00 5px) right calc(50% + 13px) / 13px 26px repeat-y; }
.jalur-petak a { width: 292px; }
.jalur-teks small { white-space: nowrap; }
.jalur-petak .hitung { font-size: 13px; padding: 5px 7px; }
@media (max-width: 640px) {
  .spanduk-lampu { inset: -11px; background-size: 22px 11px, 22px 11px, 11px 22px, 11px 22px; }
  .spanduk-lampu::after { background-size: 22px 11px, 22px 11px, 11px 22px, 11px 22px; }
  .jalur-petak a { width: 262px; }
}
.sorotan { background: linear-gradient(160deg, #0d2354c4, #06122ed9); }
.spanduk-art { background-image: linear-gradient(90deg, #0a1c48 22%, #0a1c48cc 45%, #0a1c4833 72%, #0a1c4800); }
.spanduk-art.kota-macau, .spanduk-art.kota-singapore, .spanduk-art.kota-sydney, .spanduk-art.kota-hongkong { background-image: linear-gradient(90deg, #0a1c48 22%, #0a1c48cc 45%, #0a1c4833 72%, #0a1c4800), var(--kota-img); background-size: 100% 100%, cover; }
.spanduk-art.kota-thailand, .spanduk-art.kota-cambodia, .spanduk-art.kota-amerika, .spanduk-art.kota-london, .spanduk-art.kota-malaysia, .spanduk-art.kota-indonesia { background-image: linear-gradient(90deg, #0a1c48 22%, #0a1c48cc 45%, #0a1c4833 72%, #0a1c4800), var(--kota-img); background-size: 100% 100%, cover; }

/* ================= REVISI 3D LOBBY (17 Sep 2026): judul timbul tebal, sorotan panel 3D, bola 3D melayang, header lega ================= */

/* header: tanpa kolom cari (pindah ke toolbar), menu tidak terpotong */
.kepala .kepala-sela { flex: 1; display: block; }
.kepala-nav { margin-left: 10px; }

/* toolbar: kolom cari di depan */
.kategori .cari-lobi { flex: 0 1 240px; max-width: 260px; height: 36px; margin: 0; padding: 0 12px; background: #020816; border-color: #2f5fb0; box-shadow: inset 0 2px 6px #000; }
.kategori .cari-lobi input::placeholder { color: #7f9ccc; }
@media (max-width: 1280px) { .kategori .cari-lobi { flex: 1 1 100%; max-width: none; } .kategori { justify-content: flex-start; } }

/* judul spanduk: huruf timbul tebal (ekstrusi berlapis) dengan kemiringan perspektif */
.spanduk-teks h1 { transform: perspective(800px) rotateX(10deg) rotateY(6deg); transform-origin: 0 60%; margin-bottom: 6px;
  text-shadow: 0 1px 0 #e0a13a, 0 2px 0 #cf8d2b, 0 3px 0 #bb7a20, 0 4px 0 #a66716, 0 5px 0 #8f550f, 0 6px 0 #774309, 0 7px 0 #5e3205, 0 8px 0 #452303, 0 10px 6px #000, 0 16px 22px #000c, 0 0 30px #ffb30040; }
.spanduk-teks h1 span { text-shadow: 0 1px 0 #3cc4e8, 0 2px 0 #2aaed4, 0 3px 0 #1d97bd, 0 4px 0 #1480a5, 0 5px 0 #0d6a8c, 0 6px 0 #085571, 0 7px 0 #054157, 0 8px 0 #032e3e, 0 10px 6px #000, 0 16px 22px #000c, 0 0 30px #33e8ff40; }

/* sorotan: panel 3D miring dengan ketebalan tepi, isi melayang di atas permukaan */
.spanduk-sorot { perspective: 1200px; }
.sorotan { overflow: visible; backdrop-filter: none; transform-style: preserve-3d; transform: rotateY(-12deg) rotateX(5deg) translateZ(0); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
  box-shadow: inset 0 0 0 3px #081a3f, inset 0 0 0 4px #ffd35a44, 1px 1px 0 #2c5da6, 2px 2px 0 #28559a, 3px 3px 0 #244d8e, 4px 4px 0 #1f4480, 5px 5px 0 #1a3b72, 6px 6px 0 #153263, 7px 7px 0 #102954, 8px 8px 0 #0c2046, 26px 34px 40px #000d, 0 0 40px #1e8bff33; }
.sorotan > .sorotan-art { border-radius: inherit; overflow: hidden; }
.spanduk-sorot:hover .sorotan { transform: rotateY(-4deg) rotateX(2deg) translateZ(0); }
.sorotan > .sorotan-logo { transform: translateZ(60px); }
.sorotan > h2, .sorotan > .piksel, .sorotan > .sorotan-jam { transform: translateZ(30px); }
.sorotan > .sorotan-hitung, .sorotan > .bola-baris { transform: translateZ(45px); }
.sorotan > .tombol-neon { transform: translateZ(40px); }
.sorotan > .bola-baris.besar { font-size: 58px; gap: 10px; }

/* bola 3D: bayangan dalam, pantulan cahaya, bayangan jatuh */
.bola-3d { position: absolute; font-size: 74px; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, #fffffff2 0 5%, #ffffff66 13%, transparent 32%), radial-gradient(circle at 70% 80%, #00000055, transparent 45%), radial-gradient(circle at 50% 50%, var(--c) 0 60%, color-mix(in srgb, var(--c) 35%, #000) 100%);
  box-shadow: inset -.08em -.12em .2em #0008, inset .04em .05em .08em #ffffff44, 0 .18em .3em #000c, 0 0 .5em color-mix(in srgb, var(--c) 40%, transparent);
  animation: bola-apung 6s ease-in-out infinite; }
.bola-3d::before { width: .56em; height: .56em; box-shadow: inset 0 -.05em .08em #0003, 0 0 0 .02em #0002; }
.bola-3d span { font-size: .4em; }
.bola-3d::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -.34em; height: .12em; border-radius: 50%; background: radial-gradient(#000a, transparent 70%); filter: blur(2px); animation: bola-bayang 6s ease-in-out infinite; }
.spanduk-bola .bm1 { left: -34px; top: 38px; font-size: 64px; animation-delay: -1s; }
.spanduk-bola .bm2 { left: -18px; bottom: 30px; font-size: 48px; animation-delay: -3.2s; }
.spanduk-bola .bm3 { left: 46%; top: -30px; font-size: 44px; animation-delay: -2s; }
.spanduk-bola .bm4 { right: -38px; top: 22px; font-size: 76px; animation-delay: -4s; }
.spanduk-bola .bm5 { right: -20px; bottom: 44px; font-size: 54px; animation-delay: -.5s; }
.spanduk-bola .bm6 { left: 58%; bottom: -26px; font-size: 40px; animation-delay: -5s; }
@keyframes bola-apung { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(10deg); } }
@keyframes bola-bayang { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.75); opacity: .5; } }

/* lampu tepi lebih terang supaya sisi kiri/kanan tidak terlihat kosong */
.spanduk-lampu { filter: drop-shadow(0 0 6px #ffb300) brightness(1.15); }

@media (max-width: 1100px) {
  .sorotan, .spanduk-sorot:hover .sorotan { transform: none; }
  .sorotan > * { transform: none !important; }
  .spanduk-teks h1 { transform: none; }
  .spanduk-bola .bm3, .spanduk-bola .bm6 { display: none; }
}
@media (max-width: 640px) {
  .spanduk-bola .bm2, .spanduk-bola .bm5 { display: none; }
  .spanduk-bola .bm1 { left: -14px; top: -18px; font-size: 42px; }
  .spanduk-bola .bm4 { right: -14px; top: -20px; font-size: 48px; }
  .sorotan { box-shadow: inset 0 0 0 3px #081a3f, inset 0 0 0 4px #ffd35a44, 4px 5px 0 #153263, 0 18px 30px #000c; }
}
@media (prefers-reduced-motion: reduce) { .bola-3d, .bola-3d::after { animation: none; } .sorotan { transition: none; } }
.spanduk-bola { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* ================= SOROTAN + KARAKTER (ala panel game: karakter keluar dari panel, "loot" = hasil terakhir) ================= */
.sorotan { padding: 26px 24px 24px 43%; row-gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "alis logo" "nama logo" "jam jam" "angka angka" "loot loot" "tombol tombol"; }
.sorotan::before { content: ""; position: absolute; left: -4%; bottom: 0; width: 52%; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%, #3aa0ff66, #1e6fe822 45%, transparent 70%); transform: translateZ(20px); }
.sorotan-karakter { position: absolute; left: -3%; bottom: 0; z-index: 6; height: 124%; width: auto; max-width: none; pointer-events: none;
  transform: translateZ(80px); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent);
  filter: drop-shadow(-6px 18px 18px #000b) drop-shadow(0 0 22px #4ec9ff44); animation: karakter-napas 5s ease-in-out infinite; }
@keyframes karakter-napas { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.sorotan > .sorotan-logo { width: 96px; height: 62px; }
.sorotan > h2 { font-size: clamp(26px, 2.4vw, 36px); }
.sorotan > .bola-baris.besar { font-size: 46px; gap: 8px; }
.sorotan > .sorotan-hitung { font-size: clamp(30px, 2.6vw, 40px); }
.sorotan-loot { grid-area: loot; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; transform: translateZ(40px); }
.loot-judul { grid-column: 1 / -1; font: 400 8px/1 var(--piksel); letter-spacing: .12em; text-transform: uppercase; color: #8ff0ff; }
.loot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, #3a1f7a, #1f1450); border: 2px solid #8f6cff; box-shadow: inset 0 1px #c9b8ff66, 0 3px #0a0626, 0 0 14px #8f6cff44; }
.loot:nth-of-type(2) { background: linear-gradient(180deg, #145a3a, #0b3322); border-color: #3ef0a6; box-shadow: inset 0 1px #b8ffe066, 0 3px #03170e, 0 0 14px #3ef0a644; }
.loot:nth-of-type(3) { background: linear-gradient(180deg, #6a4a0e, #3a2806); border-color: #ffd35a; box-shadow: inset 0 1px #fff0b466, 0 3px #1a1203, 0 0 14px #ffd35a44; }
.loot small { font: 700 8px/1 var(--teks); letter-spacing: .12em; text-transform: uppercase; color: #ffffffb0; }
.loot b { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 2px #0008; letter-spacing: .04em; }
.sorotan > .tombol-neon { justify-self: stretch; justify-content: center; }

@media (max-width: 1100px) {
  .sorotan { padding-left: 38%; }
  .sorotan-karakter { height: 118%; left: -2%; animation: none; }
}
@media (max-width: 640px) {
  .sorotan { padding: 20px 16px 18px 44%; grid-template-areas: "logo" "alis" "nama" "jam" "angka" "loot" "tombol"; grid-template-columns: minmax(0, 1fr); }
  .sorotan > .sorotan-logo { width: 72px; height: 46px; }
  .sorotan > h2 { font-size: 22px; }
  .sorotan > .bola-baris.besar { font-size: 30px; gap: 4px; }
  .sorotan > .sorotan-hitung { font-size: 26px; padding: 6px 10px 4px; }
  .sorotan-loot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .loot b { font-size: 12px; } .loot small { font-size: 7px; }
  .sorotan-karakter { left: -8%; height: 104%; }
}
@media (prefers-reduced-motion: reduce) { .sorotan-karakter { animation: none; } }
/* HP: karakter berdiri di atas panel (bukan menimpa teks), panel diberi ruang atas */
@media (max-width: 640px) {
  .spanduk-sorot { padding-top: 250px; }
  .sorotan { padding: 22px 16px 18px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "alis logo" "nama logo" "jam jam" "angka angka" "loot loot" "tombol tombol"; }
  .sorotan > .sorotan-logo { width: 78px; height: 50px; justify-self: end; margin: 0; }
  .sorotan-karakter { left: 50%; bottom: calc(100% - 70px); height: 330px; transform: translateX(-50%); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); z-index: 0; }
  .sorotan::before { left: 10%; right: 10%; width: auto; bottom: auto; top: -160px; height: 220px; }
  .sorotan > *:not(.sorotan-karakter):not(.sorotan-art) { position: relative; z-index: 2; }
  .sorotan-loot { gap: 6px; }
  .loot b { font-size: 14px; }
}
/* karakter tidak boleh ditimpa lampu marquee di atas spanduk */
.spanduk-sorot { z-index: 4; }
.spanduk-lampu { z-index: 2; }

/* ================= JUDUL: font & warna dari src/teks.js (gaya) + LAMPU JALAN di bingkai spanduk ================= */
.spanduk-teks h1 { font-family: var(--font-judul); font-style: var(--miring-judul, normal); font-weight: 400; font-size: calc(clamp(40px, 4.2vw, 62px) * var(--skala-judul, 1)); line-height: 1.04; letter-spacing: .01em; text-shadow: none; }
.spanduk-teks h1 .b1, .spanduk-teks h1 .b2 { display: inline-block; max-width: 100%; padding: 0 .12em .1em 0; color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.spanduk-teks h1 .b1 { background-image: var(--isi-b1); filter: var(--timbul-b1); }
.spanduk-teks h1 .b2 { background-image: var(--isi-b2); filter: var(--timbul-b2); }
.sorotan > h2 { font-family: var(--font-judul); font-style: var(--miring-judul, normal); font-weight: 400; font-size: calc(clamp(26px, 2.4vw, 36px) * var(--skala-judul, 1)); line-height: 1.04; padding-right: .1em;
  color: transparent; -webkit-text-fill-color: transparent; background-image: var(--isi-nama); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: var(--timbul-nama); }
@media (max-width: 640px) {
  .spanduk-teks h1 { font-size: calc(34px * var(--skala-judul, 1)); }
  .sorotan > h2 { font-size: calc(24px * var(--skala-judul, 1)); }
}

/* halaman pratinjau */
.pratinjau-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.pratinjau { padding: 22px 24px 16px; border-radius: 16px; border: 1px solid #2f5fb0; background: radial-gradient(ellipse at 20% 0, #1e5fd855, transparent 60%), linear-gradient(160deg, #0f2a66, #081636); box-shadow: inset 0 1px #85ccff26, 0 12px 26px -16px #000; }
.pratinjau .spanduk-teks h1 { transform: none; margin: 0; font-size: calc(40px * var(--skala-judul, 1)); }
.pratinjau-kode { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #cfe0ff; font-size: 13px; }
.pratinjau-kode code { padding: 4px 10px; border-radius: 8px; background: #020816; border: 1px solid #2f5fb0; color: #8ff0ff; font: 600 13px var(--mono); }
@media (max-width: 640px) { .pratinjau-grid { grid-template-columns: 1fr; } .pratinjau .spanduk-teks h1 { font-size: calc(30px * var(--skala-judul, 1)); } }

/* lampu jalan: bohlam redup tetap + bohlam terang yang berlari (atas ke kiri, kiri ke bawah, bawah ke kanan, kanan ke atas) */
.spanduk-lampu { inset: -13px; border-radius: 30px; padding: 0; animation: none; opacity: 1; filter: none; -webkit-mask: none; mask: none;
  background:
    radial-gradient(circle at 13px 6.5px, #d9b35a 0 1.5px, #8a6420 2.6px, transparent 4px) 0 0 / 26px 13px repeat-x,
    radial-gradient(circle at 13px 6.5px, #d9b35a 0 1.5px, #8a6420 2.6px, transparent 4px) 0 100% / 26px 13px repeat-x,
    radial-gradient(circle at 6.5px 13px, #d9b35a 0 1.5px, #8a6420 2.6px, transparent 4px) 0 0 / 13px 26px repeat-y,
    radial-gradient(circle at 6.5px 13px, #d9b35a 0 1.5px, #8a6420 2.6px, transparent 4px) 100% 0 / 13px 26px repeat-y; }
.spanduk-lampu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0; opacity: 1; -webkit-mask: none; mask: none;
  filter: drop-shadow(0 0 3px #ffd24a) drop-shadow(0 0 7px #ff9d00);
  background:
    radial-gradient(circle at 13px 6.5px, #fffbe6 0 2.2px, #ffd24a 3.2px, transparent 5px) 0 0 / 78px 13px repeat-x,
    radial-gradient(circle at 13px 6.5px, #fffbe6 0 2.2px, #ffd24a 3.2px, transparent 5px) 0 100% / 78px 13px repeat-x,
    radial-gradient(circle at 6.5px 13px, #fffbe6 0 2.2px, #ffd24a 3.2px, transparent 5px) 0 0 / 13px 78px repeat-y,
    radial-gradient(circle at 6.5px 13px, #fffbe6 0 2.2px, #ffd24a 3.2px, transparent 5px) 100% 0 / 13px 78px repeat-y;
  animation: lampu-jalan .75s steps(3) infinite; }
@keyframes lampu-jalan {
  from { background-position: 0 0, 0 100%, 0 0, 100% 0; }
  to { background-position: -78px 0, 78px 100%, 0 78px, 100% -78px; }
}
@media (prefers-reduced-motion: reduce) { .spanduk-lampu::after { animation: none; } }

/* karakter: kepala tidak tertimpa lampu dan tidak masuk ke bawah pita result */
.spanduk-sorot { z-index: 4; }
.spanduk-lampu { z-index: 2; }
@media (min-width: 641px) { .sorotan-karakter { height: 112%; } }
/* judul v2: garis tepi gelap, jarak huruf per font, spesifisitas cukup untuk halaman selain lobby (pratinjau) */
body .spanduk-teks h1, body .isi .pratinjau .spanduk-teks h1 { font-family: var(--font-judul); font-weight: var(--tebal-judul, 400); font-style: var(--miring-judul, normal); letter-spacing: var(--jarak-judul, .01em); text-transform: uppercase; }
body .spanduk-teks h1 .b1, body .isi .pratinjau .spanduk-teks h1 .b1 { -webkit-text-stroke: .03em var(--garis-b1); }
body .spanduk-teks h1 .b2, body .isi .pratinjau .spanduk-teks h1 .b2 { -webkit-text-stroke: .03em var(--garis-b2); }
body .sorotan > h2 { font-family: var(--font-judul); font-weight: var(--tebal-judul, 400); font-style: var(--miring-judul, normal); letter-spacing: var(--jarak-judul, .01em); -webkit-text-stroke: .03em var(--garis-nama); }
.pratinjau-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

/* toolbar saringan rapi: dua baris berlabel, chip sejajar, cari di kanan baris pertama */
.kategori { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 14px; }
.kategori-baris { display: flex; align-items: center; gap: 14px; padding: 8px 0; min-width: 0; }
.kategori-baris + .kategori-baris { border-top: 1px solid #2f5fb055; }
.kategori-label { flex: none; width: 76px; font: 400 9px/1 var(--piksel); letter-spacing: .14em; text-transform: uppercase; color: #8ff0ff; }
.kategori .cip, .kategori .cip-wilayah { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.kategori .cip button, .kategori .cip-wilayah a { height: 34px; padding: 0 14px; }
.kategori .cari-lobi { flex: 0 0 260px; max-width: 260px; margin-left: auto; height: 36px; }
@media (max-width: 900px) {
  .kategori-baris:first-child { flex-wrap: wrap; }
  .kategori .cari-lobi { order: -1; flex: 1 1 100%; max-width: none; margin: 0; }
}
@media (max-width: 640px) {
  .kategori { padding: 6px 10px; }
  .kategori-baris { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
  .kategori-label { width: 100%; }
  .kategori .cip, .kategori .cip-wilayah { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .kategori .cip::-webkit-scrollbar { display: none; }
}
@media (max-width: 900px) { .kategori .cari-lobi { flex: 1 1 100%; width: 100%; max-width: 100%; box-sizing: border-box; } .kategori-baris { width: 100%; } }
@media (max-width: 640px) { .kategori .cip, .kategori .cip-wilayah { width: 100%; flex-basis: 100%; } }

/* toolbar saringan: dua kolom seimbang (Status + cari | Wilayah), label di atas chip */
.kategori { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; padding: 0; }
.kategori-kolom { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 14px 18px; min-width: 0; }
.kategori-kolom + .kategori-kolom { border-left: 1px solid #2f5fb055; }
.kategori-label { width: auto; font: 400 9px/1 var(--piksel); letter-spacing: .14em; text-transform: uppercase; color: #8ff0ff; }
.kategori .cip, .kategori .cip-wilayah { width: 100%; flex: none; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.kategori .cari-lobi { flex: none; width: 100%; max-width: none; margin: 0; height: 38px; }
@media (max-width: 1100px) {
  .kategori { grid-template-columns: 1fr; }
  .kategori-kolom + .kategori-kolom { border-left: 0; border-top: 1px solid #2f5fb055; }
}
@media (max-width: 640px) {
  .kategori-kolom { padding: 12px; gap: 8px; }
  .kategori .cip, .kategori .cip-wilayah { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
.kategori { grid-template-columns: max-content minmax(0, 1fr); }
.kategori-kolom { justify-content: flex-start; }
.kategori-kolom + .kategori-kolom { justify-content: center; }
@media (max-width: 1100px) { .kategori { grid-template-columns: 1fr; } }

/* ================= toolbar saringan v3: dua baris rata penuh (label | chip merata + cari) ================= */
.kategori { display: grid; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0; padding: 4px 16px; }
.kategori > .kategori-label { width: auto; padding: 12px 0; font: 400 9px/1 var(--piksel); letter-spacing: .14em; text-transform: uppercase; color: #8ff0ff; }
.kategori > .kategori-isi { display: flex; align-items: center; gap: 10px; padding: 10px 0; min-width: 0; }
.kategori > .kategori-label:nth-of-type(2), .kategori > .kategori-isi:nth-of-type(2) { border-top: 1px solid #2f5fb055; }
.kategori .cip, .kategori .cip-wilayah { display: flex; flex: 1 1 auto; width: auto; min-width: 0; flex-wrap: nowrap; gap: 8px; padding: 0; border: 0; }
.kategori .cip button, .kategori .cip-wilayah a { flex: 1 1 0; min-width: 0; justify-content: center; height: 38px; padding: 0 10px; }
.kategori .cari-lobi { flex: 0 0 300px; width: 300px; max-width: 300px; margin: 0; height: 38px; }
@media (max-width: 1100px) {
  .kategori { grid-template-columns: 1fr; padding: 6px 14px; }
  .kategori > .kategori-label { padding: 10px 0 0; }
  .kategori > .kategori-label:nth-of-type(2) { border-top: 1px solid #2f5fb055; margin-top: 4px; padding-top: 12px; }
  .kategori > .kategori-isi:nth-of-type(2) { border-top: 0; }
  .kategori > .kategori-isi:first-of-type { flex-wrap: wrap; }
  .kategori .cari-lobi { order: -1; flex: 1 1 100%; width: 100%; max-width: none; }
}
@media (max-width: 640px) {
  .kategori .cip, .kategori .cip-wilayah { overflow-x: auto; scrollbar-width: none; }
  .kategori .cip button, .kategori .cip-wilayah a { flex: 0 0 auto; padding: 0 14px; }
}

/* ================= sorotan bergilir ================= */
.sorotan.sorot-masuk { animation: sorot-masuk .55s cubic-bezier(.2,.8,.2,1); }
.sorotan.sorot-masuk > .sorotan-karakter { animation: sorot-karakter .6s cubic-bezier(.2,.8,.2,1), karakter-napas 5s ease-in-out .6s infinite; }
@keyframes sorot-masuk { from { opacity: 0; filter: blur(6px) brightness(1.6); } to { opacity: 1; filter: none; } }
@keyframes sorot-karakter { from { opacity: 0; translate: -30px 10px; } to { opacity: 1; translate: 0 0; } }
.sorot-titik { position: absolute; left: 50%; bottom: -26px; z-index: 7; display: flex; gap: 8px; transform: translateX(-10%); }
.sorot-titik button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 1px solid #8adfff; background: #0a1b44; cursor: pointer; box-shadow: 0 0 6px #1e8bff66; transition: width .3s, background .3s; }
.sorot-titik button.aktif { width: 28px; background: linear-gradient(90deg, #ffd35a, #ffb52e); border-color: #ffe9a0; box-shadow: 0 0 10px #ffb300aa; }
@media (max-width: 640px) { .sorot-titik { bottom: -22px; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sorotan.sorot-masuk, .sorotan.sorot-masuk > .sorotan-karakter { animation: none; } }

/* ================= perbaikan: outline judul tanpa garis dalam, karakter di dalam bingkai, transisi sorotan halus, titik navigasi ================= */
/* text-stroke memunculkan garis di sambungan huruf (Montserrat dll) → outline pakai bayangan rapat, bukan stroke */
body .spanduk-teks h1 .b1, body .spanduk-teks h1 .b2, body .isi .pratinjau .spanduk-teks h1 .b1, body .isi .pratinjau .spanduk-teks h1 .b2, body .sorotan > h2 { -webkit-text-stroke: 0; }
body .spanduk-teks h1 .b1 { filter: drop-shadow(1px 0 0 var(--garis-b1)) drop-shadow(-1px 0 0 var(--garis-b1)) drop-shadow(0 -1px 0 var(--garis-b1)) var(--timbul-b1); }
body .spanduk-teks h1 .b2 { filter: drop-shadow(1px 0 0 var(--garis-b2)) drop-shadow(-1px 0 0 var(--garis-b2)) drop-shadow(0 -1px 0 var(--garis-b2)) var(--timbul-b2); }
body .sorotan > h2 { filter: drop-shadow(1px 0 0 var(--garis-nama)) drop-shadow(-1px 0 0 var(--garis-nama)) drop-shadow(0 -1px 0 var(--garis-nama)) var(--timbul-nama); }

/* karakter: kepala tetap di dalam bingkai lampu */
@media (min-width: 641px) { .sorotan-karakter { height: 100%; bottom: 0; } .sorotan { margin-top: 10px; } }

/* transisi sorotan: geser + pudar, tanpa kilat/blur; karakter bergerak sedikit lebih jauh (paralaks) */
.spanduk-sorot { position: relative; }
.sorotan.sorot-masuk { animation: sorot-geser-masuk .6s cubic-bezier(.22,.8,.24,1) both; }
.sorotan.sorot-masuk > .sorotan-karakter { animation: karakter-geser-masuk .75s cubic-bezier(.22,.8,.24,1) both, karakter-napas 5s ease-in-out .75s infinite; }
.sorotan.sorot-keluar { position: absolute; inset: 0; margin: 0; z-index: 1; pointer-events: none; animation: sorot-geser-keluar .55s cubic-bezier(.5,0,.75,.2) both; }
.sorotan.sorot-keluar > .sorotan-karakter { animation: karakter-geser-keluar .55s cubic-bezier(.5,0,.75,.2) both; }
@keyframes sorot-geser-masuk { from { opacity: 0; translate: 46px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sorot-geser-keluar { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -46px 0; } }
@keyframes karakter-geser-masuk { from { opacity: 0; translate: 90px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes karakter-geser-keluar { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -90px 0; } }
.spanduk > .spanduk-art { transition: opacity .32s ease; }
.spanduk > .spanduk-art.art-redup { opacity: 0; }

/* titik navigasi: rapi di bawah panel, rata tengah kolom info, tidak menimpa tepi panel */
.spanduk { padding-bottom: 46px; }
.sorot-titik { position: absolute; left: 43%; right: 0; bottom: -30px; transform: none; display: flex; justify-content: center; align-items: center; gap: 10px; }
.sorot-titik button { width: 12px; height: 12px; border: 2px solid #4da3ff; background: #06122e; box-shadow: inset 0 1px 2px #000; }
.sorot-titik button:hover { border-color: #8ff0ff; }
.sorot-titik button.aktif { width: 34px; border-color: #ffe9a0; background: linear-gradient(180deg, #ffe58a, #ffb52e); box-shadow: 0 0 10px #ffb300aa; }
@media (max-width: 640px) { .sorot-titik { left: 0; bottom: -26px; } .spanduk { padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .sorotan.sorot-masuk, .sorotan.sorot-keluar, .sorotan.sorot-masuk > .sorotan-karakter, .sorotan.sorot-keluar > .sorotan-karakter { animation: none; } }

/* ================= transisi sorotan v3: bingkai tetap, isi memudar; ukuran panel tidak berubah antar pasaran ================= */
.sorotan.sorot-masuk, .sorotan.sorot-keluar, .sorotan.sorot-masuk > .sorotan-karakter, .sorotan.sorot-keluar > .sorotan-karakter { animation: none; }
.sorotan > *:not(.sorot-titik) { transition: opacity .28s ease, translate .38s cubic-bezier(.22,.8,.24,1), scale .38s cubic-bezier(.22,.8,.24,1); }
.sorotan.sorot-pudar > *:not(.sorotan-karakter) { opacity: 0; translate: 0 8px; }
.sorotan.sorot-pudar > .sorotan-karakter { opacity: 0; scale: .97; }
.sorotan > .sorotan-karakter { animation: karakter-napas 5s ease-in-out infinite; }
/* nama pasaran selalu maksimal 2 baris → tinggi panel sama untuk semua pasaran */
.sorotan > h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.1em; align-self: end; }
.sorotan > h2.nama-panjang { font-size: calc(clamp(20px, 1.8vw, 28px) * var(--skala-judul, 1)); }
.spanduk-sorot { min-height: 0; }
@media (max-width: 640px) { .sorotan > h2.nama-panjang { font-size: calc(19px * var(--skala-judul, 1)); } }
@media (prefers-reduced-motion: reduce) { .sorotan > * { transition: none; } }
/* tinggi panel sorotan dikunci supaya tidak mengembang/menyusut saat ganti pasaran */
@media (min-width: 641px) {
  .sorotan { height: 440px; min-height: 440px; max-height: 440px; align-content: center; }
  .sorotan > .piksel { min-height: 2.8em; display: flex; align-items: flex-end; }
  .sorotan > .sorotan-hitung, .sorotan > .bola-baris { min-height: 64px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  .sorotan { min-height: 560px; align-content: start; }
}

/* ================= bingkai spanduk tanpa lampu: tepi neon biru-emas bersih ================= */
.spanduk-lampu { display: none !important; }
.spanduk { border: 0; border-radius: 22px; box-shadow: 0 0 0 1px #6fc4ff55, 0 0 0 5px #0a1b44, 0 0 0 6px #ffd35a55, 0 0 34px -4px #1e8bff66, 0 30px 60px -30px #000; }
.spanduk::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--sudut-tepi, 0deg), #4da3ff, #8ff0ff 12%, #ffd35a 25%, #4da3ff 38%, #1e6fe8 55%, #8ff0ff 70%, #ffd35a 82%, #4da3ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tepi-putar 8s linear infinite; }
@property --sudut-tepi { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tepi-putar { to { --sudut-tepi: 360deg; } }
@media (prefers-reduced-motion: reduce) { .spanduk::after { animation: none; } }

/* tinggi panel sorotan dikunci supaya tidak mengembang/menyusut saat ganti pasaran */
@media (min-width: 641px) {
  .sorotan { height: 440px; min-height: 440px; max-height: 440px; align-content: center; }
  .sorotan > .piksel { min-height: 2.8em; display: flex; align-items: flex-end; }
  .sorotan > .sorotan-hitung, .sorotan > .bola-baris { min-height: 64px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) { .sorotan { min-height: 560px; align-content: start; } }

/* toolbar: kedua baris memakai grid 6 kolom yang sama → tombol Status & Wilayah lurus sekolom */
@media (min-width: 1101px) {
  .kategori > .kategori-isi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: center; }
  .kategori > .kategori-isi > .cip, .kategori > .kategori-isi > .cip-wilayah { display: contents; }
  .kategori .cip button, .kategori .cip-wilayah a { width: 100%; min-width: 0; margin: 0; flex: none; }
  .kategori > .kategori-isi > .cari-lobi { grid-column: span 2; width: 100%; max-width: none; flex: none; }
}

/* ================= ENTENG: satu gambar kecil per kota (public/img/kota/*.webp), bukan atlas 800 KB ================= */
.kota-macau { --kota-img: url('/img/kota/macau.webp'); } .kota-singapore { --kota-img: url('/img/kota/singapore.webp'); } .kota-sydney { --kota-img: url('/img/kota/sydney.webp'); } .kota-hongkong { --kota-img: url('/img/kota/hongkong.webp'); }
.kota-thailand { --kota-img: url('/img/kota/thailand.webp'); } .kota-cambodia { --kota-img: url('/img/kota/cambodia.webp'); } .kota-amerika { --kota-img: url('/img/kota/amerika.webp'); } .kota-london { --kota-img: url('/img/kota/london.webp'); }
.kota-malaysia { --kota-img: url('/img/kota/malaysia.webp'); } .kota-indonesia { --kota-img: url('/img/kota/indonesia.webp'); } .kota-netral { --kota-img: url('/img/kota/netral.webp'); }
[class*="kota-"], [class*="kota-"]::before { background-position: center !important; }
@media (max-width: 640px) { .kota-macau { --kota-img: url('/img/kota/macau-hp.webp'); } .kota-singapore { --kota-img: url('/img/kota/singapore-hp.webp'); } .kota-sydney { --kota-img: url('/img/kota/sydney-hp.webp'); } .kota-hongkong { --kota-img: url('/img/kota/hongkong-hp.webp'); } .kota-thailand { --kota-img: url('/img/kota/thailand-hp.webp'); } .kota-cambodia { --kota-img: url('/img/kota/cambodia-hp.webp'); } .kota-amerika { --kota-img: url('/img/kota/amerika-hp.webp'); } .kota-london { --kota-img: url('/img/kota/london-hp.webp'); } .kota-malaysia { --kota-img: url('/img/kota/malaysia-hp.webp'); } .kota-indonesia { --kota-img: url('/img/kota/indonesia-hp.webp'); } .kota-netral { --kota-img: url('/img/kota/netral-hp.webp'); } }

/* ================= PERBAIKAN HP (≤640px) ================= */
@media (max-width: 640px) {
  /* header: nama merek tetap terlihat, slogan disembunyikan */
  .kepala .merek-teks { display: block; } .kepala .merek-teks small { display: none; } .kepala .merek-teks b { font-size: 17px; }
  .kepala .merek-tanda { width: 30px; height: 30px; } .kepala .merek-tanda::before { width: 16px; height: 16px; } .kepala .merek-tanda::after { font-size: 8px; }
  .kepala { gap: 8px; } .kepala .jam { margin-left: auto; }
  /* pita result: label ringkas */
  .pita-label { font-size: 9px; padding: 0 14px 0 8px; letter-spacing: .06em; }
  /* spanduk: bola dekorasi disembunyikan (menabrak tepi layar), jarak lebih rapat */
  .spanduk-bola { display: none; }
  .spanduk { padding: 22px 16px 40px; gap: 22px; border-radius: 18px; }
  .spanduk-teks h1 { font-size: calc(30px * var(--skala-judul, 1)); line-height: 1.02; }
  .spanduk-teks > .piksel { font-size: 7.5px; letter-spacing: .08em; }
  .spanduk-sub { font-size: 13.5px; line-height: 1.55; }
  .spanduk-aksi { margin-top: 16px; gap: 10px 14px; }
  .spanduk .tombol-neon { height: 44px; padding: 0 18px; font-size: 13px; }
  /* sorotan: tanpa ruang kosong; karakter berdiri di kanan atas panel, info di kiri, loot & tombol selebar panel */
  .spanduk-sorot { padding-top: 26px; min-height: 0; }
  .sorotan { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 18px 14px 16px; row-gap: 6px; align-content: start;
    grid-template-columns: minmax(0, 1fr) 36%; grid-template-areas: "logo ." "alis ." "nama ." "jam ." "angka ." "loot loot" "tombol tombol"; }
  .sorotan > .sorotan-logo { grid-area: logo; justify-self: start; width: 70px; height: 44px; margin: 0; }
  .sorotan > h2, .sorotan > h2.nama-panjang { font-size: calc(22px * var(--skala-judul, 1)); min-height: 0; }
  .sorotan > .sorotan-jam { font-size: 12px; }
  .sorotan > .sorotan-hitung { font-size: 26px; min-height: 0; padding: 6px 12px 4px; margin: 6px 0 4px; }
  .sorotan > .bola-baris.besar { font-size: 34px; min-height: 0; margin: 6px 0 4px; }
  .sorotan-karakter { left: auto; right: -8px; top: -34px; bottom: auto; height: 268px; transform: none; z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .sorotan::before { left: auto; right: 0; top: -20px; bottom: auto; width: 46%; height: 240px; }
  .sorotan > *:not(.sorotan-karakter):not(.sorotan-art) { position: relative; z-index: 2; }
  .sorotan-loot { margin-top: 10px; }
  .sorot-titik { left: 0; right: 0; bottom: -24px; }
}
@media (max-width: 640px) {
  .sorotan > .sorotan-logo { align-self: end; margin: 0 0 8px; transform: none; }
  .sorotan > .piksel { min-height: 0; display: block; align-self: start; font-size: 8px; line-height: 1.3; }
  .sorotan > h2, .sorotan > .sorotan-jam, .sorotan > .sorotan-hitung, .sorotan > .bola-baris { transform: none; }
}
@media (max-width: 640px) { .sorotan > .sorotan-logo { max-width: 110px; object-position: left center; } }
/* latar kota panel sorotan harus menutupi seluruh panel, bukan ikut alur grid (aturan `.sorotan > *` sempat membuatnya relative) */
.sorotan > .sorotan-art { position: absolute !important; inset: 0; grid-area: auto; z-index: 0; border-radius: inherit; overflow: hidden; transform: none; margin: 0; width: auto; height: auto; }
@media (max-width: 640px) {
  .sorotan { padding: 18px 16px 16px; }
  .sorotan > .sorotan-logo { justify-self: start; margin: 0 0 8px; max-width: 120px; height: 40px; object-fit: contain; object-position: left center; }
  .sorotan-loot { gap: 8px; }
}
/* logo sorotan: buang sisa top/right dari aturan lama (membuatnya bergeser keluar panel saat relative) */
.sorotan > .sorotan-logo { top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; }
/* teks panel tetap terbaca di atas foto kota */
.sorotan > .sorotan-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #06122ef2 0%, #06122ecc 45%, #06122e55 75%, #06122e22 100%), linear-gradient(180deg, transparent 50%, #06122ee6 100%); }
@media (max-width: 640px) { .sorotan > .sorotan-art::after { background: linear-gradient(90deg, #06122ef5 0%, #06122ed9 55%, #06122e66 100%), linear-gradient(180deg, transparent 40%, #06122ef0 80%); } }

/* ================= HEADER RAPI: tiga zona (merek | menu di tengah | status), tinggi seragam 40px ================= */
@media (min-width: 901px) {
  .kepala { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; }
  .kepala > .merek { justify-self: start; }
  .kepala > .kepala-nav { justify-self: center; margin: 0; gap: 6px; }
  .kepala > .kepala-sela, .kepala > .cari { display: none; }
  .kepala > .indikator { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 134px; }
  .kepala > .jam { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
}
.kepala-nav a { height: 40px; padding: 0 14px; border-radius: 10px; }
.kepala .indikator, .kepala .jam { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
.kepala .indikator { padding: 0 14px; gap: 8px; font-size: 13px; line-height: 1; }
.kepala .jam { padding: 0 14px; gap: 6px; min-width: 124px; justify-content: center; line-height: 1; }
.kepala .jam .mono { font-size: 16px; line-height: 1; letter-spacing: .04em; }
.kepala .jam small { font-size: 8px; line-height: 1; align-self: center; }
.merek { gap: 12px; }
.merek-teks { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.merek-teks b { font-size: 21px; line-height: 1; }
.merek-teks small { margin: 0; line-height: 1; }
@media (min-width: 901px) and (max-width: 1200px) {
  .kepala-nav a { padding: 0 10px; font-size: 13px; }
  .merek-teks small { display: none; }
}
@media (min-width: 901px) and (max-width: 1040px) { .kepala-nav svg { display: none; } }
.kepala-kanan { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 901px) { .kepala > .kepala-kanan { grid-column: 3; justify-self: end; margin: 0; } .kepala-kanan > .indikator, .kepala-kanan > .jam { margin: 0 !important; } }
@media (max-width: 640px) { .kepala-kanan { gap: 6px; } .kepala .jam { min-width: 0; padding: 0 10px; } .kepala .jam .mono { font-size: 14px; } .kepala .indikator { padding: 0 10px; } }
/* ================= merek ICONPLAY ================= */
.merek-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
.merek-gambar { display: block; height: 30px; width: auto; filter: drop-shadow(0 2px 6px #0008); }
.merek-logo small { line-height: 1; font-size: 7.5px; letter-spacing: .14em; white-space: nowrap; }
@media (max-width: 1200px) { .merek-logo small { display: none; } .merek-gambar { height: 28px; } }
@media (max-width: 640px) { .merek-gambar { height: 24px; } }