/* ==========================================================================
   Hero revamp — kolom kiri versi baru (varian "Perbaikan Minimal"),
   dipasang sebagai section terpisah di bawah hero yang sekarang.
   Hero lama TIDAK diubah dan masih terpasang di atasnya.

   Semua selector di-scope ke .wz-rv agar tidak bocor ke Elementor.
   Font memakai keluarga yang sudah self-hosted di assets/fonts:
   Source Sans Pro (teks) dan Quicksand (label tombol).
   ========================================================================== */

.wz-rv {
  --wz-rose:      #C4285C; /* isi tombol utama; teks putih di atasnya = 5.52:1 */
  --wz-rose-text: #B02455; /* rose sebagai teks di latar terang = 6.14:1     */
  --wz-rose-tint: #FDEFF5;
  --wz-ink:       #171717;
  --wz-muted:     #4B5563;
  /* Baris micro ini elemen paling rawan di section: 13px/400 dan duduk tepat
     di kolam ungu, di mana kisi titik masih hampir penuh. Diukur pada piksel
     terburuk (tepat di atas satu titik kisi, di dalam noda ungu): #6B7280
     asli 3,3:1 dan #5C6270 masih 4,39:1 — dua-duanya gagal AA. #565C6B
     memberi 4,80:1 di sana dan 6,28:1 di latar polos, sementara luminansinya
     (0,107) masih di atas sub-headline #565656 (0,093), jadi ia tetap
     terbaca lebih muda dan hierarkinya utuh. */
  --wz-faint:     #565C6B;

  position: relative;
  /* Mengurung ornamen latar agar tidak menambah lebar dokumen dan
     memunculkan scroll horizontal di layar sempit. */
  overflow: hidden;
  padding: 76px 24px;
  /* Section punya stacking context sendiri supaya dua lapis ornamen di
     ::before/::after bisa memakai z-index -1: duduk di atas latar dasar
     section, tapi di bawah SELURUH isi, tanpa menyentuh z-index elemen lain. */
  isolation: isolate;
  /* Latar mengikuti bahasa .wz3 (section "Kirim Promo, Jawab Chat, Closing"),
     dengan nilai yang diambil apa adanya dari sana supaya halaman terbaca
     satu sistem: dasar nyaris putih, dua noda warna lembut berbeda hue di
     atasnya. Rose menandai sisi panel peragaan, ungu menandai sisi salinan —
     hue kedua inilah yang membuat latarnya tidak terbaca sebagai "halaman
     merah muda". Arah landaiannya dibalik dari .wz3 karena tetangganya
     berbeda. Warna puncaknya #FEEEFC, sama persis dengan warna penutup
     landaian menu di atasnya, supaya sambungannya tidak terlihat sama sekali
     — disiplin yang sama yang dipakai .wz3 terhadap tetangganya. Kakinya
     putih, menyambung ke .wzb di bawahnya. */
  background-image:
    radial-gradient(760px 480px at 80% 28%, rgba(218, 51, 107, .13), transparent 62%),
    radial-gradient(780px 540px at 10% 72%, rgba(123, 63, 242, .15), transparent 60%),
    linear-gradient(180deg, #FEEEFC 0%, #FFFBFE 42%, #FFFFFF 100%);
  font-family: "Source Sans Pro", sans-serif;
  /* Tanpa garis atas. Garis itu dulu memisahkan section ini dari hero lama di
     atasnya; sekarang yang di atas adalah menu, dan landaiannya menyambung
     mulus — sebuah garis di situ hanya akan terbaca sebagai sisa. */
}

/* -- Ornamen latar ------------------------------------------------------- */

/* Kisi titik. Ubin, ukuran, warna, opasitas, dan topeng tepinya identik
   dengan .wz3::before — bukan variasi, memang sengaja sama persis supaya
   kedua section terbaca sebagai satu halaman, bukan dua eksperimen. */
.wz-rv::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 18%, #000 76%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
}

/* Muka gelombang siaran. Sepadan dengan lengkung raksasa .wz3::after — garis
   1px, rose 10%, tanpa isian — tapi pusatnya bukan titik dekoratif: ia tepat
   di tombol "Kirim sekarang" pada panel peragaan, jadi cincinnya mengikat
   kolom kiri (janjinya) ke kolom kanan (buktinya).

   viewBox-nya sama dengan geometri section di layar lebar lalu direntang
   100% x 100%, jadi lapisan ini tidak pernah lebih besar dari section. */
.wz-rv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/wz-siar-lebar.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 82.6% 86%;
}

/* -- Penanda pembanding. HAPUS blok ini begitu satu konsep dipilih. ------- */
.wz-rv__tag {
  position: absolute;
  top: 16px;
  left: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--wz-rose);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
}
.wz-rv__tag span { font-weight: 400; opacity: .85; }

/* -- Kerangka dua kolom, mengikuti geometri hero asli (513 / sisanya) ------ */
.wz-rv__wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 513px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.wz-rv__left { max-width: 493px; }

/* -- Eyebrow -------------------------------------------------------------- */
.wz-rv__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 16px 7px 11px;
  border-radius: 999px;
  background: var(--wz-rose-tint);
  color: var(--wz-rose-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
/* Ikon WhatsApp memakai aset asli assets/img/logo-wa.svg, sama seperti hero lama. */
.wz-rv__wa {
  flex: 0 0 auto;
  width: 20px;
  height: auto;
  display: block;
}

/* -- Judul ---------------------------------------------------------------- */
.wz-rv__h {
  margin: 0 0 20px;
  color: var(--wz-ink);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.9px;
}

/* -- Subjudul ------------------------------------------------------------- */
.wz-rv__sub {
  margin: 0 0 32px;
  max-width: 488px;
  color: var(--wz-muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.66;
}

/* Sorotan "Hingga 300%" — menggantikan animated-headline Elementor di hero lama.
   Teksnya ada di HTML statis (tidak disuntik JS, jadi tidak ada reflow), dan
   coretannya SVG inline dengan warna rose brand, bukan merah #DA0000 lepas palet. */
.wz-rv__mark {
  position: relative;
  display: inline-block;
  color: var(--wz-ink);
  font-weight: 700;
  white-space: nowrap;
}
.wz-rv__ring {
  position: absolute;
  left: -18px;
  top: 50%;
  width: calc(100% + 36px);
  height: 2.5em;
  transform: translateY(-50%) rotate(-1.4deg);
  overflow: visible;
  pointer-events: none;
  color: var(--wz-rose);
}

/* -- Tombol --------------------------------------------------------------- */
.wz-rv__cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.wz-rv__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 28px;
  border-radius: 9px;
  background: var(--wz-rose);
  color: #fff;
  font-family: Quicksand, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.wz-rv__btn:hover,
.wz-rv__btn:focus-visible { background: #A61E4D; color: #fff; transform: translateY(-1px); }
.wz-rv__btn svg { width: 17px; height: 17px; }

/* Tombol kedua tetap berbingkai agar blok CTA punya bobot, seperti hero lama —
   tapi warnanya dinaikkan supaya lolos AA (versi lama gagal di 4.25:1). */
.wz-rv__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border: 2px solid #E7BFCF;
  border-radius: 9px;
  background: #fff;
  color: var(--wz-rose-text);
  font-family: Quicksand, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.wz-rv__link:hover,
.wz-rv__link:focus-visible { border-color: var(--wz-rose); color: #8E1B43; }
.wz-rv__link svg { width: 17px; height: 17px; }

.wz-rv a:focus-visible {
  outline: 2px solid var(--wz-rose-text);
  outline-offset: 3px;
}

/* -- Mikrocopy ------------------------------------------------------------ */
.wz-rv__micro {
  margin: 0;
  color: var(--wz-faint);
  font-size: 13px;
  line-height: 1.5;
}



/* -- Bukti sosial: strip rating di puncak section -------------------------
   Susunannya mengikuti strip lama di atas hero: tiga kutipan berjajar,
   bintang di atas, kutipan di bawah, dipisah garis tipis.

   Bintang PNG 100x17 diganti SVG bergradasi emas yang sama (#FFBB00 ->
   #FFA700, diambil dari piksel stars-min.png) supaya tajam di layar retina
   dan bisa dianimasikan. Warna teksnya sendiri diterangkan di .wz-rv__q. */
.wz-rv__proof {
  position: relative;
  z-index: 1;
  /* Wadah 800px dengan tiga kolom sama lebar = geometri strip lama persis
     (diukur dari halaman: container 800px, kolom 266,7px). */
  max-width: 800px;
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.wz-rv__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wz-rv__pi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
/* Garis pemisah hanya di ANTARA kutipan, tidak di kedua ujung strip. */
.wz-rv__pi + .wz-rv__pi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(196, 40, 92, 0), rgba(196, 40, 92, .2) 45%, rgba(196, 40, 92, 0));
}

.wz-rv__stars {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}
/* Cahaya emas tipis di belakang bintang. ::before dilukis sebelum anak-anak
   <svg>, jadi tidak perlu z-index yang bisa mengacaukan tumpukan. */
.wz-rv__stars::before {
  content: "";
  position: absolute;
  inset: -12px -11px;
  background: radial-gradient(58% 66% at 50% 50%, rgba(255, 167, 0, .22), rgba(255, 167, 0, 0) 72%);
  pointer-events: none;
}
/* 5 x 17,87 + 4 x 2,5 = 99,4px — sepadan dengan stars-min.png yang 100x17. */
.wz-rv__star {
  display: block;
  width: 17.87px;   /* rasio kotak-batas path: 17.68 / 16.82 */
  height: 17px;
  fill: url(#wz-rv-gold);
}

.wz-rv__q {
  /* Dipekatkan dari #7A570C. Nilai itu dipilih saat puncak section masih
     terang; setelah puncaknya disamakan dengan kaki menu (#FEEEFC), strip
     bintang justru duduk di titik tergelap section dan #7A570C tinggal
     4,51:1 — lolos AA hanya karena pembulatan, bukan karena punya ruang.
     #6E4E0B memberi 5,23:1 di piksel terburuk (tepat di atas titik kisi)
     dengan identitas emas-cokelat yang sama. Aslinya #936B15 cuma 4,35:1. */
  color: #6E4E0B;
  font-family: Quicksand, sans-serif;
  font-size: 16px;      /* sama dengan strip lama */
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

/* -- Kolom kanan ---------------------------------------------------------- */
.wz-rv__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Ornamen: cahaya rose lembut di belakang visual, memberi kedalaman tanpa
   menambah satu pun permintaan jaringan. */
.wz-rv__right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(196, 40, 92, .16) 0%, rgba(196, 40, 92, 0) 68%);
  transform: translate(-50%, -56%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   KOLOM KANAN — peragaan dasbor, dua babak @11 detik, berulang tiap 22 detik.
   Tata letak sengaja padat dan dipisah garis 1px seperti dasbor sungguhan,
   bukan kartu-kartu melayang berjarak. Ada app header (workspace, lonceng,
   avatar), page header + breadcrumb, form bergrid simetris, tabel berkolom,
   dan composer di bawah percakapan.
   Yang menggerakkan peragaan adalah kursor yang berpindah dan mengklik.
   Palet mengikuti Section 3 (.wz2). Tanpa satu pun tangkapan layar.
   ========================================================================== */
.wz-rv__sim {
  --wa-kanvas: #EFEAE2;  --wa-keluar: #D9FDD3;
  --wa-ink:    #111B21;  --wa-dua:    #54656F;  --wa-tipis: #5E6B74;
  --wa-garis:  #E6E0E4;  --wa-biru:   #1583B4;
  --wa-rose:   #C42A5E;  --wa-teal:   #00705C;
  position: relative; z-index: 1;
  width: 100%; max-width: 582px;
  font-family: "Source Sans Pro", sans-serif;
}
.wz-stage { position: relative; height: 452px; }
.wz-act { position: absolute; inset: 0; }
/* Cahaya di belakang jendela: elips lebar dan rendah, bukan bola. Bola
   membuat halo yang terbaca seperti stiker; elips terbaca seperti pantulan. */
.wz-act::before {
  content: ""; position: absolute; inset: -18px -22px -30px;
  border-radius: 50%; filter: blur(26px); z-index: 0;
}
.wz-act--1::before { background: radial-gradient(52% 46% at 34% 62%, rgba(196,42,94,.34), rgba(196,42,94,0) 74%); }
.wz-act--2::before { background: radial-gradient(52% 46% at 66% 62%, rgba(0,112,92,.30), rgba(0,112,92,0) 74%); }

.wz-win {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 15px; background: #fff;
  /* Bayangan berlapis: kontak tipis, ambient sedang, lalu jatuh jauh.
     Satu bayangan besar selalu terbaca murah — tiga lapis terbaca mahal. */
  box-shadow: 0 0 0 1px rgba(58,26,44,.09),
              0 1px 1px rgba(58,26,44,.05),
              0 4px 8px -3px rgba(58,26,44,.09),
              0 14px 26px -10px rgba(58,26,44,.16),
              0 36px 62px -26px rgba(58,26,44,.42),
              0 1px 0 0 rgba(255,255,255,.75) inset;
}
.wz-act--1 .wz-win { --acc: var(--wa-rose); }
.wz-act--2 .wz-win { --acc: var(--wa-teal); }


/* Header aplikasi — tinggi 40px dengan gradien tipis supaya terbaca sebagai
   chrome aplikasi, bukan sekadar baris teks di atas kertas putih. */
.wz-app { flex: 0 0 auto; position: relative; z-index: 2; border-radius: 15px 15px 0 0;
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-bottom: 1px solid rgba(58,26,44,.09);
  background: linear-gradient(180deg, #fff, #FCFAFC); }
.wz-logo { display: block; width: 81px; height: 19px; object-fit: contain; }
.wz-ws { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 3px 9px; border-radius: 7px;
  background: #F4F0F4; box-shadow: 0 0 0 1px rgba(58,26,44,.07);
  color: var(--wa-dua); font-size: 10px; font-weight: 700; }
.wz-ws__c { width: 10px; height: 10px; opacity: .6; }
.wz-app__r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wz-chip { padding: 3px 9px; border-radius: 999px; background: #F4F0F4;
  box-shadow: 0 0 0 1px rgba(58,26,44,.07); color: var(--wa-dua); font-size: 9.5px; font-weight: 700; }
.wz-chip--on { background: #E4F3EA; box-shadow: 0 0 0 1px rgba(11,119,57,.16); color: #0B7739; }
.wz-bell { position: relative; display: grid; place-items: center; color: var(--wa-tipis); }
.wz-bell svg { width: 14px; height: 14px; }
.wz-bell u { position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 999px;
  background: var(--wa-rose); box-shadow: 0 0 0 1.5px #fff; }
.wz-me { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 999px;
  background: linear-gradient(160deg, #E3ECFA, #C9D9F2); color: #26303B; font-size: 9.5px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(58,26,44,.08); }

/* Kanvas kerja diberi warna. Kartu putih di atas kanvas bernuansa itulah yang
   membedakan dasbor sungguhan dari selembar kertas putih polos. */
.wz-main { position: relative; flex: 1 1 auto; min-height: 0; background: #F4F1F5; }
.wz-scr { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* Header halaman + breadcrumb */
.wz-ph2 { flex: 0 0 auto; display: flex; align-items: baseline; gap: 9px; padding: 0 14px; height: 40px;
  border-bottom: 1px solid rgba(58,26,44,.08); background: #fff; }
.wz-ph2 b { align-self: center; color: var(--wa-ink); font-size: 14.5px; font-weight: 700; letter-spacing: -.35px; }
.wz-ph2 > span { align-self: center; color: var(--wa-tipis); font-size: 9.5px; font-weight: 600; }
.wz-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.wz-auto i { width: 5px; height: 5px; border-radius: 999px; background: #12A150; }

/* Form */
.wz-form { flex: 1 1 auto; min-height: 0; display: flex; padding: 12px 14px; }
.wz-card { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 186px; gap: 12px;
  padding: 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(58,26,44,.07), 0 1px 2px rgba(58,26,44,.05),
              0 10px 20px -14px rgba(58,26,44,.35); }
.wz-kiri { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
/* Daftar kontak dan jadwal kirim ditumpuk, bukan disandingkan. Disandingkan,
   keduanya terlalu sempit untuk memuat nilai + meta, dan lebar isinya berbeda
   sehingga terbaca miring. Ditumpuk, keduanya persis sama lebar. */
.wz-f--pesan { flex: 1 1 auto; min-height: 0; }
.wz-f { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Label huruf kecil biasa. Micro-caps berspasi lebar itu bahasa panel admin
   lama; SaaS sekarang memakai label yang tenang dan terbaca. */
.wz-lb { display: flex; align-items: center; gap: 6px; color: var(--wa-dua); font-size: 10.5px; font-weight: 600; }
.wz-pers { padding: 1.5px 6px; border-radius: 5px; background: #FDEEF4; color: var(--wa-rose);
  font-size: 8.5px; font-style: normal; font-weight: 700; }
.wz-in { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px;
  border-radius: 8px; background: #FCFBFC;
  box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset;
  color: var(--wa-ink); font-size: 12px; font-weight: 600; }
.wz-in svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--wa-tipis); }
.wz-in--sel { position: relative; }
/* <i> dipakai sebagai wadah teks di banyak tempat; tanpa reset ini seluruh
   nilai isian tampil miring — tidak ada formulir yang begitu. */
.wz-win i, .wz-prev i { font-style: normal; }
.wz-ph { color: var(--wa-tipis); font-weight: 600; }
/* Nilai terpilih saja — tanpa kolom anotasi kedua. Anotasinya ("3.500",
   "tercepat") panjangnya berbeda, jadi rata kanan membuat tepi kirinya rompal
   19px dan rata kiri memindahkan rompal itu ke kanan. Anotasi tetap ada di
   dalam dropdown, tempat kolom rompal memang wajar. Jumlah penerima juga sudah
   tertera di footer. */
/* Dipusatkan lewat inset penuh + align-items, BUKAN translateY(-50%):
   keyframe kemunculannya juga menganimasikan transform, dan `transform: none`
   di sana membatalkan pemusatannya — teks nilai jatuh 6px di bawah pusat ikon
   dan chevron-nya sendiri. */
.wz-pick { position: absolute; left: 29px; right: 26px; top: 0; bottom: 0;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; opacity: 0; }
.wz-cv { margin-left: auto; display: grid; place-items: center; color: var(--wa-tipis); }
.wz-cv svg { width: 13px; height: 13px; }
.wz-type { display: inline-block; width: max-content; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.wz-car { width: 1.5px; height: 14px; background: var(--wa-rose); }

/* Isi pesan + pratinjau — dua kolom yang mengisi ruang yang dulu kosong. */
.wz-ta { flex: 1 1 auto; min-height: 0; padding: 8px 10px; border-radius: 8px; background: #FCFBFC;
  box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset;
  color: var(--wa-ink); font-size: 11.5px; line-height: 1.65; }
.wz-tl { display: block; white-space: nowrap; }
.wz-tz { display: inline-block; width: max-content; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.wz-tz em { padding: 0 3px 0 3px; margin-right: -2px; border-radius: 4px; background: #FDEEF4;
  color: var(--wa-rose); font-style: normal; font-weight: 700; }
.wz-car2 { display: inline-block; width: 1.5px; height: 12px; vertical-align: -1px; background: var(--wa-rose); }
.wz-vars { display: flex; gap: 5px; }
.wz-vars em { padding: 2.5px 7px; border-radius: 6px; background: #F4F1F5;
  box-shadow: 0 0 0 1px rgba(58,26,44,.07); color: var(--wa-dua);
  font-size: 9px; font-style: normal; font-weight: 700; }

.wz-prev { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.wz-prev__h { display: flex; align-items: center; gap: 6px; color: var(--wa-dua); font-size: 10.5px; font-weight: 600; }
.wz-prev__h em { margin-left: auto; padding: 1.5px 6px; border-radius: 5px; background: #F4F1F5;
  color: var(--wa-tipis); font-size: 8.5px; font-style: normal; font-weight: 700; }
.wz-prev__c { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding: 9px;
  border-radius: 9px; background-color: var(--wa-kanvas);
  background-image: url("../img/wa-doodle.svg"); background-size: 118px 118px;
  box-shadow: 0 0 0 1px rgba(58,26,44,.09), 0 2px 6px -3px rgba(58,26,44,.3) inset; }
.wz-hari { align-self: center; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.88);
  box-shadow: 0 1px 1px rgba(11,20,26,.1); color: var(--wa-tipis); font-size: 8.5px; font-weight: 700; }
.wz-sk { position: absolute; left: 9px; right: 9px; top: 33px; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 9px;
  border-radius: 10px 3px 10px 10px; background: rgba(255,255,255,.72); }
.wz-sk i { height: 54px; border-radius: 8px 2px 4px 4px; background: rgba(84,101,111,.17); }
.wz-sk u { height: 7px; margin: 0 5px; border-radius: 999px; background: rgba(84,101,111,.2); }
.wz-sk u:nth-of-type(2) { width: 78%; }
.wz-sk u:nth-of-type(3) { width: 50%; }
.wz-sk::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.85) 50%, transparent 78%);
  transform: translateX(-100%); }

.wz-pv { position: relative; width: 100%; overflow: hidden; border-radius: 10px 3px 10px 10px;
  background: var(--wa-keluar); box-shadow: 0 1px 2px rgba(11,20,26,.2); }
.wz-pv__m { display: block; padding: 3px 3px 0; }
.wz-pv__m img { display: block; width: 100%; height: 56px; object-fit: cover; object-position: 50% 62%;
  border-radius: 8px 2px 4px 4px; }
.wz-pv__t { display: block; padding: 6px 8px 5px; color: var(--wa-ink); font-size: 10.5px; line-height: 1.45; }
.wz-pv__t b { border-radius: 3px; font-weight: 700; }
/* Tiap baris pratinjau adalah kotak nowrap sendiri dengan lebar terukur, jadi
   ia bisa diketik pakai steps() persis seperti .wz-tz di kolom kiri. Titik
   putus barisnya bukan tebakan: diukur di peramban dari pembungkusan asli teks
   ini di dalam gelembung selebar 152px. */
.wz-pl { display: block; width: max-content; overflow: hidden; white-space: nowrap; }
.wz-pv__t u { display: block; margin-top: 2px; text-align: right; color: var(--wa-tipis);
  font-size: 8.5px; text-decoration: none; }
/* Tombol template. Teal, bukan biru WhatsApp: biru #1583B4 di atas #D9FDD3
   hanya 3,84:1 — teal #00705C memberi 5,46:1. */
.wz-pv__k { display: flex; align-items: center; justify-content: center; gap: 5px; height: 25px;
  border-top: 1px solid rgba(11,20,26,.11); color: var(--wa-teal); font-size: 10px; font-weight: 700; }
.wz-pv__k svg { width: 11px; height: 11px; }

/* Dropdown: bayangan berlapis + centang pada baris terpilih. */
.wz-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 9;
  display: flex; flex-direction: column; padding: 5px; border-radius: 10px; background: #fff;
  transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(58,26,44,.1), 0 2px 4px rgba(58,26,44,.06),
              0 12px 22px -8px rgba(58,26,44,.28), 0 26px 46px -20px rgba(58,26,44,.4);
  opacity: 0; }
.wz-opt { position: relative; display: flex; align-items: center; gap: 7px; height: 29px; padding: 0 9px; border-radius: 7px;
  color: var(--wa-ink); font-size: 11px; font-weight: 600; }
.wz-opt em { margin-left: auto; color: var(--wa-tipis); font-size: 9px; font-style: normal; font-weight: 700; }
.wz-ok { display: grid; place-items: center; width: 13px; height: 13px; color: var(--wa-rose); opacity: 0; }
.wz-ok svg { width: 11px; height: 11px; }

.wz-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 0 14px; height: 44px;
  border-top: 1px solid rgba(58,26,44,.08); background: #fff; }
.wz-hint { margin-right: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--wa-tipis); font-size: 10px; font-weight: 600; }
.wz-hint i { width: 5px; height: 5px; border-radius: 999px; background: var(--wa-rose); }
.wz-hint em { font-style: normal; }
/* Label tombol tidak boleh membungkus: di layar sempit flex sempat memerasnya
   jadi dua baris setinggi 54px di dalam footer 44px, dan tombolnya terpotong. */
.wz-btn2, .wz-send { flex: 0 0 auto; white-space: nowrap; }
.wz-btn2 { padding: 8px 13px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(58,26,44,.12), 0 1px 1.5px rgba(58,26,44,.06);
  color: var(--wa-dua); font-size: 11.5px; font-weight: 700; }
.wz-send { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 8px;
  background: linear-gradient(180deg, #E0417B, var(--wa-rose) 62%, #B02455);
  color: #fff; font-family: Quicksand, sans-serif; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(150,20,70,.5), 0 1px 1px rgba(58,26,44,.16),
              0 6px 14px -6px rgba(196,42,94,.85), 0 1px 0 0 rgba(255,255,255,.32) inset; }
.wz-send svg { width: 13px; height: 13px; }
.wz-rip { position: absolute; inset: 0; background: #fff; opacity: 0; }

/* Toast hasil broadcast — penghubung antara babak compose dan inbox.
   Dilayangkan di atas panel, tidak ikut alir daftar. Dua alasan yang terukur:
   (1) ia cuma hadir 2,4 detik lalu pergi, dan kalau ikut alir, seluruh baris
   chat melompat 55px persis sebelum kursor mengklik baris teratas — titik
   henti kursor sudah diukur untuk posisi lama, jadi kliknya akan meleset;
   (2) yang ikut alir terbaca sebagai perabot tetap sidebar, padahal isinya
   kabar sesaat. Putih dan berbayang supaya terbaca melayang di atas dinding
   percakapan yang krem; aksen rose disimpan di lencana centang saja. */
.wz-toast { position: absolute; z-index: 3; top: 12px; right: 12px;
  display: none; align-items: flex-start; gap: 7px; max-width: 216px;
  padding: 8px 11px 8px 9px; border-radius: 9px; background: #fff;
  box-shadow: 0 0 0 1px rgba(58,26,44,.10),
              0 1px 2px rgba(58,26,44,.07),
              0 10px 22px -10px rgba(58,26,44,.34);
  color: var(--wa-dua); font-size: 9.5px; font-weight: 600; }
/* Toast hanya masuk akal kalau peragaannya jalan: ia menandai satu momen.
   Tanpa JS peragaan membeku pada babak kedua yang sudah tuntas — momen itu
   sudah lewat, jadi toast-nya tidak dipasang sama sekali dan tidak menutupi
   kepala percakapan. */
.wz-rv-js .wz-toast { display: flex; }
.wz-toast__c { flex: 0 0 auto; display: grid; place-items: center; width: 15px; height: 15px;
  margin-top: 1px; border-radius: 50%; background: var(--wa-rose); color: #fff; }
.wz-toast__c svg { width: 9px; height: 9px; }
.wz-toast__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wz-toast b { color: var(--wa-ink); font-size: 10.5px; font-weight: 700; }

/* Inbox */
/* position: relative dipasang di sini, bukan hanya di blok ponsel: toast
   broadcast berlabuh ke kotak ini di semua lebar. */
.wz-body { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
/* overflow: hidden supaya baris kedelapan terpotong tepat di tepi bawah kolom
   daftar, bukan meluber ke luar melewati sudut membulat jendela. Isi daftar
   memang sengaja lebih tinggi dari kotaknya — lihat catatan jumlah baris di
   gerak.py. */
.wz-list { flex: 0 0 200px; min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  background: #FBF9FA; border-right: 1px solid var(--wa-garis); }
/* flex: 0 0 auto di sini penting: isi daftar sengaja lebih tinggi dari kotaknya,
   dan tanpa ini flex memeras kotak cari dari 28px jadi 17,75px supaya muat. */
.wz-cari { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin: 8px 10px 7px; padding: 0 10px; height: 28px;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--wa-garis);
  color: var(--wa-tipis); font-size: 10.5px; font-weight: 600; }
.wz-cari svg { width: 12px; height: 12px; }
.wz-filt { flex: 0 0 auto; display: flex; gap: 5px; padding: 0 10px 8px; border-bottom: 1px solid var(--wa-garis); }
.wz-filt em { padding: 3px 9px; border-radius: 999px; color: var(--wa-dua); font-size: 9.5px; font-style: normal; font-weight: 700;
  box-shadow: 0 0 0 1px var(--wa-garis); background: #fff; }
.wz-filt .wz-on { background: var(--wa-teal); color: #fff; box-shadow: none; }
.wz-inb__l { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.wz-inb__l li { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #F1ECEF; }
.wz-ib { position: relative; flex: 1 1 auto; min-width: 0; }
/* Pratayang dan jam di daftar chat ikut berubah begitu pesan terbaru masuk —
   inbox sungguhan tidak membeku pada pesan pertama. Lapis kedua ditumpuk
   di atas lapis pertama supaya tinggi barisnya tidak berubah. */
.wz-pt2 { position: absolute; left: 0; right: 0; bottom: 0; }
.wz-jam { position: relative; display: block; }
.wz-jm2 { position: absolute; right: 0; top: 0; }
.wz-ib b { display: block; color: var(--wa-ink); font-size: 11px; font-weight: 700; line-height: 1.3; }
.wz-ib i { display: block; overflow: hidden; color: var(--wa-dua); font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.wz-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wz-meta em { color: var(--wa-tipis); font-size: 8.5px; font-style: normal; font-weight: 600; }
.wz-meta u { display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: #25D366; color: #05341C; font-size: 8.5px; font-weight: 700; text-decoration: none; }

.wz-cnv { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wz-cnv__h { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--wa-garis); background: #fff; }
.wz-cnv__h .wz-av { width: 25px; height: 25px; font-size: 10px; }
.wz-who b { display: block; color: var(--wa-ink); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.wz-who i { display: block; color: var(--wa-tipis); font-size: 9px; font-style: normal; font-weight: 600; }
/* Tombol alat di header percakapan. Tanpa ini kursor mengklik ruang kosong
   lalu label muncul entah dari mana — sebab mendahului akibat, bukan sebaliknya. */
.wz-alat { margin-left: auto; display: grid; place-items: center; width: 25px; height: 25px;
  border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(58,26,44,.1);
  color: var(--wa-dua); }
.wz-alat + .wz-alat { margin-left: 0; }
.wz-alat svg { width: 13px; height: 13px; }
.wz-cnv__h em { margin-left: 2px; padding: 3px 9px; border-radius: 999px; background: #E3F1EE;
  color: var(--wa-teal); font-size: 9.5px; font-style: normal; font-weight: 700; }
/* Empty state percakapan — tampil sebelum ada chat yang dibuka */
.wz-kosong {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background-color: var(--wa-kanvas);
  background-image: url("../img/wa-doodle.svg"); background-size: 150px 150px;
  color: var(--wa-tipis); font-size: 11px; font-weight: 600;
}
.wz-kosong svg { width: 34px; height: 34px; opacity: .55; }
.wz-cnv { position: relative; }

.wz-cnv__b { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background-color: var(--wa-kanvas); background-image: url("../img/wa-doodle.svg"); background-size: 150px 150px; }
.wz-cnv__s { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 7px; padding: 11px; }
.wz-bub { max-width: 88%; padding: 7px 10px 6px; border-radius: 10px; color: var(--wa-ink);
  font-size: 11.5px; line-height: 1.45; box-shadow: 0 1px 2px rgba(11,20,26,.16); }
.wz-bub u { margin-left: 7px; color: var(--wa-tipis); font-size: 8.5px; text-decoration: none; white-space: nowrap; }
.wz-bub--in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.wz-bub--out { align-self: flex-end; background: var(--wa-keluar); border-top-right-radius: 3px; }
.wz-tick { display: inline-block; vertical-align: -2px; margin-left: 3px; color: var(--wa-biru); }
/* Tanpa ukuran, svg di dalam .wz-tick dirender 0x0 — jadi ketiga centang
   kirim/baca di babak 2 tidak pernah kelihatan sama sekali, padahal tiga
   keyframe wz-centang0/1/2 memang dibangkitkan untuk menganimasikannya dari
   abu-abu ke biru. Diukur: lebar gelembung keluar terlebar 243px dari jatah
   317px, jadi tambahan 15px ini tidak membuat satu baris pun membungkus
   ulang — tinggi tumpukan tetap dan tabel gulir tidak perlu diukur lagi. */
.wz-tick svg { display: block; width: 12px; height: 12px; }
/* Warna dasarnya biru, bukan mewarisi tinta gelembung: yang mengubah abu-abu
   jadi biru adalah keyframe wz-centang, dan keyframe itu mati pada gerak
   diredam maupun saat JS tidak jalan. Tanpa warna dasar ini, di kedua keadaan
   itu centangnya tampil hitam — terbaca seperti glif biasa, bukan tanda baca.
   Selama peragaan jalan, keyframe-nya tetap menang karena menyetel color. */

/* Pesan broadcast-nya sendiri, mendarat di percakapan Kevin pukul 09.00 —
   jadwal yang dipilih di layar compose. Tanpa gelembung ini babak 2 dibuka
   oleh pertanyaan Kevin yang datang entah dari mana, dan kampanye yang baru
   saja disusun di babak 1 tidak berbekas di mana pun.

   Susunannya menyalin .wz-pv, gelembung yang sama persis dipamerkan di panel
   pratinjau babak 1: gambar tersisip 3px dari tepi, teks, lalu dua tombol
   template dengan garis pemisah. Karena itu padding .wz-bub dilepas — gambar
   dan tombol harus memenuhi lebar gelembung, bukan duduk di dalam padding.

   Lebarnya dikunci 216px, bukan persentase. Nisbahnya sengaja disamakan
   dengan pratinjau: di sana gelembung 168px memuat gambar 162x56 (2,89:1);
   di sini 216px memuat 210x72 (2,92:1). Dengan max-width 78% lama, gelembung
   melar sampai 281px dan tidak lagi terbaca sebagai pesan yang sama. */
.wz-b0 { width: 216px; max-width: 88%; padding: 0; overflow: hidden; }
.wz-b0__k { display: flex; align-items: center; gap: 4px; padding: 7px 9px 0;
  color: var(--wa-teal); font-size: 8.5px; font-style: normal; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; }
.wz-b0__k svg { width: 9px; height: 9px; }
.wz-b0__m { display: block; padding: 5px 3px 0; }
.wz-b0__m img { display: block; width: 100%; height: 72px; object-fit: cover; object-position: 50% 62%;
  border-radius: 6px; }
.wz-b0__t { display: block; padding: 6px 9px 5px; font-size: 11.5px; line-height: 1.45; }
/* Jam dan centang turun ke barisnya sendiri, rata kanan — persis .wz-pv__t u.
   Menempel di ujung kalimat seperti gelembung biasa akan membuat baris
   terakhir menggantung tidak rata di lebar sesempit ini. */
.wz-b0__t u { display: block; margin: 1px 0 0; text-align: right; color: var(--wa-tipis);
  font-size: 8.5px; text-decoration: none; }
.wz-b0__t .wz-tick { display: inline-block; margin-left: 3px; vertical-align: -2px; }
/* Tombol template. Teal, bukan biru WhatsApp — alasan kontrasnya sama dengan
   .wz-pv__k: biru #1583B4 di atas #D9FDD3 hanya 3,84:1, teal #00705C 5,46:1. */
.wz-b0__c { display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px;
  border-top: 1px solid rgba(11,20,26,.11); color: var(--wa-teal); font-size: 10.5px; font-weight: 700; }
.wz-b0__c svg { width: 11px; height: 11px; }

.wz-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wz-qr > em { width: 100%; color: var(--wa-dua); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.wz-qrc { padding: 5px 10px; border: 1px solid #C9DCD7; border-radius: 999px; background: rgba(255,255,255,.95);
  color: var(--wa-teal); font-size: 10.5px; font-weight: 700; }
/* Label menempel pada nama kontak di header — tempatnya di CRM sungguhan.
   Sebelumnya ia menyelip sebagai gelembung di antara pesan, yang tidak pernah
   terjadi di aplikasi mana pun. */
.wz-lbl { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px 1px 5px;
  border-radius: 5px; background: #E3F1EE; box-shadow: 0 0 0 1px #B9D7D0;
  color: var(--wa-teal); font-size: 8.5px; font-weight: 700; vertical-align: 1px; }
.wz-lbl svg { width: 9px; height: 9px; }
.wz-ai { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,244,240,.98));
  box-shadow: 0 0 0 1px #C9DCD7, 0 4px 12px -5px rgba(0,112,92,.38); }
.wz-ai__h { display: flex; align-items: center; gap: 6px; color: var(--wa-teal); font-size: 9.5px; font-style: normal;
  font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.wz-ai__h svg { width: 12px; height: 12px; }
.wz-ail { position: relative; padding-left: 10px; color: var(--wa-ink); font-size: 10.5px; line-height: 1.45; }
.wz-ail b { font-weight: 700; color: var(--wa-teal); }
.wz-ail::before { content: ""; position: absolute; left: 0; top: 6px; width: 3px; height: 3px; border-radius: 999px; background: var(--wa-teal); }

.wz-comp { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
  border-top: 1px solid var(--wa-garis); background: #fff; color: var(--wa-tipis); }
.wz-comp svg { width: 15px; height: 15px; }
.wz-comp i { flex: 1 1 auto; font-size: 11px; font-style: normal; font-weight: 600; }
.wz-comp b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px; background: var(--wa-teal); color: #fff; }
.wz-comp b svg { width: 13px; height: 13px; }

.wz-av { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  color: #3B2430; font-size: 10px; font-weight: 700; }
.wz-av--1{background:#F7CFE0}.wz-av--2{background:#CBE3F7}.wz-av--3{background:#F7E4BE}.wz-av--4{background:#CDEBDA}

/* Kursor */
.wz-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 19px; height: 19px; pointer-events: none; }
.wz-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(31,20,30,.4)); }
.wz-cur u { position: absolute; left: -11px; top: -11px; width: 40px; height: 40px; border-radius: 999px;
  border: 2px solid var(--wa-rose); opacity: 0; }

/* Logo integrasi mengambang: ikon saja */
.wz-int { position: absolute; left: var(--x); top: var(--y); z-index: 4; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px; background: #fff;
  box-shadow: 0 0 0 1px rgba(60,20,44,.06), 0 2px 4px -1px rgba(60,20,44,.14), 0 10px 22px -8px rgba(60,20,44,.34); }
/* Ketiga logo menempati sel grid yang sama, lalu bergantian tampil. Tiap lapis
   membawa tooltip namanya sendiri; karena lapis yang tidak aktif ber-opacity 0,
   hanya tooltip logo yang sedang tampil yang bisa muncul. */
.wz-int__i { grid-area: 1 / 1; display: grid; place-items: center; }
.wz-int__i img { width: 20px; height: 20px; object-fit: contain; }
.wz-int__i em {
  position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 6;
  padding: 4px 9px 5px; border-radius: 7px; background: #26303B; color: #fff;
  font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(20,10,18,.55);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.wz-int__i em::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: #26303B; }
/* Ikon paling atas: tooltip dibalik ke bawah agar tidak terpotong tepi section. */
.wz-int--bawah .wz-int__i em { bottom: auto; top: calc(100% + 9px); transform: translate(-50%, -4px); }
.wz-int--bawah .wz-int__i em::after { top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #26303B; }
@media (hover: hover) {
  .wz-int:hover .wz-int__i em { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Animasi — dipicu IntersectionObserver di assets/js/hero-revamp.js.
   Keadaan tersembunyi di-scope ke .wz-rv-js; tanpa JS section tampil utuh.

   Satu cerita utuh, 30 detik:
     0-11,0s   susun broadcast (judul diketik, kontak & jadwal dipilih)
     10,8s     tombol Kirim ditekan -> langsung berpindah ke inbox CRM
     11,8-13,8 balasan berdatangan satu per satu, cepat (jeda 0,22 detik)
     16,2-25,9 skenario balas otomatis: buka chat, quick reply, label, AI
     25,9-29   ditahan supaya rangkuman sempat dibaca
   Penggeraknya kursor: tiap klik memicu langkah berikutnya.
   ========================================================================== */
.wz-rv-js .wz-rv__left > *, .wz-rv-js .wz-pnl,
.wz-rv-js .wz-rv__proof { opacity: 0; transform: translateY(16px); }
.wz-rv-js .wz-rv__right::before, .wz-rv-js .wz-int { opacity: 0; }

@keyframes wz-rv-naik  { to { opacity: 1; transform: none; } }
@keyframes wz-rv-sinar { to { opacity: 1; } }
@keyframes wz-rv-gambar { to { stroke-dashoffset: 0; } }
@keyframes wz-int-masuk { to { opacity: 1; } }

.wz-rv-js .wz-rv.is-in .wz-rv__left > *,
.wz-rv-js .wz-rv.is-in .wz-pnl,
.wz-rv-js .wz-rv.is-in .wz-rv__proof { animation: wz-rv-naik .62s cubic-bezier(.22,.61,.36,1) both; }
.wz-rv-js .wz-rv.is-in .wz-rv__proof { animation-delay: .02s; }
.wz-rv-js .wz-rv.is-in .wz-rv__left > :nth-child(1) { animation-delay: .04s; }
.wz-rv-js .wz-rv.is-in .wz-rv__left > :nth-child(2) { animation-delay: .11s; }
.wz-rv-js .wz-rv.is-in .wz-rv__left > :nth-child(3) { animation-delay: .18s; }
.wz-rv-js .wz-rv.is-in .wz-rv__left > :nth-child(4) { animation-delay: .27s; }
.wz-rv-js .wz-rv.is-in .wz-rv__left > :nth-child(5) { animation-delay: .34s; }
.wz-rv-js .wz-rv.is-in .wz-pnl { animation-delay: .12s; }
.wz-rv-js .wz-rv.is-in .wz-rv__right::before { animation: wz-rv-sinar 1.1s ease-out .1s both; }

/* Napas latar. Kolam cahaya membesar-mengecil sangat pelan; periodenya 46
   detik, tidak kelipatan 40 detik peragaan, jadi keduanya tidak pernah
   terkunci sefase dan latar tidak pernah terbaca sebagai "ikut" peragaan.
   Hanya transform, jadi cukup di compositor — tanpa repaint. Skala tidak
   pernah turun di bawah 1 supaya rotasi kecilnya tak pernah menyingkap sudut. */
/* Denyut siaran. BUKAN animasi latar yang berputar terus: 38 dari 40 detik
   muka gelombang ini diam total. Ia hanya bergerak sekali per putaran, tepat
   saat kursor peragaan menekan "Kirim sekarang" di detik 15,55 (15,55/40 =
   38,875%) — jadi gerakannya menyampaikan sesuatu: pesannya berangkat.
   Skalanya balik ke 1 lewat 7 detik yang panjang supaya tak ada sentakan.
   Hanya transform + opacity, jadi cukup di compositor. */
@keyframes wz-rv-siar {
  0%, 38.6%   { opacity: 1;   transform: scale(1); }
  39.4%       { opacity: 1;   transform: scale(1.014); }
  43.5%       { opacity: 1;   transform: scale(1.035); }
  62%, 100%   { opacity: 1;   transform: scale(1); }
}
.wz-rv-js .wz-rv.is-in::after { animation: wz-rv-siar 40s linear infinite; }
/* Posisi berpindah bersamaan dengan pergantian logo — satu siklus 21 detik
   yang sama, jadi ikon terlihat pindah tempat tepat saat berganti rupa.
   --s menentukan arah menjauh dari panel: 1 untuk slot kiri, -1 untuk kanan. */
.wz-rv-js .wz-rv.is-in .wz-int { animation: wz-int-masuk .5s ease-out both, wz-int-pindah 21s cubic-bezier(.5,0,.2,1) infinite;
  animation-delay: calc(.5s + var(--d)), var(--d); }
.wz-rv-js .wz-rv__ring path { stroke-dasharray: var(--wz-len); stroke-dashoffset: var(--wz-len); }
.wz-rv-js .wz-rv.is-in .wz-rv__ring path { animation: wz-rv-gambar .85s cubic-bezier(.65,0,.35,1) .62s forwards; }

/* ---- Peragaan 40 detik --------------------------------------------------
   Blok di bawah ini DIBANGKITKAN. Sumbernya tabel detik; jangan disunting
   tangan — ubah tabelnya lalu bangkitkan ulang, kalau tidak beat-nya lepas.
   -------------------------------------------------------------------------- */
.wz-rv-js .wz-act--1, .wz-rv-js .wz-act--2, .wz-rv-js .wz-toast,
.wz-rv-js .wz-inb__l li, .wz-rv-js .wz-cnv__h, .wz-rv-js .wz-cnv__b,
.wz-rv-js .wz-bub:not(.wz-b0), .wz-rv-js .wz-qr, .wz-rv-js .wz-qrc, .wz-rv-js .wz-lbl,
.wz-rv-js .wz-ai, .wz-rv-js .wz-ail, .wz-rv-js .wz-cur, .wz-rv-js .wz-pick,
.wz-rv-js .wz-pv, .wz-rv-js .wz-ok { opacity: 0; }
.wz-rv-js .wz-type, .wz-rv-js .wz-tz, .wz-rv-js .wz-pl { max-width: 0; }
.wz-rv-js .wz-pv__t u { opacity: 0; }
.wz-rv-js .wz-car, .wz-rv-js .wz-car2 { width: 0; }
.wz-rv-js .wz-int__i, .wz-rv-js .wz-pt2, .wz-rv-js .wz-jm2 { opacity: 0; }
@keyframes wz-kedip { 0%,45% { opacity: 1; } 55%,100% { opacity: 0; } }

@keyframes wz-babak1 {
  0%, 39.75% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55,.06,.9,.5); }
  40.625% { opacity: 0; transform: translateY(-9px) scale(.988); }
  97.375% { opacity: 0; transform: translateY(11px) scale(.986); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  100% { opacity: 1; transform: none; }
}
@keyframes wz-babak2 {
  0%, 40.625% { opacity: 0; transform: translateY(11px) scale(.986); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  42.125%, 96.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55,.06,.9,.5); }
  97.375% { opacity: 0; transform: translateY(-9px) scale(.988); }
  100% { opacity: 0; transform: translateY(11px) scale(.986); }
}
@keyframes wz-kursor {
  0.0% { transform: translate(545px, 438px); opacity: 0; animation-timing-function: linear; }
  2.0% { transform: translate(545px, 438px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  4.5% { transform: translate(303px, 131px); opacity: 1; animation-timing-function: linear; }
  12.25% { transform: translate(303px, 131px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  13.75% { transform: translate(189px, 187px); opacity: 1; animation-timing-function: linear; }
  15.5% { transform: translate(189px, 187px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  16.5% { transform: translate(189px, 229px); opacity: 1; animation-timing-function: linear; }
  18.875% { transform: translate(189px, 229px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  19.75% { transform: translate(189px, 244px); opacity: 1; animation-timing-function: linear; }
  21.5% { transform: translate(189px, 244px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  22.5% { transform: translate(189px, 285px); opacity: 1; animation-timing-function: linear; }
  25.0% { transform: translate(189px, 285px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  26.5% { transform: translate(309px, 324px); opacity: 1; animation-timing-function: linear; }
  36.5% { transform: translate(309px, 324px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  38.0% { transform: translate(496px, 427px); opacity: 1; animation-timing-function: linear; }
  39.5% { transform: translate(496px, 427px); opacity: 1; animation-timing-function: linear; }
  40.25% { transform: translate(496px, 427px); opacity: 0; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  45.75% { transform: translate(545px, 438px); opacity: 0; animation-timing-function: linear; }
  46.5% { transform: translate(545px, 438px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  49.0% { transform: translate(97px, 130px); opacity: 1; animation-timing-function: linear; }
  55.25% { transform: translate(97px, 130px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  56.5% { transform: translate(373px, 384px); opacity: 1; animation-timing-function: linear; }
  73.5% { transform: translate(373px, 384px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  75.25% { transform: translate(474px, 58px); opacity: 1; animation-timing-function: linear; }
  77.5% { transform: translate(474px, 58px); opacity: 1; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  79.0% { transform: translate(507px, 58px); opacity: 1; animation-timing-function: linear; }
  84.5% { transform: translate(507px, 58px); opacity: 1; animation-timing-function: linear; }
  85.5% { transform: translate(507px, 58px); opacity: 0; animation-timing-function: cubic-bezier(.32,.02,.12,1); }
  100.0% { transform: translate(545px, 438px); opacity: 0; animation-timing-function: linear; }
}
@keyframes wz-klik {
  0% { opacity: 0; transform: scale(.35); }
  5.2% { opacity: 0; transform: scale(.35); }
  5.65% { opacity: .7; transform: scale(1); }
  6.8% { opacity: 0; transform: scale(1.75); }
  14.45% { opacity: 0; transform: scale(.35); }
  14.9% { opacity: .7; transform: scale(1); }
  16.05% { opacity: 0; transform: scale(1.75); }
  17.325% { opacity: 0; transform: scale(.35); }
  17.775% { opacity: .7; transform: scale(1); }
  18.925% { opacity: 0; transform: scale(1.75); }
  20.45% { opacity: 0; transform: scale(.35); }
  20.9% { opacity: .7; transform: scale(1); }
  22.05% { opacity: 0; transform: scale(1.75); }
  23.325% { opacity: 0; transform: scale(.35); }
  23.775% { opacity: .7; transform: scale(1); }
  24.925% { opacity: 0; transform: scale(1.75); }
  27.2% { opacity: 0; transform: scale(.35); }
  27.65% { opacity: .7; transform: scale(1); }
  28.8% { opacity: 0; transform: scale(1.75); }
  38.825% { opacity: 0; transform: scale(.35); }
  39.275% { opacity: .7; transform: scale(1); }
  40.425% { opacity: 0; transform: scale(1.75); }
  49.7% { opacity: 0; transform: scale(.35); }
  50.15% { opacity: .7; transform: scale(1); }
  51.3% { opacity: 0; transform: scale(1.75); }
  57.2% { opacity: 0; transform: scale(.35); }
  57.65% { opacity: .7; transform: scale(1); }
  58.8% { opacity: 0; transform: scale(1.75); }
  75.95% { opacity: 0; transform: scale(.35); }
  76.4% { opacity: .7; transform: scale(1); }
  77.55% { opacity: 0; transform: scale(1.75); }
  79.7% { opacity: 0; transform: scale(.35); }
  80.15% { opacity: .7; transform: scale(1); }
  81.3% { opacity: 0; transform: scale(1.75); }
  100% { opacity: 0; transform: scale(.35); }
}
@keyframes wz-pickK {
  0%, 17.875% { opacity: 0; transform: translateY(5px); }
  18.925%, 40.0% { opacity: 1; transform: none; }
  40.75%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes wz-pickW {
  0%, 23.875% { opacity: 0; transform: translateY(5px); }
  24.925%, 40.0% { opacity: 1; transform: none; }
  40.75%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes wz-pratinjau {
  0%, 27.375% { opacity: 0; transform: translateY(8px) scale(.96); }
  28.25%, 40.0% { opacity: 1; transform: none; }
  40.75%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}
@keyframes wz-phK {
  0%, 17.875% { opacity: 1; }
  18.625%, 96.5% { opacity: 0; }
  97.25%, 100% { opacity: 1; }
}
@keyframes wz-phW {
  0%, 23.875% { opacity: 1; }
  24.625%, 96.5% { opacity: 0; }
  97.25%, 100% { opacity: 1; }
}
@keyframes wz-rangka {
  0%, 27.375% { opacity: 1; }
  28.125%, 96.5% { opacity: 0; }
  97.25%, 100% { opacity: 1; }
}
@keyframes wz-toastM {
  0%, 41.55% { opacity: 0; transform: translateY(-10px); }
  42.425%, 48.375% { opacity: 1; transform: none; }
  49.25%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes wz-toastHP {
  0%, 41.55% { opacity: 0; transform: translateY(10px); }
  42.425%, 48.375% { opacity: 1; transform: none; }
  49.25%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes wz-barisM0 {
  0%, 42.625% { opacity: 0; transform: translateX(-13px); }
  43.575%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM1 {
  0%, 43.125% { opacity: 0; transform: translateX(-13px); }
  44.075%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM2 {
  0%, 43.625% { opacity: 0; transform: translateX(-13px); }
  44.575%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM3 {
  0%, 44.125% { opacity: 0; transform: translateX(-13px); }
  45.075%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM4 {
  0%, 44.625% { opacity: 0; transform: translateX(-13px); }
  45.575%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM5 {
  0%, 45.125% { opacity: 0; transform: translateX(-13px); }
  46.075%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM6 {
  0%, 45.625% { opacity: 0; transform: translateX(-13px); }
  46.575%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-barisM7 {
  0%, 46.125% { opacity: 0; transform: translateX(-13px); }
  47.075%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-13px); }
}
@keyframes wz-kepalaM {
  0%, 50.125% { opacity: 0; transform: translateY(-6px); }
  51.175%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes wz-badanM {
  0%, 50.25% { opacity: 0; transform: translateX(9px); }
  51.3%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(9px); }
}
@keyframes wz-cnvHP {
  0%, 50.125% { opacity: 0; transform: translateX(52px); }
  51.375%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(52px); }
}
@keyframes wz-pop-wz-b1 {
  0%, 51.0% { opacity: 0; transform: translateY(7px) scale(.88); }
  52.0%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-pop-wz-b2 {
  0%, 58.75% { opacity: 0; transform: translateY(7px) scale(.88); }
  59.75%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-pop-wz-b3 {
  0%, 62.5% { opacity: 0; transform: translateY(7px) scale(.88); }
  63.5%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-pop-wz-b4 {
  0%, 65.5% { opacity: 0; transform: translateY(7px) scale(.88); }
  66.5%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-pop-wz-b5 {
  0%, 69.0% { opacity: 0; transform: translateY(7px) scale(.88); }
  70.0%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-pop-wz-b6 {
  0%, 72.0% { opacity: 0; transform: translateY(7px) scale(.88); }
  73.0%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px) scale(.88); }
}
@keyframes wz-centang0 {
  0%, 59.75% { opacity: 0; color: #5E6B74; }
  60.2%, 61.5% { opacity: 1; color: #5E6B74; }
  62.25%, 96.75% { opacity: 1; color: #1583B4; }
  97.5%, 100% { opacity: 0; color: #5E6B74; }
}
@keyframes wz-centang1 {
  0%, 66.5% { opacity: 0; color: #5E6B74; }
  66.95%, 68.25% { opacity: 1; color: #5E6B74; }
  69.0%, 96.75% { opacity: 1; color: #1583B4; }
  97.5%, 100% { opacity: 0; color: #5E6B74; }
}
@keyframes wz-centang2 {
  0%, 73.0% { opacity: 0; color: #5E6B74; }
  73.45%, 74.75% { opacity: 1; color: #5E6B74; }
  75.5%, 96.75% { opacity: 1; color: #1583B4; }
  97.5%, 100% { opacity: 0; color: #5E6B74; }
}
@keyframes wz-qrM {
  0%, 54.0% { opacity: 0; transform: translateY(7px); }
  55.05%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(7px); }
}
@keyframes wz-qrcM0 {
  0%, 54.25% { opacity: 0; transform: translateY(6px) scale(.94); }
  55.15%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(6px) scale(.94); }
}
@keyframes wz-qrcM1 {
  0%, 54.575% { opacity: 0; transform: translateY(6px) scale(.94); }
  55.475%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(6px) scale(.94); }
}
@keyframes wz-ptA {
  0%, 69.5% { opacity: 1; }
  70.25%, 98.0% { opacity: 0; }
  98.75%, 100% { opacity: 1; }
}
@keyframes wz-ptB {
  0%, 69.5% { opacity: 0; transform: translateY(3px); }
  70.35%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(3px); }
}
@keyframes wz-lblM {
  0%, 76.375% { opacity: 0; transform: translateX(-8px) scale(.7); }
  77.425%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-8px) scale(.7); }
}
@keyframes wz-aiM {
  0%, 80.125% { opacity: 0; transform: translateY(13px) scale(.97); }
  81.5%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(13px) scale(.97); }
}
@keyframes wz-ailM0 {
  0%, 81.125% { opacity: 0; transform: translateY(5px); }
  81.975%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes wz-ailM1 {
  0%, 82.075% { opacity: 0; transform: translateY(5px); }
  82.925%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes wz-ailM2 {
  0%, 83.025% { opacity: 0; transform: translateY(5px); }
  83.875%, 96.75% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes wz-gulir {
  0%, 51.0% { transform: translateY(367px); }
  54.0% { transform: translateY(367px); }
  54.95% { transform: translateY(314px); }
  58.75% { transform: translateY(314px); }
  59.7% { transform: translateY(277px); }
  62.5% { transform: translateY(277px); }
  63.45% { transform: translateY(240px); }
  65.5% { transform: translateY(240px); }
  66.45% { transform: translateY(187px); }
  69.0% { transform: translateY(187px); }
  69.95% { transform: translateY(150px); }
  72.0% { transform: translateY(150px); }
  72.95% { transform: translateY(97px); }
  80.125% { transform: translateY(97px); }
  81.075% { transform: translateY(0px); }
  97.375% { transform: translateY(0px); }
  99.0%, 100% { transform: translateY(367px); }
}
@keyframes wz-kosongM {
  0%, 39.75% { opacity: 0; }
  40.5%, 50.0% { opacity: 1; }
  50.75%, 100% { opacity: 0; }
}
@keyframes wz-ketik {
  0%, 5.875% { max-width: 0; }
  10.375%, 100% { max-width: 92px; }
}
@keyframes wz-ketikA {
  0%, 27.75% { max-width: 0; }
  31.25%, 100% { max-width: 223px; }
}
@keyframes wz-ketikB {
  0%, 31.25% { max-width: 0; }
  34.25%, 100% { max-width: 171px; }
}
@keyframes wz-ketikP1 {
  0%, 27.75% { max-width: 0; }
  30.64%, 100% { max-width: 152px; }
}
@keyframes wz-ketikP2 {
  0%, 30.64% { max-width: 0; }
  33.438%, 100% { max-width: 145px; }
}
@keyframes wz-ketikP3 {
  0%, 33.438% { max-width: 0; }
  34.25%, 100% { max-width: 33px; }
}
@keyframes wz-jamP {
  0%, 34.25% { opacity: 0; transform: none; }
  35.0%, 40.0% { opacity: 1; transform: none; }
  40.75%, 100% { opacity: 0; transform: none; }
}
@keyframes wz-karet1 {
  0%, 5.375% { width: 0; }
  5.4%, 12.375% { width: 1.5px; }
  12.4%, 100% { width: 0; }
}
@keyframes wz-karet2 {
  0%, 27.375% { width: 0; }
  27.4%, 31.25% { width: 1.5px; }
  31.275%, 100% { width: 0; }
}
@keyframes wz-karet3 {
  0%, 31.25% { width: 0; }
  31.275%, 36.0% { width: 1.5px; }
  36.025%, 100% { width: 0; }
}
@keyframes wz-fokus1 {
  0%, 5.375% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
  5.675%, 13.75% { box-shadow: 0 0 0 1.5px var(--wa-rose), 0 0 0 4px rgba(196,42,94,.14); }
  14.25%, 100% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
}
@keyframes wz-fokus2 {
  0%, 27.375% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
  27.675%, 36.0% { box-shadow: 0 0 0 1.5px var(--wa-rose), 0 0 0 4px rgba(196,42,94,.14); }
  36.5%, 100% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
}
@keyframes wz-fokus3 {
  0%, 14.5% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
  14.8%, 18.25% { box-shadow: 0 0 0 1.5px var(--wa-rose), 0 0 0 4px rgba(196,42,94,.14); }
  18.75%, 100% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
}
@keyframes wz-fokus4 {
  0%, 20.5% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
  20.8%, 24.25% { box-shadow: 0 0 0 1.5px var(--wa-rose), 0 0 0 4px rgba(196,42,94,.14); }
  24.75%, 100% { box-shadow: 0 0 0 1px rgba(58,26,44,.11), 0 1px 1.5px rgba(58,26,44,.05) inset; }
}
@keyframes wz-bukaK {
  0%, 14.625% { opacity: 0; transform: translateY(-6px) scale(.97); }
  15.075%, 18.25% { opacity: 1; transform: none; }
  18.65%, 100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}
@keyframes wz-bukaW {
  0%, 20.625% { opacity: 0; transform: translateY(-6px) scale(.97); }
  21.075%, 24.25% { opacity: 1; transform: none; }
  24.65%, 100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}
@keyframes wz-sorotK {
  0%, 16.5% { background: transparent; }
  16.85%, 17.375% { background: #FBF3F7; }
  17.525%, 17.775% { background: #F8DCE8; }
  18.125%, 18.25% { background: #FBF3F7; }
  18.65%, 100% { background: transparent; }
}
@keyframes wz-sorotW {
  0%, 22.5% { background: transparent; }
  22.85%, 23.375% { background: #FBF3F7; }
  23.525%, 23.775% { background: #F8DCE8; }
  24.125%, 24.25% { background: #FBF3F7; }
  24.65%, 100% { background: transparent; }
}
@keyframes wz-ceklisK {
  0%, 17.5% { opacity: 0; transform: scale(.4); }
  17.95%, 18.25% { opacity: 1; transform: none; }
  18.5%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes wz-ceklisW {
  0%, 23.5% { opacity: 0; transform: scale(.4); }
  23.95%, 24.25% { opacity: 1; transform: none; }
  24.5%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes wz-tekan {
  0%, 38.675% { transform: none; }
  38.975% { transform: scale(.965); }
  39.625%, 100% { transform: none; }
}
@keyframes wz-riak {
  0%, 38.775% { opacity: 0; transform: scale(.4); }
  39.125% { opacity: .4; transform: scale(1); }
  40.25%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes wz-pilihqr {
  0%, 56.5% { background: rgba(255,255,255,.95); color: #00705C; border-color: #C9DCD7; }
  56.85%, 57.25% { background: #E3F1EE; color: #00705C; border-color: #9FC4BC; }
  57.55%, 60.75% { background: #00705C; color: #fff; border-color: #00705C; }
  61.5%, 100% { background: rgba(255,255,255,.95); color: #00705C; border-color: #C9DCD7; }
}
@keyframes wz-sisip {
  0%, 28.65% { background: transparent; }
  29.05%, 38.25% { background: #FFE9A8; }
  40.0%, 100% { background: transparent; }
}
@keyframes wz-alatL {
  0%, 74.75% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.1); }
  75.15%, 76.0% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.18), 0 2px 5px -2px rgba(58,26,44,.3); }
  76.25% { transform: scale(.9); box-shadow: 0 0 0 1px rgba(58,26,44,.18); }
  76.95%, 100% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.1); }
}
@keyframes wz-alatA {
  0%, 78.5% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.1); }
  78.9%, 79.75% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.18), 0 2px 5px -2px rgba(58,26,44,.3); }
  80.0% { transform: scale(.9); box-shadow: 0 0 0 1px rgba(58,26,44,.18); }
  80.7%, 100% { transform: none; box-shadow: 0 0 0 1px rgba(58,26,44,.1); }
}
@keyframes wz-pilihBaris {
  0%, 49.75% { background: transparent; box-shadow: inset 0 0 0 0 rgba(196,42,94,0); }
  50.375%, 96.75% { background: #FCF2F6; box-shadow: inset 3px 0 0 0 var(--wa-rose); }
  97.5%, 100% { background: transparent; box-shadow: inset 0 0 0 0 rgba(196,42,94,0); }
}
@keyframes wz-lencanaPadam {
  0%, 49.75% { opacity: 1; transform: none; }
  50.375%, 97.5% { opacity: 0; transform: scale(.5); }
  100%% { opacity: 0; transform: scale(.5); }
}
@keyframes wz-int-ganti {
  0% { opacity: 0; transform: scale(.72); }
  3%, 31% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: scale(.72); }
}
@keyframes wz-int-pindah {
  0%, 30% { transform: translate(0, 0); }
  36%, 63% { transform: translate(calc(var(--s) * -10px), 44px); }
  69%, 96% { transform: translate(calc(var(--s) * -5px), -36px); }
  100% { transform: translate(0, 0); }
}
@keyframes wz-int-pindahHP {
  0%, 30% { transform: translateX(0); }
  36%, 63% { transform: translateX(38px); }
  69%, 96% { transform: translateX(-30px); }
  100% { transform: translateX(0); }
}
@keyframes wz-kilau {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.wz-rv-js .wz-rv.is-in .wz-act--1 { animation: wz-babak1 40s linear infinite; }
.wz-rv-js .wz-rv.is-in .wz-act--2 { animation: wz-babak2 40s linear infinite; }
.wz-rv-js .wz-rv.is-in .wz-cur { animation: wz-kursor 40s linear infinite; }
.wz-rv.is-in .wz-cur u { animation: wz-klik 40s linear infinite; }

.wz-rv.is-in .wz-f--judul .wz-in  { animation: wz-fokus1 40s linear infinite; }
.wz-rv.is-in .wz-f--pesan .wz-ta  { animation: wz-fokus2 40s linear infinite; }
.wz-rv.is-in .wz-f--kontak .wz-in { animation: wz-fokus3 40s linear infinite; }
.wz-rv.is-in .wz-f--waktu .wz-in  { animation: wz-fokus4 40s linear infinite; }
.wz-rv-js .wz-rv.is-in .wz-type   { animation: wz-ketik 40s steps(13, end) infinite; }
.wz-rv-js .wz-rv.is-in .wz-tz--1  { animation: wz-ketikA 40s steps(40, end) infinite; }
.wz-rv-js .wz-rv.is-in .wz-tz--2  { animation: wz-ketikB 40s steps(34, end) infinite; }
.wz-rv.is-in .wz-car      { animation: wz-karet1 40s steps(1, end) infinite, wz-kedip .9s steps(1, end) infinite; }
.wz-rv.is-in .wz-car2--1  { animation: wz-karet2 40s steps(1, end) infinite, wz-kedip .9s steps(1, end) infinite; }
.wz-rv.is-in .wz-car2--2  { animation: wz-karet3 40s steps(1, end) infinite, wz-kedip .9s steps(1, end) infinite; }

.wz-rv-js .wz-rv.is-in .wz-drop--k { animation: wz-bukaK 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-drop--w { animation: wz-bukaW 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv.is-in .wz-drop--k .wz-opt:first-child { animation: wz-sorotK 40s linear infinite; }
.wz-rv.is-in .wz-drop--w .wz-opt:first-child { animation: wz-sorotW 40s linear infinite; }
.wz-rv-js .wz-rv.is-in .wz-drop--k .wz-ok { animation: wz-ceklisK 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-drop--w .wz-ok { animation: wz-ceklisW 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-f--kontak .wz-pick { animation: wz-pickK 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-f--kontak .wz-ph   { animation: wz-phK 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-f--waktu  .wz-pick { animation: wz-pickW 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-f--waktu  .wz-ph   { animation: wz-phW 40s ease-out infinite; }
.wz-rv.is-in .wz-send { animation: wz-tekan 40s cubic-bezier(.4,0,.2,1) infinite; }
.wz-rv.is-in .wz-rip  { animation: wz-riak 40s ease-out infinite; }
.wz-rv.is-in .wz-alat--lbl { animation: wz-alatL 40s cubic-bezier(.4,0,.2,1) infinite; }
.wz-rv.is-in .wz-alat--ai  { animation: wz-alatA 40s cubic-bezier(.4,0,.2,1) infinite; }

.wz-rv-js .wz-rv.is-in .wz-int__i { animation: wz-int-ganti 21s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 7s + var(--d)); }
.wz-rv-js .wz-rv.is-in .wz-pv { animation: wz-pratinjau 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-pv b { animation: wz-sisip 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-pl--1 { animation: wz-ketikP1 40s steps(32, end) infinite; }
.wz-rv-js .wz-rv.is-in .wz-pl--2 { animation: wz-ketikP2 40s steps(31, end) infinite; }
.wz-rv-js .wz-rv.is-in .wz-pl--3 { animation: wz-ketikP3 40s steps(9, end) infinite; }
.wz-rv-js .wz-rv.is-in .wz-pv__t u { animation: wz-jamP 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-sk { animation: wz-rangka 40s ease-out infinite; }
.wz-rv.is-in .wz-sk::after { animation: wz-kilau 1.5s ease-in-out infinite; }

.wz-rv-js .wz-rv.is-in .wz-toast   { animation: wz-toastM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(1) { animation: wz-barisM0 40s cubic-bezier(.16,1,.3,1) infinite, wz-pilihBaris 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(2) { animation: wz-barisM1 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(3) { animation: wz-barisM2 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(4) { animation: wz-barisM3 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(5) { animation: wz-barisM4 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(6) { animation: wz-barisM5 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(7) { animation: wz-barisM6 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-inb__l li:nth-child(8) { animation: wz-barisM7 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv.is-in .wz-inb__l li:nth-child(1) .wz-meta u { animation: wz-lencanaPadam 40s cubic-bezier(.4,0,.2,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-cnv__h  { animation: wz-kepalaM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-cnv__b  { animation: wz-badanM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-kosong  { animation: wz-kosongM 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-b1 { transform-origin: 0 100%; animation: wz-pop-wz-b1 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b2 { transform-origin: 100% 100%; animation: wz-pop-wz-b2 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b3 { transform-origin: 0 100%; animation: wz-pop-wz-b3 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b4 { transform-origin: 100% 100%; animation: wz-pop-wz-b4 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b5 { transform-origin: 0 100%; animation: wz-pop-wz-b5 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b6 { transform-origin: 100% 100%; animation: wz-pop-wz-b6 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-b2 .wz-tick { animation: wz-centang0 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-b4 .wz-tick { animation: wz-centang1 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-b6 .wz-tick { animation: wz-centang2 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-cnv__s { animation: wz-gulir 40s cubic-bezier(.33,0,.15,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-pt1, .wz-rv-js .wz-rv.is-in .wz-jm1 { animation: wz-ptA 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-pt2, .wz-rv-js .wz-rv.is-in .wz-jm2 { animation: wz-ptB 40s ease-out infinite; }
.wz-rv-js .wz-rv.is-in .wz-qr      { animation: wz-qrM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-qr .wz-qrc:nth-child(2) { animation: wz-qrcM0 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-qr .wz-qrc:nth-child(3) { animation: wz-qrcM1 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-qr .wz-qrc:nth-child(3) { animation: wz-qrcM1 40s cubic-bezier(.16,1,.3,1) infinite, wz-pilihqr 40s linear infinite; }
.wz-rv-js .wz-rv.is-in .wz-lbl { animation: wz-lblM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-ai  { animation: wz-aiM 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-ai .wz-ail:nth-child(2) { animation: wz-ailM0 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-ai .wz-ail:nth-child(3) { animation: wz-ailM1 40s cubic-bezier(.16,1,.3,1) infinite; }
.wz-rv-js .wz-rv.is-in .wz-ai .wz-ail:nth-child(4) { animation: wz-ailM2 40s cubic-bezier(.16,1,.3,1) infinite; }

/* -- Responsif ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .wz-rv__wrap { grid-template-columns: 1fr; gap: 48px; }
  .wz-rv__proof { margin-bottom: 36px; }
  .wz-rv__left { max-width: 620px; }
  .wz-rv__h { font-size: 34px; }

  /* Begitu tata letaknya menumpuk, panel pindah ke bawah kolom teks — jadi
     sumber gelombang ikut pindah ke bibir atas panel dan sapuannya naik
     melewati judul, bukan menyeberang dari kanan. viewBox potret 390x1180
     hampir sama nisbahnya dengan kanvas ponsel, jadi cincinnya tetap bundar. */
  .wz-rv::after {
    background-image: url("../img/wz-siar-potret.svg");
    transform-origin: 50% 56%;
  }
}

@media (max-width: 760px) {
  /* Kutipan terlebar 216px; tiga kolom baru muat kalau viewport >= ~740px.
     Di bawah itu strip ditumpuk jadi tiga baris, bintang pindah ke samping
     kutipan supaya tetap ringkas. */
  .wz-rv__proof {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 32px;
  }
  .wz-rv__pi { flex-direction: row; align-items: center; gap: 11px; }
  .wz-rv__pi + .wz-rv__pi::before { display: none; }
  .wz-rv__stars::before { inset: -9px -8px; }
}

@media (max-width: 640px) {
  .wz-rv { padding: 64px 20px 56px; }
  .wz-rv__tag { position: static; margin-bottom: 22px; }
  .wz-rv__h { font-size: 28px; letter-spacing: -.4px; }
  .wz-rv__right::before { width: 380px; height: 380px; }
  .wz-rv__sub { font-size: 16px; }
  .wz-rv__cta { gap: 18px; }
  .wz-rv__btn { width: 100%; justify-content: center; }

  /* Kartu bukti sosial ikut melebar penuh menyamai tombol utama. Kutipan
     terpanjang (232px) masih muat di lebar terkecil yang didukung (320px -
     padding 40 - padding kartu 28 = 252px), jadi nowrap-nya aman. */
  /* Bintang + kutipan terpanjang harus muat di lebar terkecil yang didukung:
     320px - padding section 40 = 280px. */
  .wz-rv__q { font-size: 13.5px; }
  .wz-rv__star { width: 14.2px; height: 13.5px; }
  .wz-rv__pi { gap: 9px; }

  /* Titik henti kursor memakai koordinat panggung desktop, jadi di layar
     sempit ia akan terbang keluar. Disembunyikan; peragaannya tetap jalan. */
  .wz-stage { height: 476px; }
  .wz-cur { display: none; }

  /* Pratinjau pesan butuh lebar yang tidak ada di sini; kolomnya dilepas dan
     kotak pesan memakai seluruh lebar. Jalur gridnya ikut dilepas — display:none
     hanya membuang itemnya, jalur 186px-nya tetap memakan tempat dan menjepit
     kolom kiri jadi 109px. */
  .wz-card { grid-template-columns: minmax(0, 1fr); }
  .wz-prev, .wz-vars { display: none; }
  .wz-ph2 b { font-size: 13.5px; }
  .wz-auto { display: none; }
  /* Footer disederhanakan: aksi sekunder dan keterangan panjang dilepas supaya
     tombol utama tetap utuh. */
  .wz-btn2 { display: none; }
  .wz-hint em { display: none; }

  /* Ditiru perilaku aplikasi mobile: daftar chat memenuhi layar saat balasan
     berdatangan, lalu percakapan didorong masuk dari kanan begitu satu chat
     dibuka — jadi momen banjir balasan tetap terlihat utuh. */
  .wz-list { position: absolute; inset: 0; z-index: 1; flex-basis: auto; border-right: 0; }
  .wz-cnv { position: absolute; inset: 0; z-index: 2; }
  .wz-kosong { display: none; }
  .wz-rv-js .wz-cnv { opacity: 0; }
  /* 40s, bukan 34s. Keyframe-nya dibangkitkan pada skala satu putaran 40 detik;
     dijalankan 34s ia memampat — percakapan terbuka di detik 17,0 padahal
     kursornya baru mengklik di 19,9, dan selisihnya menumpuk tiap putaran. */
  .wz-rv-js .wz-rv.is-in .wz-cnv { animation: wz-cnvHP 40s cubic-bezier(.16,1,.3,1) infinite; }

  /* Di ponsel daftar chat memenuhi panel, jadi tidak ada sisi kanan kosong
     untuk ditempati toast. Diukur: kolom atas 0-72px dipakai kotak cari dan
     cip saring — satu-satunya penanda bahwa ini inbox — sedangkan 335-436px
     memang lowong setelah toast dilepas dari alir. Jadi toast turun ke bawah,
     seperti snackbar, dan arah masuk-keluarnya ikut dibalik. */
  .wz-toast { top: auto; bottom: 12px; left: 10px; right: 10px; max-width: none; }
  .wz-rv-js .wz-rv.is-in .wz-toast { animation: wz-toastHP 40s cubic-bezier(.16,1,.3,1) infinite; }

  .wz-act::before { inset: -14px -12px -20px; }
  /* Di layar sempit panel memakai hampir seluruh lebar, jadi tidak ada sisi
     luar untuk ditempati — versi lama menjepit ikon ke dalam dan ikon itu
     menabrak isian formulir. Sekarang ikon dipindah ke celah atas dan bawah
     panel, tempat yang memang kosong. */
  .wz-int { width: 32px; height: 32px; border-radius: 9px; }
  .wz-int img { width: 17px; height: 17px; }
  .wz-int:nth-of-type(1) { left: 12%; top: -38px; }
  .wz-int:nth-of-type(2) { left: 44%; top: -42px; }
  .wz-int:nth-of-type(3) { left: 74%; top: -36px; }
  /* Perpindahan dibatasi mendatar saja: celah di atas dan di bawah panel hanya
     beberapa puluh piksel, tidak cukup untuk gerak menegak. */
  .wz-rv-js .wz-rv.is-in .wz-int { animation: wz-int-masuk .5s ease-out both, wz-int-pindahHP 21s cubic-bezier(.5,0,.2,1) infinite;
    animation-delay: calc(.5s + var(--d)), var(--d); }
  .wz-int__i em { display: none; }
  .wz-int:nth-of-type(4) { left: 12%; top: calc(100% + 8px); }
  .wz-int:nth-of-type(5) { left: 44%; top: calc(100% + 4px); }
  .wz-int:nth-of-type(6) { left: 74%; top: calc(100% + 10px); }
}

/* Hormati preferensi gerak minimal: animasi mati, peragaan dibekukan pada
   babak kedua yang sudah selesai. Kursor, dropdown dan rangka dimuat mati. */
@media (prefers-reduced-motion: reduce) {
  .wz-rv__btn { transition: none !important; }
  .wz-rv__btn:hover { transform: none !important; }
  .wz-rv-js .wz-rv__left > *, .wz-rv-js .wz-pnl, .wz-rv-js .wz-int,
  .wz-rv-js .wz-rv__right::before, .wz-rv-js .wz-act--2,
  .wz-rv-js .wz-inb__l li,
  .wz-rv-js .wz-cnv, .wz-rv-js .wz-cnv__h, .wz-rv-js .wz-cnv__b,
  .wz-rv-js .wz-bub, .wz-rv-js .wz-qr, .wz-rv-js .wz-qrc, .wz-rv-js .wz-lbl,
  .wz-rv-js .wz-ai, .wz-rv-js .wz-ail,
  .wz-rv-js .wz-bub--out .wz-tick { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wz-rv-js .wz-act--1 { opacity: 0 !important; animation: none !important; }
  .wz-rv .wz-cur, .wz-rv .wz-car, .wz-rv .wz-car2, .wz-rv .wz-rip,
  .wz-rv .wz-drop, .wz-rv .wz-sk, .wz-rv .wz-kosong { opacity: 0 !important; animation: none !important; }
  /* Toast broadcast ikut dilepas di sini. Peragaan dibekukan pada babak kedua
     yang sudah tuntas — pada frame itu broadcast-nya sudah lama terkirim, dan
     toast yang melayang justru menutupi kepala percakapan. */
  .wz-rv-js .wz-toast { display: none !important; }
  /* `width: auto` tidak pernah bekerja di sini: yang menyembunyikan teks
     adalah `max-width: 0`, jadi judul kampanye dan seluruh isi pesan tampil
     0px alias hilang sama sekali buat pemakai yang meminta gerak diredam.
     Dilepas lewat max-width, properti yang benar. */
  .wz-rv-js .wz-type, .wz-rv-js .wz-tz, .wz-rv-js .wz-pl {
    max-width: none !important; width: max-content !important; animation: none !important; }
  .wz-rv-js .wz-pv__t u { opacity: 1 !important; animation: none !important; }
  .wz-rv-js .wz-pv, .wz-rv-js .wz-pick { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wz-rv-js .wz-ph { opacity: 0 !important; animation: none !important; }
  .wz-rv .wz-in, .wz-rv .wz-ta, .wz-rv .wz-sk::after, .wz-rv .wz-pv__t b,
  .wz-rv .wz-send, .wz-rv .wz-opt, .wz-rv .wz-alat,
  .wz-rv .wz-inb__l li, .wz-rv .wz-meta u { animation: none !important; }
  /* Tanpa animasi, ketiga logo integrasi akan menumpuk; hanya yang pertama
     ditampilkan. */
  .wz-rv-js .wz-int__i { opacity: 0 !important; animation: none !important; }
  .wz-rv-js .wz-int__i:first-child { opacity: 1 !important; }
  .wz-rv-js .wz-rv__ring path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  /* Strip bukti sosial: semua bintang langsung tampil, tanpa gelombang. */
  .wz-rv-js .wz-rv__proof { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wz-rv-js .wz-rv .wz-rv__star { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Sisa animasi babak 2 ikut dibekukan pada keadaan akhir cerita: tumpukan
     pesan sudah tergulir sampai bawah, dan pratinjau di daftar chat sudah
     memakai pesan terakhir — selaras dengan gelembung, label Closing, dan
     ringkasan AI yang di atas sudah ditetapkan tampil. */
  .wz-rv-js .wz-rv .wz-cnv__s { transform: none !important; animation: none !important; }
  .wz-rv-js .wz-rv .wz-pt1, .wz-rv-js .wz-rv .wz-jm1 { opacity: 0 !important; animation: none !important; }
  .wz-rv-js .wz-rv .wz-pt2, .wz-rv-js .wz-rv .wz-jm2 { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wz-rv-js .wz-rv .wz-ok { opacity: 0 !important; animation: none !important; }
  /* Riak klik ikut dimatikan: kursornya memang sudah disembunyikan, tapi
     animasinya tetap berputar kalau tidak dilepas. */
  .wz-rv-js .wz-rv .wz-cur u { animation: none !important; }
  /* Denyut siaran ikut berhenti; muka gelombang dibekukan pada keadaan
     diamnya, yang memang keadaan selama 38 dari 40 detik. */
  .wz-rv-js .wz-rv.is-in::after { transform: none !important; animation: none !important; }
}