: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:10}
.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 - swipeable */
.banner-wrap{position:relative;width:100%;overflow:hidden;background:#111}
.banner-track{display:flex;transition:transform .4s ease;touch-action:pan-y}
.banner-slide{min-width:100%;flex-shrink:0}
.banner-slide img{width:100%;display:block;max-height:220px;object-fit:cover}
.banner-ph{height:130px;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:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.banner-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.banner-dots span.on{background:var(--y);width:18px;border-radius:4px}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);border:none;color:#fff;cursor:pointer;z-index:2;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:6px}
.banner-arrow.next{right:6px}

/* 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}

/* 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){
  .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-slide img{max-height:160px}
}
@media(max-width:360px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.bnav{display:none} body{padding-bottom:0}}