/* ============================================================
   Sobat Toko — Maverick Enterprise UI System
   Token semantik OKLCH (primitive → semantic → component).
   Tema default: dark (identitas storefront); .theme-light untuk
   halaman marketing (/outlet). Tanpa build step — CSS variables.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/fonts/hanken-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Token semantik — DARK "Navy Teal" (desain Stitch pilihan user) ── */
:root {
  color-scheme: dark;   /* kontrol native (dropdown select dll) ikut gelap */
  --radius: 0.75rem;

  --background: #051424;
  --foreground: #d4e4fa;
  --card: #0d1c2d;
  --card-foreground: #d4e4fa;
  --popover: #1c2b3c;
  --popover-foreground: #d4e4fa;

  /* Aksen teal desain Stitch: primary = aksi (2dd4bf), primary-bright = heading (57f1db) */
  --primary: #2dd4bf;
  --primary-foreground: #00382f;
  --primary-bright: #57f1db;
  --secondary: #3a4a5f;
  --secondary-foreground: #d3e4fe;
  --muted: #122131;
  --muted-foreground: #a9bccf;
  --accent: #1c2b3c;
  --accent-foreground: #d4e4fa;

  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.696 0.17 162.5);
  --success-foreground: oklch(0.145 0 0);
  --warning: oklch(0.769 0.188 70.1);
  --warning-foreground: oklch(0.145 0 0);

  /* border = outline-variant desain Stitch ber-alpha */
  --border: rgb(90 110 130 / 28%);
  --border-strong: rgb(120 140 160 / 50%);
  --input: rgb(120 140 160 / 35%);
  --ring: rgb(45 212 191 / 50%);

  /* permukaan porselen dingin untuk media (logo gelap butuh latar terang) */
  --surface-media: #e9eff8;
  /* font display & body desain Stitch (di-scope .store; admin tetap Inter) */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* ── Token — LIGHT (halaman marketing /outlet) ────────────── */
.theme-light {
  color-scheme: light;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);

  --primary: #0f766e;                     /* teal-700 — AA di latar terang */
  --primary-foreground: #ffffff;
  --primary-bright: #0d9488;
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);

  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.527 0.154 150);
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.769 0.155 70);
  --warning-foreground: oklch(0.28 0.07 46);

  --border: oklch(0.922 0 0);
  --border-strong: oklch(0.85 0 0);
  --input: oklch(0.922 0 0);
  --ring: rgb(15 118 110 / 45%);
  --surface-media: oklch(0.97 0 0);
}

/* ── Base ──────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; border-color: var(--border); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11";
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--background);
  color: var(--foreground);
}
a { color: inherit; text-decoration: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgb(45 212 191 / 30%); }

/* focus ring seragam (resep sistem) */
:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--primary-foreground);
  padding: 0.5rem 1rem; border-radius: var(--radius-md); font-weight: 500; }
.skip-link:focus-visible { left: 0.5rem; top: 0.5rem; }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .container { padding: 0 1.5rem; } }

/* ── Typography util ───────────────────────────────────────── */
.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sec-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.sub { color: var(--muted-foreground); font-size: 0.875rem; }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.75rem; }
.tnum { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.link { color: var(--primary); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
.label-caps {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted-foreground);
}

/* ── Layout util (skala 4px) ───────────────────────────────── */
.row { display: flex; align-items: center; gap: 0.5rem; }
.row-3 { display: flex; align-items: center; gap: 0.75rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.stack { display: grid; gap: 0.75rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.maxw-sm { max-width: 26rem; } .maxw-md { max-width: 30rem; } .maxw-lg { max-width: 36rem; }
.center { text-align: center; }
.ic { flex: none; vertical-align: -0.1875em; }

/* ── Tombol ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 1rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; color: var(--foreground);
  background: transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out,
              border-color 150ms ease-out, box-shadow 150ms ease-out, opacity 150ms ease-out;
}
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.btn .ic { pointer-events: none; }
.btn-primary, .btn.primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover, .btn.primary:hover { background: #57f1db; }
.theme-light .btn-primary:hover { background: #0d9488; }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: #46586f; }
.theme-light .btn-secondary:hover { background: oklch(0.94 0 0); }
.btn-outline, .btn.ghost { border-color: var(--input); background: transparent; }
.btn-outline:hover, .btn.ghost:hover { background: var(--accent); }
.btn-ghost:hover { background: var(--accent); }
.btn-destructive { background: var(--destructive); color: #fff; }
.btn-destructive:hover { background: oklch(0.704 0.191 22.216 / 90%); }
.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
.btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
.btn-block { width: 100%; }
/* label panjang boleh membungkus (tombol massal admin) — jangan memecah 360px */
.btn-wrap { white-space: normal; height: auto; min-height: 2.25rem;
  padding-block: 0.5rem; text-align: left; }
.btn-icon { width: 2.25rem; padding: 0; }
@media (hover: none) {
  .btn { min-height: 2.75rem; }
  .btn-sm { min-height: 2.25rem; }
}

/* ── Form ──────────────────────────────────────────────────── */
.field > * + * { margin-top: 0.5rem; }
.field + .field { margin-top: 1rem; }
.label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.label .opt { color: var(--muted-foreground); font-weight: 400; }
.help { font-size: 0.75rem; color: var(--muted-foreground); }
.help.err { color: var(--destructive); }
.input, select.input, textarea.input {
  width: 100%; height: 2.5rem; padding: 0 0.75rem;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: transparent; color: var(--foreground);
  font: inherit; font-size: 1rem;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input::placeholder { color: oklch(0.72 0 0 / 85%); }
.theme-light .input::placeholder { color: oklch(0.5 0 0 / 85%); }
.input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
select.input { background: var(--card); }
select.input option, select.input optgroup {
  background: var(--popover); color: var(--foreground); }
.theme-light select.input { background: var(--card); }
.theme-light select.input option, .theme-light select.input optgroup {
  background: var(--card); color: var(--foreground); }
.input[aria-invalid="true"] { border-color: var(--destructive); }
.input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px oklch(0.704 0.191 22.216 / 25%); }
.input:disabled { pointer-events: none; opacity: 0.5; }
@media (hover: none) { .input { min-height: 2.75rem; font-size: 1rem; } }

/* input dengan ikon kiri */
.input-wrap { position: relative; }
.input-wrap .ic {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); opacity: 0.8; pointer-events: none;
}
.input-wrap .input { padding-left: 2.5rem; }

/* ── Kartu & panel ─────────────────────────────────────────── */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.panel { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem; }
@media (min-width: 768px) { .panel { padding: 1.25rem; } }
a.card, .card-link { display: block; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
a.card:hover, .card-link:hover { border-color: var(--border-strong); background: var(--popover); }

/* ── Badge (soft) ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  height: 1.375rem; padding: 0 0.5rem; border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.badge-success { background: oklch(0.696 0.17 162.5 / 12%); color: var(--success);
  box-shadow: inset 0 0 0 1px oklch(0.696 0.17 162.5 / 25%); }
.badge-warning { background: oklch(0.769 0.188 70.1 / 12%); color: var(--warning);
  box-shadow: inset 0 0 0 1px oklch(0.769 0.188 70.1 / 25%); }
.badge-destructive { background: oklch(0.704 0.191 22.216 / 12%); color: var(--destructive);
  box-shadow: inset 0 0 0 1px oklch(0.704 0.191 22.216 / 25%); }
.badge-neutral { background: var(--muted); color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--border); }
.theme-light .badge-success { color: oklch(0.44 0.13 155); }
.theme-light .badge-warning { color: oklch(0.55 0.13 70); }
.theme-light .badge-destructive { color: oklch(0.5 0.19 25); }

/* ── Alert / flash ─────────────────────────────────────────── */
.alert {
  display: flex; gap: 0.625rem; align-items: flex-start;
  padding: 0.75rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--card);
  font-size: 0.875rem; max-width: 40rem;
}
.alert .ic { margin-top: 0.125rem; }
.alert-success { border-color: oklch(0.696 0.17 162.5 / 30%); }
.alert-success .ic { color: var(--success); }
.alert-destructive { border-color: oklch(0.704 0.191 22.216 / 35%); }
.alert-destructive .ic { color: var(--destructive); }
.alert-warning { border-color: oklch(0.769 0.188 70.1 / 35%); }
.alert-warning .ic { color: var(--warning); }
.alert-info .ic { color: var(--muted-foreground); }

/* ── Tabel ─────────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; overflow-x: auto; background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  padding: 0.5rem 0.75rem; text-align: left;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); background: oklch(1 0 0 / 4%);
}
.theme-light .table th { background: var(--muted); }
.table td { padding: 0.625rem 0.75rem; border-top: 1px solid var(--border); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.pos { color: var(--success); font-weight: 500; }
.table td.neg { color: var(--destructive); font-weight: 500; }

/* ── Loading / status ──────────────────────────────────────── */
.skeleton { background: var(--muted); border-radius: var(--radius-md);
  animation: mv-pulse 1.6s ease-in-out infinite; }
@keyframes mv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.spinner {
  display: inline-block; width: 1rem; height: 1rem; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--primary);
  border-radius: 50%; animation: mv-spin 0.7s linear infinite;
  vertical-align: -0.1875em;
}
.spinner.lg { width: 2.75rem; height: 2.75rem; border-width: 3px; display: block; }
@keyframes mv-spin { to { transform: rotate(360deg); } }

/* status hero di halaman pesanan (ikon besar + judul + teks) */
.status-block { text-align: center; padding: 0.5rem 0; }
.status-block .status-ic {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
}
.status-ic.ok { background: oklch(0.696 0.17 162.5 / 14%); color: var(--success); }
.status-ic.warn { background: oklch(0.769 0.188 70.1 / 14%); color: var(--warning); }
.status-ic.err { background: oklch(0.704 0.191 22.216 / 14%); color: var(--destructive); }
.status-ic.wait { background: var(--muted); color: var(--muted-foreground); }
.status-block .status-title { font-size: 1rem; font-weight: 600; }

/* ── Empty state ───────────────────────────────────────────── */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted-foreground); }
.empty .ic { width: 2rem; height: 2rem; opacity: 0.6; margin-bottom: 0.5rem; }
.empty p { font-size: 0.875rem; margin-bottom: 0.75rem; }

/* ── Breadcrumb ────────────────────────────────────────────── */
.crumb { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.crumb a:hover { color: var(--foreground); }
.crumb .ic { opacity: 0.6; width: 0.875rem; height: 0.875rem; }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: rgb(5 20 36 / 88%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; gap: 1rem; height: 5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; flex: none; }
.store .brand > span:last-child { font-family: var(--font-display); color: var(--primary-bright); }
.brand-logo {
  width: 2rem; height: 2rem; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.nav-search { flex: 1; max-width: 28rem; margin: 0 auto; }
.nav-search .input, .nav-search-mobile .input { border-radius: 999px; background: var(--popover); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav-search-mobile { display: none; padding: 0 0 0.75rem; }
@media (max-width: 767px) {
  .nav-search { display: none; }
  .nav-search-mobile { display: block; }
}
/* di mobile "Kode Promo" sudah ada di bottom nav — navbar cukup ramping */
@media (max-width: 1023.98px) { .nav-actions .nav-promo { display: none; } }

/* ── Drawer menu samping (hamburger, ala Codashop) ─────────── */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-overlay { position: absolute; inset: 0; background: oklch(0 0 0 / 55%); }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(19rem, 86vw); display: flex; flex-direction: column;
  background: var(--card); border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform 200ms ease-out;
  overflow-y: auto;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); flex: none; }
.drawer-nav { display: grid; gap: 2px; padding: 0.5rem; align-content: start; }
.drawer-nav .side-group { padding: 0.75rem 0.75rem 0.25rem; }
.drawer-item { display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; color: var(--foreground);
  transition: background-color 150ms ease-out; }
.drawer-item .ic { color: var(--muted-foreground); }
.drawer-item:hover { background: var(--accent); }
.drawer-item.active { background: var(--secondary); font-weight: 600; }
.drawer-item.active .ic { color: var(--primary); }
@media (hover: none) { .drawer-item { min-height: 2.75rem; } }

/* ── Bottom navigation (mobile, ala Codashop/Stitch) ───────── */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: rgb(5 20 36 / 96%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom)); }
.bottomnav a, .bottomnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.375rem 0.25rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.6875rem; font-weight: 500; line-height: 1.2;
  color: var(--muted-foreground); border-radius: var(--radius-md); min-height: 2.75rem; }
.bottomnav .ic { width: 1.25rem; height: 1.25rem; }
.bottomnav .active { color: var(--primary-bright); font-weight: 600;
  background: rgb(45 212 191 / 10%); }
@media (min-width: 1024px) { .bottomnav { display: none; } }
@media (max-width: 1023.98px) {
  body.store:not(.no-bnav):not(.embed) main.site-main { padding-bottom: 5rem; }
  body.store:not(.no-bnav):not(.embed) .footer { padding-bottom: 5rem; }
}
body.no-bnav .bottomnav { display: none; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); margin-top: 3rem;
  padding: 2rem 0 2.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.footer-cols nav { display: grid; gap: 0.5rem; min-width: 10rem; align-content: start; }
.footer a:hover { color: var(--foreground); }
.footer-base { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
  font-size: 0.8125rem; }

/* ── Chip kategori ─────────────────────────────────────────── */
.catnav { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.125rem 0.125rem 0.75rem;
  scrollbar-width: thin; }
.catchip {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
  border: 1px solid var(--border); background: rgb(13 28 45 / 50%);
  font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.catchip .cat-ic { display: contents; }
.catchip .ic { width: 1.125rem; height: 1.125rem; }
.catchip:hover { color: var(--secondary-foreground); border-color: var(--border-strong); }
.catchip.active { color: var(--primary); border-color: var(--primary); }

.catchip .ic { color: var(--muted-foreground); }
.catchip:hover { border-color: var(--border-strong); background: var(--popover); }
.catchip.active { background: var(--secondary); border-color: var(--border-strong); font-weight: 600; }
.catchip.active .ic { color: var(--primary); }

/* ── Kartu brand (katalog) ─────────────────────────────────── */
.grid-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem; }
.brandcard { overflow: hidden; padding: 0; border-radius: 0.75rem;
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; }
.brandcard:hover { transform: translateY(-0.25rem);
  box-shadow: 0 12px 28px -14px rgb(45 212 191 / 15%); border-color: rgb(45 212 191 / 55%); }
.brandcard .thumb {
  height: 8rem; display: grid; place-items: center;
  background: var(--surface-media);
  margin: 0; border-radius: 0; border-bottom: 1px solid var(--border);
}
.brandcard .thumb img { max-width: 72%; max-height: 4.25rem; width: auto; height: auto; object-fit: contain; }
/* logo cerah → langsung di latar gelap (tanpa kotak porselen) */
.brandcard .thumb.dark { background: rgb(44 58 76 / 30%); }
.brandcard .thumb.dark img { max-height: 3.6rem; }
/* icon app persegi → gambar memenuhi tile (ala poster Codashop) */
.brandcard .thumb.cover { background: var(--card); margin: 0; height: 8rem;
  display: block; overflow: hidden; border-radius: 0; }
.brandcard .thumb.cover img { max-width: none; max-height: none; display: block;
  width: 100%; height: 100%; object-fit: cover; }

/* fallback tanpa logo: monogram kecil di tile porselen (bukan blok warna penuh) */
.brandcard .thumb .initial {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--surface-media) !important;
}
.brandcard .thumb .initial i {
  width: 3rem; height: 3rem; border-radius: var(--radius-md);
  display: grid; place-items: center; font-style: normal;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
}
.brandcard .meta { padding: 0.875rem 1rem 1rem; }
.brandcard .meta .kat { display: block; font-size: 0.75rem; font-weight: 500;
  color: var(--muted-foreground); margin-top: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brandcard .meta b { display: block; font-size: 0.8125rem; font-weight: 700; line-height: 1.3;
  color: var(--primary-bright); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brandcard .meta span { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.brandcard .meta .harga { font-size: 0.9375rem; font-weight: 700; color: var(--primary);
  margin-top: 0.375rem; font-variant-numeric: tabular-nums; }
.brandcard .meta .harga small { font-size: 0.6875rem; font-weight: 400; color: var(--muted-foreground); }

/* ── Tile (radio-card: nominal, metode bayar, jumlah top up) ─ */
.tile {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); padding: 0.75rem 0.875rem; cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.tile:hover { border-color: var(--border-strong); }
.tile.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
  background: rgb(45 212 191 / 8%); }
.theme-light .tile.sel { background: rgb(15 118 110 / 8%); }
.tile.dis { opacity: 0.45; pointer-events: none; }
/* nominal dlm jendela TUTUP (cut-off) provider: badge "Tutup" tetap terbaca penuh,
   hanya nama & harga yang diredupkan (override opacity .dis di atasnya). */
.tile.closed { opacity: 1; cursor: not-allowed; }
.tile.closed .dn, .tile.closed .price { opacity: 0.45; }
.tile-tag { margin-top: 0.375rem; height: auto; padding: 0.1875rem 0.375rem;
  font-size: 0.6875rem; font-weight: 600; }
/* radio tersembunyi tapi tetap focusable (keyboard) — jangan display:none */
.sr-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tile:has(.sr-input:focus-visible) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.tile[tabindex]:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.tile b { display: block; font-size: 0.875rem; font-weight: 600; }
.tile .desc { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.tile .price { display: block; font-size: 1rem; font-weight: 600; margin-top: 0.25rem;
  font-variant-numeric: tabular-nums; }
.tile .fee { display: block; font-size: 0.75rem; color: var(--warning); margin-top: 0.25rem; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Stepper checkout ──────────────────────────────────────── */
.step { display: flex; align-items: center; gap: 0.5rem;
  margin: 1.5rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; }
.step .n {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--secondary); color: var(--secondary-foreground);
  border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 600;
}
.step small { color: var(--muted-foreground); font-weight: 400; font-size: 0.75rem; }

/* ── Bar checkout sticky ───────────────────────────────────── */
.buybar {
  position: sticky; bottom: 0; z-index: 30; margin-top: 1.5rem;
  background: rgb(5 20 36 / 95%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
}
.buybar-inner { display: flex; align-items: center; gap: 0.75rem; }
.buybar .sum { flex: 1; min-width: 0; }
.buybar .sum .t { font-size: 0.75rem; color: var(--muted-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .sum .v { font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums; }

/* ── Modal pembayaran (bottom sheet HP, kartu tengah desktop) ─ */
.pm-overlay { position: fixed; inset: 0; z-index: 100;
  background: oklch(0 0 0 / 70%);
  display: flex; align-items: flex-end; justify-content: center; }
.pm-overlay[hidden] { display: none; }
.pm-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 30rem; height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.pm-head { display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--border);
  font-size: 1rem; font-weight: 600; flex: none; }
.pm-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--input); background: transparent; color: var(--foreground);
  cursor: pointer; transition: background-color 150ms ease-out;
}
.pm-close:hover { background: var(--accent); }
.pm-loading, .pm-error { padding: 3rem 1.5rem; text-align: center; }
.pm-frame { border: 0; width: 100%; flex: 1; min-height: 0; background: var(--card); }
@media (min-width: 560px) {
  .pm-overlay { align-items: center; padding: 1.25rem; }
  .pm-card { border-radius: var(--radius-xl); height: min(40rem, 90vh); }
}

/* ── Kotak kode bayar / QR (order & topup) ─────────────────── */
.code-box { border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background); padding: 0.875rem; text-align: center; }
.code-val { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qr-box { display: inline-block; background: var(--surface-media);
  padding: 0.5rem; border-radius: var(--radius-md); line-height: 0; }
.qr-box img { border-radius: var(--radius-sm); }

/* ── Util layout tambahan ──────────────────────────────────── */
main.site-main { min-height: 50vh; padding: 1.5rem 0 2.5rem; }
body.embed main.site-main { padding: 0; }
.row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.inline-form { display: inline; }
.footer-about { max-width: 18rem; }
.footer .brand { color: var(--foreground); }

/* ── FAQ accordion ─────────────────────────────────────────── */
.faq details { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 0.5rem; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 0.875rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { color: var(--muted-foreground); transition: transform 200ms ease-out; }
.faq details[open] summary .chev { transform: rotate(90deg); }
.faq summary:hover { background: var(--popover); }
.faq .ans { padding: 0 1rem 0.875rem; font-size: 0.875rem; line-height: 1.7;
  color: var(--muted-foreground); }
.faq .ans a { color: var(--primary); font-weight: 500; }
.faq .ans b { color: var(--foreground); }

/* ── Fold (panel opsional checkout — tertutup / terbuka / terpasang) ── */
details.fold { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; }
.fold summary { list-style: none; cursor: pointer; padding: 0.875rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.75rem; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { background: var(--popover); }
.fold summary .chev { color: var(--muted-foreground); flex: none; transition: transform 200ms ease-out; }
.fold[open] summary .chev { transform: rotate(90deg); }
.fold .fold-t { flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fold .fold-t .ic { color: var(--muted-foreground); flex: none; }
.fold .fold-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold .fold-body { padding: 0 1rem 1rem; }
.fold.applied summary .fold-t, .fold.applied summary .fold-t .ic { color: var(--success); }
.fold-x { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border: 0; background: none; border-radius: var(--radius);
  color: var(--muted-foreground); cursor: pointer; }
.fold-x:hover { background: var(--popover); color: var(--foreground); }
.fold-x[hidden] { display: none; }

/* ── Prosa (halaman legal) ─────────────────────────────────── */
.prose { max-width: 65ch; font-size: 1rem; line-height: 1.7; }
.prose h2 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 0.375rem; }
.prose p, .prose li { color: var(--muted-foreground); margin: 0.375rem 0; }
.prose b, .prose strong { color: var(--foreground); }
.prose ul { padding-left: 1.25rem; margin: 0.375rem 0; }
.prose a { color: var(--primary); font-weight: 500; }
.prose a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Scrollbar halus (dark) ────────────────────────────────── */
::-webkit-scrollbar { height: 8px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Mode embed (order di dalam modal iframe) ──────────────── */
body.embed { background: var(--card); }
body.embed main { padding: 0; }
body.embed .container { max-width: none; padding: 1rem; }

/* ── Admin shell (manage.sobatoko.id) ──────────────────────── */
:root { --sidebar: #0a1929; }
.theme-light { --sidebar: oklch(0.985 0 0); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-side { display: none; }
@media (min-width: 1024px) {
  .admin-side { display: flex; flex-direction: column; flex: none; width: 15rem;
    background: var(--sidebar); border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.side-brand { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; }
.side-nav { display: grid; gap: 2px; padding: 0.5rem; align-content: start; }
.side-group { padding: 0.75rem 0.75rem 0.25rem; }
.side-item { display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  font-size: 0.875rem; color: var(--muted-foreground); white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out; }
.side-item:hover { background: var(--accent); color: var(--foreground); }
.side-item.active { background: var(--secondary); color: var(--foreground); font-weight: 600; }
.side-item.active .ic { color: var(--primary); }
.side-foot { margin-top: auto; padding: 0.75rem; border-top: 1px solid var(--border);
  display: grid; gap: 0.25rem; }
button.side-item { width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; font-size: 0.875rem; }
.admin-main { flex: 1; min-width: 0; }
.admin-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  gap: 0.75rem; height: 3.5rem; padding: 0 1rem;
  background: rgb(5 20 36 / 92%); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
.admin-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border); scrollbar-width: thin; }
@media (min-width: 1024px) { .admin-topbar, .admin-tabs { display: none; } }
.admin-content { padding: 1rem; max-width: 90rem; }
@media (min-width: 768px) { .admin-content { padding: 1.5rem; } }

/* KPI stat (pola Tremor) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.stat { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.875rem 1rem; }
.stat .val { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-top: 0.25rem; line-height: 1.25; }
.stat.stat-danger .val { color: var(--destructive); }

/* toolbar filter + kontrol kecil admin */
.toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.input-inline, select.input-inline, textarea.input-inline {
  width: auto; height: 2.25rem; font-size: 0.875rem; min-height: 0; }
.bulkbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 0.875rem; }
.pagenav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }

/* pasangan label–nilai (detail entitas) */
.kv { display: grid; grid-template-columns: 9rem 1fr; gap: 0.375rem 0.75rem;
  font-size: 0.875rem; margin: 0; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* toast mini (feedback aksi admin, pengganti alert) */
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 200; background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.625rem 1rem; font-size: 0.875rem; max-width: min(90vw, 26rem); }

/* ── Emerald Noir: tipografi display serif (storefront saja, .store) ── */
/* Desain Stitch user: body storefront = Manrope; heading = Hanken Grotesk
   warna teal terang. (Admin tetap Inter penuh — alat operator.) */
body.store { font-family: var(--font-body); }
.store .page-title, .store .sec-title, .store .sec-lg,
.store .prose h2 {
  font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em;
  color: var(--primary-bright); }
.store .status-block .status-title { font-family: var(--font-display); font-weight: 650; }
/* Angka & harga SELALU Inter + tabular-nums (jangan serif — konsistensi antar
   harga di kartu, tile, buybar, tabel, dan kode bayar). */
.store .buybar .sum .v { font-size: 1.25rem; }

/* hero desain Stitch user: kartu glass di atas glow blobs, headline 2 tona */
.hero-wrap { position: relative; overflow: clip; border-radius: 1rem; }
.hero-wrap::before { content: ""; position: absolute; top: -6rem; right: -6rem;
  width: 24rem; height: 24rem; border-radius: 50%;
  background: rgb(45 212 191 / 10%); filter: blur(64px); pointer-events: none; }
.hero-wrap::after { content: ""; position: absolute; bottom: -4rem; left: -4rem;
  width: 16rem; height: 16rem; border-radius: 50%;
  background: rgb(58 74 95 / 12%); filter: blur(64px); pointer-events: none; }
.hero-banner { position: relative; overflow: hidden; margin-top: 1rem;
  border-radius: 1rem;
  background: rgb(1 15 31 / 80%);
  border: 1px solid var(--border);
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 2rem; }
.hero-main { flex: 1; min-width: 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.75rem; border-radius: 999px;
  background: rgb(39 54 71 / 50%); border: 1px solid var(--border);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--secondary-foreground); margin-bottom: 1.25rem; }
.hero-badge i { width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--primary); animation: mv-pulse 2s ease-in-out infinite; }
.hero-title { font-family: var(--font-display); font-weight: 750;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--primary-bright); max-width: 24ch; text-wrap: balance; }
.hero-title .alt { color: var(--secondary-foreground); }
.btn-hero { height: 2.875rem; padding: 0 1.5rem; border-radius: var(--radius-lg);
  font-weight: 700; font-size: 0.8125rem; }
.btn-hero:hover { box-shadow: 0 8px 24px -8px rgb(45 212 191 / 35%); filter: brightness(1.1); }
/* panel samping hero (desktop): sorotan produk nyata + tautan kode promo */
.hero-side { display: none; }
@media (min-width: 1024px) {
  .hero-banner { flex-direction: row; align-items: center; padding: 3rem 2.5rem; }
  .hero-side { display: flex; flex-direction: column; gap: 1rem; width: 15rem; flex: none; }
}
.hero-spot { position: relative; height: 13rem; border-radius: 0.75rem; overflow: hidden;
  border: 1px solid var(--border); background: rgb(13 28 45 / 50%); }
.hero-spot .slide { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.375rem; text-align: center;
  padding: 1rem 1rem 1.75rem; opacity: 0; transition: opacity 600ms ease; }
.hero-spot .slide.on { opacity: 1; }
.hero-spot img { width: 100%; height: 6.75rem; object-fit: cover; border-radius: 0.75rem; }
.hero-spot b { font-size: 0.8125rem; color: var(--primary-bright); }
.hero-spot span { font-size: 0.6875rem; color: var(--muted-foreground); }
.hero-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem; }
.hero-dots button { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 0;
  background: var(--border-strong); cursor: pointer; padding: 0; }
.hero-dots button.on { background: var(--primary); }
.hero-promo { padding: 0.875rem 1rem; border-radius: 0.75rem;
  border: 1px solid rgb(45 212 191 / 25%); background: rgb(45 212 191 / 6%); display: block; }
.hero-promo b { display: block; font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.25rem; }
.hero-promo span { font-size: 0.8125rem; color: var(--foreground); }

/* judul seksi katalog lebih tegas (sans tebal, ala Codashop) */
.sec-lg { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }

/* ── Guard reduced-motion (WAJIB sistem) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}