: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{background:linear-gradient(90deg,#1a1500,#2a2200 40%,#1a1500);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:20;width:100%;flex-shrink:0;border-bottom:2px solid var(--y);box-shadow:0 4px 20px rgba(0,0,0,.5)}
.header-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:var(--y);text-shadow:0 0 12px rgba(245,197,24,.4)}
.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:var(--y2);color:#111;font-weight:800;box-shadow:0 0 12px rgba(245,197,24,.35)}
.hb-daftar:hover{background:#ffe566;transform:translateY(-1px)}
.hb-chat{background:transparent;color:var(--y);border:1.5px solid var(--y)}
.hb-chat:hover{background:var(--y);color:#111}
.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-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{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}
.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:1.5px solid rgba(230,194,0,.55);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}
.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:2px solid #e6c200;cursor:pointer;transition:.25s;position:relative;box-shadow:0 0 10px rgba(245,197,24,.2)}
.gcard:hover{border-color:#ffe566;transform:translateY(-4px);box-shadow:0 0 22px rgba(255,229,102,.45),0 8px 24px rgba(0,0,0,.4)}
.gcard.hide{display:none}
.gprov-logo{position:absolute;top:5px;left:5px;z-index:3;width:22px;height:22px;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.55);border:1px solid rgba(219,179,0,.45);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.gprov-logo img{width:100%;height:100%;object-fit:cover;display:block}
.gprov-logo-ph{color:var(--y);font-size:10px}
.gbadge{position:absolute;top:5px;right: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}
.gbadge.viral{background:#9c27b0;color:#fff}
.gimg{position:relative;aspect-ratio:1;background:var(--elev);overflow:hidden}
.gimg>img.gimg-real,.gimg>img:not([src*="loading.svg"]){width:100%;height:100%;object-fit:cover;transition:.4s;display:block;position:relative;z-index:1;opacity:1!important}
.gcard:hover .gimg>img.gimg-real{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}
.gimg-load{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;background:var(--elev);pointer-events:none}
.gimg-load img{width:36px;height:36px;object-fit:contain}
.gimg-load.hide{display:none!important}
.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:#f5c518;color:#111}
.gbtn-pola:hover{background:#ffd54f;filter:none}
.gbtn-suntik{background:#dbb300;color:#111;border:1px solid rgba(0,0,0,.1)}
.gbtn-suntik:hover{background:#f0c420;filter:none}
.gbtn-sim{background:#e6c200;color:#111}
.gbtn-sim:hover{background:#ffd54f;filter:none}
.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:#2a2a35;color:var(--y);border:1px solid var(--bd)}
.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)}
.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)}}
@media(max-width:360px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.bnav{display:none}body{padding-bottom:0}}
.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 var(--bd);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,#1a1500,#3d3000);padding:12px 16px;text-align:center;position:relative;border-radius:16px 16px 0 0}
.fx-head h2{font-size:13px;font-weight:800;color:var(--y);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 var(--y);margin:0 auto 10px;display:block;box-shadow:0 0 20px var(--yg)}
.fx-img-ph{width:110px;height:110px;border-radius:14px;background:#1a1a24;border:2px solid var(--y);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:var(--y);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}
.fx-btn-p{background:linear-gradient(90deg,var(--y),var(--y2));color:#111}
.fx-btn-p:hover{box-shadow:0 4px 20px var(--yg);transform:translateY(-1px)}
.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:var(--y)}
.fx-label{display:block;text-align:left;font-size:12px;color:#aaa;margin-top:8px;font-weight:600}
.fx-list{text-align:left;font-size:11px;color:#aaa;margin:12px 0;line-height:1.9}
.fx-list i{color:var(--y);width:16px;margin-right:4px}
.fx-scan{width:70px;height:70px;border:3px solid #333;border-top-color:var(--y);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:var(--y);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}
.fx-err{color:#e53935;font-size:11px;margin-top:4px;display:none}
.fx-err.on{display:block}
.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}
.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}
.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;opacity:.45}
.fx-mult button.on{opacity:1;background:rgba(245,197,24,.15)}
.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}
.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-badge{display:inline-block;background:#ff8f00;color:#111;font-size:10px;font-weight:800;padding:3px 10px;border-radius:5px;margin-bottom:10px}