/* ==========================================================================
   wz-paket — section harga. Awalan kelas: .wz-pk

   INI TOUCH UP, BUKAN RANCANG ULANG.

   Susunan section lama dipertahankan apa adanya: kepala, dua tab periode,
   tiga kartu berurut PREMIUM - PLUS - PERSONAL, pita di kartu terlengkap,
   harga coret di atas harga besar, tombol, daftar fitur penuh berikut
   centang/silangnya, tautan "Lihat Semua Fitur", lalu bilah pembayaran.
   Tidak ada blok baru, tidak ada blok yang dibuang.

   Yang diperbaiki hanya ketidakkonsistenan yang terukur di section lama:

   1. BINGKAI KARTU. Tiga kartu sederajat datang dengan tiga perlakuan:
        PREMIUM   4px #0082ff, radius 0 0 10 10, padding 20px 19px, tanpa bayangan
        PLUS      2px #da336b, radius 10px,      padding 20px,      bayangan merah jambu
        PERSONAL  1px #e2e2e2, radius 10px,      padding 20px,      tanpa bayangan
      Sekarang satu geometri untuk ketiganya. Yang membedakan kartu unggulan
      tinggal pita dan cincin bernadanya — itu memang disengaja.

   2. TIGA BIRU DALAM SATU KARTU. PREMIUM memakai #0082ff (bingkai),
      #0075d6 (harga), dan #0071e3 (tombol). PLUS dua merah jambu, PERSONAL
      dua teal. Sekarang satu nada per tier, diambil dari token wz-ui.css.
      Nadanya juga ditukar: merah jambu merek naik ke PREMIUM (paket
      tertinggi), biru turun ke PLUS.

   3. HARGA CORET SEWARNA HARGA HIDUP. Keduanya dulu memakai warna aksen yang
      sama, jadi yang dicoret tampak sama penting dengan yang berlaku.
      Sekarang coretnya abu-abu.

   4. BARIS ANTAR KARTU MELESET 1-3px (nama tier, harga, tombol, daftar fitur).
      Penyebabnya beda padding dan beda tebal bingkai. Cincin kartu sekarang
      memakai inset box-shadow, yang tidak memakan ruang tata letak sama
      sekali, jadi ketiga kartu bergeometri identik.

   5. IKON CENTANG 23px HIJAU #42c457 — lebih besar daripada teks 14px yang
      dilabelinya, dan hanya 2,2:1 di atas putih.

   6. DUA TAB PERIODE BEDA LEBAR (227px dan 217px).

   Pemilih kuota TIDAK dihidupkan lagi. Di halaman lama seluruhnya dimatikan
   lewat `.wzpself-package-selector-super-parent { display: none !important }`
   di <style> dalam index.html, jadi harga yang tampil memang harga tetap.
   ========================================================================== */

.wz-pk {
  --wz-pk-line: #e6e6e6;
  --wz-pk-mute: #6d6d6d;
  --wz-pk-r: 14px;
  --wz-pk-ribbon-h: 34px;

  position: relative;
  padding: 60px 0 56px;
  background: #fff;
  color: var(--wz-ink);
  font-family: var(--wz-ui-font);
}

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

/* Teks hanya untuk pembaca layar. Ikon centang/silang di daftar fitur tidak
   punya makna tanpa ini — <i> ber-aria-hidden, jadi keterangannya di sini. */
.wz-pk-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;
}

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

.wz-pk-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* ---------- Kepala (teks persis section lama) ---------------------------- */

.wz-pk-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}

.wz-pk-pill { margin: 0 0 14px; }

.wz-pk-title {
  margin: 0;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.4px;
  color: var(--wz-ink);
  text-wrap: balance;
}

.wz-pk-sub {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: #565656;
}

/* ---------- Tab periode --------------------------------------------------
   Bentuk segmented control section lama dipertahankan: dua tab menyatu,
   yang aktif terisi merah jambu. Yang diperbaiki lebarnya — dulu 227px dan
   217px — dan padding-nya yang 18px atas / 16px bawah.
   ------------------------------------------------------------------------ */

.wz-pk-tabs {
  display: flex;
  justify-content: center;
  margin: 0 0 30px;
}

.wz-pk-tabset {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid #e8e8ec;
  border-radius: 999px;
  background: #f4f4f7;
}

/* Penanda aktif MELAYANG di dalam track, berjarak 5px dari tepinya.
   Sebelumnya isi merah jambu memenuhi separuh pil sampai menyentuh bingkai,
   dan pertemuan isi dengan garis itulah yang bikin kelihatan meleset cetak.
   Ia juga satu elemen yang digeser, bukan dua latar yang dinyalakan
   bergantian — jadi pindah tab meluncur, tidak melompat. */
.wz-pk-tabset::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  /* Lebar kolom = (lebar track - padding 10px - gap 4px) / 2. Persentase pada
     anak berposisi absolut dihitung terhadap kotak padding induknya. */
  width: calc((100% - 14px) / 2);
  border-radius: 999px;
  background: var(--wz-btn-bg);
  box-shadow: 0 2px 8px rgba(23, 23, 23, 0.16);
  /* 100% di sini lebar penanda itu sendiri, ditambah gap-nya. */
  transform: translateX(calc(var(--wz-pk-i, 1) * (100% + 4px)));
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.wz-pk-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Lebar tetap: kedua tab harus sama lebar berapa pun panjang labelnya.
     Sebelum ini yang satu 227px dan yang lain 217px. */
  min-width: 186px;
  min-height: 46px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wz-ink-soft);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.wz-pk-tab[aria-checked="true"] {
  color: #fff;
  /* Sudah terpilih — tidak ada yang terjadi kalau diklik lagi. */
  cursor: default;
}

/* Hover HANYA untuk tab yang belum aktif. Sebelum ini tidak ada aturan hover
   sama sekali: separuh kontrol ini diam total saat ditunjuk, dan itu yang
   bikin terasa mati. Tab aktif sengaja tidak berubah — penanda di belakangnya
   sudah menjawab. */
.wz-pk-tab[aria-checked="false"]:hover {
  background: rgba(23, 23, 23, 0.05);
  color: var(--wz-ink);
}

.wz-pk-tab[aria-checked="false"]:active {
  background: rgba(23, 23, 23, 0.09);
}

.wz-pk-tab:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 2px;
}

/* Dulu cuma teks nempel dengan opacity 0,85, jadi tab terbaca sebagai satu
   kalimat panjang. Sebagai lencana, angka hematnya berdiri sendiri.

   Latarnya PUTIH PEKAT di kedua keadaan, bukan lapisan tembus pandang.
   Dua percobaan sebelumnya gagal kontras justru karena tembus pandang itu:
     rgba(196,42,94,.10) + teks merah jambu  = 4,29:1
     rgba(255,255,255,.22) + teks putih      = 3,85:1  (putih di atas putih
                                                        yang menipiskan rose)
   Merah jambu di atas putih pekat 5,47:1, sama di kedua tab — dan di atas
   penanda rose lencananya justru jadi menonjol. */
.wz-pk-off {
  padding: 3px 9px;
  border: 1px solid rgba(196, 42, 94, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--wz-btn-bg);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease;
}

.wz-pk-tab[aria-checked="true"] .wz-pk-off { border-color: transparent; }

/* ---------- Kisi kartu ---------------------------------------------------- */

.wz-pk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Cincin kartu memakai inset box-shadow, BUKAN border. Border 1px vs 2px vs
   4px di section lama itulah yang menggeser isi kartu 1-3px satu sama lain;
   inset tidak memakan ruang tata letak, jadi ketiga kartu identik. */
.wz-pk-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--wz-pk-r);
  background: #fff;
  /* SENGAJA TIDAK overflow:hidden. Kartu ini memuat tooltip yang harus bisa
     menyembul keluar dari kotaknya; clip akan memotongnya. Sudut atas pita
     dibulatkan lewat radius pita itu sendiri, bukan lewat clip induknya. */
  box-shadow: inset 0 0 0 1px var(--wz-pk-line);
}

/* Paket tertinggi memakai merah jambu merek. Di section lama justru PLUS yang
   merah jambu dan PREMIUM biru — jadi warna merek menempel di paket tengah,
   bukan di puncaknya.

   Dua paket sisanya turun ke navy dan slate. Sebelumnya biru elektrik #0071e3
   dan teal #007b6a: tiga rona keras yang tidak berkerabat, dan ketiga kartu
   sederajat itu jadi terbaca seperti tiga merek yang kebetulan bersebelahan.
   Navy dan slate satu keluarga rona dengan --wz-surface-dark dan
   berkepekatan rendah, jadi tangganya terbaca lewat KEPEKATAN: rose
   bersuara, navy padat, slate tenang. */
.wz-pk-card[data-tier="premium"]  { --tone: var(--wz-btn-bg); }
.wz-pk-card[data-tier="plus"]     { --tone: var(--wz-btn-navy); }
.wz-pk-card[data-tier="personal"] { --tone: var(--wz-btn-slate); }

.wz-pk-card.is-feat {
  box-shadow: inset 0 0 0 2px var(--tone), 0 18px 40px -28px rgba(23, 23, 23, 0.5);
}

/* Pita ada di SEMUA kartu; di kartu biasa dia kosong dan tak berwarna.
   Itu yang menjaga nama tier, harga, dan tombol tetap sebaris antar kartu. */
.wz-pk-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wz-pk-ribbon-h);
  margin: 0;
  border-radius: var(--wz-pk-r) var(--wz-pk-r) 0 0;
  background: transparent;
  color: transparent;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.wz-pk-card.is-feat .wz-pk-ribbon {
  background: var(--tone);
  color: #fff;
}

.wz-pk-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 26px;
  text-align: center;
}

.wz-pk-tier {
  margin: 0;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1c1c1c;
}

/* ---------- Blok harga ---------------------------------------------------- */

.wz-pk-price { margin: 18px 0 0; }

/* Dulu harga coret memakai warna aksen yang sama persis dengan harga besar
   di bawahnya, jadi dua angka berteriak sama keras. Yang dicoret seharusnya
   mundur. */
.wz-pk-strike {
  margin: 0;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  /* #8a8a8a sempat dipakai dan cuma 3,45:1 — dicoret bukan berarti boleh
     tak terbaca. #767676 mencapai 4,54:1 dan masih jelas mundur dari harga
     hidup di bawahnya. */
  color: #767676;
  font-variant-numeric: tabular-nums;
}

.wz-pk-strike s { text-decoration-thickness: 1.5px; }

.wz-pk-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 0;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}

.wz-pk-cur {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.wz-pk-per {
  font-family: var(--wz-ui-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wz-pk-mute);
}

.wz-pk-total {
  margin: 8px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #565656;
  font-variant-numeric: tabular-nums;
}

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

/* Kedip halus saat tab periode ditukar. */
.wz-pk-price.is-upd .wz-pk-strike,
.wz-pk-price.is-upd .wz-pk-amount,
.wz-pk-price.is-upd .wz-pk-total { animation: wz-pk-flash 0.34s ease; }

@keyframes wz-pk-flash {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* ---------- Tombol -------------------------------------------------------- */

.wz-pk-ctawrap {
  display: block;
  margin: 20px 0 0;
}

/* .wz-btn berkekhususan (0,1,0); kelas ditulis dua kali memberi (0,2,0). */
.wz-pk-cta.wz-pk-cta {
  display: flex;
  width: 100%;
}

/* ---------- Daftar fitur -------------------------------------------------- */

.wz-pk-feat {
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #f0f0f0;
  list-style: none;
  text-align: left;
}

.wz-pk-feat li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0 0 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #54595f;
}

/* Bagian depan tiap baris tebal, sisanya tipis — dan KEDUANYA SEWARNA.
   Itu yang dipakai tabel sekarang: satu warna #54595f, yang membedakan cuma
   bobot 700 vs 500. Memberi warna berbeda pada bagian tipis (sempat dicoba)
   melebih-lebihkan jaraknya dan bikin barisnya terbaca patah dua. */
.wz-pk-feat b {
  font-weight: 700;
  color: inherit;
}

/* Ikon dulu 23px — lebih besar daripada teks 14px yang dilabelinya. */
.wz-pk-feat > li > i {
  flex-shrink: 0;
  width: 17px;
  margin-top: 1px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}

/* fa-check-circle dan fa-times-circle: lingkaran PADAT dengan tanda yang
   dilubangi, jadi yang harus lolos kontras adalah lingkarannya terhadap latar
   putih. Warna lama gagal keduanya:
     hijau #42c457  2,27:1
     abu   #c9ccd1  1,61:1   (silang nyaris tak terlihat sama sekali)
   Yang abu paling gawat: itu justru baris yang bertugas memberitahu
   "fitur ini tidak Anda dapat". */
.wz-pk-ya > i { color: #16a34a; }      /* 3,30:1 */

.wz-pk-tidak > i { color: #8f959e; }   /* 3,02:1 */

/* Baris "tidak termasuk" TIDAK diredupkan teksnya — sama seperti tabel
   sekarang. Lingkaran abu dan bentuk silangnya yang membedakan. */

/* ---------- Tooltip & tautan di daftar fitur ------------------------------
   Dua perilaku berbeda, jadi dua penanda berbeda — di section lama keduanya
   tampak sama (garis bawah polos) sehingga tidak bisa dibedakan sebelum
   diklik:
     garis putus-putus + cursor help    keterangan muncul di tempat
     garis penuh + cursor pointer       membawa ke halaman/video lain
   ------------------------------------------------------------------------ */

/* Jangkar tooltip sengaja BARISNYA, bukan pembungkus teks ini. Waktu tooltip
   berjangkar ke potongan teks inline, lebarnya 200px diukur dari posisi kata —
   di layar 375px hasilnya menyembul keluar layar (kanan sampai 380px, kiri
   sampai -38px) dan halaman jadi bisa digeser 503px ke samping. Dijangkarkan
   ke <li>, lebarnya mengikuti lebar kartu dan tidak pernah bisa keluar. */
.wz-pk-tw {
  position: static;
  display: inline;
}

.wz-pk-tw--i {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-radius: 999px;
}

.wz-pk-tw--i:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 2px;
}

.wz-pk-tt {
  border-bottom: 1px dashed #a2a7ae;
  cursor: help;
}

/* Pemicunya dibuat bisa difokus. Section lama hanya bereaksi pada :hover, jadi
   di layar sentuh dan lewat keyboard keterangannya tidak pernah bisa dibuka
   sama sekali. Dengan tabindex, satu ketukan / satu Tab sudah cukup. */
.wz-pk-tw[tabindex]:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Kartu putih di atas kartu putih tidak pernah benar-benar terbaca sebagai
   lapisan di atasnya — dia cuma tampak seperti kotak lain yang menempel.
   Tooltip gelap langsung terbaca sebagai lapisan, dan tidak perlu bingkai
   untuk memisahkan diri dari kartunya. 15,04:1 terhadap kartu putih. */
.wz-pk-tb {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: #1f2733;
  box-shadow: 0 14px 32px -10px rgba(15, 20, 28, 0.5);
  color: #dfe4ea;               /* 11,76:1 */
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

/* Panah menunjuk ke TEKS PEMICUNYA, bukan ke tengah kotak tooltip.
   Posisinya tidak bisa ditulis di CSS: tiap pemicu berbeda tempat dan lebar
   ("10 WhatsApp Number" di awal baris, ikon info di tengah baris), jadi
   titiknya diukur skrip dan ditaruh di --wz-pk-arrow pada <li>-nya.
   50% cuma nilai cadangan kalau skrip mati. */
.wz-pk-tb::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--wz-pk-arrow, 50%);
  width: 11px;
  height: 11px;
  border-radius: 2px 0 0 0;
  background: #1f2733;
  transform: translateX(-50%) rotate(45deg);
}

.wz-pk-tw:hover .wz-pk-tb,
.wz-pk-tw:focus-within .wz-pk-tb {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wz-pk-tb b {
  display: block;
  margin: 0 0 3px;
  color: #fff;                  /* 15,04:1 */
  font-weight: 700;
}

.wz-pk-tb--list {
  display: grid;
  gap: 5px;
}

.wz-pk-tb--list span {
  position: relative;
  display: block;
  width: auto;
  margin: 0;
  padding-left: 12px;
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
  text-align: left;
  color: inherit;
}

.wz-pk-tb--list span::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #8d97a5;               /* 5,09:1 */
}

/* Tautan keluar. Warna teksnya ikut baris; yang menandai cuma garis bawah,
   dan saat ditunjuk garisnya memekat plus teksnya mengambil nada kartu. */
.wz-pk-ln.wz-pk-ln {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b8bcc3;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  box-shadow: none;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.wz-pk-ln.wz-pk-ln:hover {
  color: var(--tone);
  text-decoration-color: currentColor;
}

.wz-pk-ln.wz-pk-ln:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Ikon info di baris WatZap Chat, mengikuti pola ⓘ di tabel sekarang. */
.wz-pk-feat .wz-pk-i {
  width: auto;
  margin: 0 0 0 5px;
  font-size: 13px;
  /* #a2a7ae cuma 2,42:1 — ikon ini penanda "ada keterangan", jadi harus
     terlihat. #8f959e sama dengan lingkaran silang, 3,02:1. */
  color: #8f959e;
  cursor: help;
}

.wz-pk-more {
  margin: auto 0 0;
  padding: 18px 0 0;
  text-align: center;
}

/* Tautan ini sengaja NETRAL, bukan merah jambu merek. Selama merah jambu masih
   milik PLUS itu tidak masalah, tapi begitu ia naik ke PREMIUM, tautan merah
   jambu di dasar kartu PERSONAL dan PLUS jadi membaca sebagai "ada sesuatu yang
   premium di sini" — sinyal palsu. Tinta redam bekerja di ketiga kartu, dan
   memang itu perannya: tautan tenang, bukan aksi utama. */
.wz-pk-more a {
  font-size: 15px;
  font-weight: 700;
  color: var(--wz-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.wz-pk-more a:hover { color: var(--wz-btn-bg); }

.wz-pk-more a:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 3px;
}

/* ---------- Channel pembayaran -------------------------------------------
   Dulu Hind 12px/400 #848484 — label paling kecil di seluruh section,
   padahal perannya sama dengan label lain.
   ------------------------------------------------------------------------ */

.wz-pk-pay {
  margin: 34px 0 0;
  text-align: center;
}

.wz-pk-pay__cap {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wz-pk-mute);
}

.wz-pk-pay img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}

/* ---------- Reveal -------------------------------------------------------- */

.wz-pk.is-js .wz-pk-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease var(--d, 0s), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}

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

/* Tab tidak berfungsi tanpa JS. Harga baku di HTML sudah benar (1 tahun),
   jadi tanpa JS section ini tetap jujur — hanya tidak bisa ditukar. */
.wz-pk:not(.is-js) .wz-pk-tabs { display: none; }

/* ---------- Layar sedang -------------------------------------------------- */

@media (max-width: 1024px) {
  .wz-pk-grid { gap: 14px; }

  .wz-pk-body { padding: 20px 14px 22px; }

  .wz-pk-title { font-size: 33px; }

  .wz-pk-tier { font-size: 24px; }

  .wz-pk-amount { font-size: 36px; }

  .wz-pk-cur { font-size: 15px; }

  .wz-pk-feat li { font-size: 13px; }

  .wz-pk-tab {
    min-width: 0;
    padding: 15px 16px;
  }
}

/* ---------- Layar sempit -------------------------------------------------- */

@media (max-width: 767px) {
  .wz-pk { padding: 46px 0 44px; }

  .wz-pk-inner { padding: 0 16px; }

  .wz-pk-title { font-size: 28px; }

  .wz-pk-sub { font-size: 16px; }

  /* Satu kolom, urutan DOM dipertahankan (PREMIUM dulu, seperti section lama). */
  .wz-pk-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wz-pk-body { padding: 22px 20px 24px; }

  /* Pita kosong di kartu biasa hanya berguna untuk menyejajarkan baris ANTAR
     KOLOM. Di satu kolom tidak ada yang perlu disejajarkan, jadi 34px itu
     tinggal ruang kosong di pucuk kartu — dilipat saja. */
  .wz-pk-card:not(.is-feat) .wz-pk-ribbon { display: none; }

  .wz-pk-amount { font-size: 40px; }

  .wz-pk-tabset { width: 100%; }

  .wz-pk-tab {
    padding: 14px 10px;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .wz-pk-tab {
    flex-direction: column;
    gap: 2px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .wz-pk.is-js .wz-pk-rv,
  .wz-pk-tab,
  .wz-pk-tabset::before { transition-duration: 0.01ms; }

  .wz-pk.is-js .wz-pk-rv { transform: none; }

  .wz-pk-price.is-upd .wz-pk-strike,
  .wz-pk-price.is-upd .wz-pk-amount,
  .wz-pk-price.is-upd .wz-pk-total { animation: none; }
}

/* ---------- Konfirmasi pindah ke paket 3 bulan ----------------------------
   Muncul HANYA saat berpindah dari 1 tahun ke 3 bulan, dan HANYA sekali per
   kunjungan. Sekali pengguna sudah membacanya, menukar tab berikutnya bebas —
   dialog yang muncul tiap kali menukar berubah dari peringatan jadi gangguan.

   <dialog> bawaan dipakai supaya dapat lapisan teratas, jebakan fokus, dan
   Esc tanpa kode tambahan.
   ------------------------------------------------------------------------ */

.wz-pk-ask {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.wz-pk-ask[open] {
  display: grid;
  place-items: center;
}

.wz-pk-ask::backdrop {
  background: rgba(15, 20, 28, 0);
  backdrop-filter: blur(0);
  transition: background 0.26s ease, -webkit-backdrop-filter 0.26s ease,
    backdrop-filter 0.26s ease;
}

.wz-pk-ask.is-open::backdrop {
  background: rgba(15, 20, 28, 0.72);
  backdrop-filter: blur(5px);
}

.wz-pk-ask__box {
  width: min(430px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wz-pk-ask.is-open .wz-pk-ask__box {
  opacity: 1;
  transform: none;
}

.wz-pk-ask__cap {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--wz-pill-bg);
  color: var(--wz-pill-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wz-pk-ask__title {
  margin: 0;
  font-family: "Hind", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wz-ink);
}

.wz-pk-ask__body {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #565656;
}

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

.wz-pk-ask__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 22px 0 0;
}

.wz-pk-ask__act .wz-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .wz-pk-ask::backdrop,
  .wz-pk-ask__box { transition-duration: 0.01ms; }
  .wz-pk-ask__box { transform: none; }
}