/* Ruang Waris — landing page, TEMPLATE 2 (biru-putih).
   Diturunkan dari styles.css (Template 1) -- struktur/layout/koordinat
   SAMA PERSIS (masih memakai mesin scale-to-fit yang sama di
   pendaftaran.js), cuma palet warnanya diganti krem/oranye -> biru-putih.
   Nama variabel dipertahankan apa adanya (--cream, --orange, dst) supaya
   diff dari styles.css tetap gampang dibandingkan -- yang berubah cuma
   NILAI warnanya.
   Coordinates mirror the Figma frame 997:821 (360 x 799).
   The whole canvas is scaled to fit the viewport by script.js. */

:root {
  --cream:        #eaf2ff;
  --cream-bar:    #f5f9ff;
  --cream-card:   #ffffff;
  --cream-ticket: #eaf2ff;
  --cream-coupon: #eaf2ff;
  --olive:        #05105a;
  --olive-line:   #0b1a4d;
  --olive-text:   #1c2b57;
  --olive-text-2: #1c2b57;
  --olive-text-3: #1c2b57;
  --olive-text-4: #1c2b57;
  --brown-logo:   #05105a;
  --gold:         #0475f4;
  --gold-title:   #0475f4;
  --brown-badge:  #0475f4;
  --brown-count:  #05105a;
  --brown-sub:    #0b1a4d;
  --brown-body:   #4a5573;
  --brown-price:  #05105a;
  --orange:       #0475f4;
  --cream-sub:    #eef5ff;
  --ink:          #05105a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #f8fbff;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Snap-scroll antar section utama (hero, regform) -- sama seperti
   Template 1 (styles.css): tiap section disusun normal flow dan diberi
   min-height 1 layar penuh lewat pendaftaran.js (updateMinHeights),
   supaya scroll terasa lompat per "halaman" seperti slide. */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.hero, .profile, .regform {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The whole page scrolls normally (no inner scroll container). min-height
   keeps the cream background filling the screen even when content is
   shorter than the viewport; dvh tracks mobile browser chrome show/hide. */
.app {
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--cream);
}

/* overflow TIDAK diset hidden di sini (atau di .canvas): keduanya diukur
   pas oleh script.js jadi tak ada yang benar-benar overflow, tapi
   overflow:hidden di elemen manapun antara html dan section-section di
   .canvas akan membuat elemen itu sendiri jadi "scroll container" versi
   Chromium, sehingga scroll-snap-type di html jadi tidak pernah kepakai
   (section-nya "kesambung" ke scroll container yang salah dan tidak
   mensupport snap). Jangan tambahkan overflow:hidden di sini lagi. */
.stage {
  margin: 0 auto;
  transition: height 0.25s ease;
}

/* Scrolling content: sections stack in normal flow now (no more absolute
   top math); height is measured by script.js from the natural layout and
   applied here so .stage can be sized in lockstep for the scale transform. */
.canvas {
  position: relative;
  width: 360px;
  background: var(--cream);
  transform-origin: top left;
  transition: height 0.25s ease;
}

/* position:fixed (bukan sticky) -- elemen ini sudah ditaruh di luar
   .stage/.canvas (yang dapat CSS transform:scale()) jadi aman dari
   masalah containing-block transform, dan fixed jauh lebih stabil di
   HP nyata drpd sticky (sticky sbg child terakhir dari kolom setinggi
   halaman sempat hilang/lompat saat address bar mobile collapse/expand
   pas discroll ke section terakhir -- fixed tidak bergantung pada posisi
   di alur dokumen sama sekali). */
.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--cream-bar);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
/* Selagi banner hero (foto gelap) masih terlihat, bar dibuat transparan
   supaya tidak ada garis krem yang memotong foto — begitu hero terlewati,
   background & bayangan kembali seperti biasa. */
.bottombar.is-on-hero {
  background: transparent;
  box-shadow: none;
}
/* Khusus bar yang isinya tombol submit floating (Template 2): SEMBUNYIKAN
   total selagi masih di section pertama (hero), bukan cuma transparan --
   di hero sudah ada CTA "Gabung Sekarang!" sendiri, jadi tidak perlu 2
   tombol sekaligus di layar. */
.bottombar--floating-submit.is-on-hero {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.bar-stage {
  margin: 0 auto;
  overflow: hidden;
}
.bar-canvas {
  position: relative;
  width: 360px;
  height: 60px;
  transform-origin: top left;
}

/* zero-specificity reset so per-element margins below still win */
:where(.canvas p, .bar-canvas p) { margin: 0; }
:where(.canvas img, .bar-canvas img) { display: block; }

/* ---------- hero banner TEMPLATE 2 ----------
   SATU foto latar penuh (assets/hero-template2-bg.jpg) yang sudah memuat
   foto keluarga + area putih + gelombang biru sekaligus; seluruh isi
   (logo, judul, kartu jadwal/voucher, CTA) ditumpuk di atasnya.
   min-height disamakan dgn tinggi foto pada lebar kanvas 360px
   (941x1871 -> 360x716) supaya gelombang biru di dasar foto tetap utuh
   terlihat walau isinya lebih pendek. */
.hero {
  position: relative;
  width: 360px;
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--cream);
  text-align: center;
}
/* Tinggi TETAP (bukan inset:0 lagi) -- dikunci apa adanya sesuai rasio
   crop asli (1432x2000 -> 360x503) supaya object-fit:cover tidak
   diam-diam nge-zoom foto saat kartu di bawahnya membuat total tinggi
   .hero lebih dari itu. Sisa tinggi .hero (di bawah 503px) otomatis
   kepenuhi var(--cream) polos dari .hero. */
.hero__bg { position: absolute; top: -70px; left: 0; right: 0; height: 503px; }
.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Scrim atas & bawah DIPISAH jadi 2 elemen independen (bukan satu
   ::after gradasi panjang) -- masing-masing tinggal digeser via
   `height` sendiri-sendiri tanpa saling mempengaruhi persentase. */
.hero__scrim-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 250px;
  background: linear-gradient(180deg,
    rgba(250, 252, 255, 0.97) 0%,
    rgba(250, 252, 255, 0.93) 40%,
    rgba(250, 252, 255, 0.7) 65%,
    rgba(250, 252, 255, 0.32) 85%,
    rgba(250, 252, 255, 0) 100%);
}
.hero__scrim-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg,
    rgba(234, 242, 255, 0) 0%,
    rgba(234, 242, 255, 0.6) 55%,
    rgba(234, 242, 255, 1) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: 22px 20px 0;
}

/* Logo: satu berkas SVG utuh (ikon + wordmark "RUANG HIKMAH" sudah jadi
   satu lockup horizontal), tinggal ditaruh apa adanya -- rasio asli
   90:26 dipertahankan lewat height saja (width mengikuti). */
.hero__merek { margin-bottom: 14px; }
.hero__merek-logo { height: 24px; width: auto; margin: 0 auto; display: block; }

.hero__title {
  margin: 0;
  /* Literata (serif yang sama dgn Template 1), huruf besar-kecil biasa
     (BUKAN kapital semua) -- mengikuti acuan desain terbaru. */
  font-family: 'Literata', Georgia, serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.hero__title em { font-style: normal; color: #005ee6; }

/* Ruang kosong supaya wajah keluarga di foto tidak tertutup teks -- nilai
   ini yang menentukan di mana kartu jadwal/voucher mendarat (idealnya pas
   di area putih/karpet foto, tepat di bawah keluarga). */
.hero__gap { height: 245px; }

/* ---------- panel notifikasi "Member Area" (percobaan lokal) ---------- */
.member-notif {
  position: fixed;
  top: 10px;
  left: 50%;
  width: calc(100% - 20px);
  max-width: 420px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .8);
  background: linear-gradient(90deg, rgb(234 255 224 / 90%) 0%, rgba(245, 250, 242, .9) 60%, rgba(255, 255, 255, .9) 100%);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px -6px rgba(5, 16, 90, .35);
  opacity: 0;
  transform: translateX(-50%) translateY(-24px);
  pointer-events: none;
}
/* Ditambahkan lewat JS cuma untuk pengunjung yang sudah pernah buka
   halaman ini sebelumnya (lihat script di bawah <body>) -- baru di sini
   animasinya jalan dan elemen jadi bisa diklik. */
.member-notif.member-notif--tampil {
  animation: member-notif-turun .5s ease-out 1s forwards;
  pointer-events: auto;
}
@keyframes member-notif-turun {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Disembunyikan SELAMA masih di section 1 (slide deck Kisah Waris di
   atas hero) -- lihat observer di index.html. !important dibutuhkan di
   sini krn animation-fill-mode:forwards milik .member-notif--tampil
   "mengunci" opacity:1 dengan prioritas lebih tinggi drpd deklarasi
   biasa manapun (termasuk yang lebih spesifik/belakangan) selama
   animasinya masih dianggap aktif/mengisi -- cuma !important yang bisa
   menang melawannya. */
.member-notif.member-notif--sembunyi {
  opacity: 0 !important;
  pointer-events: none !important;
}
.member-notif__ikon {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #149C3F;
  color: #fff;
}
.member-notif__ikon::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: rgba(11, 26, 77, .18);
}
.member-notif__ikon svg { width: 17px; height: 17px; }
.member-notif__titik {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  border: 1.5px solid #fff;
}
.member-notif__teks {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.member-notif__teks b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-notif__teks small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.25;
  color: #4a5573;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-notif__tombol {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #149C3F;
  color: #0F7A30;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.member-notif__panah {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #149C3F;
  color: #fff;
}
.member-notif__panah svg { width: 10px; height: 10px; }
.member-notif__tutup {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #6b7590;
  box-shadow: 0 2px 6px -1px rgba(5, 16, 90, .35);
  cursor: pointer;
}
.member-notif__tutup svg { width: 11px; height: 11px; }

/* ---------- baris kartu jadwal + voucher: satu kartu putih yang sama,
   dipisah garis vertikal (divider) di antara keduanya -- sesuai acuan. ---------- */
.hero__baris-atas {
  display: flex;
  align-items: stretch;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(5, 16, 90, 0.10);
}

/* Kartu jadwal: tanggal & jam bertumpuk, dihubungkan garis vertikal
   tipis (gaya "timeline") di antara 2 lingkaran ikon -- sesuai acuan. */
.hero__jadwal {
  flex: 1.35;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.hero__baris-garis {
  align-self: stretch;
  width: 0;
  margin: 0 12px;
  border-left: 1.5px dashed rgba(5, 16, 90, 0.25);
}
.hero__jadwal-baris {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__jadwal-ikon {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2ecfd;
  color: var(--orange);
}
.hero__jadwal-ikon svg { width: 16px; height: 16px; }
/* Garis timeline menghubungkan pusat 2 lingkaran ikon -- lebar 32px,
   jadi garisnya diposisikan pas di tengah kolom ikon (16px dari kiri). */
.hero__jadwal-garis {
  width: 1.5px;
  height: 12px;
  margin: 0 0 0 15.25px;
  background: rgba(5, 16, 90, 0.14);
}
.hero__jadwal-teks {
  min-width: 0;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--brown-body);
}
.hero__jadwal-teks > * { display: block; }
.hero__jadwal-teks b {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- kartu voucher: gambar siap pakai (sudah termasuk takik
   tiket kiri/kanan), tinggal ditata mengisi tinggi baris yg sama dgn
   kartu jadwal di sebelahnya. ---------- */
.voucher-link {
  flex: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.voucher-link[hidden] { display: none; }
.voucher {
  width: 100%;
  height: 92%;
  object-fit: contain;
  display: block;
  animation: voucherJiggle 2.5s ease-in-out infinite;
}
/* Jiggle terjadi di ~480ms pertama, sisanya (~2 detik) diam -- itu
   jedanya, bukan animation-delay (delay cuma menunda mulai, bukan bikin
   jeda antar-perulangan). Persentase disesuaikan ke durasi total 2.5s
   supaya gerakan jiggle sendiri tetap sama cepatnya (cuma jedanya yg
   dipangkas jadi 2 detik). */
@keyframes voucherJiggle {
  0%, 100% { transform: rotate(0deg); }
  3.2% { transform: rotate(-5deg); }
  6.4% { transform: rotate(5deg); }
  9.6% { transform: rotate(-4deg); }
  12.8% { transform: rotate(4deg); }
  16% { transform: rotate(-2deg); }
  19.2% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .voucher { animation: none; }
}

/* ---------- status kajian berakhir ---------- */
.hero__berakhir[hidden] { display: none; }
.hero__berakhir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 15px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid rgba(4, 117, 244, 0.3);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(5, 16, 90, 0.10);
}
.hero__berakhir-ikon { display: flex; color: var(--orange); }
.hero__berakhir-ikon svg { width: 15px; height: 15px; }
.hero__berakhir-teks {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.1px;
  color: var(--ink);
}

/* ---------- kartu pembimbing (foto + "Bersama Ustadz" + nama) ---------- */
.hero__ustadz {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(5, 16, 90, 0.10);
  text-align: left;
}
.hero__ustadz-foto {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  object-fit: contain;
}
.hero__ustadz-teks { margin: 0; min-width: 0; }
.hero__ustadz-label,
.hero__ustadz-nama { display: block; }
.hero__ustadz-label {
  font-size: 12px;
  font-weight: 600;
  color: #005ee6;
}
.hero__ustadz-nama {
  margin-top: 3px;
  font-family: 'Literata', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--ink);
}

/* ---------- CTA utama (menggantikan sticky bar Template 1 -- ditumpuk
   langsung di akhir hero, dilacak analitik.js lewat class .cta yang
   sama). Kelas .cta[hidden] mewarisi override display:none dari
   styles.css asal supaya konsisten saat status kajian sudah lewat. */
.cta[hidden] { display: none; }


/* ---------- profil singkat ustadz (custom, not from Figma) ----------
   Ditaruh di bawah kartu event/jadwal, di dalam .hero. Dibungkus kartu
   sendiri (background + border-radius) supaya konsisten dengan pola kartu
   section lain (.regform__card, dst). */
.profile {
  width: 328px;
  margin: 0 16px 24px;
  padding: 20px 16px;
  background: var(--cream-card);
  border-radius: 20px;
}
.profile__kicker {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--brown-badge);
}
.profile__name {
  margin: 0 0 10px;
  font-family: 'Literata', serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--olive-text);
}
.profile__intro {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
}
.profile__divider {
  margin: 16px 0;
  border-top: 1px dashed rgba(74, 85, 115, 0.3);
}
.profile__section-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--olive-text);
}
.profile__timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile__timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 18px 20px;
}
.profile__timeline li:last-child { padding-bottom: 0; }
.profile__timeline li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.profile__timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: rgba(5, 16, 90, 0.3);
}
.profile__timeline-content { min-width: 0; }
.profile__timeline-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}
.profile__timeline-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--brown-body);
}
.profile__timeline-year {
  flex-shrink: 0;
  padding: 3px 9px;
  background: var(--cream-sub);
  border-radius: 10px;
  font-weight: 700;
  font-size: 11px;
  color: var(--olive-text);
  white-space: nowrap;
}

.profile__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile__list li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.profile__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive);
}
.profile__list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
}

/* ---------- 997:876 price (bar-relative: 751 - 739) ---------- */
.price {
  position: absolute;
  left: 16px;
  top: 12px;
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.price__label {
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: -0.22px;
  color: var(--brown-body);
}
.price__value {
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--brown-price);
  white-space: nowrap;
}

/* ---------- 997:966 CTA (bar-relative: 747 - 739) ---------- */
.cta {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 8px;
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px;
  background: var(--orange);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: background 0.15s ease;
}
.cta span {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.28px;
  color: #fff;
  white-space: nowrap;
}
.cta:hover { background: #0361cc; }
.cta:active { background: #024ea8; }
.cta[hidden] { display: none; }

/* Tombol CTA utama Template 2 -- dipakai DI DALAM alur normal hero
   (bukan lagi sticky bottombar seperti Template 1), tapi tetap pakai
   class .cta supaya klik-nya otomatis terlacak analitik.js. Ditaruh
   SETELAH rule .cta di atas (bukan berdasarkan selektor lebih spesifik)
   supaya position/left/right/top/height absolute warisan Template 1
   ketimpa bersih lewat urutan cascade, bukan perang !important. */
.hero__cta {
  position: static;
  left: auto; right: auto; top: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  background: var(--orange);
  border-radius: 15px;
  font-family: 'Inter', sans-serif;
  color: #fff;
  text-decoration: none;
}
.hero__cta:hover { background: #0361cc; }
.hero__cta span {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #fff;
  white-space: nowrap;
}
.hero__cta svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Form Pendaftaran (custom, not from Figma) ----------
   Normal flow, placed right after .hero. */
.regform {
  width: 328px;
  /* margin-bottom ekstra (bukan cuma 24px) -- bar tombol sekarang
     position:fixed (lihat .bottombar), jadi tidak lagi otomatis
     "makan" ruang di alur dokumen; ruang ini dicadangkan manual supaya
     konten terakhir kartu (mis. "Pembayaran aman & terenkripsi") tidak
     ketutup bar saat discroll sampai bawah. */
  margin: 0 16px 100px;
}
.regform__card {
  background: var(--cream-card);
  border-radius: 20px;
  padding: 20px 16px 22px;
}
.regform__header { margin-bottom: 16px; }
.regform__card > .regform__header .regform__title { font-size: 18px; }
.regform__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.14px;
  color: var(--ink);
}
.regform__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--brown-body);
}
.regform__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.regform__input {
  width: 100%;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.15);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.regform__input::placeholder { color: #8a95b3; }
.regform__input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

.regform__gender {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.15);
  border-radius: 10px;
}
.regform__gender-label {
  margin: 0;
  font-size: 12.5px;
  color: #8a95b3;
}
.regform__gender-options { display: flex; gap: 22px; }
.regform__radio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.regform__radio input { accent-color: var(--orange); width: 15px; height: 15px; margin: 0; }

.regform__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #3568c9;
}
.regform__note-icon { flex-shrink: 0; font-size: 12px; line-height: 1.5; }

.regform__phone {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.15);
  border-radius: 10px;
  overflow: hidden;
}
.regform__phone-code {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-right: 1px solid rgba(11, 26, 77, 0.15);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.regform__flag { font-size: 15px; }
.regform__chevron { width: 12px; height: 12px; color: #8a95b3; }
.regform__phone-input {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.regform__phone-input::placeholder { color: #8a95b3; }
.regform__phone-input:focus { outline: none; }

.regform__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
  padding: 14px;
  background: var(--orange);
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
/* Ikon di dalam tombol ini butuh ukuran eksplisit -- SVG tanpa
   width/height sendiri (cuma viewBox) jatuh ke ukuran default browser
   (bisa >100px), bukan otomatis mengikuti viewBox-nya. Kelas ini dipakai
   pertama kali oleh cek-status.js (tombol "Cek Status" + ikon kaca
   pembesar) yang sebelumnya tanpa aturan ini -- ikonnya jadi raksasa. */
.regform__submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.regform__submit:hover { background: #0361cc; }
.regform__submit:active { background: #024ea8; }

.regform__help {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--brown-body);
}
.regform__help-link { color: #3568c9; font-weight: 600; text-decoration: underline; }

/* ---------- bagian pembayaran (disatukan dalam kartu pendaftaran) ---------- */
.payment {
  margin-top: 20px;
}
.payment .regform__title { font-size: 11pt; }
.payment__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.payment__header .regform__title { margin: 0; }
.payment__header-nominal {
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.payment__header-nominal.is-free {
  color: var(--green, #2e7d32);
}
.payment__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.payment__option input { position: absolute; opacity: 0; pointer-events: none; }
.payment__option:has(input:checked) { border-color: var(--orange); }
.payment__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #dce9fc;
  color: var(--ink);
}
.payment__icon svg { width: 22px; height: 22px; }
.payment__text { flex: 1; min-width: 0; }
.payment__name {
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.payment__desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--brown-body);
}
.payment__badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #2f6fe0;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.4px;
  color: #fff;
  vertical-align: middle;
}
.payment__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.8px solid #a9b8d8;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.payment__option:has(input:checked) .payment__dot {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 20px var(--orange);
}

/* ---------- kartu kupon bentuk tiket ---------- */
.coupon {
  margin-top: 12px;
  background: linear-gradient(135deg, #1e3a7a 0%, #0a1128 100%);
  border-radius: 14px;
}
.coupon__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
}
.coupon__info { flex: 1; min-width: 0; }
.coupon__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #fff;
}
.coupon.is-applied .coupon__title {
  font-size: 14px;
}
.coupon__title-nominal {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.coupon__desc[hidden] { display: none; }
.coupon__desc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}
.coupon__quota {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  color: #fff;
}

.coupon__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: linear-gradient(180deg, #eef5ff 0%, #dce9fc 100%);
  border: 0;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  color: #05105a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.coupon__btn-icon { width: 24px; height: 24px; }
.coupon__btn-icon[hidden] { display: none; }
.coupon__countdown {
  margin: 0;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0 0 14px 14px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
.coupon__countdown span { font-weight: 700; color: #fff; }
.coupon__btn:hover { background: linear-gradient(180deg, #f5f9ff 0%, #cfe0fb 100%); }
.coupon__btn:active { background: linear-gradient(180deg, #dce9fc 0%, #c9dbf7 100%); }
/* Tombol setelah kupon terpakai: putih transparan di atas gradasi navy,
   supaya jelas sudah tidak bisa diklik lagi dan tidak menarik perhatian. */
.coupon.is-applied .coupon__btn {
  background: transparent;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

/* ---------- rincian transaksi ---------- */
.summary {
  margin-top: 12px;
  padding: 14px 14px 6px;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.12);
  border-radius: 14px;
}
.summary__title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px dashed rgba(74, 85, 115, 0.3);
}
.summary__row--total { border-bottom: 0; }
/* `display: flex` di atas mengalahkan atribut `hidden`, jadi ditegaskan lagi. */
.summary__row[hidden] { display: none; }
.summary__label {
  font-size: 11.5px;
  color: var(--brown-body);
}
.summary__value {
  font-size: 11.5px;
  color: var(--ink);
}
.summary__value--strike {
  color: var(--orange);
  text-decoration: line-through;
}
/* Harga tiket dicoret begitu kupon gratis diterapkan. */
.summary__value.is-void {
  text-decoration: line-through;
  color: var(--brown-body);
  opacity: 0.75;
}
.summary__row--total .summary__label {
  font-weight: 700;
  color: var(--ink);
}
.summary__value--total {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.summary__value--total.is-free { color: #0b7a4b; }

.payment__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  background: var(--orange);
  border: 0;
  border-radius: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.payment__submit svg { width: 18px; height: 18px; }
.payment__submit[hidden] { display: none; }
.payment__submit:hover { background: #0361cc; }
.payment__submit:active { background: #024ea8; }

/* Tombol dipindah ke bottombar (lihat markup) supaya floating/sticky --
   override posisi & margin-top warisan versi inline-nya (posisinya kini
   dikontrol relatif ke .bar-canvas 360x60, bukan lagi mengalir di dalam
   kartu pembayaran). */
.bar-canvas .payment__submit {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin-top: 0;
}

/* Sticky bar disembunyikan saat form pendaftaran sudah terlihat,
   supaya CTA-nya tidak duplikat dengan tombol "Lanjutkan". */
.bottombar {
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.bottombar.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.payment__wa[hidden] { display: none; }
.payment__wa {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-top: 14px;
  padding: 12px;
  background: #e5edfa;
  border-radius: 12px;
  text-decoration: none;
}
.payment__wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.payment__wa-icon img { width: 20px; height: 20px; }
.payment__wa-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(11, 26, 77, 0.18);
}
.payment__wa-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.payment__wa-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.payment__wa-number {
  margin-left: auto;
  /* width: fit-content — bukan lebar penuh kolom grid — supaya area klik
     tautan ini hanya sepanjang teks nomor dan ikon panah, tidak melebar
     mengikuti sisa ruang kartu. */
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
.payment__wa-number svg { width: 15px; height: 15px; color: var(--ink); }

.berakhir[hidden] { display: none; }
.berakhir {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-top: 12px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, #f5f9ff 0%, #dce9fc 100%);
  border: 1px solid rgba(4, 117, 244, 0.22);
  border-radius: 14px;
}
.berakhir__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(4, 117, 244, 0.12);
  color: var(--orange);
  margin-bottom: 2px;
}
.berakhir__ikon svg { width: 22px; height: 22px; }
.berakhir__judul {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.berakhir__teks {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--brown-body);
  max-width: 280px;
}

.payment__secure {
  margin: 10px 0 0;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(180deg, #f4fbf6 0%, #eaf6ee 100%);
  border: 1px solid rgba(46, 125, 50, 0.22);
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: -0.1px;
  color: #2e7d32;
}
.payment__secure svg { width: 15px; height: 15px; flex-shrink: 0; color: #2e7d32; }
.payment__secure[hidden] { display: none; }

/* ---------- modal konfirmasi pesanan ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.modal.is-open { display: block; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 35, 0.55);
}
.modal__panel {
  position: relative;
  width: min(92vw, 400px);
  max-height: 88vh;
  margin: 6vh auto;
  overflow-y: auto;
  padding: 28px 22px 40px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 26, 77, 0.08);
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.modal__close svg { width: 16px; height: 16px; }
.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  background: #dce9fc;
  border-radius: 50%;
  color: var(--orange);
}
.modal__icon svg { width: 30px; height: 30px; }
.modal__title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.modal__subtitle {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brown-body);
}
.modal__section { margin-bottom: 16px; }
.modal__section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.modal__section-title svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--orange); }
.modal__box {
  padding: 2px 14px;
  background: #fff;
  border: 1px solid rgba(11, 26, 77, 0.12);
  border-radius: 12px;
}
.modal__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(74, 85, 115, 0.3);
  font-size: 13.5px;
}
.modal__row:last-child { border-bottom: 0; }
/* `display: flex` di atas mengalahkan atribut `hidden`, jadi ditegaskan lagi. */
.modal__row[hidden] { display: none; }
.modal__label {
  flex: 0 0 40%;
  color: var(--brown-body);
}
.modal__value {
  flex: 1;
  font-weight: 700;
  color: var(--ink);
}
.modal__value::before { content: ": "; font-weight: 400; color: var(--brown-body); }
.modal__row--discount .modal__label--green,
.modal__value--green { color: #0b7a4b; }
.modal__row--discount .modal__value::before { color: #0b7a4b; }
.modal__divider {
  margin: 2px 0;
  border-top: 1.5px dashed rgba(74, 85, 115, 0.3);
}
.modal__row--total {
  padding-top: 12px;
  border-bottom: 0;
}
.modal__row--total .modal__value::before { content: ""; }
.modal__label--total { font-weight: 700; color: var(--ink); }
.modal__value--total {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.modal__value--total.is-free { color: #0b7a4b; }

.modal__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 16px;
  background: var(--orange);
  border: 0;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal__submit svg { width: 19px; height: 19px; }
.modal__submit:hover { background: #0361cc; }
.modal__submit:active { background: #024ea8; }
.modal__submit:disabled { background: #b9c8e8; cursor: not-allowed; }

/* ---------- modal ucapan voucher diklaim ---------- */
.vmodal__panel { padding-top: 40px; text-align: center; }
.vmodal__title {
  margin: 0 0 10px;
  font-family: 'Literata', serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--olive-text);
}
.vmodal__divider {
  display: block;
  width: 46px;
  height: 0;
  margin: 0 auto 14px;
  border-top: 2px solid var(--orange);
  opacity: 0.55;
}
.vmodal__subtitle {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--brown-body);
}
.vmodal__subtitle strong { color: var(--olive-text); }
.vmodal__brand { color: var(--orange); }

.vmodal__box {
  padding: 16px;
  background: #DCEDFF;
  border: 1px solid rgba(4, 117, 244, 0.25);
  border-radius: 16px;
  text-align: left;
}
.vmodal__box-title {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(5, 16, 90, 0.3);
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1px;
  color: var(--olive-text);
}
.vmodal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.vmodal__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(5, 16, 90, 0.25);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.vmodal__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.vmodal__list li:first-child { padding-top: 0; }
.vmodal__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  background: var(--olive);
  border-radius: 50%;
  color: #fff;
}
.vmodal__check svg { width: 11px; height: 11px; }

.vmodal__submit { margin-top: 18px; }

/* Pesan gagal kirim ke server (validasi, koneksi, dsb). Ditampilkan di
   dalam modal, bukan alert() bawaan browser, supaya tidak terasa seperti
   popup situs asing dan tetap konsisten dengan gaya kartu di halaman ini. */
.modal__error {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fbe9e7;
  color: #b3261e;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 600;
}