/* ==========================================================================
   Section Auto Engage (redesign) — versi tanpa gambar, murni CSS/SVG.
   Dipasang sebagai section BARU di bawah Auto Engage lama; yang lama tidak
   disentuh. Semua kelas diawali .wz-ae supaya tidak bentrok dengan Elementor
   maupun section lain (.wz2, .wz3, .wz-rv).

   Prefix semantik .wz-ae (bukan .wz4) dipilih karena .wz3 sudah dipakai
   section redesign lain. Judul & sub-judul di-style MANDIRI di berkas ini
   (lihat .wz-ae-title / .wz-ae-sub), tidak bergantung pada normalisasi
   tipografi.css — ukurannya tetap disamakan: Hind 38/700 & Quicksand 18/500.

   Font: Hind (display) + Quicksand (body/label) — sama seperti .wz2.
   ========================================================================== */

.wz-ae {
  --wz-ae-ink:        #171717;
  --wz-ae-ink-soft:   #4b4b4b;
  --wz-ae-ink-mute:   #6e6e6e;
  --wz-ae-accent:     #c4285c; /* rose utama; teks putih di atasnya aman        */
  --wz-ae-accent-br:  #da336b; /* rose terang untuk aksen/hover                 */
  --wz-ae-accent-tint:#fdeff5;
  --wz-ae-accent-deep:#8d1a3f; /* angka besar di kartu statistik                */
  --wz-ae-green:      #25d366;
  --wz-ae-line:       #efd9e4;
  --wz-ae-line-soft:  #f6e7ee;

  /* Token khusus mockup WhatsApp — sama nilainya dengan .wz2 biar konsisten. */
  --wz-ae-wa-header:  #008069;
  --wz-ae-wa-canvas:  #efeae2;
  --wz-ae-wa-out:     #d9fdd3;
  --wz-ae-wa-in:      #ffffff;
  --wz-ae-wa-link:    #027eb5;
  --wz-ae-wa-meta:    #667781;

  --wz-ae-display: "Hind", system-ui, sans-serif;
  --wz-ae-body:    "Quicksand", system-ui, sans-serif;

  /* Lebar HP dipakai juga untuk menghitung posisi konektor. */
  --wz-ae-phone-w: 268px;
  --wz-ae-gap:     34px;

  position: relative;
  /* 46px, bukan 56px: panggung visual naik 21px demi menghapus sentakan, dan
     ruang itu diambil kembali di sini supaya tinggi section tidak bertambah. */
  padding: 46px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fff4f8 100%);
  overflow: hidden;
  font-family: var(--wz-ae-body);
  border-top: 1px solid var(--wz-ae-line);
}

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

/* :where() punya kekhususan nol → margin pada kelas .wz-ae-* di bawah tetap menang. */
.wz-ae :where(p, h2, h3, h4, ul, li) { margin: 0; padding: 0; }
.wz-ae :where(ul) { list-style: none; }

/* Cahaya dekoratif; dikurung overflow:hidden pada .wz-ae supaya tak menambah lebar. */
.wz-ae-glow {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 51, 107, .12) 0%, rgba(218, 51, 107, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.wz-ae-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

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

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

.wz-ae-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--wz-ae-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  font-family: var(--wz-ae-body);
}

.wz-ae-title {
  color: var(--wz-ae-ink);
  font-family: var(--wz-ae-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.4px;
}
.wz-ae-sub {
  margin-top: 8px;
  color: #565656;
  font-family: var(--wz-ae-body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Kartu pembungkus ------------------------------------------- */
/* Tab + panel dikurung satu wadah supaya isinya tidak terasa melayang di
   latar gradasi pucat — ini penyebab utama kesan "besar tapi kopong". */
.wz-ae-card {
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  border-radius: 24px;
  box-shadow: 0 26px 60px -36px rgba(23, 23, 23, .38);
  padding: 18px 22px 22px;
}

/* ---------- Tab switcher ------------------------------------------------ */

.wz-ae-tabbar { text-align: center; margin-bottom: 18px; }

/* Di dalam kartu, tab tidak lagi butuh bayangan & latar putihnya sendiri —
   cukup jadi segmented control bertumpu pada tint. */
.wz-ae-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--wz-ae-line);
  background: var(--wz-ae-accent-tint);
}

.wz-ae-tab {
  position: relative;
  overflow: hidden;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: 999px;
  background: transparent;
  color: var(--wz-ae-ink-mute);
  font-family: var(--wz-ae-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.wz-ae-tab > span { position: relative; z-index: 1; }
.wz-ae-tab:hover { background: var(--wz-ae-accent-tint); color: var(--wz-ae-accent); }
.wz-ae-tab.is-active {
  background: var(--wz-ae-accent);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(196, 40, 92, .7);
}
.wz-ae-tab:focus-visible { outline: 2px solid var(--wz-ae-accent); outline-offset: 3px; }

/* Indikator progres putar-otomatis: garis tipis di dasar tab aktif.
   Hanya muncul saat JS memasang .is-auto pada tablist. */
/* Progres tampil sebagai ISIAN yang menyapu seluruh pil, bukan garis tipis di
   dasar — versi garis ikut terpotong lengkung sudut pil sehingga terlihat
   kuntet. Sapuan lembut ini terbaca sebagai "pil terisi" selama 7 detik. */
.wz-ae-tabs.is-auto .wz-ae-tab.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .14) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: wz-ae-prog var(--wz-ae-auto, 7s) linear forwards;
}
.wz-ae-tabs.is-auto.is-paused .wz-ae-tab.is-active::after { animation-play-state: paused; }

@keyframes wz-ae-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Panel ------------------------------------------------------- */

/* Visual di KIRI, teks di kanan — sekaligus menyamakan arah dengan section
   WABA (.wz2) yang juga menaruh visualnya di kiri.
   Urutan DOM tetap teks-dulu demi pembaca layar; pertukaran hanya lewat
   `order`, dan dikembalikan ke urutan DOM saat kolom menumpuk di layar sempit. */
/* Gap kolom sengaja dibuat mendekati padding kartu (23px) supaya jarak kiri
   dan kanan blok teks terasa seimbang. Sebelumnya 44px — kiri terasa jauh
   sementara kanan hanya 23px. Lebar yang dihemat dialihkan ke kolom teks. */
.wz-ae-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 408px);
  align-items: center;
  gap: 24px 28px;
}
.wz-ae-viz  { order: 1; }
.wz-ae-copy { order: 2; }
/* Tanpa JS: semua panel tampil bertumpuk (semua konten terbaca). Dengan JS,
   root diberi .is-js dan hanya panel aktif yang tampil. */
.wz-ae-panel + .wz-ae-panel { margin-top: 64px; }
.wz-ae.is-js .wz-ae-panel { display: none; }
.wz-ae.is-js .wz-ae-panel.is-active { display: grid; }
.wz-ae.is-js .wz-ae-panel + .wz-ae-panel { margin-top: 0; }

/* ---------- Kolom teks -------------------------------------------------- */

.wz-ae-ptitle {
  color: var(--wz-ae-ink);
  font-family: var(--wz-ae-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
}
.wz-ae-pdesc {
  margin-top: 10px;
  color: var(--wz-ae-ink-soft);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.wz-ae-features { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }

.wz-ae-feature { display: flex; gap: 14px; align-items: flex-start; }

.wz-ae-ficon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--wz-ae-accent-tint);
  color: var(--wz-ae-accent);
}
.wz-ae-ficon svg { width: 21px; height: 21px; display: block; }

.wz-ae-feature h4 {
  color: var(--wz-ae-ink);
  font-family: var(--wz-ae-display);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
}
.wz-ae-feature p {
  margin-top: 3px;
  color: var(--wz-ae-ink-mute);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   Kolom visual — kerangka bersama.
   Tinggi dikunci sama untuk ketiga tab supaya pergantian otomatis tiap 7 detik
   tidak membuat layout melompat.
   ========================================================================== */

/* "Panggung" bertint untuk visual. Dua gunanya: elemen putih (HP, kartu)
   jadi menonjol di atas kartu putih, dan area visual punya batas jelas
   sehingga tidak terbaca sebagai ruang kosong.
   min-height dikunci ke viz tertinggi supaya pergantian tab otomatis tidak
   menggeser konten di bawahnya — nilainya sengaja pas-pasan agar sisa ruang
   matinya minim.

   454px, bukan 433px: HP terjangkung (sba) setinggi 421,4px setelah ruang
   bubble "mengetik" disiapkan, ditambah padding 2x16px. Dengan 433px, HP itu
   melar melewati panggungnya dan — karena panggung ini `place-items:center` —
   HP-nya ikut bergeser naik-turun tiap indikator menyala.

   Angka di sini dan pada min-height kotak chat di atas diukur di HALAMAN
   ASLI, bukan di berkas pratinjau: tipografi.css dan post-5060.css ikut
   menaikkan tinggi baris, dan selisihnya sampai 13px. */
.wz-ae-viz {
  position: relative;
  width: 100%;
  min-height: 454px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(158deg, #fff6fa 0%, #fdeef4 100%);
  display: grid;
  place-items: center;
}

/* ---------- Mockup WhatsApp (dipakai viz AFU & SBA) --------------------- */

.wz-ae-phone {
  width: var(--wz-ae-phone-w);
  border-radius: 26px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 30px 60px -28px rgba(23, 23, 23, .5), 0 0 0 1px rgba(23, 23, 23, .04);
}
.wz-ae-screen {
  border-radius: 20px;
  overflow: hidden;
  background: var(--wz-ae-wa-canvas);
}
.wz-ae-wahead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--wz-ae-wa-header);
  color: #fff;
}
.wz-ae-waav {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  font-family: var(--wz-ae-display);
}
.wz-ae-waname { display: flex; flex-direction: column; gap: 1px; }
.wz-ae-waname b { font-size: 13.5px; font-weight: 600; line-height: 1.1; font-family: var(--wz-ae-display); }
.wz-ae-waname span { font-size: 10.5px; opacity: .85; font-weight: 500; line-height: 1; }
.wz-ae-wameta { margin-left: auto; display: flex; gap: 14px; opacity: .9; }
.wz-ae-wameta svg { width: 16px; height: 16px; }

.wz-ae-wabody {
  position: relative;
  padding: 12px 11px 14px;
  min-height: 258px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Doodle latar WhatsApp yang sangat samar, murni CSS (titik-titik halus). */
  background-image: radial-gradient(rgba(0, 0, 0, .028) 1px, transparent 1.4px);
  background-size: 18px 18px;
}

/* Tinggi kotak chat dikunci ke keadaan TERTINGGI-nya, yaitu saat bubble
   "mengetik" tampil. Sebelumnya bubble itu `display:none` lalu masuk ke alur,
   jadi kotaknya tumbuh 19px (afu) dan 30px (sba) tiap kali indikator menyala,
   lalu menyusut lagi — dan pada sba dorongan itu tembus sampai ke tinggi
   section, jadi seluruh halaman ikut tersentak dua kali per siklus.

   Ruang sisa saat mengetik padam jatuh di BAWAH pesan terakhir, tempat yang
   memang wajar kosong di sebuah percakapan. Nilainya berbeda per viz karena
   isi percakapannya memang berbeda panjang. */
.wz-ae-viz[data-viz="afu"] .wz-ae-wabody { min-height: 280px; }
.wz-ae-viz[data-viz="sba"] .wz-ae-wabody { min-height: 354px; }

.wz-ae-date {
  align-self: center;
  padding: 4px 11px;
  border-radius: 8px;
  background: #fff;
  color: var(--wz-ae-wa-meta);
  font-size: 10.5px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .1);
}

.wz-ae-bub {
  position: relative;
  max-width: 86%;
  padding: 6px 8px 4px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #111b21;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .12);
}
.wz-ae-bub--in  { align-self: flex-start; background: var(--wz-ae-wa-in);  border-top-left-radius: 3px; }
.wz-ae-bub--out { align-self: flex-end;   background: var(--wz-ae-wa-out); border-top-right-radius: 3px; }
.wz-ae-bub .wz-ae-link { color: var(--wz-ae-wa-link); font-weight: 600; }
.wz-ae-bub b { font-weight: 700; }

.wz-ae-meta {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 9.5px;
  color: var(--wz-ae-wa-meta);
  line-height: 1;
}
.wz-ae-meta svg { width: 14px; height: 11px; vertical-align: -1px; margin-left: 3px; }

/* Indikator "sedang mengetik". */
.wz-ae-typing {
  align-self: flex-start;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 10px;
  border-top-left-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .12);
}
.wz-ae-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; }

/* Tag kecil di dalam bubble (mis. "Balasan otomatis"). */
/* `flex` + width fit-content, bukan inline-flex: tag harus menempati barisnya
   sendiri supaya teks di bawahnya tidak membelit di sisi kanan tag. */
.wz-ae-tag {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.wz-ae-tag svg { width: 12px; height: 12px; }
.wz-ae-tag--auto { background: var(--wz-ae-accent); color: #fff; }

/* ==========================================================================
   VIZ 1 — Auto Follow Up
   Rail hari → (konektor) → HP, dan Deteksi Pesan → (percabangan) → statistik.
   Konektor dibuat dari pseudo-element, bukan SVG absolut, supaya ikut melar
   mengikuti lebar kolom tanpa perlu koordinat tetap.
   ========================================================================== */

.wz-ae-afu {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wz-ae-phone-w);
  align-items: start;
  gap: var(--wz-ae-gap);
}

/* Batang pengumpul (trunk) di kanan rail hari, lalu satu garis masuk ke HP.
   Posisi horizontalnya: tepi kanan kolom kiri + setengah gap. */
.wz-ae-afu::after {
  content: "";
  position: absolute;
  top: 89px;
  left: calc(100% - var(--wz-ae-phone-w) - (var(--wz-ae-gap) / 2));
  width: calc(var(--wz-ae-gap) / 2);
  height: 2px;
  background: var(--wz-ae-line);
}

.wz-ae-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 22px;
}
/* Rail kiri (urutan hari). */
.wz-ae-flow::before {
  content: "";
  position: absolute;
  left: 5px; top: 26px; bottom: 26px;
  width: 2px;
  background: var(--wz-ae-line);
}
/* Trunk kanan yang mengumpulkan ketiga hari menuju HP. */
.wz-ae-flow::after {
  content: "";
  position: absolute;
  right: calc(var(--wz-ae-gap) / -2);
  top: 26px; bottom: 26px;
  width: 2px;
  background: var(--wz-ae-line);
}

.wz-ae-day {
  position: relative;
  padding: 10px 13px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  box-shadow: 0 8px 18px -14px rgba(23, 23, 23, .5);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Titik di rail kiri. */
.wz-ae-day::before {
  content: "";
  position: absolute;
  left: -19px; top: 20px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--wz-ae-line);
  transition: border-color .3s ease, background .3s ease;
}
/* Cabang pendek ke trunk kanan. */
.wz-ae-day::after {
  content: "";
  position: absolute;
  right: calc(var(--wz-ae-gap) / -2);
  top: 25px;
  width: calc(var(--wz-ae-gap) / 2);
  height: 2px;
  background: var(--wz-ae-line);
}

.wz-ae-day__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wz-ae-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
.wz-ae-day__tag svg { width: 13px; height: 13px; }
.wz-ae-day__txt {
  display: block;
  margin-top: 2px;
  color: var(--wz-ae-ink);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--wz-ae-display);
}
/* Keadaan "menyala" saat gilirannya di animasi. */
.wz-ae-day.is-lit {
  border-color: var(--wz-ae-accent);
  box-shadow: 0 12px 22px -12px rgba(196, 40, 92, .55);
}
.wz-ae-day.is-lit::before { background: var(--wz-ae-accent); border-color: var(--wz-ae-accent); }

/* ---------- Deteksi Pesan → percabangan → dua kartu statistik ----------- */

.wz-ae-detectwrap { margin-top: 18px; text-align: center; }

.wz-ae-detect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wz-ae-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(196, 40, 92, .6);
}
.wz-ae-detect svg { width: 13px; height: 13px; }

/* Percabangan berbentuk ⊓ : satu garis turun dari chip, lalu melebar ke
   titik tengah masing-masing kartu statistik (25% dan 75% lebar). */
.wz-ae-branch {
  position: relative;
  display: block;
  height: 18px;
}
.wz-ae-branch::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 9px;
  background: var(--wz-ae-line);
  transform: translateX(-50%);
}
/* Ujung braket harus jatuh tepat di TENGAH tiap kartu, bukan di 25%/75%
   lebar kolom: jarak antar-kartu (gap 12px) menggeser pusatnya 3px ke dalam.
   Karena itu dilebarkan setengah gap di kiri dan kanan. */
.wz-ae-branch::after {
  content: "";
  position: absolute;
  left: calc(25% - 3px); top: 8px;
  width: calc(50% + 6px); height: 10px;
  border: 2px solid var(--wz-ae-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.wz-ae-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
/* Putih, BUKAN tint: panggung visual sudah bertint rose, jadi kartu bertint
   akan melebur dan terlihat pudar. Putih membuatnya menonjol. */
.wz-ae-stat {
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  box-shadow: 0 8px 18px -14px rgba(23, 23, 23, .5);
}
.wz-ae-stat__top {
  display: flex; align-items: center; gap: 6px;
  color: var(--wz-ae-accent);
  font-size: 11px; font-weight: 700;
}
.wz-ae-stat__top svg { width: 14px; height: 14px; }
.wz-ae-num {
  display: block;
  margin-top: 5px;
  color: var(--wz-ae-accent-deep);
  font-size: 24px;
  font-weight: 700;
  font-family: var(--wz-ae-display);
  line-height: 1;
}

/* ==========================================================================
   VIZ 2 — Smart Bot Action
   Tiga kolom: chip trigger · HP · dua kartu KPI. Chip tidak lagi menimpa
   bubble chat, dan ruang kosong di kedua sisi terisi seimbang.
   ========================================================================== */

.wz-ae-sba {
  width: 100%;
  max-width: 580px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wz-ae-phone-w) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.wz-ae-side { display: flex; flex-direction: column; gap: 10px; }
.wz-ae-side--l { align-items: flex-end; }
.wz-ae-side--r { align-items: flex-start; }

.wz-ae-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  box-shadow: 0 14px 26px -18px rgba(23, 23, 23, .55);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Garis putus-putus pendek menuju HP. */
.wz-ae-trigger::after {
  content: "";
  position: absolute;
  right: -14px; top: 50%;
  width: 14px; height: 0;
  border-top: 2px dashed var(--wz-ae-line);
}
.wz-ae-trigger.is-lit {
  border-color: var(--wz-ae-accent);
  box-shadow: 0 16px 26px -16px rgba(196, 40, 92, .5);
}
.wz-ae-trigger.is-lit::after { border-color: var(--wz-ae-accent); }

.wz-ae-trigger__ic {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--wz-ae-accent-tint);
  color: var(--wz-ae-accent);
}
.wz-ae-trigger__ic svg { width: 15px; height: 15px; }
.wz-ae-trigger small { display: block; color: var(--wz-ae-ink-mute); font-size: 9.5px; font-weight: 600; line-height: 1; }
.wz-ae-trigger b {
  display: block; margin-top: 3px;
  color: var(--wz-ae-ink);
  font-size: 12px; font-weight: 700; line-height: 1;
  font-family: var(--wz-ae-display);
}

.wz-ae-kpi {
  display: block;
  padding: 10px 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  box-shadow: 0 8px 18px -14px rgba(23, 23, 23, .5);
  min-width: 106px;
}
.wz-ae-kpi b {
  display: block;
  color: var(--wz-ae-accent-deep);
  font-family: var(--wz-ae-display);
  font-size: 22px; font-weight: 700; line-height: 1;
}
.wz-ae-kpi b em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 2px; }
.wz-ae-kpi small {
  display: block; margin-top: 4px;
  color: var(--wz-ae-ink-mute);
  font-size: 10.5px; font-weight: 600; line-height: 1.2;
}

/* Kartu daftar harga mini di dalam bubble bot. */
.wz-ae-pricecard {
  display: block;
  margin-top: 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .035);
  border: 1px solid rgba(0, 0, 0, .06);
  overflow: hidden;
}
.wz-ae-pricerow {
  display: flex; justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px; font-weight: 600; color: #111b21;
}
.wz-ae-pricerow + .wz-ae-pricerow { border-top: 1px solid rgba(0, 0, 0, .06); }
.wz-ae-pricerow em { color: var(--wz-ae-accent); font-style: normal; font-weight: 700; }

/* ==========================================================================
   VIZ 3 — Daily Leads
   ========================================================================== */

.wz-ae-leads {
  width: 100%;
  max-width: 404px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--wz-ae-line);
  box-shadow: 0 30px 60px -30px rgba(23, 23, 23, .45);
  overflow: hidden;
}
.wz-ae-leads__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: linear-gradient(120deg, var(--wz-ae-accent) 0%, var(--wz-ae-accent-br) 100%);
  color: #fff;
}
.wz-ae-leads__ttl h4 { font-size: 14px; font-weight: 600; font-family: var(--wz-ae-display); line-height: 1.2; }
.wz-ae-leads__ttl small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; opacity: .85; }
.wz-ae-lcountwrap { margin-left: auto; text-align: right; }
.wz-ae-lcount { display: block; font-size: 27px; font-weight: 700; font-family: var(--wz-ae-display); line-height: 1; }
.wz-ae-lcountwrap span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; opacity: .9; }

/* Corong sumber leads: dua sumber ditumpuk, lalu panah, lalu Leads.
   Sebelumnya empat chip berjajar dalam satu baris dan terasa sesak. */
.wz-ae-funnel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--wz-ae-line-soft);
  background: var(--wz-ae-accent-tint);
}
.wz-ae-srcs { display: flex; flex-direction: column; gap: 6px; }
.wz-ae-src {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wz-ae-line);
  font-size: 11px; font-weight: 700; color: var(--wz-ae-ink-soft);
  white-space: nowrap;
}
.wz-ae-src svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--wz-ae-accent); }
.wz-ae-arrow { display: grid; place-items: center; color: var(--wz-ae-accent); }
.wz-ae-arrow svg { width: 18px; height: 18px; }
.wz-ae-src--leads {
  background: var(--wz-ae-accent);
  color: #fff;
  border-color: var(--wz-ae-accent);
  padding: 8px 14px;
  box-shadow: 0 8px 16px -8px rgba(196, 40, 92, .6);
}
.wz-ae-src--leads svg { color: #fff; }

.wz-ae-leadlist { padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.wz-ae-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--wz-ae-line-soft);
}
.wz-ae-lead__av {
  flex: 0 0 auto;
  width: 31px; height: 31px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 11.5px; font-weight: 700;
  font-family: var(--wz-ae-display);
}
.wz-ae-lead__av.c1 { background: #e2723e; }
.wz-ae-lead__av.c2 { background: #3e8ee2; }
.wz-ae-lead__av.c3 { background: #7a54c8; }
.wz-ae-lead__av.c4 { background: #2fae74; }
.wz-ae-lead__av.c5 { background: #d8477e; }
.wz-ae-lead__main { min-width: 0; flex: 1 1 auto; }
.wz-ae-lead__name { display: block; color: var(--wz-ae-ink); font-size: 13px; font-weight: 700; font-family: var(--wz-ae-display); line-height: 1.2; }
.wz-ae-lead__sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.wz-ae-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700;
  white-space: nowrap;
}
.wz-ae-badge svg { flex: 0 0 auto; width: 10px; height: 10px; }
.wz-ae-badge--chat { background: #e8f7ee; color: #1f9d57; }
.wz-ae-badge--bc   { background: var(--wz-ae-accent-tint); color: var(--wz-ae-accent); }
.wz-ae-lead__time { font-size: 10px; color: var(--wz-ae-ink-mute); font-weight: 600; white-space: nowrap; }
.wz-ae-lead__status {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  color: #1f9d57; font-size: 10.5px; font-weight: 700;
}
.wz-ae-lead__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--wz-ae-green); }

/* ==========================================================================
   ANIMASI — dipicu JS lewat kelas .wz-ae-anim (arm) + .is-play (main).
   Tanpa JS, tidak ada kelas ini → semua elemen tampil dalam keadaan akhir.
   Tiap elemen membawa jeda mainnya sendiri lewat inline `--d`.
   ========================================================================== */

.wz-ae-anim .wz-ae-phone,
.wz-ae-anim .wz-ae-leads      { opacity: 0; transform: translateY(18px); }
.wz-ae-anim .wz-ae-bub,
.wz-ae-anim .wz-ae-date       { opacity: 0; transform: translateY(8px) scale(.98); }
.wz-ae-anim .wz-ae-day        { opacity: 0; transform: translateX(-12px); }
.wz-ae-anim .wz-ae-detect,
.wz-ae-anim .wz-ae-stat,
.wz-ae-anim .wz-ae-kpi        { opacity: 0; transform: translateY(10px); }
.wz-ae-anim .wz-ae-trigger    { opacity: 0; transform: translateX(-14px); }
.wz-ae-anim .wz-ae-lead       { opacity: 0; transform: translateY(10px); }

.wz-ae-viz.is-play .wz-ae-phone,
.wz-ae-viz.is-play .wz-ae-leads   { animation: wz-ae-rise   .55s cubic-bezier(.22,.9,.3,1) var(--d, 0s) forwards; }
.wz-ae-viz.is-play .wz-ae-date,
.wz-ae-viz.is-play .wz-ae-bub,
.wz-ae-viz.is-play .wz-ae-detect,
.wz-ae-viz.is-play .wz-ae-stat,
.wz-ae-viz.is-play .wz-ae-kpi,
.wz-ae-viz.is-play .wz-ae-lead    { animation: wz-ae-pop    .45s cubic-bezier(.22,.9,.3,1) var(--d, 0s) forwards; }
.wz-ae-viz.is-play .wz-ae-day,
.wz-ae-viz.is-play .wz-ae-trigger { animation: wz-ae-slidex .5s  cubic-bezier(.22,.9,.3,1) var(--d, 0s) forwards; }

/* Indikator mengetik hanya tampil pada fase yang diatur JS. */
.wz-ae-viz.is-typing .wz-ae-typing { display: inline-flex; }
.wz-ae-viz.is-typing .wz-ae-typing i { animation: wz-ae-dot 1s ease-in-out infinite; }
.wz-ae-typing i:nth-child(2) { animation-delay: .15s; }
.wz-ae-typing i:nth-child(3) { animation-delay: .3s; }

@keyframes wz-ae-rise   { to { opacity: 1; transform: none; } }
@keyframes wz-ae-slidex { to { opacity: 1; transform: none; } }
@keyframes wz-ae-pop {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes wz-ae-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* -- Pengaman gerak minimal --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wz-ae-anim .wz-ae-phone,
  .wz-ae-anim .wz-ae-leads,
  .wz-ae-anim .wz-ae-bub,
  .wz-ae-anim .wz-ae-date,
  .wz-ae-anim .wz-ae-day,
  .wz-ae-anim .wz-ae-detect,
  .wz-ae-anim .wz-ae-stat,
  .wz-ae-anim .wz-ae-kpi,
  .wz-ae-anim .wz-ae-trigger,
  .wz-ae-anim .wz-ae-lead { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wz-ae-viz .wz-ae-typing { display: none !important; }
  .wz-ae-tabs.is-auto .wz-ae-tab.is-active::after { display: none; }
}

/* ==========================================================================
   Responsif
   ========================================================================== */

@media (max-width: 1024px) {
  .wz-ae-panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Menumpuk: kembali ke urutan DOM — teks dulu, baru visual. */
  .wz-ae-viz, .wz-ae-copy { order: initial; }
  .wz-ae-copy { max-width: 560px; }
  .wz-ae-viz { min-height: 0; }

  /* Padding kembali ke 56px. Di lebar ini min-height panggung dilepas,
     jadi tambahan 18px yang di desktop dipakai menampung bubble "mengetik"
     tidak pernah terjadi — dan pemotongan padding yang mengimbanginya jadi
     tidak ada alasannya. */
  .wz-ae { padding: 56px 0; }
  .wz-ae-afu, .wz-ae-sba { margin: 0 auto; }
}

@media (max-width: 767px) {
  .wz-ae-head { margin-bottom: 26px; }
  .wz-ae-title { font-size: 28px; line-height: 1.32; }
  .wz-ae-sub { font-size: 16px; }
  .wz-ae-tabs { display: flex; width: 100%; gap: 4px; }
  /* Label dibiarkan turun ke baris kedua. Kalau dipaksa satu baris, "Smart Bot
     Action" (103px) tidak muat di kolom 93px dan terpotong overflow:hidden. */
  .wz-ae-tab {
    flex: 1 1 0;
    padding: 9px 6px;
    font-size: 13px;
    line-height: 1.22;
    white-space: normal;
    display: grid;
    place-items: center;
    min-height: 42px;
  }
  .wz-ae-ptitle { font-size: 24px; }
  .wz-ae-pdesc { font-size: 15.5px; }
  /* Kolom teks menyempit jadi ~235px di sini. Menurunkan judul fitur sedikit
     membuat SEMUA judul tetap satu baris tanpa perlu memangkas maknanya. */
  .wz-ae-feature h4 { font-size: 16px; }

  /* Satu kolom: rail hari di atas, HP di bawah. Konektor horizontal
     dimatikan karena sudah tidak ada kolom di sebelahnya. */
  .wz-ae-afu { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 420px; }
  .wz-ae-afu::after,
  .wz-ae-flow::after,
  .wz-ae-day::after { display: none; }
  .wz-ae-afu .wz-ae-phone { justify-self: center; }

  /* SBA: HP di tengah, chip pendukung jadi satu baris di bawahnya. */
  .wz-ae-sba { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; max-width: 420px; }
  .wz-ae-side { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .wz-ae-side--l, .wz-ae-side--r { align-items: center; }
  .wz-ae-side--l { order: -1; }
  .wz-ae-trigger::after { display: none; }

  .wz-ae-phone { width: 260px; }
}

@media (max-width: 400px) {
  .wz-ae-inner { padding: 0 15px; }
  .wz-ae-tab { font-size: 12px; padding: 8px 4px; }
  .wz-ae-funnel { gap: 9px; padding: 12px 12px; }
  .wz-ae-stats { gap: 9px; }
}