/* ================================================================
   REDLINE DIGITAL — NEO-BRUTALIST SKIN  (ditulis tangan, bukan template)
   Bahasa visual: kertas krem · garis hitam tebal · bayangan offset keras
   · blok warna (merah lava / kuning taxi / biru listrik) · display type.
   Semua nama kelas & variabel lama TETAP ADA supaya template aman.
   ================================================================ */
@font-face{
  font-family:"Archivo Black";src:url("/static/fonts/archivo-black.woff2") format("woff2");
  font-weight:400 900;font-display:swap}
@font-face{
  font-family:"Space Grotesk";src:url("/static/fonts/space-grotesk-400.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{
  font-family:"Space Grotesk";src:url("/static/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight:700;font-display:swap}

:root{
  --paper:#f4efe3;  --paper2:#fffdf4;  --ink:#141312;
  --bg:#f4efe3;     --bg2:#ece5d3;      --panel:#fffdf4; --panel2:#f9f5e9;
  --line:#141312;   --line2:#141312;
  --txt:#141312;    --mut:#57534a;      --dim:#8a8578;
  --acc:#ff4d2e;    --acc2:#d63a1e;     --yel:#ffd23f;  --blu:#2f6bff;
  --ok:#1d9e57;     --warn:#b9770e;     --info:#2f6bff;
  --mono:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --disp:"Archivo Black","Arial Black",Impact,sans-serif;
  --bd:2px solid var(--ink);
  --sh:4px 4px 0 var(--ink);  --sh2:7px 7px 0 var(--ink);
  --r:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] HARUS menang atas class apa pun. Tanpa ini, .cspanel{display:flex}
   mengalahkan atribut hidden bawaan HTML → panel CS selalu terbuka dan
   menutupi tombolnya sendiri (tak bisa diklik). Bug nyata, baru ketahuan
   dari tangkapan layar, bukan dari uji HTTP. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--txt);font-family:var(--sans);font-size:15.5px;
  line-height:1.55;
  background-image:radial-gradient(rgba(20,19,18,.10) 1.1px,transparent 1.1px);
  background-size:22px 22px}
body[dir=rtl]{text-align:right}
a{color:var(--txt);text-decoration:none;border-bottom:2px solid var(--acc)}
a:hover{background:var(--yel)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1.05;
  text-transform:uppercase}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:1.15rem}
h3{font-size:1rem}
code,.mono{font-family:"Space Grotesk",Consolas,monospace;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--mut)} .small{font-size:.83rem} .center{text-align:center}
::selection{background:var(--yel)}

/* ---------- header ---------- */
.top{border-bottom:3px solid var(--ink);background:var(--paper2);
  position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);
  font-size:1.05rem;letter-spacing:.02em;color:var(--txt);text-transform:uppercase}
.brand:hover{background:transparent}
.brand .dot{width:26px;height:26px;background:var(--acc);border:var(--bd);
  box-shadow:3px 3px 0 var(--ink)}
.brand em{font-style:normal;color:var(--acc)}
nav.main{display:flex;gap:2px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--txt);padding:9px 13px;font-weight:700;font-size:.9rem;
  border:2px solid transparent;border-bottom:none}
nav.main a:hover{background:var(--yel);text-decoration:none}
nav.main a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cart-n{background:var(--acc);color:#fff;border:2px solid var(--ink);padding:0 7px;
  font-weight:700;margin-inline-start:6px;display:inline-block}
.langsel{background:var(--paper2);border:var(--bd);color:var(--txt);
  font-family:var(--sans);font-weight:700;font-size:.82rem;padding:7px 8px;border-radius:0}

/* ---------- ticker ---------- */
/* Mulus tanpa putus: template mengulang pesan 12x (dua paruh identik), dan
   animasi menggeser tepat -50% = 6 salinan. Karena pola berulang tiap 1 salinan,
   posisi akhir identik dengan posisi awal → loop tak berkedip.
   Paruh (6 salinan ≈ 7.400px) harus lebih lebar dari viewport agar tak ada
   ruang kosong saat geseran selesai. flex + width:max-content menghapus celah
   spasi yang dulu muncul dari white-space antar-tag inline-block. */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;
  border-bottom:3px solid var(--ink);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase}
/* Kecepatan = lebar paruh / durasi. Paruh 6 salinan ≈ 6.950px; 70s memberi
   ≈99px/detik — cukup lambat untuk dibaca, tetap terasa hidup. */
.ticker-in{display:flex;width:max-content;white-space:nowrap;padding:7px 0;
  will-change:transform;animation:tick 70s linear infinite}
.ticker-in span{flex:0 0 auto}
.ticker-in b{color:var(--yel);margin:0 14px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-in{animation:none}}

/* ---------- hero ---------- */
.hero{padding:64px 0 44px;border-bottom:3px solid var(--ink);position:relative;
  background:
    linear-gradient(0deg,rgba(255,210,63,.22),rgba(255,210,63,0) 55%)}
.hero .kick{display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--disp);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border:var(--bd);box-shadow:3px 3px 0 var(--acc)}
.hero h1{margin:.45em 0 .4em;max-width:21ch}
.hero h1 em{font-style:normal;color:var(--acc);-webkit-text-stroke:1.5px var(--ink)}
.hero p{color:var(--mut);max-width:56ch;margin-bottom:1.6em;font-size:1.02rem}
.hero .sticker{position:absolute;top:66px;inset-inline-end:26px;transform:rotate(4deg);
  background:var(--yel);border:var(--bd);box-shadow:var(--sh);padding:10px 14px;
  font-family:var(--disp);font-size:.85rem;text-transform:uppercase;text-align:center}
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.92rem;
  padding:12px 22px;border:var(--bd);background:var(--paper2);color:var(--txt);
  box-shadow:var(--sh);transition:transform .1s,box-shadow .1s;border-radius:0;
  text-transform:uppercase;letter-spacing:.02em}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
  text-decoration:none;background:var(--paper2)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2)}
.btn.danger{background:var(--paper2);color:var(--acc2);border-color:var(--acc2);
  box-shadow:4px 4px 0 var(--acc2)}
.btn.sm{padding:7px 13px;font-size:.8rem;box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.live{display:inline-flex;align-items:center;gap:7px;font-weight:700;
  font-size:.75rem;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
.live i{width:9px;height:9px;background:var(--ok);border:2px solid var(--ink);
  animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- toolbar / chips ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:26px 0}
.toolbar .search{flex:1;min-width:230px;display:flex}
.toolbar .search input{border-right:none}
.toolbar .search .btn{border-left:none}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=url],select,textarea{
  width:100%;background:#fff;border:var(--bd);color:var(--txt);
  padding:11px 13px;font-family:var(--sans);font-weight:500;font-size:.92rem;
  border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--sh)}
textarea{min-height:90px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-weight:700;font-size:.8rem;padding:7px 14px;border:var(--bd);
  background:var(--paper2);color:var(--txt);cursor:pointer;display:inline-block}
.chip:hover{background:var(--yel);text-decoration:none}
.chip.on{background:var(--ink);color:var(--paper)}

/* ---------- grid produk ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:20px;padding-bottom:48px}
.card{background:var(--paper2);border:var(--bd);box-shadow:var(--sh);
  display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s;
  position:relative;overflow:visible}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh2)}
.card .ph{aspect-ratio:16/9;background:var(--bg2);display:flex;align-items:center;
  justify-content:center;color:var(--dim);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:var(--bd);overflow:hidden;
  background-image:radial-gradient(rgba(20,19,18,.09) 1.2px,transparent 1.2px);
  background-size:14px 14px}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .bd{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .bd h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;
  text-transform:none;line-height:1.3}
.card .bd h3 a,.card .foot a{border-bottom:none}
.card .bd h3 a:hover{background:var(--yel)}
.card .cat{font-weight:700;font-size:.68rem;color:var(--paper);background:var(--ink);
  padding:3px 8px;align-self:flex-start;text-transform:uppercase;letter-spacing:.1em}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding-top:6px;border-top:2px dashed var(--ink)}
.price{font-weight:700;font-size:1.18rem}
.price s{color:var(--dim);font-size:.85rem;margin-inline-end:6px}
.price .usd{color:var(--mut);font-size:.75rem;display:block;font-weight:500}
.badge{position:absolute;top:-10px;inset-inline-start:12px;z-index:2;
  font-family:var(--disp);font-size:.7rem;letter-spacing:.06em;padding:5px 10px;
  border:var(--bd);box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);color:var(--ink)}
.badge.new{background:var(--yel)}
.badge.hot{background:var(--acc);color:#fff}
.badge.off{background:var(--blu);color:#fff}
.stock-ok{color:var(--ok);font-weight:700}
.stock-low{color:var(--warn);font-weight:700}
.stock-out{color:var(--acc2);font-weight:700}

/* ---------- panel & form ---------- */
.panel{background:var(--paper2);border:var(--bd);box-shadow:var(--sh);
  padding:24px;margin:26px 0}
.panel h2{margin-bottom:14px;background:var(--yel);display:table;padding:4px 10px;
  border:var(--bd);box-shadow:3px 3px 0 var(--ink)}
.form{display:grid;gap:15px}
.form label{display:grid;gap:6px;font-size:.88rem;font-weight:700}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.err{background:#ffe3dc;border:var(--bd);box-shadow:var(--sh);color:var(--acc2);
  padding:11px 15px;font-weight:700;font-size:.9rem}
.ok-msg{background:#dcf5e4;border:var(--bd);box-shadow:var(--sh);color:#0d5c31;
  padding:11px 15px;font-weight:700;font-size:.9rem}
.flash{margin:16px 0}
label.opt{display:flex;gap:12px;align-items:center;border:var(--bd);
  padding:13px 15px;background:#fff;cursor:pointer;font-weight:700}
label.opt:hover{background:var(--yel)}

/* ---------- tabel ---------- */
.tblwrap{overflow-x:auto;max-width:100%}
table.t{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--paper2);
  border:var(--bd)}
table.t th{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;text-align:start;padding:11px 13px;background:var(--ink);
  color:var(--paper);border-bottom:var(--bd)}
table.t td{padding:12px 13px;border-bottom:2px solid rgba(20,19,18,.25);
  vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tr:hover td{background:var(--panel2)}
.pill{display:inline-block;font-weight:700;font-size:.72rem;padding:3px 10px;
  border:2px solid var(--ink);background:var(--paper2)}
.pill.ok{background:#dcf5e4}
.pill.warn{background:var(--yel)}
.pill.err{background:#ffe3dc;color:var(--acc2)}
.pill.info{background:#dbe7ff}
.pill.mut{background:var(--bg2)}

/* ---------- halaman produk ---------- */
.pd{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin:30px 0}
@media(max-width:820px){.pd{grid-template-columns:1fr}}
.pd .ph{border:var(--bd);box-shadow:var(--sh2);aspect-ratio:16/9;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;color:var(--dim);overflow:hidden}
.pd .ph img{width:100%;height:100%;object-fit:contain}
.pd h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:.35em 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:.9rem;margin:16px 0;
  border:var(--bd);background:#fff;padding:14px}
.kv b{color:var(--paper);background:var(--ink);font-weight:700;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.1em;align-self:center;padding:3px 8px}

/* ---------- checkout ---------- */
.sumline{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:.94rem}
.sumline.total{border-top:3px solid var(--ink);margin-top:8px;padding-top:13px;
  font-weight:700;font-size:1.25rem}
.paym{display:grid;gap:11px}
.paym label.opt{display:flex;gap:12px;align-items:center}
.paym input{width:auto}
.paym .note{font-size:.78rem;color:var(--mut);margin-top:4px}

/* ---------- invoice ---------- */
.inv{border:var(--bd);box-shadow:var(--sh2);background:var(--paper2);padding:30px;margin:26px 0}
.inv .head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:3px solid var(--ink);padding-bottom:18px;margin-bottom:18px}
.inv .kick{display:inline-block;background:var(--acc);color:#fff;font-family:var(--disp);
  font-size:.72rem;letter-spacing:.1em;padding:4px 10px;border:var(--bd)}
.code-box{font-weight:700;background:var(--yel);border:var(--bd);box-shadow:var(--sh);
  padding:12px 15px;margin:10px 0;display:flex;justify-content:space-between;gap:10px;
  align-items:center;flex-wrap:wrap}
.stars{display:inline-flex;gap:6px;direction:ltr;align-items:center}
.stars input{width:auto;accent-color:var(--acc)}

/* ---------- footer ---------- */
footer.foot{border-top:3px solid var(--ink);margin-top:48px;padding:26px 0 42px;
  background:var(--ink);color:var(--paper)}
footer.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:center}
footer.foot a{color:var(--paper);border-bottom-color:var(--yel)}
.msgpage{min-height:58vh;display:flex;align-items:center;justify-content:center}

/* ---------- OAuth (login/daftar lewat penyedia) ---------- */
.oauth-sep{display:flex;align-items:center;gap:10px;margin:16px 0 12px;
  color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:2px;background:var(--line)}
.oauth-list{display:flex;flex-direction:column;gap:8px}
.btn.oauth{display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;width:100%;text-transform:none;letter-spacing:0}
.btn.oauth .oauth-ic{width:16px;height:16px;flex:0 0 16px;border:2px solid var(--ink);
  border-radius:50%;background:var(--paper)}
.btn.oauth-google .oauth-ic{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,
  #34a853 0 75%,#4285f4 0)}
.btn.oauth-microsoft .oauth-ic{border-radius:2px;
  background:linear-gradient(90deg,#f25022 0 50%,#7fba00 0) top/100% 50% no-repeat,
             linear-gradient(90deg,#00a4ef 0 50%,#ffb900 0) bottom/100% 50% no-repeat}
.btn.oauth-github .oauth-ic{background:var(--ink)}

/* ---------- ADMIN ---------- */
body.admin{background-image:radial-gradient(rgba(20,19,18,.08) 1px,transparent 1px);
  background-size:18px 18px}
body.admin .top{background:var(--ink);color:var(--paper);border-bottom:3px solid var(--acc)}
body.admin .brand{color:var(--paper)}
body.admin .brand .dot{background:var(--yel);box-shadow:3px 3px 0 var(--acc)}
body.admin .brand em{color:var(--yel)}
body.admin nav.main a{color:var(--paper)}
body.admin nav.main a:hover{background:var(--acc);color:#fff}
body.admin nav.main a.on{background:var(--yel);color:var(--ink)}
body.admin footer.foot{background:var(--acc);color:#fff;border-top-color:var(--ink)}
body.admin footer.foot a{color:#fff;border-bottom-color:var(--ink)}
body.admin .wrap{max-width:1320px}
aside.sidenav{display:flex;gap:6px;flex-wrap:wrap;padding:16px 0}
aside.sidenav a{font-weight:700;font-size:.8rem;color:var(--txt);padding:8px 13px;
  border:var(--bd);background:var(--paper2);box-shadow:3px 3px 0 var(--ink)}
aside.sidenav a:hover{background:var(--yel);text-decoration:none}
aside.sidenav a.on{background:var(--acc);color:#fff}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:14px;margin:22px 0}
.stat{border:var(--bd);background:var(--paper2);padding:18px;box-shadow:var(--sh)}
.stat .n{font-family:var(--disp);font-size:1.4rem}
.stat .l{font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--mut);
  text-transform:uppercase;margin-top:5px}
.hint{color:var(--mut);font-size:.8rem;font-weight:500}
.qr{max-width:280px;border:var(--bd);box-shadow:var(--sh);background:#fff}

/* ---------- grafik ---------- */
.chartrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:16px}
.chartbox h3{font-family:var(--sans);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;
  background:var(--ink);color:var(--paper);display:table;padding:3px 8px}
.chart{display:flex;align-items:flex-end;height:140px;gap:4px;
  border:var(--bd);background:#fff;padding:8px 6px 0}
.barwrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;gap:3px;text-align:center;min-width:0}
.bar{background:var(--acc);border:2px solid var(--ink);border-bottom:none;
  min-height:3px;transition:height .4s}
.chart.ord .bar{background:var(--yel)}
.barval{font-size:.6rem;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.barwrap span{font-size:.55rem;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ---------- reseller strip ---------- */
.reseller-strip{background:var(--yel);border-bottom:3px solid var(--ink);
  color:var(--ink);font-weight:700;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 0;text-align:center}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:20px;inset-inline-end:20px;background:var(--ink);
  color:var(--paper);border:3px solid var(--acc);box-shadow:var(--sh);
  padding:13px 19px;font-weight:700;font-size:.85rem;display:none;z-index:99}

/* ---------- widget live / suara / CS (neo-brutalist, sejalan kulit toko) ---------- */
#rd-widgets{position:fixed;bottom:18px;inset-inline-start:18px;z-index:98;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;pointer-events:none}
#rd-widgets>*{pointer-events:auto}
.lw{background:var(--paper2);border:3px solid var(--ink);box-shadow:var(--sh);
  padding:10px 15px;font-weight:700;font-size:.83rem;max-width:min(340px,78vw);
  display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(8px);
  transition:opacity .28s,transform .28s}
.lw.in{opacity:1;transform:none}
.lw-dot{width:10px;height:10px;background:var(--ok);border:2px solid var(--ink);
  flex:0 0 auto;animation:lwpulse 1.6s infinite}
@keyframes lwpulse{0%,100%{opacity:1}50%{opacity:.25}}
.sndbtn{border:var(--bd);background:var(--paper2);box-shadow:var(--sh);
  padding:7px 12px;font-weight:700;font-size:.75rem;cursor:pointer;
  text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:7px}
.sndbtn:hover{background:var(--yel)}
.sndbtn.off{background:var(--bg2);color:var(--mut)}
/* toast panel admin: notifikasi angin "ada transaksi masuk" untuk pemilik.
   Dipasang di atas-kanan supaya tidak menutupi tombol bunyi (kiri-bawah). */
#atoast{position:fixed;top:78px;inset-inline-end:18px;z-index:99;
  background:var(--ink);color:var(--paper);border:3px solid var(--acc);
  box-shadow:var(--sh);padding:13px 19px;font-weight:700;font-size:.85rem;
  max-width:min(360px,86vw);opacity:0;transform:translateY(-8px);
  transition:opacity .25s,transform .25s;pointer-events:none}
#atoast.in{opacity:1;transform:none}
#atoast.sale{border-color:var(--ok)}
#atoast.cancel{border-color:var(--acc2)}
#atoast.preorder{border-color:var(--yel)}
.csfab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:98;
  border:3px solid var(--ink);background:var(--acc);color:#fff;box-shadow:var(--sh);
  padding:12px 17px;font-weight:700;font-size:.82rem;cursor:pointer;
  text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.csfab:hover{background:var(--acc2)}
.csfab span{width:20px;height:20px;background:var(--yel);color:var(--ink);
  border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--disp)}
.cspanel{position:fixed;bottom:18px;inset-inline-end:18px;z-index:99;width:min(360px,92vw);
  height:min(480px,72vh);background:var(--paper2);border:3px solid var(--ink);
  box-shadow:var(--sh2);display:flex;flex-direction:column}
.cshead{background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:700;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.cshead button{background:none;border:none;color:var(--paper);font-size:1.25rem;
  line-height:1;cursor:pointer;font-weight:700}
.cshead button:hover{color:var(--yel)}
.cslog{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.csmsg{max-width:86%;padding:9px 13px;font-size:.85rem;font-weight:500;
  border:2px solid var(--ink);white-space:pre-wrap;word-break:break-word}
.csmsg.bot{background:var(--paper);align-self:flex-start;box-shadow:3px 3px 0 var(--ink)}
.csmsg.bot.offtopic{background:#fff4d1}
.csmsg.bot.think{color:var(--mut);font-style:italic}
.csmsg.me{background:var(--blu);color:#fff;align-self:flex-end;box-shadow:3px 3px 0 var(--ink)}
.csform{display:flex;gap:8px;padding:10px;border-top:3px solid var(--ink);background:var(--paper)}
.csform input{flex:1;min-width:0;border:var(--bd);background:#fff;padding:9px 11px;
  font-family:var(--sans);font-size:.85rem}
.csform input:focus{outline:3px solid var(--yel);outline-offset:-1px}

/* ------------- Pengaturan: tab kategori (satu form, pane disembunyikan) ------------- */
.settabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;position:sticky;top:0;
  z-index:20;background:var(--paper);border:var(--bd);box-shadow:var(--sh);
  padding:10px 12px;margin:14px 0 18px}
.settabs button{font-family:var(--sans);font-weight:700;font-size:.8rem;
  padding:8px 14px;border:var(--bd);background:var(--paper2);color:var(--txt);
  cursor:pointer;border-radius:0}
.settabs button:hover{background:var(--yel)}
.settabs button.on{background:var(--acc);color:#fff}
.settabs button:focus-visible{outline:3px solid var(--yel);outline-offset:-1px}
.settabs .sign{margin-inline-start:auto;font-size:.72rem;font-weight:500;color:var(--mut);
  max-width:34ch;line-height:1.35}
/* Sembunyikan pane HANYA saat JS aktif (kelas .js dipasang inline di <head> form)
   supaya tanpa JS semua bagian tetap terbaca - tidak ada setelan yang tak terjangkau. */
.js .setpane[data-pane]{display:none}
.js .setpane[data-pane].on{display:block}
.setpane:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.setpane{animation:setin .18s ease-out}
@keyframes setin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.setpane .panel{margin-top:0}
.setbar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--paper);border:var(--bd);box-shadow:var(--sh);padding:11px 13px}
@media(max-width:640px){
  .settabs .sign{display:none}
}
@media(prefers-reduced-motion:reduce){
  .setpane{animation:none}
}

@media(max-width:560px){
  .csfab b{display:none}
  #rd-widgets{bottom:74px}
}
/* ============================================================
   RESPONSIVE LAYER — HP / tablet / laptop / PC (ditambahkan)
   Mencakup: store + admin. Aman ditimpa ulang (idempotent).
   ============================================================ */

/* ---------- 1. HEADER STORE: nav jadi rapi di HP ---------- */
@media (max-width: 900px) {
  header.top .wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  header.top .brand { justify-content: center; font-size: .95rem; }
  nav.main { justify-content: center; flex-wrap: wrap; gap: 4px; margin: 0; }
  nav.main a { padding: 8px 11px; font-size: .82rem; }
  .langsel { max-width: 130px; }
}

@media (max-width: 480px) {
  nav.main a { padding: 7px 9px; font-size: .78rem; }
  .brand { font-size: .85rem !important; letter-spacing: .02em; }
  .ticker { font-size: .72rem; }
}

/* ---------- 2. KATALOG & PRODUK ---------- */
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .card { padding: 10px; }
  .card h3 { font-size: .9rem; }
  .kv { grid-template-columns: 1fr; }
  .kv b { justify-self: start; }
}
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr !important; }
}

/* ---------- 3. TABEL (orders, traffic, users dll) → scroll ---------- */
.tblwrap, .panel .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { min-width: 480px; }
@media (max-width: 640px) {
  table.t { font-size: .78rem; }
  table.t th, table.t td { padding: 6px 8px; }
}

/* ---------- 4. KODE BOX / DELIVERY (hp kecil) ---------- */
@media (max-width: 560px) {
  .code-box { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .code-box .mono { word-break: break-all; font-size: .8rem; }
  #outlook-box { font-size: .85rem !important; padding: 10px !important; }
}

/* ---------- 5. FORM & BUTTON ---------- */
@media (max-width: 640px) {
  .btn { padding: 11px 16px; }
  .form input, .form select, .form textarea { font-size: 16px; } /* cegah zoom iOS */
  .btn.primary, button.btn { min-height: 44px; } /* target sentuh */
}

/* ---------- 6. ADMIN: sidenav + konten ---------- */
@media (max-width: 820px) {
  aside.sidenav { position: static; width: auto; flex-wrap: wrap; gap: 5px; padding: 10px 0; }
  aside.sidenav a { font-size: .72rem; padding: 7px 10px; box-shadow: 2px 2px 0 var(--ink, #111); }
  body.admin .wrap { max-width: 100%; padding: 0 12px; }
  .admin .row, .row { grid-template-columns: 1fr !important; }
  /* kartu statistik traffic 4 kolom → 2 kolom di tablet/HP lebar */
  [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 460px) {
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  h1 { font-size: 1.15rem !important; }
  .panel { padding: 12px; }
}

/* ---------- 7. LAPTOP LEBAR / PC BESAR: layout longgar ---------- */
@media (min-width: 1400px) {
  body .wrap { max-width: 1280px; }
  body.admin .wrap { max-width: 1480px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
}
@media (min-width: 1800px) {
  body .wrap { max-width: 1440px; }
  .pd { gap: 44px; }
}

/* ---------- 8. TABLET PORTRAIT (768-an) ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- 9. SENTUH: hilangkan hover-sticky ---------- */
@media (hover: none) {
  nav.main a:hover { background: transparent; }
  nav.main a.on { background: var(--ink); color: var(--paper); }
  .card:active { transform: none; }
}

/* ---------- 10. FIX FLOATING WIDGETS DI HP (jangan nutupin konten) ---------- */
@media (max-width: 640px) {
  /* widget kiri (sound/live): mengecil & menempel lebih bawah, jadi overlay mini */
  #rd-widgets { bottom: 12px; inset-inline-start: 10px; gap: 6px; }
  #rd-widgets .lw { max-width: 56vw; font-size: .72rem; padding: 7px 10px; opacity: 0; }
  #rd-widgets .sndbtn { font-size: .72rem; padding: 7px 10px; }
  /* tombol chat kanan: jadi tombol bulat kecil, teks disembunyikan (sudah ada b{display:none}) */
  .csfab { bottom: 12px; inset-inline-end: 10px; padding: 11px 13px; }
  .cspanel { bottom: 12px; inset-inline-end: 10px; height: min(440px, 68vh); }
  /* beri ruang konten bawah biar gak ketutup fab */
  main .wrap { padding-bottom: 84px; }
  /* pill kecil & badge lebih ringkas */
  .pill { font-size: .68rem; }
}

.pdleft{min-width:0}
.pdesc-below{margin-top:12px}
.pdleft .pdesc-below{border-top:var(--bd);padding-top:12px}

/* ============================================================
   RESPONSIVE FIX v2 — hasil audit playwright 320/390/768/1280/1920
   ============================================================ */

/* 1) GRID & CARD: min-width implisit konten bikin 2-kolom HP overflow */
.grid > * { min-width: 0; }
.card, .card h3, .card .bd, .card .price { min-width: 0; overflow-wrap: anywhere; }
.card .foot { flex-wrap: wrap; }

/* 2) VARIAN GRID (product page) di HP kecil: 1 kolom penuh */
@media (max-width: 480px) {
  .vgrid { grid-template-columns: 1fr !important; }
  .vchip { min-width: 0; width: 100%; }
}

/* 3) TABEL (cart/account/order): scroll horizontal dalam wrapper, bukan merusak layout */
@media (max-width: 820px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* 4) FORM & INPUT: full width di HP */
@media (max-width: 640px) {
  form input[type="text"], form input[type="email"], form input[type="password"],
  form input[type="number"], form input[type="tel"], form select, form textarea {
    width: 100% !important; max-width: 100% !important;
  }
  form .btn { width: 100%; justify-content: center; }
}

/* 5) HERO & HEADING besar di HP */
@media (max-width: 640px) {
  .hero h1 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .hero { padding: 18px 0 !important; }
  h1 { font-size: 1.45rem !important; }
}

/* 6) Kategori chips & filter bar di HP: wrap rapi */
@media (max-width: 640px) {
  .cats, .catbar, .filters { flex-wrap: wrap !important; gap: 6px !important; }
  .cats a, .catbar a { padding: 6px 10px !important; font-size: .8rem !important; }
}

/* 7) Safety net global: apa pun yang kepanjangan tidak boleh merusak layout */
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* ===== PRECISION PASS — hasil audit piksel 20 Okt ===== */
/* 1) Judul kartu: maks 2 baris, titik-titik kalau kepanjangan → grid rata */
.card .bd h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;
}
/* 2) Teks kecil JANGAN di bawah 12px di layar sentuh */
@media (max-width:820px){
  .card .cat{font-size:.74rem !important}          /* 11.8→11.8px tapi naik dr .68 */
  .badge{font-size:.75rem !important}
  .ticker{font-size:.78rem !important}
  .price .usd{font-size:.8rem !important}
}
/* 3) Harga selalu 1 ukuran di semua kartu */
.card .price{font-size:1.12rem !important}
/* 4) Footer kartu: jarak konsisten */
.card .foot{padding-top:10px}
.card .bd{gap:8px}


/* ===== PRECISION PASS 2 — seragamkan kartu di HP ===== */
@media (max-width:820px){
  /* badge kategori: 1 baris, teks dipotong rapi */
  .card .cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* area harga: tinggi minimal konsisten walau ada/tidaknya strikethrough */
  .card .price{min-height:1.7em;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
  .card .price s{font-size:.78rem}
  /* foot: 1 baris selalu */
  .card .foot{white-space:nowrap;overflow:hidden}
  .card .foot > *{overflow:hidden;text-overflow:ellipsis}
}


@media (max-width:820px){
  .card .foot{min-height:52px;align-content:center}
  .card .price{min-height:2.6em}
}


/* ===== PRECISION PASS 3 — minimum legibility 12px di layar sentuh ===== */
@media (max-width:820px){
  .kv b{font-size:.75rem !important}      /* 10.6 -> 12px */
  .pill{font-size:.75rem !important}      /* 10.9/10.6 -> 12px */
  .vbadge{font-size:.75rem !important;padding:3px 11px !important;top:-12px !important}
  .settabs .sign, .small, .muted{font-size:.8rem !important}
}


/* ===== FIX: sticker hero menimpa judul di HP (terukur overlap 167x86px) ===== */
@media (max-width:820px){
  .hero{padding-top:14px !important}
  .hero .sticker{
    position:static !important;          /* keluar dari mode absolut (berhenti menimpa) */
    display:inline-block;
    transform:rotate(-2deg);
    margin:6px 0 14px;
    font-size:.78rem;
  }
  /* di layar kecil, H1 hero juga dipastikan tidak tertutup apa pun */
  .hero h1{position:relative;z-index:1}
}


/* ===== FIX: FAB chat menutupi kartu terakhir saat scroll mentok ===== */
@media (max-width:1024px){
  .grid{padding-bottom:150px !important}
}


/* ===== FIX: notif live-sales menutupi chip kategori & konten kiri di layar kecil ===== */
@media (max-width:820px){
  #rd-widgets{
    inset-inline-start:auto !important;   /* lepas dari kiri */
    inset-inline-end:14px !important;     /* pindah ke kanan */
    bottom:84px !important;               /* di atas FAB chat */
    align-items:flex-end;
    max-width:70vw;
  }
}


/* ===== FIX: FAB chat lebih kecil & jelas sebagai floating layer (tablet/HP) ===== */
@media (max-width:1024px){
  .csfab{padding:9px 13px !important;font-size:.74rem !important;box-shadow:3px 3px 0 var(--ink), 0 4px 14px rgba(0,0,0,.25) !important}
}

@media (max-width:1024px){
  .csfab{display:none}
  .csfab.fab-show{display:flex}
}

/* ═══ ADMIN RESPONSIVE FIX (22 Okt) ═══ */
@media (max-width: 640px) {
  .panel { padding: 12px 10px !important; margin: 14px 0; }
  .wrap { padding: 0 10px !important; }
  table.t { min-width: 420px; }
  table.t th, table.t td { padding: 7px 9px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .search { min-width: 150px; }
  h1 { font-size: 1.3rem !important; }
  .card-grid, .grid2, .grid3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .panel { padding: 10px 8px !important; }
  .wrap { padding: 0 8px !important; }
  table.t { min-width: 380px; }
}
/* teks tabel jangan pernah memaksa lebar: biarkan wrap di dalam sel */
table.t td { word-break: break-word; }
table.t td .mono, table.t td code { word-break: break-all; }
/* form di admin hp */
@media (max-width: 640px) {
  .form .row { grid-template-columns: 1fr; }
  .btn { width: auto; }
  input, select, textarea { max-width: 100%; }
}


/* ═══ ADMIN RESPONSIVE FIX-2 (22 Okt) ═══ */
@media (max-width: 640px) {
  table.t { min-width: 340px; }
  table.t td[style*="white-space:nowrap"], table.t td nowrap { white-space: normal !important; }
  table.t td form[style*="inline"] { display: inline-flex !important; flex-wrap: wrap; gap: 4px; }
  table.t td .btn { padding: 5px 8px; font-size: .72rem; }
  table.t td input[type="password"], table.t td input[type="text"] { width: 90px !important; }
  .tblwrap { margin: 0 -2px; }
  /* pill & badge jangan memaksa lebar */
  .pill { white-space: nowrap; }
}
@media (max-width: 420px) {
  table.t { min-width: 320px; }
  table.t { font-size: .74rem; }
}


/* ═══ FIX-3: paksa semua kontainer admin gak bisa lebih lebar dari viewport ═══ */
.panel, .tblwrap, .tablewrap { max-width: 100%; overflow-x: auto; }
table.t, table.tbl { max-width: 100%; }
/* tabel dengan min-width tetap bisa scroll DI DALAM tblwrap tanpa mendorong parent */
.tblwrap > table.t, .tblwrap > table.tbl { min-width: max-content; }
@media (max-width: 640px) {
  .panel { overflow-x: hidden; }
  .tblwrap { display: block; width: 100%; }
  .tblwrap > table.t, .tblwrap > table.tbl { min-width: 340px; max-width: none; }
}


/* ═══ FIX-4: inline style grid-template menimpa media query → paksa 1 kolom di HP ═══ */
@media (max-width: 820px) {
  .pd { grid-template-columns: 1fr !important; }
  .form .row, .row { grid-template-columns: 1fr !important; }
}


/* RH-TAP44: touch target >=44px (Apple HIG) di layar sentuh */
@media (max-width: 640px) {
  .btn.sm, form .btn.sm, a.btn.sm, button.btn.sm { min-height: 44px; }
  .langsel { min-height: 44px; }
  nav.main a { min-height: 44px; display: inline-flex; align-items: center; }
  table.t td .btn, table.t td a.btn, table.t td button.btn { min-height: 44px; }
}