:root{
  --bg:#05060f; --bg2:#0a0c1c;
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.09);
  --txt:#eaebf5; --mut:#8b90a8;
  --vio:#8b5cf6; --vio2:#6d28ff; --cy:#2dd4ff; --amber:#ffb020; --red:#ff5c7a; --green:#3ddc97;
  --r:18px;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Plus Jakarta Sans',system-ui,sans-serif;
}
/* [NEW 2026-08-22] Light Mode — cuma nimpa token warna dasar (bg/glass/line/txt/mut), warna
   aksen brand (--vio/--cy/--amber/--red/--green) SENGAJA dibiarkan sama supaya identitas warna
   toko tetap konsisten di kedua mode. Diaktifkan lewat atribut data-theme="light" di <html>
   (lihat initTheme()/toggleTheme() di script bawah), tersimpan di localStorage per browser.
   Catatan jujur: efek dekoratif Skin Toko (partikel/tekstur tombol per tema) dikalibrasi untuk
   background gelap, jadi kontrasnya bisa terasa beda kalau dipakai bareng skin aktif + light
   mode — itu keterbatasan yang disengaja, bukan bug, biar scope-nya tidak membengkak. */
[data-theme="light"]{
  --bg:#f6f6fb; --bg2:#ffffff;
  --glass:rgba(20,20,45,.045); --glass2:rgba(20,20,45,.075);
  --line:rgba(20,20,45,.11);
  --txt:#181a2e; --mut:#666b85;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* [NEW 2026-08-22] hormati preferensi "kurangi animasi" perangkat — aturan global ini menimpa
   SEMUA animasi/transisi di halaman (termasuk yang akan ditambahkan nanti), bukan cuma yang
   sudah dikenali satu-satu. Standar aksesibilitas WCAG 2.3.3. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{background:var(--bg);color:var(--txt);font-family:var(--font-b);overflow-x:hidden;min-height:100vh}
::selection{background:var(--vio);color:#fff}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ------- aurora background ------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% -20%,color-mix(in srgb, var(--bg) 60%, var(--vio) 40%) 0%,var(--bg) 55%)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.orb.a{width:520px;height:520px;background:radial-gradient(circle,#6d28ff88,transparent 70%);top:-160px;left:-120px}
.orb.b{width:460px;height:460px;background:radial-gradient(circle,#2dd4ff55,transparent 70%);top:10%;right:-140px;animation-delay:-8s}
.orb.c{width:380px;height:380px;background:radial-gradient(circle,#ff5c7a33,transparent 70%);bottom:-120px;left:35%;animation-delay:-15s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
.grid-bg{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%)}

/* ------- nav ------- */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,48px);backdrop-filter:blur(18px);background:color-mix(in srgb, var(--bg) 72%, transparent);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:1.15rem;letter-spacing:.5px;text-decoration:none;color:var(--txt);flex-shrink:0}
.logo .x{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;background:linear-gradient(135deg,var(--vio2),var(--cy));box-shadow:0 0 24px #6d28ff66;animation:pulseGlow 3.5s ease-in-out infinite;overflow:hidden}
.logo .x img{width:100%;height:100%;object-fit:cover;border-radius:11px}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px #6d28ff55}50%{box-shadow:0 0 34px #2dd4ff66}}
/* kalau menu terlalu banyak & tidak muat, LINKS yang discroll ke samping — logo & tombol
   kanan (profil/saldo/suara) tetap kelihatan, tidak lagi kedorong keluar layar */
nav .links{display:flex;gap:6px;margin-left:8px;overflow-x:auto;flex-shrink:1;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
nav .links::-webkit-scrollbar{display:none}
nav .links a{color:var(--mut);text-decoration:none;font-size:.88rem;font-weight:600;padding:8px 13px;border-radius:10px;transition:.25s;flex-shrink:0}
nav .links a .nl-ic{width:15px;height:15px;vertical-align:-3px;margin-right:5px;flex-shrink:0}
nav .links a.maint{position:relative;color:#ff9a5c}
nav .links a.maint::after{content:"🔧";font-size:.7rem;margin-left:4px;opacity:.9}
/* [NEW 2026-08-19] badge maintenance juga di tombol quick-nav (sebelumnya cuma navbar
   dropdown yang kebagian style — quick-nav-nya sekarang punya data-page juga, lihat
   applyMaintenanceNav() JS, jadi butuh style yang sepadan di sini). */
.qn-btn.maint{position:relative;border-color:#ff9a5c66;opacity:.72}
.qn-btn.maint::after{content:"🔧";position:absolute;top:2px;right:4px;font-size:.72rem;background:var(--bg);border-radius:50%;padding:2px 4px;box-shadow:0 0 0 2px var(--bg)}
nav .links a:hover{color:var(--txt);background:var(--glass2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
/* petunjuk kecil "bisa digeser" di ujung menu — cuma muncul kalau memang ada yang
   kepotong (dicek lewat JS), dan hilang sendiri begitu user sudah scroll sampai ujung */
.scroll-hint{position:sticky;right:2px;flex-shrink:0;display:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--vio2),var(--cy));color:#fff;font-size:.9rem;font-weight:800;pointer-events:none;animation:hintNudge 1.5s ease-in-out infinite;box-shadow:0 0 12px #6d28ff88;z-index:2}
@keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.saldo-pill{display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:.85rem;font-weight:700}
.saldo-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
/* [NEW 2026-08-22] bottom nav bar — HANYA mobile (≤640px), lima jalan pintas yang paling
   sering dipakai (nav atas tetap ada & lengkap, ini cuma percepatan buat jempol di HP).
   position:fixed + body padding-bottom (lihat rule mobile di bawah) supaya konten terakhir
   tidak ketutupan. */
.bottom-nav{display:none}
:root{--bnav-h:0px}
@keyframes bnSlideUp{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bnIndicatorGlow{0%,100%{opacity:.55}50%{opacity:.9}}
@media(max-width:640px){
  /* [NEW 2026-08-22] tinggi bottom nav — dihitung dinamis (bukan angka mati) karena beda device
     beda tinggi safe-area (HP dengan gesture-nav/notch butuh ruang ekstra di bawah). Dipakai di
     body padding-bottom (baris di bawah) DAN panel full-height seperti .cld-shell, supaya
     konsisten satu sumber kebenaran — sebelumnya body pakai angka tetap 64px yang di sebagian
     device MELESET lebih pendek dari tinggi nav asli, bikin ujung bawah tiap halaman kepotong. */
  :root{--bnav-h:calc(88px + env(safe-area-inset-bottom))}
  body{padding-bottom:var(--bnav-h)}
  /* [UPGRADED 2026-08-22] "floating capsule" — nav lepas dari tepi layar (bukan nempel penuh
     edge-to-edge lagi), melayang dengan shadow + border tipis, gaya nav bar modern (Dynamic
     Island/Instagram-style) alih-alih tab bar datar biasa. Muncul dengan animasi slide-up saat
     halaman pertama dimuat (bnSlideUp), bukan langsung nongol diam. */
  .bottom-nav{display:flex;position:fixed;left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;justify-content:space-around;align-items:center;padding:7px 6px;border-radius:24px;backdrop-filter:blur(10px);background:color-mix(in srgb, var(--bg) 88%, transparent);border:1px solid color-mix(in srgb, var(--line) 140%, transparent);box-shadow:0 8px 20px -4px #00000088;animation:bnSlideUp .55s cubic-bezier(.16,1,.3,1);will-change:transform}
  /* pil gradient yang MELUNCUR (bukan lompat) di belakang ikon aktif — posisi & lebarnya diatur
     lewat JS (lihat updateBnIndicator() di script bawah), transisinya yang bikin efek "cair". */
  .bn-indicator{position:absolute;top:5px;left:5px;bottom:5px;width:calc(20% - 4px);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb, var(--vio) 30%, transparent),color-mix(in srgb, var(--cy) 26%, transparent));box-shadow:0 0 10px 0 color-mix(in srgb, var(--vio) 35%, transparent);transition:transform .42s cubic-bezier(.34,1.4,.64,1);pointer-events:none;z-index:0;will-change:transform}
  /* [UPGRADED 2026-08-22] gaya iOS tab bar: ikon outline→filled saat aktif (bukan cuma ganti
     warna doang, lihat .bn-item.on svg path di bawah — meniru pasangan SF Symbol outline/.fill),
     font pakai -apple-system dulu (baru fallback ke font brand di device non-Apple), sedikit
     "pop" scale saat item aktif, dan tap dikasih feedback tekan (:active) khas iOS. */
  .bn-item{display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;color:var(--mut);font-family:-apple-system,BlinkMacSystemFont,var(--font-b);font-size:10px;font-weight:500;letter-spacing:-.1px;padding:6px 4px 5px;cursor:pointer;position:relative;z-index:1;flex:1;-webkit-tap-highlight-color:transparent}
  .bn-item svg{width:24px;height:24px;transition:transform .32s cubic-bezier(.34,1.7,.64,1)}
  .bn-item span{transition:transform .32s cubic-bezier(.34,1.7,.64,1),opacity .25s}
  .bn-item:active svg{transform:scale(.82)}
  .bn-item.on{color:var(--vio)}
  .bn-item.on svg{transform:translateY(-1px) scale(1.12)}
  .bn-item.on span{transform:translateY(-1px)}
  .bn-item.on svg path[data-fill="1"]{fill:currentColor;fill-opacity:.18}
  .bn-item.on svg circle[data-fill="1"]{fill:currentColor;fill-opacity:.18}
  .bn-badge{position:absolute;top:1px;right:16px;background:var(--red);color:#fff;font-size:8.5px;font-weight:800;min-width:14px;height:14px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--bg)}
  /* geser elemen fixed lain yang sebelumnya nempel di dasar layar, supaya tidak ketutup/numpuk
     dengan bottom nav baru ini — cuma override posisi, bukan ubah perilakunya sama sekali.
     [FIX 2026-09-11] #toast DIHAPUS dari daftar ini — toast sekarang di ATAS layar (lihat CSS
     utamanya), override "bottom" di sini sebelumnya JUSTRU memaksa toast balik ke bawah lagi
     (numpuk sama #helpFab/bottom nav, persis keluhan yang dilaporkan), bukan malah membantu. */
  #helpFab{bottom:calc(var(--bnav-h) + 14px) !important}
  #helpBox{bottom:calc(var(--bnav-h) + 84px) !important}
  #buyToastWrap{bottom:calc(var(--bnav-h) + 8px) !important}
  #musicToggleBtn{bottom:calc(var(--bnav-h) + 6px) !important}
  /* [FIX 2026-09-11] SEBELUMNYA menarget #fabMenuToggle/#fabSatellites langsung (posisi fixed
     sendiri-sendiri) — sekarang keduanya di DALAM #fabCluster (1 wrapper flex), cukup geser
     wrapper-nya saja, otomatis ikut semua isinya, samakan jarak dgn pergeseran #helpFab di atas. */
  #fabCluster{bottom:calc(var(--bnav-h) + 92px) !important}
  /* [NEW 2026-08-22] coach mark bottom nav — bubble melayang tepat di atas nav, dengan panah
     kecil menunjuk ke bawah. z-index di atas bottom-nav (60) tapi di bawah modal (100). */
  @keyframes bnCoachIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
  .bn-coach{position:fixed;left:14px;right:14px;bottom:calc(var(--bnav-h) + 4px);z-index:65;display:flex;justify-content:center;pointer-events:none;animation:bnCoachIn .4s cubic-bezier(.16,1,.3,1)}
  .bn-coach-bubble{pointer-events:auto;background:linear-gradient(135deg,var(--vio2),var(--cy));color:#fff;font-size:12px;font-weight:600;padding:10px 8px 10px 14px;border-radius:14px;box-shadow:0 10px 30px #6d28ff55;display:flex;align-items:center;gap:8px;max-width:88%}
  .bn-coach-bubble button{background:rgba(255,255,255,.22);border:none;color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .bn-coach-arrow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--cy)}
}
.btn{border:none;border-radius:12px;padding:10px 18px;font-weight:700;font-size:.88rem;transition:.25s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.ic-svg{width:17px;height:17px;flex-shrink:0}
.qn-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--vio);flex-shrink:0}
.qn-ic svg{width:20px;height:20px}
.qn-ic .ic-svg{width:19px;height:19px}
.btn-p{background:linear-gradient(135deg,var(--vio2),var(--vio));color:#fff;box-shadow:0 4px 22px color-mix(in srgb, var(--vio2) 45%, transparent)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 30px #6d28ff88}
.btn-g{background:var(--glass);border:1px solid var(--line);color:var(--txt)}
.btn-g:hover{background:var(--glass2)}
.btn-danger{background:linear-gradient(135deg,#ff3d5f,#ff5c7a);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--vio),var(--cy));display:grid;place-items:center;font-weight:800;font-size:.95rem;border:none;color:#fff;transition:.25s}
.avatar:hover{transform:scale(1.08)}

/* ------- hero ------- */
.hero{padding:clamp(48px,9vh,110px) clamp(16px,4vw,48px) 30px;max-width:1200px;margin:0 auto;text-align:center}
.hero-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hero .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--cy);animation:fadeUp .7s .05s backwards}
.hero h1{font-family:var(--font-d);font-size:clamp(2.1rem,5.4vw,4rem);font-weight:700;line-height:1.12;margin:22px 0 16px;animation:fadeUp .7s .15s backwards}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* [REDESIGN 2026-09-19] dulu di headline cuma 1 kata acak ("Satu Toko") digradasi warna tanpa
   alasan — sekarang gradasinya dipakai buat kata kategori yang BERGANTIAN (isinya persis daftar
   kategori yang sudah ada di tagline lama, bukan kata baru), jadi treknya fungsional (menandakan
   "bagian yang berubah-ubah"), bukan cuma hiasan. Teknik: semua kata ditumpuk di sel grid yang
   sama (grid-area:1/1) — lebar kontainer otomatis mengikuti kata TERPANJANG di antaranya, jadi
   "Ketemu di sini." di baris bawah tidak ikut geser tiap kata berganti. */
.hero-cycle{display:inline-grid;text-align:left}
.hero-cycle span{grid-area:1/1;background:linear-gradient(100deg,var(--vio) 10%,var(--cy) 60%,#a78bfa 95%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(10px);animation:heroCycle 15s infinite}
.hero-cycle span:nth-child(1){animation-delay:0s}
.hero-cycle span:nth-child(2){animation-delay:3s}
.hero-cycle span:nth-child(3){animation-delay:6s}
.hero-cycle span:nth-child(4){animation-delay:9s}
.hero-cycle span:nth-child(5){animation-delay:12s}
@keyframes heroCycle{0%,100%{opacity:0;transform:translateY(10px)}4%,18%{opacity:1;transform:translateY(0)}22%{opacity:0;transform:translateY(-10px)}}
/* kata pertama tetap kebaca statis (tidak ikut siklus) buat yang matikan animasi di sistemnya —
   aturan animasi global di atas sudah mempercepat durasi ke ~0, tapi tanpa ini semua kata bisa
   berakhir di opacity:0 bareng (headline jadi kelihatan bolong). */
@media(prefers-reduced-motion:reduce){.hero-cycle span{animation:none!important;opacity:0;transform:none}.hero-cycle span:first-child{opacity:1}}
@keyframes shine{to{background-position:200% 0}}
.hero p{color:var(--mut);max-width:560px;margin:0 auto 18px;font-size:1.02rem;line-height:1.7;animation:fadeUp .7s .25s backwards}
/* [NEW 2026-08-27] 3 badge kepercayaan singkat di hero — lihat komentar HTML lengkap di atas. */
/* [FIX 2026-08-27] REDESIGN — badge teks statis diganti carousel banner landscape (auto-geser +
   swipe + klik-ke-link). Pola swipe/drag & auto-rotate SENGAJA meniru flash-sale strip yang
   sudah ada (lihat #flashStrip) supaya interaksinya konsisten di seluruh halaman, bukan bikin
   mekanisme baru yang beda rasa. */
.hlx-wrap{max-width:1100px;margin:0 auto 22px;animation:fadeUp .7s .3s backwards}
/* [REDESIGN 2026-09-19] BUG DILAPORKAN: gambar banner "kepotong". AKAR MASALAH: admin.html SELALU
   nge-crop gambar banner ke ukuran tetap 1600x310px (lihat CROP_W/CROP_H di confirmCrop()) —
   tapi kotak tampilan di sini pakai TINGGI TETAP yang rasionya beda (128px di HP, 210px di
   desktop, tidak match 1600:310 di kebanyakan lebar layar). Kalau rasio kotak beda dari rasio
   gambar, background-size:cover TERPAKSA motong sebagian gambar biar tetap mengisi penuh.
   SEKARANG pakai aspect-ratio, TAPI [FIX 2026-09-19 lanjutan] dibuat RESPONSIF (bukan 1 rasio
   tetap semua layar) — rasio ASLI gambar (160:31 ≈ 5,16:1) itu SANGAT lebar, kalau dipaksa sama
   persis di HP hasilnya jadi strip tipis banget (tinggi cuma ~70px di layar 360px, kebaca "kecil
   banget"/nyaris tidak kelihatan meski gambarnya sendiri tidak kepotong). Sekarang: DEFAULT
   (mobile) pakai rasio 3:1 — cukup tinggi buat kelihatan proporsional di HP, MASIH aman dari
   crop asal konten pentingnya (judul dkk) disusun center-safe di ~58% tengah gambar (sudah
   diverifikasi lewat simulasi crop). Mulai tablet (min-width:640px) baru balik ke rasio ASLI
   160:31 — di lebar situ sudah cukup ruang buat rasio lebar tanpa kelihatan gepeng. */
.hlx-strip{position:relative;aspect-ratio:3/1;border-radius:16px;overflow:hidden;cursor:pointer;touch-action:pan-y}
@media(min-width:640px){.hlx-strip{aspect-ratio:160/31}}
.hlx-banner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:12px 18px;color:#fff;opacity:0;transform:translateX(24px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hlx-banner.on{opacity:1;transform:translateX(0);pointer-events:auto}
.hlx-banner b{font-size:1rem;font-weight:800;margin-bottom:3px;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.hlx-banner span{font-size:.78rem;opacity:.92;max-width:88%}
/* [FIX 2026-08-28] REDESIGN — sebelumnya max-width 640px + tinggi tetap 92px bikin banner
   kelihatan kecil/sempit di layar lebar (desktop bisa sampai 1200px lebar kontainer hero, tapi
   banner cuma 640px — jomplang). Sekarang lebar mendekati kontainer hero (1100px) + tinggi &
   ukuran teks membesar bertahap sesuai lebar layar (mobile tetap wajar, desktop jadi proporsional). */
@media(min-width:640px){
  .hlx-banner{padding:18px 28px}
  .hlx-banner b{font-size:1.3rem}
  .hlx-banner span{font-size:.92rem}
}
@media(min-width:1024px){
  .hlx-banner{padding:24px 38px}
  .hlx-banner b{font-size:1.6rem;margin-bottom:6px}
  .hlx-banner span{font-size:1.02rem}
}
.hlx-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.hlx-dot{width:6px;height:6px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:.25s}
.hlx-dot.on{width:18px;border-radius:4px;background:var(--vio)}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s .35s backwards}
/* [NEW 2026-08-27] statistik kepercayaan + mini testimoni — lihat komentar HTML lengkap di atas. */
/* [FIX 2026-08-28] REDESIGN — sebelumnya cuma pakai --glass (4.5% opacity) polos, jadi
   kelihatan nyaris transparan/hilang di background gelap, apalagi di tema-tema tertentu.
   Sekarang: gradient glass2->glass (lebih solid) + border dicampur warna aksen tema (--vio) biar
   kelihatan lebih seperti "tombol" bertema, bukan kotak transparan biasa — tetap pakai variabel
   CSS tema (var(--vio)/var(--glass) dkk), jadi otomatis ikut berubah kalau admin ganti skin toko. */
.tb-stats{display:flex;align-items:center;justify-content:space-around;gap:6px;padding:22px 44px 22px 16px;background:linear-gradient(135deg,var(--glass2),var(--glass));border:1px solid color-mix(in srgb, var(--vio) 28%, var(--line));border-radius:16px;margin-bottom:14px;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.tb-stats:hover,.tb-stats:focus-visible{border-color:var(--vio);background:linear-gradient(135deg,var(--glass2),color-mix(in srgb, var(--vio) 10%, var(--glass)));outline:none;transform:translateY(-2px)}
.tb-stat{text-align:center;flex:1;min-width:0;position:relative}
.tb-stat:not(:last-child)::after{content:'';position:absolute;right:-3px;top:6px;bottom:6px;border-right:1px dashed var(--line)}
.tb-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0 auto 6px;border-radius:50%;background:color-mix(in srgb, var(--vio) 16%, transparent);color:var(--vio)}
.tb-ic svg{width:14px;height:14px}
.tb-stat b{display:block;font-size:clamp(1.2rem,3.8vw,1.55rem);font-weight:800;background:linear-gradient(135deg,var(--vio2),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-stat .tb-label{font-size:.68rem;color:var(--mut);font-weight:600;display:block}
/* [NEW 2026-08-27] panah kecil di kanan — sinyal visual "kotak ini bisa diklik, arahnya ke
   ulasan" (sebelumnya cuma cursor:pointer, tidak cukup jelas kalau seluruh kotak itu tombol). */
.tb-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--mut);transition:color .25s ease,transform .25s ease}
.tb-arrow svg{width:100%;height:100%}
.tb-stats:hover .tb-arrow{color:var(--vio);transform:translateY(-50%) translateX(3px)}
/* [FIX 2026-08-27] grid 2 kolom yang rapi (bukan flex-wrap pil yang acak lebarnya) — biar
   kelihatan seperti "showcase kategori", bukan cuma daftar menu navigasi berjejer. */
/* [FIX 2026-08-27] REDESIGN — versi sebelumnya kasih 1 warna pelangi BEDA-BEDA ke tiap kategori
   (ungu/cyan/hijau/pink/dst) tanpa alasan naratif apa pun — cuma dekorasi acak, itu yang bikin
   kesan berantakan/"AI slop". Sekarang disederhanakan: SEMUA kategori pakai bahasa warna brand
   yang SAMA (var(--vio)→var(--cy)), ikon outline tipis (bukan lingkaran penuh warna), dibedakan
   lewat aksen garis kiri tipis yang muncul saat hover — lebih disiplin, terasa 1 keluarga desain
   yang sama, bukan 10 kartu berwarna-warni acak. */
/* [REDESIGN 2026-09-19] dari grid yang wrap ke banyak baris (2 kolom di HP, 4 di desktop) jadi
   RAIL geser horizontal 1 baris — hero jadi lebih ringkas (langsung kelihatan katalog di bawahnya
   tanpa scroll panjang), dan pola geser-menyamping ini konsisten dengan .grid-scroll/.rv-scroll
   yang sudah dipakai di tempat lain di halaman ini, bukan mekanisme baru yang beda rasa. */
.quicknav{display:flex;gap:10px;margin-top:22px;padding:4px 4px 16px;max-width:100%;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);animation:fadeUp .7s .45s backwards}
.quicknav::-webkit-scrollbar{display:none}
.qn-btn{position:relative;overflow:hidden;padding:14px 18px;border-radius:12px;background:var(--glass);border:1px solid var(--line);border-left:2px solid transparent;color:var(--txt);font-weight:600;font-size:.83rem;display:flex;align-items:center;gap:11px;white-space:nowrap;transition:border-color .25s ease,padding-left .25s ease,background .25s ease;cursor:pointer;text-align:left;flex:0 0 auto;scroll-snap-align:start;box-sizing:border-box}
.qn-btn:hover,.qn-btn:focus-visible{border-left-color:var(--vio);padding-left:22px;background:var(--glass2)}
/* [NEW 2026-08-19] efek glow buat fitur baru (Branded Ball) biar kelihatan mencolok & orang notice
   ada fitur baru — dipakai di navbar & quick-nav homepage. Animasi pulsa lembut, tidak norak. */
@keyframes navGlowPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5),0 0 14px 2px rgba(45,212,255,.25)}50%{box-shadow:0 0 0 6px rgba(139,92,246,0),0 0 22px 6px rgba(45,212,255,.5)}}
.nav-glow-new{position:relative;animation:navGlowPulse 2.4s ease-in-out infinite;border-radius:10px}
.qn-btn.nav-glow-new{border-color:#8b5cf680}
.new-badge{display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;letter-spacing:.3px;padding:2px 6px;border-radius:20px;background:linear-gradient(135deg,var(--vio2),var(--cy));color:#fff;margin-left:6px;vertical-align:2px;flex-shrink:0}
/* [FIX 2026-08-25] override padding/margin lama ini DIHAPUS dari sini — dulu dirancang untuk
   layout teks-polos lama (kompensasi supaya glow pulse tidak mengubah ukuran row). Sekarang
   #navLinks sudah dirombak pakai layout ikon+teks dengan padding konsisten (14px 22px) untuk
   SEMUA item — override lama ini (padding:6px 10px;margin:-6px -10px) bikin item ini doang jadi
   lebih kecil & bergeser posisi dibanding item lain, kelihatan tidak rapi/beda sendiri. Sekarang
   item "Branded Ball" ikut inherit padding yang sama seperti item lain, glow pulse-nya tetap
   jalan (lihat .nav-glow-new di atas) tapi tidak lagi mengubah ukuran/posisi row.
   Sudut radius glow (10px, dirancang untuk tombol/pill kecil) juga diluruskan jadi 0 khusus di
   sini — row menu sekarang full-width lurus seperti item lain, sudut membulat kelihatan aneh
   berdampingan dengan baris lurus di atas/bawahnya. */
#navLinks a.nav-glow-new{border-radius:0}
.qn-btn::before{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(120deg,transparent,#ffffff3d,transparent);transform:skewX(-20deg);transition:left .65s ease}
.qn-btn:hover::before{left:130%}
.qn-btn .qn-ic{font-size:1.15rem}
/* ---- Top Up Game ---- */
.tg-search{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:0 14px;max-width:420px;margin:20px 0 26px;transition:.2s}
.tg-search:focus-within{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.tg-search .ico{opacity:.6;font-size:.9rem}
.tg-search input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:.9rem;padding:12px 0}
.tg-section h2{font-size:1.3rem;font-weight:800;margin-bottom:6px}
.tg-bar{display:block;width:34px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--vio),var(--cy));margin-top:6px;margin-bottom:20px}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.tg-card{position:relative;border-radius:16px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:.22s;aspect-ratio:3/4;background:#12142b}
.tg-card:hover{transform:translateY(-4px);border-color:var(--vio);box-shadow:0 16px 32px -10px #8b5cf655}
.tg-card img{width:100%;height:100%;object-fit:cover;display:block}
.tg-card .ph{width:100%;height:100%;display:grid;place-items:center;font-size:2.4rem;background:linear-gradient(145deg,#1a1d3d,#0a0c1c)}
.tg-card .ov{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 12px;background:linear-gradient(to top,rgba(0,0,0,.92) 20%,transparent);color:#fff}
.tg-card .ov b{font-size:.86rem;display:block;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tg-card .ov small{font-size:.68rem;color:#ffb020;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
@media(max-width:640px){.tg-grid{grid-template-columns:repeat(2,1fr);gap:11px}}
/* ---- detail top up ---- */
.tg-detail-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.tg-detail-poster{width:74px;height:74px;border-radius:16px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;font-size:2rem;background:linear-gradient(145deg,#1a1d3d,#0a0c1c);border:1px solid var(--line)}
.tg-detail-poster img{width:100%;height:100%;object-fit:cover}
.tg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.tg-item{background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:13px;cursor:pointer;transition:.2s;text-align:left}
.tg-item:hover{border-color:var(--vio)}
.tg-item.on{border-color:var(--vio);background:linear-gradient(135deg,#8b5cf62a,#2dd4ff17);box-shadow:0 0 14px #8b5cf62b}
.tg-item b{font-size:.82rem;display:block;line-height:1.3;margin-bottom:5px;color:var(--txt);font-weight:600}
.tg-item .p{font-family:var(--font-d);font-weight:800;color:var(--cy);font-size:.92rem}
.marquee{margin:44px auto 0;max-width:900px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);animation:fadeUp .7s .5s backwards}
.marquee .track{display:flex;gap:14px;width:max-content;animation:scrollX 60s linear infinite;will-change:transform}
.marquee .track.paused{animation-play-state:paused}
.marquee .item{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--mut);white-space:nowrap}
@keyframes scrollX{to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ------- sections ------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
section{padding:34px 0}
/* [REDESIGN 2026-09-19] tambah aksen garis gradient vertikal (bahasa warna brand yang sama
   dengan hero) di kiri SETIAP judul section — cuma ubah CSS bersama ini, otomatis berlaku ke
   SEMUA section (Produk, Nokos, SMM, Top Up Game, dst) sekaligus tanpa perlu sentuh HTML
   masing-masing section satu-satu. Alasan: sebelumnya judul section terasa "polos" dibanding
   hero di atasnya yang sudah dipoles — aksen kecil ini kasih sedikit bobot visual & bikin ritme
   ke bawah halaman lebih konsisten, tanpa perlu desain ulang besar-besaran tiap section. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-family:var(--font-d);font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700;display:flex;align-items:center;gap:11px;position:relative;padding-left:15px}
.sec-head h2::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:99px;background:linear-gradient(180deg,var(--vio),var(--cy))}
.sec-head .sub{color:var(--mut);font-size:.88rem;margin-top:5px}
/* [UPDATE 2026-10-31] konten TIDAK lagi tersembunyi sebelum JS siap: hanya disembunyikan setelah html.rv-on dipasang skrip reveal,
   dan dimunculkan ±250px SEBELUM masuk layar (scroll cepat / HP lambat tidak lagi melihat area kosong). */
.reveal{transition:opacity .6s,transform .6s}
html.rv-on .reveal:not(.in){opacity:0;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){html.rv-on .reveal:not(.in){opacity:1;transform:none}}

/* flash sale strip */
.flash-strip{border-radius:var(--r);border:1px solid #ffb02033;background:linear-gradient(100deg,#2a1a0522,#0a0c1c 40%),var(--glass);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;overflow:hidden;transition:transform .15s,border-color .15s;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.flash-strip:hover{transform:translateY(-2px);border-color:#ffb02066}
.welcome-strip{border-radius:var(--r);border:1px solid #3ddc9733;background:linear-gradient(100deg,#0a2a1c22,#0a0c1c 40%),var(--glass);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ---- Kartu ajakan "Jadi Reseller" — didesain ulang biar lebih hidup, bukan cuma strip teks ---- */
.rsl-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid #8b5cf640;background:linear-gradient(135deg,#1a0f3d,#0d0a24 55%,#06131f);padding:26px 24px}
.rsl-glow-a{position:absolute;top:-70px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#8b5cf655,transparent 70%);pointer-events:none}
.rsl-glow-b{position:absolute;bottom:-90px;left:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#2dd4ff3d,transparent 70%);pointer-events:none}
.rsl-top{position:relative;display:flex;align-items:flex-start;gap:14px}
.rsl-badge{flex-shrink:0;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,var(--vio2),var(--cy));box-shadow:0 8px 24px -6px #6d28ff77}
.rsl-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;color:#c9b6ff;background:#8b5cf622;border:1px solid #8b5cf644;padding:3px 10px;border-radius:99px;margin-bottom:8px}
.rsl-top h3{font-family:var(--font-d);font-size:1.18rem;line-height:1.35;font-weight:700;color:#fff}
.rsl-top p{color:var(--mut);font-size:.85rem;line-height:1.6;margin-top:7px}
.rsl-feats{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.rsl-feat{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:#dcd9f7;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:6px 12px;border-radius:99px}
.rsl-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rsl-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--vio2),var(--vio) 60%,var(--cy));padding:13px 22px;border-radius:14px;box-shadow:0 10px 30px -8px #6d28ff88;transition:transform .15s ease,box-shadow .15s ease}
.rsl-btn:active{transform:scale(.97)}
.rsl-btn svg{width:16px;height:16px;flex-shrink:0}
.rsl-note{color:var(--mut);font-size:.72rem}
@media(max-width:480px){.rsl-cta{justify-content:center}.rsl-btn{width:100%;justify-content:center}.rsl-note{display:none}}
.flash-content{display:flex;align-items:center;gap:16px;flex:1;min-width:0;transition:opacity .25s ease,transform .25s ease}
.flash-content.fade{opacity:0;transform:translateX(6px)}
.flash-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.flash-dot{width:7px;height:7px;border-radius:50%;background:#ffffff2e;cursor:pointer;transition:background .2s,transform .2s;border:none;padding:0}
.flash-dot.on{background:#ffb020;transform:scale(1.4)}
.flash-strip::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffb02011 50%,transparent 70%);animation:sweep 3.5s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.flash-strip .bolt{font-size:1.6rem;animation:boltPulse 1.4s ease-in-out infinite}
@keyframes boltPulse{50%{transform:scale(1.2) rotate(-6deg)}}
.flash-strip b{font-family:var(--font-d)}
.countdown{margin-left:auto;display:flex;gap:7px}
.countdown span{background:#ffb02018;border:1px solid #ffb02044;color:var(--amber);border-radius:9px;padding:6px 10px;font-family:var(--font-d);font-weight:700;font-size:.95rem;min-width:44px;text-align:center}

/* filter bar */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.fchip{padding:8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--mut);font-size:.84rem;font-weight:600;transition:.25s}
.fchip.on,.fchip:hover{color:#fff;border-color:var(--vio);background:#8b5cf622}
/* [REDESIGN 2026-09-20] BUG DILAPORKAN: chip kategori produk (Wishlist, Semua, Editing,
   Streaming, dst — dibangun buildCats() ke dalam #catChips) numpuk berantakan jadi 3 baris TIDAK
   RATA di HP (mis. 3 lalu 4 lalu 1 sendirian) — akar masalahnya tombol .fchip lebarnya beda-beda
   ikut panjang teksnya sendiri (elemen <button> biasa di dalam flex-wrap), jadi jumlah yang muat
   per baris beda-beda tiap baris. [REVISI KEDUA] percobaan pertama (rail geser horizontal)
   TERNYATA bukan yang diinginkan — yang diminta adalah tetap wrap ke bawah TAPI rapi rata
   (jumlah kolom SAMA tiap baris), bukan disembunyikan/digeser. Solusinya: pakai CSS GRID (bukan
   flex) dengan lebar kolom SERAGAM — nilai minmax 150px dipilih SETELAH DITES LANGSUNG beberapa
   nilai (92px & 108px masih motong teks jadi "Wishli...") — 150px konsisten kasih 2 kolom rapi
   di lebar HP manapun (360–430px+) TANPA label mana pun yang terpotong, otomatis nambah kolom
   sendiri kalau kontainernya jauh lebih lebar (auto-fill, tidak di-hardcode angka kolom tetap). SEMUA
   properti baru (termasuk nowrap/ellipsis/center) SENGAJA disasar KHUSUS "#catChips .fchip", TIDAK
   di class .fchip dasar — .fchip dipakai di BANYAK tempat lain (tab Gacha, Refund, Hadiah, Trade,
   preset nominal Top Up, dst) yang TIDAK boleh ikut berubah jadi grid/nowrap/center. */
#catChips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;flex:1 1 100%}
#catChips .fchip{width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{margin-left:auto;position:relative}
.search input{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 38px;color:var(--txt);font-size:.88rem;width:220px;outline:none;transition:.25s}
.search input:focus{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.search::before{content:'⌕';position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:1.1rem}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:18px}
/* [NEW 2026-08-22] "Baru Dilihat" — strip horizontal (bukan grid membungkus) supaya kompak &
   tidak mendorong terlalu banyak konten sebelum katalog utama. Kartu di dalamnya pakai .card
   yang sama persis (konsisten), cuma dipaksa lebar tetap + scroll ke samping. */
.grid-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.grid-scroll::-webkit-scrollbar{height:6px}
.grid-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.grid-scroll>.card{flex:0 0 210px;scroll-snap-align:start}
/* ------- paging produk (geser ke samping, bukan list panjang ke bawah) -------
   Kenapa: render semua produk+gambar sekaligus bikin halaman berat & lag saat
   reload kalau produk banyak. Sekarang cuma 1 halaman (±8 kartu) yang di-render
   di DOM tiap saat, sisanya baru dirender saat pindah halaman. */
.prod-pager{width:100%}
.prod-pager .grid,.prod-pager .hd-grid{animation:pgSlide .32s cubic-bezier(.2,.8,.3,1)}
.prod-pager .grid.slide-l,.prod-pager .hd-grid.slide-l{animation-name:pgSlideL}
.prod-pager .grid.slide-r,.prod-pager .hd-grid.slide-r{animation-name:pgSlideR}
@keyframes pgSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pgSlideL{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes pgSlideR{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
/* navigasi halaman (panah + titik) ditaruh di BAWAH grid, bukan di samping —
   lebih gampang dijangkau jempol di HP & lebih jelas kelihatan sebagai kontrol */
.pg-nav-bottom{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
/* ================= [NEW 2026-08-18] REVIEW / TESTIMONI (landing page) ================= */
.rv-star{display:inline-flex;flex-shrink:0}
.rv-star svg{display:block}
.rv-summary{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(160deg,rgba(139,92,246,.1),rgba(45,212,255,.05) 60%),var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin-bottom:22px;overflow:hidden}
.rv-summary::before{content:'';position:absolute;top:-40%;right:-10%;width:220px;height:220px;background:radial-gradient(circle,#8b5cf633,transparent 70%);pointer-events:none}
.rv-summary .rv-avgblock{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rv-summary .rv-avg{font-family:var(--font-d);font-size:2.8rem;font-weight:800;background:linear-gradient(100deg,var(--vio),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.rv-summary .rv-stars{display:flex;gap:2px;margin:5px 0 3px}
.rv-summary .rv-count{color:var(--mut);font-size:.82rem}
.rv-summary .rv-divider{width:1px;align-self:stretch;background:var(--line);flex-shrink:0}
.rv-summary .rv-badgewrap{position:relative;display:flex;flex-direction:column;gap:6px;color:var(--mut);font-size:.78rem;line-height:1.5}
.rv-summary .rv-badgewrap b{color:var(--txt);font-size:.86rem}
.rv-scroll-wrap{position:relative}
.rv-scroll-wrap::before,.rv-scroll-wrap::after{content:'';position:absolute;top:0;bottom:14px;width:36px;pointer-events:none;z-index:2}
.rv-scroll-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.rv-scroll-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.rv-scroll{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rv-scroll::-webkit-scrollbar{height:6px}
.rv-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.rv-card{scroll-snap-align:start;flex:0 0 auto;width:min(320px,82vw);background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;transition:.3s;position:relative;overflow:hidden}
.rv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vio2),var(--cy));opacity:.7}
.rv-card:hover{transform:translateY(-5px);border-color:#8b5cf655;box-shadow:0 18px 44px #00000066,0 0 0 1px #8b5cf622}
.rv-card .rv-quote{position:absolute;top:14px;right:16px;color:var(--line);opacity:.9}
.rv-card .rv-head{display:flex;align-items:center;gap:11px}
.rv-card .rv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--vio2),var(--cy));display:grid;place-items:center;font-weight:700;font-size:.95rem;color:#fff;flex-shrink:0;box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.rv-card .rv-name-row{display:flex;align-items:center;gap:5px}
.rv-card .rv-name{font-weight:700;font-size:.92rem}
.rv-card .rv-verified{display:inline-flex;flex-shrink:0}
.rv-card .rv-product{color:var(--mut);font-size:.74rem;margin-top:1px}
.rv-card .rv-stars{display:flex;gap:2px}
.rv-card .rv-text{font-size:.85rem;line-height:1.65;color:#d8d9e6;flex:1}
@media(max-width:560px){.rv-summary .rv-divider,.rv-summary .rv-badgewrap{display:none}}
.rv-empty{color:var(--mut);font-size:.85rem;text-align:center;padding:30px 0}
.pg-arrow{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);background:var(--glass);color:var(--txt);border-radius:11px;font-size:1.15rem;cursor:pointer;transition:.2s;display:grid;place-items:center}
.pg-arrow:hover:not(:disabled){background:var(--glass2);border-color:var(--vio2)}
.pg-arrow:disabled{opacity:.3;cursor:not-allowed}
.pg-dots{display:flex;justify-content:center;gap:7px}
.pg-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.pg-dots button.on{width:22px;border-radius:5px;background:var(--vio2)}
.card{position:relative;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);padding:20px;transition:transform .3s,border-color .3s,box-shadow .3s;overflow:hidden;display:flex;flex-direction:column;gap:11px}
/* [NEW 2026-08-22] skeleton loading "premium" — shimmer pakai gradient warna brand (violet→cyan→amber)
   alih-alih abu-abu generik, plus glow border yang berdenyut pelan. Kartu asli begitu datang dari
   server masuk dengan animasi reveal (fade+scale+geser naik, staggered per kartu) — bukan muncul
   tiba-tiba/patah. Lihat renderSkeletonCards()/cardHTML() di script bawah. */
@keyframes skelShimmer{0%{background-position:-340px 0}100%{background-position:340px 0}}
@keyframes skelGlow{0%,100%{box-shadow:0 0 0 1px #8b5cf622}50%{box-shadow:0 0 22px 1px #2dd4ff33}}
.skel-card{border-radius:var(--r);background:var(--glass);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:11px;animation:skelGlow 2.1s ease-in-out infinite}
.skel-bar{border-radius:8px;background:linear-gradient(100deg,#8b5cf61a 20%,#2dd4ff33 40%,#ffb02026 50%,#8b5cf61a 70%);background-size:340px 100%;animation:skelShimmer 1.5s ease-in-out infinite}
@keyframes cardReveal{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-reveal{animation:cardReveal .5s cubic-bezier(.16,1,.3,1) both}
.card:hover{transform:translateY(-6px);border-color:#8b5cf655;box-shadow:0 18px 44px #00000066,0 0 0 1px #8b5cf622}
.card::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.05),transparent);transform:skewX(-18deg);transition:left .6s}
.card:hover::after{left:130%}
.card .top{display:flex;align-items:flex-start;gap:13px}
.card .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem;background:linear-gradient(135deg,#8b5cf62b,#2dd4ff1e);border:1px solid var(--line);flex-shrink:0;overflow:hidden}
.card .ic img{width:100%;height:100%;object-fit:cover}
.card h3{font-family:var(--font-d);font-size:1.02rem;font-weight:600;line-height:1.35}
.card .cat{color:var(--mut);font-size:.76rem;font-weight:600;margin-top:3px}
.badges{display:flex;gap:6px;flex-wrap:wrap;min-height:0}
.badges:empty{display:none}
/* [NEW 2026-08-22] tombol wishlist ❤️ — pojok kanan atas kartu produk */
.wish-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;transition:.2s;z-index:2;backdrop-filter:blur(6px)}
.wish-btn:hover{transform:scale(1.1);color:var(--red)}
.wish-btn.on{background:var(--red);border-color:var(--red);color:#fff}
.wish-btn svg{width:16px;height:16px}
/* [NEW 2026-09-10] checkbox "Bandingkan" — pojok kiri atas, kebalikan dari wish-btn di kanan */
.cmp-check{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--line);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;backdrop-filter:blur(6px);font-size:14px;transition:.2s}
/* [REDESIGN 2026-09-10] checkbox perbandingan DISEMBUNYIKAN default (dinilai "memotong"/merusak
   tampilan grid produk) — cuma muncul kalau mode Bandingkan SENGAJA diaktifkan (tombol di atas
   grid, lihat toggleCompareMode()), grid tetap 100% bersih di kondisi normal/mayoritas waktu. */
body.compare-mode .cmp-check{display:flex}
.cmp-check input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.cmp-check:has(input:checked){background:var(--vio);border-color:var(--vio)}
.cmp-bar{position:fixed;bottom:calc(var(--bnav-h,0px) + 16px);left:50%;transform:translateX(-50%) translateY(120%);background:var(--bg2);border:1px solid var(--vio);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:12px;z-index:150;box-shadow:0 12px 40px #000000aa;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.cmp-bar.show{transform:translateX(-50%) translateY(0)}
.cmp-bar button{white-space:nowrap}
.bdg{font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:8px;letter-spacing:.4px}
.bdg.star{background:#ffb02022;color:var(--amber);border:1px solid #ffb02044}
.bdg.flash{background:#ff5c7a22;color:var(--red);border:1px solid #ff5c7a44;animation:boltPulse 1.6s infinite}
.bdg.promo{background:#3ddc9722;color:var(--green);border:1px solid #3ddc9744;cursor:pointer;transition:transform .15s}
.bdg.promo:hover{transform:scale(1.06)}
.card .desc{color:var(--mut);font-size:.83rem;line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prices{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.prices .now{font-family:var(--font-d);font-weight:700;font-size:1.22rem;background:linear-gradient(90deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.prices .strike{color:var(--mut);text-decoration:line-through;font-size:.85rem}
.prices .disc{font-size:.7rem;font-weight:800;color:var(--green);background:#3ddc9722;padding:3px 7px;border-radius:7px}
.stok{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--mut);font-weight:600}
.stok .live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.8s infinite}
.stok.empty .live{background:var(--red);box-shadow:0 0 8px var(--red)}
@keyframes blink{50%{opacity:.35}}
.card .btn{width:100%}

/* broadcast */
.bc-list{display:flex;flex-direction:column;gap:14px}
.bc{position:relative;border-radius:var(--r);background:linear-gradient(135deg,rgba(109,40,255,.07),rgba(45,212,255,.03) 60%),var(--glass);border:1px solid var(--line);padding:18px 20px 18px 62px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;animation:bcIn .5s cubic-bezier(.2,.9,.3,1.1) backwards}
.bc:hover{transform:translateY(-3px);border-color:#6d28ff55;box-shadow:0 10px 28px -12px #6d28ff55}
.bc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--vio),var(--cy))}
.bc-ic{position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:linear-gradient(135deg,var(--vio),var(--cy));box-shadow:0 4px 14px -4px #6d28ff88}
.bc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bc .bc-new{font-size:.62rem;font-weight:800;letter-spacing:.4px;color:#03040a;background:linear-gradient(90deg,#3ddc97,#2dd4ff);padding:2px 8px;border-radius:99px;animation:blink 2s infinite}
.bc h4{font-family:var(--font-d);font-size:.98rem;margin-bottom:6px}
.bc p{color:var(--mut);font-size:.87rem;line-height:1.6;white-space:pre-line}
.bc time{display:block;margin-top:9px;font-size:.74rem;color:var(--mut);opacity:.7}
@keyframes bcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* footer */
footer{border-top:1px solid var(--line);margin-top:50px;padding:34px clamp(16px,4vw,48px);text-align:center;color:var(--mut);font-size:.84rem}
/* [NEW 2026-10-31] tampilan kosong yang ramah — semua .empty di web utama jadi kartu lembut berikon (isi teks tetap dari kode asal) */
.page .empty{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:30px 20px 26px;border-radius:18px;border:1.5px dashed var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--vio) 5%,transparent),transparent);color:var(--mut);text-align:center;line-height:1.55;font-size:.9rem}
.page .empty:not(:has(svg))::before{content:'';width:46px;height:46px;margin-bottom:6px;border-radius:14px;background:color-mix(in srgb,var(--vio) 14%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8db3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E") center/24px no-repeat}
.page .empty svg{width:40px;height:40px;margin-bottom:4px;opacity:.75}/* [NEW 2026-10-31 · v2] footer: pita biru tua senada header, kartu bantuan, kolom merek + 3 kolom menu, baris bayar & legal */
footer.xvf{--f-bg1:#0d3b8f;--f-bg2:#071c47;--f-tx:#c9d7f6;--f-mut:#8fa5d6;--f-line:rgba(255,255,255,.12);
  position:relative;margin-top:60px;padding:0 clamp(16px,4vw,48px) calc(22px + var(--bnav-h,0px));text-align:left;font-size:.9rem;color:var(--f-tx);
  background:radial-gradient(circle at 12% 0%,rgba(91,140,255,.28),transparent 42%),radial-gradient(circle at 95% 100%,rgba(0,200,255,.14),transparent 40%),linear-gradient(180deg,var(--f-bg1),var(--f-bg2));border-top:0}
html footer.xvf,html.tm-market footer.xvf{color:var(--f-tx)!important;border-top:0!important;font-size:.9rem;padding-top:0!important;padding-bottom:calc(22px + var(--bnav-h,0px))!important;margin-top:60px!important;background:radial-gradient(circle at 12% 0%,rgba(91,140,255,.28),transparent 42%),radial-gradient(circle at 95% 100%,rgba(0,200,255,.14),transparent 40%),linear-gradient(180deg,#0d3b8f,#071c47)!important}
footer.xvf .xvf-wrap{max-width:1180px;margin:0 auto}html.tm-market footer.xvf .xvf-wrap{max-width:none}@media(min-width:721px){html footer.xvf .xvf-pay,html footer.xvf .xvf-bot{padding-right:130px}}body{overflow-x:clip}
/* kartu bantuan (sedikit naik ke atas pita) */
footer.xvf .xvf-help{position:relative;top:-34px;margin-bottom:-6px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:18px;background:#fff;color:#152033;box-shadow:0 22px 40px -24px rgba(7,28,71,.7)}
footer.xvf .xvf-help-t{display:flex;flex-direction:column;gap:2px;min-width:0}
footer.xvf .xvf-help-t b{font-size:1.05rem;color:#0d3b8f}
footer.xvf .xvf-help-t span{font-size:.86rem;color:#5d6b82}
footer.xvf .xvf-help-a{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html footer.xvf a.xvf-status{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#f1f5fd;border:1px solid #dde6f7;color:#23406f!important;text-decoration:none;font-weight:700;font-size:.82rem}
footer.xvf .xvf-status i{width:9px;height:9px;border-radius:50%;background:#9aa4b2;box-shadow:0 0 0 3px rgba(154,164,178,.25)}
footer.xvf .xvf-status.ok i{background:#1faa59;box-shadow:0 0 0 3px rgba(31,170,89,.22);animation:xvfPulse 2s ease-in-out infinite}
footer.xvf .xvf-status.warn i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
@keyframes xvfPulse{50%{box-shadow:0 0 0 6px rgba(31,170,89,.08)}}
footer.xvf .xvf-contact{display:flex;gap:8px;flex-wrap:wrap}
html footer.xvf .xvf-contact a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;color:#fff!important;text-decoration:none;font-weight:800;font-size:.84rem;box-shadow:0 8px 16px -10px rgba(0,0,0,.5);transition:transform .15s}
@media(hover:hover){html footer.xvf .xvf-contact a:hover{transform:translateY(-2px)}}
footer.xvf .xvf-contact a::before{content:'';width:16px;height:16px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
footer.xvf .xvf-contact a.wa{background:#1faa59;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.3 0 .2 0 .8-.2 1.4z'/%3E%3C/svg%3E")}
footer.xvf .xvf-contact a.tg{background:#229ed9;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3l-3.1 14.8c-.2 1-.8 1.3-1.7.8l-4.7-3.5-2.3 2.2c-.3.3-.5.5-1 .5l.3-4.8 8.8-7.9c.4-.3-.1-.5-.6-.2L6.8 13l-4.7-1.5c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z'/%3E%3C/svg%3E")}
/* isi utama */
footer.xvf .xvf-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;padding:8px 0 26px}
footer.xvf .xvf-logo{display:flex;align-items:center;gap:12px}
footer.xvf .xvf-logo img{width:44px;height:44px;border-radius:12px;background:#fff;object-fit:contain;padding:3px;box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
html footer.xvf .xvf-logo b{font-size:1.2rem;color:#fff}
footer.xvf .xvf-brand p{margin:12px 0 14px;max-width:36ch;line-height:1.6;color:var(--f-tx)}
footer.xvf .xvf-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
footer.xvf .xvf-trust li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--f-line);font-size:.76rem;font-weight:700;color:#e6eeff}
footer.xvf .xvf-trust li::before{content:'✓';color:#5ee6a8;font-weight:900}
footer.xvf .xvf-col{position:static;display:flex;flex-direction:column;gap:9px;background:none;border:0;box-shadow:none;padding:0;margin:0;height:auto}
html footer.xvf .xvf-col h4{margin:4px 0 6px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#fff}
html footer.xvf .xvf-col a{position:relative;width:max-content;max-width:100%;color:var(--f-tx)!important;text-decoration:none;font-weight:500;transition:color .15s,transform .15s;opacity:1}
@media(hover:hover){html footer.xvf .xvf-col a:hover{color:#fff!important;transform:translateX(3px)}}
/* baris bayar & bawah */
footer.xvf .xvf-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0;border-top:1px solid var(--f-line);font-size:.8rem;max-width:none;margin:0}
footer.xvf .xvf-lbl{color:var(--f-mut);font-weight:700;margin-right:4px}
footer.xvf .xvf-pay em{font-style:normal;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:8px;background:#fff;color:#0d3b8f;border:0}
footer.xvf .xvf-sep{flex:1}
footer.xvf .xvf-secure{display:inline-flex;align-items:center;gap:6px;color:var(--f-mut);font-weight:600}
footer.xvf .xvf-secure::before{content:'';width:13px;height:13px;background:#5ee6a8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 4 4v6c0 5.5 3.4 10.7 8 12 4.6-1.3 8-6.5 8-12V4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 4 4v6c0 5.5 3.4 10.7 8 12 4.6-1.3 8-6.5 8-12V4z'/%3E%3C/svg%3E") center/contain no-repeat}
footer.xvf .xvf-bot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--f-line);font-size:.8rem;color:var(--f-mut);max-width:none;margin:0}
footer.xvf .xvf-bot>*{flex:0 1 auto}
footer.xvf .xvf-legal{display:flex;flex-wrap:wrap;gap:6px 16px}
html footer.xvf .xvf-legal a,html footer.xvf .xvf-bot a{color:var(--f-tx)!important;text-decoration:none;font-weight:600}
html footer.xvf .xvf-legal a:hover,html footer.xvf .xvf-bot a:hover{color:#fff!important;text-decoration:underline}
@media(max-width:900px){footer.xvf .xvf-in{grid-template-columns:repeat(3,minmax(0,1fr))}footer.xvf .xvf-brand{grid-column:1/-1}}
@media(max-width:600px){footer.xvf .xvf-help{flex-direction:column;align-items:stretch;padding:16px}footer.xvf .xvf-help-a{justify-content:flex-start}footer.xvf .xvf-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}footer.xvf .xvf-col:last-child{grid-column:1/-1}footer.xvf .xvf-sep{display:none}footer.xvf .xvf-bot{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){footer.xvf .xvf-status.ok i{animation:none}}
/* [FIX 2026-10-31] HP: footer menutup ruang di bawahnya (body diberi padding untuk nav bawah → dulu tampak pita putih),
   teks tidak lagi tertutup tombol telepon & maskot yang melayang di kanan bawah, dan tidak ada teks yang keluar layar. */
footer.xvf .xvf-bot>*,footer.xvf .xvf-pay>*{max-width:100%;min-width:0}
footer.xvf .xvf-copy{white-space:normal;overflow-wrap:anywhere}
@media(max-width:720px){
  html footer.xvf,html.tm-market footer.xvf{margin-bottom:calc(-1 * var(--bnav-h,0px))!important;padding-bottom:calc(var(--bnav-h,0px) + 12px)!important}
  footer.xvf .xvf-bot{padding-right:0}
  footer.xvf .xvf-legal{gap:8px 14px;padding-right:92px}footer.xvf .xvf-copy{padding-right:92px}footer.xvf .xvf-bot{padding-bottom:0}
}
.xvf-legal a{text-decoration:none}

/* ------- modal ------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .back{position:absolute;inset:0;background:rgba(3,4,10,.75);backdrop-filter:blur(8px);animation:fadeIn .25s}
.modal .box{position:relative;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 82%, #8b5cf6 18%),var(--bg));border:1px solid var(--line);border-radius:22px;padding:28px;animation:popIn .35s cubic-bezier(.2,.9,.3,1.2)}
.modal .box.lg{max-width:560px}
/* [NEW 2026-08-22] Invoice — dokumen putih "kertas" di dalam modal gelap (sengaja kontras,
   biar kelihatan seperti dokumen asli), dicetak/disimpan PDF lewat window.print() bawaan
   browser. Sama pola dengan versi admin.html. */
.invoice-doc{background:#fff;color:#111;border-radius:14px;padding:26px 22px;font-family:system-ui,sans-serif;margin-top:4px}
.invoice-doc .inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:18px}
.invoice-doc .inv-brand{font-family:var(--font-d);font-weight:700;font-size:1.2rem}
.invoice-doc .inv-meta{text-align:right;font-size:.72rem;color:#555;line-height:1.6}
.invoice-doc .inv-row{display:flex;justify-content:space-between;font-size:.82rem;padding:9px 0;border-bottom:1px solid #eee}
.invoice-doc .inv-row.total{border-bottom:none;border-top:2px solid #111;margin-top:6px;padding-top:12px;font-weight:800;font-size:.95rem}
.invoice-doc .inv-status{display:inline-block;font-size:.66rem;font-weight:800;padding:3px 10px;border-radius:20px;margin-top:4px}
@media print{
  body *{visibility:hidden}
  #invoiceBox,#invoiceBox *{visibility:visible}
  #invoiceBox{position:fixed;inset:0;max-width:100%!important}
  .no-print{display:none!important}
}
@keyframes fadeIn{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.96)}}
.modal .close{position:absolute;top:15px;right:15px;background:var(--glass);border:1px solid var(--line);color:var(--mut);width:32px;height:32px;border-radius:10px;font-size:1rem}
.modal h3{font-family:var(--font-d);font-size:1.3rem;margin-bottom:5px}
.modal .sub{color:var(--mut);font-size:.86rem;margin-bottom:20px}
/* [NEW 2026-09-04] pop up promo/pengumuman — kartu gambar full-bleed + tombol X bulat menimpa
   gambar, sesuai referensi desain yang dikirim user (lihat komentar HTML di atas #sitePopupModal). */
.sp-box{max-width:400px;width:calc(100% - 32px);padding:0;overflow:hidden;text-align:left}
.sp-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(8,8,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0}
.sp-media{line-height:0}
.sp-media img{width:100%;max-height:min(46vh,300px);object-fit:cover;display:block}
.sp-body{padding:24px 22px 26px}
.sp-body h3{margin:0 0 12px;font-size:1.32rem;line-height:1.28;word-break:break-word}
.sp-body .sp-msg{color:var(--mut);font-size:.92rem;line-height:1.65;white-space:pre-line;word-break:break-word;margin-bottom:20px}
.sp-body .sp-cta{width:100%;padding:15px;border-radius:14px;font-weight:800;font-size:.95rem}
@media(max-width:480px){.sp-body{padding:20px 18px 22px}.sp-media img{max-height:220px}}
.field{margin-bottom:14px}
/* [NEW 2026-09-20] ikon mata (show/hide password) — reusable, dipasang di semua field password
   (login, daftar, lupa password, ganti password). Wrapper relative + tombol absolute di kanan,
   input dikasih padding-right ekstra biar teksnya tidak ketiban ikon. */
.pw-field-wrap{position:relative}
.pw-field-wrap input{padding-right:42px !important}
.pw-eye-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--mut);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .15s ease}
.pw-eye-btn:hover{color:var(--txt)}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--mut);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt);font-size:.92rem;outline:none;transition:.25s}
.field select{appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b93ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;cursor:pointer}
.field select option{background:#12142b;color:var(--txt)}
.field input:focus,.field textarea:focus{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.switch-auth{text-align:center;margin-top:16px;font-size:.85rem;color:var(--mut)}
.switch-auth a{color:var(--cy);cursor:pointer;font-weight:700;text-decoration:none}
.err{background:#ff5c7a1a;border:1px solid #ff5c7a44;color:#ff8fa5;border-radius:11px;padding:10px 13px;font-size:.84rem;margin-bottom:13px;display:none}
.ok-msg{background:#3ddc971a;border:1px solid #3ddc9744;color:#7ce8bb;border-radius:11px;padding:10px 13px;font-size:.84rem;margin-bottom:13px;display:none}

/* qty stepper */
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:max-content}
.qty button{background:var(--glass);border:none;color:var(--txt);width:42px;height:42px;font-size:1.15rem}
.qty button:hover{background:var(--glass2)}
.qty input{width:64px;height:42px;background:transparent;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--txt);text-align:center;font-weight:700;font-size:1rem;outline:none}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px dashed var(--line);margin-top:16px}
.total-row .tt{font-family:var(--font-d);font-weight:700;font-size:1.3rem;color:var(--cy)}

/* credentials */
.cred{background:#05060f;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px;display:flex;align-items:center;gap:10px;font-size:.86rem}
.cred code{font-family:ui-monospace,monospace;color:var(--cy);word-break:break-all}
.cred .cp{margin-left:auto;background:var(--glass);border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:6px 10px;font-size:.74rem;font-weight:700;flex-shrink:0}
.cred .cp:hover{color:#fff}
.snk-box{background:#ffb0200d;border:1px solid #ffb02033;border-radius:12px;padding:13px 15px;font-size:.83rem;color:#ffd58a;line-height:1.6;white-space:pre-line}

/* ------- profile view ------- */
.page{display:none}
.page.on{display:block;animation:fadeUp .45s}
.profile-head{display:flex;align-items:center;gap:18px;padding:26px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);flex-wrap:wrap;margin-top:26px}
.profile-head .big-av{width:70px;height:70px;border-radius:22px;background:linear-gradient(135deg,var(--vio),var(--cy));display:grid;place-items:center;font-size:1.7rem;font-weight:800;box-shadow:0 0 30px #6d28ff55}
.profile-head h2{font-family:var(--font-d)}
.profile-head .em{color:var(--mut);font-size:.88rem}
.saldo-big{margin-left:auto;text-align:right}
/* [NEW 2026-09-25] akses cepat toko reseller di bawah saldo */
.store-quick{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:14px 0 4px;align-items:stretch}
.sq-card{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;background:var(--glass2);border:1px solid var(--line);color:var(--txt);text-decoration:none;transition:.15s;min-width:0}
.sq-card:hover{border-color:var(--vio);transform:translateY(-1px)}
.sq-admin{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(45,212,255,.12));border-color:rgba(139,92,246,.45)}
.sq-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(139,92,246,.18);color:var(--vio);flex:none}
.sq-tx{display:flex;flex-direction:column;min-width:0}.sq-tx b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sq-tx small{font-size:.74rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-status{display:flex;align-items:center;gap:7px;padding:0 14px;border-radius:16px;border:1px solid var(--line);background:var(--glass);font-size:.8rem;font-weight:700;color:var(--mut);white-space:nowrap}
.sq-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px currentColor}
.sq-card:focus-visible{outline:3px solid var(--vio);outline-offset:2px}
@media(max-width:640px){.store-quick{grid-template-columns:1fr 1fr}.sq-status{grid-column:1/-1;justify-content:center;padding:8px}}
.saldo-big .lbl{color:var(--mut);font-size:.78rem;font-weight:700}
.saldo-big .val{font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--green)}
.tabs{display:flex;gap:8px;margin:22px 0;flex-wrap:wrap}
.tab{padding:9px 18px;border-radius:11px;background:var(--glass);border:1px solid var(--line);color:var(--mut);font-weight:700;font-size:.86rem;transition:.25s;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.tab.on{color:#fff;border-color:var(--vio);background:#8b5cf622}
.pane{display:none}
.pane.on{display:block;animation:fadeUp .4s}
.order-card{border-radius:var(--r);background:var(--glass);border:1px solid var(--line);padding:18px 20px;margin-bottom:13px}
.order-card .oc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.order-card .oc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,#8b5cf62b,#2dd4ff1e);overflow:hidden;flex-shrink:0}
.order-card .oc-ic img{width:100%;height:100%;object-fit:cover}
.order-card h4{font-family:var(--font-d);font-size:.98rem}
.order-card .meta{color:var(--mut);font-size:.78rem;margin-top:3px}
.order-card .tot{margin-left:auto;font-family:var(--font-d);font-weight:700;color:var(--cy)}
.order-card .toggle{background:none;border:none;color:var(--vio);font-weight:700;font-size:.82rem;margin-top:11px;padding:0}
.order-card .detail{display:none;margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}
.order-card .detail.on{display:block;animation:fadeUp .3s}
.log{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;background:var(--glass);border:1px solid var(--line);margin-bottom:9px;font-size:.86rem}
.log .amt{margin-left:auto;font-weight:800;font-family:var(--font-d)}
.log .amt.plus{color:var(--green)}.log .amt.min{color:var(--red)}
.empty{text-align:center;padding:44px 16px;color:var(--mut)}
.empty-illust{margin:0 auto 14px;display:block;animation:floatBob 3.2s ease-in-out infinite}
.empty .big{font-size:2.4rem;margin-bottom:10px}

/* toast */
/* [REDESIGN 2026-09-11] SEBELUMNYA di bawah layar (numpuk sama tombol chat #helpFab & bottom
   nav mobile — persis keluhan di screenshot), teks+emoji nyampur jadi 1 baris yang gampang
   pecah 2 baris berantakan. Sekarang dipindah ke ATAS layar (area lebih lapang, tidak numpuk
   elemen apa pun), dan strukturnya jadi ikon (kotak bulat terpisah) + teks (flex row) — bukan
   1 baris teks polos berisi emoji nempel di depan kata. */
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-30px) scale(.92);max-width:min(92vw,380px);display:flex;align-items:center;gap:11px;background:color-mix(in srgb, var(--bg) 90%, #8b5cf6 10%);border:1px solid var(--vio);border-radius:16px;padding:12px 18px 12px 12px;font-size:.86rem;font-weight:600;z-index:400;transition:.35s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 14px 44px #000000aa;opacity:0;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;animation:toastBounce .5s cubic-bezier(.34,1.56,.64,1)}
#toast .toast-ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:var(--vio2,#6d28ff);color:#fff;display:flex;align-items:center;justify-content:center}
#toast .toast-ic svg{width:18px;height:18px}
#toast .toast-txt{flex:1;line-height:1.35}
/* ===== [NEW 2026-09-10] Paket animasi CSS global — dirancang biar reusable (1 class dipakai
   di banyak tempat), bukan animasi satuan yang cuma berlaku 1 spot. ===== */
@keyframes toastBounce{0%{transform:translateX(-50%) translateY(-30px) scale(.9);opacity:0}60%{transform:translateX(-50%) translateY(4px) scale(1.02);opacity:1}100%{transform:translateX(-50%) translateY(0) scale(1)}}
/* Pulsa saldo — nyala sekilas pas angka lagi "berjalan" (dipasangkan sama animateSaldoTo() di JS) */
.saldo-pulse{animation:saldoGlow .65s ease}
@keyframes saldoGlow{0%,100%{text-shadow:none}40%{text-shadow:0 0 12px var(--cy,#2dd4ff)}}
/* Skeleton shimmer — pengganti teks "Memuat..." polos di mana pun butuh loading placeholder */
.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:10px;color:transparent !important}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:skelShine 1.3s ease-in-out infinite}
@keyframes skelShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel-card{height:150px;border-radius:16px}
.skel-line{height:14px;margin:8px 0;border-radius:6px}
/* Ripple tombol — lingkaran memudar dari titik klik, dipasang via JS addBtnRipple() di elemen .btn */
.btn{position:relative;overflow:hidden}
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:rippleAnim .55s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}
/* Checkmark animasi — dipakai di modal sukses (beli, WD, dll) */
.anim-check{width:64px;height:64px;border-radius:50%;background:var(--green,#3ddc97);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:checkPop .45s cubic-bezier(.34,1.56,.64,1)}
.anim-check svg{stroke-dasharray:24;stroke-dashoffset:24;animation:checkDraw .35s .2s ease forwards}
@keyframes checkPop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
/* Fade+slide dipakai pas ganti kategori/tab produk */
.fade-switch{animation:fadeSwitch .3s ease}
@keyframes fadeSwitch{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* [NEW 2026-09-10] Progress bar status pesanan — dipasangkan dengan orderProgressBar() di JS */
.op-bar{display:flex;align-items:center;margin:10px 0 4px}
.op-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto}
.op-dot{width:12px;height:12px;border-radius:50%;background:var(--line);border:2px solid var(--line);transition:.3s ease;display:block}
.op-step.op-done .op-dot{background:var(--green,#3ddc97);border-color:var(--green,#3ddc97);box-shadow:0 0 8px #3ddc9788}
.op-lbl{font-size:9.5px;color:var(--mut);white-space:nowrap}
.op-step.op-done .op-lbl{color:var(--txt)}
.op-line{flex:1;height:2px;background:var(--line);margin:0 4px 15px;transition:background .4s ease}
.op-line.op-done{background:var(--green,#3ddc97)}
.op-fail{display:flex;align-items:center;gap:6px;color:#ff8c8c;font-size:12px;font-weight:700;margin:10px 0 4px}
/* [NEW 2026-09-11] progress bar "Transfer ke Toko" — masa tahan 3 jam */
.tsf-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.tsf-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber,#ffb020),var(--vio,#8b5cf6));position:relative;transition:width 1s linear}
.tsf-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:tsfShine 1.6s ease-in-out infinite}
@keyframes tsfShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* [NEW 2026-09-10] Filter Harga */
.price-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 16px}
.pf-chip{background:var(--glass);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:7px 14px;font-size:.78rem;cursor:pointer;font-family:inherit;transition:.2s}
.pf-chip.on{background:linear-gradient(135deg,var(--vio),var(--vio2));border-color:transparent;color:#fff;font-weight:700}
.pf-custom{display:flex;align-items:center;gap:6px;margin-left:4px}
.pf-custom input{width:80px;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:var(--txt);font-size:.78rem;outline:none}
.pf-custom input:focus{border-color:var(--vio)}
.pf-custom span{color:var(--mut);font-size:.78rem}
/* [REDESIGN 2026-09-11] toolbar ramping — pengganti tumpukan tombol Mode Bandingkan + Filter
   Harga yang sebelumnya masing-masing 1 baris sendiri (dinilai "tidak estetik"/ramai). */
.toolbar-row{display:flex;gap:8px;margin-bottom:6px}
.tb-btn{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);color:var(--mut);border-radius:11px;padding:9px 14px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.tb-btn:hover{border-color:var(--vio)}
.tb-btn.on{background:linear-gradient(135deg,var(--vio),var(--vio2));border-color:transparent;color:#fff}
.tb-btn .tb-count{background:rgba(255,255,255,.25);border-radius:999px;padding:1px 7px;font-size:.72rem;margin-left:2px}
/* [NEW 2026-09-10] Digit flip — countdown flash sale (dipasangkan dengan flipDigit() di JS) */
.digit-flip{display:inline-block;animation:digitFlip .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes digitFlip{0%{transform:translateY(-40%) scale(.85);opacity:.3}60%{transform:translateY(6%) scale(1.06)}100%{transform:translateY(0) scale(1);opacity:1}}
/* Badge notifikasi berdenyut — pasang class ini di elemen count/badge mana pun yang perlu "ada yang baru" */
.badge-pulse{animation:badgePulse 1.4s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ff5c7a55}50%{transform:scale(1.12);box-shadow:0 0 0 5px #ff5c7a00}}
/* Shake — dipasang sesaat sebelum konfirmasi hapus/aksi berisiko, lihat shakeEl() di JS */
.shake-warn{animation:shakeWarn .4s ease}
@keyframes shakeWarn{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* Fly-to-cart — kloningan ikon kecil "terbang" ke arah Tas pas checkout berhasil */
.fly-item{position:fixed;z-index:999;pointer-events:none;font-size:22px;transition:transform .55s cubic-bezier(.3,.1,.4,1),opacity .55s ease;will-change:transform,opacity}

/* ------- flash image ------- */
.flash-img{width:86px;height:58px;border-radius:12px;object-fit:cover;border:1px solid #ffb02044;flex-shrink:0}

/* ------- service tables (nokos & smm) ------- */
.svc-head{padding:34px 0 8px;text-align:left}
.svc-head h1{font-family:var(--font-d);font-size:clamp(1.6rem,3.4vw,2.4rem)}
.svc-head p{color:var(--mut);margin-top:8px;max-width:640px;line-height:1.65;font-size:.93rem}
.demo-pill{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 13px;border-radius:999px;background:#ffb02015;border:1px solid #ffb02044;color:var(--amber);font-size:.76rem;font-weight:700}
.svc-list{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.svc{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:15px;background:var(--glass);border:1px solid var(--line);transition:.25s;flex-wrap:wrap}

/* ---- SMM Panel v2 ---- */
/* [NEW] chip kategori jadi 1 baris geser (bukan wrap berbaris-baris) + scrollbar tipis yang
   SENGAJA dibuat terlihat jelas (bukan disembunyikan) supaya pembeli langsung paham ada lebih
   banyak kategori kalau digeser ke samping — beda dari toko reseller yang scrollbar-nya
   disembunyikan, di sini justru mau ditonjolkan sebagai penanda visual "geser di sini". */
.smm-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:20px 0 6px;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#8b5cf6aa transparent}
.smm-tabs::-webkit-scrollbar{height:6px}
.smm-tabs::-webkit-scrollbar-track{background:var(--glass);border-radius:99px}
.smm-tabs::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--vio),var(--cy));border-radius:99px}
.smm-tabs::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,var(--vio2),var(--cy))}
.smm-scroll-hint{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:.72rem;margin:0 0 10px}
.smm-tab{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:12px;background:var(--glass);border:1px solid var(--line);color:var(--mut);font-size:.84rem;font-weight:700;transition:.22s;cursor:pointer;flex:0 0 auto;white-space:nowrap}
.smm-tab:hover{border-color:var(--vio);color:var(--txt)}
.smm-tab.on{background:linear-gradient(135deg,#8b5cf633,#2dd4ff1e);border-color:var(--vio);color:#fff;box-shadow:0 0 16px #8b5cf62e}
.smm-tab .cnt{font-size:.68rem;font-weight:800;background:rgba(255,255,255,.09);padding:1px 7px;border-radius:8px;color:var(--mut)}
.smm-tab.on .cnt{background:#8b5cf644;color:#d9c8ff}
.smm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.smm-search{flex:1;min-width:230px;display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:0 14px;transition:.2s}
.smm-search:focus-within{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.smm-search .ico{opacity:.6;font-size:.9rem}
.smm-search input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:.9rem;padding:12px 0}
.smm-catsel{min-width:230px;max-width:340px;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:12px 14px;color:var(--txt);font-size:.88rem;outline:none;cursor:pointer;transition:.2s}
.smm-catsel:focus{border-color:var(--vio)}
.smm-catsel option{background:#12142b;color:var(--txt)}
.smm-statbar{color:var(--mut);font-size:.79rem;margin-top:12px}
.smm-statbar b{color:var(--txt)}
.svc .plat{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;flex-shrink:0;border:1px solid var(--line)}
.svc .plat .ic-svg{width:20px;height:20px}
.svc .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.svc .tag-s{font-size:.63rem;font-weight:800;padding:2.5px 8px;border-radius:7px;letter-spacing:.3px}
.tag-s.fast{background:#ff5c7a1e;color:var(--red);border:1px solid #ff5c7a3a}
.tag-s.grt{background:#3ddc971e;color:var(--green);border:1px solid #3ddc973a}
.tag-s.refill{background:#2dd4ff1c;color:var(--cy);border:1px solid #2dd4ff3a}
.tag-s.id{background:#ffb0201c;color:var(--amber);border:1px solid #ffb0203a}
.svc .price-pill{background:linear-gradient(135deg,#8b5cf61e,#2dd4ff14);border:1px solid #8b5cf63a;border-radius:11px;padding:7px 13px;text-align:center}
.svc .price-pill .n{font-family:var(--font-d);font-weight:800;color:var(--cy);font-size:.92rem}
.svc .price-pill .u{color:var(--mut);font-size:.64rem;margin-top:1px}
@media(max-width:640px){
  .svc{gap:10px;padding:13px 14px}
  .svc .price-pill{margin-left:auto}
  .smm-catsel{min-width:100%;max-width:100%}
}

/* ---- tombol suara ---- */
.snd-btn{width:38px;height:38px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:1rem;display:grid;place-items:center;transition:.2s;flex-shrink:0}
.snd-btn:hover{border-color:var(--vio)}
.snd-btn.off{opacity:.5;filter:grayscale(1)}

/* ---- onboarding pemula ---- */
.ob-overlay{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,4,12,.82);backdrop-filter:blur(8px)}
.ob-overlay.open{display:flex;animation:obIn .3s ease}
@keyframes obIn{from{opacity:0}to{opacity:1}}
.ob-card{width:100%;max-width:430px;background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 82%, #8b5cf6 18%),var(--bg));border:1px solid var(--line);border-radius:24px;padding:30px 26px;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.55);animation:obCard .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes obCard{from{transform:translateY(22px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.ob-ic{font-size:3.2rem;line-height:1;margin-bottom:14px;display:inline-block;animation:obBounce 2.2s ease infinite}
@keyframes obBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ob-card h3{font-family:var(--font-d);font-size:1.28rem;margin-bottom:9px}
.ob-card p{color:var(--mut);font-size:.9rem;line-height:1.65;margin-bottom:4px}
.ob-dots{display:flex;gap:7px;justify-content:center;margin:20px 0 18px}
.ob-dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.14);transition:.3s}
.ob-dot.on{width:24px;background:linear-gradient(90deg,var(--vio),var(--cy))}
.ob-nav{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.ob-skip{position:absolute;top:14px;right:18px;color:var(--mut);font-size:.78rem;background:none;border:none;cursor:pointer;transition:.2s}
.ob-skip:hover{color:var(--txt)}
.ob-later{display:block;margin:12px auto 0;color:var(--mut);font-size:.76rem;background:none;border:none;cursor:pointer;text-decoration:underline;opacity:0;pointer-events:none;transition:.4s}
.ob-later.show{opacity:.8;pointer-events:auto}
.ob-ios{background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:13px 15px;font-size:.82rem;color:var(--mut);text-align:left;line-height:1.8;margin-top:6px}

/* ---- halaman AI chat ---- */
.ai-box{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:20px}
.ai-msgs{display:flex;flex-direction:column;gap:14px;max-height:56vh;min-height:260px;overflow-y:auto;padding:4px 2px;scroll-behavior:smooth}
.ai-row{display:flex;gap:10px;align-items:flex-end}
.ai-row.me{flex-direction:row-reverse}
.ai-ava{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:1rem;flex-shrink:0;background:linear-gradient(135deg,#8b5cf62b,#2dd4ff1e);border:1px solid var(--line)}
.ai-row.me .ai-ava{background:linear-gradient(135deg,#2dd4ff22,#8b5cf62b)}
.ai-bub{max-width:78%;padding:11px 15px;border-radius:16px;font-size:.9rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;background:rgba(255,255,255,.055);border:1px solid var(--line);border-bottom-left-radius:5px}
.ai-row.me .ai-bub{background:linear-gradient(135deg,#8b5cf62e,#2dd4ff1c);border-color:#8b5cf644;border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.ai-bub img{max-width:200px;border-radius:11px;display:block;margin-bottom:7px;border:1px solid var(--line)}
.ai-bub.typing{color:var(--mut);font-style:italic}
.ai-inputrow{display:flex;gap:9px;margin-top:14px;align-items:flex-end}
.ai-inputrow textarea{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:12px 15px;color:var(--txt);font-size:.9rem;font-family:inherit;outline:none;resize:none;max-height:120px;transition:.2s}
.ai-inputrow textarea:focus{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.ai-inputrow .btn{padding:12px 18px;font-size:1rem}
.ai-clip{width:44px;height:44px;border-radius:13px;background:var(--glass);border:1px solid var(--line);font-size:1.05rem;flex-shrink:0;transition:.2s}
.ai-clip:hover{border-color:var(--vio)}
.ai-attach{display:flex;align-items:center;gap:10px;margin-top:12px;background:var(--glass);border:1px dashed var(--line);border-radius:13px;padding:9px 12px}
.ai-attach img{height:52px;border-radius:9px;border:1px solid var(--line)}
.ai-attach button{background:none;border:none;color:var(--mut);font-size:.78rem;cursor:pointer}
.ai-attach button:hover{color:var(--red)}
.ai-modelbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;background:var(--glass);border:1px solid var(--line);border-radius:15px;padding:12px 16px}
.ai-modelbar .lbl{font-size:.78rem;font-weight:800;color:var(--mut);letter-spacing:.4px}
.ai-modelsel{flex:0 1 auto;min-width:250px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 13px;color:var(--txt);font-size:.88rem;font-weight:600;outline:none;cursor:pointer;transition:.2s}
.ai-modelsel:focus{border-color:var(--vio);box-shadow:0 0 0 3px #8b5cf622}
.ai-modelsel option,.ai-modelsel optgroup{background:#12142b;color:var(--txt)}
.ai-modelsel option:disabled{color:#555a75}
.ai-modeldesc{color:var(--mut);font-size:.76rem;flex:1;min-width:180px;line-height:1.5}
@media(max-width:640px){.ai-modelsel{min-width:100%;flex:1 1 100%}}
.ai-prem-note{margin-top:12px;background:linear-gradient(135deg,#d9776615,#8b5cf615);border:1px solid #d9776640;border-radius:13px;padding:11px 15px;font-size:.8rem;color:var(--mut);line-height:1.6}

/* ================= AI CHAT — tampilan ala Claude ================= */
#page-aichat{padding:0 clamp(10px,3vw,28px) 14px}
.cld-shell{
  --cbg:#262624; --cbg-side:#1e1e1c; --cbg-hover:#33322f; --cbg-raise:#30302e;
  --ctxt:#f4f0ea; --cmut:#a8a49c; --cline:rgba(255,255,255,.08);
  --cacc:#c96442; --cacc-h:#b8562f; --cacc-soft:#c9644226;
  --nav-h:70px;
  position:relative;display:flex;height:calc(100vh - var(--nav-h));min-height:480px;
  background:var(--cbg);color:var(--ctxt);border-radius:22px;overflow:hidden;
  border:1px solid var(--cline);font-family:var(--font-b);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.cld-backdrop{display:none;position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:5}
/* dekorasi latar belakang halaman AI — candle chart & cuplikan kode mengambang, transparan &
   di-pointer-events:none supaya gak ganggu klik/baca teks. Murni CSS animation, ringan. */
.cld-bg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cld-bg-candles{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around;padding:0 3% 6%;opacity:.06}
.cld-bg-candles i{display:block;width:1.8%;border-radius:2px;animation:cldBgCandle 6s ease-in-out infinite}
.cld-bg-candles i:nth-child(odd){background:#3ddc97}
.cld-bg-candles i:nth-child(even){background:#ff5c7a}
@keyframes cldBgCandle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.5)}}
.cld-bg-code{position:absolute;inset:0;font-family:ui-monospace,Consolas,monospace;font-size:.76rem;color:var(--cacc);opacity:.07}
.cld-bg-code span{position:absolute;left:-42%;white-space:nowrap;animation-name:cldBgScroll;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes cldBgScroll{from{transform:translateX(0)}to{transform:translateX(230vw)}}
@media(prefers-reduced-motion:reduce){.cld-bg-candles i,.cld-bg-code span{animation:none!important}}
@media(max-width:640px){.cld-bg-candles{display:none}.cld-bg-code span:nth-child(n+4){display:none}}
.cld-side{width:272px;flex-shrink:0;background:var(--cbg-side);border-right:1px solid var(--cline);display:flex;flex-direction:column;transition:margin-left .28s ease,width .28s ease;position:relative;z-index:1}
.cld-side.closed{margin-left:-272px}
.cld-brand{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 10px}
.cld-brand-name{font-family:var(--font-d);font-size:1.08rem;font-weight:600;color:var(--ctxt);letter-spacing:.2px}
.cld-brand-icons{display:flex;align-items:center;gap:2px}
.cld-navrow{display:flex;align-items:center;gap:10px;margin:2px 10px 8px;padding:8px 8px;border-radius:9px;cursor:pointer;color:#d8d4cc;font-size:.86rem;font-weight:600;transition:.15s}
.cld-navrow:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-navrow-ic{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;color:var(--cmut)}
.cld-navrow-ic--plus{border:1.4px solid var(--cline)}
.cld-icon-ghost{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;background:transparent;border:1px solid var(--cline);border-radius:10px;color:var(--cmut);cursor:pointer;transition:.18s}
.cld-icon-ghost:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-side-search{display:flex;align-items:center;gap:8px;margin:2px 12px 10px;padding:8px 11px;background:var(--cbg-raise);border:1px solid var(--cline);border-radius:10px;color:var(--cmut)}
.cld-side-search input{flex:1;background:none;border:none;outline:none;color:var(--ctxt);font-size:.82rem;font-family:inherit}
.cld-side-search input::placeholder{color:var(--cmut)}
.cld-side-list{flex:1;overflow-y:auto;padding:4px 8px 8px}
.cld-side-group{color:var(--cmut);font-size:.68rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:14px 8px 6px}
.cld-side-item{position:relative;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;color:#d8d4cc;font-size:.83rem;transition:.15s;margin-bottom:1px}
.cld-side-item:hover{background:var(--cbg-hover)}
.cld-side-item.on{background:var(--cbg-raise);color:var(--ctxt)}
.cld-side-item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cld-side-item .del{opacity:0;flex-shrink:0;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--cmut);background:none;border:none;cursor:pointer}
.cld-side-item:hover .del{opacity:1}
.cld-side-item .del:hover{background:#ff5c7a2e;color:#ff8fa3}
.cld-side-empty{color:var(--cmut);font-size:.78rem;padding:16px 10px;text-align:center;line-height:1.6}
.cld-side-bottom{padding:12px;border-top:1px solid var(--cline);position:relative}
.cld-side-credit{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--cbg-raise);border:1px solid var(--cline);border-radius:11px;padding:10px 12px;font-size:.76rem;color:var(--cmut);cursor:pointer;transition:.15s}
.cld-side-credit:hover{border-color:var(--cacc)}
.cld-accmenu{display:none;position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);background:var(--cbg-raise);border:1px solid var(--cline);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:25}
.cld-accmenu.open{display:block}
.cld-accmenu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:.83rem;color:#d8d4cc;transition:.15s}
.cld-accmenu-item:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-accmenu-item .ic{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--cmut)}
.cld-accmenu-item .ic svg{width:15px;height:15px}
.cld-accmenu-item .chk{margin-left:auto;font-size:.62rem;font-weight:800;color:var(--cacc);background:var(--cacc-soft);padding:2px 7px;border-radius:8px}
.cld-accmenu-sep{height:1px;background:var(--cline);margin:5px 4px}
.cld-side-credit b{color:var(--ctxt);font-size:.85rem}
.cld-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
.cld-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--cline);flex-shrink:0}
.cld-hamburger{display:none}
.cld-modelpick{position:relative}
.cld-modelbtn{display:flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:10px;padding:8px 10px;color:var(--ctxt);font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.cld-modelbtn:hover{background:var(--cbg-hover);border-color:var(--cline)}
.cld-modelmenu{display:none;position:absolute;top:calc(100% + 6px);left:0;width:300px;max-width:calc(100vw - 24px);background:var(--cbg-raise);border:1px solid var(--cline);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:20;max-height:60vh;overflow-y:auto}
.cld-modelmenu.open{display:block}
.cld-modelmenu-label{font-size:.66rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cmut);padding:9px 10px 4px}
.cld-modelmenu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:.15s}
.cld-modelmenu-item:hover{background:var(--cbg-hover)}
.cld-modelmenu-item.on{background:var(--cacc-soft)}
.cld-modelmenu-item .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.cld-modelmenu-item .ic svg{width:14px;height:14px}
.cld-model-badge{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;vertical-align:middle}
.cld-model-badge svg{width:11px;height:11px}
.cld-modelmenu-item .nm{flex:1;min-width:0}
.cld-modelmenu-item .nm .n{font-size:.85rem;font-weight:700;color:var(--ctxt)}
.cld-modelmenu-item .nm .d{font-size:.72rem;color:var(--cmut);margin-top:1px}
.cld-modelmenu-item .price{font-size:.68rem;font-weight:800;color:var(--cacc);background:var(--cacc-soft);padding:3px 7px;border-radius:7px;flex-shrink:0}
.cld-modelmenu-item[data-disabled="1"]{opacity:.4;cursor:not-allowed}
.cld-topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.cld-sharebtn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--cline);color:#d8d4cc;font-size:.78rem;font-weight:600;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.15s;font-family:inherit}
.cld-sharebtn:hover{border-color:var(--cacc);color:var(--ctxt)}
@media(max-width:520px){.cld-sharebtn span{display:none}.cld-sharebtn{padding:8px}}
.cld-saldopill{font-size:.74rem;font-weight:700;color:var(--cmut);background:var(--cbg-raise);border:1px solid var(--cline);padding:6px 11px;border-radius:20px;white-space:nowrap}
@media(max-width:560px){.cld-saldopill{font-size:.68rem;padding:6px 8px}}
.cld-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;scroll-behavior:smooth}
.cld-empty{margin:auto;text-align:center;max-width:600px;padding:24px}
.cld-empty-mark{width:56px;height:56px;margin:0 auto 18px;display:grid;place-items:center;background:radial-gradient(circle,#3a2a22,#241813);border-radius:50%;box-shadow:0 0 0 0 #c9644255;animation:cldOrbGlow 2.6s ease-in-out infinite}
.cld-empty-mark svg{width:24px;height:24px;color:var(--cacc);animation:cldSparkle 3s ease-in-out infinite}
@keyframes cldSparkle{0%,100%{transform:rotate(0deg) scale(.88)}50%{transform:rotate(180deg) scale(1.08)}}
@keyframes cldOrbGlow{0%,100%{box-shadow:0 0 0 0 #c9644233}50%{box-shadow:0 0 18px 4px #c9644233}}
.cld-think-orb{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle,#3a2a22,#241813);display:grid;place-items:center}
.cld-think-orb svg{width:11px;height:11px;color:var(--cacc);animation:cldSparkle 1.8s ease-in-out infinite}
.cld-empty h1{font-family:var(--font-d);font-size:1.7rem;font-weight:600;color:var(--ctxt);margin-bottom:8px}
.cld-empty-sub{color:var(--cmut);font-size:.9rem;line-height:1.6;margin-bottom:22px}
.cld-suggest{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.cld-chip{background:var(--cbg-raise);border:1px solid var(--cline);color:#d8d4cc;font-size:.8rem;padding:9px 14px;border-radius:12px;cursor:pointer;transition:.15s;font-family:inherit;text-align:left}
.cld-chip:hover{border-color:var(--cacc);color:var(--ctxt);transform:translateY(-1px)}
.cld-msgs{display:none;flex-direction:column;max-width:768px;width:100%;margin:0 auto;padding:26px 20px 12px;gap:4px}
.cld-msg{display:flex;padding:14px 0}
.cld-msg.user{justify-content:flex-end}
.cld-msg.bot{justify-content:flex-start}
.cld-msg-col{display:flex;flex-direction:column;max-width:80%;min-width:0}
.cld-msg.user .cld-msg-col{align-items:flex-end}
.cld-msg.bot .cld-msg-col{align-items:flex-start;max-width:100%}
.cld-msg .bub{font-size:.92rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.cld-msg.user .bub{background:var(--cbg-raise);border:1px solid var(--cline);border-radius:16px;padding:11px 16px;color:var(--ctxt)}
.cld-msg.bot .bub{color:#e8e5df;max-width:100%;padding:2px 0}
.cld-msg .bub img{max-width:240px;border-radius:12px;display:block;margin-bottom:8px;border:1px solid var(--cline)}
.cld-msg.bot .bub.typing{color:var(--cmut);display:flex;align-items:center;gap:5px}
.cld-think{display:flex;align-items:center;gap:8px;color:var(--cmut);font-size:.9rem}
.cld-think-text{
  background:linear-gradient(90deg,var(--cmut) 0%,var(--cmut) 35%,#f4f0ea 50%,var(--cmut) 65%,var(--cmut) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cldShimmer 1.8s linear infinite;
}
@keyframes cldShimmer{0%{background-position:160% 0}100%{background-position:-60% 0}}
.cld-msg.bot .bub.err{color:#ff9aa8}
.cld-composer-wrap{padding:6px 20px 18px;flex-shrink:0}
.cld-composer{max-width:768px;margin:0 auto;background:var(--cbg-raise);border:1px solid var(--cline);border-radius:22px;padding:8px;transition:.15s}
.cld-composer:focus-within{border-color:var(--cacc)}
.cld-attach{display:flex;align-items:center;gap:10px;margin:4px 6px 8px;background:var(--cbg);border:1px dashed var(--cline);border-radius:12px;padding:8px 10px}
.cld-attach img{height:46px;border-radius:8px;border:1px solid var(--cline)}
.cld-attach button{background:none;border:none;color:var(--cmut);font-size:.76rem;cursor:pointer}
.cld-attach button:hover{color:#ff8fa3}
.cld-composer-row{display:flex;align-items:flex-end;gap:6px}
.cld-iconbtn{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;background:none;border:none;border-radius:11px;color:var(--cmut);cursor:pointer;transition:.15s}
.cld-iconbtn:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-iconbtn.listening{color:#fff;background:#e5484d;animation:cldPulse 1.4s ease-in-out infinite}
@keyframes cldPulse{0%,100%{box-shadow:0 0 0 0 #e5484d55}50%{box-shadow:0 0 0 8px #e5484d00}}
.cld-ttsbtn{width:38px;height:38px;display:grid;place-items:center;background:none;border:1px solid var(--cline);border-radius:10px;color:var(--cmut);cursor:pointer;transition:.15s}
.cld-ttsbtn:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-ttsbtn.on{background:var(--cacc-soft);border-color:var(--cacc);color:var(--cacc)}
.cld-msg-actions{display:flex;align-items:center;gap:2px;margin-top:6px}
.cld-msg-time{font-size:.68rem;color:var(--cmut);margin-right:6px;user-select:none}
.cld-icobtn{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;background:none;border:none;border-radius:8px;color:var(--cmut);cursor:pointer;transition:.15s}
.cld-icobtn svg{width:14px;height:14px}
.cld-icobtn:hover{background:var(--cbg-hover);color:var(--ctxt)}
.cld-icobtn.speaking{color:var(--cacc);background:var(--cacc-soft)}
.cld-icobtn:disabled{opacity:.3;cursor:default}
.cld-icobtn:disabled:hover{background:none}
.cld-branchnav{display:flex;align-items:center;gap:0;margin-right:6px}
.cld-branchnav-lbl{font-size:.68rem;color:var(--cmut);min-width:26px;text-align:center;user-select:none}
.cld-editbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;margin:2px 4px 6px;background:var(--cacc-soft);border:1px solid var(--cacc);border-radius:10px;font-size:.74rem;color:var(--ctxt)}
.cld-editbar button{background:none;border:none;color:var(--cacc);font-weight:700;cursor:pointer;font-size:.74rem;flex-shrink:0}
.cld-sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.cld-sources-lbl{font-size:.68rem;color:var(--cmut);font-weight:700}
.cld-source-chip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:var(--cacc);background:var(--cacc-soft);border:1px solid #c9644233;padding:4px 10px;border-radius:20px;text-decoration:none;transition:.15s}
.cld-source-chip:hover{background:var(--cacc);color:#fff}
.cld-chart{width:100%;max-width:480px;margin-top:10px;background:var(--cbg-raise);border:1px solid var(--cline);border-radius:14px;padding:12px 14px}
.cld-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:.8rem;color:var(--ctxt);margin-bottom:6px}
.cld-chart-src{font-size:.68rem;color:var(--cmut)}
.cld-chart canvas{width:100%;display:block}
.cld-composer-row textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--ctxt);font-size:.92rem;font-family:inherit;padding:9px 4px;max-height:180px;line-height:1.5}
.cld-composer-row textarea::placeholder{color:var(--cmut)}
.cld-sendbtn{flex-shrink:0;width:36px;height:36px;display:grid;place-items:center;background:var(--cacc);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:.15s;margin-bottom:1px}
.cld-sendbtn:hover{background:var(--cacc-h);transform:scale(1.05)}
.cld-sendbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.cld-hint{max-width:768px;margin:8px auto 0;text-align:center;color:var(--cmut);font-size:.7rem}
.cld-disclaimer{max-width:768px;margin:3px auto 0;text-align:center;color:var(--cmut);font-size:.66rem;opacity:.75}
.cld-sendbtn.stop{background:var(--cbg-raise);border:1.4px solid var(--cmut)}
.cld-sendbtn.stop:hover{background:var(--cbg-hover);border-color:#ff8a8a}
@media(max-width:880px){
  .cld-side{position:absolute;top:0;bottom:0;left:0;z-index:10;margin-left:-272px;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .cld-side.open{margin-left:0}
  .cld-backdrop.show{display:block}
  .cld-hamburger{display:grid}
}
@media(max-width:640px){
  #page-aichat{padding:0}
  .cld-shell{border-radius:0;border-left:none;border-right:none;box-shadow:none;height:calc(100vh - var(--nav-h) - var(--bnav-h));height:calc(100dvh - var(--nav-h) - var(--bnav-h))}
  .cld-msgs{padding:18px 14px 8px}
  .cld-composer-wrap{padding:6px 12px 14px}
  .cld-empty h1{font-size:1.35rem}
  .cld-topbar{padding:10px 8px;gap:6px}
  #cldModelName{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
  .cld-topbar-right{gap:6px}
}
@media(max-width:380px){
  #cldModelName{max-width:88px}
  .cld-empty-sub{font-size:.82rem}
}

.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;border:none;border-radius:12px;padding:12px;font-size:.9rem;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit}
.btn-google:hover{box-shadow:0 4px 14px rgba(0,0,0,.25);transform:translateY(-1px)}
/* ---- pemilih metode pembayaran ---- */
.paym-opts{display:flex;flex-direction:column;gap:9px}
.paym-opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:12px 14px;cursor:pointer;transition:.2s;color:var(--txt)}
.paym-opt:hover{border-color:var(--vio)}
.paym-opt.on{border-color:var(--vio);background:linear-gradient(135deg,#8b5cf62a,#2dd4ff17);box-shadow:0 0 14px #8b5cf62b}
.paym-opt .ic{font-size:1.3rem;flex-shrink:0}
.paym-opt small{color:var(--mut);font-weight:400}
.paym-opt.disabled{opacity:.45;pointer-events:none}
.pw-spin{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--vio);margin:0 auto;animation:pwspin .8s linear infinite}
@keyframes pwspin{to{transform:rotate(360deg)}}
/* ---- Sewa Bot Store ---- */
.rent-hero{background:linear-gradient(135deg,#8b5cf61f,#2dd4ff14);border:1px solid #8b5cf63a;border-radius:20px;padding:24px}
.rent-price{font-family:var(--font-d);font-size:2rem;font-weight:800;color:#fff}
.rent-price small{font-size:.9rem;color:var(--mut);font-weight:500}
.rent-feats{display:flex;flex-direction:column;gap:7px;margin:16px 0}
.rent-feats div{font-size:.86rem;color:var(--txt);display:flex;gap:8px;align-items:flex-start}
.rent-plat{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.rent-plat button{flex:1;min-width:150px;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px 13px;color:var(--txt);font-weight:700;font-size:.9rem;cursor:pointer;transition:.2s;text-align:center}
.rent-plat button:hover{border-color:#8b5cf680;transform:translateY(-1px)}
.rent-plat button.on{border-color:var(--vio);background:linear-gradient(135deg,#8b5cf62a,#2dd4ff17);box-shadow:0 0 0 1px var(--vio) inset}
.bot-card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.bot-card .st{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:8px}
.bot-card .st.active{background:#3ddc971e;color:var(--green);border:1px solid #3ddc973a}
.bot-card .st.expired{background:#ff5c7a1e;color:var(--red);border:1px solid #ff5c7a3a}
.wa-warn{background:#ff5c7a14;border:1px solid #ff5c7a3a;border-radius:12px;padding:12px 14px;font-size:.8rem;color:#ffb0bd;line-height:1.65;margin-bottom:14px}
.kw-row{background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:11px}
.kw-row .kw-head{display:flex;gap:8px;margin-bottom:9px}
.kw-row .kw-head input{flex:1;font-weight:700}
.kw-item{display:flex;gap:7px;margin-bottom:7px}
.kw-item input:first-child{flex:2}
.kw-item input:nth-child(2){flex:1}
.kw-mini{background:none;border:none;color:var(--mut);cursor:pointer;font-size:1rem;padding:0 6px}
.kw-mini:hover{color:var(--red)}
.svc:hover{border-color:#8b5cf655;transform:translateX(4px)}
.svc .si{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;background:linear-gradient(135deg,#8b5cf62b,#2dd4ff1e);flex-shrink:0}
.svc b{font-size:.92rem}
.svc .sm{color:var(--mut);font-size:.76rem;margin-top:2px}
.svc .pr{margin-left:auto;text-align:right}
.svc .pr .n{font-family:var(--font-d);font-weight:700;color:var(--cy)}
.svc .pr .u{color:var(--mut);font-size:.7rem}

/* ------- nokos redesign: filter panel + grid cards ------- */
.nk-panel{border-radius:var(--r);background:var(--glass);border:1px solid var(--line);padding:16px;margin-top:20px}
.panel-card{border-radius:var(--r);background:var(--glass);border:1px solid var(--line);padding:22px;margin-top:18px;max-width:720px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:640px){.row2{grid-template-columns:1fr}}
.nk-row{display:flex;gap:12px;flex-wrap:wrap}
.nk-select{display:flex;align-items:center;gap:11px;padding:9px 14px;border-radius:13px;background:#05060f;border:1px solid var(--line);min-width:150px;transition:.2s}
.nk-select:focus-within{border-color:var(--vio)}
.nk-select .nk-ic{font-size:1.15rem;flex-shrink:0}
.nk-select .nk-lbl{font-size:.66rem;font-weight:800;letter-spacing:.5px;color:var(--mut);margin-bottom:2px}
.nk-select select,.nk-select input{background:transparent;border:none;color:var(--txt);font-weight:700;font-size:.92rem;outline:none;width:100%;font-family:inherit}
.nk-select select option{background:#0b0d1f;color:var(--txt)}
.nk-select input::placeholder{color:var(--mut);font-weight:500}
.nk-select.grow{flex:1;min-width:180px}
.nk-cats{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 20px}
.nk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.nk-card{position:relative;border-radius:17px;background:var(--glass);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;transition:.25s}
.nk-card-off{opacity:.55}
.nk-card-off:hover{transform:none}
.nk-card-off .btn[disabled]{cursor:not-allowed;opacity:.7}
.nk-card:hover{transform:translateY(-4px);border-color:#8b5cf655;box-shadow:0 14px 34px #00000055}
.nk-card .nk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.nk-card .nk-avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.05rem;flex-shrink:0;box-shadow:0 4px 14px #00000044;overflow:hidden}
.nk-card .nk-avatar img{width:100%;height:100%;object-fit:cover}
.nk-card .nk-hot{font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:7px;background:#ff5c7a22;color:var(--red);border:1px solid #ff5c7a44;letter-spacing:.4px}
.nk-card h4{font-size:.95rem;font-weight:700;line-height:1.3;margin-top:2px}
.nk-card .nk-stock{color:var(--mut);font-size:.74rem}
.nk-card .nk-price{font-family:var(--font-d);font-weight:700;font-size:1.15rem;color:var(--cy);margin-top:2px}
.nk-card .btn{width:100%;margin-top:2px}
.nk-loadmore{grid-column:1/-1;margin-top:4px}
.nk-section-lbl{grid-column:1/-1;font-size:.78rem;font-weight:800;color:var(--mut);letter-spacing:.3px;margin:4px 0 -2px}
.nk-section-lbl:first-child{margin-top:0}
@media(max-width:640px){.nk-row{flex-direction:column}.nk-select{width:100%}}

/* ------- avatar picker ------- */
.av-grid{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.av-opt{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;border:2px solid transparent;cursor:pointer;transition:.2s;background-size:cover;background-position:center}
.av-opt:hover{transform:scale(1.1)}
.av-opt.sel{border-color:var(--cy);box-shadow:0 0 0 3px #2dd4ff33}
.avatar,.big-av{background-size:cover;background-position:center;overflow:hidden}

/* ------- help chat ------- */
#helpFab{position:fixed;bottom:22px;right:22px;z-index:90;width:58px;height:58px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--vio2),var(--cy));color:#fff;box-shadow:0 8px 30px #6d28ff77;transition:.3s;animation:pulseGlow 3.5s infinite;display:grid;place-items:center}
#helpFab svg{width:26px;height:26px}
#helpFab:hover{transform:scale(1.08) translateY(-2px)}
/* [REDESIGN 2026-09-11] Speed-dial kontak cepat — ROMBAK TOTAL dari versi sebelumnya yang
   posisinya dihitung manual pakai translate(px) dan ternyata SALING TABRAKAN/berantakan
   (dilaporkan lewat screenshot). Sekarang pakai #fabCluster sebagai SATU wrapper flexbox kolom
   (column-reverse: elemen pertama di DOM = paling bawah, elemen berikutnya otomatis tersusun ke
   ATAS dengan jarak (gap) yang KONSISTEN & OTOMATIS dihitung browser — tidak ada lagi angka
   pixel yang bisa salah hitung/tabrakan. #helpFab TETAP elemen fixed terpisah (posisi & perilaku
   klik-nya SAMA SEKALI TIDAK diubah) — #fabCluster cuma menumpuk toggle+satelit TEPAT DI ATASNYA
   dengan jarak aman, dihitung dari tinggi actual #helpFab (58px) + margin, bukan angka sembarang. */
#fabCluster{position:fixed;bottom:92px;right:22px;z-index:91;display:flex;flex-direction:column-reverse;align-items:center;gap:14px;pointer-events:none}
#fabCluster>*{pointer-events:auto}
#fabMenuToggle{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--bg2,#0a0c1c);color:var(--txt);box-shadow:0 6px 18px #000000aa;display:grid;place-items:center;cursor:pointer;transition:.3s cubic-bezier(.3,1.4,.5,1)}
#fabMenuToggle svg{width:17px;height:17px;transition:transform .3s}
#fabMenuToggle.open{transform:scale(1.08);background:linear-gradient(135deg,var(--vio2),var(--cy));border-color:transparent;box-shadow:0 8px 24px #6d28ff66}
/* [NEW 2026-09-20] ikon telepon (Kontak Cepat) ikut warna Skin Toko aktif — pola var(--skin-accent)
   yang SAMA PERSIS dipakai elemen lain di halaman ini (badge QRIS, border kartu produk, dst),
   lihat document.body.style.setProperty('--skin-accent',...) di script bawah. :not([data-skin-fx=""])
   sengaja dipasang supaya efek ini TIDAK muncul kalau admin belum aktifkan skin musiman apa pun
   (biar tetap warna brand ungu-cyan default seperti sebelumnya). */
body[data-skin-fx]:not([data-skin-fx=""]) #fabMenuToggle{color:var(--skin-accent);border-color:color-mix(in srgb, var(--skin-accent) 45%, transparent)}
body[data-skin-fx]:not([data-skin-fx=""]) #fabMenuToggle.open{background:var(--skin-accent);box-shadow:0 8px 24px color-mix(in srgb, var(--skin-accent) 50%, transparent)}
/* [FIX] satelit sekarang IKUT ALUR FLEX (bukan position:absolute manual) — max-height pada
   wrapper yang di-transisi (bukan translate per-item) supaya tersusun rapi otomatis TANPA
   pernah tabrakan, sekaligus tetap dapat animasi "mengembang" yang halus. */
#fabSatellites{display:flex;flex-direction:column-reverse;align-items:center;gap:0;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.3,.9,.4,1),gap .4s}
#fabSatellites.open{max-height:220px;gap:14px}
.fab-sat{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px #00000077;transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.fab-sat svg{width:22px;height:22px}
#waBubble{background:#25D366}
#tgBubble{background:#229ED9}
#fabSatellites.open .fab-sat{transform:scale(1);opacity:1}
#fabSatellites.open #tgBubble{transition-delay:.05s}
#fabSatellites.open #waBubble{transition-delay:.11s}
@media(max-width:480px){
  #fabCluster{bottom:80px;right:16px;gap:12px}
}
#helpBox{position:fixed;bottom:92px;right:22px;z-index:95;width:min(370px,calc(100vw - 32px));height:min(520px,70vh);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 82%, #8b5cf6 18%),var(--bg));border:1px solid var(--line);box-shadow:0 24px 70px #000000aa;display:none;flex-direction:column;overflow:hidden;animation:popIn .3s}
#helpBox.open{display:flex}
#helpBox .hb-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.02)}
#helpBox .hb-head .hi{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--vio2),var(--cy));display:grid;place-items:center;box-shadow:0 4px 14px #6d28ff55;flex-shrink:0}
#helpBox .hb-head .hi svg{width:19px;height:19px}
#helpBox .hb-head b{font-family:var(--font-d);font-size:.95rem}
#helpBox .hb-head .st{font-size:.72rem;color:var(--green)}
#helpMsgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.hmsg{max-width:82%;padding:10px 14px;border-radius:15px;font-size:.86rem;line-height:1.55;white-space:pre-line;animation:fadeUp .3s}
.hmsg.bot{background:var(--glass2);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.hmsg.me{background:linear-gradient(135deg,var(--vio2),var(--vio));border-bottom-right-radius:4px;align-self:flex-end}
.hmsg.typing{color:var(--mut);font-style:italic}
.hmsg img{display:block;max-width:100%;border-radius:10px;margin-bottom:6px}
/* [NEW 2026-08-17] tombol eskalasi ke admin — dirender di dalam bubble bot, gaya beda dari teks
   biasa (jelas terlihat sebagai aksi, bukan cuma balasan) */
.hb-escalate-btn{width:100%;background:linear-gradient(135deg,var(--vio2),var(--cy));border:none;color:#fff;padding:11px 14px;border-radius:12px;font-size:.85rem;font-weight:700;cursor:pointer;transition:.15s transform}
.hb-escalate-btn:hover{transform:translateY(-1px)}
.hb-escalate-btn:disabled{opacity:.6;cursor:default;transform:none}
#hbAttach{display:flex;align-items:center;gap:9px;padding:9px 13px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
#hbAttach img{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#hbAttach button{margin-left:auto;background:none;border:none;color:var(--mut);cursor:pointer;font-size:1rem}
#helpBox .hb-input{display:flex;gap:8px;padding:13px;border-top:1px solid var(--line)}
#helpBox .hb-input input{flex:1;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--txt);font-size:.87rem;outline:none;min-width:0}
#helpBox .hb-input input:focus{border-color:var(--vio)}
#helpBox .hb-input button{border:none;border-radius:12px;width:44px;flex-shrink:0;background:linear-gradient(135deg,var(--vio2),var(--vio));color:#fff;display:grid;place-items:center}
#helpBox .hb-input button svg{width:18px;height:18px}
#helpBox .hb-clip{background:var(--glass2)!important;color:var(--mut);border:1px solid var(--line)!important}
#helpBox .hb-clip:hover{color:var(--cy);border-color:var(--cy)!important}
/* [NEW 2026-08-21] tombol mic — ngobrol pakai suara di Helpbox AI */
#helpBox .hb-mic{background:var(--glass2)!important;color:var(--mut);border:1px solid var(--line)!important}
#helpBox .hb-mic:hover{color:var(--vio);border-color:var(--vio)!important}
#helpBox .hb-mic.rec{background:#ff5c5c22!important;color:#ff5c5c;border-color:#ff5c5c66!important;animation:hbMicPulse 1.1s ease-in-out infinite}
@keyframes hbMicPulse{0%,100%{box-shadow:0 0 0 0 #ff5c5c44}50%{box-shadow:0 0 0 7px #ff5c5c00}}
#helpBox .hb-voice-note{font-size:.7rem;color:var(--mut);text-align:center;padding:4px 0 0}

/* ------- leaderboard ------- */
/* [FIX 2026-08-21] BUG: background panel leaderboard sebelumnya HARDCODE #141634/#0a0c1c —
   tidak pernah ikut berubah walau var(--bg) berubah karena ganti Skin Toko, jadi leaderboard
   kelihatan "diam" sendirian sementara sekitarnya berubah warna. Sekarang diturunkan dari
   var(--bg) (pola sama seperti .aurora di atas) supaya otomatis ikut skin aktif. */
.lb-panel{border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 88%, #8b5cf6 12%),var(--bg));border:1px solid var(--line);padding:22px;margin:20px 0}
.lb-panel h2{font-family:var(--font-d);font-size:1.3rem;display:flex;align-items:center;gap:9px}
.lb-prize-row{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;background:var(--glass);border:1px solid var(--line)}
.lb-prize-row .lp-rank{font-size:1.25rem;width:36px;text-align:center;flex-shrink:0}
.lb-prize-row .lp-label{font-weight:700;font-size:.88rem}
.lb-prize-row .lp-amt{margin-left:auto;font-weight:800;color:var(--green);white-space:nowrap}
.lb-prize-row.r1{background:linear-gradient(90deg,#ffd70022,transparent);border-color:#ffd70044}
.lb-prize-row.r2{background:linear-gradient(90deg,#c0c0c022,transparent);border-color:#c0c0c044}
.lb-prize-row.r3{background:linear-gradient(90deg,#cd7f3222,transparent);border-color:#cd7f3244}
.lb-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.lb-row{display:flex;align-items:center;gap:13px;padding:11px 15px;border-radius:13px;background:var(--glass);border:1px solid var(--line);transition:.3s}
.lb-row.r1{background:linear-gradient(90deg,#ffd70022,transparent);border-color:#ffd70044}
.lb-row.r2{background:linear-gradient(90deg,#c0c0c022,transparent);border-color:#c0c0c044}
.lb-row.r3{background:linear-gradient(90deg,#cd7f3222,transparent);border-color:#cd7f3244}
/* aura menyala di sekeliling baris, warnanya ikut rarity bingkai yang user pakai —
   dibuat pakai box-shadow (bukan animasi berat) supaya ringan & tidak bikin lag */
.lb-row.aura-rare{box-shadow:0 0 0 1px #2dd4ff55,0 0 22px -4px #2dd4ff88;border-color:#2dd4ff55}
.lb-row.aura-epic{box-shadow:0 0 0 1px #ffb02066,0 0 26px -4px #ffb020aa;border-color:#ffb02066}
.lb-row.aura-legendary{box-shadow:0 0 0 1.5px #ff5c7a77,0 0 32px -2px #ff5c7ac0;border-color:#ff5c7a77;animation:auraPulse 2.6s ease-in-out infinite}
@keyframes auraPulse{0%,100%{box-shadow:0 0 0 1.5px #ff5c7a77,0 0 32px -2px #ff5c7ac0}50%{box-shadow:0 0 0 1.5px #ff5c7aaa,0 0 42px 2px #ff5c7ae0}}
.lb-rank{width:30px;text-align:center;font-weight:800;font-family:var(--font-d);color:var(--mut);flex-shrink:0}
.lb-row.r1 .lb-rank,.lb-row.r2 .lb-rank,.lb-row.r3 .lb-rank{font-size:1.3rem}
.lb-info{flex:1;min-width:0}
.lb-info b{font-size:.9rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-info .lb-prod{color:var(--mut);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-amt{font-family:var(--font-d);font-weight:700;color:var(--cy);white-space:nowrap}

/* ------- live purchase toast ------- */
#buyToastWrap{position:fixed;left:18px;bottom:18px;z-index:88;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.buy-toast{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,color-mix(in srgb, var(--bg) 82%, #8b5cf6 18%) 92%,transparent),var(--bg);border:1px solid #3ddc9744;border-radius:14px;padding:12px 16px;box-shadow:0 14px 34px #000000aa;max-width:300px;animation:buySlide .4s ease-out}
.buy-toast .bt-ic{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb, var(--vio) 20%, transparent),color-mix(in srgb, var(--cy) 14%, transparent));border:1px solid var(--line)}
.buy-toast b{font-size:.83rem}
.buy-toast .bt-sub{color:var(--mut);font-size:.74rem;margin-top:2px}
.legend-toast{border-color:#ff5c7a66;background:linear-gradient(135deg,#2a0f1cf2,color-mix(in srgb, var(--bg) 95%, transparent));box-shadow:0 14px 34px #000000aa,0 0 24px -6px #ff5c7a88}
.legend-toast .bt-sub{color:#ffb8c8}
@keyframes buySlide{from{transform:translateX(-110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ------- hadiah page ------- */
.hd-tabs{display:flex;gap:9px;margin:18px 0 20px}
.hd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.hd-card{border-radius:17px;background:var(--glass);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:9px;transition:.25s}
.hd-card:hover{transform:translateY(-4px);border-color:#ffb02055}
.hd-card .hd-img{width:100%;height:140px;border-radius:13px;background:linear-gradient(135deg,#8b5cf62b,#ffb0201e);display:grid;place-items:center;font-size:2.2rem;overflow:hidden}
.hd-card .hd-img img{width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
.hd-card h4{font-size:.92rem}
.hd-card .hd-desc{color:var(--mut);font-size:.76rem;line-height:1.5;flex:1}
.hd-card .hd-cost{font-family:var(--font-d);font-weight:700;color:var(--amber);font-size:1.05rem}
.hd-card .hd-stock{color:var(--mut);font-size:.7rem}

/* ------- spin roulette ------- */
.spin-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;padding:26px 0}
.spin-stat{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.spin-stat .sc{display:flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.82rem;font-weight:700}
.spin-stat .sc b{font-family:var(--font-d);color:var(--amber)}
.spin-outer{position:relative;width:min(340px,84vw);height:min(340px,84vw);filter:drop-shadow(0 24px 60px #6d28ff55)}
/* cincin luar berkilau */
.spin-ring{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,var(--vio2),var(--cy),var(--amber),var(--vio),var(--vio2));animation:ringSpin 8s linear infinite;opacity:.9}
.spin-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#0a0c1c}
@keyframes ringSpin{to{transform:rotate(360deg)}}
/* lampu-lampu di pinggir roda */
.spin-bulbs{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:3}
.spin-bulbs i{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 14px var(--amber);animation:bulbBlink 1.2s ease-in-out infinite}
@keyframes bulbBlink{0%,100%{opacity:1}50%{opacity:.25}}
.spin-wheel{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;border:8px solid #0d0f22;box-shadow:inset 0 0 0 4px #ffffff14,inset 0 0 40px #00000099;transition:transform 5.4s cubic-bezier(.16,.84,.3,1.02);z-index:2}
.spin-pointer{position:absolute;top:-20px;left:50%;transform:translateX(-50%);z-index:6;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--amber);filter:drop-shadow(0 4px 6px #000);transition:transform .1s}
.spin-pointer.kick{animation:pointerKick .28s ease}
@keyframes pointerKick{40%{transform:translateX(-50%) translateY(-5px) rotate(-8deg)}}
.spin-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff5,transparent 60%),linear-gradient(135deg,var(--vio2),var(--cy));display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:.92rem;color:#fff;box-shadow:0 0 0 6px #0a0c1c,0 0 0 8px #ffffff22,0 10px 26px #6d28ffaa;z-index:5;cursor:pointer;transition:transform .2s;letter-spacing:.5px}
.spin-center:hover{transform:translate(-50%,-50%) scale(1.07)}
.spin-center:active{transform:translate(-50%,-50%) scale(.94)}
.spin-center.spinning{animation:hubPulse .6s ease-in-out infinite}
@keyframes hubPulse{50%{box-shadow:0 0 0 6px #0a0c1c,0 0 0 10px var(--cy),0 10px 30px var(--cy)}}
.spin-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.spin-labels span{position:absolute;top:50%;left:50%;font-size:.68rem;font-weight:800;color:#fff;text-shadow:0 2px 5px #000d,0 0 3px #000;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;transform:translate(-50%,-50%);text-align:center;line-height:1.25}
.spin-labels span b{font-size:1rem;line-height:1}
.spin-result{min-height:30px;font-family:var(--font-d);font-weight:700;font-size:1.15rem;text-align:center}
.spin-btn{padding:15px 40px;font-size:1.05rem;border-radius:14px;position:relative;overflow:hidden}
.spin-btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== overlay perayaan hadiah (dipakai spin & hadiah dari admin) ===== */
.cele{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#1a0f3dcc,#05060fee);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.cele.on{display:flex;opacity:1}
.cele-card{position:relative;text-align:center;padding:38px 30px 32px;max-width:min(400px,90vw);background:linear-gradient(180deg,#171a35,#0d0f22);border:1px solid #ffffff1f;border-radius:26px;box-shadow:0 30px 90px #000a,0 0 0 1px #6d28ff33;transform:scale(.7);opacity:0}
.cele.on .cele-card{animation:celePop .6s cubic-bezier(.18,1.2,.4,1) forwards}
@keyframes celePop{to{transform:scale(1);opacity:1}}
.cele-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:150%;height:150%;background:conic-gradient(from 0deg,transparent,#6d28ff44,transparent,#2dd4ff44,transparent);animation:ringSpin 6s linear infinite;pointer-events:none;z-index:0}
.cele-card>*{position:relative;z-index:1}
.cele-emoji{font-size:5rem;line-height:1;filter:drop-shadow(0 8px 16px #000);animation:celeBounce 1s ease infinite}
@keyframes celeBounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
.cele-title{font-family:var(--font-d);font-weight:800;font-size:1.5rem;margin:14px 0 4px;background:linear-gradient(100deg,var(--amber),var(--vio),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 3s linear infinite}
.cele-amount{font-family:var(--font-d);font-weight:800;font-size:2.6rem;color:#fff;text-shadow:0 0 26px var(--amber);margin:6px 0}
.cele-body{color:var(--mut);font-size:.95rem;margin-bottom:22px;line-height:1.5;white-space:pre-line}
.cele-btn{background:linear-gradient(135deg,var(--vio2),var(--vio));color:#fff;border:none;border-radius:13px;padding:13px 40px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 8px 26px #6d28ff66;transition:transform .15s}
.cele-btn:active{transform:scale(.95)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:11px;height:16px;opacity:.95;border-radius:2px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.7}}

/* ------- level/rank card, gacha & koleksi (avatar tunggal + bingkai + background) -------
   Sistem lama (badan chibi 3D berlapis: rambut/helm/baju/sayap/dst) sudah dihapus total.
   Sekarang: 1 avatar (gambar karakter utuh) + 1 bingkai (border dekoratif) + 1 background. */
.lvl-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;background:linear-gradient(120deg,#6d28ff22,#2dd4ff11);border:1px solid var(--line);margin-bottom:18px}
.lvl-badge{font-size:2.2rem;line-height:1;flex-shrink:0}
.lvl-info{flex:1;min-width:0}
.lvl-title{font-family:var(--font-d);font-weight:800;font-size:1.05rem}
.lvl-num{color:var(--mut);font-weight:600;font-size:.8rem}
.lvl-bar{height:8px;border-radius:99px;background:var(--glass2);overflow:hidden;margin:7px 0 5px}
.lvl-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vio2),var(--cy));transition:width .5s ease}
.lvl-sub{font-size:.74rem;color:var(--mut)}
.lvl-star{font-family:var(--font-d);font-weight:800;color:var(--amber);font-size:1.05rem;flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:5px}
/* [NEW 2026-08-24] ikon bintang poin asli (CC0, Kenney Game Icons) menggantikan emoji ⭐ di
   badge poin utama — dipilih titik ini karena paling menonjol (header profil), bukan mengganti
   SEMUA kemunculan ⭐ di aplikasi (banyak, resikonya lebih tinggi kalau diganti sekaligus). */
.lvl-star-ic{display:inline-block;width:16px;height:16px;background-color:var(--amber);-webkit-mask-image:url(/particles/star.png);mask-image:url(/particles/star.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex-shrink:0}
.gc-preview{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.gc-stage{width:100%;max-width:280px}
.gc-frame-wrap{position:relative;width:200px;height:200px;margin:0 auto;border-radius:50%;overflow:visible}
/* Ukuran avatar/background sengaja dibuat MUAT DI DALAM jendela transparan bingkai
   (bukan menutupi seluruh kotak bingkai) — bingkai yang ada ukir/awan di pinggirnya
   punya jendela ±42-52% dari kanvas, jadi avatar diseset 40% biar tidak pernah
   kepotong/ketutupan hiasan bingkai apa pun yang dipasang. */
.gc-bg{position:absolute;inset:30%;border-radius:50%;background:linear-gradient(135deg,#6d28ff33,#2dd4ff22);z-index:0;background-size:cover;background-position:center}
.gc-avimg{position:absolute;inset:30%;width:40%;height:40%;object-fit:contain;z-index:1;filter:drop-shadow(0 6px 14px #0008);animation:floatBob 3.2s ease-in-out infinite}
.gc-frimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.gc-rate{font-size:.78rem;color:var(--green);font-weight:700}
@keyframes floatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.gc-catrow{display:flex;gap:8px;margin:14px 0}
/* gacha box */
.gc-box-wrap{display:flex;justify-content:center;padding:20px 0 6px}
.gc-box{position:relative;width:140px;height:140px;border-radius:26px;display:grid;place-items:center;cursor:pointer;background:linear-gradient(145deg,#1a1c33,#0d0f22);border:2px solid var(--line);transition:.2s;box-shadow:0 14px 34px -10px #ffb02055}
.gc-box:hover{transform:translateY(-4px) scale(1.03);border-color:var(--amber)}
.gc-box.rolling{animation:gcShake .35s ease-in-out infinite}
@keyframes gcShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
/* aura disesuaikan warna emas/oranye biar senada sama peti hartanya */
.gc-box-glow{position:absolute;inset:-12px;border-radius:32px;background:conic-gradient(from 0deg,#ffb020,#ff8a3d,#ffdd66,#ff8a3d,#ffb020);opacity:.6;filter:blur(15px);animation:ringSpin 6s linear infinite;z-index:0}
.gc-box-ic{width:82%;height:82%;object-fit:contain;z-index:1;filter:drop-shadow(0 8px 16px #ffb02055)}
.gc-costrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* hasil gacha (kartu terbang keluar box) */
.gc-result-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.gc-result-card{width:110px;padding:12px 8px;border-radius:16px;text-align:center;background:var(--glass);border:2px solid var(--line);animation:gcReveal .5s cubic-bezier(.2,.9,.3,1.3) backwards}
.gc-result-card.common{border-color:#5b6478}
.gc-result-card.rare{border-color:var(--cy);box-shadow:0 0 18px #2dd4ff33}
.gc-result-card.epic{border-color:var(--amber);box-shadow:0 0 22px #ffb02044}
.gc-result-card.legendary{border-color:#ff5c7a;box-shadow:0 0 28px #ff5c7a55;background:linear-gradient(160deg,var(--glass),#ff5c7a11)}
@keyframes gcReveal{0%{opacity:0;transform:translateY(14px) scale(.7)}100%{opacity:1;transform:none}}
.gc-result-card img{width:100%;aspect-ratio:1;object-fit:contain}
.gc-result-card .nm{font-size:.72rem;font-weight:700;margin-top:4px;line-height:1.25}
.gc-result-card .dup{color:var(--amber);font-size:.68rem;font-weight:700}
/* kartu koleksi (shop & mine, reuse .hd-card grid tapi ada badge rarity) */
.gc-rarity{position:absolute;top:8px;left:8px;font-size:.64rem;font-weight:800;padding:3px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.4px}
.gc-rarity.common{background:#5b647833;color:#c9cfe0}
.gc-rarity.rare{background:#2dd4ff22;color:var(--cy)}
.gc-rarity.epic{background:#ffb02022;color:var(--amber)}
.gc-rarity.legendary{background:#ff5c7a22;color:var(--red)}
/* mini avatar+bingkai+bg di papan peringkat */
.lb-avatar{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:50%;overflow:visible}
.lb-avatar .lb-bg{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,var(--vio2),var(--cy));background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.lb-glyph{font-size:1.3rem;font-weight:800;color:#fff;text-transform:uppercase}
/* avatar diseset muat di dalam jendela bingkai (bukan penuh 1 lingkaran) biar tidak
   kepotong hiasan bingkai apapun yang dipasang user — sama prinsipnya dgn .gc-avimg */
.lb-avatar img.lb-av-img{position:absolute;inset:30%;width:40%;height:40%;object-fit:contain;z-index:1;animation:floatBob 3.4s ease-in-out infinite}
.lb-avatar img.lb-fr-img{position:absolute;inset:-15%;width:130%;height:130%;object-fit:contain;z-index:2;pointer-events:none}
.lb-lvl{font-size:.9rem;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.gc-box,.gc-box-glow,.gc-result-card{animation:none!important}}

/* ===== tombol hamburger (disembunyikan di desktop) ===== */
.nav-burger{display:none;margin-left:auto;background:var(--glass);border:1px solid var(--line);color:var(--txt);width:42px;height:42px;border-radius:12px;font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center;transition:.2s}
.nav-burger:hover{background:var(--glass2)}

/* ============ TABLET (≤900px) ============ */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .nk-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .hd-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ============ HP (≤720px) — menu jadi hamburger ============ */
@media(max-width:720px){
  nav{gap:10px;padding:12px 16px;flex-wrap:wrap}
  .nav-burger{display:flex}
  /* menu link jadi dropdown vertikal penuh */
  /* [FIX 2026-08-25] BUG: background rgba(...,.98) + backdrop-filter blur ternyata bisa gagal
     render solid di beberapa browser/WebView Android (dikenal rewan bug compositing untuk
     kombinasi backdrop-filter+alpha rendah) — hasilnya konten di belakang dropdown (teks hero,
     tombol quick-nav yang sedang glow) BOCOR TEMBUS kelihatan menumpuk dengan menu, termasuk
     glow border tombol aktif yang kelihatan seperti "garis aneh" memotong menu. Diperbaiki:
     background sekarang SOLID 100% opaque (bukan .98 rgba), backdrop-filter dipertahankan cuma
     untuk estetika tambahan (aman dihapus browser tanpa efeknya, tidak mempengaruhi keterbacaan
     lagi karena background-nya sendiri sudah solid penuh). z-index dinaikkan tegas di atas
     seluruh konten halaman, bukan cuma mengandalkan warisan dari nav induknya. */
  nav .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;z-index:55;
    background:#0a0a14;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .32s ease;box-shadow:0 20px 40px -12px #000a}
  /* dulu overflow:hidden tetap aktif saat .open → link "Panduan" & "Info" di bagian bawah
     jadi kepotong & tidak bisa dijangkau di layar HP pendek. Sekarang bisa discroll. */
  nav .links.open{max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(env(safe-area-inset-bottom) + var(--bnav-h))}
  /* scrollbar visual custom — biar user SADAR menu ini bisa digeser ke bawah,
     jangan cuma mengandalkan scrollbar bawaan browser yang sering auto-hide di HP.
     [FIX 2026-08-13] dipindah ke KIRI (sebelumnya nempel di kanan) + sedikit dipertipis &
     glow-nya diperkuat supaya kelihatan lebih premium, bukan cuma garis polos. */
  .nav-vscroll{display:none;position:fixed;left:6px;width:4px;z-index:60;pointer-events:none;background:rgba(255,255,255,.08);border-radius:99px}
  .nav-vscroll-thumb{position:absolute;left:0;width:100%;border-radius:99px;background:linear-gradient(180deg,var(--vio2),var(--cy));box-shadow:0 0 10px #6d28ffaa;transition:top .1s linear}
  /* [FIX 2026-08-25] "raw list" polos ditata ulang jadi lebih modern: layout ikon+teks rata kiri
     rapi (bukan cuma teks polos), garis aksen warna tema di kiri saat hover/aktif (bukan cuma
     ganti background), transisi warna+geser halus, ikon meredup->menyala saat hover supaya
     kerasa hidup. Selaras dengan warna tema toko (--vio2/--cy, gradient yang sama dipakai di
     scroll indicator & badge banner di tempat lain). */
  nav .links a{display:flex;align-items:center;gap:14px;padding:14px 22px;font-size:.93rem;font-weight:500;border-radius:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;transition:background .2s ease,border-left-color .2s ease,padding-left .2s ease;position:relative}
  nav .links a .nl-ic{flex-shrink:0;width:19px;height:19px;color:var(--mut);transition:color .2s ease}
  nav .links a:hover,nav .links a:active{background:linear-gradient(90deg,color-mix(in srgb, var(--vio2) 12%, transparent),transparent);border-left-color:var(--cy);padding-left:26px}
  nav .links a:hover .nl-ic,nav .links a:active .nl-ic{color:var(--cy)}
  /* [NEW 2026-08-25] stagger fade-in halus tiap item saat menu dibuka — item paling atas muncul
     duluan, disusul item di bawahnya sedikit demi sedikit, bukan semua muncul bersamaan sekaligus
     (yang kerasa kaku/tiba-tiba). Dibatasi cuma 12 item pertama biar delay-nya tidak kelamaan
     kalau daftarnya panjang — sisanya tetap muncul (cuma tanpa delay bertahap). */
  nav .links a{opacity:0;animation:navLinkIn .3s ease forwards;animation-play-state:paused}
  nav .links.open a{animation-play-state:running}
  nav .links a:nth-child(1){animation-delay:.02s}nav .links a:nth-child(2){animation-delay:.04s}
  nav .links a:nth-child(3){animation-delay:.06s}nav .links a:nth-child(4){animation-delay:.08s}
  nav .links a:nth-child(5){animation-delay:.1s}nav .links a:nth-child(6){animation-delay:.12s}
  nav .links a:nth-child(7){animation-delay:.14s}nav .links a:nth-child(8){animation-delay:.16s}
  nav .links a:nth-child(9){animation-delay:.18s}nav .links a:nth-child(10){animation-delay:.2s}
  nav .links a:nth-child(11){animation-delay:.22s}nav .links a:nth-child(12){animation-delay:.24s}
  @keyframes navLinkIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
  .nav-right{margin-left:0;gap:7px}
  .nav-right .btn{padding:9px 14px;font-size:.82rem}
  .saldo-pill{padding:7px 11px;font-size:.8rem}
  .logo{font-size:1.05rem}
  .logo .x{width:32px;height:32px}

  /* hero lebih ringkas */
  .hero{padding:40px 16px 22px}
  .hero h1{font-size:clamp(1.8rem,8vw,2.4rem);margin:16px 0 12px}
  .hero p{font-size:.94rem;margin-bottom:22px}
  .hero .cta,.quicknav{gap:9px}
  .hero .cta .btn{flex:1 1 auto;min-width:140px}
  .qn-btn{padding:11px 12px;font-size:.8rem}

  /* grid produk: 1-2 kolom */
  .grid{grid-template-columns:1fr 1fr;gap:11px}
  .card{padding:16px}
  .card .ic{width:44px;height:44px;font-size:1.3rem}
  .nk-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hd-grid{grid-template-columns:1fr 1fr;gap:10px}

  /* section & filter */
  .wrap{padding:0 14px}
  .sec-head h2{font-size:1.25rem}
  .filters{gap:7px}
  .search input{width:100%}
  .filters .search{flex:1 1 100%}

  /* flash sale & leaderboard */
  .flash-strip{padding:14px 16px;gap:11px}
  .flash-strip b{font-size:.92rem}
  .countdown{margin-left:0;width:100%;justify-content:flex-start}
  .countdown span{min-width:40px;padding:5px 8px}
  .lb-panel{padding:16px;margin:16px 0}
  .lb-panel h2{font-size:1.15rem}
  .lb-row{padding:9px 11px;gap:10px}
  .lb-info b{font-size:.9rem}
  .lb-prod{font-size:.72rem}
  .lb-amt{font-size:.95rem}

  /* service rows (SMM/Nokos) */
  .svc{padding:13px 14px;gap:11px}
  .svc .si{width:38px;height:38px}

  /* profile & tabs */
  .profile-head{padding:20px;gap:14px}
  .profile-head .big-av{width:58px;height:58px;font-size:1.4rem}
  .tabs{gap:6px;margin:18px 0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .tabs .tab{flex-shrink:0;font-size:.83rem;padding:9px 13px}

  /* modal fit layar HP */
  .modal{padding:14px}
  .modal .box{padding:22px 18px;max-height:90vh;border-radius:18px}

  /* stage koleksi (avatar+bingkai+background) & kartu level sedikit lebih kecil di HP */
  .gc-frame-wrap{width:150px;height:150px}
  .lvl-card{padding:14px 16px;gap:12px}
  .lvl-badge{font-size:1.8rem}

  /* help widget */
  #helpFab{bottom:16px;right:16px;width:52px;height:52px}
  #helpBox{bottom:78px;right:12px;left:12px;width:auto}
}

/* ============ HP kecil (≤400px) ============ */
@media(max-width:400px){
  .grid,.hd-grid{grid-template-columns:1fr}
  /* [FIX] nk-grid (Nokos) SENGAJA tidak ikut collapse ke 1 kolom di lebar ini — sebelumnya
     semua HP dengan lebar layar <400px (kebanyakan HP Android umum) otomatis jatuh ke daftar
     1 kolom bertumpuk ke bawah, padahal kartunya cukup kecil buat tetap 2 kolom kalau paddingnya
     sedikit dirapatkan. 2 kolom lebih enak dipandang & terasa sejajar dibanding 1 kolom panjang. */
  .nk-grid{grid-template-columns:1fr 1fr;gap:9px}
  .nk-card{padding:12px}
  .nk-card .nk-avatar{width:40px;height:40px;border-radius:12px;font-size:.95rem}
  .nk-card h4{font-size:.85rem}
  .nk-card .nk-price{font-size:1.02rem}
  .hero h1{font-size:1.65rem}
  /* [REDESIGN 2026-09-19] quicknav sekarang jadi RAIL geser horizontal 1 baris (lihat .quicknav
     & .qn-btn utama di atas), bukan lagi grid/wrap bertingkat — komentar lama soal "2 tombol per
     baris" sudah tidak relevan. Di layar sangat sempit cuma perlu perkecil font/padding; tidak
     perlu overflow:hidden/ellipsis lagi karena labelnya memang boleh lebih lebar dari layar,
     user tinggal geser buat lihat sisanya. */
  .quicknav{gap:8px}
  .qn-btn{font-size:.76rem;padding:11px 12px}
  .nav-right .btn{padding:8px 11px;font-size:.78rem}
  .saldo-pill{padding:6px 9px;font-size:.74rem}
  #pointsPill{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.1s!important}
}
/* [PORT 2026-08-21] "Skin Toko" — dipindahkan dari toko.html (reseller storefront) ke web utama.
   Engine efek partikel + styling per-skin, identik dengan versi reseller (lihat applyStoreEffect()
   di script bawah). Diaktifkan lewat atribut data-skin-fx di <body>, cuma admin yang bisa atur
   (lihat panel admin → Skin Toko), murni CSS+JS sendiri, tanpa aset/dependency dari luar. */
@keyframes sfxFall{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(var(--dx),110vh) rotate(360deg)}
}
@keyframes sfxRise{
  0%{transform:translate(0,0)}
  100%{transform:translate(var(--dx),-110vh)}
}
@keyframes sfxTwinkle{
  0%,100%{opacity:.15;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes bannerIconFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
/* [NEW 2026-08-24] glow sprite di belakang badge ikon banner — pakai sprite asli (CC0, Kenney
   Particle Pack, lihat public/particles/CREDITS.txt) lewat teknik CSS mask-image: sprite aslinya
   putih polos di atas transparan, di-mask jadi background-color supaya otomatis ikut warna aksen
   tiap tema tanpa perlu file terpisah per warna. Menggantikan glow radial-gradient polos
   sebelumnya dengan bentuk sparkle asli yang lebih "game-like".*/
@keyframes glowSpritePulse{0%,100%{opacity:.45;transform:scale(1) rotate(0deg)}50%{opacity:.85;transform:scale(1.15) rotate(8deg)}}
.sfx-fall{animation:sfxFall linear var(--dur) forwards}
.sfx-rise{animation:sfxRise linear var(--dur) forwards}
.sfx-twinkle{animation:sfxTwinkle ease-in-out var(--dur) infinite}
body[data-skin-fx="snow"] .btn-p{background:linear-gradient(135deg,#38bdf8,#0ea5e9),repeating-linear-gradient(45deg,#ffffff22 0 2px,transparent 2px 10px);background-blend-mode:overlay}
body[data-skin-fx="sakura"] .btn-p{background:linear-gradient(135deg,#f472b6,#ec4899),radial-gradient(circle at 15% 30%,#ffffff33 0 3px,transparent 4px),radial-gradient(circle at 75% 70%,#ffffff33 0 3px,transparent 4px),radial-gradient(circle at 45% 15%,#ffffff26 0 2px,transparent 3px)}
body[data-skin-fx="neon"] .btn-p{background:linear-gradient(135deg,#7c3aed,#06b6d4),repeating-linear-gradient(0deg,#00fff233 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,#00fff233 0 1px,transparent 1px 9px);box-shadow:0 0 14px #00fff255,0 0 2px #fff5 inset}
body[data-skin-fx="halloween"] .btn-p{background:linear-gradient(135deg,#ea580c,#78350f),radial-gradient(circle at 20% 25%,#00000033 0 4px,transparent 5px),radial-gradient(circle at 80% 75%,#00000033 0 4px,transparent 5px)}
body[data-skin-fx="bubbles"] .btn-p{background:linear-gradient(135deg,#0891b2,#0e7490),radial-gradient(circle at 20% 70%,#ffffff2e 0 4px,transparent 5px),radial-gradient(circle at 70% 25%,#ffffff26 0 3px,transparent 4px),radial-gradient(circle at 45% 55%,#ffffff20 0 2px,transparent 3px)}
body[data-skin-fx="stars"] .btn-p{background:linear-gradient(135deg,#6d28ff,#312e81),radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 2px),radial-gradient(circle at 45% 80%,#fff 0 1px,transparent 2px),radial-gradient(circle at 85% 20%,#fff 0 1px,transparent 2px)}
body[data-skin-fx="forest"] .btn-p{background:linear-gradient(135deg,#16a34a,#166534),radial-gradient(circle at 20% 30%,#ffffff26 0 3px,transparent 4px),radial-gradient(circle at 75% 70%,#ffffff26 0 3px,transparent 4px)}
body[data-skin-fx="kerjaan"] .btn-p{background:linear-gradient(135deg,#2563eb,#1e3a8a),repeating-linear-gradient(0deg,#ffffff14 0 1px,transparent 1px 11px),repeating-linear-gradient(90deg,#ffffff14 0 1px,transparent 1px 11px)}
body[data-skin-fx="anime"] .btn-p{background:linear-gradient(135deg,#ec4899,#7c3aed),radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 2px),radial-gradient(circle at 45% 80%,#fff 0 1px,transparent 2px)}
body[data-skin-fx="lebaran"] .btn-p{background:linear-gradient(135deg,#065f46,#78350f),radial-gradient(circle at 22% 28%,#fbbf2444 0 2px,transparent 3px),radial-gradient(circle at 72% 68%,#fbbf2444 0 2px,transparent 3px),radial-gradient(circle at 48% 82%,#fbbf2433 0 2px,transparent 3px)}
body[data-skin-fx="synthwave"] .btn-p{background:linear-gradient(135deg,#ff2d95,#7c3aed),repeating-linear-gradient(0deg,#ffffff22 0 1px,transparent 1px 8px);box-shadow:0 0 14px #ff2d9555,0 0 2px #fff5 inset}
body[data-skin-fx="snow"] .qn-btn,body[data-skin-fx="snow"] .pcard{border-color:#7dd3fc55}
body[data-skin-fx="sakura"] .qn-btn,body[data-skin-fx="sakura"] .pcard{border-color:#f472b655}
body[data-skin-fx="neon"] .qn-btn,body[data-skin-fx="neon"] .pcard{border-color:#00fff255;box-shadow:0 0 8px #00fff222}
body[data-skin-fx="halloween"] .qn-btn,body[data-skin-fx="halloween"] .pcard{border-color:#ea580c55}
body[data-skin-fx="bubbles"] .qn-btn,body[data-skin-fx="bubbles"] .pcard{border-color:#22d3ee55}
body[data-skin-fx="stars"] .qn-btn,body[data-skin-fx="stars"] .pcard{border-color:#a78bfa55}
body[data-skin-fx="forest"] .qn-btn,body[data-skin-fx="forest"] .pcard{border-color:#4ade8055}
body[data-skin-fx="kerjaan"] .qn-btn,body[data-skin-fx="kerjaan"] .pcard{border-color:#60a5fa55}
body[data-skin-fx="anime"] .qn-btn,body[data-skin-fx="anime"] .pcard{border-color:#ff6ec755}
body[data-skin-fx="lebaran"] .qn-btn,body[data-skin-fx="lebaran"] .pcard{border-color:#fbbf2455}
body[data-skin-fx="synthwave"] .qn-btn,body[data-skin-fx="synthwave"] .pcard{border-color:#ff2d9555;box-shadow:0 0 8px #ff2d9522}
/* [NEW 2026-08-24] modal QRIS (Menunggu Pembayaran) ikut tema aktif — pakai var(--skin-accent)
   generik (diisi applyStoreEffect() di JS) supaya 1 aturan cukup untuk semua 9 tema, bukan
   9 blok warna manual terpisah. :not([data-skin-fx=""]) sengaja dipasang supaya efek ini TIDAK
   muncul sama sekali kalau memang tidak ada tema aktif (fallback ke tampilan polos seperti biasa).
   Catatan: ini styling berbasis warna/partikel generik untuk 8 dari 9 tema. Khusus tema "forest"
   sekarang punya border-image asli (CC0, Kenney Fantasy UI Borders — lihat public/particles/
   CREDITS.txt) yang di-override di aturan terpisah di bawah — 8 tema lainnya belum punya aset
   border bergambar serupa (belum ketemu padanan CC0 yang cocok per tema), jadi tetap pakai
   border warna polos untuk sementara. */
body[data-skin-fx]:not([data-skin-fx=""]) #payWaitModal .box{border:1px solid var(--skin-accent, var(--line));box-shadow:0 0 32px color-mix(in srgb, var(--skin-accent, transparent) 35%, transparent),0 20px 60px -10px rgba(0,0,0,.6)}
body[data-skin-fx]:not([data-skin-fx=""]) #payWaitModal .pw-skin-badge{display:flex}
/* [NEW 2026-08-24] override khusus tema forest — border-image asli (9-slice, sudut tidak gepeng
   walau modal berbagai ukuran) menggantikan border warna polos di atas. Sumber: Kenney Fantasy
   UI Borders (CC0), diwarnai hijau lewat pre-processing PNG (bukan CSS filter, supaya presisi). */
body[data-skin-fx="forest"] #payWaitModal .box{border-style:solid;border-width:16px;border-image-source:url(/particles/fantasy-border-forest.png);border-image-slice:64;border-image-width:16px;border-image-repeat:stretch;box-shadow:0 0 32px #4ade8055,0 20px 60px -10px rgba(0,0,0,.6);background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 82%, #4ade80 18%),var(--bg))}
.pw-skin-badge{display:none;width:52px;height:52px;margin:0 auto 12px;position:relative;align-items:center;justify-content:center}
.pw-skin-badge .pw-skin-glow{position:absolute;inset:-16px;background-color:var(--skin-accent);-webkit-mask-image:url(/particles/soft-glow.png);mask-image:url(/particles/soft-glow.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;animation:glowSpritePulse 2.6s ease-in-out infinite;pointer-events:none}
.pw-skin-badge svg{position:relative;width:26px;height:26px;filter:drop-shadow(0 2px 5px var(--skin-accent))}
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}}
@keyframes badgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes badgeFlicker{0%,20%,22%,55%,100%{opacity:1;transform:scale(1)}21%,54%{opacity:.35;transform:scale(.85)}}
@keyframes badgeFlap{0%,100%{transform:scaleX(1) rotate(0deg)}50%{transform:scaleX(.6) rotate(-12deg)}}
@keyframes badgeTwinkle2{0%,100%{opacity:.5;transform:scale(.85) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(15deg)}}
body[data-skin-fx] .btn-p{position:relative}
body[data-skin-fx] .btn-p::after{position:absolute;top:3px;right:7px;font-size:16px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));z-index:1}
body[data-skin-fx="snow"] .btn-p::after{content:"❄️";animation:badgeFloat 3s ease-in-out infinite}
body[data-skin-fx="sakura"] .btn-p::after{content:"🌸";animation:badgeFloat 3.2s ease-in-out infinite}
body[data-skin-fx="neon"] .btn-p::after{content:"⚡";animation:badgeFlicker 2.4s ease-in-out infinite}
body[data-skin-fx="halloween"] .btn-p::after{content:"🦇";animation:badgeFlap 1.1s ease-in-out infinite}
body[data-skin-fx="bubbles"] .btn-p::after{content:"🫧";animation:badgeBob 2.4s ease-in-out infinite}
body[data-skin-fx="stars"] .btn-p::after{content:"✨";animation:badgeTwinkle2 1.8s ease-in-out infinite}
body[data-skin-fx="forest"] .btn-p::after{content:"🍃";animation:badgeFloat 3s ease-in-out infinite}
body[data-skin-fx="kerjaan"] .btn-p::after{content:"📎";animation:badgeBob 2.4s ease-in-out infinite}
body[data-skin-fx="anime"] .btn-p::after{content:"✨";animation:badgeTwinkle2 1.6s ease-in-out infinite}
body[data-skin-fx="lebaran"] .btn-p::after{content:"🏮";animation:badgeFloat 3s ease-in-out infinite}
body[data-skin-fx="synthwave"] .btn-p::after{content:"📼";animation:badgeFlicker 2.4s ease-in-out infinite}
#musicToggleBtn{position:fixed;left:16px;bottom:16px;z-index:40;width:42px;height:42px;border-radius:50%;background:var(--glass2);border:1px solid var(--line);color:var(--txt);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:17px;backdrop-filter:blur(8px)}
/* [FIX 2026-08-21] BUG: web utama sebelumnya SAMA SEKALI belum punya styling scrollbar global
   (beda dari toko.html reseller yang sudah punya sejak awal) — jadi walau ganti Skin Toko dan
   var(--vio) ikut berubah, scrollbar tetap tampil bawaan browser (abu-abu polos), kelihatan
   "tidak ikut" tema. Sekarang dipasang persis sama seperti versi reseller: pakai var(--vio)
   langsung, otomatis ikut warna aksen skin yang aktif. */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--vio);background:color-mix(in srgb, var(--vio) 55%, transparent);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--vio2);background:color-mix(in srgb, var(--vio2) 75%, transparent);background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:var(--vio) transparent}
/* ---- [NEW 2026-09-21] Jasher Manual (dikerjakan karyawan) ---- */
.jm-ic{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px;margin-right:5px}
.jm-seg{display:flex;gap:6px;padding:4px;background:var(--glass);border:1px solid var(--line);border-radius:14px;margin:18px 0}
.jm-seg button{flex:1;border:none;background:none;color:var(--mut);font-weight:700;font-size:.86rem;padding:10px 12px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit}
.jm-seg button.on{background:linear-gradient(135deg,var(--vio2),var(--vio));color:#fff}
.jm-badge{background:var(--red);color:#fff;font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:99px;margin-left:4px}
.jm-prod{cursor:pointer;padding:0;overflow:hidden;gap:0}
.jm-prod .bn{aspect-ratio:16/9;background:linear-gradient(135deg,#8b5cf62b,#2dd4ff1e);display:grid;place-items:center;color:var(--vio2)}
.jm-prod .bn img{width:100%;height:100%;object-fit:cover;display:block}
.jm-prod .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.jm-flow{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.jm-flow li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:.84rem;background:var(--glass)}
.jm-flow .n{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--glass2);font-size:.72rem;font-weight:800}
.jm-flow .n .jm-ic{margin:0;width:12px;height:12px}
.jm-flow li.done{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.jm-flow li.done .n{background:var(--green);color:#04130c}
.jm-flow li.next{border-color:color-mix(in srgb,var(--vio) 60%,transparent)}
.jm-chatbox{height:min(320px,40vh);overflow-y:auto;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.jm-m{max-width:86%;padding:8px 12px;border-radius:14px;font-size:.86rem;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.jm-m.me{align-self:flex-end;background:linear-gradient(135deg,var(--vio2),var(--vio));color:#fff}
.jm-m.staff{align-self:flex-start;background:var(--glass2)}
.jm-m.system{align-self:center;background:none;border:1px dashed var(--line);color:var(--mut);font-size:.76rem;text-align:center}
.jm-m .who{font-size:.68rem;opacity:.75;margin-bottom:2px;font-weight:700}
.jm-m .when{font-size:.64rem;opacity:.65;margin-top:3px}
/* [NEW 2026-10-04] pratinjau gambar bukti kerja */
.jm-img{display:block;position:relative;margin-top:8px;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(5,6,15,.6);cursor:zoom-in;width:min(260px,100%);min-height:96px;text-align:left;color:inherit;animation:jmQIn .45s cubic-bezier(.2,.9,.25,1.2) both}
.jm-img img{display:block;width:100%;max-height:300px;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1)}
.jm-img.ready img{opacity:1;transform:none}
.jm-img::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09),transparent 70%);background-size:200% 100%;animation:jmShim 1.2s linear infinite}
.jm-img.ready::before,.jm-img.fail::before{display:none}
.jm-img.fail{min-height:0}.jm-img.fail img{display:none}
.jm-img-cap{display:block;padding:7px 10px;font-size:.7rem;color:var(--mut);overflow-wrap:anywhere;background:rgba(0,0,0,.35)}
@keyframes jmShim{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.jm-img,.jm-img::before{animation:none}.jm-img img{transition:none}}
/* [NEW 2026-10-03] kartu QRIS di chat Jasher Manual (pembeli) */
.jm-m.has-qris{max-width:min(320px,92%)}
.jm-qris{margin-top:8px;padding:12px;border-radius:16px;background:linear-gradient(160deg,rgba(45,212,255,.12),rgba(139,92,246,.10));border:1px solid rgba(45,212,255,.35);white-space:normal;animation:jmQIn .5s cubic-bezier(.2,.9,.25,1.2) both}
.jm-qris .qh{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.8rem;color:var(--cy)}
.jm-qris .qh b{color:var(--txt)}
.jm-qris .qa{margin-left:auto;font-family:var(--font-d);font-weight:800;font-size:1.1rem;color:var(--txt)}
.jm-qris .qn{font-size:.76rem;color:var(--mut);margin-top:4px;overflow-wrap:anywhere}
.jm-qris .qimg{position:relative;margin:10px auto 6px;max-width:220px;border-radius:14px;overflow:hidden;background:#fff;padding:8px;box-shadow:0 12px 30px -12px rgba(45,212,255,.5)}
.jm-qris .qimg img{display:block;width:100%}
.jm-qris .qimg .scan{position:absolute;left:8px;right:8px;top:8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#2dd4ff,transparent);box-shadow:0 0 12px #2dd4ff;animation:jmQScan 2.4s ease-in-out infinite}
.jm-qris .qs{margin-top:6px}
.jm-qris .qb{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.jm-qris .qb .btn{flex:1;min-width:0;width:auto;margin:0;white-space:normal;padding:8px 12px;font-size:.78rem;text-decoration:none}
.jm-qpill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px}
.jm-qpill.pending{background:rgba(255,176,32,.15);color:var(--amber)}.jm-qpill.paid{background:rgba(61,220,151,.15);color:var(--green)}
.jm-qpill.failed,.jm-qpill.void{background:rgba(255,92,122,.12);color:var(--red)}
.jm-qpill.pending::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:jmQPulse 1.2s ease-in-out infinite}
.jm-qris.paid{border-color:rgba(61,220,151,.45)}
.jm-paybtns{display:flex;gap:8px;flex-wrap:wrap}.jm-paybtns .btn{flex:1 1 140px;margin:0;white-space:normal}
@keyframes jmQIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes jmQScan{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(220px - 30px))}}
@keyframes jmQPulse{50%{opacity:.25;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.jm-qris,.jm-qris .qimg .scan,.jm-qpill.pending::before{animation:none}}
.jm-att{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:6px 10px;border-radius:9px;background:var(--bg);border:1px solid var(--line);color:var(--cy);font-size:.76rem;font-weight:700;cursor:pointer;white-space:normal}
.jm-att.gone{color:var(--mut);cursor:default;text-decoration:line-through}
.jm-pricebox{border:1px solid color-mix(in srgb,var(--cy) 45%,transparent);border-radius:14px;padding:14px;margin:12px 0;background:var(--glass)}
.jm-st{font-size:.7rem;font-weight:800;white-space:nowrap}
/* kotak ketik chat menempel di dasar modal supaya tetap terlihat walau daftar progress panjang */
.jm-compose{position:sticky;bottom:-28px;z-index:2;display:flex;gap:8px;align-items:flex-end;margin-top:10px;padding:10px 0 2px;background:var(--bg)}
@media(max-width:720px){.jm-compose{bottom:-22px}}
/* [NEW 2026-09-21] banner ajakan Passkey: bawah layar (di atas bottom-nav pada HP) */
#pkNudge{bottom:24px}
@media(max-width:720px){#pkNudge{bottom:88px}}
/* [NEW 2026-09-25] ROBLOX — memakai komponen Top Up Game (.tg-items/.tg-item/.total-row) + tambahan di bawah */
.rbx-hero{position:relative;border-radius:20px;overflow:hidden;margin-bottom:18px;min-height:140px;background:linear-gradient(135deg,#1a1d3d,#0a0c1c);border:1px solid var(--line)}
.rbx-hero img{display:block;width:100%;aspect-ratio:16/6;object-fit:cover}
.rbx-hero-text{position:absolute;inset:auto 0 0 0;padding:18px 20px;background:linear-gradient(0deg,rgba(5,6,15,.92),transparent)}
.rbx-hero img[hidden]+.rbx-hero-text{position:static;background:none}
.rbx-hero h1{margin:0;font-size:1.7rem;color:#fff}.rbx-hero p{margin:6px 0 0;color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.55;white-space:pre-line}
#page-roblox .rbx-topup{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:18px 18px 20px}
.rbx-poster{color:#e2e8f0}
.rbx-note{color:var(--mut);font-size:.78rem;margin:-8px 0 16px;line-height:1.6;white-space:pre-line}
.tg-item small{display:block;margin-top:4px;font-size:.72rem;color:var(--mut)}
.tg-item .rbx-badge,.rbx-card .rbx-badge{display:inline-block;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:6px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;margin-bottom:5px}
.tg-item.soldout{opacity:.45;cursor:not-allowed}
.rbx-saldo{color:var(--mut);font-size:.78rem;text-align:center;margin-top:8px}
.rbx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
@media(max-width:640px){.rbx-grid{grid-template-columns:repeat(2,1fr);gap:11px}}
.rbx-card{position:relative;border-radius:16px;overflow:hidden;background:var(--glass);border:1px solid var(--line);cursor:pointer;transition:.2s;text-align:left;padding:0;color:inherit}
.rbx-card:hover{transform:translateY(-3px);border-color:var(--vio)}
.rbx-card .img{aspect-ratio:1/1;background:linear-gradient(145deg,#1a1d3d,#0a0c1c);display:grid;place-items:center;color:#475569}
.rbx-card .img img{width:100%;height:100%;object-fit:cover}
.rbx-card .inf{padding:10px 12px 12px}
.rbx-card b{display:block;font-size:.9rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbx-card .meta{color:var(--mut);font-size:.74rem;margin-top:3px}
.rbx-card .pr{font-weight:800;margin-top:6px;color:#a78bfa}
.rbx-card .left{position:absolute;top:8px;right:8px;font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:8px;background:rgba(5,6,15,.8);color:#fff}
.rbx-card.soldout{opacity:.5;cursor:default}
.rbx-card .rbx-badge{position:absolute;top:8px;left:8px;margin:0}
.rbx-modal{position:fixed;inset:0;z-index:9000;background:rgba(3,4,12,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.rbx-modal[hidden]{display:none}
.rbx-modal-box{position:relative;width:100%;max-width:520px;max-height:90vh;overflow:auto;background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rbx-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--glass2);color:var(--txt);font-size:20px;line-height:1;cursor:pointer}
.rbx-gal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:26px 0 12px}
.rbx-gal img{flex:0 0 100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;scroll-snap-align:start}
.rbx-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem;margin:12px 0}
.rbx-kv span{color:var(--mut)}
.rbx-cred{background:var(--bg);color:var(--txt);border:1px dashed var(--vio);border-radius:12px;padding:12px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;line-height:1.7;overflow-wrap:anywhere;margin:10px 0}
.rbx-order{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--glass)}
.vr-kind{display:flex;width:fit-content;align-items:center;gap:4px;margin-top:6px;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:99px;max-width:100%}
.vr-kind svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vr-kind.inv{color:var(--cy,#2dd4ff);background:color-mix(in srgb,var(--cy,#2dd4ff) 14%,transparent)}
.vr-kind.acc{color:var(--amber,#ffb020);background:color-mix(in srgb,var(--amber,#ffb020) 14%,transparent)}
.rbx-order{animation:rbxOIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes rbxOIn{from{opacity:0;transform:translateY(8px)}}
.rbx-meta{color:var(--mut);font-size:.78rem;margin-top:4px;overflow-wrap:anywhere}
.rbx-tl{list-style:none;margin:12px 0 4px;padding:0;display:flex;align-items:flex-start}
.rbx-tl li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.rbx-tl li::before{content:"";position:absolute;top:12px;right:50%;width:100%;height:3px;border-radius:3px;background:var(--line);z-index:0}
.rbx-tl li:first-child::before{display:none}
.rbx-tl li.done::before,.rbx-tl li.now::before{background:linear-gradient(90deg,var(--vio,#8b5cf6),var(--cy,#2dd4ff))}
.rbx-tl .dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--glass,rgba(255,255,255,.06));border:2px solid var(--line);color:#fff;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.rbx-tl .dot svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.rbx-tl li.done .dot{border-color:transparent;background:linear-gradient(135deg,var(--vio,#8b5cf6),var(--cy,#2dd4ff));box-shadow:0 6px 16px -8px var(--vio,#8b5cf6)}
.rbx-tl li.done .dot svg{opacity:1;transform:none}
.rbx-tl li.now .dot{border-color:var(--cy,#2dd4ff);animation:rbxNow 1.5s ease-in-out infinite}
.rbx-tl li.now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cy,#2dd4ff)}
@keyframes rbxNow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cy,#2dd4ff) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.rbx-tl b{font-size:.74rem;color:var(--mut);font-weight:700}
.rbx-tl li.done b,.rbx-tl li.now b{color:var(--txt)}
.rbx-wait,.rbx-snote{display:flex;gap:7px;align-items:flex-start;font-size:.78rem;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
.rbx-wait{color:var(--amber,#ffb020)}.rbx-snote{color:var(--mut)}
.rbx-wait svg,.rbx-snote svg,.rbx-note .ic svg{width:15px;height:15px;flex:none;margin-top:1px}
/* [NEW 2026-10-08] kolom password pembeli + chat penjual<->pembeli */
.rbx-passf[hidden]{display:none}
.rbx-passbox{position:relative;display:block}
.rbx-passbox input{padding-right:44px!important}
.rbx-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;transition:color .18s ease,background .18s ease}
.rbx-eye:hover{color:var(--tx);background:rgba(127,127,127,.12)}
.rbx-eye.on{color:var(--acc,#6c8cff)}
.rbx-passhint{display:flex;gap:7px;align-items:flex-start;margin:7px 0 0;color:var(--mut);font-size:.72rem;line-height:1.55;overflow-wrap:anywhere}
.rbx-passhint svg{flex:none;margin-top:2px;color:var(--ok,#2ecc71)}
.rbx-chat{margin-top:12px;border:1px solid var(--bd);border-radius:14px;background:rgba(127,127,127,.05);overflow:hidden}
.rbx-chat-hd{display:flex;gap:7px;align-items:center;padding:9px 12px;font-size:.78rem;font-weight:700;border-bottom:1px solid var(--bd);color:var(--tx)}
.rbx-chat-hd svg{width:15px;height:15px;flex:none}
.rbx-chat-hd .bdg{margin-left:auto;min-width:19px;height:19px;padding:0 6px;display:grid;place-items:center;border-radius:99px;background:var(--acc,#6c8cff);color:#fff;font-size:.66rem;font-weight:800;animation:rbxPop .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes rbxPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.rbx-clog{max-height:230px;overflow-y:auto;overscroll-behavior:contain;padding:11px 12px;display:flex;flex-direction:column;gap:7px;scroll-behavior:smooth}
.rbx-clog .none{color:var(--mut);font-size:.75rem;text-align:center;padding:10px 0}
.rbx-cmsg{max-width:85%;padding:7px 11px;border-radius:13px;font-size:.79rem;line-height:1.5;overflow-wrap:anywhere;animation:rbxIn .26s ease both}
@keyframes rbxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rbx-cmsg.me{align-self:flex-end;background:var(--acc,#6c8cff);color:#fff;border-bottom-right-radius:5px}
.rbx-cmsg.them{align-self:flex-start;background:var(--cd,rgba(127,127,127,.14));color:var(--tx);border:1px solid var(--bd);border-bottom-left-radius:5px}
.rbx-cmsg time{display:block;margin-top:3px;font-size:.62rem;opacity:.68}
.rbx-chat-in{display:flex;gap:7px;padding:9px;border-top:1px solid var(--bd);background:var(--cd,transparent)}
.rbx-chat-in input{flex:1 1 auto;min-width:0;width:auto!important;padding:9px 12px;border:1px solid var(--bd);border-radius:11px;background:var(--bg);color:var(--tx);font:inherit;font-size:.79rem}
.rbx-chat-in input:focus{outline:none;border-color:var(--acc,#6c8cff)}
.rbx-chat-in button{flex:none;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:var(--acc,#6c8cff);color:#fff;cursor:pointer;transition:transform .16s ease,opacity .16s ease}
.rbx-chat-in button:hover:not(:disabled){transform:translateY(-1px)}
.rbx-chat-in button:disabled{opacity:.5;cursor:default}
.rbx-chat-in button svg{width:16px;height:16px}
.rbx-cshut{display:flex;gap:7px;align-items:flex-start;padding:10px 12px;border-top:1px solid var(--bd);color:var(--mut);font-size:.74rem;line-height:1.5}
.rbx-cshut svg{width:14px;height:14px;flex:none;margin-top:2px}
.rbx-cerr{padding:0 12px 9px;color:var(--bad,#ff5f6d);font-size:.73rem;line-height:1.45}
@media(max-width:520px){.rbx-clog{max-height:190px}.rbx-cmsg{max-width:92%}}
.rbx-notes{margin-top:10px;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--vio,#8b5cf6) 6%,transparent);border:1px solid color-mix(in srgb,var(--vio,#8b5cf6) 18%,var(--line))}
.rbx-note{display:flex;gap:8px;align-items:flex-start;animation:rbxOIn .4s ease both}
.rbx-note .ic{color:var(--cy,#2dd4ff)}
.rbx-note div{min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
.rbx-note b{font-size:.8rem}.rbx-note span{font-size:.78rem;color:var(--mut)}.rbx-note small{font-size:.7rem;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.rbx-order,.rbx-note,.rbx-tl li.now .dot{animation:none}}
.rbx-order .top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.rbx-st{font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:8px}
.rbx-st.diproses{background:#f59e0b22;color:#fbbf24}.rbx-st.selesai{background:#22c55e22;color:#4ade80}.rbx-st.dibatalkan{background:#ef444422;color:#f87171}