/* ==========================================================================
   Section "CRM & Team Inbox"
   Semua kelas diawali .wzb- supaya tidak bentrok dengan Elementor.

   Empat hal yang jadi alasan section ini ada:
   1. Ada CTA — di bawah frame dan sebagai end-card setelah step terakhir.
   2. Jalan di mobile: frame di-crop jadi potret, "kamera" ikut ke elemen aktif.
   3. Caption keluar dari kanvas jadi rail, tidak lagi menimpa objeknya.
   4. Caption berbahasa Indonesia, berbasis hasil, dan setia pada animasinya.
   ========================================================================== */

.wzb {
  --wzb-ink: #171717;
  --wzb-ink-soft: #5a5a5a;
  --wzb-ink-mute: #8a8a8a;
  --wzb-accent: #c42a5e;
  --wzb-accent-bright: #da336b;
  --wzb-emerald: #059669;
  --wzb-emerald-soft: #10b981;
  --wzb-line: #e6e8ec;
  --wzb-display: "Hind", system-ui, sans-serif;
  --wzb-body: "Quicksand", system-ui, sans-serif;

  position: relative;
  padding: 64px 0 72px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7f6 100%);
  font-family: var(--wzb-body);
  color: var(--wzb-ink);
}

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

/* :where() berkekhususan nol, jadi margin kelas .wzb-* di bawah tetap menang. */
.wzb :where(p, h2, h3, ol, li) { margin: 0; padding: 0; }
.wzb :where(ol) { list-style: none; }

.wzb-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

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

.wzb-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.wzb-title {
  font-family: var(--wzb-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Bentuk pill-nya datang dari wz-ui.css; di sini hanya penempatannya. */
.wzb-pill { align-self: center; }

.wzb-sub {
  margin-top: 10px !important;
  color: var(--wzb-ink-soft);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.55;
  text-wrap: balance;
}

.wzb-title em {
  font-style: normal;
  color: var(--wzb-accent-bright);
}

/* ---------- Panggung demo ------------------------------------------------ */

.wzb-stage {
  position: relative;
  /* 1060, bukan 1200: komponen men-scale dirinya ke 0,88 sehingga tingginya
     turun dari 750px ke 662px — teks dashboard masih ~11,5px, tetap terbaca. */
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 14px 36px rgba(5, 150, 105, 0.10);
}

/* Jendela kliping. Di desktop lebarnya penuh; di mobile dia meng-crop
   dashboard yang jauh lebih lebar (lihat blok media di bawah). */
.wzb-window {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wzb-pan {
  position: relative;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzb-stage watzap-hero-tour {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f8fafc;
}

/* Callout bawaan komponen dimatikan — captionnya pindah ke rail di bawah
   frame supaya tidak lagi menutupi elemen yang sedang dijelaskan. */
.wzb-stage .hp-callout { display: none !important; }

/* ---------- Sorotan panel aktif (khusus mode kamera) ---------------------

   Di desktop seluruh dashboard terlihat sekaligus, jadi hierarki datang dari
   layout-nya sendiri. Di bingkai 375px tidak: yang muat cuma potongan, dan
   potongan itu hampir selalu memuat pinggiran panel tetangga — sliver gelembung
   chat, separuh tombol Send, deretan foto produk. Semuanya sama terangnya
   dengan panel yang sedang dijelaskan, jadi tidak ada yang menuntun mata.

   Elemen ini ditaruh JS persis di atas wadah yang sedang jadi pokok bahasan,
   lalu box-shadow bentang 9999px meredupkan seluruh sisanya. Bayangannya
   terpotong .wzb-window yang overflow:hidden, jadi tidak bocor ke halaman.
   ------------------------------------------------------------------------ */

.wzb-spot {
  position: absolute;
  z-index: 30;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  /* 0,42 — cukup untuk memisahkan pokok bahasan dari latar, masih tipis untuk
     membiarkan sekelilingnya terbaca. Yang disorot sering cuma tombol kecil,
     jadi meredupkan lebih pekat dari ini membuat bingkainya terasa gelap. */
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.42);
  /* 0,3s, bukan 0,65s seperti kamera: sorotan ini juga dipakai untuk mengoreksi
     pergeseran panel yang menggulir di dalam dashboard, dan transisi panjang
     membuat koreksi itu terlihat tertinggal. */
  transition: opacity 0.4s ease, left 0.3s ease, top 0.3s ease,
    width 0.3s ease, height 0.3s ease;
}

/* Hanya menyala di mode kamera, dan hanya kalau JS menemukan wadah yang layak
   disorot. Di luar itu elemennya tidak berdampak apa-apa. */
.wzb-spot.is-on { opacity: 1; }

@media (min-width: 1025px) {
  .wzb-spot { display: none; }
}

/* ---------- End-card: CTA yang muncul setelah step terakhir -------------- */

.wzb-endcard {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  /* Bingkainya cuma 424px di HP. Kalau kartunya sampai lebih tinggi, "center"
     biasa memotong dua ujungnya sekaligus dan tombol paling bawah jadi tidak
     terjangkau; "safe center" menjatuhkannya ke awal sumbu supaya isinya tetap
     bisa di-scroll. Browser yang belum mengenalnya mengabaikan baris ini dan
     tetap memakai center di atas. */
  align-items: safe center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  /* Scrim sengaja tidak pekat: demo terus berputar di baliknya, dan gerakan
     yang masih terlihat memberi tahu kalau ini bukan layar beku. */
  background: linear-gradient(180deg, rgba(8, 24, 20, 0.5), rgba(8, 24, 20, 0.72));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.wzb-endcard.is-open {
  opacity: 1;
  visibility: visible;
}

.wzb-endcard-card {
  width: min(460px, 100%);
  padding: 30px 28px 26px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 64px rgba(8, 24, 20, 0.4);
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzb-endcard.is-open .wzb-endcard-card {
  transform: translateY(0) scale(1);
}

.wzb-endcard-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: var(--wzb-emerald);
  font-size: 22px;
}

.wzb-endcard-title {
  font-family: var(--wzb-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.wzb-endcard-desc {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
  color: var(--wzb-ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.wzb-endcard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wzb-replay {
  margin-top: 4px;
  /* 44px: ini satu-satunya kontrol di dalam end-card yang bukan tombol utama,
     dan di layar sentuh padding 8px menyisakan area tekan 36px — di bawah
     ambang yang nyaman dijangkau jempol. */
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--wzb-ink-mute);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wzb-replay:hover { color: var(--wzb-ink); }

/* ---------- Caption ------------------------------------------------------

   Hanya langkah aktif yang tampil, di semua lebar layar. Versi sebelumnya
   memajang keenam langkah sebagai kartu berbingkai; nilai scan-nya kalah
   dibanding padatnya — enam kotak plus deskripsi bersaing dengan demo yang
   justru jadi isi utama section ini. Urutan langkah tetap terbaca lewat titik
   di atas caption.
   ------------------------------------------------------------------------ */

.wzb-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 32px;
}

.wzb-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.14);
  transition: background 0.35s ease, width 0.35s ease;
}

.wzb-dot.is-done { background: rgba(16, 185, 129, 0.4); }

.wzb-dot.is-active {
  width: 22px;
  background: var(--wzb-emerald-soft);
}

/* Keenam caption ditumpuk di sel grid yang sama, bukan display:none/block.
   Kalau ditukar lewat display, tinggi rail ikut isi caption — caption 1
   membungkus tiga baris, sisanya dua — dan seluruh CTA di bawahnya melompat
   21px tiap 4,5 detik. Di layar sentuh itu terbaca seperti halaman yang
   bergeser sendiri di bawah jempol. Dengan grid, tingginya dikunci caption
   terpanjang dan tidak ada lagi yang bergerak. */
.wzb-rail {
  display: grid;
  max-width: 560px;
  margin: 16px auto 0;
  text-align: center;
}

.wzb-step {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wzb-step.is-active {
  visibility: visible;
  opacity: 1;
}

.wzb-step-num { display: none; }

.wzb-step-title {
  font-family: var(--wzb-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.wzb-step-desc {
  margin-top: 6px !important;
  color: var(--wzb-ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: balance;
}

.wzb-step-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--wzb-emerald);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* Bar progres per langkah dilepas — titik di atas sudah menunjukkan posisi,
   dan satu elemen bergerak lagi hanya menambah keramaian. Markup-nya
   dibiarkan supaya JS tidak perlu tahu soal ini. */
.wzb-progress { display: none; }

/* ---------- CTA bawah ---------------------------------------------------- */

.wzb-cta {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
}

.wzb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.wzb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--wzb-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, background 0.2s ease;
}

.wzb-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wzb-btn--primary {
  border: 0;
  background: linear-gradient(135deg, var(--wzb-accent-bright), var(--wzb-accent));
  color: #fff;
  box-shadow: 0 10px 24px rgba(196, 42, 94, 0.32);
}

.wzb-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(196, 42, 94, 0.38);
  color: #fff;
}

.wzb-btn--ghost {
  border: 1.5px solid rgba(23, 23, 23, 0.16);
  background: #fff;
  color: var(--wzb-ink);
}

.wzb-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 23, 23, 0.3);
  color: var(--wzb-ink);
}

/* CTA sekunder di halaman dibuat setenang tautan: dua tombol setara bikin
   baris CTA ikut terasa ramai, sementara di end-card keduanya tetap tombol
   penuh karena di sana memang tidak ada isi lain yang bersaing. */
.wzb-btn--quiet {
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--wzb-ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.wzb-btn--quiet:hover {
  color: var(--wzb-emerald);
  transform: none;
}

.wzb-btn--quiet svg { width: 16px; height: 16px; }


.wzb-trust {
  margin-top: 10px !important;
  color: var(--wzb-ink-mute);
  font-size: 12.5px;
  line-height: 1.5;
  text-wrap: balance;
}

.wzb-trust b {
  color: var(--wzb-ink-soft);
  font-weight: 700;
}

/* ==========================================================================
   Mode mobile / tablet — demonya tetap hidup di layar sempit, bukan diganti
   screenshot desktop statis.

   Trik: host <watzap-hero-tour> dibuat lebar tetap 1040px supaya komponen
   men-scale dirinya ke 0,867 (skalanya = lebar host / 1200, lihat bundle),
   jadi teksnya tetap terbaca. .wzb-window lalu meng-crop-nya jadi potret dan
   JS menggeser .wzb-pan mengikuti elemen yang sedang disorot.
   ========================================================================== */

@media (max-width: 1024px) {
  .wzb { padding: 40px 0 46px; }

  .wzb-window {
    height: 430px;
    border-radius: 18px;
  }

  /* 1040px → komponen men-scale dirinya ke 0,867 (skala = lebar host / 1200).
     Dipilih setinggi mungkin selama masih menyisakan bingkai yang cukup lebar:
     sidebar dan panel pelanggan hanya selebar 320px pada koordinat dashboard,
     jadi keduanya selalu muat utuh; yang tidak pernah muat cuma kolom
     percakapan (560px), dan pada skala ini potongannya tinggal ~90px. */
  .wzb-pan {
    position: absolute;
    top: 0;
    left: 0;
    width: 1040px;
    height: 650px;
  }

  .wzb-stage watzap-hero-tour {
    width: 1040px;
    height: 650px;
    aspect-ratio: auto;
  }

  /* Tepi kiri-kanan diberi gradasi supaya jelas kalau ini bingkai yang
     bergeser, bukan layout yang terpotong karena bug. */
  .wzb-window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(248, 250, 252, 0.9) 0,
      rgba(248, 250, 252, 0) 26px,
      rgba(248, 250, 252, 0) calc(100% - 26px),
      rgba(248, 250, 252, 0.9) 100%
    );
  }

  /* Beat 0 menampilkan kartu pembuka komponen: tingginya ~390px di bingkai
     424px, dan scrim di belakangnya cuma rgba(15,23,42,.1) dengan blur 0,5px
     — praktis bening. Sisa ~17px di atas dan di bawah kartu jadi memamerkan
     potongan baris dashboard yang terbaca utuh, dan itu terlihat seperti
     salah potong, bukan bingkai yang sedang bergeser. Ditutup gradasi tipis,
     senapas dengan gradasi tepi kiri-kanan. Hanya di beat 0 — begitu tour
     jalan, isi dashboard justru yang mau dilihat. */
  .wzb[data-beat="0"] .wzb-window::after {
    background:
      linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.96) 0,
        rgba(248, 250, 252, 0) 22px,
        rgba(248, 250, 252, 0) calc(100% - 22px),
        rgba(248, 250, 252, 0.96) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248, 250, 252, 0.9) 0,
        rgba(248, 250, 252, 0) 26px,
        rgba(248, 250, 252, 0) calc(100% - 26px),
        rgba(248, 250, 252, 0.9) 100%
      );
  }

  .wzb-dots { margin-top: 20px; }
  .wzb-rail { margin-top: 12px; }
  .wzb-step-title { font-size: 16.5px; }
  .wzb-step-desc { font-size: 13.5px; }

  .wzb-cta-actions { flex-direction: column; }
  .wzb-btn { width: 100%; }
}

@media (max-width: 600px) {
  /* Full-bleed: 40px padding halaman itu ~46px koordinat dashboard, cukup
     berarti ketika bingkainya memang kurang lebar. */
  .wzb-stage {
    margin-inline: -20px;
    border-radius: 0;
  }

  .wzb-window {
    height: 424px;
    border-radius: 0;
  }

  /* Bingkai di sini cuma 424px, sementara end-card versi desktop berdiri
     415px — praktis mepet tanpa sisa, dan cukup satu baris deskripsi
     membungkus lebih panjang untuk membuatnya terpotong. Semua jarak
     vertikalnya dirapatkan sehingga kartunya berhenti di sekitar 350px dan
     punya ruang napas. */
  .wzb-endcard { padding: 14px; }
  .wzb-endcard-card { padding: 22px 18px 18px; }

  .wzb-endcard-check {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }

  .wzb-endcard-check svg {
    width: 18px;
    height: 18px;
  }

  .wzb-endcard-title { font-size: 19px; }

  .wzb-endcard-desc {
    margin-top: 6px !important;
    margin-bottom: 14px !important;
    font-size: 13.5px;
  }

  .wzb-endcard-actions { gap: 8px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .wzb-pan,
  .wzb-step,
  .wzb-endcard,
  .wzb-endcard-card,
  .wzb-btn {
    transition-duration: 0.01ms !important;
  }

  /* Caption hidup di luar kanvas, jadi penjelasan langkah aktif tetap terbaca
     tanpa gerakan apa pun. Pergantiannya dibuat seketika — hanya yang aktif,
     karena membuka keenamnya justru mengembalikan kepadatan yang baru saja
     dilepas. */
  .wzb-step { transition: none !important; }
}