@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');
:root{--bg:#0e0e10;--panel:#151518;--panel2:#1c1c20;--line:#26262c;--text:#ececee;--muted:#8b8b95;--gold:#e5c46b;--gold-dim:#5a4a22;--green:#6fd39a;--red:#f07a7a;--blue:#7fb3ff;--r:14px}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;font:15px/1.55 Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}button{font:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid var(--line)}
.brand{font:700 18px 'Space Grotesk';letter-spacing:.02em;text-decoration:none;display:flex;gap:10px;align-items:center}
.brand i{width:10px;height:10px;background:var(--gold);border-radius:2px;display:inline-block;transform:rotate(45deg)}
.brand small{color:var(--muted);font:500 12px Inter;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.user img{width:28px;height:28px;border-radius:50%;background:var(--panel2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;text-decoration:none;font-weight:500;transition:.15s}
.btn:hover{border-color:#3a3a42}.btn.primary{background:var(--gold);color:#141208;border-color:var(--gold);font-weight:600}.btn.primary:hover{background:#f0d27f}
.btn.sm{height:34px;padding:0 12px;font-size:13px}.btn.ghost{background:transparent}.btn.danger{color:var(--red)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
main{padding:44px 0 80px}
.hero h1{font:700 clamp(30px,5vw,46px)/1.08 'Space Grotesk';margin:0 0 12px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:var(--muted);max-width:560px;margin:0 0 26px;font-size:16px}
.grid{display:grid;grid-template-columns:1.25fr .9fr;gap:22px;margin-top:34px}@media(max-width:760px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h2{font:700 15px 'Space Grotesk';letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
input[type=text],input[type=number],textarea{width:100%;height:44px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:0 14px;font:inherit}
textarea{height:auto;padding:10px 14px}
.row{display:flex;gap:10px}.row>*{flex:1}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps .dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:600 11px 'JetBrains Mono';color:var(--muted);margin-top:2px}
.steps li.ok .dot{background:var(--green);border-color:var(--green);color:#0b1a11}
.steps li.no .dot{background:var(--red);border-color:var(--red);color:#1a0b0b}
.steps li.wait .dot{border-color:var(--gold);color:var(--gold)}
.steps b{display:block;font-weight:600}.steps span{color:var(--muted);font-size:13px}
.pill{font:600 11px/1 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--green);border-color:#25402f}.pill.no{color:var(--red);border-color:#4a2626}.pill.wait{color:var(--gold);border-color:var(--gold-dim)}.pill.info{color:var(--blue);border-color:#27364d}
.ident{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-top:12px}
.ident img{width:44px;height:44px;border-radius:50%;background:var(--panel2)}
.ident b{display:block}.ident span{color:var(--muted);font-size:13px}
.amount{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}@media(max-width:480px){.amount{grid-template-columns:repeat(3,1fr)}}
.amount button{height:42px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;font:600 14px 'JetBrains Mono'}
.amount button.on{border-color:var(--gold);color:var(--gold);background:#1a1810}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px dashed var(--line);margin-top:6px}
.total .n{font:700 26px 'Space Grotesk'}.total small{color:var(--muted);font-size:12px}
.msg{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}.msg.err{color:var(--red);border-color:#4a2626}.msg.ok{color:var(--green);border-color:#25402f}
.notice{border:1px solid var(--gold-dim);background:#1a1810;color:var(--gold);padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:22px}
.hidden{display:none!important}
/* struk pesanan */
.receipt{max-width:440px;margin:0 auto;background:#f6f4ee;color:#151515;border-radius:6px;padding:28px 26px 32px;position:relative;box-shadow:0 30px 60px -30px #000}
.receipt:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle,transparent 6px,#f6f4ee 6.5px) 0 0/22px 20px repeat-x;transform:scaleY(-1)}
.receipt .code{font:600 22px/1 'JetBrains Mono';letter-spacing:.06em;margin:4px 0 16px;word-break:break-all}
.receipt .kv{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed #cfcbc0}
.receipt .kv b{font-weight:600}.receipt .qr{display:block;margin:18px auto 8px;width:260px;height:260px;border-radius:8px}
.receipt .status{font:600 12px 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase}
.receipt .big{font:700 30px 'Space Grotesk';margin:14px 0 4px}
.timer{font:600 13px 'JetBrains Mono';color:#7a6a2b}
.center{text-align:center}.mt{margin-top:18px}.muted{color:var(--muted)}.mono{font-family:'JetBrains Mono'}
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:500;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabs button{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:13px}.tabs button.on{color:var(--text);border-color:var(--gold);background:#1a1810}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}.stats .card{padding:16px}.stats .v{font:700 24px 'Space Grotesk'}.stats .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
footer{color:var(--muted);font-size:12px;padding:20px 0;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){.card,.receipt{animation:in .4s ease both}@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}

.stockbar{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);margin-bottom:6px;font-size:14px}
.stockbar b{font:700 20px 'Space Grotesk';color:var(--green)}.stockbar.empty b{color:var(--red)}
/* topbar */
header.top{gap:22px;height:64px}header.top .nav{gap:4px}header.top .nav a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted)}header.top .nav a:hover{background:var(--panel);color:var(--text)}
.acct{position:relative;margin-left:auto}.acct-btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font:500 13px Inter}
.acct-btn:hover{border-color:#3a3a42}.acct-btn img{width:32px;height:32px;border-radius:50%;background:var(--panel2)}
.acct-menu{position:absolute;right:0;top:48px;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;z-index:20;box-shadow:0 24px 50px -20px #000}
.acct-menu.open{display:block}.acct-menu a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;font-size:14px}.acct-menu a:hover{background:var(--panel2)}
.acct-head{display:flex;gap:10px;align-items:center;padding:8px 10px 10px}.acct-head img{width:36px;height:36px;border-radius:50%;background:var(--panel2)}.acct-head b{display:block;font-size:14px}.acct-head span{color:var(--muted);font-size:12px}
.acct-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
@media(max-width:640px){.acct-btn span{display:none}.acct-btn{padding-right:4px}}
/* admin */
.adm{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}@media(max-width:760px){.adm{grid-template-columns:1fr}}
.adm-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}.adm-nav button{text-align:left;height:42px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font:500 14px Inter;display:flex;justify-content:space-between;align-items:center}
.adm-nav button.on{background:var(--panel);border-color:var(--line);color:var(--text)}.adm-nav button .badge{font:600 11px 'JetBrains Mono';background:var(--gold);color:#141208;border-radius:999px;padding:2px 7px}
@media(max-width:760px){.adm-nav{flex-direction:row;overflow:auto;position:static}.adm-nav button{white-space:nowrap}}
.todo{display:grid;gap:8px}.todo div{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.todo .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px 'JetBrains Mono';flex:0 0 auto;border:1px solid var(--line)}
.todo .ok .dot{background:var(--green);border-color:var(--green);color:#0b1a11}.todo .no .dot{background:var(--red);border-color:var(--red);color:#1a0b0b}
.todo b{display:block}.todo span{color:var(--muted);font-size:13px}.todo a{color:var(--gold)}
.help{font-size:13px;color:var(--muted);margin:-6px 0 14px}
.field{display:grid;gap:6px}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
select.in{height:44px;width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit}
.pane{display:none}.pane.on{display:block}

/* admin: daftar game */
.glist{display:grid;gap:8px}.grow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.grow.dim{opacity:.6}.grow img,.grow .ph{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--panel2);flex:0 0 auto;display:grid;place-items:center;font:700 14px 'Space Grotesk';color:var(--gold)}
.grow .gmeta{flex:1;min-width:0}.grow .gmeta a{text-decoration:none}.grow .gmeta b{display:block}.grow .gmeta span{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch{position:relative;width:44px;height:26px;flex:0 0 auto;margin:0}.switch input{opacity:0;width:0;height:0}.switch i{position:absolute;inset:0;border-radius:999px;background:#2a2a32;transition:.15s}.switch i:before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+i{background:var(--green)}.switch input:checked+i:before{transform:translateX(18px)}
.edit-grid{display:grid;grid-template-columns:220px 1fr;gap:20px}@media(max-width:700px){.edit-grid{grid-template-columns:1fr}}
.imgbox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.imgbox img{width:160px;height:160px;border-radius:14px;object-fit:cover;background:var(--panel2);border:1px solid var(--line)}

/* daftar pesanan */
.olist{display:grid;gap:8px}.orow{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;transition:.15s}
.orow:hover{border-color:#3a3a42}.orow .oc,.orow .op,.orow .os{display:flex;flex-direction:column;gap:3px;min-width:0}.orow .os{align-items:flex-end}.orow span,.orow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.orow .muted{font-size:12px}
@media(max-width:640px){.orow{grid-template-columns:1fr auto}.orow .oc{grid-column:1/-1;flex-direction:row;justify-content:space-between}}

/* admin: tema web */
body.landing .adm-nav button.on{background:var(--panel);border-color:var(--line)}
body.landing .stats .card{padding:14px 16px;background:var(--panel)}
.vipcard{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 22px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.vipcard .k{display:block;font:600 11px 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.vipcard .v{display:block;font:700 34px 'Space Grotesk';margin:4px 0 2px;color:var(--gold)}.vipcard .muted{font-size:12px}
.vipcard.low{border-color:#4a2626;background:#1c1214}.vipcard.low .v{color:var(--red)}
.vipside{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chk{display:flex;gap:8px;align-items:center;color:var(--text);font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin:0}
/* ===== pengaman lebar layar (HP) ===== */
html,body{max-width:100%;overflow-x:hidden}
.wrap{max-width:960px;width:100%}
img,svg,video{max-width:100%;height:auto}
.row>*,.fields>*,.grid>*,.grid2>*,.hero2>*,.steps li>*,.ident>*,.orow>*,.sum>div>*{min-width:0}
input,select,textarea{max-width:100%}
table{max-width:100%}
@media(max-width:640px){
 body{font-size:14px}
 .wrap{padding:0 14px}
 .pill{white-space:normal;text-align:center;line-height:1.3}
 .ident{flex-wrap:wrap;gap:10px}.ident>div{flex:1;min-width:120px}.ident .pill{margin-left:0!important;width:100%}
 .ident b,.ident span{overflow:hidden;text-overflow:ellipsis}
 .steps li{grid-template-columns:22px 1fr;gap:8px 10px}.steps li .pill{grid-column:2;justify-self:start;width:auto}
 .steps b{font-size:14px}.steps span{font-size:12px}
 .custom-row{flex-direction:column;align-items:stretch}.custom-row input{max-width:none}
 .total{flex-wrap:wrap;gap:8px}.total .n{font-size:20px}
 .card h2{font-size:13px}
 .msg{font-size:13px}
 .notice{font-size:13px}
 .receipt{padding:20px 16px 26px}.receipt .code{font-size:18px}.receipt .qr{width:min(260px,100%);height:auto}
 .btn{max-width:100%}
}
.snbox{margin-top:16px;padding:14px;border:2px dashed #8a7a3a;border-radius:10px;background:#fffbe8;text-align:left}
.snbox span{display:block;font:600 11px 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase;color:#7a6a2b;margin-bottom:6px}
.snbox code{display:block;font:600 18px/1.4 'JetBrains Mono';word-break:break-all;color:#151515;margin-bottom:10px;user-select:all}
.imgbox img{max-width:100%;width:auto;height:150px;aspect-ratio:auto}

.brand img{height:40px;width:auto;display:block}
@media(max-width:640px){.brand img{height:32px}}
.bottomnav span svg{stroke:currentColor}

header.top{display:flex;align-items:center;gap:22px}header.top .brand{margin-right:6px}header.top .nav{display:flex;gap:4px}
header.top .user{margin-left:auto}
@media(max-width:640px){header.top{height:56px;gap:10px}header.top .nav{display:none}}
header.top .nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:8px;font-size:14px}header.top .nav a:hover{color:var(--text);background:var(--panel)}

/* ===== admin di HP ===== */
@media(max-width:760px){
 .adm{display:block}
 .adm-nav{position:sticky;top:0;z-index:15;flex-direction:row;gap:6px;overflow-x:auto;padding:8px 0 10px;margin:0 -14px 12px;padding-left:14px;padding-right:14px;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
 .adm-nav::-webkit-scrollbar{display:none}
 .adm-nav button{flex:0 0 auto;height:38px;padding:0 12px;font-size:13px;border:1px solid var(--line);background:var(--panel)}
 .adm-nav button.on{background:#fff;color:#0a0a0a;border-color:#fff}
 .stats{grid-template-columns:repeat(2,1fr);gap:8px}.stats .card{padding:12px}.stats .v{font-size:18px}.stats .k{font-size:10px}
 .card{padding:14px}.card h2{font-size:12px}
 .vipcard{padding:14px}.vipcard .v{font-size:26px}.vipside{width:100%}.vipside .btn{flex:1;justify-content:center}
 .todo div{padding:10px}
 .fields{grid-template-columns:1fr;gap:10px}.field label{font-size:12px}
 .tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:0 0 auto}
 table{font-size:12px;min-width:640px}th,td{padding:8px 6px}
 .card>div[style*="overflow:auto"]{margin:0 -14px;padding:0 14px}
 .grow{flex-wrap:wrap;padding:10px}.grow .gmeta{flex:1 1 60%}.grow .switch{margin-left:auto}
 .edit-grid{grid-template-columns:1fr}.imgbox img{height:120px}
 .btn.sm{height:36px}
 textarea{font-size:14px}
 .row{flex-direction:column}.row>*{width:100%}.row .btn{width:100%;justify-content:center}
 .chk{font-size:13px}
 main{padding-top:14px}
}