/*
 * TEMPLATE 12 — "LENTERA"
 *
 * Rujukan tampilan: lite-demo.tokotopup.id (potret HP dan desktop, 23 Agustus
 * 2026, dikirim pemilik). Yang ditiru BENTUKNYA: kanvas malam kebiruan, tiap
 * permukaan bersudut TERPOTONG SERONG, judul bagian ditulis kapital berjarak
 * lebar dengan ikon berkotak di depannya, seluruh katalog dipajang di beranda
 * dikelompokkan per kategori, dan halaman beli berupa empat langkah bernomor
 * dengan ringkasan pesanan yang berdiri sendiri.
 *
 * KENAPA TEMA INI ADA, padahal sudah ada sebelas. Empat hal yang tak dipunyai
 * satu pun dari sebelas itu:
 *
 * 1. SELURUH KATALOG DI BERANDA, TAPI DILIPAT PER KELOMPOK. Sebelas tema lain
 *    memilih salah satu: memajang semuanya sekaligus (beranda sepanjang enam
 *    layar di toko berkatalog 140 judul) atau memajang sebagian lalu menyuruh
 *    pembeli pindah halaman. Di sini tiap kelompok memajang dua belas judul
 *    pertama lalu satu tombol "Tampilkan semua (N)" yang membuka sisanya di
 *    tempat — tanpa memuat halaman, tanpa kehilangan posisi gulir.
 *
 * 2. REL KATEGORI MENEMPEL. Chip kategori duduk tepat di bawah bilah atas dan
 *    ikut menggulir bersama halaman; menekannya melompat ke kelompoknya. Di
 *    katalog 140 judul, penyaring yang ikut terbawa gulir adalah bedanya antara
 *    "pembeli menemukan Pulsa" dan "pembeli menyerah di layar ketiga".
 *
 * 3. PEMILIH NOMINAL YANG BISA DICARI. Mobile Legends punya 206 nominal. Chip
 *    kelompok saja tak cukup — yang mencari "86 diamond" masih harus menggulir
 *    melewati enam puluh kartu. Tema ini menaruh kolom cari DI DALAM langkah 2,
 *    dan tak satu pun template lain punya itu.
 *
 * 4. SUDUT TERPOTONG SEBAGAI KOSAKATA. T3 memakai sudut 0px, T10 pil penuh,
 *    T11 potongan gelombang di kaki poster. Di sini SETIAP permukaan — panel,
 *    kartu, tombol, kolom isian, chip — dipotong serong di dua sudut yang
 *    berseberangan. Itu yang membuat halaman ini terbaca sebagai satu benda,
 *    bukan sebagai kartu belanja yang kebetulan berwarna gelap.
 *
 * YANG SENGAJA TIDAK DITIRU DARI RUJUKANNYA, dan alasannya:
 *
 *   - Tombol "Ganti Tema" melayang di tepi kanan layar. Tampilan toko dipilih
 *     SELLER di panel, bukan pembeli di etalase; tombol yang mengubah wajah
 *     toko di tangan pembeli membuat dua orang melihat toko yang berbeda saat
 *     saling menunjukkan barangnya.
 *   - Tombol unduh "Google Play / App Store". Toko Fireflazz tak punya aplikasi;
 *     tombol yang mengantar ke halaman kosong lebih merusak kepercayaan
 *     daripada tak ada tombol sama sekali. Yang berdiri di tempatnya: ajakan
 *     memasang etalase ke layar utama, yang memang benar-benar bisa dilakukan
 *     (manifest per toko, lihat StorefrontController::manifest).
 *   - Blok "Mengapa pilih ..." berisi kartu bintang tanpa isi. Yang berdiri di
 *     tempatnya empat janji yang bisa ditunjuk ke kodenya.
 *   - Daftar metode pembayaran sebagai PILIHAN di langkah 3. Metodenya benar-
 *     benar dipilih di halaman gateway sesudah tombol bayar; daftar yang
 *     terlihat seperti pilihan padahal tidak menyimpan apa pun adalah tombol
 *     yang mengajari pembeli bahwa tombol di sini tak berarti. Di sini ia
 *     akordeon KETERANGAN, dan kalimatnya menyebutkan itu.
 *
 * Warna toko masuk lewat --accent dan --brand dari layout. Kanvasnya malam
 * NETRAL yang diberi setitik nada aksen: rujukannya biru tua karena mereknya
 * emas-di-atas-biru, dan tema yang memaku biru itu di sini akan bertengkar
 * dengan toko yang aksennya merah. Yang dipatok cuma gelapnya.
 */

:root {
  --ff-teks: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /*
   * Kanvas malam, panel bernada aksen. Angka campurannya sengaja kecil (4–8%):
   * di atas itu, toko beraksen kuning berdiri di atas kanvas cokelat dan tema
   * "malam" kehilangan malamnya.
   */
  --bg:     color-mix(in srgb, var(--accent) 5%, #0C111C);
  --card:   color-mix(in srgb, var(--accent) 7%, #141B2B);
  --card-2: color-mix(in srgb, var(--accent) 11%, #1A2234);
  /* Permukaan "tenggelam": kolom isian, keping angka, badan akordeon. Lebih
     GELAP dari kartu — di tema gelap, cekungan yang lebih terang terbaca
     sebagai tonjolan. */
  --sunk:   color-mix(in srgb, var(--accent) 4%, #090D16);
  --line:   color-mix(in srgb, var(--accent) 16%, #253048);

  /* 15,9:1 di atas kanvas. */
  --ink:   #EDF1F8;
  /* 7,6:1 di atas kanvas, 6,6:1 di atas kartu bernada paling terang. */
  --ink-2: #A6B1C6;
  /*
   * Tinta paling redup yang masih boleh memuat kata. 5,2:1 di atas kanvas dan
   * 4,6:1 di atas kartu. Diukur terhadap permukaan tempat ia BENAR-BENAR
   * berdiri, bukan terhadap permukaan paling gelap di tema — pelajaran yang
   * sudah dibayar sekali di T10.
   */
  --ink-3: #8A96AD;

  --accent: #FBBF24;
  /* Tinta beraksen: 70% aksen + putih. Rumusnya WAJIB sama persis dengan kunci
     `uji.tinta` template t12 di config/fireflazz.php — kalau menyimpang, alat
     uji kontras mengukur warna yang berbeda dari yang dilihat pembeli. */
  --accent-2:  color-mix(in srgb, var(--accent) 70%, #ffffff);
  --accent-06: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-28: color-mix(in srgb, var(--accent) 28%, transparent);
  /* Tulisan DI ATAS aksen. Gelap, bukan putih: putih di atas kuning/limau
     berhenti di sekitar 1,9 dan tombol paling penting di toko justru jadi yang
     paling sulit dibaca. Syarat yang sama dengan T1, T7, dan T11. */
  --on-accent: #0C111C;
  --brand: #38BDF8;

  --ok:     #34D399;
  --bad:    #FB7185;
  --warn:   #FBBF24;
  --danger: #FB7185;

  /*
   * SUDUT TERPOTONG — kosakata bentuk tema ini.
   *
   * `--cut` dipakai permukaan besar (panel, kartu, akordeon), `--cut-sm` untuk
   * yang bisa ditekan (tombol, chip, kolom isian). Keduanya memotong sudut
   * KIRI-ATAS dan KANAN-BAWAH; arah yang sama di seluruh halaman, karena dua
   * arah potongan yang bercampur terbaca sebagai kesalahan, bukan sebagai gaya.
   *
   * JEBAKAN yang harus diingat siapa pun yang menyentuh berkas ini:
   * clip-path MEMOTONG SEGALANYA milik elemen itu — termasuk bayangan luar,
   * cincin fokus `outline`, dan anak yang menyembul keluar. Karena itu:
   *   - garis tepi digambar `box-shadow: inset` (ikut terpotong dengan rapi),
   *     bukan `border` (yang di sudut serong menghilang setengah),
   *   - fokus papan ketik memakai `inset` juga (lihat :focus-visible di bawah),
   *   - lencana yang duduk di tepi kartu TIDAK BOLEH jadi anak elemen berklip.
   */
  --cut:    14px;
  --cut-sm: 9px;

  --sh: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 34px -24px rgba(0, 0, 0, .9);

  /* Bingkai dan jarak tepi bersama — dibaca blok bersama (spanduk, pengumuman,
     promo, lapak, artikel, katalog, dokumen, alat pemain). Tanpa keduanya,
     halaman bersama akan lebih lebar daripada seluruh halaman lain di toko. */
  --ff-wrap:   1160px;
  --ff-gutter: 15px;

  --top-h: 58px;
  /* Tinggi bilah tab bawah. Dibaca blok bersama (alat pemain menempelkan
     bilahnya di ATAS bilah tab, bukan di belakangnya). Di desktop bilah tabnya
     tak ada, jadi nilainya dinolkan di media query paling bawah berkas ini. */
  --tab-h: 62px;
}

* { box-sizing: border-box; }

/*
 * `hidden` KALAH oleh `display:` apa pun yang ditulis kelas — itu bagaimana
 * bilah bayar T1 pernah terbit sebelum satu nominal pun dipilih. Tema ini
 * menyembunyikan banyak hal lewat atribut itu (kartu di balik lipatan, blok
 * kelompok yang tersaring habis, tombol yang tak punya pekerjaan), jadi
 * aturannya ditegakkan satu kali di sini untuk seluruh berkas.
 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-teks);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* Bilah tab bawah menutupi kaki halaman kalau badan tak diberi ruang. */
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
}

/* Halaman yang memasang bilah pesan menempel butuh ruang tambahan di bawah,
   kalau tidak tombol bayar berdiri di atas kalimat terakhir halaman. */
body.l12-has-bar { padding-bottom: calc(var(--tab-h) + 92px + env(safe-area-inset-bottom, 0px)); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.2; }

/*
 * Fokus papan ketik. `outline` biasa akan dipotong habis oleh clip-path pada
 * elemen berbentuk serong, jadi yang dipakai cincin DI DALAM — satu-satunya
 * bentuk yang selamat. Elemen yang tak berklip tetap mendapat outline biasa.
 */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.l12-panel:focus-visible,
.l12-btn:focus-visible,
.l12-chip:focus-visible,
.l12-input:focus-visible,
.l12-nom:has(:focus-visible),
.l12-kartu:focus-visible,
.l12-lihat:focus-visible,
.l12-row:focus-visible,
.l12-saved-btn:focus-visible,
.l12-ikonbtn:focus-visible,
.l12-caripalsu:focus-visible,
.l12-saldo:focus-visible,
.l12-trust-item:focus-visible,
/* Kepala akordeon tak berklip sendiri, tapi INDUKNYA berklip — dan induk yang
   berklip memotong cincin fokus anaknya persis sama. */
.l12-pay-head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-2);
}

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

/* ───────────────────────────── BENTUK DASAR ───────────────────────────── */

/*
 * Potongannya ditulis ulang di tiap komponen, bukan dipinjam dari satu kelas
 * pembantu. Sengaja: `clip-path` tak bisa diwarisi maupun ditumpuk, jadi kelas
 * pembantu tetap harus menempel satu per satu di markup — dan yang lupa
 * menempelkannya terbit berbentuk kotak di tengah halaman yang semuanya
 * terpotong. Besar potongannya sendiri tetap satu sumber (--cut/--cut-sm di
 * :root), jadi mengubahnya sekali tetap mengubah seluruh toko.
 */
.l12-panel {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 16px;
  margin: 14px 0;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
}

/* ─────────────────────────────── BILAH ATAS ───────────────────────────── */

.l12-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.l12-top-in {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 10px;
}

.l12-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

/*
 * Satu-satunya tempat --brand (warna kedua toko) benar-benar terlihat.
 *
 * Bukan hiasan tanpa alasan: warna kedua bisa diatur seller di panel, dan
 * warna yang bisa diatur tapi tak pernah mengubah apa pun di layar adalah
 * kolom yang membuang waktu orang. Porsinya ditahan 40% supaya tulisan gelap
 * di atasnya tetap terbaca berapa pun gelapnya warna kedua yang dipilih.
 */
.l12-brand-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--brand) 40%, var(--accent)));
  color: var(--on-accent);
  font-weight: 900; font-size: 15px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  overflow: hidden;
}

.l12-brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.l12-brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.l12-top-sisa { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.l12-ikonbtn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0; cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-ikonbtn:hover { background: var(--card-2); color: var(--accent-2); }

.l12-saldo {
  font-size: 12.5px; font-weight: 800;
  color: var(--accent-2);
  background: var(--accent-14);
  padding: 6px 10px;
  white-space: nowrap;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Menu mendatar — hanya di desktop; di HP tugasnya dipegang bilah tab bawah. */
.l12-nav { display: none; }

/* Kolom cari di bilah atas. Bentuknya TAUTAN berbentuk kolom, bukan kolom
   sungguhan: kolom sungguhan di bilah yang ikut ke semua halaman berarti tiap
   halaman menanggung daftar judulnya, atau satu permintaan jaringan per
   ketukan. Yang aslinya berdiri di /katalog, dan ?fokus=1 langsung membuka
   papan tik di sana. */
.l12-caripalsu {
  display: none;
  align-items: center; gap: 8px;
  flex: 1; max-width: 380px;
  height: 36px; padding: 0 12px;
  background: var(--sunk);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-caripalsu:hover { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--accent-28); }

/* ───────────────────────────── BILAH TAB BAWAH ────────────────────────── */

.l12-tab {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.l12-tab-item {
  height: var(--tab-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
  position: relative;
}

.l12-tab-item svg { width: 21px; height: 21px; }

.l12-tab-item[aria-current="page"] { color: var(--accent-2); }

/* Penanda tab aktif: garis pendek di tepi ATAS, bukan lingkaran di belakang
   ikon — lingkaran di bilah setinggi 62px memakan seluruh tingginya. */
.l12-tab-item[aria-current="page"]::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 26px; height: 3px;
  transform: translateX(-50%);
  background: var(--accent);
}

/* ───────────────────────────── JUDUL BAGIAN ───────────────────────────── */

.l12-sec { margin: 26px 0; }

.l12-sec-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 13px;
}

.l12-sec-ic {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-14);
  color: var(--accent-2);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.l12-sec-ic svg { width: 15px; height: 15px; }

.l12-sec-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.l12-sec-link {
  margin-left: auto;
  font-size: 12.5px; font-weight: 700;
  color: var(--accent-2);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

.l12-halo { margin: 18px 0 4px; }

.l12-halo h1 {
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 900;
  letter-spacing: -.01em;
}

.l12-halo h1 em { font-style: normal; color: var(--accent-2); }

.l12-halo p { margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }

/* ─────────────────────────── REL KATEGORI MENEMPEL ────────────────────── */

/*
 * Rel kategori. Menempel tepat di bawah bilah atas dan ikut menggulir bersama
 * halaman — di katalog 140 judul, penyaring yang hilang begitu pembeli
 * menggulir adalah penyaring yang tak pernah dipakai dua kali.
 *
 * Ia menyembul ke tepi layar (margin negatif seukuran gutter) supaya chip
 * terakhir tak terlihat terpotong rapi di tepi bingkai — potongan di tepi layar
 * itulah yang memberi tahu bahwa daftarnya masih berlanjut.
 */
.l12-rail {
  position: sticky;
  top: var(--top-h);
  z-index: 50;
  margin: 0 calc(var(--ff-gutter) * -1);
  padding: 9px var(--ff-gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  display: flex; gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--ff-gutter);
}

.l12-rail::-webkit-scrollbar { display: none; }

.l12-chips {
  display: flex; gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 12px;
  padding-bottom: 2px;
}

.l12-chips::-webkit-scrollbar { display: none; }

.l12-chip {
  flex: none;
  padding: 7px 13px;
  background: var(--card);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em;
  border: 0; cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-chip:hover { color: var(--ink); background: var(--card-2); }

/*
 * Chip terpilih TIDAK diisi aksen bertulisan putih: separuh palet tema ini
 * menyala terang, dan putih di atas kuning terukur 1,9:1. Yang dipakai
 * semburan aksen tipis + garis aksen + tinta aksen-terang — pola yang sama
 * dengan blok katalog bersama.
 */
.l12-chip.is-active {
  background: var(--accent-14);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px var(--accent-28);
}

/* ──────────────────────────── KARTU JUDUL GAME ────────────────────────── */

/*
 * SETIAP KISI DI BERKAS INI MEMAKAI minmax(0, 1fr), BUKAN 1fr.
 *
 * `1fr` adalah singkatan dari `minmax(auto, 1fr)`, dan `auto` di sisi minimum
 * berarti "jangan pernah lebih sempit daripada isi terpanjang yang tak bisa
 * dipenggal". Satu judul bernama "Goddess of Victory: NIKKE" karena itu
 * MELEBARKAN kolomnya, ketiga kolom ikut melebar, dan SELURUH HALAMAN bisa
 * digeser ke samping di layar 320px — nama toko di bilah atas ikut bergeser
 * keluar layar bersamanya.
 *
 * Terukur 23 Agustus 2026 di layar 320px: beranda meluber 23px, katalog 110px.
 * Yang menahannya bukan `overflow: hidden` di anaknya (itu memotong tampilan,
 * bukan menyusutkan kolomnya) melainkan minimum yang benar-benar nol.
 */
.l12-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.l12-kartu {
  position: relative;
  display: block;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  transition: transform .16s ease, background .16s ease;
}

.l12-kartu:hover { transform: translateY(-2px); background: var(--card-2); }

.l12-kartu-art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sunk);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-3);
  font-weight: 900; font-size: 24px;
}

.l12-kartu-art img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Lencana "Populer" — hanya untuk judul yang benar-benar disematkan seller di
 * /seller/games, bukan untuk semua kartu. Lencana yang menempel di setiap
 * kartu tak menandai apa pun.
 *
 * Duduknya di sudut KANAN-ATAS, dan itu bukan selera: sudut kiri-atas kartu
 * ini dipotong serong oleh clip-path induknya, dan lencana yang ditaruh di
 * sana terbit terpotong separuh.
 */
.l12-kartu-tanda {
  position: absolute; top: 0; right: 0;
  padding: 3px 9px 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

.l12-kartu-in {
  padding: 8px 10px 10px;
  display: block;
}

.l12-kartu-nama {
  display: block;
  font-size: 12.5px; font-weight: 700;
  line-height: 1.3;
  /* Nama sepanjang "PUBG: Battlegrounds Voucher" di kartu selebar 110px harus
     berhenti di dua baris; kartu yang tingginya mengikuti nama membuat kisi
     bergerigi. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  /* Nama tanpa spasi sepanjang kolomnya dipenggal, bukan dibiarkan menonjol:
     kisinya sudah tak bisa melebar (minmax 0), jadi tanpa ini yang terjadi
     bukan kartu yang lebih lebar melainkan huruf yang terpotong di tengah. */
  overflow-wrap: anywhere;
}

.l12-kartu-harga {
  display: block;
  margin-top: 3px;
  font-size: 11.5px; font-weight: 800;
  color: var(--accent-2);
  letter-spacing: .01em;
}

/* Tombol "Tampilkan semua (N)" — pembuka kelompok yang dilipat. */
.l12-lihat {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--card);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em;
  border: 0; cursor: pointer;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-lihat:hover { color: var(--accent-2); background: var(--card-2); }

.l12-lihat svg { width: 14px; height: 14px; transition: transform .18s ease; }

.l12-lihat[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Kelompok katalog. `scroll-margin-top` WAJIB: rel kategori menempel di bawah
   bilah atas, dan lompatan jangkar tanpa margin ini mendaratkan judul
   kelompoknya persis di balik keduanya. */
.l12-blok { scroll-margin-top: calc(var(--top-h) + 52px); }

/* ─────────────────────────────── BARIS DAFTAR ─────────────────────────── */

.l12-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.l12-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

a.l12-row:hover { background: var(--card-2); }

.l12-row-ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--sunk);
  color: var(--ink-2);
  font-weight: 900;
  overflow: hidden;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-row-ic img { width: 100%; height: 100%; object-fit: cover; }

.l12-row-in { min-width: 0; flex: 1; display: block; }

.l12-row-in strong {
  display: block;
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.l12-row-in span {
  display: block;
  font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.l12-row-go { color: var(--ink-3); font-size: 20px; line-height: 1; }

/*
 * BARIS DI LAYAR SEMPIT: lencana status turun ke barisnya sendiri.
 *
 * Lencana "Menunggu pembayaran" selebar 148px dan tak boleh dipenggal. Di layar
 * 320px ia menyisakan sekitar 110px untuk nama produk — dan yang terbaca
 * pembeli tinggal "1…" dan "Weekl…". Halamannya memang tak lagi meluber
 * (kisinya sudah minmax 0), tapi barisnya jadi tak mengabarkan apa pun.
 *
 * Ambangnya 430px, bukan 360px: di 390px pun "Menunggu pembayaran" ditambah
 * seni 40px menyisakan nama yang terpotong di tengah kata.
 *
 * `flex-basis: calc(100% - 51px)` (seni 40px + jarak 11px) yang mendorongnya
 * turun — bukan `flex-wrap` sendirian: pembungkusan diputuskan dari ukuran
 * DASAR item, jadi tanpa basis yang pas lencana pendek seperti "Berhasil"
 * tetap ikut di baris pertama sementara yang panjang turun, dan daftar yang
 * sama jadi punya dua bentuk.
 */
@media (max-width: 430px) {
  .l12-row { flex-wrap: wrap; row-gap: 7px; }

  .l12-row-in { flex-basis: calc(100% - 51px); }

  /* Disejajarkan dengan teksnya, bukan dengan tepi kartu: lencana yang mulai
     di bawah seni terbaca seperti milik baris berikutnya. */
  .l12-row > .l12-badge,
  .l12-row > form { margin-left: 51px; }

  /* Baris tanpa seni (mutasi saldo) tak punya 51px untuk dilewati. */
  .l12-row:not(:has(.l12-row-ic)) .l12-row-in { flex-basis: 100%; }
  .l12-row:not(:has(.l12-row-ic)) > .l12-badge,
  .l12-row:not(:has(.l12-row-ic)) > form { margin-left: 0; }

  /* Baris berpanah (artikel) tak punya lencana — panahnya tetap di baris
     pertama, dan untuk itu teksnya harus menyisakan tempat. */
  .l12-row:has(.l12-row-go) .l12-row-in { flex-basis: calc(100% - 51px - 22px); }
}

/* ───────────────────────────── LENCANA & ALERT ────────────────────────── */

.l12-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .03em;
  background: var(--sunk);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.l12-badge-ok   { color: var(--ok);   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.l12-badge-bad  { color: var(--bad);  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent); }
.l12-badge-wait { color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.l12-badge-run  { color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-28); }

.l12-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: l12-nadi 1.4s ease-in-out infinite;
}

@keyframes l12-nadi { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.l12-alert {
  margin: 12px 0;
  padding: 11px 13px;
  font-size: 13px;
  background: var(--card);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-alert strong { color: var(--ink); }

.l12-alert-info  { box-shadow: inset 0 0 0 1px var(--accent-28); }
.l12-alert-ok    { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 42%, transparent); color: var(--ok); }
.l12-alert-error { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 42%, transparent); color: var(--bad); }

/* ──────────────────────────── TOMBOL & ISIAN ──────────────────────────── */

.l12-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit; font-size: 14px; font-weight: 900;
  letter-spacing: .04em;
  border: 0; cursor: pointer;
  text-align: center;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #ffffff); }

.l12-btn:disabled {
  background: var(--card-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

.l12-btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.l12-btn-ghost:hover { background: var(--card-2); color: var(--ink); }

.l12-btn-full { width: 100%; }

.l12-danger { color: var(--bad); }

.l12-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-2);
}

.l12-input {
  width: 100%;
  padding: 12px 13px;
  background: var(--sunk);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit;
  /* 16px: di bawah itu Safari iOS memperbesar sendiri halamannya begitu kolom
     menerima fokus, dan pembeli mendarat di halaman yang sudah tergeser. */
  font-size: 16px;
  border: 0;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-input::placeholder { color: var(--ink-3); }

.l12-input:focus { box-shadow: inset 0 0 0 2px var(--accent-28); outline: none; }

select.l12-input { appearance: none; }

.l12-row-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.l12-hint { margin: 7px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.l12-small { font-size: 12px; }
.l12-dim   { color: var(--ink-3); }
.l12-mute  { color: var(--ink-2); }
.l12-mono  { font-variant-numeric: tabular-nums; }
.l12-center { text-align: center; }

/* Formulir sebaris (lacak pesanan) tak perlu selebar katalog: kolom isian
   sepanjang 1080px dengan tombol selebar itu terbaca seperti halaman yang
   belum selesai ditata, bukan seperti formulir. */
.l12-sempit { max-width: 560px; }

/*
 * Halaman-halaman yang isinya NOTA, bukan katalog: status pesanan, dokumen.
 *
 * Di layar 1440px, baris "Tujuan …………… 1160220317" merentang 1120px — nama
 * kolom di ujung kiri dan isinya di ujung kanan, dan mata harus menyeberangi
 * setengah meja untuk memasangkan keduanya. Nota memang dibaca, bukan
 * dipindai seperti kisi katalog.
 */
.l12-nota { max-width: 700px; }

/* Tombol keluar tak perlu selebar halaman: ia tindakan sekali setahun, dan
   tombol sebesar itu di bawah daftar pesanan mengundang ketukan yang tak
   diniatkan. */
.l12-keluar { max-width: 240px; }

.l12-mt-1 { margin-top: 8px; }
.l12-mt-2 { margin-top: 14px; }
.l12-mt-3 { margin-top: 20px; }

/* ID tujuan tersimpan (tombol isi cepat). */
.l12-saved { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.l12-saved::-webkit-scrollbar { display: none; }

.l12-saved-btn {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 7px;
  background: var(--sunk);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0; cursor: pointer; font: inherit;
  text-align: left;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-saved-btn.is-active { box-shadow: inset 0 0 0 1px var(--accent-28); }

.l12-saved-av {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-14);
  color: var(--accent-2);
  font-weight: 900; font-size: 12px;
}

.l12-saved-in strong { display: block; font-size: 12.5px; }
.l12-saved-in span   { display: block; font-size: 11px; color: var(--ink-3); }

.l12-nick { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); }
.l12-nick.is-ok  { color: var(--ok); font-weight: 700; }
.l12-nick.is-bad { color: var(--bad); }

/* ────────────────────────── HALAMAN BELI: KEPALA ──────────────────────── */

/*
 * Spanduk judul. Seninya persegi (itu yang dipunyai katalog), jadi bidang
 * lebar ini diisi dua lapis: salinan seni yang diburamkan sebagai latar, lalu
 * seni utuh di tengahnya. Teknik yang sama dipakai T8 dan T11 — tanpa itu,
 * gambar persegi yang dipaksa selebar layar akan terpotong sampai tinggal
 * hidungnya.
 */
.l12-hero { margin: 14px 0 0; }

.l12-hero-ban {
  position: relative;
  aspect-ratio: 16 / 6;
  max-height: 260px;
  overflow: hidden;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
}

.l12-hero-bg {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(26px) saturate(1.15) brightness(.5);
}

.l12-hero-utuh {
  position: relative;
  height: 100%;
  margin: 0 auto;
  width: auto;
  object-fit: contain;
}

.l12-hero-top {
  display: flex; align-items: center; gap: 12px;
  margin-top: -26px;
  padding: 0 4px;
  position: relative;
}

.l12-hero-art {
  width: 74px; height: 74px; flex: none;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh);
  overflow: hidden;
  display: grid; place-items: center;
  font-weight: 900; font-size: 22px; color: var(--ink-3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.l12-hero-art img { width: 100%; height: 100%; object-fit: cover; }

.l12-hero-in { min-width: 0; padding-top: 26px; }

.l12-hero-name {
  font-size: clamp(17px, 4.6vw, 24px);
  font-weight: 900;
  letter-spacing: -.01em;
}

.l12-hero-pub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }

.l12-trust { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }

.l12-trust-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  font-size: 11.5px; font-weight: 700;
  background: var(--card);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.l12-trust-item svg { width: 13px; height: 13px; color: var(--accent-2); }

.l12-desk { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ─────────────────────────── HALAMAN BELI: PETA ───────────────────────── */

/*
 * Peta langkah. Di HP ia melipat jadi baris berangka yang bisa digeser; di
 * desktop menjadi empat titik bergaris penghubung seperti rujukannya.
 *
 * Ia BUKAN navigasi — menekannya menggulir ke langkahnya, tak ada langkah yang
 * dikunci. Alur beli yang mengunci langkah berikutnya sampai yang sebelumnya
 * "sah" akan menahan pembeli yang mengetik ID-nya paling akhir, dan itu
 * separuh dari mereka.
 */
.l12-peta {
  display: flex;
  gap: 6px;
  margin: 16px 0 0;
  padding: 11px 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
}

.l12-peta::-webkit-scrollbar { display: none; }

.l12-peta-item {
  flex: 1 0 auto;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}

.l12-peta-no {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 11.5px; font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.l12-peta-item.is-done .l12-peta-no,
.l12-peta-item:first-child .l12-peta-no {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.l12-peta-item.is-done { color: var(--ink); }

.l12-peta-garis { flex: 1; height: 1px; background: var(--line); align-self: center; min-width: 14px; }

/* ────────────────────────── HALAMAN BELI: LANGKAH ─────────────────────── */

.l12-beli { display: block; }

.l12-langkah {
  margin: 14px 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  scroll-margin-top: calc(var(--top-h) + 14px);
}

.l12-langkah-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  background: var(--card-2);
}

.l12-langkah-no {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900; font-size: 14px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.l12-langkah-title {
  font-size: 13.5px; font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.l12-langkah-body { padding: 15px; }

.l12-tier {
  margin: 18px 0 9px;
  font-size: 11.5px; font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Nominal. Dua kolom di HP seperti rujukannya — satu kolom membuat daftar 206
   nominal sepanjang empat puluh layar. */
.l12-noms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.l12-nom {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-nom:hover { background: var(--card-2); }

.l12-nom input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.l12-nom.is-active {
  background: var(--accent-06);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.l12-nom-name { font-size: 12.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }

.l12-nom-price { font-size: 13.5px; font-weight: 900; color: var(--accent-2); margin-top: auto; }

/* ─────────────────── HALAMAN BELI: AKORDEON PEMBAYARAN ────────────────── */

.l12-pay { display: grid; gap: 8px; }

.l12-pay-item {
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-pay-head {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 12px 13px;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}

.l12-pay-ic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-14);
  color: var(--accent-2);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.l12-pay-ic svg { width: 16px; height: 16px; }

.l12-pay-in { flex: 1; min-width: 0; }
.l12-pay-in strong { display: block; font-size: 13px; font-weight: 800; }
.l12-pay-in span   { display: block; font-size: 11.5px; color: var(--ink-3); }

.l12-pay-tanda { color: var(--ink-3); transition: transform .18s ease; }
.l12-pay-tanda svg { width: 15px; height: 15px; }
.l12-pay-head[aria-expanded="true"] .l12-pay-tanda { transform: rotate(180deg); }

.l12-pay-body { padding: 0 13px 13px; display: flex; flex-wrap: wrap; gap: 6px; }

.l12-pay-chip {
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 700;
  background: var(--card-2);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* ───────────────────── HALAMAN BELI: RINGKASAN PESANAN ────────────────── */

.l12-sum-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.l12-sum-row > span:first-child { color: var(--ink-3); flex: none; }
.l12-sum-row > span:last-child  { text-align: right; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }

.l12-sum-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0 4px;
  font-size: 14px;
}

.l12-sum-total b { font-size: 19px; font-weight: 900; color: var(--accent-2); }

.l12-janji { display: grid; gap: 7px; margin-top: 14px; }

.l12-janji-item {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}

.l12-janji-item svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-2); }

/* Bilah bayar menempel — HP saja; di desktop ringkasannya sudah berdiri
   sendiri di kolom kanan dan bilah kedua cuma menutupi katalog. */
.l12-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  display: flex; align-items: center; gap: 11px;
  padding: 10px var(--ff-gutter);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -20px rgba(0, 0, 0, .9);
}

/* `hidden` kalah oleh `display:flex` — tanpa baris ini bilahnya sudah berdiri
   sebelum satu nominal pun dipilih. Jebakan yang sudah dibayar sekali di T1. */
.l12-bar[hidden] { display: none !important; }

.l12-bar-art {
  width: 40px; height: 40px; flex: none;
  background: var(--card-2);
  overflow: hidden;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-bar-art img { width: 100%; height: 100%; object-fit: cover; }

.l12-bar-info { flex: 1; min-width: 0; display: block; }
.l12-bar-info span { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l12-bar-info strong { display: block; font-size: 15px; font-weight: 900; color: var(--accent-2); }

/* ──────────────────────────── HALAMAN PESANAN ─────────────────────────── */

.l12-status { text-align: center; }

.l12-status-ring {
  width: 58px; height: 58px;
  margin: 0 auto 11px;
  display: grid; place-items: center;
  background: var(--accent-14);
  color: var(--accent-2);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.l12-status-ring.is-ok  { background: color-mix(in srgb, var(--ok) 16%, transparent);  color: var(--ok); }
.l12-status-ring.is-bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

.l12-status h1 { font-size: 19px; font-weight: 900; }
.l12-status p  { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; }

.l12-kode {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 13px;
  padding: 11px 13px;
  background: var(--sunk);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-kode b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .06em; }

.l12-serial {
  margin-top: 13px;
  padding: 12px 13px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--accent-28);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.l12-serial code {
  display: block;
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

.l12-amt { font-size: 27px; font-weight: 900; color: var(--accent-2); letter-spacing: -.01em; }

/* ────────────────────────────── KAKI HALAMAN ──────────────────────────── */

.l12-foot {
  margin-top: 34px;
  padding: 26px 0 22px;
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--line);
}

.l12-foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.l12-bayar { margin-top: 22px; }

.l12-bayar-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.l12-foot-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ─────────────────────────── POPUP BUKTI SOSIAL ───────────────────────── */

.l12-proof {
  position: fixed;
  left: var(--ff-gutter);
  bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 68;
  max-width: 310px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .26s ease, transform .26s ease;
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)
  );
}

.l12-proof.is-in { opacity: 1; transform: translateY(0); }

.l12-proof-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.l12-proof-body { min-width: 0; display: block; }
.l12-proof-title { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l12-proof-meta  { display: block; font-size: 11px; color: var(--ink-3); }

.l12-proof-x {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 19px; line-height: 1;
  padding: 0 2px;
}

/* ───────────────────────────────── LEBAR ──────────────────────────────── */

@media (min-width: 480px) {
  .l12-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .l12-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 720px) {
  :root { --ff-gutter: 20px; }

  .l12-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .l12-noms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /*
   * Jumlah kelompok di kaki halaman TIDAK TETAP: "Alat pemain" hanya terbit
   * kalau katalog toko memang menyalakannya, dan "Ketentuan" selalu ada. Tiga
   * kolom mati membuat toko berkelompok empat menyisakan lubang selebar satu
   * kolom di kanan, dan kelompok kelima turun sendirian ke baris kedua.
   *
   * `auto-fit` menghitungnya sendiri; kolom mereknya diberi jatah dua supaya
   * nama toko dan taglinenya tak dipaksa sesempit daftar tautan.
   */
  .l12-foot-cols {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    column-gap: 26px;
  }

  .l12-foot-cols > :first-child { grid-column: span 2; }
  .l12-hero-top { gap: 16px; }
}

@media (min-width: 1024px) {
  :root {
    --top-h: 64px;
    /* Bilah tab bawah hilang di desktop; nolkan tingginya supaya blok bersama
       yang menempel (bilah alat pemain) tak melayang 62px di atas kaki
       layar. */
    --tab-h: 0px;
  }

  body { padding-bottom: 0; font-size: 15.5px; }
  body.l12-has-bar { padding-bottom: 0; }

  .l12-tab { display: none; }
  .l12-bar { display: none !important; }

  .l12-nav { display: flex; align-items: center; gap: 4px; }

  .l12-nav a {
    padding: 8px 12px;
    font-size: 13px; font-weight: 700;
    color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 6px;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  .l12-nav a:hover { color: var(--ink); background: var(--card); }
  .l12-nav a[aria-current="page"] { color: var(--accent-2); background: var(--accent-14); }
  .l12-nav svg { width: 15px; height: 15px; }

  .l12-caripalsu { display: flex; }
  .l12-ikonbtn.is-hp { display: none; }

  .l12-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .l12-noms { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /*
   * Rel kategori MELIPAT di desktop, tidak lagi digeser.
   *
   * Di HP, geseran mendatar adalah gerakan yang memang dipakai orang. Di
   * desktop ia tersembunyi: tak ada bilah gulir yang terlihat, dan kategori
   * terakhir — Pulsa, Token Listrik, E-Money — berhenti terpotong di tepi
   * kanan tanpa ada tanda bahwa daftarnya masih berlanjut. Ruangnya ada;
   * yang kurang cuma izin untuk memakai baris kedua.
   */
  .l12-rail { flex-wrap: wrap; overflow-x: visible; row-gap: 7px; }

  /* Rel dua baris jadi lebih tinggi — jangkar kelompok ikut disesuaikan supaya
     judulnya tak mendarat di baliknya. */
  .l12-blok { scroll-margin-top: calc(var(--top-h) + 104px); }

  /*
   * Halaman beli jadi dua kolom: langkah di kiri, ringkasan pesanan menempel
   * di kanan. Ringkasannya menempel karena daftar 206 nominal berarti pembeli
   * memilih di layar keempat — dan total yang cuma ada di kaki halaman berarti
   * ia harus menggulir balik untuk memeriksa apa yang akan dibayarnya.
   */
  .l12-beli {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
  }

  .l12-beli-kanan { position: sticky; top: calc(var(--top-h) + 16px); }

  .l12-langkah { margin: 0 0 16px; }

  .l12-proof { left: auto; right: 20px; bottom: 20px; }
}

@media (min-width: 1280px) {
  .l12-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}