/* ==========================================================================
   Testimoni (.wz-ts) — satu-satunya section di halaman testimoni.html

   Menggantikan halaman Elementor watzap.id/testimoni, yang menumpuk dua
   carousel slick + jQuery + pemutar Wistia yang dimuat di setiap kunjungan.
   Di sini video-nya jadi FASAD: yang terkirim cuma poster AVIF (19 berkas,
   436 KB seluruhnya), dan pemutar Wistia baru disisipkan saat kartunya
   ditekan. Sampai saat itu halaman ini tidak menyentuh fast.wistia.net
   sama sekali.

   Dua rail, bukan satu, karena sumbernya memang dua bentuk video: sembilan
   16:9 dan sepuluh 9:16. Rail tidak diberi sub-judul terlihat — "wawancara
   panjang" / "cerita singkat" adalah klaim yang tidak bisa diverifikasi
   tanpa menonton 26 menit rekaman, dan kaidah §1 prinsip 6 melarangnya.
   Namanya hidup di aria-label supaya pembaca layar tetap bisa membedakan.

   Rail memakai scroll-snap, BUKAN slick: tanpa JS ia masih bisa digulir
   jari dan trackpad. Panah kiri/kanan disuntik JS sebagai peningkatan,
   jadi kalau skripnya gagal muat yang hilang cuma panahnya.

   Gaya: berkas ini · Skrip: assets/js/testimoni.js
   ========================================================================== */

.wz-ts {
  /* Lebar kartu ditulis fluid, bukan bertingkat per breakpoint. Alasannya
     dari audit tablet: setiap ambang yang ditambahkan adalah satu tempat
     lagi di mana pita 768–1024px mewarisi aturan yang alasannya lebar
     ponsel. clamp() tidak punya ambang, jadi tidak ada yang bisa diwarisi.

     Batas atas 372px: di wadah 1140px muat tiga kartu lanskap + sepotong
     kartu keempat, dan potongan itulah yang memberi tahu bahwa rail-nya
     bisa digulir. Batas bawah 252px menahan poster tetap terbaca di 320px.
     76vw di 375px = 285px — menyisakan intip 70px. */
  --wz-ts-w-wide: clamp(252px, 76vw, 372px);
  --wz-ts-w-tall: clamp(168px, 44vw, 224px);

  --wz-ts-gap: 18px;

  /* Sama persis dengan padding mendatar .wz-ts-inner. Rail ditarik keluar
     sejauh ini lalu diberi padding sebesar ini kembali, sehingga kartu
     pertama sejajar dengan judul sementara kartu terakhir tetap bisa
     digulir sampai tepi wadah. Kalau kedua angka ini berbeda, kartu
     pertama tidak lagi sejajar dengan judul. */
  --wz-ts-bleed: 20px;

  --wz-ts-radius: 14px;

  position: relative;

  /* Ritme baku. Ruang untuk bar melayang TIDAK dibayar di sini — sama seperti
     .wz-rv dan .wz-lg, ongkosnya ditanggung `body .wz-ts` di nav-revamp.css
     supaya semua yang bergantung pada tinggi bar tinggal di berkas bar-nya. */
  padding: var(--wz-sec-y) 0;

  background: var(--wz-wash);
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

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

/* :where() punya kekhususan nol, jadi margin di kelas .wz-ts-* di bawah
   tetap menang atas reset ini. */
.wz-ts :where(p, h1, h2, h3, ul, li) { margin: 0; padding: 0; list-style: none; }

.wz-ts-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--wz-ts-bleed);
}

/* ---------- Rail -------------------------------------------------------- */

/* Pembungkus memegang posisi panah. Tinggi poster ditulis sebagai token di
   varian rail-nya (bawah) supaya panah bisa dipusatkan tepat di tengah
   poster — bukan di tengah kartu, yang ikut menghitung nama dan bidang
   usaha di bawahnya dan membuat panah duduk terlalu rendah. */
.wz-ts-rail {
  position: relative;
  margin-top: 26px;
}

.wz-ts-rail:first-of-type { margin-top: 0; }

.wz-ts-rail--wide { --wz-ts-poster-h: calc(var(--wz-ts-w-wide) * 9 / 16); }
.wz-ts-rail--tall { --wz-ts-poster-h: calc(var(--wz-ts-w-tall) * 16 / 9); }

.wz-ts-rail__track {
  display: flex;
  gap: var(--wz-ts-gap);

  overflow-x: auto;
  overflow-y: hidden;

  /* proximity, bukan mandatory: kartu lanskap dan potret beda lebar jauh,
     dan mandatory pada rail selebar itu menarik balik gulir yang disengaja
     pengguna. proximity cuma merapikan kalau berhentinya sudah dekat. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;

  /* Ditarik keluar wadah lalu dibayar kembali dengan padding — lihat
     komentar --wz-ts-bleed. scroll-padding menjaga kartu yang di-snap
     berhenti sejajar padding, bukan menempel tepi. */
  margin-inline: calc(var(--wz-ts-bleed) * -1);
  padding-inline: var(--wz-ts-bleed);
  scroll-padding-inline: var(--wz-ts-bleed);

  /* Ruang untuk bayangan kartu saat hover; tanpa ini bayangannya terpotong
     oleh overflow milik rail. */
  padding-block: 4px 10px;

  scrollbar-width: thin;
  scrollbar-color: var(--wz-line-warm) transparent;
}

.wz-ts-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.wz-ts-rail--wide .wz-ts-card { width: var(--wz-ts-w-wide); }
.wz-ts-rail--tall .wz-ts-card { width: var(--wz-ts-w-tall); }

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

/* Seluruh poster adalah tautannya, jadi sasaran sentuhnya sebesar poster —
   jauh di atas 44x44px. Lencana putar di tengah cuma penanda, bukan sasaran
   terpisah. */
.wz-ts-card__link {
  position: relative;
  display: block;
  border-radius: var(--wz-ts-radius);
  overflow: hidden;
  background: var(--wz-line-warm-soft);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.wz-ts-card__poster {
  display: block;
  width: 100%;
  height: auto;
}

.wz-ts-rail--wide .wz-ts-card__poster { aspect-ratio: 16 / 9; }
.wz-ts-rail--tall .wz-ts-card__poster { aspect-ratio: 9 / 16; }

.wz-ts-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(23, 23, 23, .16);
}

.wz-ts-card__link:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 3px;
}

/* Kabut gelap di sepertiga bawah poster. Bukan hiasan: tanpa ini segitiga
   putih di lencana putar bisa mendarat di atas kemeja putih narasumber. */
.wz-ts-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 8, 10, .28) 100%);
  pointer-events: none;
}

.wz-ts-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;

  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* --wz-btn-bg, bukan --wz-brand: segitiga putih di atasnya mencapai
     5,47:1, sementara di atas --wz-brand cuma 4,50:1. Ikon butuh >=3:1,
     jadi keduanya lolos — yang dipakai tetap yang sama dengan tombol di
     seluruh halaman, supaya merah jambu pekat cuma punya satu nilai. */
  background: var(--wz-btn-bg);
  box-shadow: 0 4px 14px rgba(23, 23, 23, .28);
  transition: transform .18s ease, background .18s ease;
}

.wz-ts-card__play svg {
  width: 20px;
  height: 20px;
  /* Segitiga play secara optis berat di kiri; 2px ke kanan memusatkannya. */
  margin-left: 2px;
  fill: #fff;
}

.wz-ts-card__link:hover .wz-ts-card__play {
  background: var(--wz-btn-bg-hover);
  transform: translate(-50%, -50%) scale(1.06);
}

.wz-ts-card__name {
  margin-top: 12px;
  font-family: var(--wz-ui-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wz-ink);
}

.wz-ts-card__field {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  /* --wz-ink-soft, bukan --wz-ink-mute. Di atas puncak --wz-wash (#fdeef4)
     --wz-ink-mute turun ke 4,54:1 — lolos AA, tapi cuma 0,04 di atas
     ambang, dan teks ini 14px. --wz-ink-soft mencapai 6,15:1 di latar yang
     sama. Dihitung, bukan dikira. */
  color: var(--wz-ink-soft);
}

/* ---------- Panah rail -------------------------------------------------- */

/* Disuntik oleh testimoni.js, jadi tidak pernah muncul sebagai tombol mati
   kalau skripnya gagal muat. Digulir jari dan trackpad tetap jalan tanpa
   berkas ini. */
.wz-ts-nav {
  position: absolute;
  top: calc(var(--wz-ts-poster-h) / 2 + 4px);
  transform: translateY(-50%);
  z-index: 2;

  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wz-line);
  border-radius: 50%;
  background: #fff;
  color: var(--wz-ink);
  box-shadow: 0 4px 14px rgba(23, 23, 23, .14);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}

.wz-ts-nav svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.wz-ts-nav--prev { left: calc(var(--wz-ts-bleed) * -1 + 2px); }
.wz-ts-nav--next { right: calc(var(--wz-ts-bleed) * -1 + 2px); }

.wz-ts-nav:hover { background: var(--wz-tint); }

.wz-ts-nav:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 3px;
}

/* Ujung rail. Disembunyikan penuh, bukan diredupkan: tombol yang terlihat
   tapi tidak melakukan apa-apa lebih membingungkan daripada tombol yang
   pergi, dan `hidden` sekaligus mengeluarkannya dari urutan Tab. */
.wz-ts-nav[hidden] { display: none; }

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

.wz-ts .wz-cta2 { margin-top: 38px; }

/* ---------- Reveal ------------------------------------------------------
   .wz-ts-js dipasang dari JS, jadi tanpa skrip tidak ada satu pun blok
   yang tersembunyi. Lihat kaidah §6.
   ----------------------------------------------------------------------- */

.wz-ts-js .wz-ts-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--d, 0s);
}

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

/* ---------- Tablet ------------------------------------------------------
   Kosong dengan sengaja. Lebar kartu memakai clamp() dan tidak punya
   ambang, jadi pita 768–1024px tidak mewarisi apa pun yang alasannya
   lebar ponsel. Kalau nanti ada perbaikan yang benar-benar khusus tablet,
   tulis rentangnya terkunci dua sisi:
   @media (min-width: 768px) and (max-width: 1024px) — lihat kaidah §5.
   ----------------------------------------------------------------------- */

/* ---------- Ponsel ------------------------------------------------------ */

@media (max-width: 767px) {
  .wz-ts { --wz-ts-gap: 14px; }

  .wz-ts-rail { margin-top: 20px; }

  /* Panah dilepas: di layar sentuh gulir jari sudah jadi cara utama, dan
     dua lingkaran 44px di tepi rail memakan poster yang sudah sempit. */
  .wz-ts-nav { display: none; }

  .wz-ts-card__play { width: 48px; height: 48px; }
  .wz-ts-card__play svg { width: 17px; height: 17px; }

  .wz-ts-card__name { margin-top: 10px; font-size: 15px; }
  .wz-ts-card__field { font-size: 13px; }

  .wz-ts .wz-cta2 { margin-top: 30px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .wz-ts-js .wz-ts-rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wz-ts-rail__track { scroll-behavior: auto; }

  .wz-ts-card__link,
  .wz-ts-card__play,
  .wz-ts-nav { transition: none; }

  .wz-ts-card__link:hover { transform: none; }
  .wz-ts-card__link:hover .wz-ts-card__play { transform: translate(-50%, -50%); }
}