/*
 * agen.css — SATU-SATUNYA sumber gaya app agen (AgenKilat).
 *
 * ATURAN YANG MENGIKAT:
 *  1. Berkas ini terpusat: TIDAK ADA gaya di dalam berkas .razor, dan tidak ada berkas gaya kedua.
 *  2. App agen adalah produk TERPISAH dengan domainnya sendiri: ia TIDAK mengikuti gaya panel admin.
 *  3. Semua angka berasal dari token di :root (warna, radius, jarak, bayangan, ukuran huruf).
 *  4. Istilah di kode memakai kata lazim: `.pesan--error`, bukan `.pesan--galat`.
 *
 * ── ARAH: KARTU MODERN (dipilih pemilik 2026-09-29 lewat perbandingan contoh A/B/C) ────────────
 * Arah ini lahir dari koreksi pemilik atas percobaan pertama (halaman buku bergaris, yang dinilai
 * "seperti notebook" dan terlalu kaku). Yang membuatnya berbeda:
 *
 *  - KARTU, bukan halaman kertas. Radius 14-16px, elevasi HANYA dari bayangan (bukan bayangan +
 *    garis: itu "kartu hantu"), tanpa latar bertekstur (lantai kerajinan melarang garis-garis
 *    `repeating-linear-gradient` tanpa kanvas/peta di bawahnya).
 *  - BIDANG MEREK: kartu hero (identitas toko + saldo) memakai bidang biru penuh - kontras terbesar
 *    di layar, dan tempat angka terbesar di app.
 *  - SKALA HURUF BERTINGKAT: label kecil berjarak lebar, isi 14-15, angka 17-40. Jarak DI ATAS judul
 *    lebih besar daripada di bawahnya.
 *  - SATU momen gerak (kartu hero naik masuk), mati bila pengguna meminta gerak minimal.
 *  - PERMUKAAN PERAMBAN ikut diwarnai (seleksi teks, kursor, scrollbar, cincin fokus).
 *  - Ikon SVG digambar sendiri (satu ketebalan garis), bukan emoji/unicode.
 *
 * Diarahkan untuk HP (dipakai di konter, sering satu tangan sambil melayani pembeli): sasaran sentuh
 * besar, angka mencolok, batang navigasi selalu di bawah. Warna tidak pernah berdiri sendiri:
 * setiap tanda keadaan SELALU disertai katanya.
 *
 * KOSAKATA KELAS SENGAJA DIPERTAHANKAN dari versi sebelumnya supaya seluruh halaman yang sudah
 * ditulis (Riwayat, Setoran, Jual, Pelanggan, Pascabayar, Masuk) ikut berubah rupa tanpa disentuh.
 */

/* ═══ Token ══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --latar: #f4f6f9;
  --kartu: #ffffff;
  --kartu-tua: #eef1f6;

  --tinta: #0e1726;
  --tinta-2: #4a5568;
  --tinta-3: #8b95a5;
  --garis: #eaeef4;

  /* Merek app agen: biru "saku". */
  --merek: #12459c;
  --merek-2: #1d63d2;
  --aksi: #e8f0ff;

  --ok: #0a7a4a;
  --ok-lembut: #e8f6ee;
  --tunggu: #9a5b06;
  --tunggu-lembut: #fdf3e3;
  --error: #b3261e;
  --error-lembut: #fdeceb;

  --r-kartu: 16px;
  --r-kecil: 10px;
  --r-pil: 999px;

  /* Elevasi dideklarasikan SATU cara: bayangan. Tidak ada "bayangan + garis". */
  --naik-1: 0 1px 2px rgba(14, 23, 38, .06), 0 1px 3px rgba(14, 23, 38, .04);
  --naik-2: 0 2px 6px rgba(14, 23, 38, .07), 0 10px 22px rgba(14, 23, 38, .06);
  --naik-3: 0 14px 32px rgba(18, 69, 156, .20);

  /* Tinggi batang bawah + ruang aman layar berponi. */
  --batang: 62px;
  --aman-bawah: env(safe-area-inset-bottom, 0px);
}

/* ═══ Dasar ══════════════════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--latar);
  color: var(--tinta);
  /* Huruf kerja dari sistem: app ini PWA yang harus ringan dan tetap terbaca saat jaringan lambat,
     dan proyek ini mematikan ICU (`InvariantGlobalization`). */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* Permukaan peramban ikut diwarnai: bagian yang tidak digambar tetap membawa desainnya. */
::selection { background: var(--merek); color: #fff; }
html { caret-color: var(--merek); scrollbar-width: thin; scrollbar-color: var(--tinta-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--tinta-3);
  border-radius: var(--r-pil);
  border: 3px solid var(--latar);
}
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--merek); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea, button { font: inherit; color: inherit; }

/* Isi halaman tidak boleh tertutup batang bawah (fixed). Batang SELALU ada di app ini - juga di
   layar lebar - karena app agen adalah aplikasi HP. */
.kulit { min-height: 100vh; padding-bottom: calc(var(--batang) + var(--aman-bawah)); }

/* ═══ Halaman ════════════════════════════════════════════════════════════════════════════════════ */

.halaman {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.halaman__judul { font-size: 20px; }
.halaman__catatan { color: var(--tinta-3); font-size: 13px; margin: -6px 0 0; }

.kaki {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px 16px;
  color: var(--tinta-3);
  font-size: 12px;
  text-align: center;
}

.kosong-bungkus {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.kosong-kartu { width: 100%; max-width: 380px; }

/* ═══ Kepala halaman (dipakai layar masuk / terkunci di cangkang) ══════════════════════════════ */

.kepala-buku {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 2px;
}
.kepala-buku__toko { font-size: 18px; font-weight: 700; }
.kepala-buku__tanggal { color: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kepala-buku__catatan {
  color: var(--tinta-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ═══ Kartu hero: identitas toko + saldo dalam satu bidang merek ═══════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--merek-2), var(--merek) 62%);
  color: #fff;
  border-radius: var(--r-kartu);
  padding: 16px 16px 14px;
  box-shadow: var(--naik-3);
  /* SATU momen gerak di app ini. */
  animation: hero-naik 620ms cubic-bezier(.16, 1, .3, 1) 1;
}

@keyframes hero-naik {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

.hero__kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.hero__nama { font-size: 15px; font-weight: 700; }
.hero__kode {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-top: 2px;
}
.hero__tanggal {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-top: 13px;
}
.hero__baris { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.hero__angka {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hero__segar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--r-pil);
  padding: 8px 13px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.hero__segar:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.hero__segar:disabled { opacity: .6; cursor: not-allowed; }

.hero__kaki {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .82);
  margin-top: 9px;
}
.hero__kaki b { color: #fff; font-weight: 600; }

/* Gagal menyegarkan: tetap di dalam kartu, satu baris, dan angka di atas TIDAK berubah jadi nol. */
.hero__gagal {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .92);
}
.hero__gagal svg { flex: 0 0 auto; margin-top: 1px; }
.hero__gagal b { font-weight: 700; }

/* ═══ Kartu & bagian ════════════════════════════════════════════════════════════════════════════ */

.kartu {
  background: var(--kartu);
  border-radius: var(--r-kartu);
  box-shadow: var(--naik-1);
  padding: 13px 14px;
}

.kartu__judul {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.kartu__judul + .kartu__isi { margin-top: 9px; }
.kartu__isi { display: flex; flex-direction: column; gap: 10px; }
.kartu__catatan { color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }
.kartu__kaki {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
  color: var(--tinta-3);
  font-size: 13px;
}

.kartu--rapat { padding: 9px 12px; }
.kartu--sorot { box-shadow: var(--naik-2); }

/* ═══ Aksi cepat ════════════════════════════════════════════════════════════════════════════════ */

.cepat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  background: var(--kartu);
  border-radius: var(--r-kartu);
  box-shadow: var(--naik-1);
  padding: 12px 8px;
}

.cepat__tombol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  border-radius: var(--r-kecil);
  background: transparent;
  color: var(--tinta);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
}
.cepat__tombol:hover { background: var(--kartu-tua); text-decoration: none; }

.cepat__ikon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-pil);
  display: grid;
  place-items: center;
  background: var(--aksi);
  color: var(--merek);
}

/* ═══ Baris & statistik ═════════════════════════════════════════════════════════════════════════ */

.baris { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.baris--rapat { gap: 6px; }
.baris--atas { align-items: flex-start; }
.baris--pisah { justify-content: space-between; }
.baris--tengah { align-items: center; }

.stat { min-width: 0; }
.stat__label {
  color: var(--tinta-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.stat__nilai {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 3px;
}
.stat--ok .stat__nilai { color: var(--ok); }
.stat--tunggu .stat__nilai { color: var(--tunggu); }
.stat--error .stat__nilai { color: var(--error); }

.tebal { font-weight: 600; }
.kecil { font-size: 12.5px; color: var(--tinta-3); }
.angka { font-variant-numeric: tabular-nums; }
.kanan { margin-left: auto; }
.putus { overflow-wrap: anywhere; }

/* ═══ Laba (selisih harga yang agen tetapkan − harga dari server) ══════════════════════════════ */

.laba { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.laba__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok);
}
.laba__nilai { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ok); }
/* Laba nol ditulis dengan warna tenang: itu keadaan biasa, bukan keberhasilan. */
.laba--nol .laba__label, .laba--nol .laba__nilai { color: var(--tinta-3); }

/* ═══ Ringkasan dua kolom dalam satu kartu ══════════════════════════════════════════════════════ */

.ringkas { display: flex; align-items: stretch; gap: 13px; }
.ringkas__sel { flex: 1; min-width: 0; }
.ringkas__sel + .ringkas__sel { border-left: 1px solid var(--garis); padding-left: 13px; }

/* ═══ Tombol ═════════════════════════════════════════════════════════════════════════════════════ */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--kartu);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.tombol:hover:not(:disabled) { background: var(--aksi); border-color: var(--aksi); }
.tombol:disabled { opacity: .5; cursor: not-allowed; }

.tombol--utama { background: var(--merek); border-color: var(--merek); color: #fff; }
.tombol--utama:hover:not(:disabled) { background: var(--merek-2); border-color: var(--merek-2); }
.tombol--halus { background: var(--aksi); border-color: transparent; color: var(--merek); }
.tombol--halus:hover:not(:disabled) { background: #dbe7ff; }
.tombol--bahaya { background: var(--error-lembut); border-color: transparent; color: var(--error); }
.tombol--bahaya:hover:not(:disabled) { background: #fbdcd9; }
.tombol--kecil { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.tombol--lebar { width: 100%; }

/* ═══ Isian ══════════════════════════════════════════════════════════════════════════════════════ */

.isian-grup { display: flex; flex-direction: column; gap: 5px; }
.label { font-size: 13px; color: var(--tinta-2); }

.isian {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--kartu);
  color: var(--tinta);
}

.isian:focus { outline: none; border-color: var(--merek); box-shadow: 0 0 0 3px rgba(18, 69, 156, .14); }
.isian--angka { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.isian--pendek { max-width: 120px; }
.galat-isian { color: var(--error); font-size: 12.5px; }

/* ═══ Pesan (umpan balik aksi) ═══════════════════════════════════════════════════════════════════
   Nada dibawa oleh LATAR yang ditintakan + warna teks; TANPA garis tebal di satu sisi (dilarang
   lantai kerajinan: "colored border-left above 1px on cards, list items, callouts, or alerts"). */

.pesan {
  border: 0;
  border-radius: var(--r-kecil);
  padding: 10px 12px;
  font-size: 13.5px;
  background: var(--kartu-tua);
  color: var(--tinta-2);
}

.pesan--ok { background: var(--ok-lembut); color: var(--ok); }
.pesan--error { background: var(--error-lembut); color: var(--error); }
.pesan--info { background: var(--aksi); color: var(--merek); }
.pesan--waspada { background: var(--tunggu-lembut); color: var(--tunggu); }

/* ═══ Tanda keadaan (status transaksi) — pil kecil, katanya SELALU ikut ═════════════════════════ */

.tanda {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pil);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--kartu-tua);
  color: var(--tinta-2);
}

.tanda--ok { background: var(--ok-lembut); color: var(--ok); }
.tanda--tunggu { background: var(--tunggu-lembut); color: var(--tunggu); }
.tanda--error { background: var(--error-lembut); color: var(--error); }
.tanda--aksen { background: var(--aksi); color: var(--merek); }

/* Baris yang dibatalkan/dicoret tetap terbaca sebagai coretan, bukan dihilangkan. */
.pita-koreksi { text-decoration: line-through; color: var(--tinta-3); }
.sorot { background: linear-gradient(transparent 55%, var(--aksi) 55%); }

/* ═══ Daftar baris (transaksi, pelanggan, produk) ═══════════════════════════════════════════════ */

.tabel-bungkus { overflow-x: auto; }

.daftar { display: flex; flex-direction: column; }

.daftar__baris {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--garis);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.daftar__baris:last-child { border-bottom: 0; }
.daftar__baris:hover { background: var(--latar); }
/* Baris yang memang tidak bisa diklik tidak memberi umpan balik klik. */
.daftar__baris--datar { cursor: default; }

/* ── Daftar SKU dengan tinggi terbatas ─────────────────────────────────────────────────────────
 * Yang bergulir adalah DAFTARNYA, bukan halamannya. Tanpa batas ini, daftar SKU yang panjang
 * mendorong chip kategori dan kotak merek keluar layar — agen kehilangan alat penyaringnya justru
 * saat paling membutuhkannya.
 * ------------------------------------------------------------------------------------------- */
.daftar--batas {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;      /* guliran daftar tidak menular ke halaman di belakangnya */
  -webkit-overflow-scrolling: touch;
}

/* Daftar hasil pencarian pelanggan: lebih pendek lagi, karena ia hidup DI DALAM lembar bawah dan
   harus menyisakan tempat untuk nomor tujuan, harga, dan tombol Topup di bawahnya. */
.daftar--pendek {
  max-height: min(30vh, 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
}

/* Baris pilih: tombol Pilih TIDAK PERNAH bergeser tempatnya. Namanya cukup satu baris dan
   dipotong, jadi panjang nama tidak lagi mendorong tombol ke luar baris. */
.daftar__baris--pilih { align-items: center; }
.daftar__baris--pilih .daftar__utama { min-width: 0; flex: 1 1 auto; }
.daftar__baris--pilih .tombol { flex: 0 0 auto; }

/* ── Lembar bawah (bottom sheet) ──────────────────────────────────────────────────────────────
 * Pilihan SKU tampil di sini, bukan menambah tinggi halaman. Tinggi lembar dibatasi dan ISI-nya
 * yang bergulir, jadi formulir panjang pun tetap utuh di layar pendek.
 * ------------------------------------------------------------------------------------------- */
.tirai {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(14, 23, 38, .38);
  animation: tirai-masuk .16s ease-out;
}

.lembar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  border-radius: var(--r-kartu) var(--r-kartu) 0 0;
  background: var(--kartu);
  box-shadow: var(--naik-3);
  animation: lembar-masuk .2s ease-out;
}

.lembar__pegangan {
  width: 42px;
  height: 4px;
  margin: 8px auto 2px;
  border-radius: var(--r-pil);
  background: var(--garis);
}

.lembar__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--garis);
}

.lembar__identitas { min-width: 0; }
.lembar__judul { font-size: 15px; font-weight: 700; }

.lembar__isi {
  padding: 14px 16px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lembar__kaki {
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--garis);
}

/* Munculnya lembar TIDAK memindahkan lembar itu sendiri: animasinya hanya kelegapan. Sebelum ini
   saya menganimasikan `translateY` pada elemen `position: fixed`, dan saat animasi tidak selesai
   (mis. peramban meredam gerak) posisinya meleset 14 px ke bawah — persis sebesar jarak animasinya.
   Posisi tidak boleh bergantung pada animasi yang kebetulan selesai. */
@keyframes tirai-masuk {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lembar-masuk {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.daftar__ikon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-pil);
  display: grid;
  place-items: center;
  background: var(--aksi);
  color: var(--merek);
}

.daftar__utama { min-width: 0; flex: 1; }
.daftar__judul { font-size: 13.5px; font-weight: 600; }
.daftar__bawah { color: var(--tinta-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.daftar__nilai {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ═══ Nilai yang disalin (nomor rekening, jumlah transfer) ══════════════════════════════════════ */

.salin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--latar);
}

.salin__label { color: var(--tinta-3); font-size: 12.5px; }
.salin__nilai { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.salin__baris--utama { background: var(--aksi); border-color: var(--aksi); }

/* ═══ Batang navigasi (SELALU di bawah) ═════════════════════════════════════════════════════════ */

.navbawah {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--garis);
  padding-bottom: var(--aman-bawah);
}

.navbawah__isi { max-width: 720px; margin: 0 auto; padding: 5px 4px 8px; }
.navbawah__tab { display: flex; }

.navbawah__tautan {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  border-radius: var(--r-kecil);
  color: var(--tinta-3);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.navbawah__tautan:hover { color: var(--tinta); text-decoration: none; }
.navbawah__tautan.aktif { color: var(--merek); }
.navbawah__label { line-height: 1.1; }

/* Penanda tab aktif: batang kecil di bawah label. */
.navbawah__tautan::after {
  content: "";
  display: block;
  height: 3px;
  width: 16px;
  border-radius: var(--r-pil);
  background: transparent;
  margin-top: 1px;
}
.navbawah__tautan.aktif::after { background: var(--merek); }

/* Ikon SVG: ukurannya DITETAPKAN di sini supaya berkas yang gagal dimuat tidak berubah menjadi
   kotak raksasa (pelajaran dari panel: "layar dipenuhi ikon"). */
.ikon { width: 22px; height: 22px; flex: 0 0 auto; }

/* ═══ Khas app agen ═════════════════════════════════════════════════════════════════════════════ */

/* Nama panjang dipotong, harga tetap terbaca. */
.produk__nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Deskripsi isi produk dari seller: baris baru & emoji dibawa apa adanya (pre-line) — dipakai
   di lembar bawah ketika produk dipilih. Hanya informasi, tidak dipakai menghitung harga. */
.produk__deskripsi { color: var(--tinta-3); font-size: 12.5px; margin-top: 6px; white-space: pre-line; }
.produk__harga { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Struk: lebar dibatasi supaya barisnya tidak membentang di layar lebar. */
.struk { max-width: 420px; margin: 0 auto; }
.struk__baris { display: flex; gap: 10px; font-size: 14px; }
.struk__baris .label { color: var(--tinta-3); }
.struk__nilai { margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; }
.struk__pisah { border-top: 1px dashed var(--garis); margin: 8px 0; }
.struk__kaki {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--garis);
  color: var(--tinta-3);
  font-size: 12px;
  text-align: center;
}

/* ═══ Cetak (bukti transaksi → "Simpan sebagai PDF") ═══════════════════════════════════════════ */

@media print {
  html, body { background: #fff; }
  /* Struk adalah bukti KERTAS KECIL (termal/strip), bukan dokumen A4. @page tanpa size
     memaksa dialog cetak memakai kertas default (besar); mendeklarasikan size membuat
     pilihan "Simpan ke PDF" terbuka langsung dalam proporsi strip — tanpa baris kosong
     raksasa. margin 0 + padding dilebar supaya isi pas di tepi strip. */
  @page { size: 80mm auto; margin: 0; }
  :root {
    --latar: #fff; --kartu: #fff; --kartu-tua: #fff;
    --tinta: #000; --tinta-2: #000; --tinta-3: #333; --garis: #999; --merek: #000;
  }
  .kulit { padding-bottom: 0; }
  .halaman { padding: 0; gap: 0; max-width: none; }
  .kartu, .hero, .cepat { box-shadow: none; border-radius: 0; }
  .hero { background: none; color: #000; animation: none; }
  .hero__nama, .hero__angka, .hero__kaki, .hero__kaki b, .hero__gagal { color: #000; }
  .hero__kepala, .hero__gagal { border-color: #999; }
  .struk { max-width: none; }
  .navbawah, .tombol, .kaki, .pesan, .cepat, .hero__segar { display: none !important; }
}

/* ── Katalog berkelompok: chip kategori + kotak merek ──────────────────────────────────────────
 *
 * Dipakai Topup dan Bayar Tagihan. Cara memilih dibuat dua langkah dengan sengaja: chip kategori
 * menjawab "saya mau apa" (Pulsa/Data/Voucher/…), kotak merek menjawab "punya siapa" (Telkomsel,
 * XL, PLN, …). Daftar produk yang panjang tidak bisa dipindai kalau kedua pertanyaan itu dicampur
 * dalam satu daftar.
 *
 * Chip memakai --r-pil (bulat penuh) dan kotak merek memakai --r-kartu (16px): keduanya sudah ada di
 * berkas ini, jadi tidak ada radius baru yang perlu disepakati. Ikon merek adalah berkas PNG di
 * wwwroot/ikon/merek/ — disimpan lokal, bukan ditaut ke layanan luar, karena app dipakai di toko
 * dengan jaringan seadanya dan ikon yang gagal dimuat membuat katalog tampak rusak.
 */

.katalog__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: none;
}

.katalog__chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-pil);
  background: var(--kartu);
  color: var(--tinta-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.chip:hover { border-color: var(--merek-2); color: var(--merek); }
.chip--aktif { background: var(--merek); border-color: var(--merek); color: #fff; }
.chip__jumlah { color: var(--tinta-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip--aktif .chip__jumlah { color: rgba(255, 255, 255, .72); }

.katalog__grup { display: flex; flex-direction: column; gap: 10px; }

.katalog__judul {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.merek {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.merek__kotak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-kartu);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;

  /* Kotak ini dirender sebagai <button> di halaman; tanpa dua baris ini ia membawa gaya bawaan
     peramban (font sistem, teks di tengah) dan tampak berbeda dari sisa app. */
  font: inherit;
  text-align: center;
  color: inherit;
}

.merek__kotak:hover { border-color: var(--merek-2); box-shadow: var(--naik-1); }
.merek__kotak--aktif { border-color: var(--merek); box-shadow: 0 0 0 3px rgba(18, 69, 156, .14); }

.merek__ikon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Lambang netral untuk merek yang memang tidak punya logo (TV, internet, gas, …). Warnanya dari
   halaman, bukan dari berkas — supaya tetap terbaca saat dicetak atau mode kontras tinggi. */
.merek__lambang {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--merek);
}

.merek__nama {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  text-align: center;
  line-height: 1.25;
}

.merek__jumlah { font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }