/*
 * TEMPLATE 4 — "APLIKASI"
 *
 * Yang berbeda di sini bukan warnanya, tapi MODEL INTERAKSINYA.
 *
 * 1. BILAH TAB DI BAWAH. Empat tujuan penting duduk di zona jempol dan selalu
 *    terlihat. Ini pola navigasi aplikasi, dan panduan PWA ritel menyarankannya
 *    untuk empat sampai lima tujuan utama — sisanya masuk halaman akun.
 *
 * 2. TANPA FOOTER. Kalau tab bar sudah memuat semua tujuan, footer panjang di
 *    bawah cuma ruang mati yang harus digulir. Yang tersisa hanya satu baris
 *    jaminan; tautan bantuannya sudah ada di tab.
 *
 * 3. LEMBAR NOMINAL. Daftar nominal naik dari bawah sebagai lembar, bukan
 *    menumpuk di halaman. Halaman belinya jadi pendek dan bisa dibaca sekali
 *    lihat, dan memilih nominal terasa seperti satu tindakan, bukan menggulir
 *    melewati dua ratus kartu.
 *
 * 4. BISA DIPASANG. Tiap toko punya manifest sendiri, jadi etalasenya benar-
 *    benar bisa ditaruh di layar utama dan dibuka tanpa bilah alamat. Itu yang
 *    membuatnya terasa aplikasi — bukan sudut yang lebih bulat.
 *
 * Permukaannya terang tapi TIDAK putih: latar redup dengan kartu putih di
 * atasnya, cara aplikasi seluler memisahkan lapisan. T2 sebaliknya — putih
 * dengan kartu bergaris.
 *
 * Warna toko masuk lewat --accent dan --brand dari layout.
 */

:root {
  --bg:       #F5F6FA;
  --card:     #FFFFFF;
  --sunk:     #EDEFF5;
  --line:     #E4E7F0;
  --ink:      #10131C;
  --ink-2:    #565E73;
  /* 2,64 di atas latar halaman — di bawah AA; dipakai antara lain untuk
     keterangan metode pembayaran dan jumlah nominal. */
  --ink-3:    #6B717F;

  --accent:     #4F46E5;
  --accent-ink: color-mix(in srgb, var(--accent) 86%, #000000);
  --accent-08:  color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-16:  color-mix(in srgb, var(--accent) 16%, transparent);
  --brand:      #F59E0B;

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

  --r:    20px;
  --r-sm: 14px;
  --sh:    0 1px 2px rgba(16,19,28,.05), 0 10px 26px -18px rgba(16,19,28,.30);
  --sh-lg: 0 2px 6px rgba(16,19,28,.06), 0 24px 48px -24px rgba(16,19,28,.35);

  /* Tinggi bilah tab + lekukan layar. Dipakai di banyak tempat, jadi satu sumber.
     63px = 62px tinggi tab + 1px garis atasnya. Menghitung 62px saja membuat
     bilah bayar duduk satu piksel terlalu rendah dan menimpa garis itu. */
  --tab-h: calc(63px + env(safe-area-inset-bottom, 0px));
  --bar-h: calc(72px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Selalu sisakan ruang untuk bilah tab. */
  padding-bottom: var(--tab-h);
}

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

/* Lebar aplikasi, bukan lebar situs: isi tetap satu kolom terpusat walau di
   monitor lebar — persis seperti aplikasi yang dijalankan di tablet. */
.a4-wrap { max-width: 720px; margin: 0 auto; padding: 0 14px; }

/* Bingkai isi yang dibaca blok bersama (lapak, artikel). WAJIB sama persis
   dengan .a4-wrap di atas; alasannya di t1/theme.css. Di tema ini bedanya
   paling terasa: tanpa ini halaman /lapak melar jadi 1120px sementara seluruh
   toko lain berhenti di 720px. */
:root { --ff-wrap: 720px; --ff-gutter: 14px; }

.a4-mute { color: var(--ink-2); }
.a4-dim  { color: var(--ink-3); }
.a4-small { font-size: 13.5px; }
.a4-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Utilitas jarak & warna ada di DASAR berkas ini — lihat bagian "Utilitas". */

/* Keterangan singkat tepat di bawah judul seksi, sebelum daftarnya. */
.a4-sec-note { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ───────────────────────────── Kepala aplikasi ────────────────────────── */

/*
 * Kepala berwarna merek dengan sudut membulat di bawah: pola khas aplikasi
 * seluler, dan memberi tempat berdiri untuk identitas toko tanpa hero besar.
 */
/*
 * GRADIEN TETAP DI RONA AKSEN. Jangan campur dengan --brand.
 *
 * Bentuk lamanya `color-mix(in srgb, accent 62%, brand)`, dan tiap palet T4
 * memasangkan aksen dengan warna yang nyaris KOMPLEMENTER (indigo+kuning,
 * biru+jingga, tembaga+langit). Mencampur dua warna berseberangan di sRGB
 * menghasilkan lumpur: rata-rata saturasi hilang 38% — indigo berujung di
 * #8E6792 (turun 77%, mauve kusam), tembaga di #75725E (turun 88%, abu-abu),
 * dan "laut" berujung di #618A72 dengan kontras teks putih 3,91 alias GAGAL
 * ambang 4,5. `fireflazz:palet` tak menangkapnya karena hanya menguji aksen
 * terhadap permukaan, bukan gradien ini.
 *
 * Semua perhentian sekarang SAMA GELAP ATAU LEBIH GELAP dari aksen, jadi
 * kontras teks putih dijamin tak pernah lebih buruk dari putih-di-atas-aksen
 * yang sudah lulus uji (terendah 5,02 pada tembaga).
 *
 * --brand tidak hilang perannya: ia dipakai sebagai aksen kecil yang disengaja
 * (lencana promo), bukan diaduk ke permukaan besar.
 */
.a4-head {
  position: relative;

  /* Cadangan untuk peramban tanpa sintaks warna relatif (WebView Android lama):
     warna rata. Deklarasi di bawahnya dibuang kalau tak dikenali, dan yang ini
     bertahan. Tanpa cadangan, kepala jadi transparan dan teks putihnya hilang
     di atas latar terang. */
  background: var(--accent);

  /*
   * Rona DIGESER, terang tidak dinaikkan.
   *
   * Mencampur aksen dengan hitam (bentuk sebelumnya) menurunkan chroma: indigo
   * berubah jadi ungu kusam, tembaga jadi cokelat lumpur. Menggeser rona di
   * OKLCH ke dua arah justru menjaga chroma, jadi gradiennya hidup tanpa
   * mengotori warnanya.
   *
   * Perhentian pertama memakai `l` PERSIS milik aksen dan yang kedua lebih
   * gelap — tak ada satu pun titik yang lebih terang dari aksen, jadi kontras
   * teks putih tak pernah lebih buruk dari putih-di-atas-aksen. Diukur dari
   * piksel hasil render untuk kesepuluh palet: terburuk 5,27 (tembaga).
   *
   * Versi bersorotan yang MENAIKKAN terang sempat dicoba dan terlihat paling
   * bagus, tapi gagal di 8 dari 10 palet — serendah 3,50. Jangan diulang.
   */
  background: linear-gradient(155deg,
              oklch(from var(--accent) l calc(c + .03) calc(h - 24)) 0%,
              oklch(from var(--accent) calc(l - .13) c calc(h + 20)) 100%);
  color: #fff;
  border-radius: 0 0 26px 26px;
  /* Ruang bawah harus lebih besar dari tarikan kolom cari (-22px), kalau tidak
     kalimat terakhir kepala menempel di bibir kolom pencarian. */
  padding: 14px 0 34px;
}
.a4-head-row { display: flex; align-items: center; gap: 12px; }
.a4-head-logo {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: rgba(255,255,255,.2); color: #fff;
}
.a4-head-logo img { width: 100%; height: 100%; object-fit: cover; }
.a4-head-name { min-width: 0; flex: 1 1 auto; }
/*
 * Judul app-bar (halaman game, pesanan, akun) memakai <h1> demi hierarki yang
 * benar, tapi tampilannya harus sama persis dengan <strong> di sebelahnya.
 *
 * Ditulis `.a4-head h1.a4-head-title`, BUKAN `.a4-head-title` saja: aturan hero
 * `.a4-head h1` (satu kelas + satu tipe) mengalahkan satu kelas biasa, jadi
 * judul ramping ini ikut dibesarkan jadi 21px, ikut kena margin-top 14px, lalu
 * terpotong elipsis — "Mobile Legends Indonesia" tak pernah muat.
 */
.a4-head-name strong,
.a4-head h1.a4-head-title {
  display: block; margin: 0; font-size: 16px; font-weight: 700;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* .92 adalah alpha TERENDAH yang masih lulus 4,5 di semua palet T4;
   .78 dan .84 gagal pada palet tembaga (3,69 dan 4,03). */
.a4-head-name span { display: block; font-size: 12.5px; color: rgba(255,255,255,.92); }
/*
 * Ditahan supaya kepala tak memakan separuh layar pertama. Yang dicari pembeli
 * topup adalah gamenya; judul setinggi dua baris 24px menunda katalog sampai
 * gulir kedua. Kalimat pendukung dipotong dua baris — daftar judul di dalamnya
 * berguna untuk mesin telusur, tapi tak boleh mendorong isi ke bawah.
 */
.a4-head h1 { margin: 14px 0 0; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 800; }
.a4-head p {
  margin: 5px 0 0; font-size: 13.5px; color: rgba(255,255,255,.92); max-width: 44ch;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Saldo di kepala: pembeli yang punya saldo refund harus melihatnya lebih
   dulu, kalau tidak saldonya mengendap dan dianggap hilang. */
.a4-head-saldo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.18); font-size: 13.5px;
}
.a4-head-saldo strong { font-size: 17px; font-variant-numeric: tabular-nums; }

/* Kolom cari menempel di bibir bawah kepala, setengah masuk ke isi. */
.a4-search-dock { margin-top: -22px; position: relative; z-index: 5; }
.a4-search {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 0; border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: var(--sh); outline: none;
}
.a4-search:focus { box-shadow: var(--sh), 0 0 0 3px var(--accent-16); }

/* ───────────────────────────────── Kartu ──────────────────────────────── */

.a4-card {
  background: var(--card); border-radius: var(--r); padding: 15px;
  box-shadow: var(--sh); margin-top: 10px;
}
.a4-sec { margin-top: 26px; }
.a4-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.a4-sec-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
/* Judul di dalam kartu selalu berjarak sama dari isinya — diatur sekali di
   sini, bukan diulang sebagai style="margin-bottom:…" di tiap view. */
.a4-card > .a4-sec-title { margin-bottom: 12px; }
/* Padding tegak dengan margin negatif seimbang: kotak sentuhnya naik dari 20px
   ke 32px tanpa menggeser satu piksel pun tata letaknya. */
.a4-sec-link {
  font-size: 13.5px; font-weight: 700; color: var(--accent-ink);
  display: inline-block; padding: 7px 0; margin: -7px 0;
}

/* ──────────────────────────── Baris daftar ────────────────────────────── */

/* Pola baris aplikasi: ikon, isi, tanda panah. Dipakai untuk pesanan, akun,
   metode pembayaran — satu bentuk yang dikenali di seluruh etalase. */
.a4-rows { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.a4-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer;
}
.a4-row:last-child { border-bottom: 0; }
.a4-row:hover { background: var(--sunk); }
/* Baris yang hanya memaparkan sesuatu — mutasi saldo, ID tersimpan — bukan
   tujuan yang bisa dibuka. Kursornya tak boleh berbohong. */
.a4-row-static { cursor: default; }
.a4-row-static:hover { background: none; }
/* Baris yang berdiri sendiri sebagai kartu (hasil pencarian pesanan): satu
   sumber padding, tak menumpuk dengan padding .a4-card. */
.a4-row-card { border-radius: var(--r); box-shadow: var(--sh); border-bottom: 0; margin-top: 12px; }
.a4-row-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--accent-08); color: var(--accent-ink); overflow: hidden;
}
.a4-row-ic img { width: 100%; height: 100%; object-fit: cover; }
.a4-row-in { min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.a4-row-in strong { display: block; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a4-row-in span { display: block; font-size: 12.5px; color: var(--ink-3); }
.a4-row-go { flex: 0 0 auto; color: var(--ink-3); }

/* ───────────────────────────── Kartu game ─────────────────────────────── */

.a4-games { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 520px) { .a4-games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .a4-games { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/*
 * Kartu jadi kolom flex supaya harga bisa dipaku ke DASAR kartu. Petak grid
 * saling meregang setinggi baris, jadi harga di satu baris otomatis sejajar
 * walau nama di sebelahnya memakan dua baris — dan saat semua namanya satu
 * baris, tingginya menyusut sendiri tanpa menyisakan lubang.
 *
 * Cara sebelumnya (min-height dua baris pada nama) memesan ruang itu SELALU,
 * jadi judul satu baris seperti "Genshin Impact" menyisakan celah menganga
 * sebelum harganya sementara "Ragnarok M: Eternal Love" tidak — jarak yang
 * berbeda-beda antar kartu justru terlihat lebih rusak daripada tak sejajar.
 */
.a4-game { display: flex; flex-direction: column; }

/*
 * display:block WAJIB di sini, dan bukan formalitas.
 *
 * Elemennya <span>. Tanpa display:block ia tetap inline, dan pada elemen inline
 * `aspect-ratio`, `overflow: hidden`, dan `border-radius` tidak berlaku: gambar
 * game tampil setinggi rasio aslinya (178px, 161px, …) alih-alih bujur sangkar,
 * tinggi tiap kartu jadi berbeda, dan nama game jatuh ke baris yang sama dengan
 * gambarnya sehingga tertimpa. Itulah yang membuat katalog terlihat rusak.
 */
.a4-game-art {
  display: block;
  aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--sunk); box-shadow: var(--sh);
  transition: transform .12s ease;
}
.a4-game:hover .a4-game-art { transform: translateY(-2px); }
.a4-game-art img { width: 100%; height: 100%; object-fit: cover; }

.a4-game-name {
  margin: 7px 0 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* margin-top:auto — inilah yang memakukan harga ke dasar kartu. */
.a4-game-price {
  display: block; margin: 0; margin-top: auto; padding-top: 3px;
  font-size: 11.5px; color: var(--accent-ink); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .a4-game:hover .a4-game-art { transform: none; } }

/* Blok per genre di katalog. */
.a4-genre { margin-bottom: 20px; }
.a4-genre:last-child { margin-bottom: 0; }

/* ─────────────────────────── Paling diburu ────────────────────────────── */

/*
 * Sematan seller (maks 8, diatur di /seller/games) tampil sebagai deret geser.
 * Ditaruh SEBELUM katalog: kartu bujur sangkar 3 kolom membuat semua judul
 * terlihat setara, padahal seller sudah memutuskan mana yang mau didorong.
 */
.a4-featured {
  display: grid; grid-auto-flow: column; grid-auto-columns: 68%;
  gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 0 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  scrollbar-width: none;
}
.a4-featured::-webkit-scrollbar { display: none; }
@media (min-width: 520px) { .a4-featured { grid-auto-columns: 46%; } }
@media (min-width: 760px) { .a4-featured { grid-auto-columns: 32%; } }

.a4-featured-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 128px; padding: 12px 13px; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  background: var(--ink); color: #fff;
}
.a4-featured-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tirai gelap: nama game harus tetap terbaca di atas seni game apa pun —
   termasuk logo terang dan penuh detail seperti Mobile Legends, yang tanpa
   tirai cukup pekat akan beradu dengan hurufnya sendiri. */
.a4-featured-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(16,19,28,0) 32%,
              rgba(16,19,28,.55) 62%,
              rgba(16,19,28,.94) 100%);
}
.a4-featured-in { position: relative; z-index: 1; }
/* Satu baris: nama panjang seperti "Mobile Legends Indonesia" yang melipat jadi
   dua baris menutupi seni gamenya dan membuat kartu terlihat penuh sesak. */
.a4-featured-name {
  display: block; margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.a4-featured-sub {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,.86); text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.a4-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.a4-chips::-webkit-scrollbar { display: none; }
.a4-chip {
  flex: 0 0 auto; min-height: 34px; padding: 0 13px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--sh);
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.a4-chip.is-active { background: var(--accent); color: #fff; }

/* ──────────────────────────────── Tombol ──────────────────────────────── */

.a4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: filter .12s ease, opacity .12s ease;
}
.a4-btn:hover:not(:disabled) { filter: brightness(1.08); }
.a4-btn-ghost { background: var(--card); color: var(--ink); box-shadow: var(--sh); }
.a4-btn-ghost:hover { color: var(--accent-ink); }
.a4-btn-full { width: 100%; }
.a4-btn:disabled { opacity: .45; cursor: not-allowed; }
.a4-btn:focus-visible { outline: 3px solid var(--accent-16); outline-offset: 2px; }

/* ────────────────────────────── Kolom isian ───────────────────────────── */

.a4-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.a4-input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); outline: none;
}
.a4-input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-16); }
.a4-input::placeholder { color: var(--ink-3); }
.a4-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.a4-hint strong { color: var(--ink); }
.a4-row-2 { display: grid; gap: 10px; }
@media (min-width: 480px) { .a4-row-2 { grid-template-columns: 1fr 1fr; } }

.a4-nick { margin: 10px 0 0; font-size: 13px; }
.a4-nick.is-ok  { color: var(--ok); font-weight: 700; }
.a4-nick.is-bad { color: var(--bad); }

/* ────────────────────────────── Akun tersimpan ────────────────────────── */

.a4-saved { display: grid; gap: 8px; margin-bottom: 12px; }
.a4-saved-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
}
.a4-saved-btn.is-active, .a4-saved-btn:hover { border-color: var(--accent); background: var(--accent-08); }
.a4-saved-av {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--accent); color: #fff;
}
.a4-saved-in { min-width: 0; }
.a4-saved-in strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a4-saved-in span { display: block; font-size: 12px; color: var(--ink-3); }

/* ───────────────────────── Lembar nominal (sheet) ─────────────────────── */

/*
 * Lembar dibuka tanpa satu baris JS: checkbox tersembunyi memegang keadaannya
 * dan label yang jadi tombolnya. Artinya lembar tetap bisa dibuka meski JS
 * gagal dimuat — dan di jaringan seluler seadanya, itu bukan kemungkinan
 * teoretis.
 */
/*
 * Kotak centang tetap BISA DIFOKUS papan tik (tak memakai pointer-events:none),
 * cuma tak terlihat. Dengan begitu lembar masih bisa dibuka dengan Tab lalu
 * Spasi; label saja tidak pernah menerima fokus.
 */
.a4-sheet-tog { position: absolute; width: 1px; height: 1px; opacity: 0; }
.a4-sheet-tog:focus-visible ~ .a4-picker { outline: 3px solid var(--accent-16); outline-offset: 2px; }

.a4-picker {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 62px; padding: 12px 16px; cursor: pointer;
  border-radius: var(--r-sm); border: 1px dashed var(--line); background: var(--bg);
}
.a4-picker.is-set { border-style: solid; border-color: var(--accent); background: var(--accent-08); }
.a4-picker-in { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.a4-picker-in strong { display: block; font-size: 14.5px; }
.a4-picker-in span { display: block; font-size: 12.5px; color: var(--ink-3); }
.a4-picker-go { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--accent-ink); }

.a4-sheet-bg {
  position: fixed; inset: 0; z-index: 90; background: rgba(16,19,28,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.a4-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-height: 86vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 24px 24px 0 0;
  box-shadow: var(--sh-lg);
  transform: translateY(101%);
  /* visibility, bukan cuma transform: lembar yang tergeser keluar layar tetap
     bisa difokus Tab dan tetap dibacakan pembaca layar — dua ratus nominal
     tersembunyi yang bisa "dimasuki" tanpa terlihat. Ditunda selama animasi
     supaya menutupnya tetap teranimasi. */
  visibility: hidden;
  transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s linear .26s;
}
.a4-sheet-tog:checked ~ .a4-sheet-bg { opacity: 1; pointer-events: auto; }
.a4-sheet-tog:checked ~ .a4-sheet {
  transform: none; visibility: visible;
  transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s;
}

.a4-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.a4-sheet-head strong { flex: 1 1 auto; font-size: 15px; font-weight: 800; }
.a4-sheet-x {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); font-size: 19px;
}
/* Gagang tarik: penanda visual bahwa ini lembar, bukan halaman baru. */
.a4-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 8px auto 0; }
.a4-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }

.a4-tier { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.a4-tier:first-child { margin-top: 0; }

/* Judul kelompok (Nominal / Paket / Item) berdiri di atas rentang harga.
   Tanpa tingkat kedua ini, "Di bawah Rp 25.000" berulang sekali untuk tiap
   kelompok saat chip "Semua" aktif, dan daftarnya terbaca seperti diacak. */
.a4-tier-group {
  margin: 20px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.a4-nom-group:first-child .a4-tier-group { margin-top: 4px; }

.a4-noms { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .a4-noms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.a4-nom {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 78px; padding: 11px 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.a4-nom:hover { border-color: var(--accent); }
.a4-nom.is-active { border-color: var(--accent); background: var(--accent-08); }
.a4-nom-name { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.a4-nom-price { margin-top: 7px; font-size: 14.5px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* Harga coret memakai kelas BERSAMA `.ff-coret` / `.ff-hemat`, satu sumber
   untuk keempat template — lihat resources/views/store/partials/coret-gaya. */

/* ─────────────────────────── Ringkasan & bayar ────────────────────────── */

.a4-sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14px; }
.a4-sum-row span:first-child { color: var(--ink-2); flex: 0 0 auto; }
.a4-sum-row span:last-child { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.a4-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.a4-sum-total b { font-size: 21px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/*
 * Metode pembayaran DIPERLIHATKAN sebelum pembeli meninggalkan toko.
 * Ini bukan hiasan: pembeli yang tak tahu apakah tokonya menerima QRIS akan
 * berhenti di tombol bayar. Tiga template lain sudah memuatnya; T4 satu-satunya
 * yang belum, dan itu membuatnya terasa setengah jadi.
 */
.a4-pays { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 480px) { .a4-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a4-pay {
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg);
}
.a4-pay strong { display: block; font-size: 13.5px; }
.a4-pay span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }

.a4-trust { display: grid; gap: 9px; margin-top: 14px; padding: 14px; border-radius: var(--r-sm); background: var(--bg); }
.a4-trust-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.a4-trust-item svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ok); margin-top: 1px; }

/* Bilah bayar duduk TEPAT DI ATAS bilah tab, tidak menutupinya: dua bilah yang
   saling menimpa membuat orang menekan tab saat ingin membayar. */
.a4-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tab-h); z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -22px rgba(16,19,28,.5);
}
.a4-bar[hidden] { display: none !important; }
.a4-bar-info { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.a4-bar-info span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.a4-bar-info strong { display: block; font-size: 18px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.a4-bar .a4-btn { flex: 0 0 auto; min-width: 142px; }
.a4-has-bar { padding-bottom: calc(var(--tab-h) + var(--bar-h)); }

/* ────────────────────────────── Bilah tab ─────────────────────────────── */

.a4-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.a4-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 62px; padding: 6px 4px;
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  border: 0; background: none; cursor: pointer;
}
.a4-tab svg { width: 22px; height: 22px; }
.a4-tab.is-active { color: var(--accent-ink); font-weight: 700; }
.a4-tab:focus-visible { outline: 3px solid var(--accent-16); outline-offset: -3px; }

/* ───────────────────────── Peringatan & status ────────────────────────── */

.a4-alert { padding: 13px 15px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.5; margin-top: 12px; }
.a4-alert-info  { background: var(--accent-08); color: var(--accent-ink); }
.a4-alert-error { background: #FEF2F2; color: var(--bad); }
.a4-alert-ok    { background: #ECFDF5; color: var(--ok); }

.a4-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.a4-badge-wait { background: #FFFBEB; color: var(--warn); }
.a4-badge-ok   { background: #ECFDF5; color: var(--ok); }
.a4-badge-bad  { background: #FEF2F2; color: var(--bad); }
.a4-badge-run  { background: var(--accent-08); color: var(--accent-ink); }

.a4-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: a4-pulse 1.4s ease-in-out infinite; }
@keyframes a4-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .a4-dot { animation: none; }
  .a4-sheet { transition: none; }
}

/* ─────────────────────────── Baris jaminan ────────────────────────────── */

/* Pengganti footer. Empat janji yang benar-benar berlaku, bukan hiasan. */
.a4-jaminan { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
.a4-jaminan-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--sh);
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}
.a4-jaminan-item svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent-ink); margin-top: 1px; }
.a4-jaminan-item strong { display: block; color: var(--ink); font-size: 13px; }

.a4-kaki { margin: 22px 0 8px; text-align: center; font-size: 12px; color: var(--ink-3); }
.a4-kaki a { color: var(--accent-ink); font-weight: 700; }

/* ──────────────────────── Notifikasi transaksi nyata ──────────────────── */

.a4-proof {
  /* Pojok kiri bawah, tepat di atas bilah tab. Sempat dipasang left+right+
     margin auto sehingga popup melayang di TENGAH lebar layar HP — bentuk itu
     terbaca seperti kartu yang salah tempat, bukan notifikasi kecil. */
  position: fixed; left: 12px; right: auto; bottom: calc(var(--tab-h) + 10px); z-index: 75;
  display: flex; align-items: center; gap: 10px; max-width: min(320px, calc(100vw - 24px));
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--card); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.a4-proof.is-in { opacity: 1; transform: none; }
.a4-proof-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: 0 0 auto; }
.a4-proof-body { min-width: 0; line-height: 1.3; }
.a4-proof-title { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a4-proof-meta { display: block; font-size: 11px; color: var(--ink-3); }
.a4-proof-x { border: 0; background: none; color: var(--ink-3); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.a4-has-bar .a4-proof { bottom: calc(var(--tab-h) + var(--bar-h) + 10px); }

/* ───────────────────────────────── Tabel ──────────────────────────────── */

.a4-table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.a4-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.a4-table th { text-align: left; padding: 11px 14px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.a4-table td { padding: 12px 14px; border-top: 1px solid var(--line); }
.a4-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ───────────────────────── Mutasi, kode, judul pesanan ────────────────── */

.a4-amt { flex: 0 0 auto; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.a4-amt-in  { color: var(--ok); }
.a4-amt-out { color: var(--bad); }

/* Aksi merusak di dalam baris (Lupakan, Keluar): tetap tombol sungguhan, tapi
   tak menyamar sebagai tujuan utama. */
.a4-row-act {
  flex: 0 0 auto; padding: 8px 2px; border: 0; background: none;
  color: var(--bad); font-size: 13px; font-weight: 700; cursor: pointer;
}
.a4-row-act:focus-visible { outline: 3px solid var(--accent-16); outline-offset: 2px; }

/* Kode voucher: harus bisa dipilih dan disalin utuh, sepanjang apa pun. */
.a4-serial {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; font-weight: 700; word-break: break-all; user-select: all;
}
.a4-order-title { font-size: 21px; }

/* ───────────────────────────────── Utilitas ───────────────────────────── */

/*
 * SENGAJA DI DASAR BERKAS.
 *
 * Utilitas jarak harus menang atas komponen. Saat blok ini masih di atas,
 * `.a4-label { margin: 0 0 6px }` — shorthand, kekhususan sama, tapi tertulis
 * belakangan — menelan `margin-top` milik `.a4-mt-3`, dan label "Nomor WhatsApp"
 * menempel persis di paragraf di atasnya. Yang menentukan bukan kekhususan,
 * melainkan URUTAN. Tambahkan utilitas baru di sini, jangan di atas.
 *
 * Tangganya dikunci (8/12/14/20) supaya ritme vertikalnya sama di seluruh
 * halaman; angka lepas yang ditulis di tiap view adalah asal mula tampilan
 * berantakan.
 */
.a4-mt-1 { margin-top: 8px; }
.a4-mt-2 { margin-top: 12px; }
.a4-mt-3 { margin-top: 14px; }
.a4-mt-4 { margin-top: 20px; }
.a4-mb-2 { margin-bottom: 12px; }

.a4-center { text-align: center; }

/* Tautan teks di dalam paragraf: dipakai di hint dan kaki halaman. */
.a4-link { color: var(--accent-ink); font-weight: 700; }
.a4-danger { color: var(--bad); }