/* ============================================================
   TAKE IT. — styles.css
   Konsep: "Grading Slab" — setiap barang tampil seperti kartu
   ber-sertifikat (serial mono + segel holo). Simple, tegas, cepat.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#F1F2ED;
  --card:#FFFFFF;
  --ink:#15181B;
  --ink-soft:#3E454C;
  --muted:#79828A;
  --line:#D8DBD4;
  --stamp:#D6491F;              /* merah stempel "AUTHENTIC" */
  --stamp-dark:#B23A17;
  --ok:#1E7A4E;
  --holo:linear-gradient(115deg,#7BE0C3 0%,#8FB6FF 30%,#D9A7FF 62%,#FFD98A 100%);
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --maxw:1120px;
  --radius:14px;
  --slab-shadow:5px 5px 0 rgba(21,24,27,0.9);
}

/* ---- Dark mode — toggle lewat tombol di header, tersimpan di localStorage.
   CAKUPAN JUJUR: variabel inti (background, teks, border, tombol, kartu
   produk) sudah dark. Beberapa panel di halaman tertentu (checkout, dashboard
   seller, admin) masih pakai putih hardcoded dari sesi-sesi awal pembuatan
   situs ini — belum semua sempat diaudit satu-satu. ---- */
html[data-theme="dark"]{
  /* Palet dark yang di-tune untuk terasa premium, bukan "developer/crypto":
     - background berlapis (page < card < raised) dengan sedikit kehangatan
       netral, bukan hitam pekat yang bikin mata lelah & terasa murah.
     - teks off-white (#E7E9E4), tidak putih murni — putih murni di atas
       gelap menyilaukan dan menurunkan kualitas keterbacaan.
     - stamp merah diredam sedikit supaya tidak "neon" di kanvas gelap.
     - shadow: di dark, offset hitam keras tak terlihat; diganti ring
       halus + bayangan lembut lewat --slab-shadow. */
  --paper:#141618;                    /* background halaman */
  --card:#1D2023;                     /* permukaan kartu */
  --raised:#25292D;                   /* panel di atas kartu (serial, header slab) */
  --ink:#E7E9E4;                      /* teks utama, off-white */
  --ink-soft:#B4BAB6;                 /* teks sekunder */
  --muted:#7C848B;                    /* teks tersier / caption */
  --line:#2E3338;                     /* garis & border halus */
  --line-strong:#3C424A;              /* border yang perlu sedikit lebih tegas */
  --stamp:#F06A3E;                    /* merah stempel, diredam agar tak neon */
  --stamp-dark:#C6491F;
  --ok:#3DBE7C;
  --ok-soft-bg:#16281F;               /* latar status sukses versi gelap */
  --ok-soft-ink:#5FD79A;
  --warn-soft-bg:#2A2415;             /* latar status peringatan versi gelap */
  --warn-soft-ink:#E6C06A;
  --danger-soft-bg:#2C1A16;           /* latar status bahaya versi gelap */
  --danger-soft-ink:#F0917A;
  --holo:linear-gradient(115deg,#4CB79A 0%,#6C90D6 30%,#A87FD4 62%,#D6AA63 100%);
  --slab-shadow:0 2px 10px rgba(0,0,0,0.45);
  --slab-ring:1px solid var(--line-strong);
}
html[data-theme="dark"] body{ background:var(--paper); color:var(--ink); }
html[data-theme="dark"]{ --header-bg: rgba(20,22,24,0.86); }
:root{
  --raised:#F1F2ED;
  --line-strong:#D8DBD4;
  --ok-soft-bg:#DDF3E4;
  --ok-soft-ink:#1E7A4E;
  --warn-soft-bg:#FFF3D6;
  --warn-soft-ink:#8A6417;
  --danger-soft-bg:#FBE0D8;
  --danger-soft-ink:#B23A17;
  --slab-ring:2px solid var(--ink);
  --header-bg: rgba(241,242,237,0.92);
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* ============================================================
   FIT-TO-SCREEN — jaring pengaman responsif di semua device & browser.
   ------------------------------------------------------------
   1. overflow-x:hidden di html/body: kalau ada satu elemen ter-render
      sedikit lebih lebar dari viewport (rounding, shadow offset, dsb),
      ini mencegah muncul scroll horizontal tak sengaja di seluruh
      halaman — masalah paling umum di web yang tidak "fit to screen".
   2. img/video max-width:100%: media tidak akan pernah memaksa
      halaman melebar melebihi container-nya.
   3. -webkit-text-size-adjust: mencegah Safari iOS otomatis
      memperbesar ukuran font saat orientasi diputar.
   ============================================================ */
html{ overflow-x:hidden; width:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; width:100%; min-height:100vh; }
img, video, svg{ max-width:100%; height:auto; }
/* Elemen yang sengaja butuh scroll horizontal (carousel, tabel lebar,
   ticker) mengecualikan diri lewat max-width:none pada child-nya
   masing-masing — aturan di atas hanya membatasi lebar KONTAINER. */

/* ---- Shimmer holografik: dipakai di semua elemen bergradasi --holo
   (seal logo, chip, mini-serial kartu, avatar toko) supaya terasa
   seperti foil sertifikat asli, bukan warna statis. ---- */
@keyframes holoShimmer{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.logo .seal, .holo-chip, .slab .serial .holo-mini, .toko-avatar,
.order-card .serial .holo-mini, .receipt .serial .holo-mini, .summary .serial .holo-mini,
.bigslab .serial .holo-mini{
  background-size:220% 220% !important;
}
@media (prefers-reduced-motion: no-preference){
  .logo .seal, .holo-chip, .slab .serial .holo-mini, .toko-avatar,
  .order-card .serial .holo-mini, .receipt .serial .holo-mini, .summary .serial .holo-mini,
  .bigslab .serial .holo-mini{
    animation: holoShimmer 5s ease-in-out infinite;
  }
}
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); background:var(--paper); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--ink); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.mono{ font-family:var(--font-mono); }
.display{ font-stretch:118%; font-weight:800; letter-spacing:-0.5px; }

:focus-visible{ outline:3px solid var(--stamp); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; } }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink); }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:62px; }
.logo{ font-stretch:125%; font-weight:900; font-size:20px; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto; }
.logo .seal{ width:16px; height:16px; border-radius:50%; background:var(--holo); border:2px solid var(--ink); flex:0 0 auto; }
@media (max-width:480px){
  .site-header .bar{ gap:8px; }
  .logo{ font-size:14.5px; gap:4px; letter-spacing:-0.3px; }
  .logo .seal{ width:11px; height:11px; }
  .header-cta{ padding:7px 11px; font-size:11px; }
  .loginlink{ margin-right:8px !important; font-size:12px; }
}
.nav{ display:flex; gap:4px; }
.nav a{ padding:8px 13px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink-soft); }
.nav a:hover{ background:#fff; }
.nav a.active{ background:var(--ink); color:#fff; }
.header-cta{ font-family:var(--font-mono); font-size:12px; font-weight:700; border:2px solid var(--ink); background:var(--card); border-radius:999px; padding:8px 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; display:inline-block; }
.header-cta:hover{ background:var(--ink); color:#fff; }
@media (max-width:720px){ .nav{ display:none; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:11px; padding:13px 22px; font-weight:700; font-size:14.5px; border:2px solid var(--ink); transition:transform .1s, box-shadow .1s, background .12s; }
.btn:active{ transform:scale(0.96); }
@media (hover:none){ .btn:hover{ transform:none; box-shadow:none; } }
.btn-primary{ background:#15181B; color:#fff; box-shadow:var(--slab-shadow); }
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(21,24,27,0.9); }
.btn-primary:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(21,24,27,0.9); }
.btn-stamp{ background:var(--stamp); color:#fff; border-color:var(--stamp-dark); box-shadow:5px 5px 0 rgba(178,58,23,0.55); }
.btn-stamp:hover{ transform:translate(-2px,-2px); }
.btn-ghost{ background:var(--card); color:var(--ink); }
.btn-ghost:hover{ background:var(--paper); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; box-shadow:none; transform:none; }

/* ---------- Chips holo ---------- */
.holo-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:var(--holo); border:1.5px solid var(--ink); border-radius:999px; padding:5px 12px; color:var(--ink); }
.holo-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); }

/* ---------- Product slab card ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
@media (max-width:640px){
  .grid{ grid-template-columns:1fr 1fr; gap:11px; }
  .slab .serial{ padding:6px 9px; font-size:9px; }
  .slab .serial .holo-mini{ width:20px; height:9px; }
  .slab .ph{ height:118px; font-size:38px; }
  .slab .body{ padding:10px 10px 11px; gap:5px; }
  .slab .cat{ font-size:9px; letter-spacing:0.6px; }
  .slab h3{ font-size:12.5px; line-height:1.32; }
  .slab .price{ font-size:13.5px; }
  .slab .left, .slab .timer, .slab .soldout{ font-size:9px; }
  .card-foot{ padding-top:4px; }
  .kondisi-tag{ font-size:8px; padding:2px 6px; }
  .card-foot .loc{ font-size:8px; max-width:70px; }
}
.slab{ background:var(--card); border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; box-shadow:var(--slab-shadow); transition:transform .12s, box-shadow .12s; display:flex; flex-direction:column; }
.slab:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 rgba(21,24,27,0.9); }
.slab .serial{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.6px; padding:8px 12px; border-bottom:2px solid var(--ink); background:var(--paper); }
.slab .serial .holo-mini{ width:26px; height:12px; border-radius:3px; background:var(--holo); border:1px solid var(--ink); }
.slab .ph{ height:170px; display:flex; align-items:center; justify-content:center; font-size:56px; background:
  repeating-linear-gradient(45deg, rgba(21,24,27,0.025) 0 10px, transparent 10px 20px), var(--card); border-bottom:2px solid var(--ink); }
.slab .body{ padding:14px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.slab .cat{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--stamp); font-weight:700; }
.slab h3{ font-size:15.5px; font-weight:700; line-height:1.25; }
.slab .rowline{ display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; }
.slab .price{ font-stretch:112%; font-weight:800; font-size:17px; }
.slab .left{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.slab .timer{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--stamp); }
.slab .soldout{ font-family:var(--font-mono); font-size:11px; color:var(--muted); font-weight:700; }
.stockbar{ height:6px; background:var(--paper); border:1.5px solid var(--ink); border-radius:99px; overflow:hidden; }
.stockbar i{ display:block; height:100%; background:var(--ink); }
.stockbar i.hot{ background:var(--stamp); }

/* ---- Kaki kartu produk: badge kondisi + lokasi (menggantikan progress "diklaim") ---- */
.card-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:6px; }
.kondisi-tag{ font-family:var(--font-mono); font-size:10px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.kondisi-tag.baru{ background:#DDF3E4; color:#1E7A4E; }
.kondisi-tag.bekas{ background:#FFF3D6; color:#8A6417; }
.card-foot .loc{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Sections ---------- */
.section{ padding:52px 0 8px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.section-head h2{ font-stretch:120%; font-weight:800; font-size:26px; letter-spacing:-0.4px; }
.section-head a{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--stamp); }
/* PENTING: link biasa di section-head memang mono-oranye kecil (aturan di atas),
   tapi kalau link itu TOMBOL (.btn), jangan ikut aturan itu — dulu teks tombol
   jadi oranye-di-atas-oranye (terlihat kosong). Kembalikan ke gaya tombol. */
.section-head a.btn{ font-family:inherit; font-size:14.5px; font-weight:800; }
.section-head a.btn-stamp{ color:#fff; }
.section-head a.btn-ghost{ color:var(--ink); }

/* ---------- Page scaffolding ---------- */
.page{ max-width:var(--maxw); margin:0 auto; padding:30px 22px 70px; }
.breadcrumb{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-bottom:16px; }
.breadcrumb a:hover{ color:var(--stamp); }
.page-title{ font-stretch:120%; font-weight:800; font-size:clamp(26px,4.5vw,38px); letter-spacing:-0.6px; margin-bottom:8px; }
.page-lead{ color:var(--ink-soft); max-width:560px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:6px; color:var(--ink-soft); }
.input{ width:100%; border:2px solid var(--ink); background:var(--card); border-radius:10px; padding:12px 13px; font-size:14.5px; font-family:inherit; color:var(--ink); }
.input:focus{ outline:3px solid rgba(214,73,31,0.35); }
.hint{ font-size:12px; color:var(--muted); margin-top:5px; }

/* ---------- Footer ----------
   Catatan: gaya lengkap .site-footer sekarang ada langsung di
   includes/footer.php (style block di situ), jadi tidak diduplikasi
   di sini lagi supaya tidak ada dua sumber kebenaran yang beda. */


/* util */
.text-center{ text-align:center; }
.mt-2{ margin-top:10px; } .mt-4{ margin-top:20px; } .mt-6{ margin-top:34px; }

/* ---------- Header auth ---------- */
.authbar{ display:flex; align-items:center; gap:12px; }
.loginlink{ font-weight:700; font-size:13.5px; color:var(--ink-soft); }
.loginlink:hover{ color:var(--stamp); }

/* ---------- Toko (avatar + badge verified) ----------
   Dipakai di halaman /toko, kartu daftar toko di beranda,
   dan hasil pencarian header. */
.toko-avatar{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--holo); border:2px solid var(--ink);
  flex:0 0 auto; line-height:1;
}
.toko-badge{
  position:absolute; bottom:-3px; right:-3px; width:20px; height:20px;
  border-radius:50%; background:#2F7DE1; border:2px solid #fff;
  color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;
}
.toko-avatar-photo{ background:#fff; overflow:hidden; }
.toko-avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Rating bintang ---------- */
.stars{ display:inline-flex; gap:1px; letter-spacing:-1px; color:var(--line); }
.stars span.on{ color:#F5A623; }
.stars-n{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-left:6px; vertical-align:middle; }


/* ============================================================
   DARK MODE — LAPISAN PENYEMPURNAAN
   ------------------------------------------------------------
   Tujuan: dark mode yang terasa premium (bukan neon / crypto /
   "developer site"). Fokus pada kontras terkendali, permukaan
   berlapis, border halus, dan shadow lembut.

   Bagian A menyetel ulang elemen inti (kartu, header, tombol,
   panel status) agar memakai token gelap yang benar.
   Bagian B menetralkan warna PUTIH & PASTEL yang ter-hardcode
   inline di banyak halaman lama, tanpa menyunting tiap file PHP.
   Cakupan: semua halaman publik. Panel /admin tidak terpengaruh
   (punya CSS & _header sendiri, tidak memuat styles.css publik).
   ============================================================ */

/* ---------- A. Elemen inti ---------- */

/* Kartu "slab": di terang pakai offset shadow keras + border tebal
   (khas grading slab). Di gelap, offset hitam tak terlihat & border
   tebal terasa kasar — ganti ke ring halus + shadow lembut. */
html[data-theme="dark"] .slab{
  border:var(--slab-ring);
  box-shadow:var(--slab-shadow);
}
html[data-theme="dark"] .slab:hover{
  transform:translate(0,-3px);
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
  border-color:var(--muted);
}
html[data-theme="dark"] .slab .serial,
html[data-theme="dark"] .slab .ph{ border-bottom:1px solid var(--line); }
html[data-theme="dark"] .slab .serial{ background:var(--raised); }
html[data-theme="dark"] .slab .ph{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px),
    var(--card);
}

/* Header: garis bawah tebal → hairline supaya elegan */
html[data-theme="dark"] .site-header{ border-bottom:1px solid var(--line); }

/* Nav & CTA hover: di terang jadi putih; di gelap putih itu menyilaukan */
html[data-theme="dark"] .nav a:hover{ background:var(--raised); }
html[data-theme="dark"] .nav a.active{ background:var(--ink); color:var(--paper); }
html[data-theme="dark"] .header-cta:hover{ background:var(--ink); color:var(--paper); }

/* Tombol utama: hitam-di-terang → permukaan terang-di-gelap (inversi lembut,
   bukan hitam-di-hitam yang hilang) */
html[data-theme="dark"] .btn-primary{
  background:var(--ink); color:var(--paper); box-shadow:var(--slab-shadow);
}
html[data-theme="dark"] .btn-primary:hover{
  transform:translate(0,-2px); box-shadow:0 8px 20px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .btn-primary:active{ transform:translate(0,1px); box-shadow:var(--slab-shadow); }
html[data-theme="dark"] .btn-stamp{ box-shadow:0 4px 16px rgba(240,106,62,0.28); }
html[data-theme="dark"] .btn-ghost{ background:var(--card); border-color:var(--line-strong); }
html[data-theme="dark"] .btn-ghost:hover{ background:var(--raised); }

/* Input & field */
html[data-theme="dark"] .input{ border:1.5px solid var(--line-strong); background:var(--card); }
html[data-theme="dark"] .input:focus{ outline:2px solid rgba(240,106,62,0.5); border-color:var(--stamp); }

/* Badge kondisi kartu produk → versi gelap yang lembut */
html[data-theme="dark"] .kondisi-tag.baru{ background:var(--ok-soft-bg); color:var(--ok-soft-ink); }
html[data-theme="dark"] .kondisi-tag.bekas{ background:var(--warn-soft-bg); color:var(--warn-soft-ink); }

/* Chip holo: teks --ink di atas gradasi holo yang di dark lebih gelap →
   pakai warna gelap tetap terbaca, jadi biarkan; hanya rapikan border */
html[data-theme="dark"] .holo-chip{ border-color:var(--line-strong); }

/* Stockbar */
html[data-theme="dark"] .stockbar{ background:var(--raised); border-color:var(--line-strong); }

/* Toko avatar photo & badge verified */
html[data-theme="dark"] .toko-avatar-photo{ background:var(--card); }
html[data-theme="dark"] .toko-badge{ border-color:var(--paper); }

/* ---------- B. Netralisasi warna hardcoded inline (halaman lama) ----------
   Banyak panel di halaman warisan memakai `background:#fff` inline. Inline
   style menang atas kelas biasa, jadi override memerlukan selector ber-scope
   tema + !important yang ditargetkan HANYA pada nilai putih itu. */

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"]{
  background:var(--card) !important;
}

/* Panel status pastel yang ter-hardcode inline → versi gelap yang selaras */
html[data-theme="dark"] [style*="#F3FBF6"],
html[data-theme="dark"] [style*="#DDF3E4"]{
  background:var(--ok-soft-bg) !important; border-color:#1E7A4E !important;
}
html[data-theme="dark"] [style*="#FFF3D6"],
html[data-theme="dark"] [style*="#FFF8ED"]{
  background:var(--warn-soft-bg) !important;
}
html[data-theme="dark"] [style*="#FBE0D8"]{
  background:var(--danger-soft-bg) !important;
}
/* #EDEFEA & #F1F2ED inline dipakai sebagai permukaan/latar terang → jadikan raised */
html[data-theme="dark"] [style*="background:#EDEFEA"],
html[data-theme="dark"] [style*="background:#F1F2ED"]{
  background:var(--raised) !important;
}

/* Tabel & garis yang mewarisi putih inline: pastikan teksnya ikut token */
html[data-theme="dark"] [style*="background:#fff"] th,
html[data-theme="dark"] [style*="background:#fff"] td{ border-color:var(--line) !important; }

/* ---------- Penyempurnaan header (dropdown search & notifikasi) ---------- */
html[data-theme="dark"] .search-suggest,
html[data-theme="dark"] .notif-dropdown{
  border:1px solid var(--line-strong); box-shadow:0 12px 30px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .notif-head,
html[data-theme="dark"] .notif-foot{ border-color:var(--line); background:var(--raised); }
html[data-theme="dark"] .search-suggest .s-item:hover,
html[data-theme="dark"] .notif-item:hover{ background:var(--raised); }
html[data-theme="dark"] .notif-item.unread{ background:rgba(240,106,62,0.08); }
html[data-theme="dark"] .notif-badge{ border-color:var(--paper) !important; }

/* ---------- Band brand gelap (teks terang di atas latar --ink) ----------
   Panel-panel ini dirancang selalu gelap dengan teks #EDEFEA hardcoded.
   Karena --ink membalik jadi off-white di dark mode, background-nya harus
   dikunci ke warna gelap tetap agar teks terangnya tetap terbaca.
   (Elemen kecil seperti tab/chip aktif TIDAK termasuk — itu memang harus
   ikut tema.) */
html[data-theme="dark"] .contact-band,
html[data-theme="dark"] .ticker,
html[data-theme="dark"] .auction-band,
html[data-theme="dark"] .rules,
html[data-theme="dark"] .escrow-flow,
html[data-theme="dark"] .auth-aside{
  background:#1A1D20 !important;
  border-color:var(--line-strong);
}
/* Beri sedikit ring agar band gelap tidak "lebur" ke background gelap halaman */
html[data-theme="dark"] .contact-band,
html[data-theme="dark"] .rules,
html[data-theme="dark"] .escrow-flow{
  box-shadow:inset 0 0 0 1px var(--line);
}

/* ---------- Halaman auth (masuk / daftar) ---------- */
html[data-theme="dark"] .auth-box{
  background:var(--card); border:var(--slab-ring); box-shadow:var(--slab-shadow);
}
html[data-theme="dark"] .auth-err{ background:var(--danger-soft-bg); border-color:var(--stamp); box-shadow:none; }

/* ---------- Panel berbingkai "slab" di seluruh halaman (dark) ----------
   Komponen-komponen ini memakai border ink tebal + offset shadow keras
   sebagai identitas "grading slab" — bagus di LIGHT, tapi di DARK border
   off-white tebal terasa kasar dan offset shadow hitam tak terlihat.
   Di dark: hairline ring + shadow lembut. Light tidak tersentuh. */
html[data-theme="dark"] :is(
  .summary, .panel, .stat, .pay, .order-card, .receipt, .bigslab, .cart-row,
  .itemrow, .qty-box, .cert-check, .cert-check, .kontak-card, .toko-card,
  .toko-head, .toko-strip, .faq-item, .art-card, .article, .acc-card,
  .review-item, .refund-block, .tnc-block, .welcome, .step, .vw-step,
  .kt-opt, .pu-cond-item, .curator-box, .bidbox, .auc, .estat, .np-item,
  .claimbox, .okbox, .sellform, .perk, .flash, .thumb, .pack-photo,
  .unbox-reminder, .nf, .receipt, .cart-sum
){
  border-color:var(--line-strong) !important;
  border-width:1px !important;
}
html[data-theme="dark"] :is(
  .summary, .panel, .stat, .pay, .order-card, .receipt, .bigslab,
  .toko-head, .kontak-card, .toko-card, .art-card, .welcome, .curator-box,
  .bidbox, .sellform, .review-item, .cart-sum, .okbox, .claimbox
){
  box-shadow:var(--slab-shadow) !important;
}

/* Pastel status dalam bentuk KELAS (bukan inline) — samakan ke versi gelap */
html[data-theme="dark"] :is(.chip.pend, .kondisi-tag.bekas){ background:var(--warn-soft-bg) !important; color:var(--warn-soft-ink) !important; }
html[data-theme="dark"] :is(.chip.live, .kondisi-tag.baru){ background:var(--ok-soft-bg) !important; color:var(--ok-soft-ink) !important; }
html[data-theme="dark"] .chip.rej{ background:var(--danger-soft-bg) !important; color:var(--danger-soft-ink) !important; }

/* Elemen bulat kecil yang tadinya #fff (dot langkah tracking, thumb) →
   permukaan raised supaya terlihat di kanvas gelap */
html[data-theme="dark"] :is(.tstep .dot, .qty-box, .thumb){ background:var(--raised); }

/* Pemisah internal panel (header ringkasan, baris, dsb) yang memakai
   border ink tebal sebagai garis pembagi → hairline di dark */
html[data-theme="dark"] :is(
  .summary .h, .summary .r, .receipt .h, .toko-head, .notif-head,
  .panel-head, .cart-row, .itemrow
){ border-color:var(--line) !important; }

/* Produk detail: elemen tambahan yang perlu hairline di dark */
html[data-theme="dark"] :is(.bigslab, .claimbox, .toko-strip, .bidbox, .guarantee){
  border-color:var(--line-strong) !important; border-width:1px !important;
}
html[data-theme="dark"] .guarantee{ border-style:dashed !important; }
html[data-theme="dark"] :is(.bigslab, .claimbox, .bidbox){ box-shadow:var(--slab-shadow) !important; }
html[data-theme="dark"] :is(.speclist, .bigslab .serial){ border-color:var(--line) !important; }
html[data-theme="dark"] .bigslab .serial{ background:var(--paper); }

/* Ukuran emoji Twemoji (<img class="emoji">) supaya pas sejajar dengan
   teks di sekitarnya, bukan tampil kegedean/kekecilan atau naik-turun. */
img.emoji{ height:1.1em; width:1.1em; margin:0 .06em; vertical-align:-0.2em; display:inline-block; }

/* ============================================================
   SHARED — baris kategori (chip), filter & urutkan.
   Dipindah ke sini dari index.php supaya SEMUA halaman (beranda,
   katalog "Lihat Drop", direktori toko) memakai tampilan yang sama.
   Warna aktif/hover memakai warna default brand (oranye --stamp),
   bukan hitam.
   ============================================================ */
.cats{ display:flex; gap:10px; flex-wrap:wrap; }
.cat-chip{
  display:inline-flex; align-items:center; gap:8px; border:2px solid var(--ink);
  background:var(--card); border-radius:999px; padding:9px 16px; font-weight:700;
  font-size:13.5px; white-space:nowrap; color:var(--ink);
  transition:transform .1s, background .12s, border-color .12s;
}
.cat-chip:hover{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; transform:translateY(-2px); }
.cat-chip.active{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; }

/* Varian baris kategori yang DIGULIR HORIZONTAL (satu baris rapi,
   tidak menumpuk panjang ke bawah — penting untuk mobile).
   Dipakai di halaman katalog & direktori toko. */
.cats.scroll-x{
  flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; max-height:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.cats.scroll-x::-webkit-scrollbar{ height:5px; }
.cats.scroll-x::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.cats.scroll-x .cat-chip{ flex:0 0 auto; scroll-snap-align:start; }

/* ---- Toolbar hasil (katalog & toko): kiri jumlah hasil, kanan Filter + Urutkan.
        Dibuat satu baris simetris — tinggi tombol sama, gaya pill sama. ---- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:16px 0 20px; }
.toolbar .tcount{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.toolbar .tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tool-pill{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
  border:2px solid var(--ink); border-radius:999px; background:var(--card);
  font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.tool-pill:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(21,24,27,0.85); }
.tool-pill svg{ width:15px; height:15px; color:var(--stamp); flex:0 0 auto; }
.tool-pill.on{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; }
.tool-pill.on svg{ color:#fff; }

/* ---- Dropdown "Urutkan" (pill) ---- */
.sort-pill{
  position:relative; display:inline-flex; align-items:center; gap:8px; height:42px;
  border:2px solid var(--ink); border-radius:999px; background:var(--card);
  padding:0 34px 0 18px; cursor:pointer; transition:transform .1s, box-shadow .1s;
}
.sort-pill:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(21,24,27,0.85); }
.sort-pill .sort-ico{ width:15px; height:15px; color:var(--stamp); flex:0 0 auto; }
.sort-pill .sort-label{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; }
.sort-pill .sort-arrow{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:11px; height:11px; color:var(--ink); pointer-events:none; }
.sort-pill select{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

/* ---- Panel filter (kondisi / lokasi / harga) ---- */
.filter-panel{ margin-bottom:22px; }
.filter-toggle{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
  border:2px solid var(--ink); border-radius:999px; background:var(--card);
  font-weight:700; font-size:13px; cursor:pointer; list-style:none; user-select:none;
  transition:transform .1s, box-shadow .1s;
}
.filter-toggle::-webkit-details-marker{ display:none; }
.filter-toggle:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(21,24,27,0.85); }
.filter-toggle svg{ width:15px; height:15px; color:var(--stamp); }
.filter-dot{ width:7px; height:7px; border-radius:50%; background:var(--stamp); display:inline-block; }
.filter-body{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:end;
  border:2px dashed var(--ink); border-radius:14px; padding:18px; margin-top:12px; background:var(--paper);
}
.f-group label{ display:block; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.f-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.f-pill input{ display:none; }
.f-pill span{ display:inline-block; border:2px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; transition:background .12s, border-color .12s; }
.f-pill input:checked + span{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; }
.f-actions{ display:flex; gap:10px; grid-column:1/-1; }
@media (max-width:760px){ .filter-body{ grid-template-columns:1fr; } }

/* ============================================================
   BADGE TOKO — ✓ Verified (biru, berbayar) & 🏆 Founding Seller
   (emas, 20 toko pertama). Diatur admin di admin/toko.php; fee
   komisi tiap badge juga diatur di sana (3%–10%).
   ============================================================ */
.tbadges{ display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle; }
.tbadge{ display:inline-flex; align-items:center; gap:4px; font-weight:800; border-radius:999px; white-space:nowrap; line-height:1; }
.tbadge-sm{ font-size:10px; padding:4px 9px; }
.tbadge-md{ font-size:12px; padding:6px 13px; }
.tbadge-verified{ color:#fff; background:#2F7DE1; border:1.5px solid #1E5FB8; box-shadow:0 2px 6px rgba(47,125,225,0.35); }
.tbadge-founding{ color:#6B4A00; background:linear-gradient(120deg,#FFE9A8,#FFD25E); border:1.5px solid #C99A2E; box-shadow:0 2px 6px rgba(201,154,46,0.35); }
html[data-theme="dark"] .tbadge-founding{ color:#3E2B00; }

/* ============================================================
   KOMPATIBILITAS LINTAS BROWSER & PERANGKAT
   (Safari/iOS, Android WebView, Firefox, layar kecil)
   ============================================================ */

/* Cegah teks membesar sendiri saat rotasi di iOS/beberapa Android */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Hilangkan kotak highlight abu/biru saat tap di perangkat sentuh */
a, button, .btn, .cat-chip, .tool-pill, .sort-pill, .filter-toggle{ -webkit-tap-highlight-color:transparent; }

/* Gambar & video tidak pernah meluber keluar kolomnya.
   (Gambar pengisi-kotak seperti foto slab/banner memakai style inline
   height:100% yang selalu menang atas aturan elemen ini — aman.) */
img, video{ max-width:100%; height:auto; }

/* Nama produk/toko yang sangat panjang tidak menjebol layout sempit */
.slab h3, .toko-card h2, .toko-chip strong, .cl-item .who, .cp-head strong{ overflow-wrap:anywhere; word-break:break-word; }

/* Samakan tampilan input & textarea antar browser. SELECT sengaja
   DIBIARKAN NATIVE (appearance bawaan browser) — panah kustom sempat
   bertabrakan dengan gaya per-halaman (seller/checkout memakai
   appearance:auto) sehingga panah tampil dobel/besar. Panah native
   konsisten dan aman di semua browser. Checkbox & radio juga native. */
input.input, textarea.input{
  -webkit-appearance:none; appearance:none;
}
select.input{ -webkit-appearance:auto; appearance:auto; }

/* iOS Safari melakukan zoom paksa saat fokus ke input berukuran <16px —
   di layar kecil semua kolom isian dinaikkan ke 16px agar tidak "loncat". */
@media (max-width:760px){
  input.input, select.input, textarea.input{ font-size:16px; }
}

/* Perangkat sentuh: elemen interaktif diberi tinggi sentuh nyaman (≥42px) */
@media (hover:none){
  .cat-chip{ padding-top:11px; padding-bottom:11px; }
  .kat-pagination a, .kat-pagination span{ min-width:42px; height:42px; }
}

/* Firefox: samakan ketebalan garis fokus dengan browser lain */
input.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible, .btn:focus-visible{
  outline:2px solid var(--stamp); outline-offset:2px;
}

/* Layar sangat kecil (<380px): tombol & judul section tetap muat */
@media (max-width:380px){
  .section-head{ align-items:flex-start; flex-direction:column; gap:10px; }
  .btn-see-all{ align-self:flex-start; }
  .toolbar{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Shared pagination pills — one look everywhere (.kat-pagination).
   First used by katalog.php, now reused by the auctions page, store
   directory, seller dashboard, wishlist and admin lists.
   ============================================================ */
.kat-pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap; }
.kat-pagination a, .kat-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:2px solid var(--ink); border-radius:999px; font-family:var(--font-mono); font-weight:700; font-size:13px; text-decoration:none; color:var(--ink); background:var(--card); }
.kat-pagination a:hover{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; }
.kat-pagination .active{ background:var(--stamp); border-color:var(--stamp-dark); color:#fff; }
.kat-pagination .disabled{ opacity:0.35; pointer-events:none; }