/* WrexDev Store — tema gelap selaras WX Converter, versi bersih & ringan.
   Palet: #000 (latar) · #121212 (kartu) · putih (teks) · garis putih tipis
          #8140DC (utama, pengganti limau WX Converter) · #F05454 (peringatan) · emas untuk label.
   Dipakai halaman toko DAN panel admin (admin.css hanya menambah).

   Aturan ringan (60 fps di HP kentang):
   - tanpa backdrop-filter (blur) — paling berat saat menggulir;
   - tanpa animasi masuk bertingkat per kartu, tanpa animasi tanpa henti
     yang memicu repaint (shimmer/pulse bayangan);
   - yang bergerak hanya transform/opacity (dikerjakan GPU);
   - efek hover hanya untuk perangkat ber-mouse (@media (hover: hover)). */

:root {
  /* Gaya WX Converter: hitam pekat, panel gelap bergradasi halus, garis putih
     tipis. Aksen hijau-limau WX Converter diganti ungu WrexDev. */
  --bg: #000000;
  --bg-deep: #050505;
  --bg-raised: #1b1922;
  --bg-elev: #25222e;
  --chip: #24212c;
  --chip-hover: #302c3b;
  --hover: rgba(255, 255, 255, 0.07);
  --hover-strong: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.17);
  --input: #100f15;
  --text: #ffffff;
  --text-2: #aeaab8;
  --text-3: #666666;
  --primary: #8140dc;
  --primary-hover: #9254ee;
  --primary-soft: rgba(129, 64, 220, 0.15);
  --primary-text: #c7a6f7;
  /* Tombol utama: gradasi ungu + kilau tipis di tepi atas (seperti tombol limau WX Converter). */
  --primary-grad: linear-gradient(180deg, #a66bff 0%, #7a37dc 100%);
  --primary-grad-hover: linear-gradient(180deg, #b580ff 0%, #8846ea 100%);
  --primary-rim: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px -6px rgba(129, 64, 220, 0.75);
  --tint: rgba(129, 64, 220, 0.12);
  --tint-line: rgba(160, 100, 255, 0.45);
  /* Panel: gradasi gelap + garis terang tipis di atas. */
  --panel: linear-gradient(160deg, #27232f 0%, #1c1a23 45%, #17151d 100%);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  /* Kartu saat disorot (mouse): terangkat + bingkai & cahaya ungu. */
  --lift: 0 18px 40px -14px rgba(129, 64, 220, 0.7), 0 0 0 1px rgba(167, 112, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  /* Free product: biru (beda dari ungu produk berbayar & emas label/iklan). */
  --free-grad: linear-gradient(135deg, #38b6ff 0%, #5b6cff 100%);
  --free-text: #8fd0ff;
  --free-soft: rgba(56, 160, 255, 0.14);
  --free-line: rgba(80, 170, 255, 0.5);
  --accent: #f05454;
  --accent-soft: rgba(240, 84, 84, 0.14);
  --gold: #f4bf4f;
  --gold-deep: #d9951c;
  --gold-soft: rgba(244, 191, 79, 0.12);
  /* "Berhasil/aktif" memakai ungu (tanpa hijau di seluruh UI). */
  --ok: #b996f7;
  --ok-text: #d9c2ff;
  --ok-soft: rgba(151, 101, 240, 0.16);
  --green: var(--ok);
  --green-soft: var(--ok-soft);
  --info-text: #a9bdff;
  --info-soft: rgba(127, 160, 255, 0.12);
  --yellow: #f4bf4f;
  --yellow-soft: rgba(244, 191, 79, 0.12);
  --blue: #7fb2ff;
  --danger: #f05454;
  --danger-soft: rgba(240, 84, 84, 0.14);
  --discord: #5865f2;
  --radius: 18px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  --ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --top: 64px;
  --side: 240px;
  --side-mini: 76px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.5 var(--font); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
::selection { background: var(--primary); color: #fff; }
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; text-align: center; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- animasi (singkat, hanya transform/opacity) ---------- */
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
/* Pindah halaman = tampil langsung (tanpa memudar/bergeser per elemen):
   paling ringan untuk HP kentang dan terasa paling cepat. */
.anim-up, .anim-down { animation: none; }
.slide-next { animation: slideFromRight 0.24s var(--ease) both; }
.slide-prev { animation: slideFromLeft 0.24s var(--ease) both; }
.reveal, .reveal.in { opacity: 1; transform: none; }

/* ---------- boot / spinner ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.14); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; }

/* ---------- ikon ---------- */
.ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; stroke: none; }
.ic.sm { width: 18px; height: 18px; }
.ic.xs { width: 14px; height: 14px; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--chip); border-color: var(--border-strong); color: var(--text); font-weight: 600; font-size: 14px;
  white-space: nowrap; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .ic { width: 18px; height: 18px; margin-left: -3px; }
.btn-primary { background: var(--primary-grad); color: #fff; box-shadow: var(--primary-rim); }
.btn-accent, .btn-red { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--danger-soft); color: #ff8f8f; }
.btn-discord { background: var(--discord); color: #fff; }
.btn-roblox { background: #fff; color: #111; }
.btn-lg { height: 50px; border-radius: 999px; padding: 0 24px; font-size: 15px; }
.btn-sm { height: 32px; border-radius: 999px; padding: 0 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent;
  display: inline-grid; place-items: center; color: var(--text-2); flex: 0 0 auto; transition: background-color 0.15s, color 0.15s;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) {
  .btn:hover { background: var(--chip-hover); }
  .btn-primary:hover { background: var(--primary-grad-hover); }
  .btn-accent:hover, .btn-red:hover { background: #f36a6a; }
  .btn-outline:hover { background: var(--primary-soft); border-color: var(--primary); color: #fff; }
  .btn-ghost:hover { background: var(--hover); }
  .btn-danger:hover { background: rgba(240, 84, 84, 0.24); }
  .btn-discord:hover { background: #4752c4; }
  .btn-roblox:hover { background: #e8e8e8; }
  .icon-btn:hover { background: var(--hover-strong); color: var(--text); }
}

/* ---------- form ---------- */
.input, select.input, textarea.input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--input); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
textarea.input { height: auto; min-height: 90px; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder { color: var(--text-3); }
.label { display: block; font-weight: 600; margin: 0 0 6px; }
.help { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.field { margin-bottom: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: 0 0 auto; }

/* ---------- kerangka: topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: var(--bg);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.topbar-center { flex: 0 1 640px; display: flex; align-items: center; min-width: 0; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); padding: 0 8px 0 4px; height: 40px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--primary); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; flex: 0 0 auto; }
.logo-img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; }
.logo-text small { font-size: 11px; color: var(--primary-text); font-weight: 700; margin-left: 4px; letter-spacing: 0.3px; text-transform: uppercase; }
.search { display: flex; flex: 1; min-width: 0; height: 40px; position: relative; }
.search input {
  flex: 1; min-width: 0; height: 40px; padding: 0 46px 0 18px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--input); color: var(--text); outline: none; transition: border-color 0.15s;
}
.search input:focus { border-color: var(--primary); }
.search button {
  position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2); display: grid; place-items: center; transition: background-color 0.15s, color 0.15s;
}
.search button .ic { width: 18px; height: 18px; }
.lang-toggle { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--chip); color: var(--text-2); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; transition: background-color 0.15s, color 0.15s; }
.signin { height: 38px; padding: 0 16px 0 11px; white-space: nowrap; border-radius: 999px; border: 0; background: var(--primary-grad); box-shadow: var(--primary-rim); color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.15s; }
.signin .ic { width: 20px; height: 20px; }
@media (hover: hover) {
  .search button:hover { background: var(--hover-strong); color: var(--text); }
  .lang-toggle:hover { background: var(--hover); color: var(--text); }
  .signin:hover { background: var(--primary-grad-hover); }
}
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--bg-deep);
}
.cart-count.bump { animation: bump 0.4s var(--ease); }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--chip); flex: 0 0 auto; }
.avatar.lg { width: 48px; height: 48px; }
.avatar.xl { width: 72px; height: 72px; }
.avatar.xs { width: 24px; height: 24px; }
.avatar-btn { border: 0; background: transparent; padding: 3px; border-radius: 50%; display: grid; place-items: center; transition: background-color 0.15s; }
.avatar-btn:hover { background: var(--hover-strong); }
.avatar.ph { display: grid; place-items: center; color: var(--text-2); font-weight: 700; }

/* Menu atas toko (layar lebar): pengganti sidebar. */
.top-nav { display: none; align-items: center; gap: 2px; flex: 0 0 auto; }
.top-link { height: 36px; padding: 0 16px 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 600; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.top-link:hover { text-decoration: none; color: var(--text); }
.top-link .ic { width: 18px; height: 18px; }
.top-link.active { color: #fff; background: var(--chip); box-shadow: inset 0 0 0 1px var(--border-strong); }
.top-link.active .ic { color: var(--primary-text); }
@media (hover: hover) { .top-link:hover { background: var(--hover); } }

/* menu tarik (akun) */
.menu {
  position: fixed; z-index: 60; min-width: 280px; max-width: calc(100vw - 16px); background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: 18px; padding: 6px 0; box-shadow: var(--shadow-lg);
  animation: slideDown 0.16s ease-out both;
}
.menu:not(.notif-panel) { max-width: min(330px, calc(100vw - 16px)); }
/* Kepala menu akun: avatar | nama tampilan, @Roblox, @Discord (satu baris berikon, dipotong rapi). */
.menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; margin-bottom: 4px; }
.menu-id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.menu-name { display: block; font-size: 15.5px; line-height: 1.3; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-acc { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.menu-acc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-acc .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.menu-acc.rb .ic { color: var(--text-3); }
.menu-acc.dc .ic { color: #8b95f9; }
a.menu-acc.link { color: var(--primary-text); font-weight: 600; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 42px; border: 0; background: transparent; color: var(--text); text-align: left; text-decoration: none; transition: background-color 0.12s; }
.menu-item .ic { color: var(--text-2); }
.menu-item:hover { background: var(--hover); text-decoration: none; }
.menu-sep { height: 0; margin: 4px 0; }

/* ---------- kerangka: sidebar (panel admin) ---------- */
.sidebar {
  position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); z-index: 30;
  overflow-y: auto; overflow-x: hidden; padding: 14px 12px; background: var(--bg-deep); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar > *, .drawer > * { flex-shrink: 0; }
.menu-btn .ic path { transition: transform 0.3s var(--ease); transform-box: fill-box; transform-origin: left center; }
.app.mini .topbar .menu-btn .ic path:nth-child(1) { transform: scaleX(0.55); }
.app.mini .topbar .menu-btn .ic path:nth-child(3) { transform: scaleX(0.78); }
.side-spacer { flex: 1 1 auto; min-height: 14px; }
.side-legal { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; display: grid; gap: 2px; }
.side-legal .side-item { height: 36px; font-size: 13px; color: var(--text-3); gap: 12px; }
.side-legal .side-item .ic { width: 18px; height: 18px; }
.side-legal .side-item:hover { color: var(--text); }
.side-legal .side-item.active { color: #fff; }
.sidebar .only-drawer { display: none; }
.side-item {
  position: relative; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.side-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.side-item.active { background: var(--primary-soft); color: #fff; font-weight: 600; }
.side-item.active .ic { color: var(--primary-text); }
.side-item .side-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.side-sep { height: 1px; background: var(--border-strong); margin: 10px 0; }
.side-title { padding: 6px 12px; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; }
.main { padding: calc(var(--top) + 16px) 28px 0 calc(var(--side) + 28px); min-height: 100vh; display: flex; flex-direction: column; }
.view { flex: 1 0 auto; padding-bottom: 48px; }
.app.mini .sidebar { width: var(--side-mini); padding: 8px 6px; }
.app.mini .side-item { flex-direction: column; gap: 5px; height: 68px; justify-content: center; font-size: 10px; padding: 0 2px; text-align: center; }
.app.mini .side-item .side-badge { position: absolute; top: 6px; right: 10px; margin: 0; }
.app.mini .side-sep, .app.mini .side-title, .app.mini .side-extra { display: none; }
.app.mini .main { padding-left: calc(var(--side-mini) + 28px); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 45; animation: fadeIn 0.2s both; transition: opacity 0.25s ease; }
.scrim.out { opacity: 0; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(280px, 86vw); background: var(--bg-deep); z-index: 50; overflow-y: auto; padding: 0 12px 12px;
  transform: translateX(-100%); transition: transform 0.26s var(--ease); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { height: var(--top); display: flex; align-items: center; gap: 6px; margin: 0 -12px 8px; padding: 0 14px; border-bottom: 1px solid var(--border); }

/* ---------- kerangka toko: menu atas, isi di tengah (tanpa sidebar) ---------- */
.store .main { padding: var(--top) 0 0; }
/* Desktop: isi selebar layar (tanpa ruang kosong kiri-kanan). Halaman baca
   (profil, halaman hukum) tetap sempit supaya teksnya nyaman dibaca. */
.store .view { width: 100%; padding: 22px 32px 56px; }
.store .page:not(.narrow), .store .pdp { max-width: none; }
/* Desktop: satu baris. Logo | menu utama berikon tepat di kiri kolom cari
   (keduanya di tengah sisa ruang) | tombol kanan. */
@media (min-width: 1180px) {
  .store .topbar { padding: 0 32px; gap: 16px; }
  .store .top-nav { display: flex; margin-left: auto; gap: 4px; }
  .store .topbar-center { flex: 0 1 560px; min-width: 220px; margin-right: auto; }
  .store .topbar .menu-btn { display: none; }
}
/* Laptop kecil: satu baris tetap muat — Chat Admin cukup ikon, menu dirapatkan. */
@media (min-width: 1180px) and (max-width: 1439px) {
  .store .topbar { gap: 12px; }
  .store .top-nav { gap: 2px; }
  .store .top-link { padding: 0 12px 0 10px; }
  .store .topbar-center { min-width: 200px; }
  .store .chat-btn { width: 38px; padding: 0; justify-content: center; }
  .store .chat-label { display: none; }
}
@media (min-width: 1180px) and (max-width: 1299px) {
  .store .logo-text small { display: none; }
}

/* bilah bawah (ponsel) */
.bottom-nav { display: none; }

/* ---------- pengumuman ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; background: var(--bg-raised); margin-bottom: 16px; border: 1px solid var(--border); }
.notice .ic { margin-top: 1px; }
.notice.warn { background: var(--gold-soft); color: #ffe2a3; border-color: rgba(244, 191, 79, 0.22); }
.notice.info { background: var(--primary-soft); color: #e2d2fb; border-color: rgba(129, 64, 220, 0.28); }
.notice.ok { background: var(--ok-soft); color: #e6d8ff; border-color: rgba(151, 101, 240, 0.3); }
.notice.err { background: var(--danger-soft); color: #ffc7c7; border-color: rgba(240, 84, 84, 0.28); }
.notice p { margin: 0; }
.notice b { color: inherit; }

/* ---------- chip kategori + urutkan ---------- */
/* margin-bottom: ruang kosong di bawah bilah (yang menempel saat digulir) supaya
   kartu baris pertama yang terangkat saat disorot tidak tertutup bilah ini. */
.shop-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: var(--top); z-index: 20; background: var(--bg); padding: 10px 0 8px; margin: -4px 0 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--border-strong); background: var(--chip); color: var(--text); font-weight: 600; white-space: nowrap; flex: 0 0 auto; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.chip.active { background: var(--primary-grad); border-color: transparent; color: #fff; box-shadow: var(--primary-rim); }
@media (hover: hover) { .chip:not(.active):hover { background: var(--chip-hover); border-color: var(--tint-line); } }
.sort-box { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--text-2); font-size: 13px; }
.sort-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.sort-lbl .ic { color: var(--text-3); }
.sort-box .fsel-btn { min-width: 178px; }

/* ---------- hero ---------- */
.hero { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 18px; background: linear-gradient(120deg, #2a1052 0%, #140a26 50%, #050505 100%); min-height: 190px; display: flex; align-items: flex-end; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 72%); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.hero-body { position: relative; z-index: 1; padding: 28px; max-width: 760px; }
.hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; letter-spacing: -0.6px; }
.hero p { margin: 0; color: #e6e6e6; font-size: 15px; }

/* ---------- grid produk ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 16px; }
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; color: var(--text); contain: layout paint; box-shadow: var(--rim);
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--lift); }
  .thumb img, .cs-slide img { transition: transform 0.4s var(--ease); }
  .card:hover .thumb img, .card:hover .cs-slide img { transform: scale(1.05); }
}
.card-media { position: relative; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--chip); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.card-cat { font-size: 11px; font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-btn {
  position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(10, 10, 10, 0.78); color: #fff; display: grid; place-items: center; transition: color 0.15s, background-color 0.15s;
}
.fav-btn .ic { width: 18px; height: 18px; }
.fav-btn.on { color: var(--accent); }
.fav-btn.on .ic { fill: currentColor; }
.fav-btn.pop .ic { animation: popIn 0.4s var(--ease); }
@media (hover: hover) { .fav-btn:hover { background: rgba(10, 10, 10, 0.95); } }
.card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.card-title { font-size: 15px; font-weight: 700; line-height: 21px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.card-link { color: inherit; text-decoration: none; }
a.card-link:hover .card-title { color: #fff; }
.card-tagline { color: var(--text-2); font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { color: var(--text-2); font-size: 12.5px; line-height: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.card-meta .dot::before { content: "·"; margin: 0 6px; color: var(--text-3); }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.price-stack { display: flex; flex-direction: column; min-width: 0; }
.price-stack .price { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.price-stack .sub { font-size: 12px; color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; }
.price { font-weight: 700; color: var(--text); }
.price-old { color: var(--text-3); text-decoration: line-through; font-size: 12px; }
.cart-add { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--tint-line); background: rgba(129, 64, 220, 0.24); color: var(--primary-text); display: grid; place-items: center; flex: 0 0 auto; transition: background-color 0.15s, color 0.15s; }
.cart-add.in { background: var(--primary-grad); color: #fff; }
.cart-add:disabled { opacity: 0.4; cursor: not-allowed; }
.cart-add:active { transform: scale(0.94); }
.cart-add .ic { width: 19px; height: 19px; }
@media (hover: hover) { .cart-add:not(:disabled):hover { background: var(--primary); color: #fff; } }

/* gambar kartu produk yang bisa digeser (lebih dari satu gambar) */
.cs-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.cs-track::-webkit-scrollbar { display: none; }
.cs-slide { position: relative; display: block; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.cs-slide img { width: 100%; height: 100%; object-fit: cover; }
.cs-nav {
  position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; padding: 0;
  background: rgba(10, 10, 10, 0.8); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s, background-color 0.15s;
}
.cs-nav .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.cs-nav.prev { left: 8px; }
.cs-nav.next { right: 8px; }
.card:hover .cs-nav, .cs-nav:focus-visible { opacity: 1; }
.cs-nav:hover { background: var(--primary); }
.cs-dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.cs-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); }
.cs-dots i.on { width: 14px; background: #fff; }
@media (hover: none) { .cs-nav { display: none; } }

/* label (HOT, BARU, ...) — satu kotak emas di depan nama */
.label-box {
  display: inline-block; vertical-align: 2px; margin-right: 6px; padding: 1px 7px; border-radius: 6px;
  background: var(--gold); color: #2d1f00;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; line-height: 17px; white-space: nowrap;
}
.label-box.lg { font-size: 12px; line-height: 20px; padding: 2px 9px; vertical-align: 4px; }

.star1 { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 700; }
.star1 .ic { width: 14px; height: 14px; color: var(--gold); }
.star1 small { color: var(--text-2); font-weight: 400; font-size: 12.5px; }
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--gold); vertical-align: -3px; }
.stars .ic { width: 16px; height: 16px; }
.stars.lg .ic { width: 22px; height: 22px; }
.empty { text-align: center; padding: 56px 16px; color: var(--text-2); }
.empty .ic { width: 56px; height: 56px; stroke-width: 1.2; color: var(--text-3); margin: 0 auto 12px; }
.empty h2 { color: var(--text); margin: 0 0 6px; font-size: 20px; }
.empty .btn { margin-top: 14px; }

/* kerangka skeleton: berdenyut lewat opacity (GPU), bukan geser latar */
.skel { background: #1c1c1c; border-radius: 8px; animation: pulse 0.9s ease-in-out infinite alternate; }
.card.skel-card { padding: 0 0 14px; gap: 10px; }
.card.skel-card .skel { margin: 0 14px; }
.card.skel-card .thumb { margin: 0; border-radius: 0; }

/* ---------- halaman produk ---------- */
.pdp { max-width: 1240px; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; margin: 0 0 16px; transition: color 0.15s; }
.back-link:hover { color: var(--text); text-decoration: none; }
.back-link .ic { width: 18px; height: 18px; }
/* Galeri & ulasan di kiri, info di kanan. Di layar sempit urutannya
   galeri -> info -> ulasan (grid area, tanpa menggandakan elemen). */
.pdp-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "gal info" "rev info"; column-gap: 32px; row-gap: 22px; align-items: start;
}
.pdp-gal { grid-area: gal; min-width: 0; display: grid; gap: 10px; }
.pdp-info { grid-area: info; min-width: 0; display: grid; gap: 14px; }
.pdp-rev { grid-area: rev; min-width: 0; }
.gal-main { position: relative; border-radius: 16px; overflow: hidden; background: #0a0a0a; border: 1px solid var(--border); }
.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0a; }
.media > * { width: 100%; height: 100%; border: 0; object-fit: contain; }
.media .thumb { height: 100%; aspect-ratio: auto; }
.gal-nav {
  position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 0; z-index: 2;
  background: rgba(10, 10, 10, 0.78); color: #fff; display: grid; place-items: center; transition: background-color 0.15s;
}
.gal-nav:hover { background: var(--primary); }
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }
.gal-nav .ic { width: 21px; height: 21px; stroke-width: 2.2; }
.gal-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(10, 10, 10, 0.82); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.gallery { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.gallery button { flex: 0 0 auto; width: 104px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--chip); opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; }
.gallery button:hover { opacity: 0.9; }
.gallery button.active { border-color: var(--primary); opacity: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .vid { display: grid; place-items: center; height: 100%; color: var(--text); }
.pdp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.cat-pill.plain { background: var(--chip); color: var(--text); }
.share-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font-weight: 600; padding: 6px 8px; border-radius: 8px; transition: color 0.15s, background-color 0.15s; }
.share-link:hover { color: var(--text); background: var(--hover); }
.share-link .ic { width: 18px; height: 18px; }
.pdp-title { font-size: 28px; line-height: 1.22; font-weight: 800; margin: 0; letter-spacing: -0.5px; }
.pdp-tagline { margin: -6px 0 0; color: var(--text-2); font-size: 15px; }
.price-card { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 22px; padding: 20px 22px; display: grid; gap: 14px; container-type: inline-size; }
/* Kotak harga sempit: harga di atas, tombol selebar kotak (Beli Sekarang memanjang). */
@container (max-width: 560px) {
  .price-actions { width: 100%; }
  .price-actions .btn { flex: 1; min-width: 0; }
}
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.price-block small { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 2px; }
.price-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-main .p-idr { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.6px; }
.price-main .p-usd { font-size: 24px; font-weight: 800; color: var(--primary-text); letter-spacing: -0.4px; }
.price-main .or { color: var(--text-2); font-size: 14px; }
.price-main .price-old { font-size: 14px; }
.price-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fav-lg { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text); display: grid; place-items: center; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.fav-lg:hover { background: var(--hover); }
.fav-lg.on { color: var(--accent); border-color: rgba(240, 84, 84, 0.45); background: var(--accent-soft); }
.fav-lg.on .ic { fill: currentColor; }
.fav-lg.pop .ic { animation: popIn 0.4s var(--ease); }
.cart-lg.on { color: var(--primary-text); border-color: rgba(146, 84, 238, 0.5); background: var(--primary-soft); }
.cart-lg.pop .ic { animation: popIn 0.4s var(--ease); }
/* Kotak harga produk: harga di kiri, favorit di kanan atas; di bawahnya keranjang + Beli Sekarang. */
.price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.price-head .price-block { min-width: 0; }
.fav-lg.price-fav { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; }
.fav-lg.price-fav .ic { width: 20px; height: 20px; }
.buy-row { display: flex; align-items: center; gap: 10px; }
.buy-row .btn-buy { flex: 1 1 auto; min-width: 0; }
.buy-row .cart-lg { flex: 0 0 auto; }
/* Beli Sekarang: emas, "sudah dimiliki" tetap ungu. */
.btn-buy:not(.owned) { background: var(--primary-grad); color: #fff; font-weight: 800; box-shadow: var(--primary-rim); }
.btn-buy:not(.owned):hover { background: var(--primary-grad-hover); }
.btn-buy:disabled { background: var(--chip); color: var(--text-2); }
/* Yang didapat pembeli — dua baris singkat di bawah tombol beli. */
.buy-perks { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.buy-perks li { display: flex; gap: 8px; align-items: flex-start; }
.buy-perks .ic { width: 16px; height: 16px; color: var(--primary-text); margin-top: 2px; }
.pdp-links { display: flex; align-items: center; gap: 2px; }
.share-link.icon-only { padding: 7px; }
.changelog { margin-top: 16px; }
.changelog summary { cursor: pointer; font-weight: 700; }
.changelog-body { margin-top: 10px; }
/* Rating · terjual · stok: satu kotak dengan tiga kolom. */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 20px; overflow: hidden; }
.stat { padding: 14px 10px; text-align: center; display: grid; justify-items: center; gap: 2px; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat .ic { color: var(--primary-text); width: 20px; height: 20px; }
.stat b { font-size: 16px; }
.stat small { color: var(--text-2); font-size: 12px; }
.stat.off .ic { color: var(--accent); }
.desc-card, .side-card { background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 20px; padding: 20px 22px; }
.desc-card h2, .side-card h2 { font-size: 17px; margin: 0 0 10px; }
.desc-card h3.sub { font-size: 15px; margin: 18px 0 8px; }
.desc-meta { color: var(--text-2); font-size: 13px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.desc-body { color: #d6d6d6; }
/* Deskripsi + fitur yang panjang dipendekkan; "Baca selengkapnya" membukanya. */
.desc-more { position: relative; overflow: hidden; transition: max-height 0.3s var(--ease); }
.desc-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; background: linear-gradient(rgba(18, 18, 18, 0), var(--bg-raised) 90%); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.desc-more.clamp::after { opacity: 1; }
.more-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; height: 34px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(146, 84, 238, 0.45); background: var(--primary-soft); color: var(--primary-text); font-weight: 700; font-size: 13px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.more-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.more-btn .ic { transition: transform 0.25s var(--ease); }
.more-btn.up .ic { transform: rotate(180deg); }
.tr-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--text-3); font-size: 12px; }
.tr-note .ic { flex: 0 0 auto; }
.md h2, .md h3 { font-size: 16px; margin: 14px 0 6px; color: var(--text); }
.md h2:first-child, .md h3:first-child { margin-top: 0; }
.md p { margin: 0 0 10px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md code { background: rgba(255, 255, 255, 0.1); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.md a { word-break: break-word; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; }
.feature-list .ic { color: var(--primary-text); width: 19px; height: 19px; margin-top: 1px; }
.section-title { font-size: 19px; font-weight: 800; margin: 28px 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; letter-spacing: -0.2px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }
.more-products { margin-top: 40px; }

/* ---------- halaman iklan (/ad/<id>) ---------- */
.adp-grid { grid-template-rows: auto; grid-template-areas: "gal info"; }
.ads-pill { gap: 6px; }
.ads-pill .ic { width: 14px; height: 14px; }
.adp-sponsor { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--border); }
.adp-sponsor .grow { flex: 1; min-width: 0; display: grid; }
.adp-sponsor small { color: var(--text-2); font-size: 12px; }
.adp-sponsor b { font-size: 16px; word-break: break-word; }
.adp-host { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #fff; min-width: 0; }
.adp-host span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-host .ic { color: var(--primary-text); flex: 0 0 auto; }
.adp-visit-card .price-block { min-width: 0; flex: 1 1 200px; }
.adp-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.adp-note .ic { margin-top: 2px; flex: 0 0 auto; }
.adp-desc { margin: 0; white-space: pre-wrap; word-break: break-word; color: #d6d6d6; }
.adp-owner { margin: 0; align-items: center; flex-wrap: wrap; }
/* Teks minimal ~220px; kalau tidak muat, tombol turun ke baris sendiri (sejajar teks). */
.adp-owner .grow { flex: 1 1 220px; min-width: 0; }
.adp-owner p { margin: 2px 0 0; font-size: 13px; }
.adp-owner-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.adp-owner .grow + .adp-owner-acts { margin-left: auto; }

/* ---------- laporkan ---------- */
.report-target { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 600; color: var(--text); }
.report-target .ic { color: var(--primary-text); flex: 0 0 auto; }
.report-target span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-opts { display: grid; gap: 6px; }
.report-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.report-opt:hover { background: var(--hover); }
.report-opt.on { border-color: rgba(240, 84, 84, 0.6); background: var(--accent-soft); }
.report-opt input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.report-done { padding: 18px 0 6px; }

/* ulasan — judul lalu satu kartu per ulasan (avatar, nama, tanggal, bintang di kanan) */
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.rev-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.2px; display: flex; align-items: center; gap: 10px; }
.rev-count { font-size: 12px; font-weight: 800; color: var(--primary-text); background: var(--primary-soft); padding: 2px 9px; border-radius: 999px; letter-spacing: 0; }
.rev-note { margin: -6px 0 12px; }
.review-list { display: grid; gap: 10px; }
.review { padding: 16px 18px; border-radius: 18px; background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--rim); }
.review-head { display: flex; align-items: flex-start; gap: 12px; }
.review-head > .avatar { width: 40px; height: 40px; }
.rev-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rev-line { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; min-width: 0; }
.rev-date { color: var(--text-3); font-size: 12px; }
.rev-stars { flex: 0 0 auto; margin-top: 3px; }
.review-body { white-space: pre-wrap; word-break: break-word; margin: 10px 0 0; }
.empty-rev { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.empty-rev .ic { color: var(--gold); flex: 0 0 auto; }
.empty-rev p { margin: 0; }
.reply { display: flex; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--primary-soft); }
.reply .avatar { width: 24px; height: 24px; }
.owner-badge { background: var(--primary); color: #fff; border-radius: 12px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.star-input { display: inline-flex; gap: 4px; }
.star-input button { border: 0; background: transparent; padding: 2px; color: var(--text-3); transition: color 0.12s; }
.star-input button.on { color: var(--gold); }
.star-input .ic { width: 28px; height: 28px; }
.review-form { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; display: grid; gap: 12px; }

/* ---------- halaman umum ---------- */
.page { max-width: 1180px; margin: 0 auto; }
.page.narrow { max-width: 780px; }
.page-title { font-size: 26px; font-weight: 800; margin: 4px 0 20px; letter-spacing: -0.4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title .count-pill { font-size: 13px; font-weight: 700; color: var(--primary-text); background: var(--primary-soft); padding: 2px 10px; border-radius: 999px; }
.panel { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 20px; padding: 20px; margin-bottom: 16px; }
.panel h2 { font-size: 16px; margin: 0 0 12px; }
.list { display: grid; gap: 10px; }
.row-card { display: flex; gap: 16px; align-items: center; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 12px; color: var(--text); text-decoration: none; }
a.row-card:hover { background: var(--bg-elev); text-decoration: none; }
.row-card .thumb { width: 160px; flex: 0 0 160px; border-radius: 10px; }
.row-card .grow { flex: 1; min-width: 0; }
.row-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.row-card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: var(--chip); color: var(--text-2); white-space: nowrap; }
.status.ok { background: var(--ok-soft); color: var(--ok-text); }
.status.wait { background: var(--yellow-soft); color: var(--gold); }
.status.bad { background: var(--danger-soft); color: #ff9a9a; }
.status.info { background: var(--info-soft); color: var(--info-text); }
.status .ic { width: 13px; height: 13px; margin-left: -2px; }
/* Titik "langsung": berdenyut lewat opacity saja (tanpa repaint bayangan). */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1s ease-in-out infinite alternate; }
.acct { display: flex; align-items: center; gap: 14px; }
.acct b { display: block; font-size: 16px; }
.acct .grow { flex: 1; min-width: 0; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.step { display: flex; gap: 14px; padding: 14px; border-radius: 12px; background: var(--bg-elev); align-items: center; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.step.done .step-num { background: var(--primary-grad); color: #fff; }
.step .grow { flex: 1; min-width: 0; }
.step b { display: block; }

/* kartu kotak (Produk Saya & Riwayat Pembelian) */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile {
  position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden; color: var(--text); text-decoration: none; min-width: 0;
  contain: layout paint; box-shadow: var(--rim); transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
a.tile:hover, .tile:hover { text-decoration: none; }
@media (hover: hover) { a.tile:hover, .tile:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--lift); } }
.tile-thumb { position: relative; flex: 1 1 auto; min-height: 70px; overflow: hidden; background: var(--chip); display: block; }
.tile-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.tile-badge { position: absolute; left: 10px; top: 10px; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; right: 10px; }
.tile-badge .label-box { margin: 0; }
.tile-more { position: absolute; right: 10px; bottom: 10px; z-index: 1; background: rgba(10, 10, 10, 0.84); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.tile-body { flex: 0 0 auto; padding: 12px 14px 14px; display: grid; gap: 4px; }
.tile-body h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tile-body h3 a { color: inherit; }
.tile-sub { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tile-actions { display: flex; gap: 6px; margin-top: 6px; }
.tile-actions .btn { flex: 1; min-width: 0; padding: 0 10px; }
.tile-actions .btn.icon-only { flex: 0 0 auto; width: 34px; padding: 0; }

/* keranjang */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cart-list { display: grid; gap: 10px; }
.cart-item { display: flex; gap: 14px; align-items: center; background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 18px; padding: 12px; transition: transform 0.22s var(--ease), opacity 0.22s; }
.cart-item.leaving { opacity: 0; transform: translateX(40px); }
.cart-item .thumb { width: 132px; flex: 0 0 132px; border-radius: 10px; }
.cart-item .grow { flex: 1; min-width: 0; }
.cart-item h3 { margin: 0 0 4px; font-size: 15px; }
.cart-item h3 a { color: inherit; }
.cart-item .price-col { text-align: right; display: grid; gap: 2px; }
.cart-item.bad { border-color: rgba(240, 84, 84, 0.35); }
.summary-card { position: sticky; top: calc(var(--top) + 16px); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--rim); border-radius: 20px; padding: 18px; display: grid; gap: 12px; }
.summary-card h2 { margin: 0; font-size: 17px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.sum-line b { color: var(--text); }
.sum-line.total { border-top: 1px solid var(--border-strong); padding-top: 12px; font-size: 16px; color: var(--text); }
.sum-line.total b { font-size: 20px; color: #fff; }

.timeline { display: flex; gap: 8px; margin: 16px 0; }
.tl { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); }
.tl i { display: block; height: 4px; border-radius: 2px; background: var(--chip); margin-bottom: 6px; }
.tl.on { color: var(--text); }
.tl.on i { background: var(--primary-grad); }
.copy-row { display: flex; gap: 8px; align-items: center; background: var(--input); border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px 4px 4px 12px; }
.copy-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
.big-status { text-align: center; padding: 12px 0 4px; }
.big-status .ic { width: 52px; height: 52px; stroke-width: 1.6; margin: 0 auto 8px; }
.big-status h2 { margin: 0 0 6px; font-size: 22px; }
.sum-table { width: 100%; border-collapse: collapse; }
.sum-table td { padding: 6px 0; }
.sum-table td:last-child { text-align: right; }
.sum-table tr.sub td { color: var(--text-2); font-size: 13px; padding: 3px 0; }
.sum-table tr.total td { border-top: 1px solid var(--border-strong); padding-top: 10px; font-weight: 800; font-size: 16px; }
.order-items { display: grid; gap: 8px; margin-top: 14px; }
.order-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; background: var(--bg-elev); }
.order-item .thumb { width: 84px; flex: 0 0 84px; border-radius: 8px; }
.order-item .grow { flex: 1; min-width: 0; }
.order-item b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal { max-width: 800px; }
.order-head { display: flex; gap: 16px; align-items: center; }
.order-head .thumb { width: 120px; flex: 0 0 120px; border-radius: 10px; }
.order-head .grow { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.order-head h3 { margin: 0; font-size: 16px; line-height: 1.35; word-break: break-word; }
.order-head .card-meta { gap: 2px; max-width: 100%; flex-wrap: nowrap; }
.order-head .oid { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl.cur { color: var(--gold); }
.tl.cur i { background: var(--gold); animation: pulse 0.9s ease-in-out infinite alternate; }
.btn-row.center { justify-content: center; }

/* ---------- PayPal manual ---------- */
.pay-ic { width: 58px; height: 34px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; padding: 0 6px; }
.pay-ic .pay-logo { height: 18px; }
.pp-note { margin: 4px 0 0; font-size: 13px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-head h2 { margin: 0; }
.pp-deadline { display: inline-flex; align-items: center; gap: 6px; }
.pp-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.pp-step { display: flex; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--border); }
.pp-num { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-grad); color: #fff; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.pp-step-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.pp-step-main > b { font-size: 15px; line-height: 30px; }
.pp-step-main > p { margin: 0; font-size: 13px; }
.pp-step-main > .btn { justify-self: start; }
.pp-pay { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.pp-pay.no-qr { grid-template-columns: minmax(0, 1fr); }
.pp-qr { margin: 0; background: #fff; border-radius: 14px; padding: 10px; display: grid; gap: 6px; justify-items: center; }
.pp-qr img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; }
.pp-qr figcaption { color: #333; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.pp-pay-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.pp-pay-info .field { margin: 0; }
.pp-pay-info .copy-row { margin-top: 0 !important; }
.pp-amount { padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(244, 191, 79, 0.32); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-amount small { color: var(--text-2); font-weight: 600; }
.pp-amount b { font-size: 24px; color: var(--gold); letter-spacing: -0.4px; }
.pp-details-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; min-width: 0; }
.pp-details { margin: 0; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--input); border: 1px solid var(--border-strong); color: #d6d6d6; font: 12.5px/1.65 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.pp-confirm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.pp-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 12px; }
.pp-proof-grid .field { margin-bottom: 0; }
.pp-proof-grid .label { display: flex; align-items: center; gap: 4px; }
.input.file-in { padding-top: 8px; height: auto; min-height: 42px; }
.pp-update { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--bg-elev); }
.pp-update summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pp-update[open] summary { margin-bottom: 12px; }
.pp-update > .btn { margin-top: 12px; }
.pp-kv { margin: 0 auto 14px; max-width: 480px; }
.wait-ic { color: var(--gold); }
.bad-ic { color: #ff9a9a; }
.big-status .status { margin-bottom: 8px; }
.live-dot.gold { background: var(--gold); }

/* ---------- modal ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.72); display: grid; place-items: center; padding: 16px; overflow-y: auto; animation: fadeIn 0.16s both; }
.modal { width: 100%; min-width: 0; max-width: 480px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-lg); max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: slideUp 0.2s var(--ease) both; }
.modal.wide { max-width: 660px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 8px 24px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 8px 24px 16px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; flex-wrap: wrap; }
.pay-opt { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--border-strong); cursor: pointer; margin-bottom: 8px; transition: background-color 0.15s, border-color 0.15s; }
.pay-opt:hover { background: var(--hover); }
.pay-opt.active { border-color: var(--tint-line); background: var(--tint); }
.pay-opt input { accent-color: var(--primary); width: 18px; height: 18px; }
.pay-opt .grow { flex: 1; min-width: 0; }
.pay-opt b { display: block; }
.pay-opt small { color: var(--text-2); }
.pay-opt.off { opacity: 0.5; cursor: not-allowed; }
.coupon-row { display: flex; gap: 8px; }
.co-items { display: grid; gap: 8px; margin-bottom: 14px; }
.co-item { display: flex; gap: 12px; align-items: center; }
.co-item .thumb { width: 88px; flex: 0 0 88px; border-radius: 8px; }
.co-item .grow { flex: 1; min-width: 0; }
.co-item b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* bagikan */
.share-prev { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--bg-elev); margin-bottom: 16px; }
.share-prev .thumb { width: 96px; flex: 0 0 96px; border-radius: 8px; }
.share-prev .grow { min-width: 0; }
.share-prev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.share-opt { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-weight: 600; font-size: 12px; text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.share-opt:hover { text-decoration: none; border-color: var(--border-strong); background: #222; }
.share-opt i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.share-opt i .ic { width: 21px; height: 21px; }
.share-opt.copy i { background: var(--primary); }
.share-opt.wa i { background: #6a2fc4; }
.share-opt.copied i { background: var(--primary-hover); }
.share-opt.dc i { background: var(--discord); }
.share-opt.fb i { background: #1877f2; }

/* ---------- toast ---------- */
/* Hanya galat & peringatan — kartu gelap yang menyatu dengan tema toko. */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 140; display: grid; gap: 10px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast {
  position: relative; overflow: hidden; pointer-events: auto; display: flex; gap: 12px; align-items: center; min-width: 280px; max-width: 460px;
  padding: 12px 10px 12px 14px; border-radius: 14px; background: #1a1a1a; color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); animation: slideUp 0.22s var(--ease) both; font-size: 13.5px; line-height: 1.45;
}
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.toast.err::before { background: var(--accent); }
.toast-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--gold-soft); color: var(--gold); }
.toast.err .toast-ic { background: var(--danger-soft); color: #ff8f8f; }
.toast-ic .ic { width: 18px; height: 18px; }
.toast .grow { flex: 1; }
.toast-x { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; flex: 0 0 auto; transition: background-color 0.15s, color 0.15s; }
.toast-x:hover { background: var(--hover-strong); color: var(--text); }
.toast.ok::before { background: var(--primary); }
.toast.ok .toast-ic { background: var(--primary-soft); color: var(--primary-text); }
.toast.out { opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; }

/* ---------- footer (ringkas) ---------- */
/* Satu baris: merek | tautan penting | ikon sosial. content-visibility: tidak
   digambar sebelum mendekati layar. */
.site-footer { margin: 12px -28px 0; background: var(--bg-deep); border-top: 1px solid var(--border); content-visibility: auto; contain-intrinsic-size: auto 160px; }
.store .site-footer { margin: 0; }
.footer-inner { padding: 22px 32px 18px; display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.f-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.f-brand .logo { padding: 0; height: auto; flex: 0 0 auto; }
.f-brand p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.5; max-width: 420px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
.f-links a { color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 0.15s; }
.f-links a:hover { color: #fff; text-decoration: none; }
.f-social { display: flex; align-items: center; gap: 8px; }
.soc-link { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--border-strong); color: #fff; transition: background-color 0.15s, border-color 0.15s; }
.soc-link .ic { width: 17px; height: 17px; }
.soc-link:hover { text-decoration: none; border-color: transparent; }
.soc-tiktok:hover { background: #111; }
.soc-youtube:hover { background: #ff0033; }
.soc-roblox:hover { background: #393b3d; }
.soc-discord:hover { background: var(--discord); }
.soc-instagram:hover { background: #c13584; }
.soc-facebook:hover { background: #1877f2; }
.soc-x:hover { background: #000; }
.pay-logo { display: block; height: 20px; width: auto; max-width: 100%; overflow: visible; }
.pay-logo.pay-qris { height: 22px; }
/* Baris paling bawah: hak cipta | halaman hukum + bahasa. */
.footer-bottom { padding: 12px 32px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; color: var(--text-3); font-size: 12px; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.footer-legal a { color: var(--text-2); }
.footer-legal a:hover { color: #fff; text-decoration: none; }
.f-lang { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--chip); color: var(--text-2); font-size: 12px; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.f-lang:hover { background: var(--chip-hover); color: var(--text); }

/* ---------- umum: ketuk, disalin ---------- */
@keyframes tapPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cart-btn.pop .ic, .btn.pop, .icon-btn.pop, .share-opt.pop i, .star-input button.pop { animation: tapPop 0.3s var(--ease); }
.btn.copied { background: var(--primary-soft); color: var(--primary-text); }
.icon-btn.copied { background: var(--primary-soft); color: var(--primary-text); }
.modal-foot .grow { flex: 1 1 auto; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.counter { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.input.invalid { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* ---------- pilihan (dropdown) bergaya toko ---------- */
.fsel { position: relative; display: inline-flex; vertical-align: middle; min-width: 0; }
.fsel.block { display: flex; width: 100%; }
.fsel-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; padding: 0 !important; margin: 0 !important; }
.fsel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; height: 36px; padding: 0 12px 0 14px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--chip); color: var(--text); font-weight: 600; font-size: 13px; text-align: left;
  white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.fsel-btn:hover { border-color: rgba(146, 84, 238, 0.6); }
.fsel.open .fsel-btn, .fsel-btn:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.fsel-btn.as-input { height: 44px; border-radius: 12px; background: var(--input); font-weight: 500; font-size: 14px; padding: 0 12px; }
.fsel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fsel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 7px; }
.fsel-label .ic { color: var(--primary-text); }
.fsel-caret { width: 16px; height: 16px; color: var(--text-2); transition: transform 0.2s var(--ease); }
.fsel.open .fsel-caret { transform: rotate(180deg); color: var(--primary-text); }
.fsel-menu {
  position: fixed; z-index: 150; max-height: min(320px, 60vh); max-width: min(440px, calc(100vw - 16px)); overflow-y: auto; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: fselIn 0.14s ease-out both; transform-origin: top center;
}
.fsel-menu.up { transform-origin: bottom center; }
@keyframes fselIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fsel-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px 8px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-2); text-align: left; font-weight: 500; font-size: 13.5px; transition: background-color 0.1s, color 0.1s;
}
.fsel-opt .grow { flex: 1; min-width: 0; }
.fsel-opt > .ic:first-child { color: var(--text-3); }
.fsel-opt.active { background: var(--hover-strong); color: var(--text); }
.fsel-opt.on { color: #fff; font-weight: 700; background: var(--primary-soft); }
.fsel-opt.on > .ic:first-child { color: var(--primary-text); }
.fsel-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.fsel-check { width: 16px; height: 16px; color: var(--primary-text); opacity: 0; }
.fsel-opt.on .fsel-check { opacity: 1; }
.fsel-menu::-webkit-scrollbar { width: 8px; }
.fsel-menu::-webkit-scrollbar-thumb { border-color: var(--bg-elev); }

/* ---------- lonceng notifikasi ---------- */
.bell-btn { position: relative; }
.notif-panel { width: 380px; min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 90px)); }
.notif-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.notif-head .ic { color: var(--primary-text); }
.notif-head b { font-size: 15px; }
.notif-list { overflow-y: auto; padding: 6px; }
.notif-item { display: flex; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background-color 0.12s; position: relative; }
a.notif-item:hover { background: var(--hover); text-decoration: none; }
.notif-item.unread { background: rgba(129, 64, 220, 0.1); }
.notif-item.unread::after { content: ""; position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-hover); }
.notif-item .grow { flex: 1; min-width: 0; padding-right: 14px; }
.notif-item b { display: block; font-size: 13.5px; }
.notif-item p { margin: 2px 0 3px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; word-break: break-word; }
.notif-item small { color: var(--text-3); font-size: 11.5px; }
.notif-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ok-soft); color: var(--ok-text); }
.notif-ic .ic { width: 18px; height: 18px; }
.notif-ic.warn { background: var(--gold-soft); color: var(--gold); }
.notif-ic.bad { background: var(--danger-soft); color: #ff9a9a; }
.notif-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 18px; color: var(--text-2); }
.notif-empty > .ic { width: 40px; height: 40px; color: var(--text-3); stroke-width: 1.4; }
.notif-empty p { margin: 0 0 6px; font-size: 13px; }

/* ---------- Free product: kartu biru + label & pita sendiri ---------- */
.card.free-prod { border-color: var(--free-line); background: linear-gradient(180deg, #172540 0%, #131a2a 100%); }
.card.free-prod .card-body { background: linear-gradient(180deg, rgba(56, 160, 255, 0.14) 0%, rgba(56, 160, 255, 0) 70%); }
@media (hover: hover) {
  .card.free-prod:hover { box-shadow: 0 18px 40px -14px rgba(56, 160, 255, 0.7), 0 0 0 1px rgba(110, 190, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  .card.free-prod .cart-add:hover { background: var(--free-grad); color: #fff; }
}
.card.free-prod .card-cat { color: var(--free-text); }
.card.free-prod .cart-add { background: var(--free-soft); border-color: var(--free-line); color: var(--free-text); }
.price-free { color: var(--free-text); text-transform: uppercase; letter-spacing: 0.4px; }
/* Pita di pojok gambar kartu. */
.free-ribbon {
  position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px;
  border-radius: 999px; background: var(--free-grad); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.6px;
  box-shadow: 0 4px 14px rgba(56, 160, 255, 0.5); pointer-events: none;
}
.free-ribbon .ic { width: 13px; height: 13px; stroke-width: 2.2; }
/* Label di depan nama: pil biru bergaris (bukan kotak emas). */
.free-label {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 2px; margin-right: 6px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: var(--free-soft); border: 1px solid var(--free-line); color: var(--free-text);
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; line-height: 16px; white-space: nowrap;
}
.free-label .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.free-label.lg { font-size: 12px; line-height: 20px; padding: 2px 10px 2px 8px; vertical-align: 4px; }
.free-label.lg .ic { width: 14px; height: 14px; }

/* Beranda: bagian "Produk Gratis" di bawah produk berbayar, dipisah sekat biru. */
.free-sec { margin-top: 36px; }
.free-sec.first { margin-top: 4px; }
.free-sec-head { position: relative; padding-top: 22px; margin-bottom: 16px; }
.free-sec-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(80, 170, 255, 0.7), rgba(91, 108, 255, 0.35) 45%, rgba(91, 108, 255, 0) 100%); }
.free-sec.first .free-sec-head { padding-top: 0; }
.free-sec.first .free-sec-head::before { display: none; }
.section-title.free-sec-title { margin: 0 0 4px; gap: 10px; }
.free-sec-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--free-grad); box-shadow: 0 6px 18px -6px rgba(56, 160, 255, 0.7); }
.free-sec-ic .ic { width: 18px; height: 18px; }
.free-sec-count { font-size: 12px; font-weight: 800; color: var(--free-text); background: var(--free-soft); border: 1px solid var(--free-line); padding: 1px 9px; border-radius: 999px; letter-spacing: 0; }
.free-sec-desc { margin: 0; padding-left: 42px; color: var(--text-2); font-size: 13px; }

/* ---------- Free product: kotak unduh dengan 3 langkah ----------
   Halaman produk memakai aksen ungu seperti UI lainnya; biru hanya di kartu. */
.pdp-title .free-label { background: var(--primary-soft); border-color: var(--tint-line); color: var(--primary-text); }
.free-card { border-color: rgba(160, 100, 255, 0.32); background: linear-gradient(180deg, var(--tint) 0%, rgba(129, 64, 220, 0) 45%), var(--panel); }
.price-main .p-free { background: linear-gradient(135deg, #d9c2ff 0%, #a66bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: 0.5px; }
.free-lead { margin: -4px 0 0; color: var(--text-2); font-size: 13px; }
.free-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.free-step { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--border); }
.free-step.done { border-color: var(--tint-line); background: var(--tint); }
.free-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.free-ic .ic { width: 19px; height: 19px; }
.free-ic.youtube { background: #ff0033; }
.free-ic.tiktok { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.free-ic.discord { background: var(--discord); }
.free-step .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.free-step b { font-size: 14px; line-height: 1.3; }
.free-step small { color: var(--text-3); font-size: 11.5px; line-height: 1.35; }
.free-go { flex: 0 0 auto; }
.free-go .ic { width: 15px; height: 15px; }
.free-go.busy { pointer-events: none; opacity: 0.7; }
.free-ok { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--primary-text); font-weight: 700; font-size: 13px; }
.buy-row .fav-lg { flex: 0 0 auto; }
.free-hint { margin: -4px 0 0; }

/* ---------- Chat Admin ---------- */
/* Tombol di topbar (kiri tombol masuk / foto akun) + titik balasan belum dibaca. */
.chat-btn {
  position: relative; height: 38px; padding: 0 15px 0 11px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--chip); color: var(--text); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: background-color 0.15s, border-color 0.15s;
}
.chat-btn .ic { width: 19px; height: 19px; color: var(--primary-text); }
@media (hover: hover) { .chat-btn:hover { background: var(--chip-hover); border-color: var(--tint-line); } }
.chat-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
/* Jendela chat: melayang di kanan bawah (layar penuh di ponsel). */
.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 380px; height: min(600px, calc(100vh - var(--top) - 36px));
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: var(--shadow-lg), var(--rim); overflow: hidden; animation: slideUp 0.2s var(--ease) both;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 8px 16px; }
.chat-head .avatar { width: 38px; height: 38px; border-radius: 12px; }
.chat-head .grow { flex: 1; min-width: 0; display: grid; }
.chat-head b { font-size: 15px; line-height: 1.3; }
.chat-head small { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat-wait { flex: 1; display: grid; place-items: center; }
.chat-day { align-self: center; margin: 8px 0 4px; padding: 3px 11px; border-radius: 999px; background: var(--chip); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
/* Satu pesan: avatar | (kutipan, gelembung, waktu) | tombol Balas. Pesan sendiri di kanan. */
.chat-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 88%; }
.chat-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.them { align-self: flex-start; }
.chat-msg.cont { margin-top: -2px; }
.chat-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; font-size: 12px; object-fit: cover; }
.chat-msg.cont .chat-av { visibility: hidden; height: 0; }
.chat-body { display: grid; gap: 3px; min-width: 0; }
.chat-msg.me .chat-body { justify-items: end; }
.chat-msg.them .chat-body { justify-items: start; }
/* Kutipan pesan yang dibalas (klik = loncat ke pesan aslinya). */
.chat-quote {
  display: grid; gap: 1px; max-width: 100%; padding: 6px 10px; border: 0; border-left: 3px solid var(--primary-text); border-radius: 10px;
  background: rgba(255, 255, 255, 0.07); color: var(--text-2); font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer;
}
.chat-quote b { color: var(--primary-text); font-size: 11.5px; }
.chat-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.chat-reply-btn {
  align-self: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: transparent;
  color: var(--text-3); display: grid; place-items: center; opacity: 0; transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.chat-reply-btn .ic { width: 16px; height: 16px; }
.chat-msg:hover .chat-reply-btn, .chat-reply-btn:focus-visible { opacity: 1; }
.chat-reply-btn:hover { background: var(--hover-strong); color: var(--text); }
@media (hover: none) { .chat-reply-btn { opacity: 0.75; } }
.chat-msg.flash .chat-bubble { animation: chatFlash 1.2s ease-out; }
@keyframes chatFlash { 0%, 35% { box-shadow: 0 0 0 3px var(--primary-text); } 100% { box-shadow: 0 0 0 3px rgba(199, 166, 247, 0); } }
.chat-bubble { padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-msg.me .chat-bubble { background: var(--primary-grad); color: #fff; border-bottom-right-radius: 6px; }
.chat-msg.them .chat-bubble { background: var(--bg-elev); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.chat-msg small { color: var(--text-3); font-size: 11px; padding: 0 4px; }
.chat-hello { margin: auto 0; text-align: center; display: grid; justify-items: center; gap: 6px; padding: 12px 4px; color: var(--text-2); }
.chat-hello > .ic { width: 36px; height: 36px; color: var(--text-3); }
.chat-hello-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-grad); box-shadow: var(--primary-rim); color: #fff; margin-bottom: 4px; }
.chat-hello-ic .ic { width: 26px; height: 26px; }
.chat-hello b { color: var(--text); font-size: 16px; }
.chat-hello p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.chat-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chat-quick .chip { height: auto; min-height: 32px; padding: 6px 12px; font-size: 12.5px; white-space: normal; }
.chat-older { align-self: center; border: 0; background: transparent; color: var(--primary-text); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }
.chat-older:hover { background: var(--hover); }
.chat-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px; }
/* Bilah "Membalas ..." di atas kolom tulis. */
.chat-replying { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-left: 3px solid var(--primary-text); border-radius: 12px; background: var(--tint); }
.chat-replying > .ic { color: var(--primary-text); flex: 0 0 auto; }
.chat-replying .grow { flex: 1; min-width: 0; display: grid; font-size: 12px; line-height: 1.35; }
.chat-replying b { color: var(--primary-text); }
.chat-replying span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-input {
  flex: 1; min-width: 0; resize: none; height: 42px; max-height: 120px; padding: 10px 15px; border-radius: 21px; border: 1px solid var(--border-strong);
  background: var(--input); color: var(--text); outline: none; line-height: 1.45; font-size: 14px; transition: border-color 0.15s;
}
.chat-input:focus { border-color: var(--primary); }
.chat-input::placeholder { color: var(--text-3); }
.chat-send { width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--primary-grad); box-shadow: var(--primary-rim); color: #fff; display: grid; place-items: center; }
.chat-send .ic { width: 19px; height: 19px; margin-left: -2px; }
.chat-send:disabled { opacity: 0.5; cursor: default; }
.chat-send:active { transform: scale(0.94); }

/* ---------- label "Ads" ---------- */
.ads-tag {
  position: absolute; left: 8px; top: 8px; z-index: 3; padding: 2px 9px; border-radius: 7px; font-size: 11px; font-weight: 900; letter-spacing: 0.5px;
  color: #2d1f00; background: var(--gold); pointer-events: none;
}

/* ---------- tumpukan kartu gambar (iklan dengan >1 gambar) ----------
   Seperti kartu remi yang dikipas: kartu depan = gambar yang dilihat, kartu
   di belakangnya = gambar berikutnya. Kelas d0..d3 = kedalaman tumpukan.
   Kartu belakang digelapkan dengan lapisan (opacity), bukan filter. */
.deck-box { background: linear-gradient(140deg, #24113f, #0a0a0a 72%); }
.deck { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.deck-card {
  position: absolute; left: 8%; top: 13%; width: 64%; aspect-ratio: 16 / 9; padding: 0; margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 10px; overflow: hidden; background: #0a0a0a; cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); transform-origin: 50% 140%;
  transition: transform 0.32s var(--ease), opacity 0.25s ease;
}
.deck-card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.deck-card.d0 { z-index: 4; }
.deck-card.d1 { z-index: 3; transform: translateX(16%) rotate(9deg); }
.deck-card.d1::after { opacity: 0.25; }
.deck-card.d2 { z-index: 2; transform: translateX(30%) rotate(18deg); }
.deck-card.d2::after { opacity: 0.45; }
.deck-card.d3 { z-index: 1; transform: translateX(30%) rotate(18deg); opacity: 0; pointer-events: none; }
.deck-card.out { z-index: 5; transform: translateX(-60%) rotate(-16deg); opacity: 0; pointer-events: none; transition-duration: 0.25s; }
.deck-card.d1:hover::after, .deck-card.d2:hover::after { opacity: 0; }
.deck-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.deck-count { position: absolute; right: 10px; bottom: 10px; z-index: 6; background: rgba(10, 10, 10, 0.86); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; pointer-events: none; }
@keyframes deckIn { from { translate: 12% 0; opacity: 0.4; } to { translate: 0 0; opacity: 1; } }

/* ---------- banner iklan (beranda) — selalu selebar halaman ---------- */
.adbanner { display: block; margin-bottom: 18px; }
/* width: 100% wajib: tanpa itu, max-height + aspect-ratio ikut membatasi LEBAR
   (≈1066px) sehingga di layar lebar banner berhenti sebelum tepi kanan. */
.adb-main { position: relative; width: 100%; border-radius: 24px; overflow: hidden; background: #0a0a0a; aspect-ratio: 16 / 6; min-height: 230px; max-height: 400px; isolation: isolate; }
.adb-media { position: absolute; inset: 0; }
/* Ganti gambar: memudar saja (tanpa zoom pelan yang terus menggambar ulang). */
.adb-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.adb-slide.on { opacity: 1; }
.adb-main::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0) 72%), linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 55%); }
.adb-hit { position: absolute; inset: 0; z-index: 1; }
.adb-body { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 28px 30px; max-width: min(580px, 62%); pointer-events: none; }
.adbanner.single .adb-body { max-width: min(640px, 88%); }
.adb-body > * { pointer-events: auto; }
.adb-body h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.14; color: #fff; letter-spacing: -0.6px; }
.adb-body p { margin: 0 0 14px; color: #e8e8e8; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adb-body.adb-in { animation: fadeIn 0.3s ease-out both; }
.adb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adb-visit .ic { margin: 0 -4px 0 0; }
.adb-host { color: rgba(255, 255, 255, 0.72); font-size: 12.5px; font-weight: 600; }
.adb-dots { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: none; gap: 6px; }
.adb-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.45); }
.adb-dots button.on { width: 20px; background: #fff; }
/* Tumpukan kartu di pojok kanan bawah banner: kartu depan = gambar berikutnya,
   di belakangnya dikipas ke kiri. Klik kartu = pindah ke gambar itu. */
.adb-deck { inset: auto 30px 26px auto; width: clamp(150px, 20%, 250px); aspect-ratio: 16 / 10; z-index: 3; overflow: visible; }
.adb-deck .deck-card { left: 0; top: auto; bottom: 0; width: 100%; transform-origin: 50% 150%; }
.adb-deck .deck-card.d0 { transform: rotate(-2deg); }
.adb-deck .deck-card.d1 { transform: translateX(-16%) rotate(-10deg); }
.adb-deck .deck-card.d2 { transform: translateX(-30%) rotate(-18deg); }
.adb-deck.shuffle .deck-card { animation: deckIn 0.4s var(--ease) both; }
/* Garis waktu slide: transform scaleX (GPU), bukan lebar (layout tiap frame). */
.adb-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; }
.adb-deck .adb-prog.run { animation: adbProg 6s linear forwards; }
.adbanner.paused .adb-prog { animation-play-state: paused !important; }
@keyframes adbProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- kartu iklan di antara produk ---------- */
.ad-card { border-color: rgba(244, 191, 79, 0.26); }
@media (hover: hover) { .ad-card:hover { box-shadow: 0 18px 40px -14px rgba(244, 191, 79, 0.45), 0 0 0 1px rgba(244, 191, 79, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); } }
.card-tagline.ad-desc { -webkit-line-clamp: 2; }
.ad-by { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12px; min-width: 0; }
.ad-by span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-by small { color: var(--text-3); white-space: nowrap; }
.ad-by .avatar { width: 20px; height: 20px; font-size: 10px; }
.ad-host { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12px; min-width: 0; }
.ad-host span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-host .ic { color: var(--primary-text); }
a.ad-host:hover { color: var(--text); text-decoration: none; }
.card-foot .ad-host { align-self: center; flex: 1; }
.ad-visit { flex: 0 0 auto; }
.ad-visit .ic { margin: 0 -2px 0 0; }
.ad-cta {
  display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 260px; padding: 22px; text-align: center; text-decoration: none;
  border: 1.5px dashed rgba(146, 84, 238, 0.45); background: var(--bg-raised);
}
.ad-cta:hover { text-decoration: none; border-color: var(--primary); }
.ad-cta b { font-size: 15px; color: var(--text); }
.ad-cta .btn { margin-top: 6px; }
.ad-cta:hover .ad-cta-btn { background: var(--primary-hover); }
.ad-cta-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--primary-grad); box-shadow: var(--primary-rim); }
/* Iklan milik sendiri: bertanda "Iklanmu" + tombol hapus di pojok kanan atas gambar. */
.ad-card.mine { border-color: rgba(146, 84, 238, 0.5); }
.ad-by.mine span { color: var(--primary-text); font-weight: 700; }
.ad-del {
  position: absolute; right: 8px; top: 8px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(10, 10, 10, 0.85); color: #ffb0b0; display: grid; place-items: center; transition: background-color 0.15s, color 0.15s;
}
.ad-del:hover { background: var(--danger); color: #fff; }
.ad-del .ic { width: 17px; height: 17px; }

/* ---------- bagian "Iklan" di bawah semua produk beranda ---------- */
.ads-sec { margin-top: 32px; }
.section-title.ads-sec-title { margin: 0 0 14px; gap: 10px; }
.ads-sec-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: #2d1f00; background: var(--gold); }
.ads-sec-ic .ic { width: 17px; height: 17px; }
.ads-sec-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--primary-text); transition: background-color 0.15s; }
.ads-sec-all:hover { background: var(--primary-soft); text-decoration: none; }

/* ---------- dialog konfirmasi ---------- */
.modal.confirm { max-width: 430px; }
.confirm-text { margin: 0; color: var(--text-2); line-height: 1.55; }

/* ---------- kategori "Ads" (iklan dari pengguna) ---------- */
.ads-hero {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin-bottom: 18px; border-radius: 18px;
  border: 1px solid rgba(244, 191, 79, 0.26); background: linear-gradient(120deg, #1f1708, var(--bg-raised) 65%);
}
.ads-hero .grow { flex: 1; min-width: 0; }
.ads-hero-btn { flex: 0 0 auto; }
.ads-hero-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto; color: #2d1f00; background: var(--gold); }
.ads-hero-ic .ic { width: 27px; height: 27px; }
.ads-hero h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.3px; }
.ads-hero p { margin: 0; color: var(--text-2); }
.chip.chip-ads { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(244, 191, 79, 0.45); color: var(--gold); }
.chip.chip-ads.active { background: var(--gold); border-color: var(--gold); color: #2d1f00; }
@media (hover: hover) { .chip.chip-ads:not(.active):hover { background: var(--gold-soft); color: var(--gold); } }

/* ---------- Iklan Saya ---------- */
.ads-intro {
  display: flex; gap: 18px; align-items: center; padding: 22px; margin-bottom: 18px; border-radius: 18px; border: 1px solid rgba(146, 84, 238, 0.3);
  background: linear-gradient(120deg, #1c0f33, var(--bg-raised) 60%);
}
.ads-intro .grow { flex: 1; min-width: 0; }
.ads-intro h2 { margin: 0 0 4px; font-size: 19px; }
.ads-intro p { margin: 0 0 12px; color: var(--text-2); max-width: 640px; }
.ads-intro-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--primary-grad); box-shadow: var(--primary-rim); }
.ads-intro-ic .ic { width: 30px; height: 30px; }
.ads-intro-act { display: grid; gap: 8px; justify-items: stretch; flex: 0 0 auto; }
.ads-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ads-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--text-2); }
.ads-badge .ic { color: var(--primary-text); }
.ads-badge.gift { background: var(--gold-soft); color: var(--gold); }
.ads-badge.gift .ic { color: var(--gold); }
.ad-rows { display: grid; gap: 12px; }
.ad-row { display: flex; gap: 16px; padding: 14px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--border); transition: border-color 0.2s; }
.ad-row:hover { border-color: rgba(146, 84, 238, 0.35); }
.ad-row.focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ad-row.st-expired, .ad-row.st-stopped, .ad-row.st-cancelled { opacity: 0.82; }
.ad-row-thumb { position: relative; width: 220px; flex: 0 0 220px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--chip); align-self: flex-start; }
.ad-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-row-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.ad-row-thumb .ads-tag { left: 8px; top: 8px; font-size: 10px; }
.ad-row-body { flex: 1; min-width: 0; display: grid; gap: 7px; align-content: start; }
.ad-row-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ad-row h3 { margin: 0; font-size: 16px; line-height: 1.3; word-break: break-word; }
.ad-row-desc { margin: 0; color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-2); font-size: 12.5px; }
.ad-meta-i { display: inline-flex; align-items: center; gap: 5px; }
.ad-meta-i .ic { color: var(--text-3); }
.ad-meta-i.hl { color: var(--text); font-weight: 600; }
.ad-meta-i.hl .ic { color: var(--primary-text); }
.ad-prog { height: 6px; border-radius: 3px; background: var(--input); overflow: hidden; max-width: 420px; }
.ad-prog i { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.ad-reason { margin: 2px 0 0; }
.ad-reason b { display: block; margin-bottom: 2px; }
.ad-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
a.ad-row-thumb { display: block; }
.ads-group { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 24px 0 12px; }
.ads-group .ic { color: var(--primary-text); }
.ads-group .count-pill { font-size: 12px; font-weight: 700; color: var(--primary-text); background: var(--primary-soft); padding: 1px 9px; border-radius: 999px; }
.ad-ext { margin: 4px 0 0; }
.ad-ext .grow { flex: 1; min-width: 0; }
.ad-ext b { display: block; }
.ad-ext p { font-size: 12.5px; margin: 2px 0 0; }
.ad-ext .ad-acts { margin-top: 8px; }
.ext-ad { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--bg-elev); margin-bottom: 12px; }
.ext-ad .thumb { width: 96px; flex: 0 0 96px; border-radius: 8px; }
.ext-ad .grow { min-width: 0; display: grid; }
.ext-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-end { margin: 12px 0 6px; font-weight: 600; color: var(--text); }

/* ---------- formulir pasang iklan ---------- */
.ad-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "main side" "end side"; gap: 0 22px; align-items: start; }
.ad-form-main { grid-area: main; }
.ad-form-side { grid-area: side; position: sticky; top: calc(var(--top) + 16px); }
.ad-form-end { grid-area: end; }
.ad-side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.ad-side-title .ic { color: var(--primary-text); }
.ad-preview .card { pointer-events: none; }
.ad-preview .deck { pointer-events: auto; }
/* gambar iklan (1–5): gambar pertama = utama */
.ad-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; border-radius: 14px; transition: box-shadow 0.15s; }
.ad-imgs.over { box-shadow: 0 0 0 2px var(--primary); }
.ad-imgs.invalid { box-shadow: 0 0 0 2px var(--accent); }
.ad-img { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--chip); border: 2px solid transparent; }
.ad-img.cover { border-color: var(--gold); }
.ad-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-img-main { position: absolute; left: 6px; top: 6px; padding: 1px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 900; color: #2d1f00; background: var(--gold); }
.ad-img-spin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); }
.ad-img-acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 4px; padding: 4px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0)); opacity: 0; transition: opacity 0.15s; }
.ad-img:hover .ad-img-acts, .ad-img:focus-within .ad-img-acts { opacity: 1; }
.ad-img-acts .icon-btn { width: 30px; height: 30px; color: #fff; background: rgba(10, 10, 10, 0.7); }
.ad-img-acts .icon-btn .ic { width: 16px; height: 16px; }
.ad-img-acts .icon-btn:hover { background: var(--primary); }
.ad-img-acts .icon-btn.del { margin-left: auto; }
.ad-img-acts .icon-btn.del:hover { background: var(--danger); }
.ad-img-add {
  aspect-ratio: 16 / 9; border-radius: 12px; border: 1.5px dashed var(--border-strong); background: var(--input); color: var(--text-2);
  display: grid; place-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center; transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.ad-img-add:hover { border-color: var(--primary); background: rgba(129, 64, 220, 0.08); color: var(--text); }
.ad-img-add .ic { color: var(--primary-text); width: 26px; height: 26px; }
.ad-img-add b { font-size: 13px; }
.ad-img-add small { color: var(--text-3); font-size: 11.5px; }
.ad-img-add.first { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
.ad-img-add.first .ic { width: 38px; height: 38px; stroke-width: 1.5; }
.ad-img-add.first b { font-size: 15px; }
.ad-img-add.first small { font-size: 12px; max-width: 380px; }
@media (hover: none) { .ad-img-acts { opacity: 1; } }
.ad-free-box, .ad-dur-fixed { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid rgba(244, 191, 79, 0.32); background: var(--gold-soft); }
.ad-dur-fixed { border-color: var(--border); background: var(--bg-elev); }
.ad-free-box b, .ad-dur-fixed b { display: block; font-size: 15px; }
.ad-free-box small, .ad-dur-fixed small { color: var(--text-2); }
.ad-free-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #2d1f00; background: var(--gold); }
.ad-dur-fixed .ad-free-ic { color: #fff; background: var(--chip); }
.day-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; margin-bottom: 12px; }
.day-chip { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--input); color: var(--text); transition: border-color 0.15s, background-color 0.15s; }
.day-chip small { color: var(--text-3); font-size: 11.5px; }
.day-chip:hover { border-color: rgba(146, 84, 238, 0.6); }
.day-chip.on { border-color: var(--primary); background: var(--primary-soft); }
.day-chip.on small { color: var(--primary-text); }
.day-custom { display: flex; align-items: center; gap: 10px; }
.day-custom label { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.day-input { width: 110px; }
.ad-summary { display: grid; gap: 10px; }
.ad-summary h3 { margin: 0; font-size: 15px; }
.ad-summary .help { margin: 0; }
.terms-box { max-height: 280px; overflow-y: auto; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--input); color: #d6d6d6; font-size: 13px; outline: none; }
.terms-box:focus-visible { border-color: var(--primary); }
.terms-box .md h3 { font-size: 14px; }
.terms-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 10px; color: var(--gold); font-size: 12.5px; font-weight: 600; }
.terms-hint.done { color: var(--primary-text); }
.terms-agree { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; transition: opacity 0.15s, border-color 0.15s; }
.terms-agree.locked { opacity: 0.5; cursor: not-allowed; }
.terms-agree.invalid { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- ulasan (milik sendiri) ---------- */
.review.mine { border-color: rgba(146, 84, 238, 0.45); background: var(--bg-raised); }
.rev-name { font-weight: 700; color: var(--text); word-break: break-word; }
.rev-user { color: var(--text-2); font-size: 12.5px; }
.rev-edit { width: 28px; height: 28px; color: var(--primary-text); background: var(--primary-soft); }
.rev-edit:hover { background: var(--primary); color: #fff; }
.rev-edit .ic { width: 15px; height: 15px; }
.rev-tag { font-size: 11px; font-weight: 700; color: var(--primary-text); background: var(--primary-soft); border-radius: 10px; padding: 1px 8px; }
.rev-hidden { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--gold); }
.rev-editor { display: grid; gap: 14px; }
.rev-product { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--bg-elev); }
.rev-product .thumb { width: 88px; flex: 0 0 88px; border-radius: 8px; }
.rev-product b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- halaman pembayaran tiruan (dev) ---------- */
.devpay { display: grid; place-items: center; min-height: 100vh; }
.devpay-box { background: var(--bg-raised); padding: 32px; border-radius: 16px; max-width: 420px; text-align: center; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "gal" "info" "rev"; row-gap: 18px; }
  .adp-grid { grid-template-areas: "gal" "info"; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .ad-form-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "end"; }
  .ad-form-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
}
/* Sidebar mini otomatis di layar sedang — hanya panel admin (toko tanpa sidebar). */
@media (max-width: 1312px) and (min-width: 792px) {
  .app:not(.mini-off):not(.store) .sidebar { width: var(--side-mini); padding: 8px 6px; }
  .app:not(.mini-off):not(.store) .side-item { flex-direction: column; gap: 5px; height: 68px; justify-content: center; font-size: 10px; padding: 0 2px; text-align: center; }
  .app:not(.mini-off):not(.store) .side-item .side-badge { position: absolute; top: 6px; right: 10px; margin: 0; }
  .app:not(.mini-off):not(.store) .side-sep, .app:not(.mini-off):not(.store) .side-title, .app:not(.mini-off):not(.store) .side-extra { display: none; }
  .app:not(.mini-off):not(.store) .main { padding-left: calc(var(--side-mini) + 24px); }
}
@media (max-width: 791px) {
  :root { --top: 58px; }
  .sidebar { display: none; }
  .main { padding: calc(var(--top) + 10px) 16px 0 16px !important; }
  .store .main { padding: var(--top) 0 0 !important; }
  .store .view { padding: 14px 16px 32px; }
  .view { padding-bottom: 32px; }
  /* Footer ponsel: merek, tautan, ikon sosial bertumpuk & rapat. Ruang bawah = bilah bawah + area aman iPhone. */
  .site-footer { margin: 12px -16px 0; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .store .site-footer { margin: 0; }
  .footer-inner { padding: 18px 16px 12px; gap: 14px; }
  .f-brand { flex-basis: 100%; }
  .f-links { gap: 6px 16px; }
  .footer-bottom { padding: 12px 16px 14px; flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  /* Bilah bawah: tinggi tetap 60px + area aman (home indicator iPhone), label pendek satu baris. */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(60px + env(safe-area-inset-bottom));
    background: var(--bg-deep); border-top: 1px solid var(--border); padding: 0 4px env(safe-area-inset-bottom);
  }
  .bottom-nav a { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); font-size: 10.5px; line-height: 1.2; text-decoration: none; transition: color 0.15s; }
  .bottom-nav a .ic { width: 22px; height: 22px; }
  .bn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .bottom-nav a.active { color: var(--primary-text); font-weight: 600; }
  .bottom-nav a.active .ic { fill: currentColor; fill-opacity: 0.2; }
  .bottom-nav .cart-count { top: 4px; right: calc(50% - 22px); border-color: var(--bg-deep); }
  .modal { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 0 6px 0 4px; gap: 4px; }
  .logo-text small { display: none; }
  /* Keranjang ponsel ada di bilah bawah — tidak digandakan di topbar. */
  .store .topbar .cart-btn { display: none; }
  /* Chat ponsel: layar penuh di atas bilah bawah; halaman di belakangnya tidak ikut tergulir. */
  .chat-panel { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: fadeIn 0.15s both; }
  html.chat-open, html.chat-open body { overflow: hidden; }
  .chat-input { font-size: 16px; }
  .chat-msg { max-width: 92%; }
  /* Kolom cari ponsel: tersembunyi; tombol kaca pembesar membukanya menutupi
     seluruh topbar ("<" di kiri, kolom selebar sisa layar) — tidak pernah terjepit. */
  .topbar-center { display: none; }
  .topbar-center.open {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px;
    background: var(--bg-deep); animation: fadeIn 0.15s both;
  }
  .topbar-center.open .search { height: 40px; }
  .topbar-center.open .search input { height: 40px; padding-right: 46px; }
  .topbar-center.open .search button { top: 4px; }
  /* Ponsel: dua kartu per baris. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  /* Kartu ajakan "Pasang Iklan" di paling bawah daftar tidak ditampilkan di ponsel. */
  .ad-cta, .ads-sec.only-cta { display: none !important; }
  .ads-sec { margin-top: 26px; }
  .free-sec { margin-top: 28px; }
  .free-sec-desc { padding-left: 0; margin-top: 6px; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile-body { padding: 10px 10px 12px; }
  .tile-actions { flex-wrap: wrap; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .toast { min-width: 0; max-width: none; }
  .notif-panel { position: fixed; left: 8px !important; right: 8px !important; width: auto; }
  .adb-main { aspect-ratio: 16 / 9; min-height: 0; border-radius: 14px; }
  .adb-body, .adbanner.single .adb-body { padding: 16px 16px 18px; max-width: 100%; }
  .adb-body h2 { font-size: 20px; }
  .adb-body p { font-size: 13px; margin-bottom: 10px; -webkit-line-clamp: 1; }
  .adb-dots { display: flex; }
  /* Ponsel: tumpukan kartu kecil di pojok kanan atas (teks banner di bawah). */
  .adb-deck { inset: 12px 14px auto auto; width: 30%; }
  .adb-deck .deck-card { border-width: 1.5px; border-radius: 8px; }
  .ads-hero { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .ads-hero-ic { width: 46px; height: 46px; border-radius: 14px; }
  .ads-hero h1 { font-size: 19px; }
  .ads-hero .btn { width: 100%; }
  .ads-intro { flex-wrap: wrap; padding: 18px; }
  .ads-intro-ic { width: 48px; height: 48px; border-radius: 14px; }
  .ads-intro-act { width: 100%; grid-template-columns: 1fr auto; }
  .ad-row { flex-direction: column; }
  .ad-row-thumb { width: 100%; flex-basis: auto; }
  .day-custom { flex-wrap: wrap; }
  .row-card { flex-wrap: wrap; }
  .row-card .thumb { width: 100%; flex-basis: 100%; }
  .row-card .side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .cart-item { flex-wrap: wrap; }
  .cart-item .thumb { width: 96px; flex-basis: 96px; }
  .cart-item .price-col { text-align: left; }
  .hero { min-height: 160px; border-radius: 14px; }
  .hero h1 { font-size: 22px; }
  .hero-body { padding: 18px; }
  .page-title { font-size: 22px; }
  .pdp-title { font-size: 23px; }
  .price-card { padding: 16px; }
  .price-main .p-idr { font-size: 25px; }
  .price-main .p-usd { font-size: 21px; }
  .price-actions { width: 100%; }
  .price-actions .btn { flex: 1; min-width: 0; }
  .stat { padding: 12px 6px; }
  .stat b { font-size: 15px; }
  .stat .stars .ic { width: 13px; height: 13px; }
  .rev-head h2 { font-size: 18px; }
  .review { padding: 14px; }
  .adp-host { font-size: 16px; }
  .adp-owner-acts { flex: 1 1 100%; padding-left: 36px; }
  .order-head { gap: 12px; }
  .order-head .thumb { width: 88px; flex-basis: 88px; }
  .pp-step { padding: 12px; gap: 10px; }
  .pp-num { width: 26px; height: 26px; font-size: 13px; }
  .pp-step-main > b { line-height: 26px; }
  .pp-pay { grid-template-columns: minmax(0, 1fr); }
  .pp-qr { width: 100%; max-width: 230px; justify-self: center; }
  .pp-step-main > .btn { justify-self: stretch; }
  /* Baris kategori, lalu baris "Urutkan" selebar layar: label di kiri, pilihan di kanan. */
  .shop-bar { flex-wrap: wrap; gap: 8px; padding: 8px 0 6px; margin-bottom: 8px; }
  .chips { flex-basis: 100%; gap: 8px; }
  .sort-box { flex: 1 1 100%; justify-content: space-between; min-width: 0; }
  .sort-box .fsel { min-width: 0; }
  .sort-box .fsel-btn { min-width: 176px; }
  .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-wrap { padding: 0; align-items: end; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
}
@media (min-width: 792px) {
  .search-toggle { display: none; }
}
@media (max-width: 640px) {
  /* Chat Admin cukup ikon bulat supaya topbar tidak sesak. */
  .chat-btn { width: 38px; padding: 0; justify-content: center; }
  .chat-label { display: none; }
}
@media (max-width: 520px) {
  /* Topbar ponsel: bahasa dipindah ke menu (garis tiga) & footer, tombol Masuk cukup ikon. */
  .topbar .lang-toggle { display: none; }
  .signin { padding: 0 10px; }
  .signin span { display: none; }
  /* Jendela masuk: tombol Roblox/Discord turun ke baris sendiri (teks tidak terjepit, tidak melebihi layar). */
  .list .step { flex-wrap: wrap; }
  .list .step > .btn { flex: 1 1 100%; }
  /* Kartu dua kolom di ponsel: ukuran huruf, tombol, dan label dirapatkan. */
  .grid .card-body { padding: 9px 10px 11px; gap: 3px; }
  .grid .card-title { font-size: 13.5px; line-height: 18px; }
  .grid .card-tagline { font-size: 12px; line-height: 16px; }
  .grid .card-meta { font-size: 11.5px; line-height: 17px; }
  .grid .card-meta .dot::before { margin: 0 4px; }
  .grid .star1 { gap: 3px; }
  .grid .star1 .ic { width: 12px; height: 12px; }
  .grid .star1 small { font-size: 11.5px; }
  .grid .card-foot { gap: 6px; padding-top: 7px; flex-wrap: wrap; }
  .grid .price-stack .price { font-size: 14.5px; }
  .grid .price-stack .sub { font-size: 11px; gap: 4px; }
  .grid .cart-add { width: 32px; height: 32px; border-radius: 9px; }
  .grid .cart-add .ic { width: 17px; height: 17px; }
  .grid .fav-btn, .grid .ad-del { width: 30px; height: 30px; right: 6px; top: 6px; }
  .grid .fav-btn .ic, .grid .ad-del .ic { width: 16px; height: 16px; }
  .grid .card-cat { font-size: 10px; letter-spacing: 0.4px; }
  .grid .ads-tag { left: 6px; top: 6px; padding: 1px 7px; font-size: 10px; }
  .grid .label-box { margin-right: 4px; padding: 0 5px; font-size: 9.5px; line-height: 15px; }
  .grid .free-label { margin-right: 4px; padding: 0 6px 0 5px; font-size: 9.5px; line-height: 14px; }
  .grid .free-label .ic { width: 10px; height: 10px; }
  .grid .free-ribbon { left: 6px; top: 6px; padding: 2px 8px 2px 6px; font-size: 10px; }
  .grid .free-ribbon .ic { width: 11px; height: 11px; }
  .grid .cs-dots { bottom: 6px; }
  .grid .cs-dots i { width: 5px; height: 5px; }
  .grid .cs-dots i.on { width: 12px; }
  .grid .deck-card { border-width: 1.5px; border-radius: 7px; }
  .grid .deck-count { right: 6px; bottom: 6px; padding: 1px 6px; font-size: 10px; }
  /* Kartu iklan dua kolom: domain di atas, tombol Kunjungi selebar kartu. */
  .grid .ad-card .card-foot { flex-direction: column; align-items: stretch; gap: 7px; }
  .grid .ad-card .card-foot .ad-host { align-self: flex-start; max-width: 100%; }
  .grid .ad-card .ad-visit { width: 100%; height: 30px; font-size: 12.5px; }
  .grid .ad-by { gap: 5px; font-size: 11px; }
  .grid .ad-by small { display: none; }
  .grid .ad-by .avatar { width: 18px; height: 18px; }
  .grid .ad-host { font-size: 11px; }
}
@media (max-width: 420px) {
  .logo-text { font-size: 16px; }
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topbar-right { gap: 2px; }
  .topbar-right .icon-btn { width: 38px; height: 38px; }
  .tile-actions .btn { padding: 0 8px; font-size: 12.5px; }
  .ad-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  /* Layar sangat sempit: nama toko di topbar disembunyikan supaya ikon tidak bertabrakan. */
  .topbar .logo-text { display: none; }
  .bottom-nav a { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}