:root{--y:#dbb300;--y2:#f5c518;--yg:rgba(219,179,0,.35);--bg:#0a0a0f;--card:#14141c;--elev:#1a1a24;--bd:rgba(219,179,0,.18);--tx:#eee;--mu:#888;--hi:#00c853;--md:#ff9800;--lo:#e53935;--r:10px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--tx);font-size:13px;line-height:1.4;min-height:100vh;padding-bottom:60px}
body.has-bg{background-size:cover;background-position:center;background-attachment:fixed}
a{text-decoration:none;color:inherit}

/* HEADER - like screenshot, not covering banner */
.header{background:linear-gradient(90deg,var(--y),var(--y2));padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:20;width:100%;flex-shrink:0}
.header-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:#111}
.header-logo img{height:32px;border-radius:4px}
.header-acts{display:flex;gap:6px;align-items:center}
.hb{padding:7px 16px;border-radius:8px;font-weight:700;font-size:11px;display:inline-flex;align-items:center;gap:5px;transition:.2s;border:none;cursor:pointer}
.hb-daftar{background:#111;color:var(--y)}
.hb-daftar:hover{opacity:.9;transform:translateY(-1px)}
.hb-chat{background:rgba(0,0,0,.15);color:#111;border:1.5px solid #111}
.hb-chat:hover{background:#111;color:var(--y)}

/* BANNER CAROUSEL - full image, never under header */
.banner-wrap{position:relative;width:100%;max-width:960px;margin:0 auto;overflow:hidden;background:#0a0a0f;padding:0;z-index:1;border-radius:0 0 10px 10px}
.banner-track{display:flex;transition:transform .4s ease;touch-action:pan-y;align-items:flex-start}
.banner-slide{min-width:100%;width:100%;flex-shrink:0;line-height:0;margin:0;padding:0}
.banner-slide img{width:100%;height:auto;display:block;object-fit:contain;vertical-align:top}
.banner-ph{aspect-ratio:16/9;width:100%;background:linear-gradient(135deg,#1a1500,#2a2000);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--y);text-shadow:0 0 20px var(--yg);min-width:100%}
.banner-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:3}
.banner-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.banner-dots span.on{background:var(--y);width:18px;border-radius:4px}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.2s}
.banner-arrow:hover{background:var(--y);color:#111}
.banner-arrow.prev{left:8px}
.banner-arrow.next{right:8px}

/* SEARCH */
.search-bar{padding:10px;max-width:960px;margin:0 auto}
.search-box{display:flex;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:0 12px;gap:8px}
.search-box i{color:var(--y);font-size:14px}
.search-box input{flex:1;background:none;border:none;color:var(--tx);padding:10px 0;font-size:13px;outline:none}
.search-box input::placeholder{color:var(--mu)}

/* WRAP */
.wrap{max-width:960px;margin:0 auto;padding:0 10px 12px}

.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;margin-top:12px}
.sec-t{font-size:13px;font-weight:800;color:var(--y);text-transform:uppercase;letter-spacing:.5px}
.sec-s{font-size:11px;color:var(--mu)}
.upd{font-size:10px;color:var(--mu);margin-bottom:8px}

/* PROVIDERS */
.prov-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--y) var(--card);-webkit-overflow-scrolling:touch}
.prov-row::-webkit-scrollbar{height:3px}
.prov-row::-webkit-scrollbar-thumb{background:var(--y);border-radius:2px}
.prov{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);min-width:72px;transition:.2s;cursor:pointer}
.prov:hover,.prov.on{border-color:var(--y);transform:translateY(-3px);box-shadow:0 6px 16px var(--yg)}
.prov img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.prov-ic{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--y),var(--y2));display:flex;align-items:center;justify-content:center}
.prov-ic i{font-size:14px;color:#111}
.prov span{font-size:9px;font-weight:600;text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* GAMES */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:4px}
.gcard{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid transparent;cursor:pointer;transition:.25s;position:relative}
.gcard:hover{border-color:var(--y);transform:translateY(-4px);box-shadow:0 8px 24px var(--yg)}
.gcard.hide{display:none}
.gbadge{position:absolute;top:5px;left:5px;z-index:2;font-size:8px;font-weight:800;padding:2px 6px;border-radius:3px;text-transform:uppercase}
.gbadge.new{background:#e53935;color:#fff}
.gbadge.hot{background:var(--y);color:#111}
.gimg{aspect-ratio:1;background:var(--elev);overflow:hidden}
.gimg img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gcard:hover .gimg img{transform:scale(1.08)}
.gimg-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--y);opacity:.4;font-size:28px}
.gbody{padding:6px 8px 8px}
.gpct{font-size:14px;font-weight:800}
.gpct.hi{color:var(--hi)}.gpct.md{color:var(--md)}.gpct.lo{color:var(--lo)}
.gbar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin:3px 0 5px;overflow:hidden}
.gbar-f{height:100%;border-radius:2px}
.gbar-f.hi{background:linear-gradient(90deg,#00a844,var(--hi))}
.gbar-f.md{background:linear-gradient(90deg,#e68900,var(--md))}
.gbar-f.lo{background:linear-gradient(90deg,#c62828,var(--lo))}
.gname{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.gtime{font-size:9px;color:var(--mu)}

.gtime i{margin-right:3px;font-size:9px}
.gbtns{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.gbtn{display:block;width:100%;padding:5px 4px;border:none;border-radius:5px;font-size:8px;font-weight:800;cursor:pointer;text-align:center;text-transform:uppercase;letter-spacing:.3px;transition:.2s;line-height:1.2}
.gbtn-pola{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn-pola:hover{filter:brightness(1.15)}
.gbtn-suntik{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn-suntik:hover{filter:brightness(1.15)}
.gbtn-sim{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn-sim:hover{filter:brightness(1.15)}

/* SUNTIKAN MODAL */
.sx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:12px;opacity:0;visibility:hidden;transition:.25s}
.sx-overlay.on{opacity:1;visibility:visible}
.sx-box{background:#12121a;border-radius:16px;width:100%;max-width:380px;max-height:92vh;overflow-y:auto;border:1px solid rgba(106,27,154,.4);box-shadow:0 20px 60px rgba(0,0,0,.7);transform:scale(.92);transition:.3s}
.sx-overlay.on .sx-box{transform:scale(1)}
.sx-head{background:linear-gradient(135deg,#4a148c,#f5c518);padding:12px 16px;text-align:center;position:relative;border-radius:16px 16px 0 0}
.sx-head h2{font-size:13px;font-weight:800;color:#fff;letter-spacing:1px}
.sx-x{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.1);border:none;width:26px;height:26px;border-radius:50%;color:#fff;cursor:pointer;font-size:14px}
.sx-body{padding:20px 16px;text-align:center}
.sx-img{width:110px;height:110px;border-radius:14px;object-fit:cover;border:2px solid #9c27b0;margin:0 auto 10px;display:block;box-shadow:0 0 20px rgba(156,39,176,.3)}
.sx-img-ph{width:110px;height:110px;border-radius:14px;background:#1a1a24;border:2px solid #9c27b0;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:#9c27b0;font-size:36px}
.sx-name{font-size:14px;font-weight:700;margin-bottom:4px}
.sx-prov{font-size:11px;color:#888;margin-bottom:12px}
.sx-desc{font-size:12px;color:#ccc;margin-bottom:8px}
.sx-desc strong{color:var(--y)}
.sx-list{text-align:left;font-size:11px;color:#aaa;margin:12px 0;line-height:1.8}
.sx-list i{color:#9c27b0;margin-right:6px;width:14px}
.sx-btn{display:block;width:100%;padding:12px;border:none;border-radius:25px;font-weight:800;font-size:13px;cursor:pointer;text-align:center;transition:.2s;margin-top:8px}
.sx-btn-main{background:linear-gradient(90deg,#9c27b0,#e91e63);color:#fff}
.sx-btn-main:hover{box-shadow:0 4px 20px rgba(156,39,176,.4);transform:translateY(-1px)}
.sx-btn-act{background:linear-gradient(90deg,#e91e63,#9c27b0);color:#fff}
.sx-user{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #333;background:#1a1a24;color:#fff;font-size:13px;margin:10px 0;outline:none}
.sx-user:focus{border-color:#9c27b0}
.sx-user::placeholder{color:#666}
.sx-badge{display:inline-block;background:#ff8f00;color:#111;font-size:10px;font-weight:800;padding:3px 10px;border-radius:5px;margin-bottom:10px}
.sx-mult{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.sx-mult button{background:none;border:none;color:#f5c518;font-weight:800;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:.15s;opacity:.5}
.sx-mult button.on{opacity:1;background:rgba(245,197,24,.15);text-shadow:0 0 8px rgba(245,197,24,.5)}
.sx-toggles{margin:12px 0}
.sx-tog{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;color:#ccc}
.sx-sw{display:flex;border-radius:6px;overflow:hidden;border:1px solid #333}
.sx-sw span{padding:5px 12px;font-size:10px;font-weight:800;cursor:pointer;transition:.15s}
.sx-sw .off{background:#fff;color:#333}
.sx-sw .on-btn{background:#333;color:#888}
.sx-sw.active .off{background:#333;color:#888}
.sx-sw.active .on-btn{background:#c62828;color:#fff}
.sx-loading{padding:40px 20px;text-align:center}
.sx-scan{width:80px;height:80px;border:3px solid #333;border-top-color:#9c27b0;border-radius:50%;margin:0 auto 16px;animation:sxspin .8s linear infinite}
@keyframes sxspin{to{transform:rotate(360deg)}}
.sx-scan-text{font-size:12px;color:#9c27b0;font-weight:600;min-height:20px}
.sx-success{padding:30px 20px;text-align:center}
.sx-check{width:50px;height:50px;border-radius:50%;background:#00c853;display:flex;align-items:center;justify-content:center;margin:12px auto;font-size:24px;color:#fff;animation:sxpop .4s ease}
@keyframes sxpop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}


/* MODAL */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;visibility:hidden;transition:.25s;padding:10px}
.moverlay.on{opacity:1;visibility:visible}
.mbox{background:#12121a;border-radius:14px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border:1px solid var(--bd);box-shadow:0 20px 50px rgba(0,0,0,.6);transform:scale(.92);transition:.3s}
.moverlay.on .mbox{transform:scale(1)}
.mhead{background:linear-gradient(135deg,#1a1500,#221c00);padding:10px 14px;text-align:center;position:relative;border-bottom:1px solid var(--bd)}
.mhead h2{font-size:13px;font-weight:800;color:var(--y);letter-spacing:1px}
.mhead .mdt{font-size:10px;color:var(--mu);margin-top:1px}
.mx{position:absolute;top:8px;right:10px;background:rgba(255,255,255,.08);border:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mu);font-size:14px}
.mx:hover{background:var(--lo);color:#fff}
.mbody{display:grid;grid-template-columns:1fr 1fr}
.msteps{padding:10px;border-right:1px solid rgba(255,255,255,.06)}
.step{background:var(--elev);border-radius:8px;padding:8px 10px;margin-bottom:6px;border-left:2.5px solid var(--y)}
.step-top{display:flex;justify-content:space-between;margin-bottom:2px}
.step-l{font-size:10px;font-weight:700;color:var(--y)}
.step-tt{font-size:10px;color:#bbb}
.step-s{font-size:12px;font-weight:800;color:var(--y)}
.step-d{font-size:9px;color:var(--mu)}
.minfo{padding:10px;display:flex;flex-direction:column;align-items:center}
.mimg{width:100px;height:100px;border-radius:10px;object-fit:cover;border:2px solid var(--y);margin-bottom:6px}
.mimg-ph{width:100px;height:100px;border-radius:10px;background:var(--elev);border:2px solid var(--y);display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:var(--y);opacity:.4;font-size:36px}
.mname{font-size:12px;font-weight:700;text-align:center;margin-bottom:8px}
.mtbl{width:100%;border-collapse:collapse;font-size:10px;margin-bottom:8px}
.mtbl td{padding:4px 8px;border:1px solid var(--bd)}
.mtbl td:first-child{color:var(--mu);background:rgba(219,179,0,.05);font-weight:600;width:38%}
.mtbl td:last-child{color:var(--y);font-weight:700}
.mnote{font-size:9px;color:var(--mu);text-align:center;line-height:1.35;margin-bottom:8px}
.macts{display:flex;gap:6px;width:100%}
.mbtn{flex:1;padding:9px;border-radius:20px;font-weight:700;font-size:11px;border:none;cursor:pointer;text-align:center;transition:.2s}
.mbtn-p{background:linear-gradient(135deg,var(--y),var(--y2));color:#111}
.mbtn-p:hover{box-shadow:0 4px 16px var(--yg)}
.mbtn-c{background:#4a148c;color:#fff}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--card);border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-around;z-index:100;padding:0 4px}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mu);font-size:9px;font-weight:600;padding:6px 8px;transition:.2s;min-width:56px}
.bnav a i{font-size:18px}
.bnav a:hover,.bnav a.on{color:var(--y)}

/* FOOTER */
.foot{text-align:center;padding:14px;font-size:10px;color:var(--mu);border-top:1px solid var(--bd);margin-top:8px}

@media(max-width:500px){
  .banner-wrap{max-width:100%;border-radius:0}
  .ggrid{grid-template-columns:repeat(3,1fr);gap:6px}
  .mbody{grid-template-columns:1fr}
  .msteps{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  /* banner full height on mobile too */
}
@media(max-width:360px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.bnav{display:none} body{padding-bottom:0}}

/* Game action buttons */
.gbtns{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.gbtn{display:block;width:100%;padding:5px 4px;border:none;border-radius:5px;font-size:8px;font-weight:800;cursor:pointer;text-align:center;text-transform:uppercase;letter-spacing:.3px;transition:.2s;line-height:1.2}
.gbtn-pola{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn-suntik{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn-sim{background:linear-gradient(135deg,#f5c518,#dbb300);color:#fff}
.gbtn:hover{filter:brightness(1.15);transform:translateY(-1px)}

/* Shared feature modal */
.fx{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:12px;opacity:0;visibility:hidden;transition:.25s}
.fx.on{opacity:1;visibility:visible}
.fx-box{background:#12121a;border-radius:16px;width:100%;max-width:380px;max-height:92vh;overflow-y:auto;border:1px solid rgba(106,27,154,.35);box-shadow:0 20px 60px rgba(0,0,0,.7);transform:scale(.92);transition:.3s}
.fx.on .fx-box{transform:scale(1)}
.fx-head{background:linear-gradient(135deg,#4a148c,#f5c518);padding:12px 16px;text-align:center;position:relative;border-radius:16px 16px 0 0}
.fx-head h2{font-size:13px;font-weight:800;color:#fff;letter-spacing:1px}
.fx-x{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.12);border:none;width:26px;height:26px;border-radius:50%;color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.fx-body{padding:20px 16px;text-align:center}
.fx-img{width:110px;height:110px;border-radius:14px;object-fit:cover;border:2px solid #9c27b0;margin:0 auto 10px;display:block;box-shadow:0 0 20px rgba(156,39,176,.3)}
.fx-img-ph{width:110px;height:110px;border-radius:14px;background:#1a1a24;border:2px solid #9c27b0;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:#9c27b0;font-size:36px}
.fx-name{font-size:14px;font-weight:700;margin-bottom:4px;color:#fff}
.fx-prov{font-size:11px;color:#888;margin-bottom:12px}
.fx-btn{display:block;width:100%;padding:12px;border:none;border-radius:25px;font-weight:800;font-size:13px;cursor:pointer;text-align:center;transition:.2s;margin-top:10px;color:#fff}
.fx-btn-p{background:linear-gradient(90deg,#9c27b0,#e91e63)}
.fx-btn-p:hover{box-shadow:0 4px 20px rgba(156,39,176,.45);transform:translateY(-1px)}
.fx-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.fx-inp{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #333;background:#1a1a24;color:#fff;font-size:13px;margin:6px 0 12px;outline:none}
.fx-inp:focus{border-color:#9c27b0}
.fx-inp::placeholder{color:#666}
.fx-label{display:block;text-align:left;font-size:12px;color:#aaa;margin-top:8px;font-weight:600}
.fx-badge{display:inline-block;background:#ff8f00;color:#111;font-size:10px;font-weight:800;padding:3px 10px;border-radius:5px;margin-bottom:10px}
.fx-mult{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 14px}
.fx-mult button{background:none;border:none;color:#f5c518;font-weight:800;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:.15s;opacity:.45}
.fx-mult button.on{opacity:1;background:rgba(245,197,24,.15);text-shadow:0 0 8px rgba(245,197,24,.5)}
.fx-tog{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;color:#ccc}
.fx-sw{display:flex;border-radius:6px;overflow:hidden;border:1px solid #444}
.fx-sw span{padding:5px 12px;font-size:10px;font-weight:800;cursor:pointer;user-select:none}
.fx-sw .off{background:#fff;color:#333}
.fx-sw .onb{background:#333;color:#888}
.fx-sw.active .off{background:#333;color:#888}
.fx-sw.active .onb{background:#c62828;color:#fff}
.fx-list{text-align:left;font-size:11px;color:#aaa;margin:12px 0;line-height:1.9}
.fx-list i{color:#9c27b0;width:16px;margin-right:4px}
.fx-scan{width:70px;height:70px;border:3px solid #333;border-top-color:#9c27b0;border-radius:50%;margin:20px auto 14px;animation:fxspin .7s linear infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}
.fx-scan-t{font-size:12px;color:#9c27b0;font-weight:600;min-height:18px}
.fx-check{width:48px;height:48px;border-radius:50%;background:#00c853;display:flex;align-items:center;justify-content:center;margin:12px auto;font-size:22px;color:#fff;animation:fxpop .4s ease}
@keyframes fxpop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.fx-err{color:#e53935;font-size:11px;margin-top:4px;display:none}
.fx-result{text-align:left;margin-top:14px;font-size:12px;color:#ccc;line-height:1.8}
.fx-result b{color:var(--y)}
.fx-bars{display:flex;justify-content:center;align-items:flex-end;gap:18px;height:120px;margin:16px 0 8px;padding:0 10px}
.fx-bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.fx-bar{width:48px;border-radius:6px 6px 0 0;transition:height .6s ease;min-height:4px}
.fx-bar-l{font-size:9px;color:#888;text-align:center}
.fx-note{font-size:9px;color:#666;text-align:left;margin-top:8px;line-height:1.4}
.fx-step{display:none}
.fx-step.on{display:block}