/* ==========================================================================
   Banding Semua Fitur (.wz-bd) — halaman /harga

   Menggantikan susunan halaman harga lama, yang menaruh daftar fitur lengkap
   di DALAM setiap kolom paket. Di sana nama fitur yang sama ditulis tiga kali
   (285 baris untuk 95 fitur), dan membandingkan dua paket berarti menggulir
   bolak-balik antara dua daftar yang jaraknya satu layar penuh.

   Di sini nama fiturnya ditulis sekali, ketiga paket berdiri sebagai kolom.
   Yang jadi mungkin karenanya: baris yang nilainya BERBEDA — bukan
   termasuk/tidak — bisa menampilkan nilainya (Template Unlimited/250/50,
   Header Image 5/3/1 MB). Di tiga daftar terpisah selisih itu tak pernah
   terbaca sebagai selisih.

   Penanda ✓/✗ digambar CSS, bukan ikon. Halaman ini punya 270 sel bertanda;
   sebagai <svg> sebaris itu ikut terunduh tiap muat dan tak pernah bisa
   di-cache (kaidah §7), sementara FontAwesome berarti 56 KB CSS + 2 berkas
   font demi dua bentuk. Warnanya tetap --wz-ok/--wz-no yang sama dengan
   kartu .wz-pk, jadi bahasanya tidak bercabang; yang berbeda cuma
   lingkarannya dilepas — 270 lingkaran padat membuat tabelnya berbintik.

   Gaya: assets/css/banding-tabel.css · Skrip: assets/js/banding-tabel.js
   ========================================================================== */

.wz-bd {
  /* Lebar kolom. Kolom fitur dipatok karena ia yang jadi jangkar saat tabel
     digeser mendatar di layar sempit; kolom tier dibagi rata dari sisanya. */
  --wz-bd-f: 340px;
  --wz-bd-tier: 168px;

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

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

/* :where() berkekhususan nol, jadi margin kelas .wz-bd-* di bawah tetap menang. */
.wz-bd :where(p, h2, h3, table, th, td, caption) { margin: 0; padding: 0; }

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

/* ---------- Lapisan hias ------------------------------------------------
   Bentuknya khas section ini (kisi tegak, meniru kolom tabel di baliknya),
   tinta dan opasitasnya sama dengan section lain (sistem-desain §2).
   ------------------------------------------------------------------------ */

.wz-bd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--wz-decor-ink) 0 1px,
    transparent 1px 84px
  );
  -webkit-mask-image: var(--wz-decor-mask);
  mask-image: var(--wz-decor-mask);
  pointer-events: none;
}

.wz-bd-inner { position: relative; z-index: 1; }

/* ---------- Teks khusus pembaca layar ----------------------------------- */

.wz-bd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Wadah gulir -------------------------------------------------
   PENTING: `overflow-x: auto` hanya dipasang di ≤1024px, dan itu disengaja.

   Membuat wadah bisa digulir mendatar juga menjadikannya scroll container
   secara TEGAK (overflow-y dihitung jadi `auto` begitu overflow-x bukan
   `visible`). Kepala tabel yang `position: sticky; top: …` lalu menempel ke
   scrollport wadah itu — yang tingginya persis setinggi isinya — sehingga
   ia tidak pernah benar-benar menempel ke apa pun.

   Jadi pilihannya dibagi per lebar layar:
     ≥1025px  tabel muat penuh → tanpa wadah gulir → kepala tabel menempel
              ke viewport, tetap terbaca sepanjang 90 baris.
     ≤1024px  tabel lebih lebar dari layar → wadah gulir mendatar → yang
              menempel kolom fiturnya (sticky left, ini bekerja normal di
              dalam scroll container), kepala tabel tidak.

   Yang dikorbankan di layar sempit adalah kepala tabel, bukan jangkarnya —
   tanpa nama fitur di kiri, kolom ✓ tidak berarti apa-apa.
   ------------------------------------------------------------------------ */

.wz-bd-scroll {
  margin-top: var(--wz-head-gap);
}

.wz-bd-tab {
  width: 100%;
  /* separate + spacing 0, BUKAN collapse. Pada tabel `collapse` garis milik
     sel dilebur jadi garis milik tabel, dan garis lebur itu tidak ikut
     berpindah bersama sel yang `position: sticky` — kepala tabel menempel
     tanpa membawa garis bawahnya. Dengan `separate` tiap sel memegang
     garisnya sendiri, jadi ia ikut ke mana pun selnya menempel. */
  border-collapse: separate;
  border-spacing: 0;
  /* fixed: lebar kolom ditentukan <col>, bukan isi selnya. Tanpa ini satu
     nama fitur panjang menarik kolomnya melebar dan ketiga kolom tier
     jadi tidak sama lebar. */
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.45;
}

.wz-bd-tab__col--f { width: var(--wz-bd-f); }
.wz-bd-tab__col--tier { width: var(--wz-bd-tier); }

/* ---------- Warisan tabel reset.css: garis & tinggi baris ----------------
   reset.css membawa gaya tabel bawaan tema. Selektornya berakar di tipe
   `table`, bukan di kelas, jadi ia menyentuh tabel ini juga — dan karena
   panjang, sebagian bobotnya justru DI ATAS kelas section:

     table td, table th          (0,0,2)  border 1px rgba(128,128,128,.502)
                                          di KEEMPAT sisi, dan line-height 1.5
     table tbody + tbody         (0,0,3)  border-block-start 2px, warna sama

   Yang selama ini direbut kembali cuma `border-bottom` (lewat .wz-bd-tab__f
   dan .wz-bd-tab__c). Tiga sisi lainnya tetap milik reset, jadi tabel ini
   sebenarnya dirender berkisi abu penuh — dan karena `border-spacing: 0`,
   garis kanan satu sel berhimpit dengan garis kiri tetangganya: 2px abu
   #bfbfbf di antara kolom, bukan garis rambut --wz-line #e6e6e6 yang
   dimaksud. `line-height: 1.45` di atas juga tidak pernah sampai ke sel
   mana pun: nilai yang DIDEKLARASIKAN di `table td` mengalahkan nilai yang
   cuma DIWARISI, berapa pun kekhususan sumber warisannya.

   Dimatikan sekali di sini, di ATAS aturan yang memasang garis yang benar —
   kekhususannya sama (0,1,0), jadi yang menentukan urutan sumber (kaidah §1
   prinsip 2). :where() berkekhususan nol, jadi bobot rule ini tetap (0,1,0).
   ------------------------------------------------------------------------ */

.wz-bd-tab :where(tbody, th, td) {
  border: 0;
  line-height: inherit;
}

/* Satu aturan reset masih lolos dari yang di atas — dan aturan garis atas
   baris kepala memang yang paling berat di seluruh berkas itu:

     table colgroup + thead   tr:first-child th  (0,1,5)   <- yang kena hari ini
     table thead:first-child  tr:first-child th  (0,2,4)

   Yang berlaku di sini bentuk pertama: anak pertama <table> ini adalah
   <colgroup>, bukan <thead>, jadi justru `thead:first-child` TIDAK cocok.
   Bentuk kedua tetap diperhitungkan karena ia yang mengambil alih kalau
   <colgroup> suatu saat dicabut — dan (0,2,4) mengalahkan .wz-bd-tab thead th
   (0,2,2), jadi menyetel garis atas di aturan itu saja tidak cukup.

   Kekhususan dinaikkan dengan mengulang kelas root (kaidah §1 prinsip 2):
   (0,3,3), cukup untuk kedua bentuk sekaligus. Hanya `border-top` yang
   disetel, supaya garis bawah merah jambu di .wz-bd-tab thead th tidak ikut
   terhapus. */
.wz-bd-tab.wz-bd-tab thead tr:first-child th { border-top: 0; }

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

.wz-bd-tab thead th {
  position: sticky;
  /* 66px tinggi bar diam (--wzn-h nav-revamp.css) + 12px padding-nya di
     kedua sisi = 90px; +6px napas supaya kepala tabel tidak menempel rapat
     ke garis bawah bar. */
  top: 96px;
  z-index: 3;
  padding: 14px 12px;
  background: #fff;
  border-bottom: 2px solid var(--wz-line-warm);
  font-family: var(--wz-display-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  vertical-align: middle;
}

.wz-bd-tab__th--f {
  text-align: left;
  font-family: var(--wz-ui-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wz-ink-mute);
}

/* Nada tier: sama dengan pemetaan kartu .wz-pk (sistem-desain §2) — PREMIUM
   rose, PLUS navy, PERSONAL slate. Diberikan sebagai TEKS di atas putih,
   bukan latar, jadi ketiganya dipakai pada peran yang sudah terverifikasi
   lolos AA sebagai teks (5,47 / 9,65 / 5,46). */
.wz-bd-tab__th--premium { color: var(--wz-btn-bg); }
.wz-bd-tab__th--plus { color: var(--wz-btn-navy); }
.wz-bd-tab__th--personal { color: var(--wz-btn-slate); }

.wz-bd-tab__thsub {
  display: block;
  margin-top: 3px;
  font-family: var(--wz-ui-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wz-ink-mute);
}

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

.wz-bd-tab__cat th {
  position: sticky;
  top: 96px;
  z-index: 2;
  padding: 26px 12px 9px;
  /* Nilai ini kalah dari reset.css di sini (0,1,1 lawan 0,1,4) dan direbut
     kembali di blok "Selang-seling" di bawah. Sengaja tetap ditulis: selektor
     inilah yang dimatikan blok @media ≤1024px, jadi ia harus tetap jadi
     tempat orang mencari gaya pita kategori. */
  background: var(--wz-tint);
  border-bottom: 1px solid var(--wz-line-warm);
  font-family: var(--wz-ui-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--wz-pill-text);            /* 6,18:1 di atas --wz-tint */
}

/* Kategori pertama tidak butuh jarak pemisah — di atasnya kepala tabel. */
.wz-bd-tab tbody:first-of-type .wz-bd-tab__cat th { padding-top: 12px; }

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

.wz-bd-tab__f {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wz-line);
  font-weight: 600;
  text-align: left;
  color: var(--wz-ink);
}

.wz-bd-tab__c {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wz-line);
  text-align: center;
  vertical-align: middle;
}

/* Selang-seling. 90 baris tanpa ini membuat mata melompat baris waktu
   menyeberang dari nama fitur ke kolom paling kanan.

   `nth-of-type(even)`, bukan `nth-child(even of .wz-bd-tab__row)`: bentuk
   `of S` hanya sah di dalam :nth-child, dan di sini tidak diperlukan. Tiap
   <tbody> selalu dibuka satu baris kategori, jadi baris fitur menempati
   urutan 2,3,4,… dan yang genap persis baris fitur ke-1, ke-3, ke-5.

   Baris GANJIL harus disetel eksplisit, tidak boleh dibiarkan kosong — dan
   inilah warisan reset.css kedua, yang jauh lebih mahal daripada garis di
   atas:

     table tbody > tr:nth-child(odd) > td,
     table tbody > tr:nth-child(odd) > th   (0,1,4)  hsla(0,0%,50%,.071)
     table tbody tr:hover > td,
     table tbody tr:hover > th              (0,1,4)  hsla(0,0%,50%,.102)

   (0,1,4) mengalahkan `.wz-bd-tab__cat th` (0,1,1), jadi KESEPULUH pita
   kategori dirender di atas abu, bukan --wz-tint: nol elemen di dalam tabel
   ini yang benar-benar memakai token itu. Baris ganjil pun tak pernah putih.
   Yang lolos justru aturan genap di bawah — `.wz-bd-tab tbody
   tr:nth-of-type(even) > *` kebetulan (0,2,2) — sehingga selang-selingnya
   terbaca abu/merah jambu, bukan merah jambu/putih. Bug yang menyamar jadi
   keputusan desain, dan cuma ketahuan waktu kontrasnya dihitung: ✗ --wz-no
   turun ke 2,63–2,79:1 di baris abu — serendah 2,29:1 di baris yang di-hover
   tepat di atas garis kisi hias — gagal ambang ikon 3:1 kaidah §8 di SELURUH
   baris. Warnanya sendiri ikut diturunkan di wz-ui.css; riwayatnya di sana.

   Ketiga aturan di bawah (0,2,2) mengalahkan (0,1,4) — dua kelas lawan satu.
   Menyetel baris ganjil sekaligus mematikan hover bawaan itu: begitu kedua
   paritas punya latar (0,2,2), `tr:hover` (0,1,4) tidak pernah bisa menang
   lagi di sel mana pun. Jadi tidak ada aturan :hover baru di sini — hover
   memang tidak pernah jadi bagian desain tabel ini.

   Latarnya PADAT, bukan transparan. Kalau tembus, warna di balik sel adalah
   --wz-wash-soft yang bergradasi sepanjang tinggi section plus kisi hias
   .wz-bd::before — artinya kontras ✓/✗ berubah menurut posisi baris di
   halaman dan tidak bisa dihitung sekali (kaidah §8: hitung, jangan
   kira-kira). Pita kategori ditulis PALING AKHIR: kekhususannya sama dengan
   aturan ganjil (0,2,2) dan ia baris pertama tiap <tbody> — jadi ia ikut
   tersapu `odd`, lalu direbut kembali lewat urutan sumber. */
.wz-bd-tab tbody tr:nth-of-type(odd) > * {
  background: #fff;
}

.wz-bd-tab tbody tr:nth-of-type(even) > * {
  background: var(--wz-tint-soft);
}

.wz-bd-tab tbody .wz-bd-tab__cat th {
  background: var(--wz-tint);
}

/* ---------- Penanda ✓ / ✗ ------------------------------------------------
   Dua bentuk yang digambar dari border, bukan ikon. Ukuran dan tebalnya
   dikunci di token supaya keduanya sebanding secara optis: centang lebih
   besar karena bentuknya terbuka, silang lebih kecil karena massanya penuh.
   Kotak 44px di sekelilingnya menjaga sasaran sentuh baris tetap lapang.
   ------------------------------------------------------------------------ */

.wz-bd-tab__m {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
}

.wz-bd-tab__m--ya::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 9px;
  height: 15px;
  border-right: 2.5px solid var(--wz-ok);
  border-bottom: 2.5px solid var(--wz-ok);
  border-radius: 1px;
  transform: rotate(42deg);
}

.wz-bd-tab__m--no::before,
.wz-bd-tab__m--no::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--wz-no);
}

.wz-bd-tab__m--no::before { transform: rotate(45deg); }
.wz-bd-tab__m--no::after { transform: rotate(-45deg); }

/* ---------- Sel bernilai ------------------------------------------------- */

.wz-bd-tab__v {
  font-weight: 700;
  color: var(--wz-ink);                  /* 16,83:1 di atas --wz-tint-soft */
}

/* Nilai yang berarti "paling banyak di antara ketiganya". Dibedakan lewat
   warna teks, bukan latar, supaya kontrasnya tetap terhitung di atas putih
   DAN di atas baris selang-seling. */
.wz-bd-tab__v--top { color: var(--wz-accent); }   /* 5,13:1 di atas --wz-tint-soft */

/* ---------- Catatan kaki ------------------------------------------------- */

.wz-bd-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wz-ink-mute);             /* 5,10:1 */
  text-wrap: pretty;
}

/* ---------- Pola muncul saat masuk layar --------------------------------
   Kelas .wz-bd-js dipasang JavaScript. Tanpa skrip, tak satu pun aturan di
   bawah ini menyala dan sectionnya tampil utuh (kaidah §1 prinsip 4).
   ------------------------------------------------------------------------ */

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

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

/* ---------- Tablet ------------------------------------------------------
   Dikunci dua sisi (docs/README.md butir 4): blok satu sisi ikut menimpa
   ponsel, dan di ponsel kolom fiturnya harus jauh lebih sempit lagi.
   ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1024px) {
  .wz-bd { --wz-bd-f: 300px; --wz-bd-tier: 150px; }
}

/* Di bawah 1025px tabel lebih lebar dari layarnya, jadi wadah gulir menyala
   dan kepala tabel berhenti menempel — alasannya di komentar .wz-bd-scroll. */
@media (max-width: 1024px) {
  .wz-bd-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Tepi bawah diberi ruang supaya scrollbar mendatar tidak menindih
       baris terakhir di peramban yang menampilkannya melayang. */
    padding-bottom: 6px;
  }

  .wz-bd-tab thead th,
  .wz-bd-tab__cat th { position: static; }

  /* Yang menempel sekarang kolom fiturnya. `left` sticky bekerja normal di
     dalam scroll container mendatar. Latarnya WAJIB padat — kalau tembus,
     sel yang lewat di belakangnya terbaca menumpuk. */
  .wz-bd-tab__f,
  .wz-bd-tab__th--f,
  .wz-bd-tab__cat th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
  }

  .wz-bd-tab__cat th { background: var(--wz-tint); }

  /* Baris selang-seling: kolom yang menempel ikut diwarnai, kalau tidak ia
     jadi satu-satunya sel putih di baris berwarna. Ditulis sesudah aturan
     sticky di atas supaya menang lewat urutan, bukan !important. */
  .wz-bd-tab tbody tr:nth-of-type(even) .wz-bd-tab__f {
    background: var(--wz-tint-soft);
  }

  /* Bayangan tepi: penanda bahwa masih ada kolom di sebelah kanan. */
  .wz-bd-tab__f::after,
  .wz-bd-tab__th--f::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    transform: translateX(100%);
    background: linear-gradient(90deg, rgba(23, 23, 23, .07), transparent);
    pointer-events: none;
  }
}

/* ---------- Ponsel ------------------------------------------------------- */

@media (max-width: 767px) {
  .wz-bd { --wz-bd-f: 172px; --wz-bd-tier: 96px; }

  .wz-bd-tab { font-size: 13.5px; }

  .wz-bd-tab thead th {
    padding: 11px 7px;
    font-size: 13px;
  }

  .wz-bd-tab__th--f { font-size: 11.5px; }
  .wz-bd-tab__thsub { font-size: 11px; }

  .wz-bd-tab__cat th {
    padding: 18px 10px 8px;
    font-size: 11.5px;
  }

  .wz-bd-tab__f,
  .wz-bd-tab__c { padding: 9px 7px; }

  .wz-bd-tab__m { width: 19px; height: 19px; }

  .wz-bd-tab__m--ya::before {
    left: 4px;
    top: 2px;
    width: 8px;
    height: 13px;
  }

  .wz-bd-tab__m--no::before,
  .wz-bd-tab__m--no::after {
    left: 3px;
    top: 8px;
    width: 12px;
  }

  .wz-bd-note { font-size: 13px; }
}

/* ---------- Hormati preferensi gerak ------------------------------------- */

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

  .wz-bd-scroll { scroll-behavior: auto; }
}