/*
 * TEMPLATE 13 — "KILAU"
 *
 * Rujukan tampilan: mm.auraplay.id (BangJeff), halaman kategori Honor of Kings
 * dan berandanya — potret HP dan desktop, 25 Agustus 2026, dikirim pemilik.
 * Permintaannya: "pastikan sama atau lebih baik, ada juga background dan banner
 * banner yang bagus, terutama animasi animasi gambar gerak".
 *
 * ═══════════════ APA YANG MEMBUAT RUJUKANNYA TERLIHAT MAHAL ═══════════════
 *
 * Versi pertama tema ini gagal justru karena melewatkan bagian ini: ia meniru
 * susunan bloknya tapi memakai ukuran, warna, dan kerapatan tema Fireflazz yang
 * sudah ada — hasilnya sesak. Yang sebenarnya bekerja di rujukannya ada lima,
 * dan kelimanya dipakai di sini:
 *
 * 1. PANEL LEBIH GELAP DARIPADA KANVAS. Hampir semua tema gelap melakukan
 *    kebalikannya (kartu lebih terang dari latar). Di sini kanvasnya #12151D
 *    dan panelnya nyaris hitam — panel jadi terbaca sebagai LUBANG, bukan
 *    sebagai kartu yang mengambang, dan seluruh halaman terasa dalam.
 * 2. GARIS DIAGONAL TIPIS di permukaan besar. Nyaris tak terlihat (2,2% putih)
 *    tapi ia yang membedakan "hitam" dari "hitam yang dirancang".
 * 3. RUANG. Kolom isian setinggi 54px, kartu nominal berpadding 14px, judul
 *    bagian 17px. Versi pertama memakai 48/12/14 dan itu bedanya.
 * 4. SENI DIPAJANG BESAR DAN PENUH — spanduk judul selebar layar tanpa sudut
 *    membulat, dengan salinan dirinya yang diburamkan sebagai latar.
 * 5. ANGKA LANGKAH SEBAGAI BLOK PADAT beraksen di tepi kiri panel, bukan
 *    lencana bulat kecil. Itu satu-satunya bidang beraksen besar di halaman
 *    beli, dan ia yang memberi arah baca.
 *
 * ══════════ EMPAT HAL YANG TAK DIPUNYAI DUA BELAS TEMA LAIN ═══════════════
 *
 * 1. KANVAS HIDUP. Tiga pusaran cahaya yang hanyut dan kabut bintang yang
 *    bergeser, semuanya diturunkan dari --accent/--brand. Nol gambar, nol
 *    permintaan jaringan, dan seluruhnya digerakkan `transform` supaya berjalan
 *    di lapisan komposit — bukan `background-position` yang memaksa cat ulang
 *    tiap bingkai.
 * 2. CINCIN CAHAYA BERPUTAR pada kartu nominal terpilih (conic-gradient +
 *    @property). Yang bergerak HANYA cincinnya; kartu, nama, dan harga diam.
 * 3. SPANDUK JUDUL BERLAPIS yang bergerak: latar buram membesar pelan (ken
 *    burns), seni utuh mengapung, sapuan kilau melintas, dan METEOR melintasi
 *    langitnya — kosakata seni rujukannya, tapi digambar CSS sehingga berlaku
 *    untuk 586 judul, bukan cuma untuk judul yang gambarnya kebetulan
 *    bermeteor.
 * 4. PITA BERJALAN berisi transaksi nyata, menggantikan popup bukti sosial.
 *
 * SEMUA GERAK MATI TOTAL di `prefers-reduced-motion: reduce`, dan halaman tetap
 * utuh: tak satu piksel bergeser, tak satu elemen hilang.
 *
 * ═══════════════ YANG SENGAJA TIDAK DITIRU, DAN ALASANNYA ════════════════
 *
 *   - Rating "0.0 / 5.0" berdampingan dengan "100% pembeli merasa puas" dan nol
 *     ulasan di bawahnya. Angka yang saling membantah lebih merusak kepercayaan
 *     daripada tak ada angka.
 *   - "Tersedia 12" pada kartu flash sale. Stok Fireflazz berupa KEADAAN
 *     (ada/kosong), bukan jumlah; angka itu harus dikarang untuk bisa dicetak.
 *   - Kode promo yang memajang promo kedaluwarsa berstatus "Tidak Tersedia".
 *   - Biaya layanan 2,5–3% per metode. Harga di sini final di ringkasan.
 *   - Tombol unduh Google Play / App Store. Toko Fireflazz tak punya aplikasi.
 *   - Metode pembayaran sebagai PILIHAN. Metodenya benar-benar dipilih di
 *     halaman gateway; di sini ia keterangan, dan kalimatnya menyebutkan itu.
 *
 * Kosakata kelasnya `k13-*` — tak bertabrakan dengan gm-*, t2-*, b3-*, a4-*,
 * k5-*, p6-*, n7-*, s8-*, k9-*, l10-*, a11-*, l12-*.
 */

/*
 * HURUF SEMPIT — dan ini bagian yang paling lama luput.
 *
 * Rujukannya memakai IBM Plex Sans Condensed di SELURUH halaman
 * (`getComputedStyle(document.body).fontFamily` di situsnya, 25 Agu 2026), dan
 * itulah sebab utama halamannya terbaca padat-rapi sementara salinan pertama
 * tema ini terbaca gemuk: huruf sistem 15,5px memakan ruang jauh lebih lebar
 * pada nama nominal yang panjangnya tak bisa ditawar ("Honor Of Kings
 * Kombinasi 240 Tokens").
 *
 * Tiga potong, latin saja, 19–20 KB masing-masing, `font-display: swap`. T8 dan
 * T11 sudah menempuh jalan yang sama; huruf sistem tak punya versi sempit yang
 * bisa diandalkan lintas Android/iOS.
 */
@font-face {
  font-family: "Plex Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font/plex-condensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plex Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("font/plex-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plex Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font/plex-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ff-teks: "Plex Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /*
   * KANVAS NETRAL, AKSEN HANYA SEBAGAI AKSEN.
   *
   * Ini permintaan pemilik (25 Agu 2026: "warna demo template 13 terlalu aneh,
   * gunakan warna sesuai contoh yang saya kirim") dan memang begitulah cara
   * rujukannya bekerja: --warna_1/#101010 dan --warna_4/#0A0A0A untuk seluruh
   * permukaan, dan #0044FF hanya untuk tombol, tautan, dan penanda.
   *
   * Versi sebelumnya mencampurkan 5–9% aksen ke SETIAP permukaan. Di toko
   * beraksen biru elektrik hasilnya bukan "malam kebiruan" melainkan seluruh
   * halaman bernada navy — dan di toko beraksen jingga, kanvasnya cokelat.
   * Permukaan netral juga yang membuat sepuluh palet tema ini benar-benar
   * terlihat berbeda satu sama lain: yang berubah warnanya cuma yang memang
   * menandakan sesuatu.
   *
   * PANEL LEBIH GELAP DARIPADA KANVAS tetap dipertahankan — pembalikan itu yang
   * membuat panel terbaca sebagai lubang, bukan kartu yang mengambang.
   */
  /*
   * Angkanya BUKAN kira-kira: dibaca dari DOM rujukannya (25 Agu 2026).
   * Kanvas #101010, panel #0A0A0A, kartu #1C1C1C, garis rgba(255,255,255,.1),
   * tinta #F6F6F5 — dan tiga tingkat itu bekerja sebagai TANGGA: panel
   * tenggelam di bawah kanvas, kartu naik lagi di atas panel.
   */
  --bg:      #101010;
  /* Panel: LUBANG, bukan kartu yang mengambang. */
  --card:    #0A0A0A;
  /* Kartu di DALAM panel — satu tingkat di atasnya. */
  --card-2:  #1C1C1C;
  /* Kolom isian: paling terang, karena yang bisa diketik harus naik paling
     tinggi. Rujukannya memakai #3a3a3a; ini setingkat lebih tenang. */
  --isian:   #2E2E2E;
  /* Permukaan tenggelam untuk chip dan keping kecil (rgba putih 4% di
     rujukannya, ditulis padat supaya tak bertumpuk-tumpuk transparansi). */
  --sunk:    #171717;
  --line:    #2B2B2B;
  --line-2:  #3D3D3D;

  /* 17,4:1 di atas panel. */
  --ink:   #F6F6F5;
  /* 9,4:1 di atas panel, 7,6:1 di atas kartu. */
  --ink-2: #B4B4B3;
  /*
   * Tinta paling redup yang masih boleh memuat kata: 5,4:1 di atas panel dan
   * 4,8:1 di atas kartu. Diukur terhadap permukaan tempat ia BENAR-BENAR
   * berdiri — pelajaran yang sudah dibayar sekali di T10.
   */
  --ink-3: #8A8A89;

  --accent: #0044FF;
  /*
   * Tinta beraksen: 55% aksen + putih. Rumusnya WAJIB sama persis dengan kunci
   * `uji.tinta` template t13 di config/fireflazz.php — kalau menyimpang, alat
   * uji kontras mengukur warna yang berbeda dari yang dilihat pembeli.
   *
   * Porsinya lebih rendah daripada T12 (0,70) karena keluarga warnanya TUA:
   * 70% dari #1D4ED8 masih terlalu gelap untuk berdiri di atas kanvas ini.
   */
  --accent-2:  color-mix(in srgb, var(--accent) 55%, #ffffff);
  --accent-06: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-24: color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
  /*
   * Tulisan DI ATAS aksen. PUTIH, kebalikan T12/T11/T7 — konsekuensi paletnya,
   * bukan selera: keluarga warna tema ini tua, dan tinta gelap di atas #1D4ED8
   * berhenti di 2,4.
   */
  --on-accent: #FFFFFF;
  --brand: #22D3EE;

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

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

  --sh:   0 1px 0 rgba(255, 255, 255, .03), 0 24px 48px -30px rgba(0, 0, 0, 1);
  --glow: 0 0 0 1px var(--accent-45), 0 0 16px var(--accent-24), 0 0 46px var(--accent-12);

  /*
   * GARIS DIAGONAL — tekstur permukaan besar, salah satu dari lima hal yang
   * membuat rujukannya terbaca mahal. 2,2% putih: di atas itu ia jadi motif
   * yang bersaing dengan seni game; di bawah itu ia tak ada gunanya.
   */
  --garis: repeating-linear-gradient(
    116deg,
    transparent 0 28px,
    rgba(255, 255, 255, .022) 28px 62px
  );

  /* Bingkai dan jarak tepi bersama — dibaca blok bersama (spanduk, pengumuman,
     promo, lapak, artikel, katalog, dokumen, alat pemain). Nilainya WAJIB sama
     persis dengan .k13-wrap di bawah. */
  --ff-wrap:   1180px;
  --ff-gutter: 16px;

  --top-h: 62px;
  /* Tinggi bilah tab bawah. Dibaca blok bersama (alat pemain menempelkan
     bilahnya di ATAS bilah tab). Dinolkan di desktop, paling bawah berkas. */
  --tab-h: 64px;

  --pita-durasi: 42s;
}

* { 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.
 */
[hidden] { display: none !important; }

/*
 * Latar dipasang di <html>, BUKAN di <body>.
 *
 * Kalau body punya latar, peramban menyalinnya ke kanvas halaman dan
 * mengecatnya di belakang SEGALANYA — termasuk lapisan cahaya ber-z-index -1,
 * yang lalu tak pernah terlihat sama sekali.
 */
html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--ff-teks);
  /* 16px/1.5 — angka rujukannya, dan huruf sempit yang menampungnya: teks 16px
     Plex Condensed memakan lebar yang kira-kira sama dengan 14px huruf sistem. */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* Halaman beli membawa bilah bayar menempel DI ATAS bilah tab. */
body.k13-has-bar { padding-bottom: calc(var(--tab-h) + 84px + env(safe-area-inset-bottom, 0px)); }

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

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

/* ══════════════════════════════ KANVAS HIDUP ══════════════════════════════ */

.k13-langit {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Menjepit tata letak, cat, dan gaya anak-anaknya. `strict` sengaja TIDAK
     dipakai: ia ikut membawa penjepitan UKURAN, dan ukuran lapisan ini justru
     datang dari inset — bukan dari isinya. */
  contain: layout paint style;
}

.k13-langit span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.k13-langit-a {
  top: -20vmax; left: -14vmax;
  width: 62vmax; height: 62vmax;
  background: radial-gradient(circle, var(--accent-45) 0%, transparent 62%);
  opacity: .3;
  animation: k13-hanyut-a 34s ease-in-out infinite alternate;
}

.k13-langit-b {
  top: 24vmax; right: -24vmax;
  width: 56vmax; height: 56vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 34%, transparent) 0%, transparent 65%);
  opacity: .18;
  animation: k13-hanyut-b 44s ease-in-out infinite alternate;
}

.k13-langit-c {
  bottom: -28vmax; left: 16vmax;
  width: 50vmax; height: 50vmax;
  background: radial-gradient(circle, var(--accent-24) 0%, transparent 68%);
  opacity: .26;
  animation: k13-hanyut-c 52s ease-in-out infinite alternate;
}

.k13-langit-bintang {
  position: absolute;
  inset: -30%;
  border-radius: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 12%, rgba(255, 255, 255, .34), transparent 60%),
    radial-gradient(1.8px 1.8px at 84% 58%, color-mix(in srgb, var(--brand) 70%, white), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 78%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 88%, color-mix(in srgb, var(--accent) 70%, white), transparent 60%);
  background-size: 340px 340px, 460px 460px, 520px 520px, 300px 300px, 620px 620px;
  animation: k13-bintang 120s linear infinite;
  opacity: .32;
}

@keyframes k13-hanyut-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 7vmax, 0) scale(1.18); }
}

@keyframes k13-hanyut-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-11vmax, -6vmax, 0) scale(.92); }
}

@keyframes k13-hanyut-c {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to   { transform: translate3d(7vmax, -9vmax, 0) scale(1.15); }
}

@keyframes k13-bintang {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-340px, -340px, 0); }
}

/* ═══════════════════════════════ BINGKAI ══════════════════════════════════ */

.k13-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.k13-sec { margin-top: 30px; }

.k13-mt-1 { margin-top: 10px; }
.k13-mt-2 { margin-top: 16px; }
.k13-mt-3 { margin-top: 24px; }

.k13-center { text-align: center; }
.k13-dim  { color: var(--ink-3); }
.k13-mute { color: var(--ink-2); }
.k13-small { font-size: 13px; }
.k13-mono { font-family: var(--ff-mono); font-size: 13px; letter-spacing: -.2px; }

.k13-hint {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.k13-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}

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

.k13-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--top-h);
  display: flex;
  align-items: center;
  /* Kaca buram HANYA sebagai tambahan: warnanya sudah cukup pekat sendiri,
     jadi peramban tanpa backdrop-filter tetap mendapat bilah yang terbaca. */
  background: color-mix(in srgb, #0B0B0E 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--line);
}

.k13-top-in { display: flex; align-items: center; gap: 10px; }

.k13-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
}

.k13-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #ffffff), var(--accent));
  color: var(--on-accent);
  font-weight: 800;
  font-size: 16px;
  box-shadow: var(--glow);
}

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

.k13-brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k13-caripalsu {
  display: none;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--r-pil);
  background: var(--isian);
  color: var(--ink-3);
  font-size: 13.5px;
}

.k13-caripalsu:hover { background: #262626; color: var(--ink-2); }

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

.k13-nav { display: none; align-items: center; gap: 2px; }

.k13-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: var(--r-pil);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  transition: color .16s ease, background .16s ease;
}

.k13-nav a:hover { color: var(--ink); background: var(--accent-12); }
.k13-nav a[aria-current] { color: var(--accent-2); background: var(--accent-12); }

.k13-saldo {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pil);
  background: var(--accent-12);
  box-shadow: inset 0 0 0 1px var(--accent-24);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.k13-ikonbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pil);
  background: var(--sunk);
  color: var(--ink-2);
  flex: 0 0 auto;
}

/* ══════════════════════════ PITA TRANSAKSI ═══════════════════════════════ */

/*
 * PITA TRANSAKSI — strip tipis yang MENEMPEL di bawah bilah atas.
 *
 * Selebar layar, tanpa sudut membulat, tanpa bingkai, tanpa jarak dari bilah di
 * atasnya: ia bagian dari kepala halaman, bukan kartu yang berdiri di dalam
 * isi. Tingginya 32px — cukup untuk satu baris 11,5px, dan tak cukup untuk jadi
 * blok yang menuntut dibaca.
 */
.k13-proof {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 16px;
  background: #0B0B0E;
  box-shadow: inset 0 -1px 0 var(--line);
  overflow: hidden;
  /* Isinya keterangan yang lewat, bukan teks yang dibaca lalu disalin. Tanpa
     ini, menyeleksi halaman ikut memungut SELURUH daftar DUA KALI — salinan
     kedua memang ada supaya putarannya menyambung, dan ia tak punya urusan
     dengan papan klip siapa pun. */
  user-select: none;
  -webkit-user-select: none;
}

/* Label yang DIAM di kiri. Tanpa ini stripnya cuma deretan nama produk yang
   mengambang, dan yang baru mendarat tak punya cara tahu itu daftar apa. */
.k13-proof-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-right: 10px;
  box-shadow: inset -1px 0 0 var(--line);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Jendela: satu-satunya bagian yang memotong dan memudar. */
.k13-proof-jendela {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.k13-proof-jendela::before,
.k13-proof-jendela::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}

.k13-proof-jendela::before { left: 0;  background: linear-gradient(to right, #0B0B0E, transparent); }
.k13-proof-jendela::after  { right: 0; background: linear-gradient(to left,  #0B0B0E, transparent); }

.k13-proof-jalur {
  display: flex;
  width: max-content;
  animation: k13-jalan var(--pita-durasi) linear infinite;
  will-change: transform;
}

/* Berhenti saat disentuh atau ditunjuk tetikus: pita yang terus berjalan
   ketika seseorang sedang membaca satu barisnya adalah alasan orang membenci
   teks berjalan. */
.k13-proof:hover .k13-proof-jalur,
.k13-proof:focus-within .k13-proof-jalur { animation-play-state: paused; }

.k13-proof-set {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  flex: 0 0 auto;
}

.k13-proof-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1;
}

.k13-proof-item b { color: var(--ink-2); font-weight: 700; }
.k13-proof-item > span { color: var(--ink-3); }

.k13-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
  animation: k13-denyut 2.2s ease-out infinite;
}

@keyframes k13-jalan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes k13-denyut {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ═══════════════════════════ KEPALA BAGIAN ═══════════════════════════════ */

.k13-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.k13-sec-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 auto;
  background: var(--accent-12);
  box-shadow: inset 0 0 0 1px var(--accent-24);
  color: var(--accent-2);
}

.k13-sec-in { min-width: 0; }

.k13-sec-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
}

/* Subjudul satu kalimat, seperti rujukannya ("Beberapa produk yang paling
   populer saat ini"). Yang tak punya kalimat jujur untuk ditulis tak
   mencetaknya — kalimat hiasan di bawah tiap judul membuat halaman terbaca
   seperti brosur. */
.k13-sec-sub {
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.k13-sec-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 15px;
  border-radius: var(--r-pil);
  background: var(--sunk);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

.k13-sec-link:hover { background: var(--accent-12); }

/* ═════════════════════════════ PERMUKAAN ═════════════════════════════════ */

.k13-panel {
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--r);
  background-color: var(--card);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh);
}

.k13-alert {
  margin: 14px 0 0;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.6;
  background-color: var(--card-2);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line);
}

.k13-alert-info  { box-shadow: inset 0 0 0 1px var(--accent-24); }
.k13-alert-ok    { color: #C9F5E4; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.k13-alert-error { color: #FFD5DC; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 38%, transparent); }

.k13-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pil);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: var(--sunk);
  color: var(--ink-2);
}

.k13-badge-ok   { color: #B9F2DE; background: color-mix(in srgb, var(--ok) 18%, #171717); }
.k13-badge-bad  { color: #FFD1DA; background: color-mix(in srgb, var(--bad) 18%, #171717); }
.k13-badge-wait { color: #FDE9BC; background: color-mix(in srgb, var(--warn) 18%, #171717); }
.k13-badge-run  { color: var(--accent-2); background: var(--accent-12); }
.k13-badge .k13-dot { width: 7px; height: 7px; background: currentColor; }

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

.k13-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 52px. Rujukannya memakai 56 untuk tombol utama, dan pembeli topup banyak
     yang memakai HP murah berlayar kecil — sasaran sentuh Material menang atas
     sasaran sentuh Apple di sini. */
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pil);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #ffffff), var(--accent));
  color: var(--on-accent);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--glow);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

/* Sapuan kilau melintasi tombol utama tiap enam detik. Ukurannya, warnanya,
   dan tulisannya tetap diam, jadi ia tak pernah bergeser di bawah jempol yang
   sedang mengarah ke sana. */
.k13-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  animation: k13-sapu 6s ease-in-out infinite;
}

.k13-btn:hover { filter: brightness(1.08); }
.k13-btn:active { transform: translateY(1px); }

.k13-btn[disabled] {
  background: var(--isian);
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

/* Tombol mati tak berkilau: kilau adalah janji "ini bisa ditekan". */
.k13-btn[disabled]::after { display: none; }

.k13-btn-full { display: flex; width: 100%; }

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

.k13-btn-ghost::after { display: none; }
.k13-btn-ghost:hover { background: #3A3A3A; }

.k13-danger { color: var(--danger); }

@keyframes k13-sapu {
  0%,
  62%  { transform: translate3d(-160%, 0, 0) skewX(-18deg); }
  92%,
  100% { transform: translate3d(320%, 0, 0) skewX(-18deg); }
}

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

.k13-input {
  display: block;
  width: 100%;
  /* Pil setinggi 54px, berisi, TANPA garis tepi — bentuk kolom isian
     rujukannya. Kotak bergaris tipis terbaca sebagai formulir; pil berisi
     terbaca sebagai tempat mengetik. */
  min-height: 54px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--isian);
  color: var(--ink);
  font-family: inherit;
  /* 16px: Safari iOS memperbesar seluruh halaman begitu kolom berhuruf lebih
     kecil menerima fokus, dan halaman yang meloncat saat papan tik terbuka
     terasa rusak. */
  font-size: 16px;
  transition: box-shadow .16s ease, background .16s ease;
}

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

.k13-input:focus {
  outline: none;
  background: #3A3A3A;
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px var(--accent-24);
}

select.k13-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 25px, calc(100% - 17px) 25px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

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

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

.k13-chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
}

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

.k13-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  /* 38px. Rujukannya memakai 30px; itu di bawah sasaran sentuh mana pun, dan
     chip kategori adalah hal yang paling sering diketuk di beranda. */
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, box-shadow .16s ease, background .16s ease;
}

.k13-chip:hover { color: var(--ink); }

/*
 * Chip terpilih memakai SEMBURAN aksen dengan tulisan beraksen terang, bukan
 * aksen padat bertulisan putih — aturan yang sama dengan blok bersama: separuh
 * tema Fireflazz memakai aksen menyala, dan chip berisi warna penuh berubah
 * rupa drastis antar toko.
 */
.k13-chip.is-active {
  color: var(--accent-2);
  background: var(--accent-12);
  box-shadow: inset 0 0 0 1.5px var(--accent-45);
}

/* ═══════════════════════ KEPALA BERANDA (RINGKAS) ════════════════════════
 *
 * Versi pertama menaruh panel besar di sini: judul 40px, satu paragraf yang
 * menyebut tiga nama judul, lalu empat keping angka setinggi dua baris. Di HP
 * ia memakan satu layar penuh — layar KEDUA, sesudah spanduk toko — dan judul
 * game pertama baru terlihat di gulir ketiga. Pemilik menyebutnya apa adanya:
 * bertele-tele.
 *
 * Yang berdiri di tempatnya sekarang: satu baris judul dan satu deret keping
 * angka setinggi 34px. Isinya tetap angka yang benar-benar terhitung dari
 * katalog toko — yang dipotong kata-katanya, bukan datanya.
 */
.k13-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
}

.k13-kepala h1 {
  font-size: clamp(19px, 5vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin-right: auto;
}

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

.k13-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.k13-fakta span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--r-pil);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.k13-fakta b { font-size: 13px; font-weight: 800; color: var(--ink); }

/* Sapuan kilau lebar — dipakai spanduk judul dan spanduk toko. */
@keyframes k13-sapu-lebar {
  0%,
  55%  { transform: translate3d(-180%, 0, 0) rotate(8deg); }
  95%,
  100% { transform: translate3d(420%, 0, 0) rotate(8deg); }
}

/* ════════════════════ PROMO BERJALAN — BENTUK RINGKAS ════════════════════
 *
 * Blok promo (store.partials.promo) dipakai ketiga belas template dan membawa
 * gayanya sendiri: kotak bertumpuk enam baris — kicker, nama, keterangan,
 * hitung mundur, bar, sisa slot. Di tema ini ia dirapatkan jadi SATU BARIS
 * berpita aksen di tepi kiri: kicker dan nama di kiri, hitung mundur di kanan,
 * bar setipis 4px di bawahnya, dan keterangan jadi satu baris kecil.
 *
 * Isinya tidak dikurangi sedikit pun — yang dikurangi tingginya, dari ~190px
 * jadi ~86px.
 */
.k13-wrap .ff-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 16px 0 0;
  padding: 13px 16px 13px 15px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 6px var(--r-sm) var(--r-sm) 6px;
  background-color: var(--card);
  background-image:
    var(--garis),
    linear-gradient(90deg, var(--accent-12), transparent 62%);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Baris 1: kicker sendirian, kecil. Baris 2: nama + hitung mundur. */
.k13-wrap .ff-promo-head { order: 1; flex-basis: 100%; }
.k13-wrap .ff-promo-kicker { font-size: 10.5px; }

.k13-wrap .ff-promo-nama {
  order: 2;
  margin: 0;
  font-size: 16px;
  /* Nama promo diketik seller dan panjangnya tak bisa ditebak; ia mengalah
     lebih dulu supaya hitung mundur — yang justru mendesak — tak pernah
     terdorong turun. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hitung mundur didorong ke ujung kanan baris pertama. */
.k13-wrap .ff-promo-jam {
  order: 3;
  margin: 0 0 0 auto;
  gap: 3px;
}

.k13-wrap .ff-promo-jam b {
  min-width: 2ch;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--sunk);
  color: var(--ink);
}

.k13-wrap .ff-promo-jam i { opacity: .45; }
.k13-wrap .ff-promo-jam span { margin-left: 4px; font-size: 10.5px; color: var(--ink-3); }

.k13-wrap .ff-promo-bar {
  order: 4;
  flex-basis: 100%;
  height: 4px;
  margin: 2px 0 0;
  background: var(--sunk);
}

.k13-wrap .ff-promo-bar i { background: var(--accent); }

/* Keterangan dan sisa slot turun ke baris terakhir, berdampingan. */
.k13-wrap .ff-promo-sub,
.k13-wrap .ff-promo-sisa {
  order: 5;
  margin: 0;
  font-size: 11.5px;
  opacity: 1;
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k13-wrap .ff-promo-sisa { order: 6; margin-left: auto; flex: 0 0 auto; }
.k13-wrap .ff-promo-habis { color: var(--accent-2); }

/* ═══════════════════ LAPAK SELLER — BENTUK TEMA INI ══════════════════════
 *
 * Blok lapak (store.partials.lapak) juga dipakai ketiga belas template. Yang
 * diubah di sini tiga hal, dan ketiganya soal kerapatan — bukan isi:
 *
 *   - RINGKASAN DUA BARIS DI KARTU DIBUANG. Keterangan lengkapnya ada di
 *     halaman produknya; di kartu ia membuat enam kartu jadi enam paragraf, dan
 *     mata tak punya tempat berhenti. Yang tersisa: gambar, kategori, nama,
 *     harga, estimasi.
 *   - SENI DIBERI SELUBUNG GELAP di kaki gambar. Sampul lapak dibuat sellernya
 *     sendiri dan warnanya tak kita kendalikan — enam sampul berwarna terang
 *     berjajar di atas kanvas arang terbaca seperti tempelan, bukan seperti
 *     etalase.
 *   - Kartunya memakai permukaan dan garis tema ini, bukan `currentColor`
 *     bercampur yang jadi kelabu ungu di kanvas ini.
 */
.k13-wrap .ff-lp-card {
  border: 0;
  border-radius: var(--r-sm);
  background-color: var(--card);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line);
}

.k13-wrap .ff-lp-card:hover {
  box-shadow: inset 0 0 0 1px var(--accent-45), 0 0 22px var(--accent-12);
}

.k13-wrap .ff-lp-art { background: var(--sunk); }

/* Sampul lapak 16:10, bukan 4:3 — dengan ringkasan dua barisnya dibuang, kartu
   4:3 menyisakan lubang kosong di antara nama dan harga. */
.k13-wrap .ff-lp-art,
.k13-wrap .ff-lp-art img { aspect-ratio: 16 / 10; }

.k13-wrap .ff-lp-art img { filter: saturate(.82) brightness(.94); }

.k13-wrap .ff-lp-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Selubung PENUH, bukan cuma di kaki gambar. Sampul lapak dibuat sellernya
     sendiri: enam sampul biru-ungu-jingga menyala berjajar di atas kanvas
     hitam terbaca seperti tempelan, bukan seperti etalase. Yang diturunkan
     kilaunya, bukan isinya — gambarnya tetap terbaca utuh. */
  background:
    linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .12) 58%),
    rgba(0, 0, 0, .12);
}

.k13-wrap .ff-lp-ringkas { display: none; }

.k13-wrap .ff-lp-body { padding: 12px 13px 14px; gap: 5px; }
.k13-wrap .ff-lp-nama { font-size: 14px; }
.k13-wrap .ff-lp-harga { font-size: 15px; color: var(--accent-2); }
.k13-wrap .ff-lp-est { font-size: 11px; color: var(--ink-3); opacity: 1; }

.k13-wrap .ff-lp-title { font-size: 17px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }

/* Kalimat di bawah judul dijepit satu baris: ia keterangan, bukan paragraf. */
.k13-wrap .ff-lp-sub {
  font-size: 12.5px;
  opacity: 1;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.k13-wrap .ff-lp-all {
  padding: 9px 15px;
  border-radius: var(--r-pil);
  background: var(--sunk);
  color: var(--accent-2);
}

/* ═══════════════════════════ KISI KATALOG ════════════════════════════════
 *
 * KARTU MENDATAR — seni di kiri, nama dan penerbit di kanan. Ini bentuk yang
 * dipakai rujukannya untuk deret "POPULER!", dan dipilih di sini karena tiga
 * alasan yang bisa diukur:
 *
 *   - Nama judul MUAT. Ubin persegi tiga kolom (bentuk T1/T2/T6/T12) memberi
 *     lebar 108px untuk nama di layar 390px, dan "Mobile Legends Indonesia"
 *     terpotong jadi "Mobile Legends…" di kartu paling laku di seluruh
 *     platform.
 *   - Ada tempat untuk PENERBIT. Moonton, Garena, HoYoverse — itu yang dipakai
 *     pembeli memastikan ia menekan judul yang benar di antara beberapa judul
 *     Mobile Legends yang berbeda.
 *   - Seninya lebih besar: 72px penuh, bukan sisa lebar kolom yang dibagi tiga.
 *
 * Yang ditukar: jumlah judul per layar turun. Itu diterima — beranda memang
 * memajang dua belas per kelompok lalu mengantar ke /katalog.
 */
.k13-grid {
  display: grid;
  /* minmax(0, …) di kedua sisi: `1fr` telanjang berarti `minmax(auto, 1fr)`,
     dan sisi `auto` membuat kolom tak boleh lebih sempit daripada judul
     terpanjang yang tak bisa dipenggal — satu "Goddess of Victory: NIKKE" dan
     SELURUH halaman bisa digeser ke samping. Dijaga uji lint. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.k13-kartu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--r-sm);
  background-color: var(--card-2);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease;
}

@media (hover: hover) {
  .k13-kartu:hover {
    transform: translateY(-2px);
    background-color: #232323;
    box-shadow: inset 0 0 0 1px var(--accent-45), 0 0 22px var(--accent-12), 0 16px 28px -20px #000;
  }
}

.k13-kartu:active { transform: translateY(0); }

.k13-kartu-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-3);
  /*
   * Kilap penantian. Terlihat HANYA selama seni judulnya belum tercat — begitu
   * gambar mendarat ia menutupi bidang ini sepenuhnya. Nol JS, nol keadaan
   * yang harus diurus: yang bergerak berhenti dengan sendirinya.
   */
  background:
    linear-gradient(100deg, transparent 34%, var(--accent-12) 50%, transparent 66%) 0 0 / 220% 100%,
    var(--sunk);
  animation: k13-kilap 1.9s linear infinite;
  box-shadow: 0 6px 16px -8px #000;
}

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

.k13-kartu-tanda {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 3px 8px;
  border-bottom-right-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.k13-kartu-in {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.k13-kartu-nama {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.k13-kartu-pub {
  font-size: 12.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Harga di ujung kanan baris: satu kolom yang bisa dibandingkan dari atas ke
   bawah. `text-align: right` supaya angka panjang dan pendek tetap rata di
   sisi yang sama — itu yang membuat daftar terbaca sebagai daftar harga. */
.k13-kartu-harga {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--accent-2);
  white-space: nowrap;
}

.k13-kartu-harga small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

@keyframes k13-kilap {
  from { background-position: 220% 0, 0 0; }
  to   { background-position: -120% 0, 0 0; }
}

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

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

.k13-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: var(--r-sm);
  background-color: var(--card-2);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .16s ease;
}

.k13-row:hover { box-shadow: inset 0 0 0 1px var(--line-2); }

.k13-row-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--sunk);
  color: var(--accent-2);
  font-weight: 800;
}

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

.k13-row-in {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.k13-row-in strong {
  font-size: 14.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k13-row-in > span {
  font-size: 12.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k13-row-go { color: var(--ink-3); font-size: 20px; }

/*
 * Di layar sempit, lencana status turun ke barisnya sendiri.
 *
 * `flex-wrap` sendirian TIDAK cukup: pembungkusan diputuskan dari ukuran DASAR
 * item, jadi lencana pendek ("Berhasil") tetap ikut di baris pertama sementara
 * lencana panjang ("Menunggu pembayaran") turun — dan satu daftar yang sama
 * punya dua bentuk. Pelajaran yang sudah dibayar sekali di T12.
 */
@media (max-width: 430px) {
  .k13-row { flex-wrap: wrap; row-gap: 8px; }
  .k13-row-in { flex-basis: calc(100% - 59px); }
  .k13-row .k13-badge { margin-left: 59px; }
}

/* ═══════════════════════ SPANDUK JUDUL BERLAPIS ══════════════════════════
 *
 * Kepala halaman beli, dan bagian yang paling banyak berubah dari versi
 * pertama tema ini. Bentuknya sekarang mengikuti rujukannya:
 *
 *   - spanduk SELEBAR LAYAR, tanpa sudut membulat, tanpa jarak tepi;
 *   - keping seni besar yang MENAIKI tepi bawah spanduk dari kiri;
 *   - nama judul dan penerbit di sebelahnya, di atas bidang bergaris diagonal;
 *   - baris janji di bawahnya, di dalam bidang yang sama.
 *
 * Seni judul di katalog SELALU persegi, sementara bidang spanduk 16:8 — jadi
 * bidangnya diisi dua lapis: salinan yang diburamkan sebagai latar, lalu seni
 * utuh di tengahnya. Yang baru di sini: lapisannya BERGERAK, dan ada meteor
 * yang melintasi langitnya.
 */
.k13-hero {
  position: relative;
  /* Menembus jarak tepi pembungkus supaya benar-benar selebar layar. Dihitung
     dari --ff-gutter, bukan dari 100vw: 100vw di desktop ikut menghitung bilah
     gulir, dan halaman jadi bisa digeser 15px ke samping. */
  margin: 0 calc(-1 * var(--ff-gutter));
  overflow: hidden;
  background-color: var(--card);
  background-image: var(--garis);
}

.k13-hero-ban {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #08080A;
}

/* Lapis 1: latar buram yang perlahan membesar dan bergeser. Skalanya dimulai
   dari 1,12 supaya tepi buramnya tak pernah menyembul saat ia bergeser. */
.k13-hero-bg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(26px) saturate(130%) brightness(.5);
  transform: scale(1.12);
  animation: k13-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}

/*
 * Lapis 2: seni utuh, MIRING DI SISI KANAN dan terpotong tepi atas — seperti
 * poster yang disandarkan.
 *
 * Versi pertama menaruhnya di TENGAH dan berukuran kecil. Hasilnya: gambar yang
 * sama terbit dua kali dalam satu layar (di tengah spanduk, lalu 3 cm di
 * bawahnya sebagai keping nama) dan terbaca sebagai kesalahan cetak, bukan
 * sebagai rancangan. Digeser ke kanan dan dibesarkan, keduanya jadi punya
 * pekerjaan masing-masing: yang besar mengisi spanduk, yang kecil menandai
 * nama.
 *
 * Amplitudo apungnya kecil (5px) — gerak yang lebih besar berubah dari "hidup"
 * jadi "goyang", dan yang bergoyang di layar pertama terbaca sebagai iklan.
 */
.k13-hero-utuh {
  position: absolute;
  right: 4%;
  top: 46%;
  width: min(42%, 230px);
  height: auto;
  transform: translateY(-50%) rotate(-5deg);
  border-radius: 22px;
  box-shadow: 0 26px 54px -18px #000, 0 0 0 1px rgba(255, 255, 255, .09);
  animation: k13-apung 5.6s ease-in-out infinite;
  will-change: transform;
}

/* Lapis 3: sapuan kilau melintasi spanduk. */
.k13-hero-ban::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 26%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: translate3d(-200%, 0, 0) rotate(10deg);
  animation: k13-sapu-lebar 7.5s ease-in-out infinite;
}

/* Lapis 4: gelap di kaki spanduk supaya bidang nama yang menempel di bawahnya
   menyambung, bukan bertumpuk sebagai dua benda. */
.k13-hero-ban::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--card) 1%, transparent 55%);
}

/*
 * METEOR. Dua garis cahaya yang melintas diagonal tiap beberapa detik.
 *
 * Rujukannya MENGGAMBAR meteor itu ke dalam berkas gambarnya — cantik, tapi
 * cuma ada di satu judul. Di sini ia CSS di atas seni apa pun, jadi seluruh
 * katalog mendapatkannya. Dua saja, dengan jeda panjang: langit yang penuh
 * meteor terbaca sebagai layar rusak.
 */
.k13-hero-meteor,
.k13-hero-meteor::after {
  position: absolute;
  z-index: 2;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--brand));
}

.k13-hero-meteor {
  top: 10%;
  left: -18%;
  width: 120px;
  opacity: 0;
  transform: rotate(28deg);
  animation: k13-meteor 9s linear infinite;
}

.k13-hero-meteor::after {
  content: "";
  top: 120px;
  left: 70px;
  width: 84px;
  animation: k13-meteor 9s linear infinite;
  animation-delay: 3.4s;
}

@keyframes k13-meteor {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg); }
  6%   { opacity: .85; }
  26%  { opacity: 0; transform: translate3d(80vw, 42vw, 0) rotate(28deg); }
  100% { opacity: 0; transform: translate3d(80vw, 42vw, 0) rotate(28deg); }
}

.k13-hero-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 16px 14px;
  /* Keping seni MENAIKI tepi bawah spanduk — bentuk rujukannya, dan yang
     membuat kepala halaman terbaca sebagai satu benda. */
  margin-top: -46px;
}

.k13-hero-art {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card-2);
  box-shadow: 0 0 0 3px var(--card), 0 18px 34px -18px #000;
  font-size: 30px;
  font-weight: 900;
  color: var(--accent-2);
}

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

.k13-hero-in { min-width: 0; padding-bottom: 4px; }

.k13-hero-name {
  font-size: clamp(20px, 5.6vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.k13-hero-pub { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }

.k13-desk {
  position: relative;
  z-index: 3;
  padding: 6px 16px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Baris janji: ikon + kata, tanpa pil — bentuk rujukannya. Pil di sini membuat
   tiga janji pendek terbaca seperti tiga tombol yang tak bisa ditekan. */
.k13-trust {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 16px;
}

.k13-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.k13-trust-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent-2); }

/* Di kaki halaman dan panel bantuan, janji yang sama jadi TAUTAN — di sana ia
   memang bisa ditekan, jadi ia memang berbentuk pil. */
.k13-trust--pil { padding: 0; gap: 8px; }

.k13-trust--pil .k13-trust-item {
  padding: 10px 15px;
  border-radius: var(--r-pil);
  background: var(--isian);
}

@keyframes k13-kenburns {
  from { transform: scale(1.12) translate3d(0, 0, 0); }
  to   { transform: scale(1.26) translate3d(-2%, -2%, 0); }
}

@keyframes k13-apung {
  0%,
  100% { transform: translateY(calc(-50% - 5px)) rotate(-5deg); }
  50%  { transform: translateY(calc(-50% + 5px)) rotate(-3.4deg); }
}

/* ══════════════════════════ PETA LANGKAH ═════════════════════════════════ */

.k13-peta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--r-pil);
  background-color: var(--card);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.k13-peta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .2s ease;
}

.k13-peta-no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sunk);
  font-size: 12px;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

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

.k13-peta-item.is-done .k13-peta-no {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 16px var(--accent-45);
}

.k13-peta-garis {
  flex: 1 1 16px;
  min-width: 16px;
  height: 1px;
  background: var(--line);
}

/* ════════════════════════════ ALUR BELI ══════════════════════════════════ */

.k13-beli { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }

.k13-beli-kiri { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.k13-langkah {
  border-radius: var(--r);
  overflow: hidden;
  background-color: var(--card);
  background-image: var(--garis);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh);
}

/*
 * KEPALA LANGKAH — blok aksen padat di tepi kiri, bentuk rujukannya.
 *
 * Ini satu-satunya bidang beraksen BESAR di halaman beli, dan ia yang memberi
 * arah baca: mata jatuh ke angka, lalu ke judul, lalu ke isinya. Versi pertama
 * tema ini memakai lencana bulat 26px di dalam bidang bernada aksen; itu
 * terbaca sebagai hiasan, bukan sebagai penanda urutan.
 */
.k13-langkah-head {
  display: flex;
  align-items: stretch;
  box-shadow: inset 0 -1px 0 var(--line);
}

.k13-langkah-no {
  display: grid;
  place-items: center;
  width: 58px;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.k13-langkah-title {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.k13-langkah-body { padding: 18px; }

/* Akun yang pernah dipakai, disimpan di peramban (BuyerMemory). */
.k13-saved { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.k13-saved::-webkit-scrollbar { display: none; }

.k13-saved-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 16px 9px 9px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--sunk);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.k13-saved-btn.is-active { box-shadow: inset 0 0 0 2px var(--accent), 0 0 18px var(--accent-12); }

.k13-saved-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-12);
  color: var(--accent-2);
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
}

.k13-saved-in { display: flex; flex-direction: column; line-height: 1.3; }
.k13-saved-in strong { font-size: 13.5px; }
.k13-saved-in span { font-size: 11.5px; color: var(--ink-3); }

.k13-nick { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.k13-nick.is-ok { color: var(--ok); font-weight: 700; }
.k13-nick.is-bad { color: var(--bad); font-weight: 700; }

.k13-tier {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ════════════════════════ KARTU NOMINAL + CINCIN ═════════════════════════ */

.k13-noms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.k13-nom {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  /* Stacking context sendiri: cincin cahaya digambar di ::after dengan
     z-index 3, dan tanpa isolasi ia bisa naik ke atas bilah bayar menempel. */
  isolation: isolate;
  transition: box-shadow .18s ease, background .18s ease;
}

.k13-nom input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.k13-nom-in {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  padding: 14px 14px 12px;
}

.k13-nom-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.k13-nom-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
  /* HARGA yang dibesarkan, bukan nama nominalnya: pembeli datang dengan
     anggaran di kepala lalu mencari yang muat. */
  font-size: 16px;
  font-weight: 900;
  color: var(--accent-2);
}

/*
 * Kaki kartu — bentuk rujukannya: bidang sedikit berbeda, dipisah garis rambut.
 *
 * Isinya potongan harga, dan HANYA itu. Tingginya tetap walau kosong: ia alas
 * kartu, dan kartu berpromo yang tiba-tiba lebih tinggi daripada tetangganya
 * membuat kisinya terlihat rusak.
 */
.k13-nom-kaki {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 34px dan padding 6/8 — angka rujukannya. */
  min-height: 34px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 var(--line);
}

@media (hover: hover) {
  .k13-nom:hover { box-shadow: inset 0 0 0 1px var(--line-2); background: #232323; }
}

.k13-nom:focus-within { box-shadow: inset 0 0 0 2px var(--accent-2); }

/*
 * Keadaan terpilih. `:has()` lebih dulu supaya kartunya benar bahkan sebelum
 * satu baris JS berjalan; kelas .is-active dipasang JS untuk peramban yang
 * belum punya :has (WebView Android lawas).
 */
.k13-nom:has(input:checked),
.k13-nom.is-active {
  background: color-mix(in srgb, var(--accent) 20%, #1C1C1C);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 14px var(--accent-24),
    0 0 38px var(--accent-12);
}

/*
 * CINCIN CAHAYA BERPUTAR.
 *
 * conic-gradient bersudut beranimasi lewat @property (sudut biasa tak bisa
 * di-tween), lalu dijepit dua topeng yang saling mengurangi supaya yang
 * tersisa cuma bingkai selebar 2px. Yang bergerak HANYA lapisan ini.
 */
@property --k13-sudut {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.k13-nom:has(input:checked)::after,
.k13-nom.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--k13-sudut),
    transparent 0deg,
    transparent 196deg,
    var(--accent-45) 264deg,
    var(--accent) 322deg,
    color-mix(in srgb, #ffffff 72%, var(--accent)) 352deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: k13-putar 2.8s linear infinite;
}

@keyframes k13-putar {
  to { --k13-sudut: 360deg; }
}

/*
 * Peramban tanpa @property tak bisa menganimasikan sudutnya: conic-gradient-nya
 * akan berdiri diam di 0deg dan terlihat seperti animasi yang macet. Di sana
 * cahayanya diganti sapuan mendatar — gerakan yang berbeda, maksud yang sama.
 */
@supports not (background: conic-gradient(from var(--k13-sudut), red, blue)) {
  .k13-nom:has(input:checked)::after,
  .k13-nom.is-active::after {
    background: linear-gradient(100deg, transparent 34%, var(--accent) 50%, transparent 66%);
    background-size: 220% 100%;
    animation: k13-kilap 2.4s linear infinite;
  }
}

/* Harga coret dan lencana hemat datang dari blok bersama (partials/coret-gaya). */
.k13-nom .ff-coret { font-size: 12px; }
.k13-nom .ff-hemat { font-size: 11px; }

/* ══════════════════════ METODE PEMBAYARAN (KETERANGAN) ═══════════════════ */

.k13-pay {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 11px;
}

.k13-pay-item {
  position: relative;
  padding: 15px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.k13-pay-item.is-utama { box-shadow: inset 0 0 0 1.5px var(--accent-45); }

.k13-pay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}

.k13-pay-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent-12);
  color: var(--accent-2);
}

.k13-pay-ket { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

.k13-pay-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

.k13-pay-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pil);
  background: var(--sunk);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Pita sudut, bentuk yang dipakai rujukannya untuk menandai QRIS. Isinya di
   sini keterangan yang benar-benar berlaku ("Tercepat"), bukan klaim harga
   ("Best Price") yang tak bisa dibuktikan toko mana pun. */
.k13-pay-pita {
  position: absolute;
  top: 11px;
  right: -32px;
  transform: rotate(38deg);
  width: 116px;
  padding: 4px 0;
  text-align: center;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 20px var(--accent-45);
}

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

.k13-beli-kanan { min-width: 0; }

.k13-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-size: 14px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.k13-sum-row > span:first-child { color: var(--ink-3); flex: 0 0 auto; }
.k13-sum-row > span:last-child { text-align: right; overflow-wrap: anywhere; }

.k13-sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
}

.k13-sum-total b {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-2);
  text-shadow: 0 0 22px var(--accent-24);
}

.k13-janji { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

.k13-janji-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.k13-janji-item svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--ok); }

.k13-amt {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--accent-2);
  text-shadow: 0 0 26px var(--accent-24);
}

.k13-kode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--sunk);
}

.k13-kode b { font-family: var(--ff-mono); font-size: 15px; letter-spacing: .02em; }

.k13-serial {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--accent-24);
}

.k13-serial code {
  font-family: var(--ff-mono);
  font-size: 15px;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

/* Halaman nota dan formulir lacak TIDAK selebar katalog: baris
   "Tujuan ……… 1160220317" yang merentang 1120px terbaca seperti tabel, bukan
   seperti nota. Pelajaran yang sudah dibayar sekali di T12. */
.k13-nota   { max-width: 720px; }
.k13-sempit { max-width: 560px; }
.k13-keluar { max-width: 260px; }

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

.k13-status h1 { margin-top: 14px; font-size: 21px; font-weight: 900; }
.k13-status p { color: var(--ink-3); font-size: 14px; }

.k13-status-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent-12);
  box-shadow: inset 0 0 0 1px var(--accent-24), 0 0 30px var(--accent-12);
  color: var(--accent-2);
}

.k13-status-ring.is-ok {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent), 0 0 30px color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.k13-status-ring.is-bad {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent);
  color: var(--bad);
}

/* ═════════════════════════ BILAH BAYAR MENEMPEL ══════════════════════════
 *
 * SELALU TERLIHAT di halaman beli, bukan hanya sesudah nominal dipilih — itu
 * bentuk rujukannya, dan alasannya bagus: bilah yang muncul tiba-tiba
 * memindahkan seluruh halaman ke atas tepat saat jempol sedang mengarah ke
 * sebuah kartu. Sebelum ada pilihan, ia memuat kalimat keadaan.
 */
.k13-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* TEPAT DI ATAS bilah tab, tidak menimpanya: dua bilah bertumpuk membuat
     orang menekan tab saat ingin membayar. */
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: color-mix(in srgb, #0B0B0E 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--line), 0 -16px 34px -20px #000;
}

.k13-bar-art {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sunk);
}

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

.k13-bar-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }

.k13-bar-info > span {
  font-size: 12.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k13-bar-info strong { font-size: 17px; font-weight: 900; color: var(--accent-2); }

.k13-bar .k13-btn { min-height: 46px; padding: 0 22px; flex: 0 0 auto; }

/* Keadaan "belum memilih": bilahnya tetap ada, tombolnya mati, dan yang
   tertulis keadaan sebenarnya. */
.k13-bar.is-kosong .k13-bar-art { display: none; }
.k13-bar.is-kosong .k13-bar-info strong { display: none; }
.k13-bar.is-kosong .k13-bar-info > span { font-size: 13.5px; color: var(--ink-2); white-space: normal; }

/* ══════════════════════ TOMBOL BANTUAN MELAYANG ══════════════════════════
 *
 * Rujukannya menaruh satu tombol pusat bantuan melayang di sudut kanan bawah.
 * Ditiru di sini dengan dua syarat yang tidak dipunyai aslinya:
 *
 *   - Ia HANYA terbit kalau tokonya memang punya kanal (WhatsApp/Telegram yang
 *     diisi seller). Tombol bantuan yang mengantar ke tempat kosong lebih
 *     merusak kepercayaan daripada tak ada tombol.
 *   - Ia duduk DI ATAS bilah tab, dan di halaman beli naik lagi ke atas bilah
 *     bayar. Tombol melayang yang menutupi tombol bayar adalah cara tercepat
 *     membuat pembeli menekan yang salah di detik terakhir.
 */
.k13-lay {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 34;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #ffffff), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--glow), 0 12px 26px -12px #000;
  transition: transform .16s ease, filter .16s ease;
}

.k13-lay:hover { filter: brightness(1.08); }
.k13-lay:active { transform: scale(.95); }
.k13-lay svg { width: 24px; height: 24px; }

/* Cincin denyut — penanda "ini hidup", bukan hiasan yang bergerak terus:
   satu denyut tiap 3 detik, dan berhenti total di prefers-reduced-motion. */
.k13-lay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--accent-45);
  animation: k13-lay-denyut 3s ease-out infinite;
  pointer-events: none;
}

@keyframes k13-lay-denyut {
  0%   { box-shadow: 0 0 0 0 var(--accent-45); }
  60%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

body.k13-has-bar .k13-lay { bottom: calc(var(--tab-h) + 84px + env(safe-area-inset-bottom, 0px)); }

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

.k13-tab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 36;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, #0B0B0E 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 var(--line);
}

.k13-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  transition: color .16s ease;
}

.k13-tab-item[aria-current] { color: var(--accent-2); }

/* Titik penanda di bawah tab aktif — penanda posisi, bukan hiasan: label
   sekecil ini di layar sempit sering terbaca sekilas saja. */
.k13-tab-item[aria-current]::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ══════════════════════════════ KAKI ═════════════════════════════════════ */

/*
 * TAJI CAHAYA di atas kaki halaman.
 *
 * Rujukannya menutup halamannya dengan deretan taji biru menyala — satu berkas
 * gambar yang cuma bisa dipakai untuk toko birunya sendiri. Di sini ia digambar
 * `clip-path` dari warna toko, jadi toko merah menutup halamannya dengan taji
 * merah, dan berat halamannya nol.
 */
.k13-taji {
  height: 40px;
  margin-top: 40px;
  /* Terang di UJUNG, memudar di pangkal — taji yang pangkalnya padat dan
     ujungnya pucat terbaca sebagai dinding gergaji, bukan sebagai cahaya yang
     naik. Arah gradasinya dibalik sesudah dilihat langsung di halaman. */
  background: linear-gradient(0deg, transparent 4%, var(--accent-45) 62%, var(--accent) 100%);
  filter: drop-shadow(0 -4px 10px var(--accent-24));
  clip-path: polygon(
    0 100%, 0 46%, 6% 100%, 12% 30%, 18% 100%, 24% 52%, 30% 100%, 36% 22%,
    42% 100%, 50% 40%, 58% 100%, 64% 22%, 70% 100%, 76% 52%, 82% 100%,
    88% 30%, 94% 100%, 100% 46%, 100% 100%
  );
  animation: k13-taji-nyala 4.5s ease-in-out infinite;
}

@keyframes k13-taji-nyala {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

.k13-foot {
  padding: 30px 0 26px;
  background-color: #0B0B0E;
  background-image: var(--garis);
  box-shadow: inset 0 1px 0 var(--line);
}

.k13-foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 26px 20px;
}

/* Kolom merek memakan dua kolom supaya taglinenya tak jadi satu kata per
   baris; jumlah kolom lainnya tak tetap (menu bersyarat), jadi kisinya
   auto-fit dan tak pernah meninggalkan lubang. */
.k13-foot-cols > div:first-child { grid-column: span 2; }

.k13-bayar { margin-top: 28px; }

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

.k13-foot-bottom {
  margin-top: 26px;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

/* ════════════════════ BLOK BERSAMA YANG DITUMPANGI ═══════════════════════
 *
 * Spanduk toko (store.partials.banner) dipakai KETIGA BELAS template dan
 * membawa gayanya sendiri. Yang ditambahkan di sini: spanduk dibuat SELEBAR
 * LAYAR di HP (bentuk rujukannya) dan diberi satu sapuan kilau. Rasio,
 * perilaku geser, dan titik penandanya tidak disentuh.
 */
.k13-wrap .ff-ban { margin-top: 0; }

.k13-wrap .ff-ban-slide { border-radius: 0; }

.k13-wrap .ff-ban-trek { gap: 0; }

.k13-wrap .ff-ban-slide > a,
.k13-wrap .ff-ban-slide > div { position: relative; overflow: hidden; }

.k13-wrap .ff-ban-slide > a::after,
.k13-wrap .ff-ban-slide > div::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 22%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translate3d(-200%, 0, 0) rotate(10deg);
  animation: k13-sapu-lebar 8.5s ease-in-out infinite;
}

/* Titik penanda dirapatkan ke spanduknya: di HP spanduk selebar layar dan
   titiknya berdiri di dalam pembungkus, jadi jarak bawaan 10px terbaca sebagai
   lubang gelap selebar layar di antara dua blok. */
.k13-wrap .ff-ban-dots { color: var(--ink-2); margin-top: 4px; }

/* HP: spanduk menembus jarak tepi jadi benar-benar selebar layar. */
@media (max-width: 719px) {
  .k13-wrap .ff-ban { margin-inline: calc(-1 * var(--ff-gutter)); }
}

@media (min-width: 720px) {
  .k13-wrap .ff-ban-slide { border-radius: var(--r); box-shadow: 0 0 30px -6px var(--accent-12); }
  .k13-wrap .ff-ban-trek { gap: 12px; }

  /*
   * RASIONYA yang diubah di layar lebar, BUKAN lebarnya.
   *
   * Spanduk bersama dikunci 16:9 karena itu ukuran yang disarankan di panel
   * seller — dan di layar 1180px itu berarti 646px tinggi, jadi spanduk
   * memegang hampir seluruh layar pertama dan katalog baru terlihat di gulir
   * kedua. Aturannya sudah ditulis sejak T1: yang boleh digeser rasionya, sebab
   * spanduk yang lebarnya tak segaris dengan isi lain adalah masalah yang sudah
   * pernah dibereskan. Gambarnya tetap 1200x675 dan dipotong `object-fit:
   * cover` di tengah — sama seperti yang dilakukan rujukannya.
   */
  .k13-wrap .ff-ban-slide img { aspect-ratio: 2.6 / 1; }
}

/* ══════════════════════════ GERAK MASUK ══════════════════════════════════
 *
 * Kartu naik sedikit saat pertama tercat. Dibungkus `no-preference` — bukan
 * dimatikan di blok reduced-motion di bawah — karena `animation: none` di sana
 * akan meninggalkan elemen pada keadaan AWAL animasinya (opacity 0) di sebagian
 * peramban, dan halaman terbit kosong untuk orang yang justru meminta lebih
 * sedikit gerak.
 */
@media (prefers-reduced-motion: no-preference) {
  .k13-sec .k13-kartu,
  .k13-langkah,
  .k13-panel {
    animation: k13-naik .42s cubic-bezier(.22, .8, .3, 1) both;
  }

  @keyframes k13-naik {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ═══════════════════════════ LAYAR LEBAR ═════════════════════════════════ */

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

  /* Dua kolom ke atas, kartunya tinggal separuh lebar: harga turun ke bawah
     nama, kalau tidak nama judul panjang terjepit sampai satu kata per baris. */
  .k13-kartu { flex-wrap: wrap; }
  .k13-kartu-in { flex-basis: calc(100% - 86px); }
  .k13-kartu-harga {
    flex-basis: 100%;
    margin-left: 86px;
    padding-left: 0;
    text-align: left;
    font-size: 13.5px;
  }
  .k13-kartu-harga small { display: inline; margin-right: 4px; }
}

@media (min-width: 560px) {
  .k13-noms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k13-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k13-hero-art { width: 120px; height: 120px; }
}

@media (min-width: 900px) {
  .k13-caripalsu { display: flex; max-width: 400px; margin-left: 14px; }
  .k13-nav { display: flex; }
  .k13-ikonbtn.is-hp { display: none; }

  .k13-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k13-noms { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .k13-beli { grid-template-columns: minmax(0, 1fr) 348px; align-items: start; }

  .k13-beli-kanan {
    position: sticky;
    /* Bilah atas menempel setinggi --top-h; ringkasan yang berhenti tepat di
       bawahnya tak pernah tertutup separuh. */
    top: calc(var(--top-h) + 16px);
  }

  /* Spanduk judul di desktop: lebih rendah (seni katalog persegi tak punya
     piksel untuk 400px tinggi) dan bersudut membulat di dalam pembungkus. */
  .k13-hero { margin: 0; border-radius: var(--r); }
  .k13-hero-ban { aspect-ratio: 16 / 5.6; }
  .k13-hero-utuh { width: min(30%, 330px); right: 6%; }
  .k13-hero-top { margin-top: -58px; padding: 0 24px 16px; gap: 20px; }
  .k13-hero-art { width: 148px; height: 148px; border-radius: 28px; }
  .k13-desk { padding: 8px 24px 0; max-width: 92ch; }
  .k13-trust { padding: 18px 24px; }
}

@media (min-width: 1100px) {
  .k13-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Bilah tab bawah milik HP. Di desktop menunya sudah berdiri di bilah atas
     DAN di kaki halaman, dan tinggi cadangannya dinolkan supaya blok bersama
     (bilah alat pemain) tak menyisakan ruang kosong di bawah layar. */
  .k13-tab { display: none; }
  :root { --tab-h: 0px; }
  body { padding-bottom: 0; }
  body.k13-has-bar { padding-bottom: 0; }
  .k13-bar { display: none !important; }
  .k13-lay { bottom: 24px; right: 24px; }
  body.k13-has-bar .k13-lay { bottom: 24px; }
}

/* ═══════════════════════ GERAK DIMATIKAN TOTAL ═══════════════════════════
 *
 * Syarat, bukan tambahan. Sesudah blok ini halaman harus tetap UTUH: tak satu
 * piksel pun bergeser, tak satu elemen pun hilang. Karena itu yang dimatikan
 * `animation` dan `transition` saja — bukan lapisannya, bukan opacity-nya.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Kilau yang berhenti di tengah bidang akan berdiri sebagai garis putih
     permanen melintasi spanduk; yang benar ia tak pernah terbit sama sekali.
     Meteor yang berhenti di tengah langit lebih buruk lagi. */
  .k13-btn::after,
  .k13-hero-ban::after,
  .k13-hero-meteor,
  .k13-wrap .ff-ban-slide > a::after,
  .k13-wrap .ff-ban-slide > div::after { display: none; }

  /* Kilap penantian ikut mati; yang tersisa permukaan biasa. */
  .k13-kartu-art { background: var(--sunk); }

  /* Cincin cahaya berhenti berputar tapi TETAP ADA: ia penanda "kartu ini yang
     kamu pilih", dan penanda yang hilang bersama animasinya adalah keterangan
     yang hilang. */
  .k13-nom:has(input:checked)::after,
  .k13-nom.is-active::after { background: var(--accent); }

  /* Taji kaki halaman berhenti berdenyut, tetap terbit. */
  .k13-taji { opacity: .8; }

  /* Cincin denyut tombol bantuan tak boleh berhenti sebagai lingkaran tebal
     permanen di sekeliling tombol. */
  .k13-lay::after { display: none; }

  /* Pita transaksi berdiri diam di awal dan digeser sendiri. Salinan
     keduanya — yang cuma ada supaya putarannya tak berkedip di sambungan —
     ikut dibuang, kalau tidak seluruh daftarnya terbaca dua kali oleh yang
     menggesernya sampai habis. */
  .k13-proof-jendela { overflow-x: auto; }
  .k13-proof-jalur { transform: none; }
  .k13-proof-set[aria-hidden="true"] { display: none; }
}