/*
 * TEMPLATE 10 — "LEMBUT"
 *
 * Rujukan tampilan: "TPshop — Item GameShop UI design" oleh Wendri Tri Pambudi
 * (Dribbble). Kanvas kelabu muda, kartu putih berbayang lembut, sudut pil
 * penuh, satu aksen. Bentuknya ditiru; isinya tidak — lihat catatan `t10` di
 * config/fireflazz.php untuk yang sengaja tak dibuat.
 *
 * YANG MEMBEDAKANNYA DARI SEMBILAN TEMA LAIN: nominal diperlakukan sebagai
 * BARANG DAGANGAN, bukan sebagai baris pilihan. Sembilan tema lain memajang
 * game sebagai barangnya dan nominal sebagai daftar radio; di sini tiap nominal
 * punya kartunya sendiri dengan lencana diskon dan harga coret, dan halaman
 * belinya membuka panel produk berisi tiga angka yang benar-benar dihitung dari
 * tabel `orders` toko itu.
 *
 * TIGA HAL YANG MEMBENTUK "LEMBUT", dan ketiganya punya alasan yang bisa
 * diperiksa:
 *
 * 1. BAYANGAN GANDA, BUKAN GARIS. Permukaan dipisahkan bayangan lembut plus
 *    satu sorot putih di tepi atas — bukan garis 1px. Kanvas #EDEEF2 dipilih
 *    supaya kartu putih di atasnya benar-benar terbaca sebagai lapisan; di atas
 *    kanvas putih, bayangan selembut ini hilang sama sekali.
 *
 * 2. SUDUT PIL PENUH untuk apa pun yang bisa ditekan. Tombol, chip, kolom cari,
 *    dan tab aktif berbentuk pil; hanya kartu yang bersudut besar tapi tetap
 *    kotak. Itu yang membuat "bisa ditekan" terbaca tanpa satu kata pun.
 *
 * 3. TEKS TETAP TINTA GELAP DI ATAS PUTIH. Neumorfisme punya nama buruk karena
 *    tema yang menirunya ikut memucatkan tulisannya sampai tak terbaca.
 *    Kelembutan di sini hanya milik PERMUKAAN; kontras teks tak ikut dikorbankan
 *    — lihat --ink dan --ink-2 di bawah, keduanya diukur terhadap #FFFFFF dan
 *    #EDEEF2 sekaligus.
 *
 * Warna toko masuk lewat --accent dan --brand dari layout.
 */

:root {
  --bg:    #EDEEF2;
  --card:  #FFFFFF;
  /* Permukaan "tenggelam": kolom cari dan kolom isian. Lebih gelap daripada
     kanvas, bukan lebih terang — itu yang membuat mata membacanya sebagai
     cekungan alih-alih tonjolan. */
  --sunk:  #E3E5EC;
  --line:  #DDE0E9;

  /* 15,8:1 di atas putih, 14,1:1 di atas kanvas. */
  --ink:   #14161C;
  /* 7,4:1 di atas putih, 6,6:1 di atas kanvas — lulus AA untuk teks kecil. */
  --ink-2: #545B6B;
  /*
   * Tinta paling redup yang masih boleh memuat kata.
   *
   * Nilainya diturunkan dari #6E7686 sesudah audit-kontras mengukur halaman
   * jadinya: warna itu memang 5,3:1 di atas PUTIH, tapi ia hampir tak pernah
   * berdiri di atas putih — tempatnya di kanvas (#EDEEF2) dan di permukaan
   * tenggelam (#E3E5EC), dan di sana ia jatuh ke 3,94 dan 3,63. Yang ini
   * 5,2:1 di kanvas dan 4,8:1 di permukaan tenggelam.
   *
   * Pelajarannya: kontras token tinta wajib diukur terhadap permukaan tempat ia
   * BENAR-BENAR dipakai, bukan terhadap permukaan paling terang di tema.
   */
  --ink-3: #5C6474;

  --accent:     #2563EB;
  /* Tinta beraksen: 86% aksen + hitam. Rumusnya WAJIB sama persis dengan kunci
     `uji.tinta` template t10 di config/fireflazz.php, kalau tidak alat uji
     kontras mengukur warna yang berbeda dari yang dilihat pembeli. */
  --accent-ink: color-mix(in srgb, var(--accent) 86%, #000000);
  --accent-2:   var(--accent-ink);
  --accent-06:  color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-12:  color-mix(in srgb, var(--accent) 12%, transparent);
  --brand:      #F97316;

  --ok:   #047857;
  --bad:  #BE123C;
  --warn: #B45309;

  --r:    22px;
  --r-sm: 16px;
  --pil:  999px;

  /*
   * Bayangan ganda: satu tipis yang menempel di tepi (memberi bentuk), satu
   * lebar dan sangat encer (memberi jarak dari kanvas). Satu bayangan saja
   * selalu berakhir sebagai pilihan antara "kotor" dan "tak terlihat".
   */
  --sh:    0 1px 2px rgba(20, 22, 28, .04), 0 10px 22px -14px rgba(20, 22, 28, .30);
  --sh-lg: 0 2px 6px rgba(20, 22, 28, .05), 0 26px 46px -26px rgba(20, 22, 28, .38);
  /* Cekungan kolom isian. Sorot putih di sisi berlawanan yang membuatnya
     terbaca sebagai lubang, bukan sekadar kotak abu. */
  --sh-in: inset 2px 2px 5px rgba(155, 161, 176, .30), inset -2px -2px 5px rgba(255, 255, 255, .95);

  /* Bingkai dan jarak tepi bersama — dibaca blok bersama (banner, pengumuman,
     lapak, artikel, katalog, dokumen). Tanpa keduanya, halaman bersama akan
     lebih lebar daripada seluruh halaman lain di toko yang sama. */
  --ff-wrap:   1080px;
  --ff-gutter: 16px;

  /* Tinggi bilah tab + lekukan layar, dipakai di banyak tempat jadi satu
     sumber. 64px badan + 1px garis atasnya. */
  --tab-h: calc(65px + env(safe-area-inset-bottom, 0px));
  --bar-h: calc(74px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* Ruang untuk bilah tab yang menempel di bawah. Tanpa ini baris terakhir tiap
     halaman tertutup bilahnya, dan yang tertutup di halaman beli adalah tombol
     bayarnya sendiri. */
  padding-bottom: var(--tab-h);
  -webkit-font-smoothing: antialiased;
}

/* Halaman yang memasang bilah bayar menempel menumpuk dua bilah: bayar di atas
   tab. Ruangnya dijumlahkan di sini, bukan di masing-masing halaman. */
body.l10-has-bar { padding-bottom: calc(var(--tab-h) + var(--bar-h)); }

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.l10-wrap {
  width: 100%; max-width: var(--ff-wrap); margin: 0 auto;
  padding: 0 var(--ff-gutter);
}

/* Bilah atas MENEMPEL, jadi setiap lompatan ke jangkar mendarat di belakangnya:
   kolom cari katalog dan judul saldo tertutup persis oleh bilah itu, dan yang
   terlihat pembeli adalah halaman yang melompat ke tempat yang salah. */
#katalog, #saldo, #pesanan, #id-game { scroll-margin-top: 76px; }

/* ════════════════════════════ BILAH ATAS ════════════════════════════ */

.l10-top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 10px 0;
}
.l10-top-in { display: flex; align-items: center; gap: 10px; }

.l10-brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 0 0 auto; min-height: 42px; }
.l10-brand-mark {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; overflow: hidden;
  background: var(--card); box-shadow: var(--sh);
  font-weight: 800; font-size: 16px; color: var(--accent-ink);
}
.l10-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.l10-brand-name {
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Di layar sempit nama toko mengalah pada kolom cari: logonya sudah cukup
   memberi tahu pembeli ia sedang di toko siapa, dan kolom cari yang tersisa
   selebar delapan huruf tak berguna untuk siapa pun. */
@media (max-width: 430px) { .l10-brand-name { display: none; } }

/* Kolom cari di bilah atas berupa TAUTAN, bukan kolom isian.

   Kolom sungguhan di sini berarti setiap halaman menanggung daftar judul untuk
   menyaringnya — atau satu permintaan jaringan per ketukan. Yang ini membawa
   pembeli ke /katalog, tempat kolom aslinya berdiri tepat di atas kisi judul
   dan langsung menerima fokus. */
.l10-cari {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 16px; border-radius: var(--pil);
  background: var(--sunk); box-shadow: var(--sh-in);
  color: var(--ink-3); font-size: 14px;
}
.l10-cari svg { flex: 0 0 auto; }
.l10-cari span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.l10-bulat {
  flex: 0 0 auto;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--pil); background: var(--card); box-shadow: var(--sh);
  color: var(--ink-2); border: 0; cursor: pointer;
}
.l10-bulat:hover { color: var(--accent-ink); }

/* Pil saldo. Muncul HANYA kalau saldonya memang ada: pil "Rp 0" yang selalu
   terpajang mengajari mata untuk mengabaikannya, dan saat pengembalian dana
   benar-benar masuk tak ada yang menyadarinya. */
.l10-saldo {
  flex: 0 0 auto; height: 42px; display: inline-flex; align-items: center;
  padding: 0 15px; border-radius: var(--pil);
  background: var(--accent-12); color: var(--accent-ink);
  font-weight: 800; font-size: 13.5px; white-space: nowrap;
}

/* ════════════════════════════ BILAH TAB ════════════════════════════ */

/*
 * Empat tujuan di zona jempol, menggantikan footer sepenuhnya. Yang aktif
 * berbentuk pil beraksen berisi ikon DAN label; yang lain ikon saja — bentuk
 * yang ditiru dari rujukannya, dan yang membuat "kamu sedang di sini" terbaca
 * tanpa perlu membaca.
 *
 * Labelnya tetap ada di DOM untuk yang tak aktif, cuma disembunyikan secara
 * visual. Menghapusnya berarti pembaca layar mengumumkan empat tombol tanpa
 * nama.
 */
.l10-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-around; gap: 6px;
  height: var(--tab-h); padding: 0 10px env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
}
.l10-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 46px: sasaran sentuh Material, bukan tinggi ikonnya. */
  min-height: 46px; min-width: 46px; padding: 0 14px;
  border-radius: var(--pil); color: var(--ink-3); font-size: 13.5px; font-weight: 700;
}
.l10-tab.is-active { background: var(--accent); color: #fff; box-shadow: var(--sh); }
.l10-tab-label { white-space: nowrap; }
.l10-tab:not(.is-active) .l10-tab-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ════════════════════════════ BAGIAN & KARTU ════════════════════════════ */

.l10-sec { margin-top: 26px; min-width: 0; }
.l10-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.l10-sec-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
/* 40px + padding yang ditarik balik: sasaran sentuh naik dari 20px ke ukuran
   Material tanpa menggeser tepi kanannya sepiksel pun. */
.l10-sec-link {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 10px; margin-right: -10px;
  font-size: 13px; font-weight: 700; color: var(--accent-ink);
}
.l10-small { font-size: 12.5px; }
.l10-dim { color: var(--ink-3); }
.l10-mute { color: var(--ink-2); }
.l10-center { text-align: center; }
.l10-mono { font-variant-numeric: tabular-nums; }
.l10-mt-1 { margin-top: 8px; }
.l10-mt-2 { margin-top: 14px; }
.l10-mt-3 { margin-top: 20px; }

.l10-card {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh);
  padding: 17px; margin-top: 14px; min-width: 0;
}
.l10-card:first-child { margin-top: 0; }

.l10-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

.l10-alert {
  border-radius: var(--r-sm); padding: 12px 14px; margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.55;
}
.l10-alert-info  { background: var(--accent-06); color: var(--accent-ink); }
.l10-alert-error { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.l10-alert-ok    { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }

/* ════════════════════════════ TOMBOL ════════════════════════════ */

.l10-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; cursor: pointer;
  border-radius: var(--pil); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.l10-btn:hover { filter: brightness(1.06); }
.l10-btn:disabled { background: var(--sunk); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.l10-btn-ghost {
  background: var(--card); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--accent-12), var(--sh);
}
.l10-btn-ghost:disabled { box-shadow: none; }
.l10-btn-full { width: 100%; }

/* ════════════════════════════ KOLOM ISIAN ════════════════════════════ */

.l10-label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 7px; }
.l10-label:first-child { margin-top: 0; }
.l10-input {
  display: block; width: 100%;
  /* 16px WAJIB: Safari iOS memperbesar seluruh halaman begitu kolom yang
     difokus berukuran di bawah itu, dan halaman yang melompat saat pembeli
     mulai mengetik ID-nya terbaca seperti halaman rusak. */
  font-size: 16px; min-height: 50px; padding: 13px 16px;
  border: 0; border-radius: var(--r-sm);
  background: var(--sunk); box-shadow: var(--sh-in); color: var(--ink);
}
.l10-input::placeholder { color: var(--ink-3); }
.l10-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select.l10-input { appearance: none; padding-right: 40px; }
.l10-row-2 { display: grid; gap: 12px; }
@media (min-width: 560px) { .l10-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.l10-nick { margin: 9px 0 0; font-size: 13px; color: var(--ink-2); }
.l10-nick.is-ok  { color: var(--ok); font-weight: 700; }
.l10-nick.is-bad { color: var(--bad); font-weight: 700; }

/* Akun tersimpan. Baris ini yang membuat pembeli berulang tak perlu mengetik
   ID-nya lagi — dan ID game adalah hal yang paling sering salah diketik. */
.l10-saved { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.l10-saved::-webkit-scrollbar { display: none; }
.l10-saved-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 8px 15px 8px 8px; border: 0; cursor: pointer;
  border-radius: var(--pil); background: var(--card); box-shadow: var(--sh); text-align: left;
}
.l10-saved-btn.is-active { box-shadow: inset 0 0 0 2px var(--accent), var(--sh); }
.l10-saved-av {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--pil);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-12); color: var(--accent-ink); font-weight: 800; font-size: 13px;
}
.l10-saved-in { display: grid; min-width: 0; }
.l10-saved-in strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.l10-saved-in span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* ════════════════════════════ KEPALA BERANDA ════════════════════════════ */

.l10-halo { margin: 16px 0 0; }
.l10-halo h1 { margin: 0; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.18; letter-spacing: -.025em; }
.l10-halo p { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ════════════════════════════ DERET GESER ════════════════════════════ */

/*
 * `min-width: 0` pada induk WAJIB untuk setiap deret bergulir. Tanpa itu deret
 * yang lebih lebar daripada layar ikut melebarkan halaman, dan seluruh etalase
 * bisa digeser menyamping di HP. Jebakan yang sama sudah menelan T6 dan T8.
 */
.l10-deret {
  display: flex; gap: 12px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 0 6px;
  scroll-padding-inline: var(--ff-gutter);
  scrollbar-width: none;
}
.l10-deret::-webkit-scrollbar { display: none; }
.l10-deret > * { scroll-snap-align: start; }

/* Ubin judul: seni persegi + nama di bawahnya. Dipakai deret "populer" maupun
   kisi katalog, jadi ukurannya diatur induknya. */
.l10-tile { display: block; min-width: 0; }
.l10-tile-art {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 18px; overflow: hidden;
  background: var(--card); box-shadow: var(--sh);
}
.l10-tile-art img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.l10-tile:hover .l10-tile-art { box-shadow: var(--sh-lg); }
.l10-tile-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.3;
}
.l10-tile-price { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.l10-tile-price b { color: var(--accent-ink); font-weight: 800; }

.l10-deret .l10-tile { flex: 0 0 96px; width: 96px; }

.l10-kisi {
  display: grid; gap: 14px 12px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  /* Baris `auto` mengempis sebelum seninya termuat; max-content menahan tiap
     ubin setinggi isinya sendiri. */
  grid-auto-rows: max-content;
}

/* Atribut `hidden` KALAH oleh `display:block` di atas — nilai bawaan peramban
   untuk [hidden] punya kekhususan paling rendah. Tanpa dua aturan ini penyaring
   pencarian menyembunyikan ubinnya di DOM saja dan pembeli tetap melihat
   seluruh katalog. */
.l10-tile[hidden]  { display: none !important; }
.l10-genre[hidden] { display: none !important; }
.l10-genre { min-width: 0; }

.l10-tier {
  margin: 18px 0 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

/* ════════════════════════════ CHIP ════════════════════════════ */

.l10-chips {
  display: flex; gap: 8px; min-width: 0; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 14px;
  scroll-padding-inline: var(--ff-gutter); scrollbar-width: none;
}
.l10-chips::-webkit-scrollbar { display: none; }
.l10-chip {
  flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
  padding: 9px 16px; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--pil); background: var(--card); box-shadow: var(--sh);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.l10-chip.is-active { background: var(--accent); color: #fff; }

/* ════════════════════════ KARTU PRODUK (NOMINAL) ════════════════════════ */

/*
 * Inilah bentuk yang membedakan tema ini: NOMINAL sebagai kartu barang, dengan
 * seni judulnya, lencana diskon, harga, dan harga coret. Dipakai di beranda
 * ("paling laris") dan di halaman katalog nominal.
 *
 * Lencana diskonnya memakai persen yang dihitung terhadap angka coret yang
 * BENAR-BENAR dipajang di sebelahnya (StorefrontController::hargaProduk), bukan
 * angka yang diketik seller di formulir promo.
 */
.l10-prods {
  display: grid; gap: 13px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: max-content;
}
.l10-prod {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh);
  overflow: hidden;
}
.l10-prod:hover { box-shadow: var(--sh-lg); }
.l10-prod-art {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--accent-06); overflow: hidden;
}
.l10-prod-art img { width: 68%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 16px; }
.l10-prod-art span {
  font-size: 26px; font-weight: 800; color: var(--accent-ink);
  opacity: .55; letter-spacing: -.03em;
}
.l10-prod-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 10px; border-radius: var(--pil);
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 800;
}
.l10-prod-in { padding: 11px 13px 13px; display: grid; gap: 3px; }
.l10-prod-name {
  margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.l10-prod-game { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.l10-prod-price { margin: 5px 0 0; font-size: 15px; font-weight: 800; color: var(--accent-ink); letter-spacing: -.01em; }
.l10-prod-terjual { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ═══════════════════════ PANEL PRODUK (HALAMAN BELI) ═══════════════════════ */

.l10-panel { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.l10-panel-art {
  display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; background: var(--accent-06);
}
.l10-panel-art img { width: 132px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 22px; }
.l10-panel-in { padding: 16px 17px 18px; }
.l10-panel-name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.l10-panel-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.l10-panel-harga { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.l10-panel-harga b { font-size: 23px; font-weight: 800; color: var(--accent-ink); letter-spacing: -.02em; }

/*
 * Tiga angka. Yang tak punya datanya TIDAK dicetak sama sekali oleh viewnya —
 * ubin yang hilang jauh lebih baik daripada ubin yang berbohong. Karena itu
 * kisinya auto-fit: dua ubin pun tetap rapi.
 */
.l10-stats {
  display: grid; gap: 1px; margin-top: 15px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  background: var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.l10-stat { background: var(--card); padding: 12px 10px; text-align: center; min-width: 0; }
.l10-stat b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.l10-stat span { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); line-height: 1.35; }

/* ════════════════════════════ NOMINAL ════════════════════════════ */

.l10-noms { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; }
.l10-nom {
  position: relative; display: block; cursor: pointer; min-width: 0;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--card); box-shadow: var(--sh);
}
/*
 * Radio-nya dipotong, BUKAN diberi atribut `hidden`.
 *
 * `hidden` membuatnya tak bisa difokus sama sekali, sehingga pemakai papan
 * ketik kehilangan satu-satunya pilihan wajib di alur beli. Jebakan ini sudah
 * termakan di T7 dan diperbaiki di T8; tema ini lahir sesudahnya, jadi ia
 * memakai teknik yang benar sejak awal.
 */
.l10-nom input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.l10-nom:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent), var(--sh); }
.l10-nom.is-active, .l10-nom:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--accent), var(--sh);
  background: var(--accent-06);
}
.l10-nom-name { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.l10-nom-price { display: block; margin-top: 5px; font-size: 15px; font-weight: 800; color: var(--accent-ink); }
.l10-nom-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }

/* ════════════════════════════ RINGKASAN ════════════════════════════ */

.l10-sum-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--line);
}
.l10-sum-row > span:first-child { color: var(--ink-2); flex: 0 0 auto; }
.l10-sum-row > span:last-child { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.l10-sum-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-top: 13px; margin-top: 4px;
}
.l10-sum-total b { font-size: 21px; font-weight: 800; color: var(--accent-ink); letter-spacing: -.02em; }

.l10-pays { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.l10-pay { padding: 11px 13px; border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.l10-pay strong { display: block; font-size: 13px; font-weight: 800; }
.l10-pay span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }

.l10-trust { display: grid; gap: 8px; margin-top: 16px; }
.l10-trust-item { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.l10-trust-item svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--ok); }

/* ════════════════════════════ BILAH BAYAR ════════════════════════════ */

/*
 * Duduk TEPAT DI ATAS bilah tab, tidak menimpanya. Dua bilah bertumpuk membuat
 * orang menekan tab saat ia bermaksud membayar.
 */
.l10-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tab-h); z-index: 45;
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--ff-gutter) calc(12px + env(safe-area-inset-bottom, 0px) * 0);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
}
/* Atribut `hidden` kalah oleh `display:flex` di atas. Tanpa aturan ini bilah
   bayar muncul sebelum satu pun nominal dipilih — jebakan yang sudah menggigit
   di T1. */
.l10-bar[hidden] { display: none !important; }
.l10-bar-info { display: grid; min-width: 0; flex: 1 1 auto; }
.l10-bar-info span { font-size: 11.5px; color: var(--ink-3); }
.l10-bar-info strong { font-size: 17px; font-weight: 800; color: var(--accent-ink); letter-spacing: -.01em; }
@media (min-width: 720px) {
  .l10-bar { max-width: var(--ff-wrap); left: 50%; transform: translateX(-50%); border-radius: var(--r) var(--r) 0 0; }
}

/* ════════════════════════════ BARIS DAFTAR ════════════════════════════ */

.l10-rows { display: grid; gap: 10px; }
.l10-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 62px; padding: 12px 14px; border: 0; cursor: pointer;
  border-radius: var(--r-sm); background: var(--card); box-shadow: var(--sh);
}
.l10-row-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-06); color: var(--accent-ink); font-weight: 800; font-size: 15px;
}
.l10-row-ic img { width: 100%; height: 100%; object-fit: cover; }
.l10-row-in { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.l10-row-in strong { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.l10-row-in span { font-size: 11.5px; color: var(--ink-3); }
.l10-row-go { flex: 0 0 auto; color: var(--ink-3); font-size: 20px; line-height: 1; }
.l10-danger { color: var(--bad); }

.l10-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--pil); font-size: 11.5px; font-weight: 800;
}
.l10-badge-ok   { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.l10-badge-bad  { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.l10-badge-wait { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.l10-badge-run  { background: var(--accent-12); color: var(--accent-ink); }
.l10-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: l10-nadi 1.4s ease-in-out infinite;
}
@keyframes l10-nadi { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Titik berdenyut adalah hiasan, dan hiasan yang bergerak terus-menerus
   memusingkan sebagian orang. Sistem operasinya sudah menyimpan jawabannya. */
@media (prefers-reduced-motion: reduce) { .l10-dot { animation: none; } }

/* ════════════════════════════ HALAMAN PESANAN ════════════════════════════ */

.l10-stat-hero { text-align: center; padding: 26px 18px 22px; }
.l10-stat-ring {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-12); color: var(--accent-ink);
}
.l10-stat-ring.is-ok  { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.l10-stat-ring.is-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.l10-stat-hero h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.l10-stat-hero p { margin: 7px auto 0; max-width: 40ch; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.l10-kode {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--sunk); font-variant-numeric: tabular-nums;
}
.l10-kode b { font-size: 15px; font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; }

/* Kode voucher: BARANGNYA, bukan keterangan. Dipisahkan supaya tak terbaca
   sebagai baris ringkasan biasa dan tak ikut tersalin setengah. */
.l10-serial {
  margin-top: 14px; padding: 15px; border-radius: var(--r-sm);
  background: var(--accent-06); box-shadow: inset 0 0 0 1.5px var(--accent-12);
}
.l10-serial code {
  display: block; margin-top: 7px; font-size: 15px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
}

/* ════════════════════════════ BUKTI SOSIAL ════════════════════════════ */

/*
 * Popup "baru saja top up". Isinya hanya transaksi yang BENAR-BENAR terjadi
 * (App\Services\SocialProof) — tak ada bintang, jumlah terjual, atau ulasan
 * karangan di tema ini.
 */
.l10-proof {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + 12px); z-index: 60;
  display: flex; align-items: center; gap: 11px;
  max-width: 340px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--card); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(10px); transition: opacity .26s ease, transform .26s ease;
}
.l10-proof[hidden] { display: none !important; }
.l10-proof.is-in { opacity: 1; transform: translateY(0); }
.l10-proof-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); }
.l10-proof-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.l10-proof-title { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.l10-proof-meta { font-size: 11px; color: var(--ink-3); }
.l10-proof-x {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: var(--pil); background: transparent; color: var(--ink-3); font-size: 19px; line-height: 1;
}
@media (min-width: 560px) { .l10-proof { left: auto; right: 18px; } }

/* ════════════════════════════ BLOK BERSAMA ════════════════════════════ */

/*
 * Gaya blok bersama (banner, pengumuman, lapak, artikel, promo) terbit SESUDAH
 * theme.css — ia dicetak di badan halaman. Setiap penimpaan dari tema karena
 * itu wajib berpemilih dua tingkat, kalau tidak ia kalah tanpa satu pun galat.
 */
body .ff-ban img { border-radius: var(--r); }
@media (min-width: 900px) {
  /* Bingkai tema ini 1080px; spanduk 16:9 di situ setinggi 608px dan
     sendirian memakan seluruh layar pertama desktop. Yang digeser rasionya,
     bukan lebarnya. */
  body .ff-ban img { aspect-ratio: 2.7 / 1; }
}
body .ff-lp-card, body .ff-art-card { border-radius: var(--r-sm); }

/*
 * Blok lapak memakai `--accent` MENTAH untuk harganya. Di kanvas seterang ini
 * aksen mentah jatuh ke 4,46 — terukur di audit-kontras, dan sekadar meleset
 * dari 4,5. Yang dipakai di sini tinta beraksennya. Pemilihnya dua tingkat
 * karena gaya blok bersama terbit SESUDAH theme.css.
 */
body .ff-lp-harga, body .ff-lp-harga small { color: var(--accent-ink); }
/* Keterangan estimasi memakai opacity .6 di atas tinta gelap; hasilnya pas di
   ambang dan bergantung pembulatan. Dijadikan warna tetap, bukan tinta
   transparan. */
body .ff-lp-est { opacity: 1; color: var(--ink-2); }