/* ==========================================================================
   Section "Apa Saja Fitur Canggih di WatZap?" (.wz4-)

   Menggantikan dua section fitur lama — 59f5b3c (8 fitur, berjudul) dan
   c3d36ed (20 fitur, tanpa judul, dengan tombol "Lihat Semua Fitur"-nya
   sendiri) — yang sempat dibiarkan tayang berdampingan selama masa
   perbandingan, lalu dihapus.

   Modelnya tetap kisi 4 kolom berkartu seperti section lama. Empat hal yang
   berbeda:

   1. ISINYA 31, BUKAN 28. Tiga dicabut atas keterangan tim: Status Monitor
      dan Social Proof sudah tidak ada, Multi-user WhatsApp Web di-sunset
      karena jalur unofficial dan digantikan CRM WatZap Chat. Enam ditambah
      karena dijual di tabel harga tapi tidak pernah punya kartu: CRM & Team
      Inbox, 3rd Party Integrations, Interactive Messages, Allow Unsubscribe,
      Auto Engage, dan Ad Tracking.

   2. WARNA PUNYA ARTI. Empat kelompok kerja, empat warna: Kirim rose,
      Otomasi ungu, Tim hijau, Data biru. Warnanya muncul di ubin ikon,
      garis tepi kartu, dan label kelompok mungil di kanan atas — jadi orang
      tahu sedang membaca bagian apa tanpa perlu judul pemisah. Keempatnya
      sudah ada di halaman ini sebelumnya: rose warna merek, ungu dari noda
      latar section ini, hijau dari bubble WhatsApp di hero, biru dari
      --wz-btn-blue. Tidak ada rona baru yang datang entah dari mana.

      Nada yang dipakai adalah yang gelap (#c42a5e, #6b2fdd, #0d7a5e,
      #2a63bc), bukan yang cerah. Label kelompok cuma 10px, dan teks sekecil
      itu perlu 4,5:1 di atas putih. Nada cerahnya (#0f8a6a) hanya 4,32:1 —
      meleset. Yang gelap 5,3:1 ke atas, dan di atas ubin mudanya masih
      4,7:1 ke atas untuk ikonnya.

   3. IKON. Clipart lama datang dari sumber yang berbeda-beda — ada yang 3D,
      ada yang datar, masing-masing dengan paletnya sendiri — jadi kartunya
      tidak pernah terbaca satu himpunan. Sekarang semuanya glif garis yang
      digambar sendiri: satu ketebalan (1,9), satu ujung (bulat), mewarisi
      warna kelompoknya, dan tidak ada berkas gambar sama sekali.

   4. JUDUL & KETERANGAN. Yang lama panjangnya tidak karuan, dari 2 kata
      sampai 5 kata lengkap dengan tanda kutip yang nyangkut, dan
      keterangannya mengulang judulnya sendiri. Sekarang judul 2-3 kata muat
      satu baris dan keterangan satu kalimat aktif 39-58 karakter, jatuh di
      dua baris. Nama produk yang memang nama tidak diutak-atik.

   Baris terakhir tidak dibiarkan bolong: 31 kartu itu 7 baris penuh plus
   sisa 3, jadi slot keempatnya diisi kartu ajakan selebar satu kolom.
   32 slot, 8 baris, rata.

   Latar, kisi titik, dan pil kepala mengikuti bahasa .wz3 dan .wz-rv supaya
   section ini terbaca satu keluarga dengan tetangganya.
   ========================================================================== */

.wz4 {
  --wz4-ink: #171717;
  --wz4-ink-soft: #5a5a5a;
  --wz4-ink-mute: #6f6f6f;        /* 5,02:1 di atas putih — #8a8a8a cuma 3,54 */
  --wz4-line: #e0e0e0;
  --wz4-accent: #c42a5e;
  --wz4-accent-bright: #da336b;
  --wz4-tint: #fdeef4;
  --wz4-display: "Hind", system-ui, -apple-system, sans-serif;
  --wz4-body: "Quicksand", system-ui, -apple-system, sans-serif;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 96px;
  font-family: var(--wz4-body);
  color: var(--wz4-ink);

  /* Kedua tepinya putih karena tetangganya begitu: .wz-de di atas berakhir
     #ffffff, dan section 1e64acf di bawah tidak berlatar. Sambungannya jadi
     tidak terlihat di dua-duanya.

     Sebelumnya hentian 0% dipatok #ecf3fc, mengikuti section fitur lama
     (c3d36ed) yang dulu duduk tepat di atas sini. Dua section itu sudah
     dihapus. */
  background-image:
    radial-gradient(760px 460px at 80% 8%, rgba(218, 51, 107, .13), transparent 58%),
    radial-gradient(700px 480px at 4% 62%, rgba(123, 63, 242, .11), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #fdfdfe 6%, #ffffff 26%, #fffbfd 64%, #ffffff 100%);
}

/* Kisi titik. Ubin, ukuran, warna, dan topengnya sama persis dengan
   .wz3::before dan .wz-rv::before — tekstur bersama halaman ini. */
.wz4::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='26' height='26'%3E%3Ccircle cx='1.6' cy='1.6' r='1.6' fill='%23171717' fill-opacity='.09'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
}

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

/* :where() berkekhususan nol, jadi margin di kelas .wz4-* di bawah tetap
   menang atas reset ini.

   Padding sengaja TIDAK ikut dinolkan untuk <p>: `.wz-pill` adalah <p>, dan
   `.wz4 :where(p)` berkekhususan sama (0,1,0) dengan `.wz-pill` tapi dimuat
   belakangan — jadi resetnya menang dan pill-nya kempis jadi teks polos
   tanpa latar. Hanya daftar yang perlu paddingnya dilepas. */
.wz4 :where(p, h2, h3, ul, li) { margin: 0; }
.wz4 :where(ul) { padding: 0; list-style: none; }

.wz4-inner {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

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

.wz4-head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

/* Nilainya disalin dari tipografi.css (Hind 700 / 38px / 1,28 / -0,4px).
   Ditulis ulang di sini, bukan didaftarkan ke berkas itu, karena berkas itu
   milik sesi lain. Kalau angkanya berubah di sana, samakan di sini juga. */
.wz4-title {
  margin-top: 18px;
  font-family: var(--wz4-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.4px;
  color: var(--wz4-ink);
}

.wz4-title span { color: var(--wz4-accent-bright); }

.wz4-sub {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.66;
  color: #565656;
}

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

/* grid-auto-rows: 1fr menyamakan tinggi semua kartu, bukan hanya per baris.
   Tanpa itu baris yang isinya tanpa lencana jadi lebih pendek dan deretan
   kartunya terbaca miring. */
.wz4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

/* Nada per kelompok. --k warna kuat (ikon, label, lencana), --m latar muda
   (ubin ikon, pil legenda), --g garis tepi kartu. */
.wz4-c--g1 { --k: #c42a5e; --m: #fdeef4; --g: #f5d5e1; }
.wz4-c--g2 { --k: #6b2fdd; --m: #f1ecfe; --g: #ded1fa; }
.wz4-c--g3 { --k: #0d7a5e; --m: #e7f5f0; --g: #c8e5db; }
.wz4-c--g4 { --k: #2a63bc; --m: #eaf1fc; --g: #d2e0f5; }

.wz4-c {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  /* Cincin memakai inset box-shadow, bukan border, supaya tidak memakan ruang
     tata letak — kartunya tetap 100% lebar kolom. Lalu kontak tipis dan
     jatuh jauh: resep yang sama dengan jendela peragaan di hero. */
  box-shadow: inset 0 0 0 1px var(--g),
              0 1px 2px rgba(58, 26, 44, .05),
              0 10px 24px -16px rgba(58, 26, 44, .28);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.wz4-c__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.wz4-c__i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--m);
  color: var(--k);
  transition: background .22s cubic-bezier(.4, 0, .2, 1),
              color .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.wz4-c__i svg { display: block; width: 22px; height: 22px; }

.wz4-c__g {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--k);
}

.wz4-c h3 {
  font-family: var(--wz4-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.1px;
  color: var(--wz4-ink);
}

.wz4-c p {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wz4-ink-soft);    /* #5a5a5a di putih — 6,90:1 */
}

/* margin-top:auto memaku lencana ke dasar kartu, jadi lencana di kartu mana
   pun sebaris — tidak menggantung tepat di bawah keterangan yang panjangnya
   berbeda-beda. */
.wz4-c__b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.wz4-b {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

.wz4-b--j { background: var(--m); color: var(--k); }
.wz4-b--p { box-shadow: inset 0 0 0 1px var(--wz4-line); color: var(--wz4-ink-mute); }

/* ---- Kartu ajakan ------------------------------------------------------ */

.wz4-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 22px;
  border-radius: 16px;
  background: var(--wz4-accent);
  color: #fff;
}

.wz4-cta__h {
  font-family: var(--wz4-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.wz4-cta__b { display: grid; gap: 10px; }

.wz4-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--wz4-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.wz4-cta__btn svg { display: block; width: 16px; height: 16px; }

.wz4-cta__alt {
  color: #ffd3e2;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wz4-cta__alt:hover,
.wz4-cta__alt:focus-visible { color: #fff; }

/* ---- Lipatan "Lihat Semua Fitur" -------------------------------------- */

/* Section lama melipat daftarnya di 215px lalu menaruh tombol rose di atas
   gradiennya. Bentuknya diikuti; mekanismenya tidak.

   Yang lama menumpuk gradien BURAM setinggi 150px di atas kartunya, dan
   warnanya dipatok #ecf3fc — jadi begitu latar section berubah, ada balok
   biru menggantung di tengah halaman. Di sini yang dipakai mask: kartunya
   sendiri yang memudar, latar section apa pun tembus di belakangnya, dan
   tidak ada warna yang perlu disamakan dengan apa pun.

   Tingginya juga tidak dipatok. `--wz4-lipat` diisi skrip dari posisi baris
   ketiga yang sebenarnya, jadi "2,5 baris" tetap 2,5 baris di 4 kolom, 2
   kolom, maupun 1 kolom — padahal tinggi kartunya berbeda-beda di ketiganya.
   Angka 530px di bawah cuma jaring pengaman kalau pengukurannya gagal.

   Semuanya dikurung `.wz4-js`: tanpa JS tidak ada yang dilipat dan tombolnya
   tidak pernah muncul, jadi ke-31 kartunya terbaca utuh. */

.wz4-more { display: none; }

.wz4-js .wz4-wrap {
  max-height: var(--wz4-lipat, 530px);
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 132px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 132px), transparent);
}

.wz4-js .wz4-wrap.is-open {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Tombolnya ditarik naik supaya duduk di atas bagian yang memudar — persis
   seperti section lama, tapi lewat margin negatif, bukan `left: calc(50vw
   - 119px)` yang meleset selebar bilah gulir. */
.wz4-js .wz4-more {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: -34px;
}

/* `hidden` dari skrip berkekhususan nol, sementara aturan di atas (0,2,0)
   memaksa display:flex — tanpa baris ini tombolnya tidak pernah mau hilang
   setelah diklik. */
.wz4-js .wz4-more[hidden] { display: none; }

.wz4-more__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--wz4-accent-bright);
  color: #fff;
  font-family: var(--wz4-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(218, 51, 107, .5);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.wz4-more__b svg { display: block; width: 18px; height: 18px; }

.wz4-more__b:hover {
  background: var(--wz4-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(218, 51, 107, .55);
}

.wz4-more__b:focus-visible {
  outline: 3px solid rgba(218, 51, 107, .45);
  outline-offset: 3px;
}

/* ---- Sentuhan ---------------------------------------------------------- */

/* Satu-satunya gerak yang dipicu pemakai. Kartu terangkat sedikit dan ubin
   ikonnya berbalik jadi warna kelompoknya — cukup untuk menandai "ini bisa
   disentuh" tanpa menambah hiasan yang menyala sendiri. Dikurung di
   `hover: hover` supaya keadaan hover tidak nyangkut di layar sentuh. */
@media (hover: hover) {
  /* Kartunya naik 3px saat disentuh — dan itu menarik tepi bawahnya menjauh
     dari kursor. Kalau kursor kebetulan ada di 3px terbawah, hover-nya lepas,
     kartu turun lagi, kursor kena lagi: bergetar tanpa henti di pita setipis
     3px itu. Setrip 5px di bawah kartu ini ikut naik bersamanya, jadi tepi
     bawah kotak sentuhnya tidak pernah lepas dari kursor. */
  .wz4-c::after,
  .wz4-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 5px;
  }

  .wz4-cta { position: relative; }

  .wz4-c:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--g),
                0 2px 4px rgba(58, 26, 44, .06),
                0 18px 34px -18px rgba(58, 26, 44, .38);
  }

  .wz4-c:hover .wz4-c__i {
    background: var(--k);
    color: #fff;
  }

  .wz4-cta:hover { transform: translateY(-3px); }
  .wz4-cta { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
  .wz4-cta__btn:hover,
  .wz4-cta__btn:focus-visible { background: #fff1f6; }
}

/* ---- Masuk layar ------------------------------------------------------- */

/* `wz4-js` dipasang skrip HANYA kalau pemasangan pengamatnya berhasil, jadi
   tanpa JS (atau kalau skripnya melempar galat) kartunya tampil utuh.

   `backwards`, bukan `forwards`: `forwards` mengunci transform akhirnya dan
   mengalahkan :hover, dan begitu animasinya dinyalakan ulang kartu dengan
   delay panjang sempat kembali transparan — itu yang dulu terbaca sebagai
   kedipan waktu kursor lewat. */
.wz4-js .wz4-grid > li { opacity: 0; }

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

.wz4-js .wz4.is-in .wz4-grid > li {
  opacity: 1;
  animation: wz4-naik .52s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i) * .035s);
}

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

@media (max-width: 1019px) {
  .wz4 { padding: 76px 0 80px; }
  .wz4-title { font-size: 33px; }
  .wz4-sub { font-size: 17px; }
  .wz4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Satu kolom, kartu dibaringkan. 31 kartu tegak berjejer jadi enam layar
   penuh berisi kartu saja; dengan ikon di kiri dan teks rata kiri, tingginya
   turun sekitar setengahnya. Tidak ada perubahan markup — cuma area kisi. */
@media (max-width: 620px) {
  .wz4 { padding: 64px 0 68px; }
  .wz4-inner { padding: 0 16px; }
  .wz4-title { font-size: 28px; }
  .wz4-sub { font-size: 16px; }
  /* Satu kolom: grid-auto-rows:1fr tidak lagi berguna, malah merugikan —
     dia menyamakan KE-32 barisnya dengan baris tertinggi, jadi kartu tanpa
     lencana pun ikut setinggi kartu terpanjang. Di satu kolom tidak ada
     tetangga yang perlu disejajari, jadi tingginya dilepas dan section ini
     memendek sekitar seribu piksel. */
  .wz4-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }

  .wz4-c {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "i h"
      "i p"
      "b b";
    align-content: start;
    gap: 2px 14px;
    padding: 16px 18px 16px 16px;
  }

  .wz4-c__top { display: contents; }
  .wz4-c__i { grid-area: i; }
  .wz4-c__g { display: none; }        /* warnanya sudah cukup jadi penanda */
  .wz4-c h3 { grid-area: h; margin-top: 1px; }
  .wz4-c p  { grid-area: p; margin-top: 2px; }
  .wz4-c__b { grid-area: b; margin-top: 0; padding-top: 9px; }

  .wz4-cta { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wz4-js .wz4-grid > li { opacity: 1; }
  .wz4-js .wz4.is-in .wz4-grid > li { animation: none; }
  .wz4-c, .wz4-cta, .wz4-c__i, .wz4-cta__btn, .wz4-more__b { transition: none; }
  /* Lipatannya tetap dipakai — itu struktur, bukan hiasan. Yang dimatikan
     hanya perjalanan tingginya: begitu diklik, langsung terbuka. */
  .wz4-js .wz4-wrap { transition: none; }
  .wz4-c:hover, .wz4-cta:hover { transform: none; }
}