@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Figtree:wght@400;600;700&display=swap");
:root{--bg:#f4f0ff;--sf:#fff;--tx:#1d1637;--mu:#6b6488;--ln:#1d1637;--ac:#5b3df5;--pop:#ffb938;--ok:#12b886;--bad:#e5484d;--warn:#fff3d6;--sh:#1d1637}
@media(prefers-color-scheme:dark){:root{--bg:#120e27;--sf:#1f1941;--tx:#f4f0ff;--mu:#a9a2cc;--ln:#4a3f8a;--warn:#3a2c0a;--sh:#05030f}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 Figtree,system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
a{color:var(--ac)}
@media(prefers-color-scheme:dark){a{color:#b9a8ff}}
h1,h2,h3,.big{font-family:'Bricolage Grotesque',Figtree,sans-serif;margin:0}
main{max-width:480px;margin:0 auto;padding:16px 16px 48px}
.card,.hero{border:2px solid var(--ln);border-radius:24px;box-shadow:4px 4px 0 var(--sh);padding:18px;margin-bottom:18px;background:var(--sf)}
.card.warn{background:var(--warn)}
.card.ok-b{border-color:var(--ok)}
.hero{background:var(--ac);color:#fff;position:relative;overflow:hidden}
.hero a{color:#fff}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--pop)}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:30px;font-weight:800;margin:12px 0 4px;line-height:1.1}
.chip{display:inline-block;background:var(--pop);color:#1d1637;font-weight:700;font-size:14px;padding:6px 12px;border-radius:99px;border:2px solid #1d1637}
.chip.ok{background:var(--ok);color:#fff}.chip.bad{background:var(--bad);color:#fff}.chip.warn{background:var(--pop);color:#1d1637}.chip.mu{background:var(--bg);color:var(--mu);border-color:var(--ln)}
.cnt{font:800 54px/1 'Bricolage Grotesque',sans-serif;margin-top:8px}.cnt small{font-size:22px;opacity:.8}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:4px 0 14px}
.dot{aspect-ratio:1;border-radius:50%;border:2px dashed var(--mu);display:grid;place-items:center;font-weight:700;color:var(--mu)}
.dot.f{background:var(--pop);border:2px solid #1d1637;font-size:22px;box-shadow:2px 2px 0 var(--sh)}
.dot.sp{border-style:solid;border-color:var(--ac);color:var(--ac);font-size:20px}
.dot.pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.2) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.dot.pop{animation:none}}
label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
input,select{width:100%;padding:14px;font:inherit;font-size:17px;border:2px solid var(--ln);border-radius:14px;background:var(--bg);color:var(--tx)}
select{appearance:none;height:52px;padding:0 14px}
.kode-in{font:800 32px 'Bricolage Grotesque',sans-serif;letter-spacing:.3em;text-align:center}
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.btn{display:block;width:100%;margin-top:14px;padding:15px;font:800 17px 'Bricolage Grotesque',sans-serif;border:2px solid #1d1637;border-radius:16px;background:var(--pop);color:#1d1637;box-shadow:3px 3px 0 var(--sh);cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn:disabled,.acts button:disabled,.row button:disabled{opacity:.6;cursor:wait}
.btn.v{background:var(--ac);color:#fff}.btn.g{background:var(--ok);color:#fff}
.btn.s{background:var(--sf);color:var(--tx);border-color:var(--ln);box-shadow:none;font-size:15px;padding:11px}
.btn.mini{width:auto;margin:0;padding:6px 12px}
.mu{color:var(--mu);font-size:14px}
.msg{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--bg);border:2px solid var(--ln);font-weight:700;font-size:15px}
.msg.ok{border-color:var(--ok)}.msg.bad{border-color:var(--bad);color:var(--bad)}.msg.warn{background:var(--warn)}
.code{font:800 64px 'Bricolage Grotesque',sans-serif;letter-spacing:.1em;text-align:center;background:var(--pop);color:#1d1637;border:2px solid #1d1637;border-radius:20px;padding:12px 0 12px .1em;margin:12px 0}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:2px dashed var(--ln)}
.row.n{border-top:0}
.row>span{min-width:0;overflow-wrap:anywhere}
.row a,.row button{flex:none;font:700 14px Figtree,sans-serif;padding:10px 14px;border-radius:12px;background:var(--ok);color:#fff;border:2px solid #1d1637;text-decoration:none;cursor:pointer}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stats div{background:var(--bg);border:2px solid var(--ln);border-radius:16px;padding:12px;min-width:0}
.stats b{display:block;font:800 26px 'Bricolage Grotesque',sans-serif;overflow-wrap:anywhere}
.pg{height:16px;border-radius:99px;border:2px solid var(--ln);background:var(--bg);overflow:hidden;margin:10px 0 6px}.pg i{display:block;height:100%;background:var(--ac)}
.gl{display:flex;justify-content:space-between;margin-top:14px;gap:4px}
.gl div{flex:1;text-align:center;font-size:11px;font-weight:700;color:var(--mu);opacity:.45}.gl div span{display:block;font-size:26px}.gl .on{opacity:1;color:var(--tx)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.acts button,.acts a{padding:10px 6px;font:700 14px Figtree,sans-serif;border:2px solid var(--ln);border-radius:12px;background:var(--bg);color:var(--tx);cursor:pointer;text-align:center;text-decoration:none}
.acts .w{background:var(--ok);color:#fff;border-color:#1d1637}.acts .d{color:var(--bad)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tabs button{font:700 13px Figtree,sans-serif;padding:8px 12px;border-radius:99px;border:2px solid var(--ln);background:var(--bg);color:var(--tx);cursor:pointer}
.tabs button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
details.card>summary{cursor:pointer;list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:" ▾";color:var(--mu)}
details[open].card>summary::after{content:" ▴"}
.qrb svg{width:210px;height:210px;border:2px solid var(--ln);border-radius:14px;display:block;margin:12px auto}
.lnk{word-break:break-all;font-size:13px;color:var(--ac);font-weight:600}
code{background:var(--bg);padding:2px 6px;border-radius:6px}
.foot{text-align:center;font-size:13px;color:var(--mu);margin:8px 0 0}
/* Formulir, ringkasan & komponen pembelian */
textarea{width:100%;padding:14px;font:inherit;font-size:16px;border:2px solid var(--ln);border-radius:14px;background:var(--bg);color:var(--tx);min-height:84px;resize:vertical}
textarea:focus{outline:3px solid var(--ac);outline-offset:2px}
.rinci{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.rinci td{padding:8px 0;border-top:2px dashed var(--ln);vertical-align:top}
.rinci tr:first-child td{border-top:0}
.rinci td:last-child{text-align:right;white-space:nowrap;padding-left:10px;font-weight:700}
.rinci .tot td{border-top:2px solid var(--ln);font:800 20px 'Bricolage Grotesque',sans-serif;padding-top:12px}
.salin{flex:none;font:700 13px Figtree,sans-serif;padding:8px 12px;border-radius:10px;border:2px solid var(--ln);background:var(--sf);color:var(--tx);cursor:pointer}
.angka{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--pop);color:#1d1637;border:2px solid #1d1637;border-radius:18px;padding:12px 14px;margin-top:10px}
.angka b{font:800 32px 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.rek{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:2px solid var(--ln);border-radius:16px;background:var(--bg);margin-top:10px}
.rek b{font:800 19px 'Bricolage Grotesque',sans-serif;letter-spacing:.02em}
.tag{display:inline-block;font:700 12px Figtree,sans-serif;padding:4px 9px;border-radius:99px;border:2px solid var(--ln);background:var(--bg);color:var(--tx)}
.tag.ok{background:var(--ok);color:#fff;border-color:#1d1637}.tag.pop{background:var(--pop);color:#1d1637;border-color:#1d1637}.tag.v{background:var(--ac);color:#fff;border-color:#1d1637}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:48px;height:48px;border-radius:14px;border:2px solid var(--ln);background:var(--sf);color:var(--tx);font:800 22px Figtree,sans-serif;cursor:pointer}
.stepper output{min-width:44px;text-align:center;font:800 26px 'Bricolage Grotesque',sans-serif}
.pilih{display:grid;gap:10px;margin-top:6px}
.pilih label{margin:0;display:flex;gap:12px;align-items:flex-start;padding:14px;border:2px solid var(--ln);border-radius:16px;background:var(--bg);cursor:pointer;font-weight:600}
.pilih input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ac)}
.pilih label:has(input:checked){border-color:var(--ac);box-shadow:3px 3px 0 var(--ac)}
.pilih small{display:block;font-weight:600;color:var(--mu);font-size:13px;margin-top:2px}
.langkah{counter-reset:l;list-style:none;padding:0;margin:10px 0 0}
.langkah li{counter-increment:l;position:relative;padding:0 0 12px 40px}
.langkah li::before{content:counter(l);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--ac);color:#fff;font:800 14px 'Bricolage Grotesque',sans-serif;display:grid;place-items:center;border:2px solid #1d1637}
.kecil{font-size:13px}
.garis{border:0;border-top:2px dashed var(--ln);margin:14px 0}
/* Poster cetak A5 (bermerek, simetris) */
.sheet{width:148mm;height:210mm;box-sizing:border-box;padding:9mm 10mm 0;background:var(--pu) radial-gradient(rgba(255,255,255,.13) .55mm,transparent .6mm) 0 0/6mm 6mm;display:flex;flex-direction:column;align-items:center;overflow:hidden;font-family:Figtree,sans-serif;color:#fff;text-align:center;position:relative;page-break-after:always;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
.ps-bola{position:absolute;width:34mm;height:34mm;border-radius:50%;background:var(--ku);border:1.1mm solid var(--ti);top:-15mm}
.ps-bola.b1{left:-15mm}.ps-bola.b2{right:-15mm}
.ps-kilau{position:absolute;width:7mm;height:7mm;fill:var(--ku);top:34mm}
.ps-kilau.k1{left:9mm}.ps-kilau.k2{right:9mm}
.ps-merek{display:inline-flex;align-items:center;gap:2mm;font:800 13pt 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;position:relative}
.ps-merek svg{width:8.5mm;height:8.5mm}
.sheet h1{font:800 29pt/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;margin:4.5mm 0 0;color:#fff;position:relative}
.sheet h1 em{font-style:normal;display:inline-block;margin-top:1.2mm;background:var(--ku);color:var(--ti);padding:.6mm 3.5mm 1.4mm;border-radius:3.5mm;border:.9mm solid var(--ti);transform:rotate(-2deg)}
.ps-panel{margin-top:6mm;width:100%;background:#fff;color:var(--ti);border:1.2mm solid var(--ti);border-radius:9mm;box-shadow:0 2.4mm 0 var(--ti);padding:5mm 8mm 4.5mm;display:flex;flex-direction:column;align-items:center}
.ps-alis{font:700 8pt Figtree,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--pu)}
.ps-nama{font:800 24pt/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin:1.2mm 0 0;max-width:100%;overflow-wrap:anywhere}
.ps-nama.kosong{width:84mm;height:11mm;margin-top:2mm;border:.6mm dashed #8a83ad;border-radius:3mm;font:600 9pt Figtree,sans-serif;color:#8a83ad;display:flex;align-items:center;justify-content:center}
.ps-qr{margin-top:4.5mm;padding:2.5mm;border:.8mm solid var(--ti);border-radius:5mm;background:#fff}
.ps-qr svg{width:64mm;height:64mm;display:block}
.ps-scan{margin-top:3.5mm;display:flex;align-items:center;gap:2.5mm;font:800 10pt 'Bricolage Grotesque',sans-serif;letter-spacing:.3em;color:var(--pu);padding-left:.3em}
.ps-scan span{width:10mm;height:.8mm;border-radius:1mm;background:var(--ku)}
.ps-langkah{margin-top:7mm;width:100%;display:flex;align-items:flex-start;justify-content:center;gap:1.5mm}
.ps-lk{width:32mm;display:flex;flex-direction:column;align-items:center}
.ps-lk span{width:12mm;height:12mm;border-radius:50%;background:#fff;border:.9mm solid var(--ti);box-shadow:0 1mm 0 var(--ti);display:flex;align-items:center;justify-content:center}
.ps-lk svg{width:6.5mm;height:6.5mm;fill:none;stroke:var(--pu);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ps-lk b{font:800 11.5pt 'Bricolage Grotesque',sans-serif;margin-top:2mm;letter-spacing:-.01em}
.ps-lk small{font:600 8pt/1.2 Figtree,sans-serif;opacity:.9;margin-top:.4mm}
.ps-panah{width:8mm;margin-top:6mm;border-top:.7mm dashed rgba(255,255,255,.75)}
.ps-kaki{margin-top:auto;width:calc(100% + 20mm);background:var(--ti);color:#f4f0ff;font:600 8pt Figtree,sans-serif;padding:3.2mm 6mm}
.ps-kaki b{color:var(--ku)}
.ps-sobek{position:relative;align-self:stretch;margin:4.5mm -8mm 0;border-top:.7mm dashed #b9b2dc;height:0}
.ps-sobek::before,.ps-sobek::after{content:"";position:absolute;top:-4.4mm;width:8mm;height:8mm;border-radius:50%;background:var(--pu);border:1.2mm solid var(--ti)}
.ps-sobek::before{left:-5.2mm}.ps-sobek::after{right:-5.2mm}
/* Poster A5 untuk toko dengan Fitur Plus: QR sedikit lebih kecil agar muat baris keterangan */
.sheet.plus .ps-qr svg{width:54mm;height:54mm}.sheet.plus .ps-langkah{margin-top:4mm}
.ps-ekstra{margin-top:3mm;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6mm 2mm}
.ps-ekstra small{width:100%;font:600 7.5pt Figtree,sans-serif;opacity:.9}
.ps-ekstra span{display:inline-flex;align-items:center;gap:1.4mm;background:#fff;color:var(--ti);border:.7mm solid var(--ti);border-radius:99px;padding:1.1mm 3mm;font:800 8.5pt 'Bricolage Grotesque',sans-serif}
.ps-ekstra svg{width:4.2mm;height:4.2mm;fill:none;stroke:var(--pu);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Kartu nama 9 × 5,5 cm */
.kn{width:90mm;height:55mm;box-sizing:border-box;position:relative;overflow:hidden;font-family:Figtree,sans-serif;text-align:left;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kn *{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kn-d{background:var(--pu);color:#fff;padding:5.3mm 5.8mm;display:flex;flex-direction:column;justify-content:space-between}
.kn-bola{position:absolute;right:-12mm;top:-12mm;width:35mm;height:35mm;border-radius:50%;background:var(--ku)}
.kn-cincin{position:absolute;left:-8mm;bottom:-10.5mm;width:25mm;height:25mm;border-radius:50%;border:.8mm solid rgba(255,255,255,.18)}
.kn-merek{position:relative;display:flex;align-items:center;gap:2.6mm;margin-top:8mm;font:800 21pt/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.kn-merek svg{width:12mm;height:12mm;flex:none}
.kn-slogan{position:relative;display:flex;flex-direction:column;gap:1.4mm}
.kn-slogan b{font:800 12.5pt/1.1 'Bricolage Grotesque',sans-serif}.kn-slogan em{font-style:normal;background:var(--ku);color:var(--ti);padding:0 1.3mm;border-radius:1.6mm}
.kn-slogan small{font:600 7.2pt Figtree,sans-serif;color:#ece7ff}
.kn-b{background:#fff;color:var(--ti);padding:4.8mm 5.3mm 5.8mm;display:flex;gap:3.7mm}
.kn-garis{position:absolute;left:0;right:0;bottom:0;height:2.1mm;background:var(--pu)}.kn-garis::before{content:"";position:absolute;left:0;top:0;bottom:0;width:23mm;background:var(--ku)}
.kn-kiri{flex:1;min-width:0;display:flex;flex-direction:column}
.kn-nama{display:block;font:800 12.3pt/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.kn-jab{display:block;margin-top:.8mm;font:700 7.3pt/1.25 Figtree,sans-serif;color:var(--pu)}
.kn-pisah{border-top:.4mm dashed #b9b2dc;margin-top:3mm}
.kn-kontak{margin-top:auto;display:flex;flex-direction:column;gap:1.5mm;font:600 7.2pt/1.2 Figtree,sans-serif}
.kn-kontak div{display:flex;align-items:center;gap:1.8mm;min-width:0}.kn-kontak span{overflow-wrap:anywhere}.kn-kontak i{font-style:normal;font-weight:500;color:#6b6488}
.kn-kontak svg{width:3.4mm;height:3.4mm;flex:none;fill:none;stroke:var(--pu);stroke-width:2.2;stroke-linejoin:round}
.kn-kanan{flex:none;width:24mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3mm}
.kn-qr{width:22.2mm;height:22.2mm;padding:1.4mm;background:#fff;border:.5mm solid var(--ti);border-radius:2.6mm;box-shadow:.5mm .5mm 0 var(--ti)}
.kn-qr svg{width:100%;height:100%;display:block}
.kn-kanan small{font:700 6.5pt/1.2 Figtree,sans-serif;text-align:center}
.kn-pra{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}.kn-pra .kn{box-shadow:0 0 0 1px #d9d4f0,3px 3px 0 var(--ti);border-radius:2mm}
.kn-hal{width:90mm;height:55mm;overflow:hidden;break-after:page;page-break-after:always}
.kn-a4{width:210mm;height:297mm;padding:11mm 15mm;box-sizing:border-box;display:grid;grid-template-columns:90mm 90mm;grid-auto-rows:55mm;align-content:start;break-after:page;page-break-after:always}
.kn-a4 .kn{outline:.15mm dashed #c8c3e0}
/* Warna merek untuk poster & kartu nama. Saat dicetak dipakai versi yang bisa dibuat tinta CMYK (profil FOGRA39),
   supaya hasil di percetakan sama dengan pratinjau: ungu C80 M80 Y0 K0, kuning C0 M32 Y87 K0, tinta C85 M85 Y30 K75 */
.sheet,.kn,.kn-pra{--pu:#5b3df5;--ku:#ffb938;--ti:#1d1637}
.sheet [fill="#5b3df5"],.kn [fill="#5b3df5"]{fill:var(--pu)}.sheet [stroke="#5b3df5"],.kn [stroke="#5b3df5"]{stroke:var(--pu)}
.sheet [fill="#ffb938"],.kn [fill="#ffb938"]{fill:var(--ku)}.sheet [fill="#1d1637"],.kn [fill="#1d1637"]{fill:var(--ti)}.sheet [stroke="#1d1637"],.kn [stroke="#1d1637"]{stroke:var(--ti)}
@media print{.sheet,.kn{--pu:#594c98;--ku:#fbb837;--ti:#2c2739}}