/* ==========================================================================
   Halaman Afiliasi — empat section (.wz-af, .wz-bk, .wz-lk, .wz-at)

   Menggantikan watzap.id/afiliasi versi Elementor. Isinya disalin dari
   halaman lama; yang dibangun ulang kerangkanya — sama seperti perlakuan
   Syarat & Ketentuan.

   Kenapa empat section satu berkas. Preseden legal.css: satu berkas gaya
   memegang satu halaman. Memecahnya jadi empat berkas berarti empat <link>
   dan empat nomor ?v= yang harus dinaikkan bersamaan setiap kali halaman
   ini disentuh — biaya tanpa imbalan, karena keempatnya tidak pernah dipakai
   terpisah dari halaman ini.

   Nol gambar. Empat ilustrasi langkah di halaman lama memajang harga paket
   yang sudah tidak berlaku; menyalinnya berarti menerbitkan angka basi yang
   tidak bisa disunting. Panggungnya digambar ulang dengan CSS di blok
   "Panggung langkah" di bawah, dan satu-satunya angka yang tersisa di sana
   adalah 20% dan #1232 — dua-duanya ada di teks halaman lama.

   Awalan reveal .wz-af-rv / .wz-af-js sengaja dipakai keempat section.
   Di sini "wz-af" adalah keluarga halaman, bukan nama satu section: polanya
   ditulis sekali lalu dipasang ke tiap akar section oleh afiliasi.js. Empat
   salinan aturan yang identik cuma menambah tempat untuk melenceng.
   ========================================================================== */

/* ==========================================================================
   1. Pembuka (.wz-af)
   ========================================================================== */

.wz-af {
  position: relative;
  isolation: isolate;
  padding: var(--wz-sec-y) 0;
  background: var(--wz-wash);
  overflow: hidden;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

/* Padding atas 118px-nya TIDAK di sini — ia hidup di nav-revamp.css bersama
   .wz-lg dan .wz-ts. Angkanya diturunkan dari tinggi bar melayang, jadi ia
   milik berkas bar, bukan milik section (sistem-desain §4). */

.wz-af *,
.wz-af *::before,
.wz-af *::after { box-sizing: border-box; }

.wz-af :where(p, h1, dl, dt, dd) { margin: 0; padding: 0; }

.wz-af-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Lapisan hias: cincin. Tinta dan opasitasnya sama dengan section lain
   (sistem-desain §2) — yang berbeda cuma bentuknya.

   Ubinnya 54px, bukan 72px. Pada lebar 375px ubin selebar itu cuma muat lima
   kali, dan cincinnya berhenti terbaca sebagai tekstur lalu jadi motif yang
   bersaing dengan judul. Yang dirapatkan ubinnya, bukan dinaikkan opasitasnya
   (sistem-desain §2 aturan 3).

   Warna dan opasitasnya tertulis mentah di dalam data-URI karena var() tidak
   bisa masuk ke sana — nilainya menyalin --wz-decor-rose. Itu satu-satunya
   tempat di berkas ini yang tidak lewat token. */
.wz-af::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Ccircle cx='27' cy='27' r='8' fill='none' stroke='%23c42a5e' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 54px 54px;
  background-repeat: repeat;
  -webkit-mask-image: var(--wz-decor-mask);
          mask-image: var(--wz-decor-mask);
}

/* ---------- Empat angka kunci ------------------------------------------- */

.wz-af-fakta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1000px;
  margin: 46px auto 0;
}

.wz-af-fakta__i {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--wz-line-warm);
  border-radius: 16px;
  text-align: center;
}

.wz-af-fakta__n {
  font-family: var(--wz-display-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--wz-accent);        /* 5,47:1 di atas putih */
}

.wz-af-fakta__k {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wz-ink-soft);      /* 6,90:1 */
  text-wrap: pretty;
}

/* ==========================================================================
   2. Bukti pencairan (.wz-bk)

   Angkanya beku dan disunting tangan. Kalau totalnya berubah, yang berubah
   markup-nya — tidak ada satu pun nilai di berkas ini yang menghitungnya.
   ========================================================================== */

.wz-bk {
  position: relative;
  padding: var(--wz-sec-y) 0;
  background: #fff;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

.wz-bk *,
.wz-bk *::before,
.wz-bk *::after { box-sizing: border-box; }

.wz-bk :where(p, h2, table, caption, th, td) { margin: 0; padding: 0; }

.wz-bk-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.wz-bk-panel {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--wz-line-warm);
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- Menetralkan reset.css ---------------------------------------
   reset.css menata SEMUA <table> di situs ini: bingkai 1px di setiap sel,
   padding 15px, font-size .9em, vertical-align top, th tebal, zebra-striping
   abu-abu, dan latar saat hover. Itu warisan tema lama; halaman ini yang
   pertama benar-benar memakai <table>, jadi baru di sini aturannya ketahuan.

   Dicabut sekali di bawah, lalu SEMUA aturan tabel di berkas ini memakai
   awalan `.wz-bk-panel .wz-bk-tabel` (0,2,x). Awalan itu perlu karena selektor
   zebra reset-nya (0,1,4) — `.wz-bk-tabel td` sendirian yang cuma (0,1,1)
   kalah darinya. Dinaikkan lewat kekhususan, bukan !important (kaidah §1
   prinsip 2).
   ------------------------------------------------------------------------ */

.wz-bk-panel .wz-bk-tabel {
  width: 100%;
  margin: 0;
  font-size: 1rem;                /* reset menyusutkannya ke .9em */
  border-collapse: collapse;
}

.wz-bk-panel .wz-bk-tabel th,
.wz-bk-panel .wz-bk-tabel td {
  padding: 0;
  border: 0;
  background: none;               /* mencabut zebra + hover */
  font-weight: 400;
  line-height: inherit;
  vertical-align: middle;
}

/* Satu-satunya aturan reset yang masih menang di (0,2,4): garis atas di baris
   pertama thead. Ditandingi dengan bentuk selektor yang sama. */
.wz-bk-panel .wz-bk-tabel thead:first-child tr:first-child th {
  border-block-start: 0;
}

/* ---------- Kepala ------------------------------------------------------ */

.wz-bk-cap {
  padding: 14px 22px;
  background: var(--wz-tint);
  border-bottom: 1px solid var(--wz-line-warm);
  font-size: 13px;
  font-weight: 700;
  color: var(--wz-pill-text);     /* 6,18:1 di atas --wz-tint */
  text-align: left;
}

.wz-bk-panel .wz-bk-tabel thead th {
  padding: 10px 0;
  background: var(--wz-tint-soft);
  border-bottom: 1px solid var(--wz-line-warm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--wz-ink-mute);      /* 4,79:1 di atas --wz-tint-soft */
  text-align: left;
}

/* ---------- Baris ------------------------------------------------------- */

/* Padding tegak seragam; padding mendatar dipasang per kolom di bawah dengan
   selektor sekelas lebih tinggi (0,3,1) supaya menang atas aturan ini. */
.wz-bk-panel .wz-bk-tabel tbody th,
.wz-bk-panel .wz-bk-tabel tbody td {
  padding: 16px 0;
  border-bottom: 1px solid var(--wz-line-warm-soft);
}

.wz-bk-panel .wz-bk-tabel tbody tr:last-child th,
.wz-bk-panel .wz-bk-tabel tbody tr:last-child td { border-bottom: 0; }

.wz-bk-panel .wz-bk-tabel .wz-bk-no    { padding-left: 22px; }
.wz-bk-panel .wz-bk-tabel .wz-bk-nama  { padding-right: 18px; }
.wz-bk-panel .wz-bk-tabel .wz-bk-nilai { padding-right: 22px; }

/* ---------- Kolom nomor ------------------------------------------------- */

.wz-bk-no { width: 74px; }

.wz-bk-no__b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--wz-tint);
  border-radius: 999px;
  font-family: var(--wz-display-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--wz-pill-text);     /* 6,18:1 di atas --wz-tint */
}

/* Peringkat teratas satu-satunya yang penuh. Nada tombol, bukan warna baru. */
.wz-bk-no__b--1 {
  background: var(--wz-btn-bg);
  color: #fff;                    /* 5,47:1 di atas --wz-btn-bg */
}

/* ---------- Nama -------------------------------------------------------- */

.wz-bk-panel .wz-bk-tabel tbody .wz-bk-nama {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wz-ink);           /* 17,93:1 */
  text-align: left;
  overflow-wrap: anywhere;        /* nama terpanjang muat di 320px tanpa scroll */
}

/* ---------- Nominal + bar proporsi -------------------------------------- */

.wz-bk-nilai {
  width: 46%;
  text-align: right;
}

.wz-bk-rp {
  display: block;
  font-family: var(--wz-display-font);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--wz-accent);        /* 5,47:1 — 21px/700 sudah masuk teks besar */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bar-nya menggambar angka di atasnya, tidak menambah data. Panjangnya dari
   --w di markup; cara menghitungnya ada di komentar tepat di atas tabelnya.

   Tanpa track. Sempat ada track --wz-line-warm-soft di belakangnya, tapi lima
   track yang mulai di x yang sama menumpuk jadi garis tegak semu tepat di
   batas kolom — terbaca sebagai pembatas tabel yang tidak pernah diminta.
   Track-nya juga mubazir: baris teratas sudah 100%, jadi dialah skalanya.

   Rata kanan supaya ujungnya sejajar dengan angka di atasnya; yang
   dibandingkan mata jadi pangkalnya di kiri. Di ponsel angkanya rata kiri,
   jadi arahnya ikut dibalik (blok §7). */
.wz-bk-bar {
  display: block;
  width: var(--w, 0%);
  height: 5px;
  margin: 10px 0 0 auto;
  background: var(--wz-btn-bg);
  border-radius: 999px;
}

/* ==========================================================================
   3. Empat langkah (.wz-lk)
   ========================================================================== */

.wz-lk {
  position: relative;
  isolation: isolate;
  padding: var(--wz-sec-y) 0;
  background: var(--wz-wash-soft);
  overflow: hidden;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

.wz-lk *,
.wz-lk *::before,
.wz-lk *::after { box-sizing: border-box; }

.wz-lk :where(p, h2, h3, ol, li) { margin: 0; padding: 0; }

.wz-lk-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Bentuknya garis miring, bukan cincin seperti .wz-af — tinta dan
   opasitasnya tetap sama (sistem-desain §2 aturan 2). */
.wz-lk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 34 34 0' fill='none' stroke='%23171717' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 34px 34px;
  background-repeat: repeat;
  -webkit-mask-image: var(--wz-decor-mask);
          mask-image: var(--wz-decor-mask);
}

.wz-lk-list {
  display: grid;
  gap: 54px;
  list-style: none;
}

.wz-lk-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 44px;
}

/* Panggung pindah ke kiri di langkah genap. Aman ditukar lewat order karena
   panggungnya aria-hidden — urutan bacanya tidak ikut berubah. */
.wz-lk-step--balik .wz-lk-teks { order: 2; }

.wz-lk-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin-bottom: 14px;
  background: var(--wz-tint);
  border-radius: 999px;
  font-family: var(--wz-display-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--wz-pill-text);     /* 6,18:1 di atas --wz-tint */
}

.wz-lk-h {
  font-family: var(--wz-display-font);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.2px;
  color: var(--wz-ink);
}

.wz-lk-p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--wz-ink-soft);
  text-wrap: pretty;
}

.wz-lk-p b { font-weight: 700; color: var(--wz-ink); }

/* ---------- Panggung langkah -------------------------------------------
   Empat tiruan antarmuka, semuanya CSS. Tidak ada satu pun yang membawa
   informasi baru: isinya mengulang paragraf di sebelahnya, jadi seluruh
   pembungkusnya aria-hidden di markup.
   ------------------------------------------------------------------------ */

.wz-lk-vis { position: relative; }

.wz-lk-kartu {
  background: #fff;
  border: 1px solid var(--wz-line-warm);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(23, 23, 23, .07);
  overflow: hidden;
}

.wz-lk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--wz-tint-soft);
  border-bottom: 1px solid var(--wz-line-warm-soft);
}

.wz-lk-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wz-line-warm);
}

.wz-lk-url {
  flex: 1;
  margin-left: 8px;
  padding: 3px 10px;
  background: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wz-ink-mute);
}

.wz-lk-isi { padding: 20px; }

.wz-lk-lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--wz-pill-text);
}

/* Langkah 1 — form pendaftaran */

.wz-lk-field {
  display: block;
  height: 34px;
  margin-top: 10px;
  background: var(--wz-tint-soft);
  border: 1px solid var(--wz-line-warm-soft);
  border-radius: 8px;
}

.wz-lk-field--x { width: 62%; }

.wz-lk-tbl {
  margin-top: 14px;
  padding: 11px 18px;
  background: var(--wz-btn-bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;                    /* 5,47:1 di atas --wz-btn-bg */
  text-align: center;
}

.wz-lk-nota {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wz-ink-mute);
  text-align: center;
}

/* Langkah 2 — website, banner referral, kupon */

.wz-lk-promo { display: flex; gap: 14px; }

.wz-lk-kolom {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 4px;
}

.wz-lk-kolom span {
  height: 10px;
  border-radius: 999px;
  background: var(--wz-line-warm-soft);
}

.wz-lk-kolom span:nth-child(1) { width: 78%; background: var(--wz-line-warm); }
.wz-lk-kolom span:nth-child(3) { width: 88%; }
.wz-lk-kolom span:nth-child(4) { width: 62%; }

.wz-lk-banner {
  display: grid;
  place-items: center;
  width: 104px;
  min-height: 116px;
  padding: 10px;
  background: var(--wz-btn-bg);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

.wz-lk-kupon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -18px 0 0 24px;
  padding: 9px 16px;
  background: #fff;
  border: 1px dashed var(--wz-line-warm);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(23, 23, 23, .08);
}

.wz-lk-kupon__l {
  font-size: 11px;
  font-weight: 600;
  color: var(--wz-ink-mute);
}

.wz-lk-kupon__k {
  font-family: var(--wz-display-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--wz-accent);
}

/* Langkah 3 — ringkasan pesanan, kupon dipakai, komisi */

.wz-lk-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wz-line-warm-soft);
}

.wz-lk-nama { font-size: 14px; font-weight: 600; color: var(--wz-ink); }

/* Harga sengaja jadi balok, bukan angka: harga paket berubah, dan panggung
   ini tidak punya cara untuk ikut berubah bersamanya. */
.wz-lk-redak {
  width: 72px;
  height: 12px;
  border-radius: 999px;
  background: var(--wz-line-warm);
}

.wz-lk-pakai { display: flex; gap: 8px; margin-top: 12px; }

.wz-lk-pakai__f {
  flex: 1;
  padding: 9px 12px;
  border: 1px dashed var(--wz-line-warm);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wz-accent);
}

.wz-lk-pakai__b {
  padding: 9px 16px;
  background: var(--wz-btn-bg);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.wz-lk-hasil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wz-line-warm);
}

.wz-lk-hasil span { font-size: 14px; font-weight: 600; color: var(--wz-ink-soft); }

.wz-lk-hasil b {
  font-family: var(--wz-display-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--wz-accent);
}

/* Langkah 4 — pencairan ke rekening */

.wz-lk-bank {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--wz-tint);
  border: 1px solid var(--wz-line-warm);
}

.wz-lk-tgl { display: flex; gap: 8px; margin-top: 14px; }

.wz-lk-tgl span {
  padding: 6px 12px;
  background: var(--wz-tint);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wz-pill-text);
}

/* Teksnya --wz-ink-soft, centangnya --wz-ok. Bukan dua-duanya hijau:
   --wz-ok cuma 3,70:1 di atas putih — lolos sebagai ikon (≥3:1), meleset
   sebagai teks 13px (butuh ≥4,5:1). Angkanya ada di komentar wz-ui.css. */
.wz-lk-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wz-ink-soft);
}

.wz-lk-ok svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--wz-ok);
}

/* ==========================================================================
   4. Peraturan (.wz-at)
   ========================================================================== */

.wz-at {
  position: relative;
  padding: var(--wz-sec-y) 0;
  background: #fff;
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

.wz-at *,
.wz-at *::before,
.wz-at *::after { box-sizing: border-box; }

.wz-at :where(p, h2, ul, li) { margin: 0; padding: 0; }

.wz-at-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.wz-at-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
}

.wz-at-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--wz-tint-soft);
  border: 1px solid var(--wz-line-warm-soft);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wz-ink);
  text-wrap: pretty;
}

/* Butir ganjil terakhir mengisi dua kolom supaya barisnya tidak menggantung
   setengah kosong. :last-child:nth-child(odd) hanya menggigit kalau jumlah
   butirnya ganjil — sekarang enam, jadi ia diam. Dibiarkan sebagai jaring
   pengaman: kalau butirnya ditambah atau dikurangi jadi ganjil lagi, tata
   letaknya tidak perlu ikut disunting. */
.wz-at-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.wz-at-ik {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: var(--wz-btn-bg);
  border-radius: 999px;
  color: #fff;                    /* 5,47:1 — jauh di atas 3:1 untuk ikon */
}

.wz-at-ik svg { width: 13px; height: 13px; }

/* ==========================================================================
   5. Reveal bersama

   Kelas .wz-af-js dipasang afiliasi.js ke tiap akar section. Tanpa skrip
   itu, aturan di bawah tidak pernah menggigit dan halamannya tampil utuh
   (kaidah §1 prinsip 4).
   ========================================================================== */

.wz-af-js .wz-af-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--d, 0s);
}

.wz-af-js .wz-af-rv.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   6. Tablet — rentang terkunci dua sisi (kaidah §5)

   Yang disetel di sini cuma yang benar-benar khas tablet: dua kolom langkah
   jadi terlalu sempit untuk panggung selebar desktop, jadi jaraknya rapat
   dan panggungnya menyusut. Ponsel tidak boleh ikut kena — di sana tata
   letaknya satu kolom, dan aturan di bawah tidak berlaku sama sekali.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .wz-af-fakta { gap: 12px; }
  .wz-af-fakta__i { padding: 18px 14px; }
  .wz-af-fakta__n { font-size: 24px; }
  .wz-af-fakta__k { font-size: 13px; }

  .wz-lk-list { gap: 42px; }
  .wz-lk-step { gap: 28px; }
  .wz-lk-h { font-size: 21px; }
  .wz-lk-p { font-size: 15px; }
  .wz-lk-isi { padding: 16px; }
  .wz-lk-banner { width: 84px; min-height: 104px; }
}

/* ==========================================================================
   7. Ponsel
   ========================================================================== */

@media (max-width: 767px) {
  .wz-af-inner,
  .wz-bk-inner,
  .wz-lk-inner,
  .wz-at-inner { padding: 0 16px; }

  /* Empat kartu bertumpuk memakan layar penuh, jadi nilainya pindah ke kiri
     dan labelnya ke kanan — satu kolom, tapi tetap serapat baris tabel. */
  .wz-af-fakta {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 32px;
  }

  .wz-af-fakta__i {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
  }

  .wz-af-fakta__n {
    flex: none;
    width: 104px;
    font-size: 20px;
  }

  .wz-af-fakta__k { margin-top: 0; font-size: 13.5px; }

  .wz-bk-cap { padding: 12px 16px; font-size: 12.5px; }

  /* Kepala kolom disembunyikan SECARA VISUAL, bukan display:none. Kalau ia
     dibuang dari pohon aksesibilitas, sel nominal kehilangan kaitannya ke
     label "Komisi Cair" dan pembaca layar cuma mendengar angka telanjang.
     Ini satu-satunya tempat di repo yang butuh pola ini, jadi ditulis di sini
     dan di-scope ke tabelnya — bukan jadi utilitas global. */
  .wz-bk-panel .wz-bk-tabel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Tiga kolom tidak muat di 375px begitu nominalnya dibesarkan: kolom nama
     tinggal ~150px dan nama terpanjang pecah jadi tiga baris. Barisnya jadi
     kartu — lencana nomor di kiri, nama lalu nominal menumpuk di kanannya. */
  .wz-bk-panel .wz-bk-tabel tbody tr {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wz-line-warm-soft);
  }

  .wz-bk-panel .wz-bk-tabel tbody tr:last-child { border-bottom: 0; }

  .wz-bk-panel .wz-bk-tabel tbody th,
  .wz-bk-panel .wz-bk-tabel tbody td { border-bottom: 0; }

  .wz-bk-panel .wz-bk-tabel .wz-bk-no,
  .wz-bk-panel .wz-bk-tabel .wz-bk-nama,
  .wz-bk-panel .wz-bk-tabel .wz-bk-nilai { padding: 0; }

  .wz-bk-no { grid-row: 1 / 3; width: auto; }
  .wz-bk-panel .wz-bk-tabel tbody .wz-bk-nama { grid-column: 2; font-size: 15px; }

  .wz-bk-nilai {
    grid-column: 2;
    width: auto;
    margin-top: 5px;
    text-align: left;
  }

  .wz-bk-rp { font-size: 19px; }

  /* Rata kiri di sini, jadi bar-nya ikut berpangkal di kiri. */
  .wz-bk-bar { margin-left: 0; margin-right: auto; }

  .wz-lk-list { gap: 34px; }

  .wz-lk-step {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Satu kolom: panggung selalu di bawah teksnya, jadi penukaran order
     dibatalkan — kalau tidak, langkah genap membaca panggung dulu. */
  .wz-lk-step--balik .wz-lk-teks { order: 0; }

  .wz-lk-no { min-width: 30px; height: 30px; margin-bottom: 12px; font-size: 14px; }
  .wz-lk-h { font-size: 19px; }
  .wz-lk-p { margin-top: 8px; font-size: 15px; }
  .wz-lk-isi { padding: 16px; }
  .wz-lk-banner { width: 88px; min-height: 104px; }
  .wz-lk-kupon { margin-left: 16px; }

  .wz-at-list { grid-template-columns: 1fr; }
  .wz-at-item { padding: 14px 16px; font-size: 14.5px; }
}

/* ==========================================================================
   8. Hormati preferensi gerak
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wz-af-js .wz-af-rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}