/* ==========================================================================
   Section F.A.Q (.wz5-) — rombakan ketiga

   Menggantikan section FAQ lama (elementor-element-9da4e0a), yang sudah
   dicabut bersama footer lamanya.

   Rombakan kedua ditolak karena "terasa AI banget". Itu penilaian yang
   tepat, dan penyebabnya bisa disebut satu per satu — semuanya bawaan
   template, bukan keputusan yang lahir dari isi halaman ini:

     - tumpukan kartu putih seragam, masing-masing beradius besar dengan
       bayangan lembut yang sama persis;
     - keping nomor 01-06 di tiap baris, padahal tidak ada satu pun alasan
       pertanyaan-pertanyaan ini harus bernomor;
     - tombol bulat +/- di ujung kanan tiap kartu;
     - palang ajakan bergradien merah jambu-ungu di bawah daftar, lengkap
       dengan keping ikon, judul tebal, dan tombol pil;
     - noda gradien merah jambu di latar section.

   Yang tersisa sekarang cuma tipografi dan garis:

   1. TIDAK ADA KARTU. Enam pertanyaan dipisah garis rambut 1px, seperti
      daftar isi. Latarnya putih polos — tidak ada bayangan, radius, atau
      noda gradien sama sekali. Yang menahan mata adalah ritme jarak dan
      besar hurufnya, bukan kotak.

   2. TIDAK ADA NOMOR. Nomor berguna kalau urutannya berarti — langkah,
      peringkat, rujukan silang. Di sini tidak satu pun berlaku.

   3. KEADAAN TERBUKA DINYATAKAN DUA HAL SAJA, dan keduanya sudah bekerja
      di halaman ini: pertanyaannya berubah jadi rose merek, dan garis
      rambut di atasnya ikut jadi rose. Tanda silang di kanan cuma
      tanda plus yang diputar 45 derajat — satu bentuk, bukan dua ikon.

   4. AJAKANNYA SATU KALIMAT. "Masih ada yang mau ditanyakan?" dengan
      tautan biasa, bukan panel bergradien. Kalau pertanyaannya sudah
      terjawab, kalimat itu tidak perlu berteriak.

   Enam tanya-jawabnya tetap disalin apa adanya dari section lama.
   Tetap jalan tanpa JavaScript: tiap butir <details>/<summary> asli.
   ========================================================================== */

.wz5 {
  --wz5-ink: #16151a;
  --wz5-ink-soft: #56525c;
  --wz5-line: #e7e4ea;
  --wz5-k: #c42a5e;
  --wz5-display: "Hind", "Quicksand", system-ui, -apple-system, sans-serif;
  --wz5-body: "Quicksand", system-ui, -apple-system, sans-serif;

  padding: 100px 0 108px;
  background: #fff;
}

/* Elementor mewariskan margin ke hampir semua tag. Padding sengaja TIDAK
   ikut direset: .wz-pill adalah <p> dan hidup dari paddingnya. */
.wz5 :where(p, h2, ul, li, summary) { margin: 0; }
.wz5 :where(ul) { padding: 0; list-style: none; }

.wz5-inner {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  font-family: var(--wz5-body);
}

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

.wz5-head { margin-bottom: 52px; text-align: center; }

.wz5-title {
  margin-top: 20px;
  font-family: var(--wz5-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.6px;
  color: var(--wz5-ink);
}
.wz5-title span { color: var(--wz5-k); }

.wz5-sub {
  margin: 15px auto 0;
  max-width: 44ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wz5-ink-soft);
}

/* ---------- Daftar -------------------------------------------------------- */

.wz5-list > li { border-top: 1px solid var(--wz5-line); }
.wz5-list > li:last-child { border-bottom: 1px solid var(--wz5-line); }

/* Garis rambut di atas butir yang terbuka berubah jadi rose. Yang berubah
   hanya WARNANYA, tebalnya tetap 1px: kalau garisnya ikut menebal, seluruh
   daftar di bawahnya bergeser 1px tiap kali ada butir yang dibuka. */
.wz5-list > li:has(> .wz5-d[open]) { border-top-color: var(--wz5-k); }

.wz5-q {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
}
/* Segitiga bawaan Safari/Chrome. */
.wz5-q::-webkit-details-marker { display: none; }
.wz5-q::marker { content: ""; }

.wz5-q:focus-visible {
  outline: 3px solid var(--wz5-k);
  outline-offset: 4px;
}

.wz5-qt {
  flex: 1 1 auto;
  font-family: var(--wz5-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.2px;
  color: var(--wz5-ink);
  transition: color 0.2s ease;
}
.wz5-d[open] .wz5-qt { color: var(--wz5-k); }

/* Tanda plus yang diputar 45 derajat jadi silang. Satu bentuk, bukan dua
   ikon yang bertukar tempat. Goresnya 1,5px — setebal garis rambut daftar
   ini, bukan setebal ikon UI. */
.wz5-t {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: #6f6976;   /* 5,31:1 di atas putih */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
.wz5-t::before,
.wz5-t::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 1.5px;
  margin: -0.75px 0 0 -10px;
  background: currentColor;
}
.wz5-t::after { transform: rotate(90deg); }

.wz5-d[open] .wz5-t { transform: rotate(45deg); color: var(--wz5-k); }

/* Pembungkus jawaban. Tingginya yang dianimasikan skrip; padding taruh di
   anak dalamnya supaya tidak ikut terhitung saat tingginya 0. */
.wz5-a { overflow: hidden; }
/* 66ch pada Quicksand 16px jatuh di sekitar 620px — masih di dalam rentang
   baca yang nyaman, tapi cukup lebar supaya tepi kanannya tidak terbaca
   seperti kolom sempit yang nyasar di bawah garis selebar 760px. */
.wz5-ain { padding: 0 48px 30px 0; max-width: 66ch; }
.wz5-ain p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.78;
  color: var(--wz5-ink-soft);
}
.wz5-ain p + p { margin-top: 14px; }
.wz5-ain strong { font-weight: 700; color: var(--wz5-ink); }

@media (hover: hover) {
  .wz5-d:not([open]):hover .wz5-qt,
  .wz5-d:not([open]):hover .wz5-t { color: var(--wz5-k); }
}

/* Animasi tinggi hanya hidup kalau skripnya jalan. */
.wz5-js .wz5-a { transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1); }

/* ---------- Satu kalimat penutup ------------------------------------------ */

.wz5-lagi {
  margin-top: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wz5-ink-soft);
}

.wz5-lagi a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wz5-k);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.16s ease;
}
.wz5-lagi a:hover,
.wz5-lagi a:focus-visible { color: #8f1c44; }
.wz5-lagi a svg { display: block; width: 17px; height: 17px; }

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

@media (max-width: 720px) {
  .wz5 { padding: 70px 0 78px; }
  .wz5-inner { width: calc(100% - 40px); }
  .wz5-head { margin-bottom: 36px; }
  .wz5-title { font-size: 29px; letter-spacing: -0.4px; }
  .wz5-sub { font-size: 15px; }

  .wz5-q { gap: 18px; padding: 21px 0; }
  .wz5-qt { font-size: 17px; }
  .wz5-t { width: 18px; height: 18px; margin-top: 3px; }
  .wz5-t::before,
  .wz5-t::after { width: 18px; margin-left: -9px; }

  .wz5-ain { padding: 0 34px 24px 0; }
  .wz5-ain p { font-size: 15px; line-height: 1.72; }

  .wz5-lagi { margin-top: 32px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .wz5-js .wz5-a,
  .wz5-qt,
  .wz5-t,
  .wz5-lagi a { transition: none; }
}