/* ==========================================================================
   Menu bar

   Bentuknya pulau melayang: pil ber-radius 999px, senapas dengan seluruh
   tombol di halaman ini. Yang berubah cuma alasnya — dulu pulau ini duduk di
   pita putih miliknya sendiri dan jahitan dengan hero kelihatan. Sekarang
   pembungkusnya position:fixed dan transparan, jadi gradasi hero mengalir
   utuh di belakang dan di sekeliling pulau, dan kacanya cukup tembus pandang
   untuk memperlihatkan gradasi itu menembus.

   Konsekuensinya hero kehilangan ruang atas; itu dikembalikan lewat padding
   di bagian paling bawah berkas ini.

   Tokennya menumpang wz-ui.css supaya tombol dan warnanya satu bahasa dengan
   sisa halaman; fallback ditulis eksplisit kalau berkas itu belum termuat.
   ========================================================================== */

.wzn {
  --wzn-ink: var(--wz-ink, #171717);
  --wzn-brand: var(--wz-brand, #da336b);
  --wzn-brand-deep: var(--wz-pill-text, #a8244f);
  --wzn-blush: var(--wz-pill-bg, #fdeef4);

  /* Pil hover TIDAK memakai --wzn-blush. Pulaunya sendiri sudah berona blush,
     jadi blush di atas blush praktis tidak terlihat — itu sebabnya hover-nya
     terasa samar. Sapuan merek 15% memberi beda yang jelas tanpa menyaingi
     tombol Daftar, yang tetap satu-satunya warna pekat di bar. */
  --wzn-hover: rgba(218, 51, 107, 0.15);
  --wzn-font: var(--wz-ui-font, "Quicksand", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif);

  /* Progres menyusut, 0 di puncak halaman sampai 1 setelah tergulir sejauh
     tinggi bar. Diisi JS tiap frame gulir.

     Dulu penyusutan ini satu lompatan 0,28 detik yang dipicu kelas pada
     scrollY > 40 — enam properti tata letak sekaligus, tiga durasi berbeda,
     dan padding tautan yang tidak punya transisi sama sekali sehingga
     menyentak. Sekarang ukurannya diturunkan dari progres ini lewat calc(),
     jadi bar menyusut mengikuti guliran jari, bukan meledak sekali jalan. */
  --wzn-p: 0;

  --wzn-pad: 12px;    --wzn-pad-d: 6px;
  --wzn-h: 66px;      --wzn-h-d: 18px;
  --wzn-logo: 156px;  --wzn-logo-d: 30px;
  --wzn-lpad: 10px;   --wzn-lpad-d: 4px;
  --wzn-cta-h: 44px;  --wzn-cta-h-d: 8px;
  --wzn-cta-py: 11px; --wzn-cta-py-d: 3px;
  --wzn-cta-px: 22px; --wzn-cta-px-d: 4px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: calc(var(--wzn-pad) - var(--wzn-pad-d) * var(--wzn-p)) 16px;
  font-family: var(--wzn-font);
  /* Pembungkusnya tidak punya latar dan tidak menangkap klik — yang terlihat
     dan bisa ditekan hanya pulaunya. */
  background: transparent;
  pointer-events: none;
}

/* Bar ini position:fixed dengan left:0 dan right:0, jadi lebarnya diukur dari
   viewport tata letak — yang di sebagian mesin sudah termasuk lebar batang
   gulir, sementara isi halaman diukur tanpanya. Selisihnya bikin bar melebihi
   isi halaman sebesar batang gulir itu.

   clip, bukan hidden: hidden menjadikan elemen akar wadah gulir dan itu
   mematikan position:sticky di dalamnya (ada dua di halaman ini). clip cuma
   memotong, tanpa menyentuh perilaku gulir vertikal. */
html {
  overflow-x: clip;
}

/* Pulaunya. Alpha sengaja rendah (0,62) supaya gradasi hero benar-benar
   terlihat menembus kaca, bukan cuma mengintip di sekelilingnya — itu yang
   membuatnya menyatu, bukan sekadar menumpang. Gradasinya sendiri bergerak
   dari putih ke blush, searah dengan wordmark WatZap yang bergerak dari merah
   jambu ke jingga. */
.wzn-in {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  /* Stacking context sendiri supaya lapisan kaca ber-z-index negatif berhenti
     di dalam pulau, tidak jatuh ke belakang halaman. backdrop-filter sebenarnya
     sudah membuatnya, tapi dukungannya tidak merata — jadi dinyatakan. */
  isolation: isolate;
  max-width: 1200px;
  height: calc(var(--wzn-h) - var(--wzn-h-d) * var(--wzn-p));
  margin: 0 auto;
  padding: 0 12px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.62),
    rgba(253, 238, 244, 0.62)
  );
  box-shadow: 0 10px 30px rgba(218, 51, 107, 0.12);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  pointer-events: auto;
}

/* Lewat hero, di belakang pulau bisa ada apa saja — section putih, navy, foto.
   Kacanya harus memekat supaya teks tetap terbaca.

   Warna tidak bisa di-calc() dari sebuah progres, jadi versi pekatnya
   dipasang sebagai lapisan tersendiri yang opacity-nya mengikuti progres.
   Hasilnya memekat mulus seiring gulir, bukan memudar dengan jadwalnya
   sendiri yang selesai di waktu berbeda dari penyusutan tingginya. */
/* z-index -1 wajib. Tanpa itu lapisan ini absolut ber-z-index auto, jadi ia
   dicat di atas seluruh isi pulau yang position-nya static — dan yang static
   persis logo serta tombol Daftar (tautan lain relative, jadi selamat). Pada
   progres penuh kacanya 93% pekat, sehingga keduanya seperti lenyap justru
   ketika bar sedang dipakai. Anak ber-z-index negatif dicat di atas latar
   induknya tapi di bawah semua isinya — tepat yang dibutuhkan. */
.wzn-in::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.93),
    rgba(253, 238, 244, 0.93)
  );
  border: 1px solid rgba(218, 51, 107, 0.14);
  box-shadow: 0 12px 34px rgba(218, 51, 107, 0.2);
  opacity: var(--wzn-p);
  pointer-events: none;
}

/* ---------- Logo ---------------------------------------------------------- */

.wzn-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.wzn-logo img {
  display: block;
  width: calc(var(--wzn-logo) - var(--wzn-logo-d) * var(--wzn-p));
  height: auto;
}

/* ---------- Tautan -------------------------------------------------------- */

.wzn-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.wzn-item { position: relative; }

.wzn-link {
  position: relative;
  /* Stacking context sendiri supaya pil di ::before yang ber-z-index negatif
     berhenti di balik teks tautan, bukan tembus ke belakang pulau. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: calc(var(--wzn-lpad) - var(--wzn-lpad-d) * var(--wzn-p)) 15px;
  /* Sebelumnya #5a5a5a dan memang terbaca pucat di atas latar merah jambu
     muda. Tinta penuh: 15,3:1 di atas hero. */
  color: var(--wzn-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}

/* Hover: satu pil blush mengembang dari 94% ke penuh, persis sebentuk kotak
   tautannya.

   Versi sebelumnya mengangkat tautan 2px sambil menumbuhkan garis di bawahnya.
   Dua gerakan itu terbaca berantakan, dan pada Demo malah merusak: tautannya
   naik sementara panel sub-menunya tidak, jadi celah di antara keduanya
   melebar 6px jadi 8px dan panelnya seperti lepas dari induknya. Satu bentuk
   yang mengembang di tempat tidak punya masalah itu. */
.wzn-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--wzn-hover);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzn-link:hover,
.wzn-item:focus-within > .wzn-link,
.wzn-item.is-open > .wzn-link { color: var(--wzn-brand-deep); }

.wzn-link:hover::before,
.wzn-item:focus-within > .wzn-link::before,
.wzn-item.is-open > .wzn-link::before {
  opacity: 1;
  transform: scale(1);
}

/* Section yang sedang dibaca ditandai warna saja. */
.wzn-link.is-active { color: var(--wzn-brand-deep); }

.wzn-link-chev {
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
}

.wzn-item:hover .wzn-link-chev,
.wzn-item.is-open .wzn-link-chev { transform: rotate(180deg); }

/* Pemicu Demo satu-satunya <button> di bar ini, dan reset.css milik tema
   memberi SEMUA button garis tepi merah jambu plus latar #cc3366 pekat saat
   hover dan focus. Selektor `button:hover` berbobot (0,1,1) — mengalahkan
   `.wzn-link` yang (0,1,0) — jadi latar tema itu tercetak di atas pil hover
   sendiri, dan hasilnya kotak merah jambu pekat yang tidak rapi.

   Dinyatakan ulang dengan bobot yang cukup, bukan dengan !important. */
.wzn .wzn-link,
.wzn .wzn-link:hover,
.wzn .wzn-link:focus,
.wzn .wzn-link:active {
  border: 0;
  background: none;
  box-shadow: none;
}

/* ---------- Sub-menu Demo ------------------------------------------------- */

/* Dua demo di halaman ini menjawab pertanyaan yang berbeda — satu soal kirim
   massal, satu soal membalas — jadi keduanya pantas disebut namanya alih-alih
   disatukan di balik satu kata "Demo". */
/* Tepi kiri panel disejajarkan dengan tepi kiri tautannya, tidak dipusatkan.
   Panel 236px di bawah tautan selebar 92px yang dipusatkan menjulur 72px ke
   kiri dan ke kanan, dan pada jarak itu ia tidak lagi terbaca sebagai milik
   "Demo" — cuma kotak yang kebetulan muncul di dekatnya. */
.wzn-sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 236px;
  padding: 6px;
  border: 1px solid rgba(218, 51, 107, 0.12);
  border-radius: 16px;
  background: rgba(255, 252, 253, 0.98);
  box-shadow: 0 16px 40px rgba(218, 51, 107, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.2s ease;
}

/* Jembatan tak terlihat menutup celah 6px antara tautan dan panelnya. Tanpa
   ini kursor yang bergerak turun sempat keluar dari kedua elemen dan panelnya
   berkedip tutup di tengah jalan. */
.wzn-sub::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.wzn-item:hover .wzn-sub,
.wzn-item:focus-within .wzn-sub,
.wzn-item.is-open .wzn-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wzn-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--wzn-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.wzn-sub a small {
  display: block;
  margin-top: 2px;
  color: #6b6b70;
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.16s ease;
}

.wzn-sub a:hover,
.wzn-sub a:focus-visible {
  background: var(--wzn-blush);
  color: var(--wzn-brand-deep);
}

.wzn-sub a:hover small,
.wzn-sub a:focus-visible small { color: var(--wzn-brand-deep); }

/* ---------- Aksi kanan ---------------------------------------------------- */

.wzn-act {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.wzn-masuk {
  position: relative;
  isolation: isolate;
  padding: calc(var(--wzn-lpad) - var(--wzn-lpad-d) * var(--wzn-p)) 15px;
  color: var(--wzn-ink);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.wzn-masuk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--wzn-hover);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.wzn-masuk:hover { color: var(--wzn-brand-deep); }

.wzn-masuk:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Geometri tombol datang dari wz-ui.css lewat kelas .wz-btn. Warnanya solid
   --wz-btn-bg: satu-satunya blok warna penuh di bar, sama persis dengan tombol
   utama di seluruh halaman. */
/* Ukuran huruf sengaja tidak ikut mengecil. Menganimasikan font-size memaksa
   teks ditata ulang tiap frame dan hasilnya buram serta bergetar — itu salah
   satu sumber kesan tersendat sebelumnya. Yang menyusut hanya kotaknya. */
.wzn-cta.wzn-cta {
  min-height: calc(var(--wzn-cta-h) - var(--wzn-cta-h-d) * var(--wzn-p));
  padding: calc(var(--wzn-cta-py) - var(--wzn-cta-py-d) * var(--wzn-p))
    calc(var(--wzn-cta-px) - var(--wzn-cta-px-d) * var(--wzn-p));
  font-size: 15px;
  white-space: nowrap;
}

/* ---------- Tombol menu mobile -------------------------------------------- */

.wzn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(218, 51, 107, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--wzn-brand-deep);
  cursor: pointer;
}

.wzn-burger svg { width: 19px; height: 19px; }

.wzn-burger .wzn-tutup { display: none; }
.wzn-burger[aria-expanded="true"] .wzn-buka { display: none; }
.wzn-burger[aria-expanded="true"] .wzn-tutup { display: block; }

/* ---------- Lembar mobile ------------------------------------------------- */

.wzn-sheet {
  display: none;
  max-width: 1200px;
  margin: 10px auto 0;
  pointer-events: auto;
}

/* Aturan display milik penulis mengalahkan [hidden] bawaan peramban, jadi
   .wzn-sheet { display: block } di media query mobile membuat lembar ini
   tetap terpampang walau atributnya hidden. Harus dinyatakan ulang. */
.wzn-sheet[hidden] { display: none; }

.wzn-sheet-in {
  padding: 8px;
  border: 1px solid rgba(218, 51, 107, 0.14);
  border-radius: 22px;
  background: rgba(255, 252, 253, 0.98);
  box-shadow: 0 16px 38px rgba(218, 51, 107, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.wzn-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 999px;
  color: var(--wzn-ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.wzn-sheet a.is-active {
  background: var(--wzn-blush);
  color: var(--wzn-brand-deep);
}

/* Sub-demo di lembar mobile ditulis menjorok, bukan disembunyikan di balik
   ketukan kedua — di layar sentuh menu bertingkat lebih sering menghalangi
   daripada menolong. */
.wzn-sheet-sub {
  padding-left: 30px !important;
  font-size: 15px !important;
  color: #4a4a4f !important;
}

.wzn-sheet-luar {
  color: #4a4a4f !important;
  font-size: 15px !important;
}

.wzn-sheet-luar svg {
  width: 13px;
  height: 13px;
  opacity: 0.45;
}

/* ---------- Fokus keyboard ------------------------------------------------ */

.wzn a:focus-visible,
.wzn button:focus-visible {
  outline: 2px solid var(--wzn-brand);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ---------- Layar sedang: rapatkan sebelum dilipat ------------------------ */

/* Tiap breakpoint cukup menimpa angka dasarnya; rumus calc() di atas tetap
   satu-satunya tempat penyusutan dihitung. */
@media (max-width: 1150px) {
  .wzn {
    --wzn-logo: 146px;
    --wzn-logo-d: 24px;
  }

  .wzn-in { gap: 10px; padding: 0 10px 0 18px; }

  .wzn-link,
  .wzn-masuk {
    padding-inline: 10px;
    font-size: 14.5px;
  }
}

/* ---------- Mobile / tablet ----------------------------------------------- */

@media (max-width: 980px) {
  /* Penyusutan di mobile berhenti di 52px, bukan 48px seperti desktop: tombol
     burger 42px harus tetap muat dengan kelegaan yang wajar, dan
     mengecilkannya lagi membawa target sentuh ke bawah ambang nyaman. */
  .wzn {
    --wzn-pad: 10px;    --wzn-pad-d: 4px;
    --wzn-h: 60px;      --wzn-h-d: 8px;
    --wzn-logo: 136px;  --wzn-logo-d: 0px;
    --wzn-cta-h: 40px;  --wzn-cta-h-d: 6px;
    --wzn-cta-py: 10px; --wzn-cta-py-d: 2px;
    --wzn-cta-px: 18px; --wzn-cta-px-d: 3px;
  }

  .wzn-in { gap: 10px; padding: 0 8px 0 16px; }

  .wzn-nav,
  .wzn-masuk { display: none; }

  .wzn-act { margin-left: auto; }

  .wzn-burger { display: inline-flex; }

  /* Tombol daftar tetap di bar, tidak disembunyikan di balik burger — itu
     satu-satunya alasan halaman ini ada. */
  .wzn-cta.wzn-cta { font-size: 14.5px; }

  .wzn-sheet { display: block; }
  .wzn-sheet[hidden] { display: none; }
}

@media (max-width: 380px) {
  .wzn {
    --wzn-pad: 8px;     --wzn-pad-d: 3px;
    --wzn-logo: 114px;  --wzn-logo-d: 0px;
    --wzn-cta-px: 14px; --wzn-cta-px-d: 2px;
  }

  .wzn-in { padding: 0 6px 0 12px; gap: 8px; }
  .wzn-cta.wzn-cta { font-size: 14px; }
}

/* ---------- Ruang untuk bar yang melayang --------------------------------- */

/* Bar-nya position:fixed, jadi tidak lagi memakan ruang di alur. Hero adalah
   section pertama; padding atasnya ditambah setinggi bar supaya barisan
   bintang di puncaknya tidak tertutup. Ditulis di sini, bukan di
   hero-revamp.css, supaya seluruh biaya keputusan "bar melayang" berada di
   satu berkas dan ikut terhapus kalau varian ini dilepas. */
body .wz-rv { padding-top: 142px; }

@media (max-width: 980px) {
  body .wz-rv { padding-top: 116px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .wzn,
  .wzn-in,
  .wzn-link,
  .wzn-link::after,
  .wzn-masuk,
  .wzn-masuk::after,
  .wzn-sub,
  .wzn-logo img,
  .wzn-link-chev {
    transition-duration: 0.01ms !important;
  }
}