:root{--bg:#070b16;--bg2:#0b1224;--card:#0f1930;--line:#1c2a48;--tx:#e8edf8;--mu:#8b9bb8;--blue:#2f6bff;--cy:#22d3ee;--gold:#fbbf24;--r:16px}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font:16px/1.6 Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden}
a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 20px}
section{padding:84px 0}h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:12px}.sub{color:var(--mu);max-width:640px}
.eyebrow{font:600 .75rem monospace;letter-spacing:.15em;color:var(--cy);margin-bottom:10px;display:block}
.center{text-align:center}.center .sub{margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:12px;font-weight:700;font-size:.9rem;border:1px solid transparent;cursor:pointer;transition:.25s;background:var(--blue);color:#fff;font-family:inherit}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--blue)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--tx)}.btn.ghost:hover{border-color:var(--cy);box-shadow:none}
.btn.gold{background:var(--gold);color:#201500}.btn.gold:hover{box-shadow:0 10px 30px -8px var(--gold)}
/* header */
header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(7,11,22,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:900;letter-spacing:.04em;display:flex;align-items:center;gap:10px}.logo b{color:var(--cy)}
.logo i{width:22px;height:22px;background:linear-gradient(135deg,var(--blue),var(--cy));border-radius:5px;box-shadow:0 0 18px var(--blue)}
#nav{display:flex;align-items:center;gap:26px;font-size:.88rem;color:var(--mu)}#nav a:hover{color:#fff}#nav .btn{color:#fff;padding:10px 18px}
#navToggle{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:10px;width:42px;height:42px;font-size:1.2rem;cursor:pointer}
/* hero */
.hero{padding-top:150px;background:radial-gradient(900px 500px at 80% 10%,rgba(47,107,255,.22),transparent),radial-gradient(600px 400px at 0 60%,rgba(34,211,238,.09),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem);font-weight:900}
.grad{background:linear-gradient(120deg,#6ea0ff,var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mu);margin:20px 0 30px;max-width:520px}.cta{display:flex;gap:12px;flex-wrap:wrap}
.miniwrap{position:relative;border-radius:20px;padding:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(47,107,255,.5);animation:fl 6s ease-in-out infinite}
.miniwrap canvas{width:100%;aspect-ratio:1;display:block;border-radius:12px}
.miniwrap span{position:absolute;left:18px;bottom:18px;font:600 .7rem monospace;background:rgba(7,11,22,.85);padding:5px 10px;border-radius:8px;color:var(--cy)}
@keyframes fl{50%{transform:translateY(-10px)}}
/* stats */
.stats{padding:0;margin-top:-10px}.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stat b{display:block;font:800 clamp(1.3rem,3vw,2rem) monospace;color:var(--cy)}.stat small{color:var(--mu);font-size:.78rem}
.note{font-size:.75rem;color:var(--mu);margin-top:12px;text-align:center}
/* canvas */
.board{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:30px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);font:.78rem monospace;color:var(--mu)}
.bar button{background:var(--bg2);border:1px solid var(--line);color:#fff;border-radius:9px;padding:8px 13px;cursor:pointer;font:600 .8rem Inter,sans-serif}.bar button:hover{border-color:var(--cy)}
.bar .sp{margin-left:auto}
#viewport{position:relative;height:calc(100dvh - 64px);min-height:320px;overflow:hidden;background:#050813;cursor:grab;touch-action:none;user-select:none}
#stage{position:absolute;left:0;top:0;width:1000px;height:1000px;transform-origin:0 0;box-shadow:0 0 0 2px var(--blue),0 0 60px rgba(47,107,255,.35)}
#canvas{display:block;width:1000px;height:1000px;image-rendering:auto}
#hl{position:absolute;border:2px solid var(--cy);box-shadow:0 0 18px var(--cy);pointer-events:none}
#tip{position:absolute;z-index:5;pointer-events:none;background:rgba(7,11,22,.96);border:1px solid var(--cy);border-radius:12px;padding:9px 12px;font-size:.8rem;max-width:230px}
#tip b{display:block}#tip span{color:var(--mu);font-size:.72rem}[hidden]{display:none!important}
/* promo */
.promo{background:linear-gradient(135deg,#1c1400,#2a1d00 50%,#161000);border-block:1px solid rgba(251,191,36,.35)}
.promo .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.promo h2{color:var(--gold);font-size:clamp(2rem,5vw,3.4rem);font-weight:900}.promo li{margin:6px 0 6px 18px;color:#e9d9a6;font-size:.92rem}.promo ul{margin:18px 0 26px}
.slots{text-align:center;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.4);border-radius:22px;padding:30px 20px}
.slots b{display:block;font:900 clamp(5rem,14vw,8rem)/1 Inter;color:var(--gold);text-shadow:0 0 40px rgba(251,191,36,.5)}
.slots span{font-weight:800;letter-spacing:.1em;color:var(--gold)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:16px}.dots i{width:18px;height:18px;border-radius:4px;background:var(--gold);opacity:.85}
/* cards */
.grid{display:grid;gap:18px;margin-top:40px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.step,.feat,.price{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.25s}
.step:hover,.feat:hover,.price:hover{border-color:var(--cy);transform:translateY(-4px)}
.step em{font:800 .8rem monospace;color:var(--cy);font-style:normal}.step h3{font-size:1.05rem;margin:8px 0}.step p,.feat p{color:var(--mu);font-size:.88rem}
.feat{display:flex;gap:14px;align-items:flex-start;padding:20px}.feat i{font-style:normal;font-size:1.5rem}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:36px}
.cat{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);font-size:.88rem;font-weight:600;transition:.25s}.cat:hover{background:var(--bg2);transform:translateX(4px)}.cat i{font-style:normal;font-size:1.4rem}
.price{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.price.hot{border-color:var(--blue);box-shadow:0 0 40px -10px var(--blue)}
.sq{background:linear-gradient(135deg,var(--blue),var(--cy));border-radius:4px;margin-bottom:6px}.price h3{font-size:1.1rem}.amt{font:800 1.6rem monospace;color:var(--cy)}.price small{color:var(--mu);margin-bottom:12px}.price .btn{margin-top:auto;width:100%}
.adcard{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 10px;color:var(--tx);cursor:pointer;font-family:inherit;transition:.25s}
.adcard:hover{border-color:var(--cy);transform:translateY(-4px)}.adcard canvas{max-width:100%;border-radius:6px;height:auto}.adcard b{font-size:.82rem}.adcard small{color:var(--mu);font-size:.7rem}
.final{text-align:center;background:radial-gradient(700px 300px at 50% 0,rgba(47,107,255,.3),transparent)}.final h2{font-size:clamp(1.8rem,4.5vw,3rem);max-width:780px;margin:0 auto 16px}.final .sub{margin:0 auto 28px}
footer{background:#050813;border-top:1px solid var(--line);padding:56px 0 26px;font-size:.85rem;color:var(--mu)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}footer h4{color:#fff;margin-bottom:10px;font-size:.85rem}footer a{display:block;margin:6px 0}footer a:hover{color:var(--cy)}
footer .copy{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;text-align:center;font-size:.78rem}
/* modal */
#modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,6,14,.8);backdrop-filter:blur(6px)}
.mbox{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;width:min(440px,100%)}
.mhead{display:flex;gap:16px;align-items:center;margin-bottom:16px}#mLogo{min-width:96px;min-height:50px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:10px;padding:6px}#mLogo canvas{max-width:96px;height:auto}
#mCat{font:600 .72rem monospace;color:var(--cy)}#mName{font-size:1.3rem}#mSize{font:.72rem monospace;color:var(--mu);margin:12px 0}
.mbox p{font-size:.9rem;color:#c3cde0}.macts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.macts .btn{padding:11px}.btn.wa{background:#22c55e;color:#04210f}
.x{position:absolute;right:14px;top:12px;background:none;border:0;color:var(--mu);font-size:1.5rem;cursor:pointer}
/* responsive */
@media(max-width:900px){
 section{padding:60px 0}.hero{padding-top:120px}.hero .wrap,.promo .wrap{grid-template-columns:1fr}.stgrid,.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr}.g6{grid-template-columns:repeat(3,1fr)}
 footer .cols{grid-template-columns:1fr 1fr}.miniwrap{max-width:420px;margin:auto}
 #navToggle{display:block}#nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 18px;display:none}
 #nav.open{display:flex}#nav a{padding:11px 0}#nav .btn{margin-top:8px}}
@media(max-width:520px){.g4,.g6{grid-template-columns:1fr 1fr}.bar .sp{margin-left:0}footer .cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.legend div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.legend span{grid-column:2;color:var(--mu);font-size:.8rem}.legend b{font-size:.9rem}
.lg{grid-row:span 2;width:30px;height:30px;border-radius:5px;display:block}
.lg.free{border:1px dashed var(--cy);background:rgba(96,165,250,.08)}.lg.ad{background:linear-gradient(135deg,#f97316,#7c2d12);border:1px solid rgba(255,255,255,.55)}
.lg.sz{width:14px;height:14px;background:var(--cy);margin:0 8px}
.use{color:var(--mu);font-size:.85rem}.adcard.empty{border-style:dashed;color:var(--mu);min-height:150px;justify-content:center}.adcard.empty span{font-size:2rem;color:var(--cy)}
#paneFree h3{font-size:1.3rem}.opt{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);transition:.2s}
a.opt:hover{border-color:var(--cy);transform:translateX(3px)}.opt span{grid-column:1;color:var(--mu);font-size:.78rem}.opt em{grid-row:1/span 2;grid-column:2;font:800 1rem monospace;color:var(--cy);font-style:normal;align-self:center}.opt.off{opacity:.4}
@media(max-width:900px){.legend{grid-template-columns:1fr}}

/* pemesanan mandiri */
#bwrap{display:grid;grid-template-columns:1fr}#bwrap.on{grid-template-columns:minmax(0,1fr) 360px}
#order{border-left:1px solid var(--line);background:var(--bg2);padding:14px 16px 18px;overflow:auto;max-height:calc(100dvh - 64px);font-size:.88rem}
.ohead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.x2{background:none;border:0;color:var(--mu);font-size:1.4rem;cursor:pointer}
.ostep{padding:0;margin:0 0 16px}.ostep h4{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.92rem}
.ostep h4 i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:.75rem}
.hint{color:var(--mu);font-size:.76rem;line-height:1.45}
.osizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.osizes button{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--tx);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:2px;transition:.2s}
.osizes button.on{border-color:var(--cy);background:rgba(34,211,238,.1)}.osizes small{color:var(--cy);font:700 .75rem monospace}
.chk{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:.8rem;color:#e9d9a6}
.xy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.xy label{display:flex;align-items:center;gap:8px;color:var(--mu);font-weight:700}
#order input:not([type=checkbox]):not([type=file]),#order select,#order textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--tx);padding:10px 12px;font:inherit;font-size:.85rem;margin-bottom:8px}
#order input:focus,#order select:focus,#order textarea:focus{outline:none;border-color:var(--cy)}
.ostat{padding:8px 10px;border-radius:8px;font-size:.8rem;font-weight:600;background:var(--card)}.ostat.ok{color:#4ade80}.ostat.bad{color:#f87171}
.file{display:block;border:1px dashed var(--cy);border-radius:10px;padding:11px;text-align:center;cursor:pointer;color:var(--cy);font-weight:600;margin-bottom:6px}.file input{display:none}
.osum{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;background:var(--card);border-radius:10px;padding:12px;margin-bottom:10px}.osum span{color:var(--mu)}.osum b{text-align:right}.tot{color:var(--cy);font-size:1.05rem}
.oerr{color:#f87171;font-size:.8rem;margin-bottom:8px}.odone{margin-top:10px;padding:10px;border-radius:10px;background:rgba(34,197,94,.12);color:#86efac;font-size:.8rem}
#ghost{position:absolute;pointer-events:none;border:2px solid #22c55e;background:rgba(34,197,94,.28);box-shadow:0 0 14px #22c55e;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:3}
#ghost.bad{border-color:#ef4444;background:rgba(239,68,68,.35);box-shadow:0 0 14px #ef4444}#ghost img{width:100%;height:100%;object-fit:contain}
.bar button.primary{background:var(--blue);border-color:var(--blue)}button.opt{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}
@media(max-width:900px){#bwrap.on{grid-template-columns:1fr}#order{max-height:none;border-left:0;border-top:1px solid var(--line)}}

.lg.pe{border:1.5px dashed var(--gold);background:rgba(251,191,36,.12)}.dots i.used{opacity:.18}
.banner{margin-top:20px;padding:12px 16px;border-radius:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fca5a5;font-size:.88rem;text-align:center}
/* admin */
.admtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.admbox{max-width:380px;margin:60px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.admbox h2{font-size:1.4rem}.admbox input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--tx);padding:12px;margin:14px 0 10px;font:inherit}
.admstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.admstats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.admstats b{display:block;font:800 1.4rem monospace;color:var(--cy)}.admstats small{color:var(--mu)}
.tabs{display:flex;gap:8px;margin:22px 0 14px;flex-wrap:wrap}.tabs button{background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:10px 16px;cursor:pointer;font:600 .85rem Inter,sans-serif}.tabs button.on{background:var(--blue);border-color:var(--blue)}
.admlist{display:grid;gap:12px}.ocard{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.olg{width:96px;height:96px;border-radius:10px;background:var(--bg);display:grid;place-items:center;overflow:hidden;font-size:2rem}.olg img{max-width:100%;max-height:100%;object-fit:contain}
.oinfo h3{font-size:1.05rem}.ometa{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0;font-size:.85rem}.tag{font-style:normal;font-size:.65rem;font-weight:800;background:var(--gold);color:#201500;border-radius:6px;padding:2px 7px;vertical-align:middle}
.oact{display:flex;flex-direction:column;gap:8px}.oact .btn{padding:9px 16px;font-size:.82rem}.del{color:#f87171}
@media(max-width:900px){.legend{grid-template-columns:1fr 1fr}.admstats{grid-template-columns:1fr 1fr}.ocard{grid-template-columns:72px 1fr}.olg{width:72px;height:72px}.oact{grid-column:1/-1;flex-direction:row}}
@media(max-width:520px){.legend{grid-template-columns:1fr}}

/* Kalkulator ukuran bebas */
.calc{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:center;max-width:760px;margin:0 auto 28px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.calc label{display:flex;align-items:center;gap:8px;color:var(--mu);font-weight:700}
.calc input,.xy input{width:92px;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font:700 1rem monospace}
.calc>span{color:var(--mu);font-weight:800}.cres{text-align:left;min-width:170px}.cres b{display:block;font:800 1.25rem monospace;color:var(--cy)}.cres small{color:var(--mu)}
.xy input:disabled{opacity:.5}

/* Lapisan logo tajam & daftar pengiklan */
#adlayer{position:absolute;inset:0;pointer-events:none;z-index:1}
#adlayer .al{position:absolute;box-sizing:border-box;background:#0b1224;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}
#adlayer .al.pe{border:1.5px dashed #fbbf24}#adlayer .al.pe img{opacity:.7}
#adlayer .al img{width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box}
#hl{z-index:2}
.dirsec{padding-top:0}.dirh{font-size:1.2rem;margin-bottom:6px}
.dirlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:320px;overflow:auto}
.diri{display:flex;gap:10px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer}
.diri:hover{border-color:var(--cy)}.diri.pe{border-style:dashed;border-color:#fbbf24}
.diri canvas{width:48px;height:48px;object-fit:contain;border-radius:6px;background:#0b1224;flex:none}
.diri span{display:flex;flex-direction:column;min-width:0}.diri b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diri small{color:var(--mu)}
.setbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;margin:14px 0;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.setbox input{width:120px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font:700 1rem monospace}.setbox small{flex-basis:100%}

/* Paket harga */
.mulai{display:inline-block;margin:0 0 18px;padding:9px 16px;border-radius:999px;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.5);color:var(--gold);font-size:1rem}
.mulai b{color:#fff}
.pkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;margin-top:8px}
.pk{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pk.pop{border:2px solid var(--blue);box-shadow:0 0 28px rgba(47,107,255,.25)}
.pkTag{position:absolute;top:12px;right:12px;font-style:normal;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(47,107,255,.2);color:#8fb2ff}
.pkName{font-weight:800;letter-spacing:.08em;color:var(--mu)}
.pkAmt{font:800 1.45rem monospace;overflow-wrap:anywhere;color:#22c55e;margin:6px 0 8px}
.pkPx{align-self:flex-start;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--bg2);color:var(--mu)}
.pk ul{list-style:disc;margin:14px 0 18px;padding-left:18px;font-size:.85rem;color:var(--tx);flex:1}.pk li{margin-bottom:6px}
.pk .btn{width:100%;text-align:center}
#adlayer .al.nb{border:0}#adlayer .al.nb img{padding:0}

@media(max-width:980px){.pkgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.pkgrid{grid-template-columns:1fr}}

/* kanvas memenuhi lebar layar penuh (PC & HP) */
#papan-iklan>.wrap{max-width:none;padding:0}
#papan-iklan .center,#papan-iklan #offline{padding-left:20px;padding-right:20px}
#papan-iklan #offline{margin-left:20px;margin-right:20px}
#papan-iklan .board{border-radius:0;border-left:0;border-right:0}

/* peringatan konten (admin) */
.flagbox{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;padding:10px 12px;border-radius:10px;font-size:.82rem}
.flagbox small{opacity:.8;font-size:.72rem}
.flagbox.hi{background:rgba(239,68,68,.14);border:1px solid #ef4444;color:#fca5a5}
.flagbox.wr{background:rgba(251,191,36,.12);border:1px solid #fbbf24;color:#fde68a}
.admstats .warnstat{border-color:#fbbf24}.admstats .warnstat b{color:#fbbf24}
.rules{margin-top:8px;padding:9px 11px;border-radius:10px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.35);color:#fde68a;font-size:.74rem}

/* tampilan ringkas ala Million Dollar Homepage: kanvas di depan, teks seminimal mungkin */
body{overflow-x:hidden}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.top .logo{font-size:1.05rem}.top .slogan{color:var(--mu);font-size:.78rem;flex:1;min-width:180px}
.top .btn{padding:8px 16px;font-size:.78rem}
.top .topnav{margin-left:auto}
.infobar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:6px 14px;background:var(--bg);border-bottom:1px solid var(--line);font:.74rem monospace;color:var(--mu)}
.infobar b{color:var(--cy)}.infobar .promo1{margin-left:auto;color:var(--gold)}.infobar .promo1 b{color:var(--gold)}
.infobar .promo1 a{margin-left:6px;padding:2px 9px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-weight:700;cursor:pointer}
#papan-iklan{padding:0}.board{margin-top:0;border-top:0}
.minifoot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:9px 14px;background:var(--bg2);border-top:1px solid var(--line);font-size:.72rem;color:var(--mu)}
.minifoot a{color:var(--cy)}
@media(max-width:700px){.top .slogan{display:none}.top{justify-content:space-between}.infobar .promo1{margin-left:0}}
@media(max-width:700px){.bar{padding:8px 10px;gap:6px}.bar button{padding:6px 10px;font-size:.74rem}.bar .sp{display:none}.infobar{font-size:.68rem}}

.axl{position:absolute;z-index:2;pointer-events:none;font:600 10px monospace;color:rgba(148,170,210,.8);text-shadow:0 0 3px #050813}
#empty{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;pointer-events:none;width:max-content;max-width:90%}
#empty b{font:800 clamp(1rem,2.6vw,1.9rem) Inter,sans-serif;color:rgba(255,255,255,.88)}
#empty span{font:600 clamp(.7rem,1.4vw,1rem) Inter,sans-serif;color:rgba(34,211,238,.9)}
#empty small{font:500 clamp(.65rem,1.2vw,.85rem) Inter,sans-serif;color:rgba(148,170,210,.8)}

/* ===== TEMA PUTIH ===== */
:root{--bg:#ffffff;--bg2:#f3f6fb;--card:#ffffff;--line:#d7dfec;--tx:#0f172a;--mu:#5b6b85;--cy:#0e7490;color-scheme:light}
body{background:#fff;color:var(--tx)}
#viewport{background:#eef2f8}
.axl{color:#475569;text-shadow:0 0 3px #fff,0 0 3px #fff}
#empty b{color:#0f172a}#empty span{color:#0e7490}#empty small{color:#64748b}
#adlayer .al{background:#fff;border-color:rgba(15,23,42,.4)}
#tip{background:rgba(255,255,255,.97);color:var(--tx);box-shadow:0 8px 30px rgba(15,23,42,.18)}
.bar button:not(.primary){color:var(--tx);background:#fff}
.bar button:hover{border-color:var(--blue)}
.banner,#offline{margin:0;border-radius:0;border-width:0 0 1px;padding:7px 14px;background:#fef2f2;border-color:#fecaca;color:#b91c1c;font-size:.78rem}
.infobar .promo1,.infobar .promo1 b{color:#b45309}.infobar .promo1 a{border-color:#d97706;color:#b45309}
.infobar b{color:#0e7490}
.top .logo,.minifoot .logo{color:var(--tx)}
.minifoot a{color:#0e7490}
.flagbox.hi{color:#b91c1c;background:rgba(239,68,68,.08)}.flagbox.wr{color:#92400e;background:rgba(251,191,36,.14)}
.rules{color:#92400e;background:rgba(251,191,36,.12)}
.oerr{color:#dc2626}.odone{color:#15803d}
.tabs button.on{color:#fff}
.admstats .warnstat b{color:#b45309}

/* kanvas persegi selebar layar; halaman boleh di-scroll, toolbar & panel pesanan ikut menempel di atas */
.board{overflow:visible}
.bar{position:sticky;top:0;z-index:20;background:var(--bg2)}
#bwrap{align-items:start}
#order{position:sticky;align-self:start}

/* kartu tagline: sejajar logo, tepat di tengah */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.top .logo{justify-self:start}.top .topnav{justify-self:end;margin-left:0}
.tagcard{justify-self:center;white-space:nowrap;padding:7px 18px;border-radius:999px;background:linear-gradient(90deg,#2f6bff,#1d4ed8);color:#fff;font:900 .82rem Inter,system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 4px 16px -4px rgba(47,107,255,.7)}
.tagcard b{color:#a5f3fc;font-weight:900}
@media(max-width:700px){.top{grid-template-columns:1fr auto}.tagcard{grid-column:1/-1;grid-row:2;font-size:.64rem;padding:6px 14px;white-space:normal;text-align:center;border-radius:14px;max-width:100%}}

/* logo situs (gambar) */
.logo .bt{display:inline-flex;align-items:center;gap:10px}
.logo .logoimg{display:block;height:34px;max-width:220px;width:auto;object-fit:contain}
.minifoot .logo .logoimg{height:22px}
.admtop .logo .logoimg{height:40px}
.lgprev{display:inline-flex;align-items:center;justify-content:center;min-width:90px;height:48px;padding:4px 10px;background:var(--bg2);border:1px dashed var(--line);border-radius:8px}
.lgprev img{max-height:40px;max-width:180px}.lgprev em{font-size:.72rem;color:var(--mu)}
@media(max-width:700px){.top .logo .logoimg{height:28px;max-width:150px}}

.opay{margin-top:10px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--tx);font-size:.82rem}
.opay-t{margin:6px 0}.opay-r{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}.opay-r span{color:var(--mu)}.opay-r b{word-break:break-all}
.opay-q{margin-top:10px;text-align:center}.opay-q span{display:block;color:var(--mu);margin-bottom:6px}.opay-q img{max-width:220px;width:100%;background:#fff;border-radius:8px;padding:6px}
.opay .btn{width:100%}
.odone .opay{color:var(--tx)}

footer.minifoot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 16px;text-align:center}
footer.minifoot .mf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
footer.minifoot a{display:inline;margin:0}

.tgprev{flex-basis:100%;display:flex;justify-content:center;padding:10px 0}.tgprev .tagcard{max-width:100%;white-space:normal;text-align:center}
.setbox .clr{width:44px;height:34px;padding:2px;cursor:pointer}
.setbox select{font:inherit}
@media(max-width:600px){
#tagBox>span:not(.tagcard),#payBox>span:not(.lgprev){flex-basis:100%;margin-bottom:-6px;font-size:.8rem;color:var(--mu)}
#tagBox input:not(.clr),#tagBox select,#payBox input:not([type=file]),#copyBox input{width:100%!important}
#tagBox .clr{flex:0 0 auto}
#tagBox .btn,#payBox .btn,#copyBox .btn{flex:1 1 140px}
.setbox{padding:14px}
}
@media(max-width:700px){
.infobar{padding:6px 10px;gap:4px 10px;font-size:min(.68rem,2.5vw)}
.infobar>span:not(.promo1){white-space:nowrap}
.infobar .promo1{flex-basis:100%;margin-left:0;font-size:max(.68rem,2.5vw)}
}
footer.minifoot{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;text-align:left;line-height:1.4}
footer.minifoot>span#copyTxt{flex:1 1 auto;min-width:0;text-align:left}
footer.minifoot .mf-links{flex:0 0 auto;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:14px;text-align:right}
footer.minifoot .mf-links a{display:inline-block;margin:0;line-height:1.4;white-space:nowrap}
footer.minifoot .mf-links a[hidden]{display:none}
@media(max-width:480px){footer.minifoot{padding:12px 12px;gap:8px;font-size:.68rem}footer.minifoot .mf-links{gap:10px}}