:root{--bg:#0b1426;--s1:#111d36;--s2:#16264a;--line:rgba(124,170,255,.16);--tx:#eaf1ff;--mut:#8fa3c7;--blue:#2f7bff;--ice:#7cc4ff;--gold:#ffc23d;--green:#3ddc97;--red:#ff6b7a;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--tx);font:400 15px/1.5 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;background:var(--bg)}
body.scene{padding-bottom:64px}
h1,h2,h3,h4,.logo,.brand,.tid,.stbig span,.tcol b,.tot b,.st b{font-family:Rubik,system-ui,sans-serif}
h1{font-size:clamp(23px,5.5vw,32px);margin:0 0 6px;font-weight:800;line-height:1.15}
.wrap{max-width:940px;margin:0 auto;padding:0 16px}
.sub{color:var(--mut);text-align:center;margin:0 auto 18px;max-width:32em}
a{color:#8fbcff}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* header */
.top{position:sticky;top:0;z-index:35;padding-top:env(safe-area-inset-top);background:#0b1426;border-bottom:2px solid #1b2c52}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:58px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap;min-width:0}
.logo svg{width:34px;height:34px;flex:none}
.logo span b{color:var(--ice);margin-left:5px;font-weight:800}
.tb{display:flex;gap:6px;flex:none}
.mbtn{width:38px;height:38px;border-radius:9px;border:2px solid #22345e;background:#111d36;color:var(--tx);display:grid;place-items:center;cursor:pointer;padding:0}
.mbtn svg{width:19px;height:19px}.mbtn[hidden]{display:none}
#sndBtn .i-on{display:none}#sndBtn.on .i-on{display:block}#sndBtn.on .i-off{display:none}
#sndBtn.on{color:var(--green);border-color:rgba(61,220,151,.5)}
.menu{display:none;position:absolute;right:16px;top:calc(52px + env(safe-area-inset-top));z-index:40;min-width:180px;padding:6px;border-radius:14px;background:#0d1d42;border:1px solid var(--line);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.menu.on{display:flex;flex-direction:column}
.menu a{color:var(--tx);text-decoration:none;padding:10px 12px;border-radius:10px;font-weight:500;font-size:14px}.menu a:hover{background:rgba(124,170,255,.1)}.menu a[hidden]{display:none}.menu a.own{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:#8db4ff}

/* pengumuman berjalan */
.ann2{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:8px 12px;border-radius:9px;background:#13203d;border:2px solid #22345e;overflow:hidden;color:#cfe2ff;font-size:13px;font-weight:500}
.mq{overflow:hidden;flex:1;min-width:0}
.mqi{display:inline-block;white-space:nowrap;animation:mq 28s linear infinite;padding-left:100%}.mqi p{margin:0}
@keyframes mq{to{transform:translateX(-100%)}}

/* hero: pemandangan Growtopia di atas, panel tanah di bawah */
.hero{margin-top:12px;border-radius:12px;border:2px solid #1b2c52;overflow:hidden;text-align:center;background:#57403a}
.hscene{position:relative;overflow:hidden;height:240px;background:#4cc6e4;border-bottom:3px solid #3d2c1c;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sc{position:absolute;bottom:0;left:60%;height:100%;aspect-ratio:1440/710;transform:translateX(-60%)}
.sc img{position:absolute;image-rendering:pixelated;-webkit-user-drag:none;user-select:none;pointer-events:none}
.sc .bg{inset:0;width:100%;height:100%}
.sc .cl{animation:drift var(--t,18s) ease-in-out infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(var(--d,12px),0,0)}}
.sc .twk{animation:twk 2.6s steps(1,end) infinite}
@keyframes twk{0%,60%{opacity:1}61%,80%{opacity:.1}81%,100%{opacity:1}}
.hscene.off *{animation-play-state:paused}
.pp{position:absolute;z-index:3;pointer-events:none;animation:pop .65s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes pop{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--dx),var(--dy),0) scale(.3);opacity:0}}
.hcopy>*{animation:up .5s ease-out both}.hcopy>:nth-child(2){animation-delay:.07s}.hcopy>:nth-child(3){animation-delay:.14s}.hcopy>:nth-child(4){animation-delay:.21s}
@keyframes up{from{opacity:0;transform:translate3d(0,10px,0)}}
.rv{opacity:0;transform:translate3d(0,14px,0);transition:opacity .45s ease-out,transform .45s ease-out}.rv.in{opacity:1;transform:none}
.mrow,.pcard .act{transition:transform .1s}.mrow:active{transform:scale(.98)}
.hcopy{padding:18px 18px 22px;background:linear-gradient(rgba(33,22,14,.62),rgba(33,22,14,.72)),url(../img/dirt.jpg) center top/auto 220px;image-rendering:pixelated}
.hero h1{margin:12px auto 8px;font-size:clamp(25px,7vw,38px);max-width:14em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.hero .sub{margin-bottom:16px;color:#e6d9c9}
.stat{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;border-radius:6px;font-size:12.5px;font-weight:500;background:rgba(0,0,0,.4);color:#f2e9de}
.stat i{width:8px;height:8px;border-radius:2px;background:#9a8b7a}
.stat.open i{background:var(--green)}.stat.shut i{background:var(--red)}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(min-width:720px){.hscene{height:330px}.sc{left:0;width:100%;height:auto;transform:none}.hcopy{padding:26px 36px 32px;text-align:left}.hero .sub{margin-left:0;text-align:left}.hero h1{margin-left:0}.cta{justify-content:flex-start}}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 18px;border:0;border-radius:9px;background:#2f6df0;color:#fff;font:600 14px Rubik,sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 #1c4296;transition:transform .08s,box-shadow .08s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:none}
.btn.ghost{background:#1a2a4d;box-shadow:0 3px 0 #0e1a33}
.btn.big{height:46px;padding:0 22px;font-size:15px}.hero .btn.ghost{background:rgba(0,0,0,.45);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.form .btn.big{width:100%;margin-top:12px}.row .btn.big,.form .row .btn.big{width:auto;margin-top:0}

/* judul bagian */
.sh{margin:26px 0 10px;font-size:17px;font-weight:600;color:#fff}
.thead{text-align:center;margin:26px 0 14px}
.thead h1{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;font-size:clamp(23px,6vw,30px)}
.thead h1 svg{width:28px;height:28px}
.notice{max-width:760px;margin:0 auto 14px;padding:10px 14px;border-radius:14px;background:rgba(255,194,61,.08);border:1px solid rgba(255,194,61,.28);color:#f1dba0;font-size:13px}
.closed{background:rgba(255,107,122,.1);border:1px solid rgba(255,107,122,.4);color:#ffb3bb;border-radius:14px;padding:10px 14px;margin:12px 0 0;font-size:13.5px}

/* kartu produk: gaya 2 kolom, scene Growtopia, harga Sell | Buy berdampingan */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:760px;margin:0 auto;align-items:stretch}
.pcard{--ac:var(--ice);display:flex;flex-direction:column;gap:8px;padding:12px 8px 10px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--ac) 50%,transparent);background:linear-gradient(180deg,#0d2050,#07112a);box-shadow:0 12px 28px rgba(0,0,0,.38);animation:fi .35s ease both}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
.pcard h3{margin:0;min-height:2.4em;display:grid;place-items:center;text-align:center;font-size:clamp(13px,3.9vw,17px);font-weight:700;line-height:1.2;padding:0 2px}
.mn{text-align:center;font-size:11px;color:var(--mut);margin-top:-4px}
.stage{position:relative;display:grid;place-items:center;height:132px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(6,14,36,.25),rgba(6,14,36,.55)),url(../img/scene.jpg) 58% 100%/auto 100% no-repeat #2b8fb0;image-rendering:pixelated}
.stage svg{width:84px;height:auto;image-rendering:auto;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ac) 75%,transparent)) drop-shadow(0 6px 6px rgba(0,0,0,.5));animation:fl 4s ease-in-out infinite}
.prices{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:104px;padding:8px 2px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);background:rgba(6,12,28,.55)}
.pc{text-align:center;padding:0 2px;min-width:0}.pc+.pc{border-left:1px solid var(--line)}
.pc span{display:block;font-size:10px;color:var(--mut);font-weight:600;letter-spacing:.3px}
.pc b{display:block;font:800 clamp(14px,4.2vw,18px) Rubik,sans-serif;white-space:nowrap;margin:1px 0}
.pc em{display:block;font:500 11px ui-monospace,Menlo,monospace;color:var(--mut);font-style:normal}
.pc .lks{justify-content:center;flex-wrap:nowrap;white-space:nowrap;font-size:10.5px;gap:2px;margin-top:2px}.pc .lkc{width:11px;height:11px;margin-left:1px}.pc .amp{font-size:10px}
.sp{color:var(--gold)}.bp{color:var(--ice)}
.lks{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:#cbd8f5}
.lkc{width:12px;height:12px;margin-left:2px}.amp{color:var(--mut);font-weight:400;font-size:11px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;border-radius:11px;font:700 13px Rubik,sans-serif;letter-spacing:.4px;text-decoration:none;border:1.5px solid;transition:background .15s,transform .1s}
.act svg{width:15px;height:15px;flex:none}
.act.sell{border-color:var(--gold);color:var(--gold);background:rgba(255,194,61,.08)}.act.sell:hover{background:rgba(255,194,61,.2)}
.act.buy{border-color:var(--blue);color:#8fbcff;background:rgba(47,123,255,.1)}.act.buy:hover{background:rgba(47,123,255,.26)}
.act:active{transform:scale(.97)}

/* ringkasan harga di beranda */
.mini{display:grid;gap:8px}
.mrow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;padding:12px 14px;border-radius:10px;background:var(--s1);border:2px solid #1b2c52;color:var(--tx);text-decoration:none;font-size:13px}
.mrow i{width:12px;height:12px;border-radius:3px;display:block}
.mrow b{font-size:15px;font-weight:600}
.mp{grid-column:1/-1;display:flex;gap:6px 24px;flex-wrap:wrap;padding-left:22px;color:var(--mut)}
.mp em{font-style:normal;font-weight:600}

/* kelebihan & cara kerja */
.plain{margin:0;padding:14px 16px;list-style:none;display:grid;gap:10px;background:var(--s1);border:2px solid #1b2c52;border-radius:10px;color:var(--mut);font-size:14px}
.plain b{color:var(--tx);font-weight:600}
.how{margin:0;padding:0;list-style:none;counter-reset:s;border:2px solid #1b2c52;border-radius:10px;background:var(--s1);overflow:hidden}
.how li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;column-gap:12px;padding:12px 14px;border-top:2px solid #1b2c52}
.how li:first-child{border-top:0}
.how li::before{content:counter(s);grid-row:1/3;font-weight:700;color:var(--gold);font-size:18px;line-height:1.2}
.how b{font-weight:600;font-size:14.5px}.how span{color:var(--mut);font-size:13.5px}

/* tabel + kalkulator */
.tw{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:rgba(10,22,51,.8)}
.ptbl{width:100%;border-collapse:collapse;font-size:13px}
.ptbl th,.ptbl td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--line)}
.ptbl th{color:var(--mut);font-size:12px;font-weight:600}.ptbl tr:last-child td{border-bottom:0}.ptbl td.sp,.ptbl td.bp{font-weight:800}
.calc{background:rgba(10,22,51,.8);border:1px solid var(--line);border-radius:18px;padding:4px 16px 16px}
.cres{display:grid;gap:8px;margin-top:12px}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.crow>span{flex:1 1 100%;color:var(--mut);font-size:13px}.crow>b{font-size:19px}
.crow small{color:var(--mut);display:inline-flex;align-items:center;gap:3px}.crow small.err{color:#ffb3bb}
.crow .btn{margin-left:auto;height:36px;padding:0 16px}
.note{color:var(--mut);font-size:13px;margin-top:8px}.note.c{text-align:center;margin:14px 0 6px}
.err{color:var(--red)}
.sk{height:44px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:sk 1.3s linear infinite}
.sk.tall{height:330px;border-radius:22px}
@keyframes sk{to{background-position:-200% 0}}

/* form */
label{display:block;font-size:12.5px;color:var(--mut);margin:12px 0 5px}
input,textarea,select{width:100%;background:rgba(124,170,255,.07);border:1px solid var(--line);color:var(--tx);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px}
input:focus,textarea:focus,select:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(47,123,255,.25)}
select option{color:#111}
.glass,.form{background:rgba(10,22,51,.86);border:1px solid var(--line);border-radius:20px}
.form{max-width:540px;margin:14px auto 40px;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.form h2{margin:0 0 10px;font-size:20px}.form h3{margin:14px 0 8px;font-size:15px}.form h3 small{font-weight:400;color:var(--mut);font-size:12px}
em{color:var(--red);font-style:normal}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.dots{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 2px}
.dots b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--s2);color:var(--mut)}.dots b.on{background:var(--blue);color:#fff}
.dots u{width:60px;height:2px;background:var(--line);border-radius:2px}
.it{--ac:var(--ice);display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;background:rgba(124,170,255,.05);cursor:pointer;transition:border-color .15s,background .15s}
.it.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.ck{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.it.on .ck{background:var(--ac);border-color:var(--ac)}.it.on .ck::after{content:"✓";color:#06122c;font-weight:800;font-size:12px}
.ib{flex:1;min-width:0}.ib b{display:block;font-size:15px}.ib small{color:var(--mut);font-size:12px}.pr{color:var(--ice);font-weight:700}
.gm svg{width:40px;height:40px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.qt{display:flex;gap:6px;margin-top:8px}
.qt button{width:32px;height:32px;border-radius:10px;border:0;background:rgba(124,170,255,.14);color:var(--tx);font-size:18px;line-height:1;cursor:pointer;padding:0}
.qt input{width:56px;text-align:center;padding:5px}
.tot,.sumbox{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin:10px 0;font-size:14px}
.tot span{display:block;color:var(--mut);font-size:12px;font-weight:600}.tot b{font-size:24px;color:var(--ice)}
.sum{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin-bottom:4px}.sum.tt b{font-size:19px;color:var(--ice)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(124,170,255,.05);color:var(--tx);font:600 14px Rubik,sans-serif;cursor:pointer}
.seg button.on{border-color:var(--blue);background:rgba(47,123,255,.2);color:#9cc4ff}
.okc{width:54px;height:54px;border-radius:50%;background:var(--green);color:#04281a;font-size:28px;font-weight:800;display:grid;place-items:center;margin:6px auto 8px}
.tid{font-weight:800;font-size:clamp(18px,6vw,24px);text-align:center;letter-spacing:1.5px;background:rgba(0,0,0,.3);border:1.5px dashed var(--gold);color:var(--gold);border-radius:14px;padding:12px;margin:10px 0;word-break:break-all}
.qr{text-align:center}.qr img{width:210px;max-width:100%;border-radius:14px;background:#fff;padding:10px;margin-top:10px}
.srch{display:flex;gap:8px}
.srch input{flex:1;font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;text-transform:uppercase}.srch input::placeholder{text-transform:none;letter-spacing:0}
.sbtn{width:44px;height:44px;padding:0}.sbtn svg{width:20px;height:20px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.form .chips{justify-content:center}
.chip{border:1px solid var(--line);background:rgba(124,170,255,.07);color:var(--tx);border-radius:999px;padding:6px 13px;font:600 13px Rubik,sans-serif;text-transform:capitalize;cursor:pointer}.chip.on{background:var(--blue);border-color:var(--blue)}
.stbig{text-align:center;border-radius:16px;padding:14px;margin:12px 0;background:rgba(255,194,61,.13);color:var(--gold)}
.stbig span{display:block;font-size:22px;font-weight:800;letter-spacing:.5px}.stbig small{color:var(--mut)}
.stbig.dibayar,.stbig.diterima{background:rgba(47,123,255,.18);color:#9cc4ff}.stbig.selesai{background:rgba(61,220,151,.15);color:var(--green)}.stbig.batal{background:rgba(255,107,122,.14);color:var(--red)}
.prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 12px}.prog div{text-align:center;font-size:12px;color:var(--mut)}
.prog i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--s2);margin:0 auto 6px;font-style:normal;font-weight:800}
.prog .on{color:var(--tx)}.prog .on i{background:var(--blue);color:#fff}
.tl{border-left:2px solid var(--line);padding-left:12px;font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:8px;margin-top:10px}.tl b{color:var(--tx);font-weight:600}

/* footer + nav bawah + chat */
footer{text-align:center;color:var(--mut);font-size:13px;line-height:1.9;padding:28px 16px 130px;margin-top:34px;border-top:1px solid var(--line)}
footer b{color:var(--tx);letter-spacing:1px}
.bn{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;padding:5px 6px calc(5px + env(safe-area-inset-bottom));background:#0b1426;border-top:2px solid #1b2c52}
.bn a,.bn button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;color:var(--mut);font:600 11px Rubik,sans-serif;text-decoration:none;cursor:pointer;padding:0}
.bn .ic{display:grid;place-items:center;padding:3px 16px;border-radius:12px;transition:background .2s}.bn svg{width:20px;height:20px}
.bn .on{color:#9cc4ff}.bn .on .ic{background:#1d3566}
.chb{position:fixed;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:60;width:46px;height:46px;border-radius:50%;border:0;background:var(--blue);display:grid;place-items:center;box-shadow:0 3px 0 #1c4296;cursor:pointer;padding:0}
.chb svg{width:21px;height:21px}
.chb i{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:10px;background:#ef4444;color:#fff;font:700 11px/19px Rubik,sans-serif;text-align:center;font-style:normal}
.chp{position:fixed;right:14px;bottom:calc(126px + env(safe-area-inset-bottom));z-index:61;width:min(340px,calc(100vw - 28px));height:min(420px,calc(100vh - 210px));display:flex;flex-direction:column;background:#0a1633;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.6);overflow:hidden}.chp[hidden]{display:none}
.chh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0d1d42;font-weight:700;font-size:14px}.chh button{background:none;border:0;color:var(--mut);font-size:16px;cursor:pointer}
.chm,.cmsgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.mb{max-width:82%;padding:8px 11px;border-radius:14px;font-size:14px;line-height:1.35;word-break:break-word}.mb small{display:block;font-size:10px;opacity:.6;margin-top:2px}
.mb.b{align-self:flex-end;background:var(--blue);border-bottom-right-radius:4px}.mb.o{align-self:flex-start;background:#18274d;border-bottom-left-radius:4px}
.adm .mb.b{align-self:flex-start;background:#18274d;border-radius:14px 14px 14px 4px}.adm .mb.o{align-self:flex-end;background:var(--blue);border-radius:14px 14px 4px 14px}
.chf{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.chf input{flex:1;padding:8px 12px}.chf .btn{height:38px;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* admin */
nav.glass{display:flex;align-items:center;justify-content:space-between;margin:14px 0;padding:8px 10px 8px 18px;border-radius:999px}
.brand{font-weight:800;font-size:17px}.brand span{color:var(--ice)}
.links{display:flex;gap:6px}.links .btn{height:36px;padding:0 14px}
.login{max-width:380px;margin:50px auto;padding:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.st{padding:12px 14px}.st span{display:block;color:var(--mut);font-size:12px;font-weight:600}.st b{font-size:clamp(18px,4vw,23px);font-weight:800}
.tools{display:flex;flex-direction:column;gap:8px}.tools .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.tools .chip{flex:none}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin:16px 0 20px}@media(max-width:780px){.cols{grid-template-columns:1fr}}
.panel{padding:18px}.panel h2{margin:0 0 10px;font-size:18px}
.ord{padding:14px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.ord:first-of-type{border-top:0}
.log{font-size:13px;color:var(--mut);padding:8px 0;border-top:1px solid var(--line)}.log b{color:var(--tx)}
.empty{color:var(--mut)}
.pill2{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,194,61,.16);color:var(--gold)}
.pill2.dibayar,.pill2.diterima{background:rgba(47,123,255,.2);color:#9cc4ff}.pill2.selesai{background:rgba(61,220,151,.15);color:var(--green)}.pill2.batal{background:rgba(255,107,122,.16);color:var(--red)}
.tp{font-size:12px;font-weight:800;padding:2px 9px;border-radius:8px;background:rgba(47,123,255,.2);color:#9cc4ff}.tp.sell{background:rgba(255,194,61,.16);color:var(--gold)}
.cwrap{display:grid;grid-template-columns:200px 1fr;gap:12px}@media(max-width:640px){.cwrap{grid-template-columns:1fr}}
#cl{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.cv{text-align:left;background:rgba(124,170,255,.06);border:1px solid var(--line);color:var(--tx);border-radius:12px;padding:8px 10px;cursor:pointer;position:relative;font:inherit;font-size:14px}.cv.on{border-color:var(--blue)}
.cv small{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv i{position:absolute;right:8px;top:8px;background:#ef4444;border-radius:9px;padding:0 6px;font-size:11px;font-style:normal}
#ct{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;height:340px}#ct[hidden]{display:none}

@media(prefers-reduced-motion:reduce){.mqi{animation:none;padding:0 12px;white-space:normal}.stage svg,.pcard,.sk,.sc .cl,.sc .twk,.hcopy>*{animation:none}.rv{opacity:1;transform:none;transition:none}}

/* layar sambutan: kartu di tengah, latar scene diburamkan */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;overflow:hidden;background:#0b1426;transition:opacity .3s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash::before{content:"";position:absolute;inset:-24px;background:linear-gradient(rgba(8,14,30,.45),rgba(8,14,30,.6)),url(../img/scene.jpg) 60% 100%/cover;filter:blur(9px);transform:translateZ(0)}
.splash.out{opacity:0;pointer-events:none}
.sp-card{position:relative;width:100%;max-width:400px;padding:26px 22px 24px;border-radius:28px;background:#1a1c25;border:1px solid rgba(255,255,255,.08);text-align:center;color:#fff;animation:spin .35s ease-out both}
@keyframes spin{from{opacity:0;transform:scale(.94)}}
.sp-t{margin:8px 0 12px;font-size:24px;font-weight:500;color:#5b9dff}
.sp-card p{margin:0 0 16px;font-size:15.5px;line-height:1.55;color:#e9edf6}
.sp-card .sp-r{margin-bottom:14px}
.sp-card em{color:#5b9dff;font-style:normal}
.sp-b{display:block;width:100%;max-width:250px;margin:0 auto;padding:14px 0;border-radius:999px;background:linear-gradient(180deg,#4a8dff,#2f6df0);font-weight:500;font-size:18px;box-shadow:0 4px 0 #1c4296}
.sp-card:active .sp-b{transform:translateY(3px);box-shadow:none}
@media(prefers-reduced-motion:reduce){.sp-card{animation:none}}

.pe{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:8px;align-items:end;margin-bottom:10px}.pe b{grid-column:1/-1}.pe label{font-size:12px;margin:0}.pe input{width:100%;min-width:0}@media(max-width:560px){.pe{grid-template-columns:1fr 1fr}}

/* ============================================================
   TEMA PIXEL GROWTOPIA
   Blok kotak, garis tebal, bayangan keras (tanpa blur / kaca / gradien halus).
   Warna: tanah cokelat, langit biru, rumput hijau, emas.
   ============================================================ */
:root{--bg:#2a1c12;--s1:#4b3322;--s2:#5e4230;--line:#1a100a;--tx:#fbf1dc;--mut:#d6bd9b;--blue:#2f9fe0;--ice:#8fdcff;--gold:#ffd23f;--green:#69cf3a;--red:#ff6a5c;--ink:#1a100a;--wood:#6b4a2f;--wood2:#8a6340;--px:#0d0805;--hd:"Pixelify Sans",Rubik,system-ui,sans-serif}
body{font-family:Rubik,system-ui,sans-serif;background-color:#2a1c12;background-image:conic-gradient(#33231a 25%,#2a1c12 0 50%,#33231a 0 75%,#2a1c12 0);background-size:32px 32px}
h1,h2,h3,h4,.logo,.brand,.tid,.stbig span,.tcol b,.tot b,.st b,.sh,.btn,.act,.chip,.menu a,.bn a,.bn button,.pc b,.sp-t,.sp-b,.chh,.seg button{font-family:var(--hd);font-weight:600;letter-spacing:.2px}
h1,.hero h1{text-shadow:3px 3px 0 var(--ink);font-weight:700}
a{color:var(--ice)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* kotak dasar: garis tebal + bayangan keras */
.glass,.form,.calc,.tw,.plain,.how,.mrow,.pcard,.notice,.closed,.ann2,.it,.tot,.sumbox,.crow,.stbig,.chp,.menu,.hero,.sp-card,#ct,.cv{border-radius:0;border:4px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),4px 4px 0 var(--px);backdrop-filter:none;-webkit-backdrop-filter:none}
.glass,.form,.calc,.tw,.plain,.how,.mrow,.crow,.it,.tot,.sumbox,.cv{background:var(--s1)}

/* header & menu */
.top{background:var(--wood);border-bottom:4px solid var(--ink);box-shadow:0 4px 0 var(--px)}
.logo{color:#fff;text-shadow:2px 2px 0 var(--ink);font-size:19px}.logo span b{color:var(--gold)}
.mbtn{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28),0 3px 0 var(--px)}
.mbtn:active{transform:translateY(3px);box-shadow:inset 0 -4px 0 rgba(0,0,0,.28)}
#sndBtn.on{background:var(--green);color:var(--ink);border-color:var(--ink)}
.menu{background:var(--wood);padding:6px;top:calc(56px + env(safe-area-inset-top));min-width:200px}
.menu a{border-radius:0;color:#fff;font-size:15px;padding:11px 12px;border-bottom:3px solid rgba(0,0,0,.25)}
.menu a:hover{background:var(--wood2)}
.menu a.own{margin-top:6px;border:3px solid var(--ink);border-radius:0;background:var(--gold);color:var(--ink);text-align:center}
.menu a.own:hover{background:#ffe27a}

/* pengumuman, banner */
.ann2{background:var(--ink);color:var(--gold);font-family:var(--hd);font-size:14px}
.ann2 svg{stroke:var(--gold)}
.hero{background:var(--wood);overflow:hidden}
.hscene{border-bottom:4px solid var(--ink)}
.hcopy{background:linear-gradient(rgba(26,16,10,.6),rgba(26,16,10,.7)),url(../img/dirt.jpg) center top/auto 220px}
.stat{border-radius:0;border:3px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--hd)}
.stat i{border-radius:0}
.notice{background:#fff3c4;color:#4b3322;font-weight:500}
.closed{background:#ffb3a8;color:#5a1208;font-weight:500}

/* tombol blok */
.btn{height:44px;border-radius:0;border:3px solid var(--ink);background:var(--green);color:var(--ink);font-size:15px;text-shadow:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.35),0 4px 0 var(--px)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.35)}
.btn.ghost,.hero .btn.ghost{background:var(--wood2);color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.28),inset 0 3px 0 rgba(255,255,255,.2),0 4px 0 var(--px)}
.btn.big{height:50px}

/* judul bagian */
.sh{display:inline-block;margin:28px 0 12px;padding:5px 12px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--px);font-size:17px}
.thead h1{text-shadow:3px 3px 0 var(--ink)}

/* kartu produk */
.pcard{background:var(--wood);border-color:var(--ink);animation:none}
.pcard h3{color:#fff;text-shadow:2px 2px 0 var(--ink);font-size:clamp(14px,4vw,18px)}
.mn{color:var(--gold);font-family:var(--hd)}
.stage{border-radius:0;border:3px solid var(--ink);background:url(../img/scene.jpg) 58% 100%/auto 100% no-repeat #4cc6e4;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.stage svg{filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45));animation:fl 4s steps(6,end) infinite}
.prices{border-radius:0;border:3px solid var(--ink);background:var(--ink)}
.pc+.pc{border-left:3px solid #3a2718}
.pc span{color:var(--mut);font-family:var(--hd);font-weight:600}
.sp{color:var(--gold)}.bp{color:var(--ice)}
.pc em{color:var(--mut)}
.act{border-radius:0;border:3px solid var(--ink);height:42px;font-size:15px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 3px 0 var(--px)}
.act.sell{background:var(--gold);color:var(--ink)}.act.sell:hover{background:#ffe27a}
.act.buy{background:var(--blue);color:#fff}.act.buy:hover{background:#52b6f0}
.act:active{transform:translateY(3px);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}

/* beranda: ringkasan, kelebihan, cara kerja */
.mrow{color:var(--tx)}.mrow i{border-radius:0;border:2px solid var(--ink)}
.mrow b{font-family:var(--hd);font-size:17px}
.plain{color:var(--mut)}.plain b{color:var(--gold)}
.how{background:var(--s1)}.how li{border-top:3px solid var(--ink)}.how li:first-child{border-top:0}
.how li::before{font-family:var(--hd);color:var(--ink);background:var(--gold);width:26px;height:26px;display:grid;place-items:center;font-size:15px;border:2px solid var(--ink);line-height:1}
.how b{color:#fff;font-family:var(--hd);font-size:16px}

/* tabel + kalkulator */
.ptbl th,.ptbl td{border-bottom:3px solid var(--ink)}.ptbl th{color:var(--gold);font-family:var(--hd);font-size:13px;background:var(--wood)}
.calc{padding:4px 16px 16px}
.crow{background:var(--ink);box-shadow:none;border-width:3px}
.sk{border-radius:0;background:linear-gradient(90deg,#4b3322,#6b4a2f,#4b3322);background-size:200% 100%}
.sk.tall{border-radius:0}

/* form */
label{color:var(--mut);font-family:var(--hd);font-size:13.5px}
input,textarea,select{border-radius:0;border:3px solid var(--ink);background:#fff7e6;color:#2a1c12;box-shadow:inset 3px 3px 0 rgba(0,0,0,.14)}
input::placeholder,textarea::placeholder{color:#9b8566}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:inset 3px 3px 0 rgba(0,0,0,.14),0 0 0 3px var(--gold)}
.form{background:var(--wood)}.form h2,.form h3{color:#fff;text-shadow:2px 2px 0 var(--ink)}.form h3 small{color:var(--mut);text-shadow:none}
em{color:#ff9a8f}
.dots b{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;font-family:var(--hd)}.dots b.on{background:var(--gold);color:var(--ink)}
.dots u{height:4px;background:var(--ink);border-radius:0}
.it.on{background:#6f5a2a;border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--ac),4px 4px 0 var(--px)}
.ck{border-radius:0;border:3px solid var(--ink);background:#fff7e6}.it.on .ck{background:var(--green);border-color:var(--ink)}
.ib b{color:#fff;font-family:var(--hd)}.pr{color:var(--gold)}
.gm svg{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
.qt button{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;font-family:var(--hd)}
.tot,.sumbox{background:var(--ink);box-shadow:none;border-width:3px}
.tot b,.sum.tt b{color:var(--gold)}
.seg button{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.seg button.on{background:var(--gold);color:var(--ink)}
.okc{border-radius:0;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--px)}
.tid{border-radius:0;background:var(--ink);border:3px dashed var(--gold)}
.qr img{border-radius:0;border:4px solid var(--ink)}
.chip{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;box-shadow:0 3px 0 var(--px);font-size:13px}.chip.on{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.stbig{background:var(--gold);color:var(--ink)}.stbig small{color:#4b3322}
.stbig.dibayar,.stbig.diterima{background:var(--blue);color:#fff}.stbig.selesai{background:var(--green);color:var(--ink)}.stbig.batal{background:var(--red);color:var(--ink)}
.prog i{border-radius:0;border:3px solid var(--ink);background:var(--wood2);color:#fff;font-family:var(--hd)}.prog .on i{background:var(--green);color:var(--ink)}
.tl{border-left:4px solid var(--ink)}

/* footer, nav bawah, chat */
footer{border-top:4px solid var(--ink);background:var(--ink);color:var(--mut)}footer b{color:var(--gold);font-family:var(--hd)}
.bn{background:var(--wood);border-top:4px solid var(--ink)}
.bn a,.bn button{color:#f0dcc0;font-size:12px}
.bn .ic{border-radius:0}.bn .on{color:var(--ink)}.bn .on .ic{background:var(--gold);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.chb{border-radius:0;border:3px solid var(--ink);background:var(--blue);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 4px 0 var(--px)}
.chb i{border-radius:0;border:2px solid var(--ink);background:var(--red);color:var(--ink)}
.chp{background:var(--s1);border-radius:0}
.chh{background:var(--wood);color:#fff;border-bottom:3px solid var(--ink)}.chh button{color:#fff}
.mb{border-radius:0;border:2px solid var(--ink)}
.mb.b{background:var(--blue);color:#fff;border-radius:0}.mb.o{background:#fff3c4;color:#2a1c12;border-radius:0}
.adm .mb.b{background:#fff3c4;color:#2a1c12;border-radius:0}.adm .mb.o{background:var(--blue);color:#fff;border-radius:0}
.chf{border-top:3px solid var(--ink)}

/* layar sambutan */
.sp-card{background:var(--wood);border-radius:0}
.sp-t{color:var(--gold);font-family:var(--hd);text-shadow:3px 3px 0 var(--ink);font-size:26px}
.sp-card p{color:#fbf1dc}.sp-card em{color:var(--gold)}
.sp-b{border-radius:0;border:3px solid var(--ink);background:var(--green);color:var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 4px 0 var(--px)}
.sp-card:active .sp-b{box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}

/* panel owner */
nav.glass{border-radius:0;background:var(--wood);padding:8px 10px 8px 16px}
.brand{color:#fff;text-shadow:2px 2px 0 var(--ink)}.brand span{color:var(--gold)}
.login{background:var(--wood)}.login h2{color:#fff;text-shadow:2px 2px 0 var(--ink);margin-top:0}
.st b{color:var(--gold)}.st span{color:var(--mut)}
.panel h2{color:#fff;text-shadow:2px 2px 0 var(--ink)}
.ord{border-top:3px solid var(--ink)}.log{border-top:3px solid var(--ink)}
.pill2{border-radius:0;border:2px solid var(--ink);background:var(--gold);color:var(--ink)}
.pill2.dibayar,.pill2.diterima{background:var(--blue);color:#fff}.pill2.selesai{background:var(--green);color:var(--ink)}.pill2.batal{background:var(--red);color:var(--ink)}
.tp{border-radius:0;border:2px solid var(--ink);background:var(--blue);color:#fff}.tp.sell{background:var(--gold);color:var(--ink)}
.cv.on{box-shadow:inset 0 0 0 3px var(--gold),4px 4px 0 var(--px)}.cv i{border-radius:0;background:var(--red);color:var(--ink)}
#ct{background:var(--s1)}
.pe b{color:var(--gold);font-family:var(--hd)}

/* pembayaran e-wallet, world jual, bukti screenshot */
.payi{text-align:center}
.payi .pl{color:var(--mut);font-size:13px;font-weight:600}
.payi .pn{font-family:Rubik,system-ui,sans-serif;font-weight:800;font-size:clamp(20px,6.4vw,26px);letter-spacing:1px;color:var(--gold);margin:6px 0 8px;word-break:break-all}
.payi .cpy{margin:2px auto 8px}
.payi .wl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 10px}
.payi .wl span{border:2px solid var(--ink,#06122c);background:var(--s2);color:var(--tx);padding:3px 10px;font-size:12px;font-weight:700}
.payi .sum{justify-content:center;gap:14px}
.pf{margin:14px 0;padding:12px 14px;border:3px dashed var(--gold);display:grid;gap:8px;justify-items:center;text-align:center}
.pf h4{margin:0}.pf .note{margin:0}
.pfb{cursor:pointer}
.pfp{max-width:100%;max-height:260px;border:3px solid var(--ink,#06122c);background:#fff}
.pmod{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);overflow:auto;padding:16px;display:grid;justify-items:center;align-items:start}
.pbox{background:var(--s1);border:4px solid var(--ink,#06122c);padding:14px;max-width:520px;width:100%;display:grid;gap:10px}
.pbox img{width:100%;display:block;background:#fff}

/* ikon gem lock: gambar PNG */
.gemi{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.gm .gemi{width:44px;height:44px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.45))}
.stage .gemi{width:84px;height:84px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45));animation:fl 4s steps(6,end) infinite}
@media(prefers-reduced-motion:reduce){.stage .gemi{animation:none}}

/* layar sambutan: tema pixel (kotak, border tebal, bayangan keras), tata letak ala MafiaPS. Hanya tombol yang menutup. */
.splash{cursor:default;background:#0b1426}
.splash::before{background:linear-gradient(rgba(8,14,30,.45),rgba(8,14,30,.6)),url(../img/scene.jpg) 60% 100%/cover;filter:blur(9px)}
.splash .sp-card{max-width:380px;padding:24px 20px 24px;border-radius:0;border:4px solid var(--ink);background:var(--wood);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),6px 6px 0 var(--px)}
.splash .sp-logo{display:block;width:96px;height:96px;margin:0 auto 4px;object-fit:contain;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45))}
.splash .sp-t{font-family:var(--hd);font-weight:700;font-size:26px;color:var(--gold);text-shadow:3px 3px 0 var(--ink);margin:6px 0 14px}
.splash .sp-card p{color:#fbf1dc;font-size:15px;line-height:1.55}
.splash .sp-card em{color:var(--gold)}
.splash .sp-b{display:block;width:100%;max-width:250px;margin:0 auto;padding:14px 0;border:3px solid var(--ink);border-radius:0;background:#e5203f;color:#fff;font:700 20px var(--hd);text-shadow:2px 2px 0 var(--ink);box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),0 4px 0 var(--px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash .sp-b:active{transform:translateY(4px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.28)}
.splash .sp-b:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* gem lock: gambar HD pas memenuhi kotak. Hanya Blue (pixel art) yang dibuat tajam per-pixel */
.gemi{image-rendering:auto}.gemi.gp{image-rendering:pixelated}
.stage .gemi{width:112px;height:112px}
.gm .gemi{width:54px;height:54px}
.splash .sp-logo{width:124px;height:124px}

/* gem lock: pixel art 32x32 tajam. Ukuran tampil kelipatan 32 (4px/2px per pixel) supaya tiap pixel utuh */
.gemi,.gemi.gp{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.stage{height:144px}
.stage .gemi{width:128px;height:128px}
.gm .gemi{width:64px;height:64px}
.splash .sp-logo{width:128px;height:128px}

/* ===== Tampilan pesanan selesai ===== */
.done{position:relative;overflow:hidden;margin-top:12px}
.done .cf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.done .cf u{position:absolute;top:-10px;width:8px;height:8px;border:2px solid var(--ink);animation:cfall 2.6s linear 2 both}
@keyframes cfall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(520px) rotate(200deg);opacity:0}}
.dtop{text-align:center;background:var(--green);color:var(--ink);border:4px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),4px 4px 0 var(--px);padding:14px 10px 12px}
.dck{width:52px;height:52px;margin:0 auto 6px;display:grid;place-items:center;background:#fff7e6;border:4px solid var(--ink);font-size:30px;font-weight:800;box-shadow:3px 3px 0 var(--px);animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.dtt{font:700 30px/1 var(--hd);letter-spacing:2px;text-shadow:2px 2px 0 rgba(255,255,255,.35)}
.dtop p{margin:6px 0 0;font-weight:500;color:#173a0a}
.dstage{position:relative;display:grid;place-items:center;height:120px;margin:14px 4px 0;border:4px solid var(--ink);background:linear-gradient(180deg,rgba(6,14,36,.15),rgba(6,14,36,.4)),url(../img/scene.jpg) 58% 100%/auto 100% no-repeat #2b8fb0;image-rendering:pixelated;overflow:hidden}
.dstage .gemi{width:84px;height:84px;animation:fl 4s ease-in-out infinite}
.dcard{background:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--px);margin:12px 4px 0;padding:6px 14px;outline:2px solid rgba(255,255,255,.08);outline-offset:-6px}
.dr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:2px dashed rgba(255,255,255,.12);font-size:14px}
.dr:last-child{border-bottom:0}.dr span{color:var(--mut)}.dr b{text-align:right;font-weight:600;word-break:break-all}
.dr.tot2 b{font:700 22px var(--hd);color:var(--gold)}
.idc{cursor:pointer;color:var(--ice);letter-spacing:.5px;font-size:13px}
.done .prog{margin:16px 4px 8px}
.dbtn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 4px 0}.dbtn .btn{width:100%;text-decoration:none}
.dbtn .btn.ghost{background:var(--wood2);color:#fff}
.dlh{margin:16px 4px 6px;font-size:16px}.done .tl{margin:6px 4px 4px}
@media(prefers-reduced-motion:reduce){.done .cf{display:none}.dck,.dstage .gemi{animation:none}}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== Animasi pesanan selesai (ringan: transform/opacity saja) ===== */
.dtop{position:relative;overflow:hidden;animation:dtin .45s cubic-bezier(.2,1.4,.4,1) both}
.dtop::after{content:"";position:absolute;top:0;bottom:0;width:40px;left:-60px;background:rgba(255,255,255,.35);transform:skewX(-20deg);animation:shine 2.8s ease-in-out .6s infinite}
@keyframes dtin{from{transform:translateY(-14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes shine{0%{left:-60px}45%,100%{left:120%}}
.dtt{animation:dtt 1.8s ease-in-out .5s infinite}
@keyframes dtt{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.dstage{animation:rise .5s ease-out .15s both}
.dstage .gemi{animation:gbounce .7s cubic-bezier(.3,1.6,.5,1) .35s both,fl 3.2s ease-in-out 1.1s infinite}
@keyframes gbounce{from{transform:translateY(40px) scale(.4);opacity:0}to{transform:none;opacity:1}}
.dstage i{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--ink);opacity:0;animation:spk 2s ease-in-out infinite}
.dstage .sp1{left:30%;top:22%}.dstage .sp2{right:28%;top:30%;animation-delay:.7s}.dstage .sp3{left:42%;bottom:20%;animation-delay:1.3s}
@keyframes spk{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.dcard{animation:rise .5s ease-out .3s both}
.dcard .dr{animation:rise .4s ease-out both}
.dcard .dr:nth-child(1){animation-delay:.45s}.dcard .dr:nth-child(2){animation-delay:.55s}.dcard .dr:nth-child(3){animation-delay:.65s}.dcard .dr:nth-child(4){animation-delay:.75s}.dcard .dr:nth-child(5){animation-delay:.85s}.dcard .dr:nth-child(6){animation-delay:.95s}
.done .prog>div{animation:rise .4s ease-out both}.done .prog>div i{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
.done .prog>div:nth-child(1),.done .prog>div:nth-child(1) i{animation-delay:1s}.done .prog>div:nth-child(2),.done .prog>div:nth-child(2) i{animation-delay:1.2s}.done .prog>div:nth-child(3),.done .prog>div:nth-child(3) i{animation-delay:1.4s}
.dbtn{animation:rise .5s ease-out 1.5s both}.dbtn .btn:first-child{animation:bpulse 1.6s ease-in-out 2.2s infinite}
@keyframes bpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.done .tl,.dlh{animation:rise .5s ease-out 1.7s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dtop,.dtop::after,.dtt,.dstage,.dstage i,.dcard,.dcard .dr,.done .prog>div,.done .prog>div i,.dbtn,.dbtn .btn,.done .tl,.dlh,.dstage .gemi{animation:none!important;opacity:1}.dstage i{display:none}}

/* Daftar harga: ukuran & tampilan kartu seperti versi acuan (gem 84px, halus, panggung 132px) */
.stage{height:132px}
.stage .gemi,.dstage .gemi{width:84px;height:84px}
.gemi,.gemi.gp{image-rendering:auto}

/* Kontak: tab Chat Web / WhatsApp owner */
.cht{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:3px solid var(--ink)}
.cht button{height:38px;border:0;border-right:3px solid var(--ink);background:var(--wood2);color:#fff;font:600 14px var(--hd);cursor:pointer}
.cht button:last-child{border-right:0}.cht button.on{background:var(--gold);color:var(--ink)}
.chw{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.chw[hidden],.chm[hidden],.chf[hidden]{display:none}
.wac{display:flex;align-items:center;gap:12px}
.wav{flex:none;width:54px;height:54px;display:grid;place-items:center;background:#25d366;color:var(--ink);border:4px solid var(--ink);box-shadow:3px 3px 0 var(--px);font:700 26px var(--hd)}
.wai{display:flex;flex-direction:column;min-width:0}.wai b{font:700 20px var(--hd);color:#fff;text-shadow:2px 2px 0 var(--ink)}
.wai span{color:var(--mut);font-size:13px}.wai em{font-style:normal;font-size:12px;color:var(--green);display:flex;align-items:center;gap:6px;margin-top:2px}
.wai em i{width:8px;height:8px;background:var(--green);border:2px solid var(--ink);animation:wapulse 1.6s ease-in-out infinite}
@keyframes wapulse{0%,100%{opacity:1}50%{opacity:.35}}
.wan{background:var(--ink);border:3px solid var(--ink);padding:10px 12px;display:flex;flex-direction:column;gap:2px;text-align:center}
.wan span{font-size:11px;color:var(--mut);letter-spacing:.4px;text-transform:uppercase}.wan b{font:700 22px var(--hd);color:var(--gold);letter-spacing:1px}
.chw .btn{width:100%;text-decoration:none}.wab{background:#25d366;color:var(--ink)}.chw .btn.ghost{background:var(--wood2);color:#fff}
.chw .note{margin:0;text-align:center;font-size:12px}
@media(prefers-reduced-motion:reduce){.wai em i{animation:none}}

/* Cek pesanan: reset + daftar pesanan saya */
.rrow{display:flex;justify-content:center;margin-top:8px}.rrow .btn{height:38px}
.mineb{margin-top:16px}.mh{display:flex;justify-content:space-between;align-items:center;gap:10px}.mh h2{margin:0;font-size:18px}.mh .btn{height:34px;padding:0 12px;font-size:13px}
#mine{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mi{position:relative;background:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--px);padding:10px 36px 10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;outline:2px solid rgba(255,255,255,.07);outline-offset:-5px}
.mi:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--px)}
.mi .mt{display:flex;justify-content:space-between;align-items:center;gap:8px}.mi .mt b{font:600 13px ui-monospace,Menlo,monospace;letter-spacing:.5px;color:var(--ice);word-break:break-all}
.mi .mb2{display:flex;justify-content:space-between;gap:10px;font-size:14px}.mi .mb2 b{color:var(--gold);white-space:nowrap}
.mi.selesai{border-left:8px solid var(--green)}.mi.batal{border-left:8px solid var(--red);opacity:.8}.mi.menunggu,.mi.dibayar,.mi.diterima{border-left:8px solid var(--gold)}
.mi .mx{position:absolute;top:6px;right:6px;width:26px;height:26px;border:2px solid var(--ink);background:var(--wood2);color:#fff;font-size:12px;cursor:pointer;padding:0}
.mi .pill2{border-radius:0;font-size:11px}

/* Langkah pesanan tersambung + interaktif */
.progw{margin:6px 0 12px}.progw .prog{margin:6px 0 8px}
.prog>div{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;padding-bottom:4px}
.prog>div i{position:relative;z-index:1;transition:transform .15s}
.prog>div:active i{transform:scale(.9)}
.prog>div+div::before,.prog>div+div::after{content:"";position:absolute;top:12px;left:calc(-50% + 22px);width:calc(100% - 44px);height:6px}
.prog>div+div::before{background:var(--ink)}
.prog>div.on+div::before{}
.prog>div+div.on::after{background:var(--green);transform-origin:left;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.prog.anim>div+div.on::after{animation:lfill .5s steps(6,end) var(--d,0s) both}
@keyframes lfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.prog>div.cur i{background:var(--gold);color:var(--ink);animation:cpulse 1.3s steps(2,end) infinite}
@keyframes cpulse{0%{box-shadow:0 0 0 0 rgba(255,210,63,.8)}100%{box-shadow:0 0 0 7px rgba(255,210,63,0)}}
.prog>div.sel span{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prog.anim>div.ok i{animation:pop .4s cubic-bezier(.2,1.6,.4,1) var(--d,0s) both}
.pdet{background:var(--ink);border:3px solid var(--ink);padding:9px 12px;font-size:13px;color:var(--tx);text-align:center;min-height:42px;box-shadow:3px 3px 0 var(--px)}
.pdet span{color:var(--mut)}.pdet b{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.prog>div.cur i,.prog.anim>div+div.on::after,.prog.anim>div.ok i{animation:none}}

/* stok realtime */
.stk{display:flex;flex-direction:column;gap:4px;margin:6px 8px 0;font-size:12px}
.ib .stk{margin:6px 0 0}
.stl{display:flex;justify-content:space-between;gap:8px;color:var(--mut)}
.stl b{color:var(--tx);font-variant-numeric:tabular-nums}
.stk small{color:var(--mut);font-size:11px}.stk small b{color:var(--tx)}
.stb{position:relative;height:12px;border:2px solid var(--ink,#0b1426);background:rgba(0,0,0,.4);overflow:hidden}
.stb i{display:block;height:100%;background:var(--green);transition:width .6s ease,background-color .3s}
.stb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.35) 9px 10px);pointer-events:none}
.stk.mid .stb i{background:var(--gold)}.stk.lo .stb i,.stk.out .stb i{background:var(--red)}
.stk.out .stl b{color:var(--red)}
.it.off{opacity:.55}
@media(prefers-reduced-motion:reduce){.stb i{transition:none}}
.ib .stl b{display:inline;font-size:12px;font-family:inherit}
.ib .stk small b{display:inline;font-size:inherit;font-family:inherit}
.pe .stk{grid-column:1/-1;margin:0}

/* kartu limit/stok di atas form jual & beli */
#lim{display:flex;flex-direction:column;gap:10px}#lim:not(:empty){margin:0 0 14px}
.lc{display:flex;flex-direction:column;gap:8px;padding:14px;border:3px solid var(--ink,#0b1426);background:rgba(0,0,0,.28)}
.lc h4{margin:0;font-size:15px;color:var(--ice)}
.lc .ls{color:var(--mut);font-size:14px}.lc .ls b{color:var(--gold);font-size:17px;font-variant-numeric:tabular-nums}
.lc .stb{height:16px}
.lc small{color:var(--mut);font-size:13px}.lc small b{color:var(--green)}
.lc.mid .stb i{background:var(--gold)}.lc.lo .stb i,.lc.out .stb i{background:var(--red)}.lc.out small b{color:var(--red)}
.osec{margin:16px 0 6px;font-size:1rem}.osec small{font-weight:400}

/* undian */
.lbox{padding:16px;margin:0 0 14px}
.lprize{display:flex;align-items:center;gap:16px}.lprize .gemi{width:84px;height:84px}
.lpz{font-family:var(--hd);font-size:clamp(28px,8vw,40px);color:var(--gold);text-shadow:3px 3px 0 var(--ink)}
.lwin{background:var(--gold)!important;color:var(--ink)}.lwin .note{color:var(--ink)}
.lrow{margin:6px 0 12px}.lrow input{flex:1;min-width:0}
.lst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.lst>div{background:var(--s2);border:3px solid var(--ink);padding:10px 4px}
.lst b{display:block;font-family:var(--hd);font-size:clamp(20px,6vw,28px);color:#fff}.lst span{font-size:12px;color:var(--mut)}
.lre{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px solid rgba(0,0,0,.25)}.lre:last-child{border:0}
.lrk,.lrd{min-width:34px;text-align:center;color:var(--gold);font-family:var(--hd)}
.lrn{flex:1;min-width:0}.lrn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lrn i{display:block;height:6px;margin-top:4px;background:var(--green);box-shadow:inset 0 0 0 1px var(--ink)}
.lrt{font-family:var(--hd);color:#fff}

/* logo gambar */
.logo .lgi{width:40px;height:40px;flex:none;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--px);object-fit:cover;image-rendering:auto}

/* bintang, ulasan (testimoni), kode promo */
.stx{width:18px;height:18px;flex:none;fill:rgba(0,0,0,.4);shape-rendering:crispEdges}
.stx.on{fill:var(--gold);filter:drop-shadow(1px 1px 0 var(--ink))}
.tst-row{display:flex;gap:2px;align-items:center}
.tst-sum{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:16px;margin:0 0 14px}
.tst-sum.empty{display:block}
.tst-big{text-align:center}
.tst-big b{display:block;font-family:var(--hd);font-size:48px;line-height:1;color:var(--gold);text-shadow:3px 3px 0 var(--ink)}
.tst-big .tst-row{justify-content:center;margin:6px 0 4px}
.tst-big small{color:var(--mut);font-size:12px}
.tst-dist{display:flex;flex-direction:column;gap:5px;min-width:0}
.tst-r{display:grid;grid-template-columns:10px 14px 1fr 26px;gap:6px;align-items:center;font-size:12px;color:var(--mut)}
.tst-r .stx{width:14px;height:14px}
.tst-r i{display:block;height:10px;background:var(--ink);border:2px solid var(--ink)}
.tst-r u{display:block;height:100%;background:var(--gold)}
.tst-r em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--mut)}
.tst-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 6px 14px 2px;-webkit-overflow-scrolling:touch}
.tst-card{flex:0 0 min(272px,82%);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--s1);border:4px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),4px 4px 0 var(--px)}
.tst-card p{margin:0;flex:1;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.tst-by{display:flex;flex-direction:column;gap:1px;border-top:3px solid var(--ink);padding-top:8px}
.tst-by b{font-family:var(--hd);color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tst-by small{color:var(--mut);font-size:12px}
/* form ulasan di halaman lacak */
.tst-form{padding:16px;margin:14px 4px 0}
.tst-form h4{margin:0 0 6px;font-size:17px;color:var(--gold)}
.tst-form p{overflow-wrap:anywhere}
.tst-in{display:flex;gap:6px;margin:10px 0 4px}
.tst-in button{flex:1;max-width:56px;aspect-ratio:1;display:grid;place-items:center;padding:0;cursor:pointer;background:var(--s2);border:3px solid var(--ink);box-shadow:0 3px 0 var(--px)}
.tst-in button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--px)}
.tst-in .stx{width:70%;height:70%}.tst-in .stx:not(.on){fill:var(--wood2)}
.tst-lbl{min-height:20px;margin:0 0 8px;font-family:var(--hd);color:var(--gold);font-size:14px}
.tst-form textarea{resize:vertical}
.tst-form .btn{margin-top:10px}
.tst-form.fin .tst-row .stx{width:22px;height:22px}
/* kode promo */
.note.ok{color:var(--green)}
.promo-row span:last-child,.pm-ok{color:var(--green)}
#promoB .lrow{margin-bottom:4px}#promoB input[readonly]{background:#e6dcc4}
.promo-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;padding:12px;background:var(--s1);border:4px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),4px 4px 0 var(--px)}
.promo-strip>b{font-family:var(--hd);color:var(--gold)}
.promo-strip .note{flex:1 0 100%;margin:0}
.promo-chip{display:inline-flex;flex-direction:column;padding:6px 12px;background:var(--gold);color:var(--ink);border:3px dashed var(--ink);box-shadow:0 3px 0 var(--px);text-decoration:none}
.promo-chip b{font-family:var(--hd);font-size:16px;letter-spacing:.5px}.promo-chip small{font-size:11px;font-weight:500}
.promo-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--px)}
/* admin: form kode promo */
.pe.pr{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;margin:0}
.chk input{width:20px;height:20px;flex:none;padding:0;accent-color:var(--green)}
@media(max-width:420px){.tst-sum{grid-template-columns:1fr;gap:12px}}
@media(prefers-reduced-motion:reduce){.tst-in button{transition:none}}
.rtoast{position:fixed;left:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:50;max-width:min(300px,calc(100vw - 90px));display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:#0d1d42;border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.4);font-size:12.5px;line-height:1.35;color:var(--tx);pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.rtoast.on{opacity:1;transform:none}
.rtoast em{font-style:normal;font-weight:600;color:var(--ice)}
.rtoast small{display:block;color:var(--mut);font-size:11px}
.rt-d{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,220,151,.2)}
.rt-d.sell{background:var(--gold);box-shadow:0 0 0 3px rgba(255,194,61,.2)}
@media (prefers-reduced-motion:reduce){.rtoast{transition:none}}
.wai em.off{color:var(--mut)}
.wai em.off i{background:var(--red);animation:none}

/* kartu nomor antrean (halaman pesanan dibuat + halaman lacak) */
.qbox{text-align:center;margin:14px 0;padding:16px 12px 14px;background:rgba(255,210,63,.12);border:4px solid var(--ink,#1a100a);box-shadow:inset 0 0 0 2px rgba(255,210,63,.35),4px 4px 0 var(--px,#000)}
.qbox .ql{display:block;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.14em}
.qbox .qn{display:block;color:var(--gold);font-weight:800;font-size:clamp(56px,20vw,88px);line-height:1.05;margin:2px 0 4px}
.qbox .qs{display:block;color:var(--gold);opacity:.9;font-size:14px}

/* FAQ beranda */
.faq{display:grid;gap:8px}
.faq details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";opacity:.7}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 0;opacity:.8;font-size:.92rem;line-height:1.5}

/* timer QRIS */
.qtm{text-align:center;margin-top:12px}
.qtn{color:#ff4d5e;font-weight:700}
.qtn b{font-size:1.35rem;font-variant-numeric:tabular-nums;margin-left:4px}
.qtn.urg{animation:qblink 1s steps(2,jump-none) infinite}
.qtm small{display:block;color:#ff8a8a;margin-top:6px;line-height:1.4}
@keyframes qblink{50%{opacity:.45}}

/* pesanan belum selesai di beranda */
#pendS .pnd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;border-radius:12px;text-decoration:none;color:inherit}
#pendS .pnd b{display:block}#pendS .pnd small{opacity:.7}
#pendS .pnd span{font-size:.82rem;white-space:nowrap;color:#7dd3fc}
#pendS .pnd.need{border-color:#ff4d5e}#pendS .pnd.need span{color:#ff8a8a;font-weight:700}

/* ============================================================
   TEMA TENANG (menggantikan tema pixel cokelat)
   Gelap navy yang lembut, warna tidak jenuh, garis tipis, sudut membulat, tanpa pola kotak-kotak,
   bayangan lembut, kedipan dikurangi. Aksen biru es dari logo + emas redup untuk harga jual.
   ============================================================ */
:root{--bg:#0f1624;--s1:#151d2e;--s2:#1c2740;--line:rgba(148,170,210,.16);--tx:#dde5f2;--mut:#93a2bb;--blue:#3f7fd0;--ice:#8dbcec;--gold:#d8b565;--green:#5bb78a;--red:#e07b7b;--ink:#0c121e;--wood:#18223a;--wood2:#243150;--px:rgba(0,0,0,.35);--hd:Rubik,system-ui,sans-serif;--r:16px}
body{background-color:var(--bg);background-image:none}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
h1,h2,h3,h4,.logo,.brand,.sp-t,.thead h1,.hero h1,.pcard h3,.form h2,.form h3,.panel h2,.login h2,.wai b,.lpz,.tst-big b,.dtt,.splash .sp-t,.splash .sp-b{text-shadow:none}

/* kotak dasar */
.glass,.form,.calc,.tw,.plain,.how,.mrow,.pcard,.notice,.closed,.ann2,.it,.tot,.sumbox,.crow,.stbig,.chp,.menu,.hero,.sp-card,#ct,.cv,.okc,.tst-card,.promo-strip,.lc,.dcard,.mi,.pdet,.pbox,.wan,.lst>div{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.crow,.tot,.sumbox,.pdet,.wan,.mi,.dcard,.lst>div,.lc,.mrow{box-shadow:none}
.glass,.form,.calc,.tw,.plain,.how,.mrow,.crow,.it,.cv,.pcard,.form,.login,#ct,.chp{background:var(--s1)}

/* header & menu */
.top{background:var(--s1);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(0,0,0,.28)}
.logo{color:var(--tx);text-shadow:none}.logo span b{color:var(--gold)}
.logo .lgi{border:0;border-radius:10px;box-shadow:none}
.mbtn{border-radius:12px;border:1px solid var(--line);background:var(--s2);color:var(--tx);box-shadow:none}
.mbtn:active{transform:scale(.96);box-shadow:none}
#sndBtn.on{background:var(--green);color:#0b1a12;border-color:transparent}
.menu{background:var(--s1)}
.menu a{border-radius:10px;color:var(--tx);border-bottom:0}
.menu a:hover{background:var(--s2)}
.menu a.own{border:0;border-radius:10px;background:var(--gold);color:#1a1405}.menu a.own:hover{background:#e6c47a}

/* pengumuman, hero, banner */
.ann2{background:var(--s1);color:var(--gold)}
.hero{background:var(--s1)}
.hscene{border-bottom:1px solid var(--line);background:#2b5a78}
.hscene .sc{filter:saturate(.7) brightness(.78)}
.hcopy{background:linear-gradient(180deg,#141d31,#0f1727);image-rendering:auto}
.hero h1{color:var(--tx)}.hero .sub{color:var(--mut)}
.stat{border-radius:999px;border:1px solid var(--line);background:var(--s2);color:var(--tx);font-family:var(--hd)}.stat i{border-radius:50%}
.notice{background:rgba(216,181,101,.12);color:#ecd9a8;border-color:rgba(216,181,101,.28)}
.closed{background:rgba(224,123,123,.12);color:#f2bcbc;border-color:rgba(224,123,123,.3)}

/* tombol */
.btn{height:44px;border-radius:12px;border:0;background:var(--blue);color:#fff;box-shadow:none}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost,.hero .btn.ghost{background:var(--s2);color:var(--tx);border:1px solid var(--line);box-shadow:none}

/* judul bagian */
.sh{display:block;margin:28px 0 12px;padding:0 0 0 10px;background:none;color:var(--tx);border:0;border-left:3px solid var(--blue);box-shadow:none;font-size:17px}

/* kartu produk */
.pcard h3{color:var(--tx)}
.mn{color:var(--gold)}
.stage,.dstage{border-radius:12px;border:1px solid var(--line);box-shadow:none;background-color:#9fb1c6;background-blend-mode:multiply}
.stage .gemi,.stage svg{animation-timing-function:ease-in-out;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.prices{border-radius:12px;border:1px solid var(--line);background:var(--ink)}
.pc+.pc{border-left:1px solid var(--line)}
.act{height:42px;border-radius:12px;border:0;box-shadow:none}
.act.sell{background:var(--gold);color:#1a1405}.act.sell:hover{background:#e4c27a}
.act.buy{background:var(--blue);color:#fff}.act.buy:hover{background:#5190dd}
.act:active{transform:translateY(1px);box-shadow:none}

/* beranda, tabel, kalkulator */
.mrow i{border-radius:10px;border:0}
.how li{border-top:1px solid var(--line)}.how li:first-child{border-top:0}
.how li::before{border-radius:8px;border:0;background:var(--gold);color:#1a1405}
.how b{color:var(--tx)}
.ptbl th,.ptbl td{border-bottom:1px solid var(--line)}.ptbl th{background:transparent;color:var(--ice)}
.sk,.sk.tall{border-radius:12px;background:linear-gradient(90deg,#151d2e,#1f2b45,#151d2e);background-size:200% 100%}

/* form */
label{color:var(--mut)}
input,textarea,select{border-radius:10px;border:1px solid var(--line);background:#0f1729;color:var(--tx);box-shadow:none}
input::placeholder,textarea::placeholder{color:#64748f}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(63,127,208,.28);outline:0}
.form h2,.form h3{color:var(--tx)}
em{color:#f0a0a0}
.dots b{border-radius:50%;border:1px solid var(--line);background:var(--s2);color:var(--tx)}.dots b.on{background:var(--blue);color:#fff}
.dots u{height:2px;background:var(--line);border-radius:0}
.it.on{background:#1a2744;border-color:var(--ac,var(--blue));box-shadow:inset 0 0 0 1px var(--ac,var(--blue))}
.ck{border-radius:6px;border:1px solid var(--line);background:#0f1729}.it.on .ck{background:var(--green);border-color:transparent}
.ib b{color:var(--tx)}
.qt button{border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--tx)}
.tot,.sumbox{background:var(--ink)}
.seg button{border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--mut);box-shadow:none}.seg button.on{background:var(--blue);color:#fff;border-color:transparent}
.tid{border-radius:12px;background:var(--ink);border:1px dashed var(--gold)}
.qr img{border-radius:12px;border:0}
.chip{border-radius:999px;border:1px solid var(--line);background:var(--s2);color:var(--tx);box-shadow:none}.chip.on{background:var(--blue);color:#fff;border-color:transparent}

/* status & langkah pesanan */
.stbig{background:rgba(216,181,101,.14);color:var(--gold)}.stbig small{color:var(--mut)}
.stbig.dibayar,.stbig.diterima{background:rgba(63,127,208,.2);color:#a9cdf4}
.stbig.selesai{background:rgba(91,183,138,.16);color:var(--green)}
.stbig.batal{background:rgba(224,123,123,.16);color:var(--red)}
.prog i{border-radius:50%;border:1px solid var(--line);background:var(--s2);color:var(--tx)}.prog .on i{background:var(--green);color:#0b1a12}
.prog>div+div::before{background:var(--line)}
.prog>div.cur i{background:var(--gold);color:#1a1405}
.tl{border-left:2px solid var(--line)}
.pill2{border-radius:999px;border:0;background:rgba(216,181,101,.16);color:var(--gold)}
.pill2.dibayar,.pill2.diterima{background:rgba(63,127,208,.22);color:#a9cdf4}.pill2.selesai{background:rgba(91,183,138,.18);color:var(--green)}.pill2.batal{background:rgba(224,123,123,.18);color:var(--red)}
.tp{border-radius:8px;border:0;background:rgba(63,127,208,.22);color:#a9cdf4}.tp.sell{background:rgba(216,181,101,.16);color:var(--gold)}

/* footer, nav bawah, chat */
footer{border-top:1px solid var(--line);background:var(--ink)}
.bn{background:var(--s1);border-top:1px solid var(--line)}
.bn a,.bn button{color:var(--mut)}
.bn .ic{border-radius:10px}.bn .on{color:var(--tx)}.bn .on .ic{background:var(--blue);color:#fff;box-shadow:none}
.chb{border-radius:50%;border:0;background:var(--blue);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.chb i{border-radius:999px;border:0;background:var(--red);color:#1a0808}
.chh{background:var(--s2);color:var(--tx);border-bottom:1px solid var(--line)}.chh button{color:var(--tx)}
.mb{border-radius:12px;border:0}
.mb.b{background:var(--blue);color:#fff}.mb.o{background:var(--s2);color:var(--tx)}
.adm .mb.b{background:var(--s2);color:var(--tx)}.adm .mb.o{background:var(--blue);color:#fff}
.chf{border-top:1px solid var(--line)}
.cht{border-bottom:1px solid var(--line)}.cht button{border-right:1px solid var(--line);background:var(--s2);color:var(--mut)}.cht button.on{background:var(--blue);color:#fff}
.wav{border:0;border-radius:14px;box-shadow:none;color:#06260f}
.wai b{color:var(--tx)}.wai em i{border:0;border-radius:50%}
.mi .mx{border:0;border-radius:8px;background:var(--s2);color:var(--tx)}.mi{outline:0}.mi .pill2{border-radius:999px}

/* layar sambutan */
.splash::before{background:linear-gradient(rgba(8,14,30,.72),rgba(8,14,30,.84)),url(../img/scene.jpg) 60% 100%/cover;filter:blur(9px) saturate(.55)}
.splash .sp-b:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.splash .sp-card{border-radius:20px;border:1px solid var(--line);background:var(--s1);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.splash .sp-logo{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));border-radius:20px}
.splash .sp-t{color:var(--ice)}
.splash .sp-card p{color:var(--tx)}.splash .sp-card em{color:var(--gold)}
.splash .sp-b{border:0;border-radius:14px;background:var(--blue);color:#fff;font:600 18px var(--hd);box-shadow:none}
.splash .sp-b:active{transform:translateY(1px);box-shadow:none}

/* panel owner */
nav.glass{background:var(--s1)}
.brand{color:var(--tx)}
.ord,.log{border-top:1px solid var(--line)}
.cv.on{box-shadow:inset 0 0 0 2px var(--blue)}.cv i{border-radius:999px;background:var(--red);color:#1a0808}

/* pembayaran */
.payi .wl span{border:1px solid var(--line);border-radius:999px}
.pf{border:1px dashed var(--gold);border-radius:12px}
.pfp{border:1px solid var(--line);border-radius:10px}

/* pesanan selesai */
.dtop{background:rgba(91,183,138,.16);color:var(--green);border:1px solid rgba(91,183,138,.35);border-radius:var(--r);box-shadow:none}
.dck{background:var(--green);color:#0b1a12;border:0;border-radius:50%;box-shadow:none}
.dr.tot2 b{color:var(--gold)}

/* ulasan, promo, undian */
.tst-big b{color:var(--gold)}
.tst-r i{border:0;border-radius:999px;background:var(--ink)}
.tst-by{border-top:1px solid var(--line)}
.tst-in button{border:1px solid var(--line);border-radius:12px;box-shadow:none}
.stx.on{filter:none}
.promo-chip{border:1px dashed rgba(26,20,5,.5);border-radius:12px;box-shadow:none;background:var(--gold);color:#1a1405}
.qbox{background:rgba(216,181,101,.1);border:1px solid rgba(216,181,101,.3);border-radius:var(--r);box-shadow:none}
.lwin{background:var(--gold)!important;color:#1a1405}.lwin .note{color:#1a1405}
.lrn i{box-shadow:none;border-radius:999px}

/* stok realtime */
.stb{height:8px;border:0;border-radius:999px;background:rgba(255,255,255,.08)}.stb::after{display:none}.stb i{border-radius:999px}
.lc{background:rgba(0,0,0,.18)}

/* pesan "admin butuh stok" saat stok 0 */
.need{position:relative;margin-top:8px;border:1px solid rgba(216,181,101,.35);border-radius:12px;background:rgba(216,181,101,.1);box-shadow:none;color:var(--tx);font-size:11.5px;line-height:1.4;text-align:center;overflow:hidden}
.need strong{display:block;padding:5px 4px;background:rgba(216,181,101,.18);color:var(--gold);font-family:var(--hd);font-weight:600;font-size:clamp(9.5px,2.75vw,11.5px);white-space:nowrap}
.need span{display:block;padding:7px 8px 9px}

@media(prefers-reduced-motion:no-preference){.sc .twk{animation:none}}

/* ---- polesan tema tenang: kedalaman, cahaya biru es dari logo, hero menyatu dengan panel ---- */
body{background-image:radial-gradient(900px 420px at 50% -120px,rgba(63,127,208,.20),transparent 70%);background-repeat:no-repeat}
.top{background:rgba(21,29,46,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bn{background:rgba(21,29,46,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pcard,.form,.calc,.tw,.how,.plain,.tst-card,.promo-strip{background:linear-gradient(180deg,#19243c,#131b2d);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.28)}
.mrow,.it{background:linear-gradient(180deg,#19243c,#141c2f)}
.prices{background:linear-gradient(180deg,#0e1424,#0b101c)}
.stage,.dstage{background-color:#b5c4d6}

/* hero: langit memudar ke panel, bukan terpotong keras */
.hscene{border-bottom:0}
.hscene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(20,29,49,0),#141d31);pointer-events:none;z-index:2}

/* tombol: gradasi lembut + cahaya halus */
.btn,.act.buy,.splash .sp-b,.chb,.bn .on .ic{background:linear-gradient(180deg,#4a8de0,#3573c6)}
.btn,.splash .sp-b{box-shadow:0 6px 16px rgba(53,115,198,.28)}
.btn.ghost,.hero .btn.ghost{background:rgba(255,255,255,.05);box-shadow:none}
.act.sell{background:linear-gradient(180deg,#e4c577,#cfa957)}

/* judul bagian: teks + garis memudar */
.sh{display:flex;align-items:center;gap:12px;padding:0;border:0}
.sh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(148,170,210,.28),transparent)}
h1,h2,h3{letter-spacing:-.2px}

/* status stok di tabel harga */
.tbs{display:block;width:max-content;margin-top:4px;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5}
.tbs.ok{background:rgba(91,183,138,.16);color:var(--green)}
.tbs.out{background:rgba(224,123,123,.16);color:var(--red)}
#tnote{margin:10px 2px 0;color:var(--gold)}
.pcard .tbs{margin:6px auto 0}

/* transisi pindah halaman: ringan (opacity + transform saja) */
.pg-out{animation:pgo .13s ease-in forwards;will-change:opacity,transform;pointer-events:none}
.pg-in{animation:pgi .26s cubic-bezier(.22,.8,.3,1) both;will-change:opacity,transform}
@keyframes pgo{to{opacity:0;transform:translate3d(var(--dx,0),0,0)}}
@keyframes pgi{from{opacity:0;transform:translate3d(var(--dx,0),0,0)}}
@media (prefers-reduced-motion:reduce){.pg-out,.pg-in{animation:none}}

/* harga: jangan tampilkan kotak kosong/skeleton saat data belum siap; muncul halus setelah termuat */
.sk{display:none}
main.ld{min-height:70vh}
main.ld>:not(.thead):not(.closed){display:none}
main.rdy>:not(.thead){animation:fi .3s ease both}
@media (prefers-reduced-motion:reduce){main.rdy>:not(.thead){animation:none}}

/* ===== Daftar GrowID: popup, toast, menu ===== */
.gmask{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:rgba(5,9,18,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto;animation:gfade .18s ease-out}
.gmask[hidden]{display:none}
.gcard{width:100%;max-width:420px;margin:auto;padding:22px 20px 20px;border-radius:24px;background:var(--s1);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55);animation:gpop .22s cubic-bezier(.2,.9,.3,1.1)}
.gcard h3{margin:0 0 8px;font-size:1.55rem;line-height:1.2;color:var(--tx)}
.gcard .gdesc{margin:0 0 16px;color:var(--mut);font-size:.95rem;line-height:1.5}
.gcard label{display:block;margin:12px 0 6px;color:var(--mut);font-size:.95rem}
.gcard label em{color:var(--red);font-style:normal}
.gcard input{width:100%;height:50px;border-radius:14px;padding:0 14px;font-size:16px}
.gcard .note.err{min-height:0;margin:10px 0 0;color:#f2a1a1;font-size:.88rem}
.gcard .note.err:empty{display:none}
.grow2{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;margin-top:18px}
.grow2 .btn{width:100%;margin:0;justify-content:center;text-align:center}
.glink{display:block;margin:14px auto 0;padding:6px 8px;background:none;border:0;color:var(--mut);font:500 .85rem Rubik,system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.glink[hidden]{display:none}
html.gopen,html.gopen body{overflow:hidden}
#gidToast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:130;transform:translate(-50%,14px);max-width:min(300px,calc(100vw - 40px));padding:14px 22px;border-radius:26px;background:var(--s2);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);color:var(--tx);font:500 .98rem/1.35 Rubik,system-ui,sans-serif;text-align:left;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#gidToast.on{opacity:1;transform:translate(-50%,0)}
.menu a#gidLink{cursor:pointer}
@keyframes gfade{from{opacity:0}to{opacity:1}}
@keyframes gpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gmask,.gcard{animation:none}#gidToast{transition:none}}

/* sapaan beranda */
.ghello{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--s1);border:1px solid var(--line);color:var(--tx);text-align:left;cursor:pointer;font:inherit;animation:gfade .25s ease-out}
.ghello:active{transform:scale(.99)}
.ghello .gav{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#4a8de0,#3573c6);color:#fff;font:600 1.1rem Rubik,system-ui,sans-serif}
.ghello .gtx{min-width:0;display:flex;flex-direction:column;gap:2px}
.ghello b{font:600 1.05rem/1.25 Rubik,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghello small{color:var(--mut);font-size:.82rem}

.tst-card p.tst-none{color:var(--mut);font-style:italic}

/* kartu produk setara: tiap bagian (judul, status, min. jual, gambar, stok, harga, tombol) sejajar antar kartu di satu baris */
@supports (grid-template-rows:subgrid){
  .grid .pcard{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:8px;align-content:start}
  .grid .pcard .btns{margin-top:0;align-self:end}
}
.grid .pcard .mn{min-height:1.4em}

/* header: nama toko lebih kecil, teks berjalan lebih cepat (kecepatan ~70px/detik diatur di app.js) */
.logo{font-size:15px;gap:8px;letter-spacing:.3px}
.logo .lgi{width:36px;height:36px}
.logo span b{margin-left:4px}
.mqi{animation-duration:12s}

/* hero: background Mafia Private Server, judul bergaya putih tebal berbingkai hitam */
.hero .hscene{height:220px;background:#15181c}
.hero .hscene .sc{left:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.hero .hscene .sc .bg{object-fit:cover;object-position:center;image-rendering:auto}
@media(min-width:720px){.hero .hscene{height:360px}}
.hero h1{color:#fff;font-weight:800;letter-spacing:.2px;line-height:1.12;-webkit-text-stroke:7px #0b0b10;paint-order:stroke fill;text-shadow:0 4px 0 #0b0b10;text-wrap:balance}

/* kartu harga: latar lorong Mafia Private Server + cahaya sesuai warna produk */
.pcard .stage{background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--ac) 60%,transparent) 0,transparent 62%),linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(8,10,16,.85) 100%),url(../img/mafia-card.webp) center top/cover #0e1118;background-blend-mode:normal;image-rendering:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pcard .stage .gemi{position:relative;z-index:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) drop-shadow(0 0 14px color-mix(in srgb,var(--ac) 60%,transparent))}
.pcard .stage::before{content:"";position:absolute;left:50%;bottom:12px;width:84px;height:12px;margin-left:-42px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.65),transparent 70%)}

/* Kartu ulasan: avatar, badge terverifikasi, item + jumlah, waktu */
.tst-list{display:flex;flex-direction:column;gap:12px;overflow:visible;scroll-snap-type:none;padding:2px 0 8px}
.rvc{display:flex;flex-direction:column;gap:12px;padding:16px;background:linear-gradient(180deg,#19243c,#131b2d);border:1px solid var(--line);border-radius:var(--r,14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.25)}
.rvc[hidden]{display:none}
.rvh{display:flex;align-items:center;gap:12px;min-width:0}
.rva{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:19px;color:#fff}
.rvn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rvn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvv{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ok,#3ddc97)}
.rvs{flex:none;padding:6px 8px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px}
.rvis{display:flex;flex-direction:column;gap:8px}
.rvit{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;min-width:0}
.rvit img{flex:none;width:32px;height:32px;object-fit:contain;padding:3px;background:rgba(255,255,255,.06);border-radius:8px}
.rvit b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.rvit em{flex:none;font-style:normal;font-weight:700;font-size:13px;padding:3px 9px;border-radius:8px;color:var(--gold);background:rgba(255,196,60,.12);border:1px solid rgba(255,196,60,.35);font-variant-numeric:tabular-nums}
.rvx{margin:0;font-style:italic;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.rvx:not(.tst-none)::before{content:"\201C"}.rvx:not(.tst-none)::after{content:"\201D"}
.rvx.tst-none{color:var(--mut)}
.rvf{display:flex;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
.rvf i{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.rvmore{align-self:center;margin-top:2px}
@media(max-width:360px){.rvs{padding:4px 6px}.rvs .stx{width:15px;height:15px}}