:root{
  --blue:#1f6fe0;
  --blue-d:#123f9c;
  --gold:#ffd21e;
  --green:#57c81a;
  --text:#ffffff;
  --muted:#bcd4f5;
  --card:#2a6fe0;
  --wrap:1180px;
}
:root{--wave-op:.15;
  --tex-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24'><path d='M0 12 Q12 4 24 12 T48 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>");
  --tex-size:48px 24px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  font-family:"Montserrat","Segoe UI",system-ui,Roboto,Arial,sans-serif;color:var(--text);
  background:linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%);
  background-attachment:fixed;font-size:15px;-webkit-font-smoothing:antialiased;
}
body{background:transparent}
/* texture wave sebagai body background (di belakang konten) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--tex-fill,#ffffff);
  background-image:var(--tex-bg,none);background-repeat:repeat;background-position:center;
  background-size:var(--tex-size,48px 24px);
  -webkit-mask-image:var(--tex-mask);mask-image:var(--tex-mask);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:var(--tex-size,48px 24px);mask-size:var(--tex-size,48px 24px);
  opacity:var(--wave-op,.15)}
/* mode putih: wave jadi biru estetik */
body.theme-light::before{background-color:var(--tex-fill,#2f7de0);opacity:calc(var(--wave-op,.15) + .12)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:6px}
.muted{color:var(--muted)}.center{text-align:center}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px}

/* ================= APP BANNER ================= */
.app-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#1a56b8,#2b74e0);
  padding:10px 14px;position:relative}
.app-banner .x{background:none;border:0;color:#cfe0ff;font-size:15px;cursor:pointer}
.app-ic{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#ffd21e,#ff7a00);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#12459c;font-size:15px}
.app-txt{flex:1;line-height:1.25}
.app-txt strong{font-size:14px}.app-txt small{display:block;color:#cfe0ff;font-size:12px}
.open-btn{background:transparent;border:1.5px solid #6fa8ff;color:#fff;font-weight:800;
  padding:8px 16px;border-radius:9px;cursor:pointer;font-size:13px}

/* ================= HEADER ================= */
.head{position:sticky;top:0;z-index:40;overflow:hidden;
  background:linear-gradient(345deg,#005eff,#006eff);
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* tekstur pedang di seluruh header */
.head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:150px auto;opacity:.9}
.head-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;
  gap:8px;padding:10px 14px}
/* overlay glass di head-inner — gloss dari glass.png dibuat PUTIH via filter (tidak ikut biru) */
.head-inner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  display:var(--glass-on,block);
  background:url("assets/glass.png") no-repeat;
  background-size:var(--glass-size,100% 100%);
  background-position:var(--glass-pos,center);
  filter:var(--glass-filter,grayscale(1) brightness(1.35));
  opacity:var(--glass-op,.5);mix-blend-mode:var(--glass-blend,screen)}
.head-inner>*{position:relative;z-index:2}
.head-top{display:flex;align-items:center;gap:12px;width:100%}
.head-top .head-btns{margin-left:auto}
.burger{display:none!important}
/* toggle switch dark/light (pill + knob geser) */
.mode-switch{flex:0 0 auto;position:relative;width:56px;height:28px;border:0;border-radius:999px;cursor:pointer;padding:0;
  background:var(--ms-track,#1c1f26);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);transition:background .2s}
.mode-switch .ms-ic{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;
  fill:none;stroke:var(--ms-icon,#ffd21e);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-switch .ms-moon{right:8px}
.mode-switch .ms-sun{left:8px;display:none}
.mode-switch .ms-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ms-knob,#fff);box-shadow:0 1px 3px rgba(0,0,0,.45);transition:left .22s ease}
.mode-switch:hover{filter:brightness(1.06)}
body.theme-light .mode-switch .ms-moon{display:none}
body.theme-light .mode-switch .ms-sun{display:block}
body.theme-light .mode-switch .ms-knob{left:calc(100% - 25px)}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px}
.logo{display:flex;align-items:center}
.logo img{height:clamp(44px,13vw,66px);width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}

.tabs3-wrap{position:relative;order:3;width:100%;margin-top:4px}
.tabs3{display:flex;width:100%;background:rgba(0,0,0,.18);border-radius:12px;overflow:hidden}
/* tombol "next" mengambang: indikator nav bisa digeser */
.tabs3-next{position:absolute;right:3px;top:50%;transform:translateY(-50%);z-index:6;display:none;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;
  background:#ffd21e;color:#111;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.tabs3-next:hover{filter:brightness(1.05)}
.tabs3-next svg{width:15px;height:15px}
.tabs3-wrap.can-next .tabs3-next{display:flex}
.t3{flex:1;background:transparent;border:0;color:#cfe0ff;font-weight:800;font-size:14px;
  padding:14px 6px;cursor:pointer;position:relative;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  -webkit-text-stroke:var(--tab-tsw,2px) var(--tab-tsc,#0a2550);paint-order:stroke fill}
.t3-ic{width:var(--tab-ic,22px);height:auto;display:inline-block;flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.t3-ic,.t3-svg{display:inline-block!important}   /* ikon nav tab selalu tampil */
.t3:hover{color:#fff}
.t3.active{color:var(--tab-ac,#ffd21e);background:var(--tab-ah,rgba(255,255,255,.14));border-radius:8px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:var(--tab-glow,none)}
.t3.active::after{content:"";position:absolute;bottom:0;left:22%;right:22%;height:3px;
  background:var(--tab-ac,#ffd21e);border-radius:3px}
.t3{white-space:nowrap;min-width:0}
.t3-svg{width:var(--tab-ic,22px);height:var(--tab-ic,22px);color:inherit;flex:0 0 auto}
/* pemisah garis halus antar tab */
.t3:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:44%;width:1px;background:rgba(255,255,255,.18);pointer-events:none}
.t3.active::before,.t3.active + .t3::before{opacity:0}   /* rapikan di sisi tab aktif */
body.theme-light .t3:not(:first-child)::before{background:rgba(0,0,0,.16)}

.head-btns{margin-left:auto;display:flex;gap:8px;align-items:center}
/* animasi klik (dipakai nav tab & baris provider) */
.anim-pop{animation:t3pop .3s ease}
@keyframes t3pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.anim-pulse{animation:t3pulse .45s ease}
@keyframes t3pulse{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(.95)}75%{transform:scale(1.04)}100%{transform:scale(1)}}
.anim-bounce{animation:t3bounce .45s ease}
@keyframes t3bounce{0%{transform:translateY(0)}30%{transform:translateY(-7px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.anim-glow{animation:t3glow .5s ease}
@keyframes t3glow{0%{box-shadow:0 0 0 rgba(255,210,30,0)}50%{box-shadow:0 0 14px rgba(255,210,30,.85)}100%{box-shadow:0 0 0 rgba(255,210,30,0)}}
.anim-flash{animation:t3flash .4s ease}
@keyframes t3flash{0%{filter:brightness(1)}50%{filter:brightness(1.5)}100%{filter:brightness(1)}}
.pill{border-radius:10px;font-weight:800;cursor:pointer;font-size:13px;padding:9px 16px;border:0;transition:.15s;white-space:nowrap}
.pill-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.pill-outline:hover{background:rgba(255,255,255,.14)}
body.theme-light .pill-outline{color:#123a8f;border-color:rgba(0,0,0,.32)}
body.theme-light .pill-outline:hover{background:rgba(0,0,0,.06)}
.pill-green{background:linear-gradient(180deg,#6ee02a,#3ea60c);color:#fff;text-shadow:0 1px 1px #2c7a08;box-shadow:0 3px 9px rgba(60,160,10,.35)}
.pill-green:hover{filter:brightness(1.06)}
.pill.full{width:100%;padding:14px}

/* ================= RALLY STRIP ================= */
.rally-strip{background:rgb(28,51,126)}
.rally-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:stretch;gap:10px;padding:4px 10px;font-size:12px;
  position:relative;min-height:var(--rally-h,36px)}
.rally-label{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;font-weight:600;font-size:12px;padding:5px 10px 5px 4px;letter-spacing:.3px;white-space:nowrap;
  background:transparent;border:0;
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.rally-ic{height:18px;width:auto;display:block;-webkit-text-stroke:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rally-marquee{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center}
.flag{font-size:14px}
.rally-txt{flex:1}.rally-txt b{color:var(--gold)}
.optin{background:transparent;border:1px solid #6fa8ff;color:#fff;font-weight:800;font-size:12px;
  padding:5px 12px;border-radius:7px;cursor:pointer}
.x2{background:none;border:0;color:#9fbdf0;cursor:pointer;font-size:13px}

/* ================= HERO (stack + fade + blur blend) ================= */
.hero{position:relative;margin:0 -14px 18px;--hero-h:clamp(200px,56vw,320px)}
.hslides{position:relative;height:var(--hero-h);border-radius:0;overflow:hidden}
.slide-bg{width:100%}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease;z-index:0}
.hslide.active{opacity:1;visibility:visible;z-index:1}
.hs-photo{padding:0}
/* gambar: bagian bawah di-feather jadi transparan -> menyatu ke background (gradasi warna) */
.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;z-index:0;
  -webkit-mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%);
          mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%)}

.hdots{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.hdot{width:8px;height:8px;border-radius:50%;background:#ffffff99;cursor:pointer;transition:.2s}
.hdot.active{background:#fff;width:20px;border-radius:5px}

/* pita/ribbon di atas caption — grup CTA ditarik naik ke banner */
.hero-ribbon{margin:var(--cta-lift,-120px) auto 8px;width:fit-content;min-width:180px;max-width:320px;min-height:46px;
  display:flex;align-items:center;justify-content:center;padding:8px 46px;position:relative;z-index:5;isolation:isolate;
  background:url("assets/ribbon.webp") center/100% 100% no-repeat}
/* recolor ribbon ke warna preset (pertahankan gloss via mix-blend color) */
.hero-ribbon::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ribbon-color,#1e6fd0);
  -webkit-mask:url("assets/ribbon.webp") center/100% 100% no-repeat;mask:url("assets/ribbon.webp") center/100% 100% no-repeat;
  mix-blend-mode:color;opacity:var(--ribbon-tint,1)}
.hero-ribbon span{position:relative;z-index:2;font-weight:900;font-size:17px;color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 3px rgba(0,0,0,.55);white-space:nowrap}
.hero-ribbon.hide{display:none}

/* teks caption di bawah gambar (di area blend) */
.hero-caption{position:relative;z-index:5;text-align:center;color:#fff;font-weight:800;font-size:21px;letter-spacing:.5px;
  text-transform:none;margin:-6px 8px 14px;text-shadow:0 2px 8px rgba(0,0,0,.5)}

.join-now{display:block;width:calc(100% - 28px);margin:0 auto;position:relative;overflow:hidden;z-index:5;
  background:linear-gradient(180deg,#8ee85a 0%,#70d03b 50%,#59b32a 100%);
  color:#fff;font-weight:900;font-size:22px;letter-spacing:1px;padding:17px 24px;
  border:3px solid #2f7d12;border-radius:16px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 0 #2c7a08, 0 11px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 2px 2px rgba(0,0,0,.32);transition:transform .08s, box-shadow .08s}
/* kilap glossy di separuh atas */
.join-now::before{content:"";position:absolute;left:5px;right:5px;top:4px;height:44%;z-index:1;pointer-events:none;
  border-radius:12px 12px 45% 45% / 12px 12px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.10) 70%,rgba(255,255,255,0))}
/* titik kilau kecil di pojok kiri-atas tombol */
.join-now::after{content:"";position:absolute;top:6px;left:14px;width:16px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.9);filter:blur(1px);z-index:2;pointer-events:none}
.jn-label{position:relative;z-index:2;-webkit-text-stroke:2px #256210;paint-order:stroke fill}
.join-now:active{transform:translateY(4px);box-shadow:0 2px 0 #2c7a08, 0 5px 9px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6)}

/* shine sweep kiri -> kanan */
.jn-shine{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:3;pointer-events:none;display:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-180%) skewX(-18deg)}
.join-now.shine-on .jn-shine{display:block;animation:jnShine var(--jn-shine-dur,2.4s) linear infinite}
@keyframes jnShine{0%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
/* zoom in-out (pulse) */
.join-now.zoom-on{animation:jnZoom var(--jn-zoom-dur,1.5s) ease-in-out infinite}
@keyframes jnZoom{0%,100%{transform:scale(1)}50%{transform:scale(var(--jn-zoom-scale,1.05))}}
.hdot{width:8px;height:8px;border-radius:50%;background:#ffffff66;cursor:pointer;transition:.2s}
.hdot.active{background:#fff;width:20px;border-radius:5px}

/* ================= QUICK ROW ================= */
.quick-row{display:flex;gap:10px;margin:0 -14px 26px;padding:10px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;
  background:var(--qr-bg,linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%));background-attachment:fixed}
.qbtn{background:linear-gradient(180deg,#3d86ec,#2764c9);border:1px solid #5a9bf5;color:#fff;
  font-weight:800;font-size:13px;border-radius:14px;padding:13px;cursor:pointer;display:flex;position:relative;
  align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 8px rgba(0,0,0,.25);flex:1;
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.qbtn.qsearch{flex:0 0 54px}
.qi{font-size:17px}
.qi-img{height:24px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.qbtn:hover{filter:brightness(1.09);transform:translateY(-1px)}
/* efek klik quick-row seperti nav tabs (teks kuning) */
.qbtn.active{color:var(--tab-ac,#ffd21e);text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* quick-row: search = label tetap di kiri, sisanya di wadah .qr-scroll */
.qr-scroll{display:flex;gap:10px;flex:1;min-width:0}
.qbtn.qsearch{flex:0 0 54px}

/* mobile: wadah .qr-scroll & toolbar togel/lc bisa di-swipe */
@media(max-width:859px){
  .qr-scroll,.tg-toolbar,.lc-quick{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  .qr-scroll::-webkit-scrollbar,.tg-toolbar::-webkit-scrollbar,.lc-quick::-webkit-scrollbar{display:none}
  .qr-scroll .qbtn{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding-left:18px;padding-right:18px}
  .tg-toolbar .qbtn{flex:0 0 auto;scroll-snap-align:start}
  .lc-quick .qbtn{flex:1 0 auto;scroll-snap-align:start}
}

/* style tombol biru (quick-row + login/register) — diatur via variabel */
.qbtn, .head-btns .pill, .pf, .prov-row{
  border-radius:var(--btn-radius,9px);
  border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1) 50.18%,var(--btn-c2,#71B9FF) 99.46%);
  color:#fff;
  -webkit-text-stroke:var(--btn-tsw,2px) var(--btn-tsc,#0a2550);
  paint-order:stroke fill;
}
.qbtn{padding:9px 10px}
/* quick-row dikecilkan seukuran nav tab lama */
.quick-row .qbtn{padding:6px 8px;font-size:12px}
.quick-row .qi-img{height:18px}
.head-btns .pill{padding:9px 18px;font-size:13px}

/* Tombol DAFTAR: box sama dgn LOG IN (variabel outline), warna+efek JOIN NOW */
#btnRegister{
  position:relative;overflow:hidden;color:#fff;
  border-radius:var(--btn-radius,9px);
  border-top:var(--btn-bt,1px) solid #2f7d12;
  border-right:var(--btn-bs,1px) solid #2f7d12;
  border-bottom:var(--btn-bb,6px) solid #2f7d12;
  border-left:var(--btn-bs,1px) solid #2f7d12;
  background:linear-gradient(180deg,#86ea41 0%,#5fc628 48%,#4bad14 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.3);-webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill;transition:transform .08s,box-shadow .08s}
#btnRegister::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:46%;z-index:1;pointer-events:none;
  border-radius:8px 8px 45% 45%/8px 8px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 70%,transparent)}
#btnRegister::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6) 50%,rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg);animation:jnShine 2.6s linear infinite}
#btnRegister .reg-label{position:relative;z-index:3}
#btnRegister:active{transform:translateY(2px);
  box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55)}

/* ================= JACKPOT / WONDERPOT ================= */
.jp-panel{position:relative;border-radius:18px;padding:44px 14px 12px;overflow:hidden;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#274a9e 0%,#152a63 42%,#0b1740 100%);
  border:1px solid var(--jp-border,#3a5db0);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.jp-panel::before{content:"✦ ✦ ✦ ✦ ✦ ✦";position:absolute;top:8px;left:0;right:0;text-align:center;
  color:#ffd21e;opacity:.5;letter-spacing:16px;font-size:11px;pointer-events:none}
.jp-banner{position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#7a1020,#3a0810);border:2px solid #ffb703;border-top:0;
  border-radius:0 0 14px 14px;padding:6px 26px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.jp-banner span{font-weight:900;font-size:12px;letter-spacing:2px;
  color:transparent;background:linear-gradient(180deg,#ffe98a,#ffb703);-webkit-background-clip:text;background-clip:text}
.jp-amount{font-weight:900;font-size:38px;line-height:1;margin:6px 0 14px;
  color:var(--jp-main-color,#ffffff);font-variant-numeric:tabular-nums}
.jp-tiers{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.jp-tier{flex:1;max-width:150px;background:linear-gradient(180deg,var(--jp-tier1,#16265e),var(--jp-tier2,#0d1a44));
  border:1px solid var(--jp-border,#33509c);
  border-radius:12px;padding:8px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:5px}
.jp-tag{font-weight:900;font-size:10px;letter-spacing:.5px;color:#fff;padding:3px 12px;border-radius:20px}
.jp-tag.ultra{background:linear-gradient(180deg,#a25bff,#6a2bd6)}
.jp-tag.boost{background:linear-gradient(180deg,#3d86ec,#2764c9)}
.jp-tag.flash{background:linear-gradient(180deg,#6ee02a,#3ea60c)}
.jp-tier b{font-size:14px;color:#ffe08a;font-variant-numeric:tabular-nums}
.jp-games{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.jp-game{aspect-ratio:1/1;border-radius:12px;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:30px}
.jp-play{display:block;width:calc(100% - 8px);margin:0 auto 12px;border:0;cursor:pointer;border-radius:14px;
  padding:15px;font-weight:900;font-size:19px;letter-spacing:1px;color:var(--jp-btntext,#5a3a00);
  background:linear-gradient(180deg,var(--jp-btn1,#ffe486),var(--jp-btn2,#ffc21e) 55%,var(--jp-btn3,#f5a300));
  box-shadow:0 5px 0 var(--jp-btnsh,#b9760a),0 10px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.4);transition:.1s}
.jp-play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--jp-btnsh,#b9760a),0 5px 9px rgba(0,0,0,.4)}
.jp-shine{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:4;pointer-events:none;display:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4) 50%,rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg)}
.jp-panel.shine-on .jp-shine{display:block;animation:jnShine var(--jp-shine-dur,2.4s) linear infinite}
.jp-ticker{overflow:hidden;border-top:1px solid #ffffff1f;padding-top:8px}
.jp-track{display:inline-flex;white-space:nowrap;gap:28px;font-size:12px;color:#bcd0f5;
  animation:jpScroll 22s linear infinite;will-change:transform}
.jp-track b{color:#ffd21e}
.jp-track span{opacity:.55;font-size:11px}
@keyframes jpScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== mode body terang (kontras) ===== */
body.theme-light .block-head h2{color:#123a8f;-webkit-text-stroke:0}
body.theme-light .see{color:#2764c9}
body.theme-light .see:hover{color:#0e2a6b}
body.theme-light .sub{color:#3a5aa8}
body.theme-light .foot p{color:#3a5aa8}
body.theme-light .foot{border-top-color:#00000018}

/* ================= HALAMAN PROVIDERS (di area konten) ================= */
.page-overlay{display:none;margin:8px 0 10px}
/* togel & live casino: toolbar rapat ke header (tanpa gap) */
.page-overlay.tg-page,.page-overlay.lc-page{margin-top:0}
.page-overlay.show{display:block}
/* saat halaman provider aktif: sembunyikan konten lain, header+tabs+quick tetap */
body.pp-open .hero,
body.pp-open .rally-strip,
body.pp-open .block{display:none}
/* saat halaman togel aktif */
body.tg-open .hero,
body.tg-open .rally-strip,
body.tg-open .quick-row,
body.tg-open .block{display:none}
/* saat halaman live casino aktif */
body.lc-open .hero,
body.lc-open .rally-strip,
body.lc-open .quick-row,
body.lc-open .block{display:none}
body.sb-open .hero, body.sb-open .rally-strip, body.sb-open .quick-row, body.sb-open .block,
body.lv-open .hero, body.lv-open .rally-strip, body.lv-open .quick-row, body.lv-open .block{display:none}
.page-head{display:flex;align-items:center;gap:12px;padding:6px 2px 12px}
.page-back{background:rgba(255,255,255,.15);border:0;color:#fff;font-size:24px;line-height:1;
  width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.page-back:hover{background:rgba(255,255,255,.28)}
.page-title{font-weight:900;font-size:20px;color:#fff}
body.theme-light .page-title{color:#123a8f}
body.theme-light .page-back{background:rgba(0,0,0,.12);color:#123a8f}
.page-filters{display:flex;gap:8px;padding:0 0 14px}
.pf{flex:1;font-weight:800;font-size:12px;padding:8px 6px;cursor:pointer;transition:.15s}
.pf:hover{filter:brightness(1.08)}
.pf.active{filter:brightness(1.22);color:var(--tab-ac,#ffd21e);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.prov-list{display:flex;flex-direction:column;gap:10px;padding:0}
.prov-row{display:flex;align-items:center;gap:14px;cursor:pointer;transition:.15s;position:relative;overflow:visible;
  background:linear-gradient(90deg,var(--pr-g1,#eef4ff) 0%,var(--pr-g1,#eef4ff) var(--pr-split,9%),var(--pr-g2,#2f6fe0) 100%);
  border:0 !important;border-radius:var(--pr-radius,15px);padding:12px 16px;box-shadow:0 4px 10px rgba(0,0,0,.32);
  -webkit-text-stroke:0}
.prov-row:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* texture pedang di atas gradient (fade masuk di sisi biru) */
.prov-row::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:var(--pr-tex-size,215px) auto;
  opacity:var(--pr-tex-op,.58);
  -webkit-mask:linear-gradient(90deg,transparent 22%,#000 62%);mask:linear-gradient(90deg,transparent 22%,#000 62%)}
.pr-logo{flex:0 0 auto;width:var(--pr-logo-w,120px);height:52px;object-fit:contain;object-position:left center;
  background:none;box-shadow:none;padding:0;position:relative;z-index:2}
.pr-name{flex:1;text-align:left;font-weight:800;font-size:16px;letter-spacing:.2px;text-transform:none;
  color:var(--pr-name-c,#ffffff);position:relative;z-index:2;
  -webkit-text-stroke:var(--pr-name-sw,1px) var(--pr-name-sc,#0e2a63);paint-order:stroke fill}
.pr-count{font-weight:800;font-size:16px;color:var(--pr-count-c,#ffffff);position:relative;z-index:2;
  display:var(--pr-count-disp,none);text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* baris ber-hadiah: beri ruang utk kotak hadiah + tampilkan hadiah */
.prov-row.pr-gift .pr-count{margin-right:calc(var(--pr-gift-w,96px) - 12px)}
.prov-row.pr-gift::after{content:"";position:absolute;right:var(--pr-gift-x,8px);top:50%;transform:translateY(-50%);
  display:var(--pr-gift-disp,block);width:var(--pr-gift-w,96px);height:calc(var(--pr-gift-w,96px) * .94);
  background:url("assets/gift.png") center/contain no-repeat;z-index:1;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}

/* ================= MARQUEE BANK (di rally-strip) ================= */
.bank-track{display:flex;align-items:center;gap:40px;width:max-content;
  animation:bankScroll 80s linear infinite}
.rally-marquee:hover .bank-track{animation-play-state:paused}
@keyframes bankScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bank-item{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bank-ic{height:18px;width:auto;max-width:80px;object-fit:contain;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.bank-on {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 300;
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.bank-dot{width:7px;height:7px;border-radius:50%;background:#1fbf47;
  box-shadow:0 0 0 3px rgba(31,191,71,.22)}

/* ================= HALAMAN LIVE CASINO ================= */
.lc-page{color:#fff}
/* quick row provider/top/new — menempel di header seperti page lain */
.lc-quick{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;background:var(--surf-bar,rgb(28,51,126))}
.lc-quick .qbtn{flex:1;padding:10px 12px}
/* grid tombol provider */
.lc-provs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lc-prov{display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));color:#fff;
  font-weight:800;font-size:14px;padding:14px 16px;transition:.15s;
  border-radius:var(--btn-radius,9px);border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.lc-prov:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lc-prov.active{outline:3px solid var(--tab-ac,#ffd21e);outline-offset:-1px;color:var(--tab-ac,#ffd21e)}
.lc-prov .lc-ic{font-size:20px;-webkit-text-stroke:0;flex:0 0 auto}
.lc-prov .lc-nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* judul provider terpilih */
.lc-heading{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.lc-heading .lc-big{font-weight:900;font-size:20px;color:var(--tab-ac,#ffd21e)}
.lc-heading small{color:#bcd2ff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* grid thumbnail game */
.lc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lc-card{cursor:pointer}
.lc-thumb{aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;
  border:2px solid rgba(255,255,255,.18);box-shadow:0 4px 12px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;transition:.15s}
.lc-card:hover .lc-thumb{transform:translateY(-3px);border-color:var(--tab-ac,#ffd21e)}
.lc-emoji{font-size:44px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.lc-play{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.45);border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;color:#fff;letter-spacing:.3px}
.lc-play::before{content:"▶";font-size:11px;margin-left:1px}
.lc-cap{position:absolute;left:6px;right:6px;bottom:6px;text-align:center;font-weight:900;font-size:12px;
  color:#fff;text-shadow:0 1px 3px #000;text-transform:uppercase}
.lc-gname{text-align:center;font-weight:700;font-size:12px;margin-top:6px;color:#eaf2ff}

@media(min-width:860px){
  .lc-provs{grid-template-columns:repeat(3,1fr)}
  .lc-grid{grid-template-columns:repeat(4,1fr)}
  /* background quick row full lebar layar di desktop */
  .lc-quick{background:transparent}
  .lc-quick::after{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;
    z-index:-1;pointer-events:none;background:var(--surf-bar,rgb(28,51,126))}
}

/* ================= HALAMAN TOGEL ================= */
.tg-page{color:#fff}
/* toolbar atas — gaya identik quick-row slot (pakai .qbtn), menempel di header */
.tg-toolbar{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;
  background:var(--surf-bar,rgb(28,51,126))}
.tg-toolbar .qbtn{flex:1;padding:10px 12px}

/* grid pasaran */
.tg-markets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.tg-market{position:relative;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));color:#fff;
  font-weight:800;font-size:13px;padding:13px 14px;transition:.15s;
  border-radius:var(--btn-radius,9px);border-top:var(--btn-bt,1px) solid var(--btn-bc,#005eff);
  border-right:var(--btn-bs,1px) solid var(--btn-bc,#005eff);border-bottom:var(--btn-bb,6px) solid var(--btn-bc,#005eff);
  border-left:var(--btn-bs,1px) solid var(--btn-bc,#005eff);
  -webkit-text-stroke:2px var(--btn-tsc,#0a2550);paint-order:stroke fill}
.tg-market:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tg-market.active{outline:3px solid var(--tab-ac,#ffd21e);outline-offset:-1px;color:var(--tab-ac,#ffd21e)}
.tg-dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;-webkit-text-stroke:0}
.tg-dot.on{background:#2ecc4b;color:#0a3d12}
.tg-dot.off{background:#e74c3c;color:#5a0f0a}
.tg-mname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-time{font-size:11px;font-weight:800;color:#ffe08a;-webkit-text-stroke:0;letter-spacing:.5px}

/* body: sidebar + tabel */
.tg-play{display:flex;gap:12px;align-items:flex-start}
.tg-side{flex:0 0 150px;display:flex;flex-direction:column;gap:10px}
.tg-discount{background:linear-gradient(180deg,#ffe38a,#f4c743);color:#5a3d00;font-weight:900;font-size:14px;
  padding:12px;border-radius:10px;border:0;border-bottom:4px solid #c89a17;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center}
.tg-mcard{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 10px;text-align:center}
.tg-mc-name{color:var(--tab-ac,#ffd21e);font-weight:900;font-size:15px;line-height:1.2}
.tg-mc-period{color:#fff;font-weight:800;font-size:14px;margin-top:2px}
.tg-mc-prev{color:#4dff8a;font-weight:800;font-size:12px;margin-top:10px}
.tg-mc-prev b{color:#fff;font-size:14px}
.tg-modes{display:flex;flex-direction:column;gap:6px}
.tg-mode{position:relative;background:linear-gradient(180deg,#2b4d8c,#1c3564);
  color:#dbe7ff;font-weight:800;font-size:13px;padding:12px 10px;border:0;border-radius:8px;cursor:pointer;text-align:center;transition:.15s}
.tg-mode:hover{filter:brightness(1.12)}
.tg-mode.active{background:linear-gradient(180deg,#3d86ec,#2764c9);color:var(--tab-ac,#ffd21e)}
.tg-badge{position:absolute;top:-4px;right:-4px;background:#e63b2e;color:#fff;font-size:8px;font-weight:900;
  padding:2px 5px;border-radius:6px;transform:rotate(8deg)}

/* tabel bet */
.tg-main{flex:1;min-width:0}
.tg-main-head{background:linear-gradient(90deg,#e0463c,#c9342b);color:#fff;font-weight:900;font-size:14px;
  padding:12px 16px;border-radius:10px 10px 0 0;-webkit-text-stroke:0}
.tg-main-head b{color:#ffe08a}
.tg-scroll{overflow-x:auto;background:rgba(0,0,0,.22);border-radius:0 0 10px 10px}
.tg-table{min-width:640px}
.tg-trow{display:grid;grid-template-columns:40px 190px 1fr 1fr 1fr 1fr;align-items:center;gap:10px;
  padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.tg-thead{font-weight:800;font-size:12px;color:#bcd2ff;background:rgba(255,255,255,.05);-webkit-text-stroke:0}
.tg-c-no{text-align:center;color:#bcd2ff;font-weight:800}
.tg-c-num{display:flex;gap:6px}
.tg-copy{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;margin-left:8px;color:#bcd2ff}
.tg-dig{width:36px;height:34px;text-align:center;font-weight:800;font-size:15px;border:1px solid #9fbdf0;
  border-radius:6px;background:#fff;color:#0a2550}
.tg-inp{width:100%;height:34px;border-radius:6px;border:1px solid #9fbdf0;padding:0 8px;font-weight:700;font-size:13px;color:#0a2550}
.tg-inp.cream{background:#fff6da;border-color:#e6cf8f}
.tg-inp.white{background:#fff}
.tg-inp[readonly]{background:#fff6da;color:#5a3d00;cursor:default}
.tg-dig:focus,.tg-inp:focus{outline:2px solid var(--tab-ac,#ffd21e);border-color:var(--tab-ac,#ffd21e)}
.tg-cell{min-width:0}
.tg-mini{display:none}

.tg-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.tg-total{font-weight:800;font-size:15px}
.tg-total b{color:var(--tab-ac,#ffd21e);font-size:18px}
.tg-submit{background:linear-gradient(180deg,#8ee85a,#59b32a);color:#fff;font-weight:900;font-size:15px;
  padding:13px 30px;border:0;border-bottom:5px solid #2f7d12;border-radius:12px;cursor:pointer;
  -webkit-text-stroke:2px #256210;paint-order:stroke fill}
.tg-submit:active{transform:translateY(2px)}

@media(max-width:760px){
  .tg-play{flex-direction:column}
  .tg-side{flex:none;width:100%}
  .tg-modes{flex-direction:row;flex-wrap:wrap}
  .tg-mode{flex:1 1 30%}

  /* tabel bet: fit portrait tanpa scroll — tiap baris jadi 2 baris */
  .tg-scroll{overflow-x:visible}
  .tg-table{min-width:0}
  .tg-thead{display:none}
  .tg-mini{display:block;font-size:9px;font-weight:800;color:#bcd2ff;-webkit-text-stroke:0;
    text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;white-space:nowrap}
  .tg-trow{grid-template-columns:22px 1fr 1fr 1fr;
    grid-template-areas:"no num num game" "no bet pot pay";
    column-gap:6px;row-gap:8px;padding:10px 10px}
  .tg-c-no{grid-area:no;align-self:center;font-size:12px}
  .tg-c-num{grid-area:num;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  .tg-c-game{grid-area:game;align-self:end}
  .tg-c-bet{grid-area:bet}
  .tg-c-pot{grid-area:pot}
  .tg-c-pay{grid-area:pay}
  .tg-dig{width:100%;min-width:0;height:36px;font-size:15px;padding:0}
  .tg-inp{height:32px;font-size:12px;padding:0 5px}
}
@media(min-width:860px){
  .tg-markets{grid-template-columns:repeat(4,1fr)}
  /* background toolbar full lebar layar di desktop */
  .tg-toolbar{background:transparent}
  .tg-toolbar::after{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;
    z-index:-1;pointer-events:none;
    background:var(--surf-bar,rgb(28,51,126))}
}

/* grid game per provider */
.pp-games{display:none}
.pg-grid{display:grid;grid-template-columns:repeat(var(--pg-cols,4),1fr);gap:var(--pg-gap,8px)}
.pg-card{aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  border:2px solid rgba(255,255,255,.2);box-shadow:0 3px 8px rgba(0,0,0,.35);transition:.15s;
  display:flex;align-items:flex-end;justify-content:center;padding:5px}
.pg-card:hover{transform:translateY(-3px)}
.pg-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
.pg-name{position:relative;z-index:1;font-size:9px;font-weight:800;text-align:center;line-height:1.1;
  text-shadow:0 1px 2px #000}

/* ================= BLOCKS ================= */
.block{margin-bottom:var(--block-gap,16px)}
.block-head{display:flex;align-items:center;margin-bottom:14px}
.block-head h2{font-size:19px;font-weight:700;
  -webkit-text-stroke:var(--title-tsw,0px) var(--title-tsc,#0a2550);paint-order:stroke fill}
.see{margin-left:auto;color:#a9c6f5;font-size:12px;font-weight:700}
.see:hover{color:#fff}
.sub{font-size:13px;color:#cfe0ff;margin:-8px 0 12px}
.hl{color:var(--green)}

.rank-slider{display:flex;gap:var(--rt-gap,16px);overflow-x:auto;overflow-y:hidden;padding:6px 2px 26px var(--rt-pl,20px);scroll-snap-type:x proximity}
.rank-slider.rs-alt{padding-left:var(--rt-pl2,20px)}
.rank-card{position:relative;flex:0 0 auto;width:var(--rt-w,120px);scroll-snap-align:start;padding-bottom:28px}
.rank-card:first-child{margin-left:10px}
.rank-thumb{width:var(--rt-w,120px);height:var(--rt-h,164px);border-radius:16px;overflow:hidden;position:relative;
  cursor:pointer;transition:.15s;border:0;
  box-shadow:0 8px 18px rgba(0,0,0,.45)}
/* stroke gradient linear (Inside) — weight mixed: tipis atas/samping, tebal bawah */
.rank-thumb::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  padding:var(--card-t,3px) var(--card-r,3px) var(--card-b,6px) var(--card-l,3px);
  background:linear-gradient(180deg,#a8ccff 0%,#3f86ff 45%,#0a46cf 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.rank-thumb .emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:50px}
.rank-thumb .top-tag{position:absolute;top:6px;left:6px;background:#000000aa;color:var(--gold);
  font-size:9px;font-weight:900;padding:2px 6px;border-radius:6px}
.rank-thumb .gname{display:none}
.big-num{position:absolute;bottom:6px;left:2px;font-size:var(--bn-size,58px);font-weight:900;line-height:1;z-index:5;
  color:var(--bn-sc,#0a2550);
  -webkit-text-stroke:calc(var(--bn-sw,5px) * 2) var(--bn-sc,#0a2550);
  transform:translate(var(--bn-x,0px),var(--bn-y,0px));
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.5))}
.big-num::after{content:attr(data-num);position:absolute;left:0;top:0;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,var(--bn-c1,#ffe98a) 0%,var(--bn-c2,#ff9e00) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rank-thumb:hover{transform:translateY(-4px)}
.rank-thumb:hover::before{background:linear-gradient(180deg,#dbe9ff,#6aa4ff 45%,#1257e0 100%)}

/* PROVIDERS */
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prov-chip{background:linear-gradient(180deg,#3d86ec,#2764c9);border:1px solid #5a9bf5;border-radius:10px;
  padding:8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;cursor:pointer;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.prov-logo{max-width:100%;max-height:var(--prov-size,18px);width:auto;object-fit:contain;display:block;
  filter:brightness(0) invert(1);opacity:.95}
.prov-chip small{display:block;color:#dbe9ff;font-weight:700;font-size:9px}
.prov-chip:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.32)}

/* ================= FOOTER ================= */
.foot{border-top:1px solid #ffffff22;margin-top:14px}
.foot-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:12px;padding:22px 14px}
.badge18{background:#ff4d5e;color:#fff;font-weight:900;border-radius:50%;width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.foot p{font-size:12px;color:#cfe0ff}

.chat-fab{position:fixed;bottom:20px;right:20px;background:#1a1a1a;color:#fff;border:0;width:54px;height:54px;
  border-radius:50%;font-size:22px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:60;transition:.15s}
.chat-fab:hover{transform:scale(1.08)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:#000000cc;display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:linear-gradient(180deg,#2a6fe0,#123f9c);border:1px solid #5a9bf5;border-radius:18px;
  padding:26px;width:100%;max-width:360px;position:relative;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{font-size:20px}
.modal input{background:#0e3c8f;border:1px solid #5a9bf5;border-radius:10px;padding:12px;color:#fff;outline:none}
.modal input::placeholder{color:#9fbdf0}
.modal input:focus{border-color:var(--gold)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:0;color:#cfe0ff;font-size:18px;cursor:pointer}

/* ================= MODAL DAFTAR ================= */
.reg-box{
  background:linear-gradient(180deg, var(--rf-bg1,#244a9e) 0%, var(--rf-bg2,#14306e) 100%);
  border:1px solid var(--rf-frame,#4d7ee0);border-radius:18px;
  width:100%;max-width:360px;position:relative;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  max-height:90vh;display:flex;flex-direction:column}
.reg-head{background:linear-gradient(345deg,var(--rf-head1,#005eff),var(--rf-head2,#006eff));position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:14px 12px}
/* tekstur pedang */
.reg-head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/tex-swords.png") repeat;background-size:150px auto;opacity:.9}
/* overlay glass */
.reg-head::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("assets/glass.png") no-repeat;background-size:100% 100%;
  opacity:.5;mix-blend-mode:screen}
.reg-logo{position:relative;z-index:2;height:44px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.reg-tabs{display:flex;gap:8px;padding:12px 14px 2px}
.reg-tab{flex:1;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);color:#cfe0ff;
  font-weight:800;font-size:14px;padding:11px;border-radius:10px;cursor:pointer;transition:.15s}
.reg-tab:hover{filter:brightness(1.12)}
.reg-tab.active{background:linear-gradient(180deg,var(--rf-tabact1,#3d86ec),var(--rf-tabact2,#2764c9));color:#fff;
  border-color:var(--rf-frame,#6fa8ff);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.reg-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;min-height:0}
.reg-section{color:var(--rf-icon,#a9c8ff);font-weight:600;font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;margin:4px 2px -2px;display:flex;align-items:center;gap:8px}
.reg-section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rf-fborder,#3d78d6),transparent)}
.reg-field{display:flex;align-items:stretch;border-radius:var(--rf-radius,999px);overflow:hidden;
  background:var(--rf-fbg,#14306e);
  border:2px solid var(--rf-fborder,#3d78d6)}
.reg-ic{flex:0 0 auto;width:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border-right:1px solid var(--rf-fborder,#3d78d6)}
.reg-svg{width:18px;height:18px;fill:none;stroke:var(--rf-icon,#a9c8ff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-field input,.reg-sel{flex:1;min-width:0;border:0;outline:none;padding:12px 14px;font-size:10px;
  color:var(--rf-text,#e6eeff);font-weight:600;background:transparent;font-family:inherit}
.reg-field input::placeholder{color:var(--rf-ph,#9fb3e0);font-weight:600}
.reg-sel option{color:#0d1b3e}
/* tombol mata (lihat password) */
.reg-eye{flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:var(--rf-icon,#a9c8ff);padding:0}
.reg-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-eye .eye-closed{display:none}
.reg-eye.on .eye-open{display:none}
.reg-eye.on .eye-closed{display:block}
.reg-eye:hover{color:#38a8ff}
.reg-field.sel{padding:0}
/* saat fokus: glow mengikuti radius kolom, warna biru terang */
.reg-field:focus-within{border-color:var(--rf-focus,#38a8ff);
  box-shadow:0 0 0 2px var(--rf-focus,#38a8ff), 0 0 12px var(--rf-focus,#38a8ff)}
.reg-field:focus-within .reg-ic{border-right-color:var(--rf-focus,#38a8ff)}
/* field belum diisi saat submit: ring merah */
.reg-field.reg-invalid{border-color:#ff5c5c !important;
  box-shadow:0 0 0 1px rgba(255,92,92,.6), 0 0 5px rgba(255,92,92,.3) !important}
.reg-field.reg-invalid .reg-ic{border-right-color:#ff4d4d}
/* toast pop up */
.reg-toast{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-14px);z-index:200;
  background:linear-gradient(180deg,#f0534b,#d63a31);color:#fff;font-weight:800;font-size:13px;
  padding:12px 20px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:90vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
.reg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* captcha */
.reg-cap{display:flex;align-items:center;gap:8px}
.reg-cap-img{flex:1;height:46px;border-radius:8px;overflow:hidden;position:relative;
  background:#111;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(60deg,rgba(255,255,255,.12) 0 1px,transparent 1px 9px);
  display:flex;align-items:center;justify-content:center;gap:2px}
.reg-cap-ch{display:inline-block;color:#f2f2f2;font-weight:900;font-size:26px;font-family:"Courier New",monospace;
  text-shadow:0 1px 2px #000}
.reg-cap-refresh{flex:0 0 auto;width:44px;height:46px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#3d86ec,#2764c9);color:#fff;display:flex;align-items:center;justify-content:center}
.reg-cap-refresh svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reg-cap-refresh:hover{filter:brightness(1.1)}
.reg-submit{margin:14px 14px 8px;position:relative;z-index:6;
  background:linear-gradient(180deg,var(--rf-btn1,#86ea41) 0%,var(--rf-btn2,#4bad14) 100%);color:#fff;font-weight:900;
  font-size:16px;border:0;border-bottom:4px solid #2f7d12;border-radius:12px;padding:14px;cursor:pointer;letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.3);-webkit-text-stroke:2px #256210;paint-order:stroke fill;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.reg-submit:active{transform:translateY(2px)}
.reg-altline{text-align:center;color:#cfe0ff;font-size:13px;font-weight:600;margin:4px 14px 10px}
.reg-altline a{color:var(--gold,#ffd21e);font-weight:800;text-decoration:underline;cursor:pointer}
.reg-altline a:hover{filter:brightness(1.1)}
.reg-close{margin:0 14px 14px;background:#465272;color:#fff;font-weight:800;font-size:14px;border:0;border-radius:10px;
  padding:12px;cursor:pointer}
.reg-close:hover{filter:brightness(1.12)}

/* ================= HEADER STATE LOGIN (user box) ================= */
/* setelah login: sembunyikan tombol JOIN NOW, pita hero, & caption hero */
body.logged-in #btnJoin,
body.logged-in .hero-ribbon,
body.logged-in .hero-caption{display:none}
/* setelah login: hapus rally, quick-row langsung di bawah head, hero di bawah quick-row */
body.logged-in .rally-strip{display:none}
body.logged-in main.wrap{display:flex;flex-direction:column}
body.logged-in .quick-row{order:-1;margin-top:0;margin-bottom:0}
body.logged-in .hero{order:0;margin-top:0;margin-bottom:18px}
/* setelah login: banner slider jadi mockup HP */
body.logged-in .hslides > .hslide{opacity:0 !important;visibility:hidden}
body.logged-in .hdots{display:none}
body.logged-in .hslides::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("assets/slide-main.png?v=8") center top/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%);
          mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.2) 88%,transparent 100%)}
/* baris provider di slot (hanya login) */
.lg-provrows{display:none}
/* setelah login: Top Games jadi grid (tanpa angka & label TOP) */
body.logged-in #topGames{display:grid;grid-template-columns:repeat(var(--lg-cols,3),1fr);gap:var(--lg-gap,8px);overflow:visible;padding:0}
body.logged-in #topGames .rank-card{width:auto;padding-bottom:0;margin-left:0}
body.logged-in #topGames .rank-thumb{width:100%;height:auto;aspect-ratio:var(--lg-ar,.75);border-radius:var(--lg-radius,16px)}
body.logged-in #topGames .big-num,
body.logged-in #topGames .top-tag,
body.logged-in #topGames .rank-thumb .gname{display:none}
body.logged-in #topGames .rank-thumb::after{content:"🤍";position:absolute;top:5px;right:5px;z-index:4;
  display:var(--lg-heart-disp,flex);width:var(--lg-heart,26px);height:var(--lg-heart,26px);
  border-radius:50%;background:rgba(0,0,0,.45);align-items:center;justify-content:center;
  font-size:calc(var(--lg-heart,26px) * .48);-webkit-mask:none;mask:none}
@media(min-width:860px){ body.logged-in #topGames{grid-template-columns:repeat(var(--lg-cols-d,6),1fr)} }
/* tombol DEPOSIT melayang di kiri-bawah hero (setelah login) */
.hero-depo{display:none;position:absolute;left:11px;bottom:14px;z-index:6;overflow:hidden;
  align-items:center;justify-content:center;min-width:190px;
  background:linear-gradient(180deg,#8ee85a 0%,#70d03b 50%,#59b32a 100%);
  color:#fff;font-weight:800;font-size:13px;padding:9px 16px;cursor:pointer;
  border-radius:var(--btn-radius,10px);border:0;border-bottom:5px solid #2f7d12;
  box-shadow:0 4px 10px rgba(0,0,0,.4);-webkit-text-stroke:1px #256210;paint-order:stroke fill}
.hd-in{position:relative;z-index:2;display:flex;align-items:center;gap:7px}
.hero-depo img{height:18px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
/* shine pelan ala tombol register */
.hero-depo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg);animation:jnShine 4.5s linear infinite}
.hero-depo:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hero-depo:active{transform:translateY(1px)}
body.logged-in .hero-depo{display:flex}
/* tombol quick-row khusus login (Deposit/Withdraw) */
.quick-row .lg-only{display:none}
body.logged-in .quick-row .lg-only{display:flex}
/* setelah login (bukan saat halaman overlay): sisakan Top Games + Provider rows */
body.logged-in .block{display:none}
body.logged-in:not(.pp-open):not(.tg-open):not(.lc-open) #topGamesBlock,
body.logged-in:not(.pp-open):not(.tg-open):not(.lc-open) #slotProvBlock{display:block}
.user-box{display:flex;align-items:center;gap:8px}
.ub-bal{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--ub-bg1,#0e3c8f),var(--ub-bg2,#0a2f70));
  border:1px solid var(--ub-border,#4d7ee0);border-radius:10px;padding:6px 6px 6px 12px;cursor:pointer;color:#fff}
.ub-bal:hover{filter:brightness(1.1)}
.ub-amt{font-weight:800;font-size:14px;white-space:nowrap}
.ub-plus{width:24px;height:24px;border-radius:7px;background:linear-gradient(180deg,#6ee02a,#3ea60c);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;line-height:1}
.ub-meta{display:flex;flex-direction:column;line-height:1;max-width:96px}
.ub-id{font-weight:800;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-avatar{width:38px;height:38px;border-radius:10px;cursor:pointer;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(181deg,var(--btn-c1,#4E93F1),var(--btn-c2,#71B9FF));
  border:1px solid var(--btn-bc,#005eff);display:flex;align-items:center;justify-content:center;padding:0}
.ub-avatar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ub-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ub-avatar:hover{filter:brightness(1.1)}

/* ================= MODAL DEPOSIT ================= */
.depo-box{background:var(--surf-bg,#1d3788);border-radius:16px;
  width:100%;max-width:380px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55);
  max-height:92vh;overflow-y:auto;padding:16px}
.depo-box *{font-weight:600}
.depo-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.depo-tabs{display:flex;gap:8px;flex:1}
.depo-tab{background:rgba(255,255,255,.12);border:0;color:#cfe0ff;font-size:14px;
  padding:9px 18px;border-radius:9px;cursor:pointer}
.depo-tab.active{background:var(--surf-tabact,#3469de);color:var(--surf-tabtext,#faffe5)}
.depo-x{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;font-size:16px;
  background:rgba(255,255,255,.14);color:#fff}
.depo-x:hover{background:rgba(255,255,255,.26)}
.depo-bal-label{color:#cfe0ff;font-size:13px;display:flex;align-items:center;gap:6px}
.depo-eye{cursor:pointer;opacity:.85}
.depo-bal{color:#fff;font-size:30px;margin:2px 0 16px}
.depo-pm-label{color:#cfe0ff;font-size:13px;margin-bottom:8px}
.depo-methods{display:flex;flex-direction:column;gap:10px}
.depo-method{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px}
.depo-logo{flex:0 0 auto;width:48px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.depo-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.depo-info{flex:1;min-width:0}
.depo-name{font-size:14px;color:#fff}
.depo-sub{font-size:11px;color:#bcd2ff;margin-top:2px}
.depo-add{width:34px;height:34px;flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;font-size:18px;color:#fff;
  background:linear-gradient(180deg,#6ee02a,#3ea60c);display:flex;align-items:center;justify-content:center}
.depo-add:hover{filter:brightness(1.08)}
.depo-showall,.depo-history{width:100%;margin-top:10px;border:0;border-radius:10px;cursor:pointer;
  font-size:14px;padding:13px;color:#fff;background:rgba(255,255,255,.14)}
.depo-showall{background:linear-gradient(180deg,#3d86ec,#2764c9)}
.depo-showall:hover,.depo-history:hover{filter:brightness(1.1)}
.depo-hidden{display:none}
/* form bank transfer di dalam modal deposit */
.depo-back{background:rgba(255,255,255,.14);border:0;color:#fff;font-weight:800;font-size:13px;
  padding:8px 14px;border-radius:9px;cursor:pointer;margin-bottom:12px}
.depo-back:hover{background:rgba(255,255,255,.26)}
.depo-flabel{display:block;color:#fff;font-weight:800;font-size:13px;margin:12px 0 6px}
.depo-select,.depo-input{width:100%;background:#fff;border:1px solid #cdd8ee;border-radius:8px;
  padding:12px;font-size:13px;color:#0d1b3e;font-weight:600;outline:none;font-family:inherit}
.depo-select:focus,.depo-input:focus{box-shadow:inset 0 0 0 2px var(--gold);border-color:var(--gold)}
.depo-input::placeholder{color:#9aa7bd;font-weight:600}
.depo-note{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:12px 14px;color:#fff;font-weight:700;font-size:12px;line-height:1.5;margin-top:14px}
.depo-confirm{width:100%;margin-top:16px;background:linear-gradient(180deg,#63c6df,#3ba7c4);color:#fff;
  font-weight:800;font-size:15px;border:0;border-bottom:4px solid #2a8299;border-radius:10px;padding:13px;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
.depo-confirm:active{transform:translateY(2px)}
.depo-confirm:hover{filter:brightness(1.06)}
/* pilihan cepat jumlah deposit */
.depo-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 4px}
.depo-amt{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);color:#dfe9ff;
  font-weight:800;font-size:13px;padding:12px 6px;border-radius:12px;cursor:pointer;transition:.12s}
.depo-amt:hover{background:rgba(255,255,255,.14)}
.depo-amt.active{background:linear-gradient(180deg,#3d86ec,#2764c9);color:#fff;border-color:#6fa8ff}
/* qris hasil */
.qris-wrap{text-align:center;margin-top:8px}
.qris-img{width:220px;max-width:80%;aspect-ratio:1/1;margin:6px auto 14px;background:#fff;border-radius:12px;
  padding:10px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.qris-img svg{display:block;width:100%;height:100%}
.qris-timer{color:#fff;font-weight:700;font-size:14px}
.qris-timer b{color:var(--gold);font-size:18px;font-variant-numeric:tabular-nums}
.qris-amt{color:#fff;font-weight:700;font-size:14px;margin-top:6px}
.qris-amt b{color:#7dffa6;font-size:16px}
.qris-hint{color:#bcd2ff;font-size:11px;margin-top:12px;line-height:1.5}

/* ================= OVERLAY PENCARIAN ================= */
.search-overlay{position:fixed;left:0;right:0;bottom:0;top:120px;z-index:29;display:none;flex-direction:column;
  background:linear-gradient(180deg,#123f9c,#0a2354);padding:14px;overflow:hidden}
.search-overlay.show{display:flex;animation:searchFade .2s ease}
@keyframes searchFade{from{opacity:0}to{opacity:1}}
.search-overlay.show .search-bar{animation:searchDrop .28s ease}
@keyframes searchDrop{from{transform:translateY(-18px);opacity:0}to{transform:translateY(0);opacity:1}}
.search-bar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:0 6px 0 14px;
  max-width:640px;width:100%;margin:0 auto}
.search-ic{flex:0 0 auto;display:flex;align-items:center;color:#2764c9}
.search-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-bar input{flex:1;min-width:0;border:0;outline:none;padding:14px 8px;font-size:15px;color:#0d1b3e;font-weight:600;background:transparent;font-family:inherit}
.search-bar input::placeholder{color:#8aa0c0}
.search-close{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:9px;cursor:pointer;font-size:16px;
  background:#eef2fa;color:#2764c9}
.search-close:hover{background:#dde6f6}
.search-results{max-width:640px;width:100%;margin:12px auto 0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.sr-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:11px 14px;cursor:pointer;transition:.12s}
.sr-item:hover{background:rgba(255,255,255,.18)}
.sr-emoji{font-size:22px;flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);border-radius:8px}
.sr-logo{flex:0 0 46px;width:46px;height:24px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.sr-name{flex:1;color:#fff;font-weight:700;font-size:14px}
.sr-type{color:#bcd2ff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.sr-empty{color:#bcd2ff;text-align:center;padding:30px 10px;font-size:14px}

/* ================= PANEL PROFIL (drawer avatar) ================= */
.prof-overlay{position:fixed;inset:0;background:#000000aa;display:none;z-index:110;justify-content:flex-end}
.prof-overlay.show{display:flex}
.prof-panel{width:100%;max-width:340px;height:100%;overflow-y:auto;position:relative;
  background:linear-gradient(180deg,var(--surf-p1,#2f6fe0) 0%,var(--surf-p2,#14357f) 100%);padding:18px 16px 24px;
  box-shadow:-12px 0 40px rgba(0,0,0,.5);animation:profIn .25s ease}
@keyframes profIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.prof-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:15px}
.prof-x:hover{background:rgba(255,255,255,.28)}
/* header: avatar + nama + ID */
.prof-top{display:flex;align-items:center;gap:12px;padding:2px 2px 14px}
.prof-ava{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2)}
.prof-ava img{width:100%;height:100%;object-fit:cover;display:block}
.prof-name{font-weight:900;font-size:19px;color:#fff;line-height:1.1;word-break:break-all}
.prof-idrow{display:flex;align-items:center;gap:6px;color:#bcd2ff;font-size:13px;font-weight:700;margin-top:3px}
.prof-idrow b{color:#fff;font-weight:800}
.prof-copy{background:none;border:0;cursor:pointer;padding:2px;display:flex;color:#bcd2ff}
.prof-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prof-copy:hover{color:#fff}
/* saldo besar */
.prof-bal2{font-weight:900;font-size:26px;color:#fff;margin:2px 2px 14px}
/* tombol penarikan / deposit */
.prof-actions{display:flex;gap:12px;margin-bottom:16px}
.prof-act{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;cursor:pointer;
  padding:14px 8px;font-weight:800;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.prof-act .pa-ic{font-size:18px}
.pa-wd{background:linear-gradient(180deg,#c5f24a,#9bd42a);color:#20320a}
.pa-dep{background:linear-gradient(180deg,#c7cbf0,#a7add6);color:#22285a}
.prof-act:hover{filter:brightness(1.05)}
.prof-act:active{transform:translateY(1px)}
/* grid menu */
.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pg-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 6px 12px;cursor:pointer;transition:.12s}
.pg-item:hover{background:rgba(0,0,0,.42);transform:translateY(-2px)}
.pg-ic{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.pg-lbl{font-size:12px;font-weight:800;color:#eaf1ff;text-align:center;line-height:1.15}
/* logout */
.prof-logout{margin-top:16px;width:100%;background:linear-gradient(180deg,#e35b53,#c0392b);color:#fff;
  font-weight:800;font-size:14px;border:0;border-radius:10px;padding:13px;cursor:pointer}
.prof-logout:hover{filter:brightness(1.08)}
.prof-settings{margin-top:14px;width:100%;background:rgba(255,255,255,.12);color:#fff;
  font-weight:700;font-size:13.5px;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:12px;cursor:pointer}
.prof-settings:hover{background:rgba(255,255,255,.2)}

/* ================= SIDEBAR DRAWER ================= */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;
  transition:.25s;z-index:70}
.drawer-overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;height:100%;width:280px;max-width:82vw;z-index:80;
  background:linear-gradient(180deg,#173f8f,#0e2c66);
  box-shadow:6px 0 26px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .28s ease;
  display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid #ffffff22;font-weight:900;font-size:16px}
.drawer-close{background:none;border:0;color:#cfe0ff;font-size:18px;cursor:pointer}
.drawer-body{padding:12px}
/* folder pengelompokan menu */
.folder{margin-bottom:10px;border:1px solid #ffffff1f;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}
.folder-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:0;color:#fff;font-weight:900;font-size:14px;padding:14px;cursor:pointer}
.folder-head .fchev{transition:.25s;color:#9fbdf0}
.folder.open .folder-head .fchev{transform:rotate(90deg)}
.folder-body{display:none;padding:8px}
.folder.open .folder-body{display:block}
.folder-body .drawer-item{margin-top:8px}
.folder-body .drawer-item:first-child{margin-top:0}
.drawer-item{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.06);border:1px solid #ffffff1f;color:#fff;font-weight:700;font-size:14px;
  padding:14px;border-radius:12px;cursor:pointer;transition:.15s}
.drawer-item:hover{background:rgba(255,255,255,.12)}
.drawer-item .chev{transition:.25s;color:#9fbdf0}
.drawer-item.active .chev{transform:rotate(90deg)}
.theme-panel{max-height:0;overflow:hidden;transition:max-height .35s ease;margin-top:6px}
.theme-panel.open{max-height:calc(100vh - 150px);overflow-y:auto}
.theme-panel::-webkit-scrollbar{width:6px}
.theme-panel::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:6px}
.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid #ffffff14;border-radius:10px;
  padding:11px 14px;margin-top:10px;font-size:13px;font-weight:600;cursor:pointer}
.color-row input[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:30px;border:0;
  border-radius:8px;background:none;cursor:pointer;padding:0}
.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-row input[type=color]::-webkit-color-swatch{border:2px solid #ffffff55;border-radius:8px}
/* ===== preset swatches ===== */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.preset{border:2px solid #ffffff1f;border-radius:12px;overflow:hidden;cursor:pointer;padding:0;
  background:rgba(255,255,255,.05);transition:.15s;text-align:center}
.preset:hover{border-color:#ffffff55;transform:translateY(-2px)}
.preset.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,30,.35)}
.preset .sw{height:40px;display:block}
.preset .dots{display:flex;gap:5px;justify-content:center;padding:6px 0 4px}
.preset .dots i{width:11px;height:11px;border-radius:50%;display:block;border:1px solid #ffffff66}
.preset .pname{display:block;font-size:11px;font-weight:700;color:#fff;padding:2px 4px 8px}

.group-label{margin:16px 4px 2px;font-size:12px;font-weight:800;color:#9fbdf0;text-transform:uppercase;letter-spacing:.5px}

/* ===== upload gambar game ===== */
.rank-thumb.has-img .emoji{display:none}
.prov-chip.has-img .prov-name{opacity:0}
.prov-chip .prov-name{position:relative;z-index:1}
.img-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #ffffff14;
  border-radius:10px;margin-top:8px;background:rgba(255,255,255,.05)}
.img-thumb{width:36px;height:36px;flex:0 0 36px;border-radius:7px;border:1px solid #ffffff33;
  background:#ffffff1a center/cover no-repeat}
.img-name{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-up{background:rgba(87,200,26,.3);border:1px solid #57c81a;color:#fff;font-size:11px;font-weight:700;
  padding:6px 10px;border-radius:8px;cursor:pointer}
.img-up:hover{background:rgba(87,200,26,.5)}
.img-clear{background:rgba(255,80,90,.22);border:1px solid #ff505a;color:#fff;font-size:11px;
  padding:6px 9px;border-radius:8px;cursor:pointer}
.img-clear:hover{background:rgba(255,80,90,.4)}
.slide-cap{flex:1;min-width:0;background:#0e3c8f;border:1px solid #5a9bf5;border-radius:8px;
  color:#fff;font-size:12px;padding:6px 8px;outline:none}
.slide-cap:focus{border-color:var(--gold)}
/* kontrol WONDERPOT */
.wp-modes{display:flex;gap:6px;margin-top:8px}
.wp-modes button{flex:1;background:rgba(255,255,255,.06);border:1px solid #ffffff22;color:#fff;
  font-size:12px;font-weight:700;padding:8px;border-radius:9px;cursor:pointer}
.wp-modes button.active{background:#0e3c8f;border-color:var(--gold);color:var(--gold)}
.wp-in{background:#0e3c8f;border:1px solid #5a9bf5;border-radius:8px;color:#fff;font-size:12px;
  padding:6px 8px;outline:none;max-width:150px}
.wp-in:focus{border-color:var(--gold)}
.wp-textarea{width:100%;background:#0e3c8f;border:1px solid #5a9bf5;border-radius:10px;color:#fff;
  font-size:12px;padding:8px;outline:none;resize:vertical;margin-top:8px;font-family:inherit}
.wp-textarea:focus{border-color:var(--gold)}
.range-row{background:rgba(255,255,255,.05);border:1px solid #ffffff14;border-radius:10px;
  padding:11px 14px;margin-top:14px}
.range-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px}
.range-top b{color:var(--gold)}
.range-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:5px;
  background:rgba(255,255,255,.2);outline:none;cursor:pointer}
.range-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--green);cursor:pointer}
.range-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--green);cursor:pointer}
.reset-btn{width:100%;margin-top:12px;background:rgba(255,255,255,.08);border:1px solid #ffffff22;
  color:#fff;font-weight:700;font-size:13px;padding:11px;border-radius:10px;cursor:pointer}
.reset-btn:hover{background:rgba(255,255,255,.16)}

/* =================================================== */
/* ===============  DESKTOP MODE  ===================== */
/* =================================================== */
@media(min-width:860px){
  .app-banner{display:none}                 /* app banner hanya untuk mobile */
  .logo img{height:clamp(34px,3.4vw,44px)}   /* header ~50% lebih pendek */

  /* header jadi satu baris: logo | tabs | tombol */
  .head-inner{flex-direction:row;flex-wrap:nowrap;align-items:center;padding:5px 20px;gap:24px}
  .head-top{display:contents}
  .burger{order:0}
  .logo{order:1}
  .tabs3-wrap{order:2;width:auto;margin-top:0}
  .tabs3{width:auto}
  .tabs3-next{display:none!important}   /* desktop: semua tab muat, tak perlu tombol geser */
  .head-btns{order:3;margin-left:auto}
  .t3{padding:8px 13px;font-size:13.5px}
  .pill{padding:11px 22px;font-size:14px}

  /* hero besar */
  .hero{margin:10px 0 26px;--hero-h:clamp(320px,40vw,400px)}
  .hslides{border-radius:18px}
  .hdots{bottom:70px}
  .hero-caption{font-size:28px;margin:-4px 0 18px}
  .join-now{width:auto;min-width:340px;font-size:26px;padding:20px 70px}

  /* quick row: tombol terpusat 640px, background tetap full lebar layar */
  .quick-row{gap:14px;max-width:640px;margin-left:auto;margin-right:auto;background:transparent;padding:5px 14px}
  .quick-row::after{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;
    z-index:-1;pointer-events:none;
    background:var(--qr-bg,linear-gradient(180deg,#2a7de9 0%,#1f5fcf 45%,#123f9c 100%))}
  .qbtn{padding:9px 12px;font-size:14px}

  /* grid provider 6 kolom */
  .rank-thumb .emoji{font-size:64px}
  .rank-thumb .gname{font-size:12px}
  .block-head h2{font-size:22px}
  .prov-grid{grid-template-columns:repeat(6,1fr)}
}

@media(min-width:1240px){
  .hero{--hero-h:420px}
  .chars{font-size:180px}
}

/* ===== nav tabs di SEMUA HP/tablet (<860px): tampil ~3, sisanya digeser ===== */
@media(max-width:859px){
  .tabs3{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tabs3::-webkit-scrollbar{display:none}
  .tabs3 .t3{flex:0 0 31%;scroll-snap-align:start;font-size:13px;padding:13px 4px;gap:6px;-webkit-text-stroke-width:1px}
  .tabs3 .t3-ic{width:21px}
  .tabs3 .t3-svg{width:21px;height:21px}
  .tabs3.hint-scroll{-webkit-mask-image:linear-gradient(90deg,#000 87%,rgba(0,0,0,.2));
    mask-image:linear-gradient(90deg,#000 87%,rgba(0,0,0,.2))}
}

/* ===== layar sempit (≤400px) ===== */
@media(max-width:400px){
  .head-inner{padding:10px 10px}
  .head-top{gap:8px}
  .logo img{height:clamp(36px,11vw,48px)}
  .head-btns{gap:6px}
  .head-btns .pill{padding:8px 14px;font-size:12.5px}
  .tabs3 .t3{font-size:12.5px;padding:13px 3px}   /* layar sangat kecil */
  .quick-row{gap:8px}
  .qbtn{font-size:11px}
  .qbtn .qi-img{height:20px}
}

/* ================= HALAMAN SPORTSBOOK & LIVE ================= */
.page-overlay.sb-page,.page-overlay.lv-page{margin-top:0}
.sb-bar,.lv-bar{display:flex;gap:10px;margin:0 -14px 16px;padding:8px 14px;
  position:sticky;top:calc(var(--head-h,120px) - 1px);z-index:30;background:var(--surf-bar,rgb(28,51,126));
  overflow-x:auto;scrollbar-width:none}
.sb-bar::-webkit-scrollbar,.lv-bar::-webkit-scrollbar{display:none}
/* tombol kategori sb/lv memakai style .qbtn (sama dgn tg/lc) */
.sb-bar .qbtn,.lv-bar .qbtn{flex:1;padding:10px 12px;white-space:nowrap}

/* Sportsbook - kartu pertandingan */
.sb-list{display:flex;flex-direction:column;gap:10px}
.sb-match{background:linear-gradient(180deg,var(--surf-card1,#1a3f8a),var(--surf-card2,#12275e));
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
.sb-league{font-size:11.5px;color:#a9c0ea;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.sb-livedot{width:7px;height:7px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 6px #ff4d4f;animation:sbBlink 1s infinite}
@keyframes sbBlink{50%{opacity:.35}}
.sb-teams{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.sb-team{display:flex;justify-content:space-between;font-weight:800;font-size:14px;color:#fff}
.sb-team .sb-sc{color:var(--tab-ac,#ffd21e)}
.sb-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sb-odd{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 4px;cursor:pointer;color:#cfe0ff;font-weight:700;transition:.15s}
.sb-odd span{font-size:11px;opacity:.7}
.sb-odd b{font-size:15px;color:#fff}
.sb-odd:hover{background:var(--tab-ah,rgba(255,255,255,.14));border-color:var(--tab-ac,#ffd21e)}
.sb-odd:hover b{color:var(--tab-ac,#ffd21e)}
body.theme-light .sb-team,body.theme-light .sb-odd b{color:#12275e}
body.theme-light .sb-league{color:#5a74a8}
body.theme-light .sb-odd{color:#3a4d7a;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}

/* Live - grid kartu streaming */
.lv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lv-card{background:linear-gradient(180deg,var(--surf-card1,#1a3f8a),var(--surf-card2,#12275e));
  border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s}
.lv-card:hover{transform:translateY(-2px);filter:brightness(1.05)}
.lv-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--btn-c1,#4a90ff),var(--btn-c2,#2064d8))}
.lv-badge{position:absolute;top:7px;left:7px;background:#ff2f3a;color:#fff;font-size:10px;font-weight:800;
  padding:3px 8px 3px 6px;border-radius:6px;display:flex;align-items:center;gap:5px}
.lv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:sbBlink 1s infinite}
.lv-views{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;
  padding:3px 7px;border-radius:6px}
.lv-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}
.lv-title{font-weight:800;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-host{font-size:11px;color:#a9c0ea}
body.theme-light .lv-title{color:#12275e}
body.theme-light .lv-host{color:#5a74a8}
@media(max-width:639px){.sb-bar .qbtn,.lv-bar .qbtn{flex:0 0 auto}}   /* HP: tombol kategori bisa digeser */
@media(min-width:640px){.lv-grid{grid-template-columns:repeat(4,1fr)}}