/* ==========================================================================
   Savitri Wedding — stylesheet tunggal
   Ditulis tangan, tanpa build step. Nama class sengaja dibuat
   Tailwind-compatible supaya nanti bisa diganti hasil build Tailwind
   tanpa menyentuh HTML. Lihat README.md bagian "Kalau nanti mau pakai
   Tailwind beneran".
   Urutan: 1) token  2) reset  3) tipografi  4) layout  5) komponen
           6) utilities  7) responsive
   ========================================================================== */

/* 1. DESIGN TOKEN ========================================================= */
:root {
  /* Warna utama — sage, disamakan dengan hijau di logo.
     --olive-500 itu warna logonya sendiri. Sisanya turunan: yang muda buat
     latar lembut, yang tua buat teks dan tombol.
     Catatan kontras: --olive-600 ke atas aman dipakai sebagai latar tombol
     dengan teks putih (lolos WCAG AA). Jangan pakai --olive-500 buat itu. */
  --olive-50:  #F4F6F0;
  --olive-100: #E8ECE1;
  --olive-200: #D3DAC6;
  --olive-300: #B7C3A3;
  --olive-400: #A0AF89;
  --olive-500: #8A9C77; /* base — warna logo */
  --olive-600: #667653;
  --olive-700: #4E5B40;
  --olive-800: #38422E;
  --olive-900: #242B1E;

  /* Krem pada lambang logo — dipakai sebagai aksen di atas latar hijau tua */
  --logo-krem: #E6D4AA;

  /* Krem hangat — latar */
  --krem-50:  #FCF9F2;
  --krem-100: #F7F1E3;
  --krem-200: #EFE3C8; /* base */
  --krem-300: #E4D3AC;
  --krem-400: #D6C08C;

  /* Putih pecah */
  --putih:     #FDFBF6;
  --putih-100: #F8F5ED;

  /* Cokelat tanah — aksen pendukung */
  --tanah-300: #C4AA88;
  --tanah-400: #A98B66;
  --tanah-500: #8A6F4E;
  --tanah-600: #6E583D;

  /* Teks — netral gelap, bukan hitam pekat */
  --tinta:       #2F2E2A;
  --tinta-muted: #5C5950;
  --tinta-soft:  #837D70;

  /* Garis */
  --garis:      #E3DCCB;
  --garis-kuat: #D2C8B0;

  /* Tipografi */
  --font-judul: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-isi: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sudut lembut */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Bayangan — sangat halus, hindari kesan berkilau */
  --shadow-sm: 0 1px 2px rgba(47, 46, 42, .04);
  --shadow-md: 0 4px 16px rgba(47, 46, 42, .06);
  --shadow-lg: 0 12px 36px rgba(47, 46, 42, .08);

  /* Ritme spasi vertikal antar section */
  --gap-section: 72px;

  /* Lebar konten */
  --w-konten: 1120px;
  --w-teks: 680px;
}

/* 2. RESET =============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--putih);
  color: var(--tinta);
  font-family: var(--font-isi);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--krem-100); border-radius: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

hr { border: 0; border-top: 1px solid var(--garis); margin: 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--olive-600);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--olive-200); color: var(--olive-900); }

/* Lewati ke konten — aksesibilitas keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--olive-600);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. TIPOGRAFI =========================================================== */
.judul {
  font-family: var(--font-judul);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 40;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-wrap: balance;
}

.t-hero    { font-size: 34px; line-height: 1.12; letter-spacing: -0.025em; }
.t-section { font-size: 27px; }
.t-kartu   { font-size: 20px; line-height: 1.25; }
.t-kecil   { font-size: 17px; line-height: 1.3; }

/* Label kecil di atas judul section */
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-600);
  margin-bottom: 14px;
  display: block;
}

.lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta-muted);
  text-wrap: pretty;
}

.teks { color: var(--tinta-muted); text-wrap: pretty; }
.teks-soft { color: var(--tinta-soft); }
.teks-kecil { font-size: 14px; line-height: 1.6; }
.teks-mini { font-size: 12.5px; line-height: 1.55; }

/* Isi artikel / halaman teks panjang */
.prosa { max-width: var(--w-teks); }
.prosa > * + * { margin-top: 18px; }
.prosa p { color: var(--tinta-muted); font-size: 17px; line-height: 1.75; }
.prosa h2 {
  font-family: var(--font-judul); font-weight: 400; font-size: 25px;
  line-height: 1.25; color: var(--tinta); margin-top: 44px;
  font-variation-settings: "SOFT" 40, "opsz" 30;
}
.prosa h3 {
  font-family: var(--font-judul); font-weight: 500; font-size: 20px;
  color: var(--tinta); margin-top: 32px;
}
.prosa ul, .prosa ol { padding-left: 0; }
.prosa li {
  position: relative; padding-left: 26px; color: var(--tinta-muted);
  font-size: 17px; line-height: 1.7;
}
.prosa li + li { margin-top: 10px; }
.prosa ul li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--olive-300);
}
.prosa ol { counter-reset: n; }
.prosa ol li { counter-increment: n; }
.prosa ol li::before {
  content: counter(n) "."; position: absolute; left: 0; top: 0;
  color: var(--olive-600); font-weight: 600; font-size: 15px;
}
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa a { color: var(--olive-700); text-decoration: underline; text-underline-offset: 3px; }
.prosa blockquote {
  border-left: 3px solid var(--olive-300);
  padding: 4px 0 4px 20px;
  font-family: var(--font-judul);
  font-size: 19px; line-height: 1.5; color: var(--tinta);
}
.prosa img { border-radius: var(--r-md); margin: 28px 0; }
.prosa figcaption { font-size: 13px; color: var(--tinta-soft); margin-top: -18px; }

/* 4. LAYOUT ============================================================== */
.bungkus {
  width: 100%;
  max-width: var(--w-konten);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: var(--gap-section); }
.section-rapat { padding-block: 48px; }

.bg-krem   { background: var(--krem-100); }
.bg-krem-tua { background: var(--krem-200); }
.bg-putih  { background: var(--putih); }
.bg-olive  { background: var(--olive-600); color: var(--putih); }
.bg-olive .judul, .bg-olive .t-section { color: var(--putih); }
.bg-olive .teks, .bg-olive .lead { color: var(--olive-100); }
.bg-olive .kicker { color: var(--olive-200); }

.kepala-section { max-width: 640px; margin-bottom: 36px; }
.kepala-section.tengah { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

.stack   { display: flex; flex-direction: column; }
.baris   { display: flex; flex-wrap: wrap; align-items: center; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }
.gap-32  { gap: 32px; }

/* 5. KOMPONEN ============================================================ */

/* --- Tombol --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-utama { background: var(--olive-600); color: var(--putih); }
.btn-utama:hover { background: var(--olive-700); }

.btn-garis {
  background: transparent; color: var(--olive-700);
  border-color: var(--garis-kuat);
}
.btn-garis:hover { border-color: var(--olive-400); background: var(--olive-50); }

.btn-wa { background: var(--olive-600); color: var(--putih); }
.btn-wa:hover { background: var(--olive-700); }

.btn-putih { background: var(--putih); color: var(--olive-800); }
.btn-putih:hover { background: var(--krem-100); }

.btn-lembut { background: var(--krem-200); color: var(--olive-800); }
.btn-lembut:hover { background: var(--krem-300); }

.btn-blok { width: 100%; }
.btn-kecil { padding: 9px 16px; font-size: 13.5px; }

/* Tombol ikon saja — dipakai buat WhatsApp di header, biar tombol
   "Booking tanggal" yang jadi aksi utamanya. */
.btn-ikon {
  width: 40px; height: 40px; padding: 0; flex: none;
  border-color: var(--garis-kuat); color: var(--olive-700);
}
.btn-ikon svg { width: 19px; height: 19px; }
.btn-ikon:hover { background: var(--olive-50); border-color: var(--olive-400); }

.tautan-panah {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--olive-700);
}
.tautan-panah:hover { color: var(--olive-800); }
.tautan-panah svg { width: 15px; height: 15px; transition: transform .18s ease; }
.tautan-panah:hover svg { transform: translateX(3px); }

/* --- Pill / badge --- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  background: var(--krem-200); color: var(--olive-800);
}
.pill-olive { background: var(--olive-600); color: var(--putih); }
.pill-garis { background: transparent; border: 1px solid var(--garis-kuat); color: var(--tinta-muted); font-weight: 500; }
.pill-hemat { background: var(--tanah-500); color: #fff; }

/* --- Kartu dasar --- */
.kartu {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: 24px;
}
.kartu-krem { background: var(--krem-50); }
.kartu-datar { border: 0; background: var(--krem-100); }

/* --- Header --- */
.situs-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 246, .95);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.situs-header.melayang {
  border-bottom-color: var(--garis);
  box-shadow: var(--shadow-sm);
}
.header-isi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 64px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-judul); font-size: 21px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--olive-800);
  font-variation-settings: "SOFT" 50, "opsz" 20;
}
/* Lambang dua cincin. Warnanya ikut warna teks logo lewat currentColor,
   jadi otomatis berubah waktu dipakai di footer yang latarnya gelap. */
.logo-tanda {
  width: 34px; height: 24px; flex: none;
  color: var(--olive-500);
}
.logo-teks { display: inline-flex; align-items: baseline; gap: 7px; }
/* Anak langsung saja — kalau pakai `.logo span`, pembungkus .logo-teks
   ikut kena dan "Savitri" jadi ikut mengecil. */
.logo-teks > span {
  font-family: var(--font-isi); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive-500);
}
.nav-utama { display: none; }
.nav-utama a {
  font-size: 14.5px; font-weight: 500; color: var(--tinta-muted);
  padding: 8px 2px; position: relative;
}
.nav-utama a:hover { color: var(--olive-700); }
.nav-utama a[aria-current="page"] { color: var(--olive-700); font-weight: 600; }
.nav-utama a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--olive-300); border-radius: 2px;
}
.header-aksi { display: flex; align-items: center; gap: 8px; }
.header-aksi .btn { display: none; }
/* Di HP, tombol Booking tetap kelihatan — itu aksi utama situs ini */
.header-aksi .btn-utama { display: inline-flex; }
@media (max-width: 420px) {
  .header-aksi .btn-utama { padding: 9px 13px; font-size: 12.5px; }
}

.tombol-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-full);
  border: 1px solid var(--garis-kuat); color: var(--olive-800);
}
.tombol-menu svg { width: 19px; height: 19px; }
.tombol-menu .ikon-tutup { display: none; }
.tombol-menu[aria-expanded="true"] .ikon-buka { display: none; }
.tombol-menu[aria-expanded="true"] .ikon-tutup { display: block; }

.menu-hp {
  display: none;
  border-top: 1px solid var(--garis);
  background: var(--putih);
  padding: 12px 0 20px;
}
.menu-hp.terbuka { display: block; }
.menu-hp a {
  display: block; padding: 13px 4px; font-size: 16px; font-weight: 500;
  color: var(--tinta); border-bottom: 1px solid var(--krem-100);
}
.menu-hp a[aria-current="page"] { color: var(--olive-700); font-weight: 600; }
.menu-hp .btn { margin-top: 16px; }

/* --- Hero --- */
.hero { padding-block: 44px 56px; background: var(--krem-100); position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.hero .t-hero { margin-bottom: 18px; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-catatan {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 22px; font-size: 13px; color: var(--tinta-soft);
}
.hero-catatan span { display: inline-flex; align-items: center; gap: 6px; }
.hero-catatan span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--olive-400); flex: none;
}
.hero-gambar {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.hero-gambar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Empati --- */
.empati-daftar { display: grid; gap: 14px; }
.empati-item {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-lg); padding: 22px;
}
.empati-item h3 {
  font-family: var(--font-judul); font-size: 18.5px; font-weight: 500;
  line-height: 1.3; margin-bottom: 8px; color: var(--tinta);
  font-variation-settings: "SOFT" 40, "opsz" 20;
}
.empati-item p { font-size: 15px; color: var(--tinta-muted); }
.empati-tutup {
  margin-top: 28px; padding: 24px; border-radius: var(--r-lg);
  background: var(--olive-600); color: var(--putih);
}
.empati-tutup p { font-family: var(--font-judul); font-size: 20px; line-height: 1.4; }

/* --- Cara Savitri: satu alur, bukan tiga kartu --- */
.alur { position: relative; }
.alur-langkah { position: relative; padding-left: 46px; padding-bottom: 40px; }
.alur-langkah:last-child { padding-bottom: 0; }
.alur-langkah::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: -6px;
  width: 2px; background: linear-gradient(var(--olive-300), var(--olive-200));
}
.alur-langkah:last-child::before { display: none; }
.alur-nomor {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--olive-600); color: var(--putih);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700;
}
.alur-langkah h3 {
  font-family: var(--font-judul); font-size: 21px; font-weight: 500;
  line-height: 1.25; margin-bottom: 10px; color: var(--tinta);
  font-variation-settings: "SOFT" 40, "opsz" 24;
  padding-top: 2px;
}
.alur-langkah p { color: var(--tinta-muted); font-size: 16px; }
.alur-langkah p + p { margin-top: 12px; }
.alur-tutup {
  margin-top: 8px; padding: 22px 24px; border-radius: var(--r-lg);
  background: var(--krem-200); text-align: center;
}
.alur-tutup p {
  font-family: var(--font-judul); font-size: 19px; line-height: 1.4;
  color: var(--olive-800);
}

/* --- Kartu paket --- */
.paket-grid { display: grid; gap: 18px; align-items: stretch; }
.kartu-paket {
  position: relative; display: flex; flex-direction: column;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-xl); padding: 26px 24px 24px;
}
.kartu-paket.unggulan {
  border-color: var(--olive-400);
  border-width: 2px;
  background: var(--krem-50);
  box-shadow: var(--shadow-md);
}
.paket-badge {
  position: absolute; top: -13px; left: 24px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--olive-600); color: var(--putih);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.paket-nama {
  font-family: var(--font-judul); font-size: 22px; font-weight: 500;
  color: var(--tinta); font-variation-settings: "SOFT" 40, "opsz" 24;
}
.paket-untuk { font-size: 14px; color: var(--tinta-soft); margin-top: 4px; }
.paket-harga { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.paket-harga .mulai {
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-soft);
  width: 100%; margin-bottom: -2px;
}
.paket-harga .angka {
  font-family: var(--font-judul); font-size: 34px; font-weight: 500;
  line-height: 1.05; color: var(--olive-700);
  font-variation-settings: "SOFT" 40, "opsz" 40;
}
.paket-harga .satuan { font-size: 14px; color: var(--tinta-soft); }
.paket-hemat { margin-top: 12px; }
.paket-hemat .pill { margin-bottom: 6px; }
.paket-hemat .teks-mini { display: block; }
.paket-beda {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--garis);
  display: grid; gap: 12px;
}
.paket-beda-item { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.paket-beda-item svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--olive-500); }
.paket-beda-item b { font-weight: 600; color: var(--tinta); }
.paket-beda-item span { color: var(--tinta-muted); }
/* Tombol didorong ke bawah biar rata antar kartu */
.kartu-paket .paket-aksi { margin-top: auto; padding-top: 24px; display: grid; gap: 9px; }

/* Blok "semua paket sudah termasuk" */
.blok-termasuk {
  margin-top: 24px; background: var(--krem-100);
  border-radius: var(--r-xl); padding: 28px 24px;
}
.blok-termasuk h3 {
  font-family: var(--font-judul); font-size: 20px; font-weight: 500;
  margin-bottom: 4px; color: var(--tinta);
  font-variation-settings: "SOFT" 40, "opsz" 22;
}
.daftar-centang { display: grid; gap: 11px; margin-top: 18px; }
.daftar-centang li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15px; color: var(--tinta-muted);
}
.daftar-centang svg { width: 17px; height: 17px; flex: none; margin-top: 3.5px; color: var(--olive-500); }

.blok-belum {
  margin-top: 18px; border: 1px dashed var(--garis-kuat);
  border-radius: var(--r-xl); padding: 26px 24px; background: var(--putih);
}
.daftar-silang { display: grid; gap: 10px; margin-top: 16px; }
.daftar-silang li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15px; color: var(--tinta-muted);
}
.daftar-silang svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--tanah-400); }

.baris-info {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--garis);
  font-size: 14px; color: var(--tinta-muted);
}

/* --- Tumbler --- */
.tumbler {
  display: grid; gap: 28px; align-items: center;
  background: var(--olive-600); color: var(--putih);
  border-radius: var(--r-xl); padding: 32px 26px;
}
.tumbler h2 { color: var(--putih); }
.tumbler p { color: var(--olive-100); font-size: 16px; }
.tumbler p + p { margin-top: 14px; }
.tumbler-gambar { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.tumbler-gambar img { width: 100%; height: 100%; object-fit: cover; }
.tumbler-tekan {
  margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md);
  background: rgba(253, 251, 246, .12); border: 1px solid rgba(253, 251, 246, .2);
}
.tumbler-tekan p {
  font-family: var(--font-judul); font-size: 17.5px; line-height: 1.45;
  color: var(--putih); margin: 0;
}

/* --- Angka / statistik --- */
.statistik { display: grid; gap: 16px; }
.stat {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-lg); padding: 24px 22px; text-align: center;
}
.stat .angka {
  font-family: var(--font-judul); font-size: 38px; font-weight: 500;
  line-height: 1; color: var(--olive-600); display: block;
  font-variation-settings: "SOFT" 40, "opsz" 40;
}
.stat .label { font-size: 14px; color: var(--tinta-muted); margin-top: 10px; display: block; }

/* --- Testimoni --- */
.testi {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column;
}
.testi blockquote {
  font-size: 16px; line-height: 1.65; color: var(--tinta);
  flex: 1;
}
.testi-orang {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--garis);
}
.testi-foto {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: none;
}
.testi-nama { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.testi-meta { font-size: 12.5px; color: var(--tinta-soft); margin-top: 1px; }

/* --- Logo partner --- */
.partner {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.partner li {
  padding: 9px 16px; border-radius: var(--r-full);
  border: 1px solid var(--garis-kuat); background: var(--putih);
  font-size: 13.5px; color: var(--tinta-muted); font-weight: 500;
}

/* --- Real wedding --- */
.rw-grid { display: grid; gap: 18px; }
.rw {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--putih); border: 1px solid var(--garis);
  display: flex; flex-direction: column;
}
.rw-gambar { aspect-ratio: 4 / 5; overflow: hidden; background: var(--krem-100); }
.rw-gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.rw:hover .rw-gambar img { transform: scale(1.03); }
.rw-isi { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.rw-nama {
  font-family: var(--font-judul); font-size: 19px; font-weight: 500; color: var(--tinta);
  font-variation-settings: "SOFT" 40, "opsz" 20;
}
.rw-meta { font-size: 13px; color: var(--tinta-soft); margin-top: 4px; }
.rw-konsep { font-size: 14.5px; color: var(--tinta-muted); margin-top: 10px; }
.rw-impact {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--garis-kuat);
}
.rw-impact-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-600);
}
.rw-impact-angka { font-size: 14px; color: var(--tinta-muted); margin-top: 6px; }
.rw-impact-angka b { color: var(--olive-700); font-weight: 600; }
.rw-bar {
  height: 6px; border-radius: var(--r-full); background: var(--krem-200);
  margin-top: 10px; overflow: hidden;
}
.rw-bar i { display: block; height: 100%; background: var(--olive-500); border-radius: inherit; }

/* --- Kartu produk seserahan --- */
.produk-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.produk {
  display: flex; flex-direction: column;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-lg); overflow: hidden;
}
.produk-gambar { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: var(--krem-100); }
.produk-gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.produk:hover .produk-gambar img { transform: scale(1.04); }
.produk-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(253, 251, 246, .94); color: var(--olive-800);
  font-size: 11px; font-weight: 700;
}
.produk-isi { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.produk-nama {
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tinta);
}
.produk-kat { font-size: 12px; color: var(--tinta-soft); margin-top: 3px; }
.produk-harga { margin-top: 12px; }
.produk-sewa {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px;
  font-size: 16px; font-weight: 700; color: var(--olive-700);
}
@media (min-width: 640px) { .produk-sewa { font-size: 17px; } }
.produk-sewa small { font-size: 11.5px; font-weight: 600; color: var(--olive-500); }
.produk-beli { font-size: 12.5px; color: var(--tinta-soft); margin-top: 3px; }
.produk-beli s { color: var(--tinta-soft); }
.produk .btn { margin-top: 14px; }

/* --- Artikel --- */
.artikel-grid { display: grid; gap: 20px; }
.artikel-kartu { display: flex; flex-direction: column; }
.artikel-gambar {
  aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  background: var(--krem-100);
}
.artikel-gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.artikel-kartu:hover .artikel-gambar img { transform: scale(1.03); }
.artikel-kat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-600); margin-top: 16px; display: block;
}
.artikel-judul {
  font-family: var(--font-judul); font-size: 19px; font-weight: 500; line-height: 1.3;
  margin-top: 8px; color: var(--tinta);
  font-variation-settings: "SOFT" 40, "opsz" 20;
}
.artikel-kartu:hover .artikel-judul { color: var(--olive-700); }
.artikel-cuplik { font-size: 14.5px; color: var(--tinta-muted); margin-top: 8px; }
.artikel-meta { font-size: 12.5px; color: var(--tinta-soft); margin-top: 12px; }

/* --- FAQ accordion --- */
.faq { border-top: 1px solid var(--garis); }
.faq-item { border-bottom: 1px solid var(--garis); }
.faq-tombol {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; width: 100%; text-align: left;
  padding: 20px 0; font-size: 16.5px; font-weight: 600; color: var(--tinta);
  line-height: 1.4;
}
.faq-tombol:hover { color: var(--olive-700); }
.faq-ikon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--krem-200); color: var(--olive-700);
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s ease, background-color .22s ease;
  margin-top: 1px;
}
.faq-ikon svg { width: 13px; height: 13px; }
.faq-tombol[aria-expanded="true"] .faq-ikon { transform: rotate(45deg); background: var(--olive-600); color: var(--putih); }
.faq-panel { display: none; padding: 0 0 22px; max-width: 640px; }
.faq-panel.terbuka { display: block; }
.faq-panel p { font-size: 15.5px; color: var(--tinta-muted); }
.faq-panel p + p { margin-top: 12px; }
.faq-panel a { color: var(--olive-700); text-decoration: underline; text-underline-offset: 3px; }

/* --- Penutup / CTA --- */
.penutup {
  background: var(--olive-600); color: var(--putih);
  border-radius: var(--r-xl); padding: 36px 26px;
}
.penutup h2 { color: var(--putih); }
.penutup p { color: var(--olive-100); }
.penutup .btn { margin-top: 8px; }

.alamat-blok { display: grid; gap: 24px; margin-top: 32px; }
.alamat-blok h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--olive-200); margin-bottom: 8px;
}
.alamat-blok p, .alamat-blok a { font-size: 15px; color: var(--olive-100); }
.alamat-blok a:hover { color: var(--putih); text-decoration: underline; }

/* Peta: dimuat saat diklik biar gak berat */
.peta {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--krem-200);
  border: 1px solid var(--garis-kuat);
}
.peta iframe { width: 100%; height: 100%; border: 0; display: block; }
.peta-tombol {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--olive-800); background: var(--krem-200);
  background-image:
    linear-gradient(var(--krem-300) 1px, transparent 1px),
    linear-gradient(90deg, var(--krem-300) 1px, transparent 1px);
  background-size: 34px 34px;
}
.peta-tombol svg { width: 26px; height: 26px; }
.peta-tombol span { font-size: 14px; font-weight: 600; }
.peta-tombol small { font-size: 12.5px; color: var(--tinta-muted); }

/* --- Footer --- */
.situs-footer {
  background: var(--olive-800); color: var(--olive-100);
  padding-block: 48px 28px; margin-top: 0;
}
.footer-grid { display: grid; gap: 32px; }
.situs-footer .logo { color: var(--krem-200); }
.situs-footer .logo span { color: var(--olive-300); }
.situs-footer .logo-tanda { color: var(--logo-krem); }
.footer-tentang { font-size: 14.5px; color: var(--olive-200); margin-top: 14px; max-width: 340px; }
.footer-judul {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--olive-300); margin-bottom: 14px;
}
.footer-nav li + li { margin-top: 9px; }
.footer-nav a { font-size: 14.5px; color: var(--olive-100); }
.footer-nav a:hover { color: var(--krem-200); text-decoration: underline; text-underline-offset: 3px; }
.footer-bawah {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(232, 235, 224, .16);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: 13px; color: var(--olive-300);
}

/* --- Tombol WA melayang (mobile) --- */
.wa-melayang {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: var(--r-full);
  background: var(--olive-600); color: var(--putih);
  font-size: 14.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
}
.wa-melayang svg { width: 19px; height: 19px; }
.wa-melayang:hover { background: var(--olive-700); }

/* --- Form --- */
.form-grid { display: grid; gap: 16px; }
.field { display: block; }
.field > span.label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--tinta); margin-bottom: 7px;
}
.field .bantuan { display: block; font-size: 12.5px; color: var(--tinta-soft); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-md);
  background: var(--putih); font-size: 15.5px; color: var(--tinta);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder, .textarea::placeholder { color: #A9A296; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--olive-400);
  box-shadow: 0 0 0 3px var(--olive-100);
}
.textarea { min-height: 110px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C5950' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 12px; padding-right: 38px;
}
.pilihan-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); }
.pilihan {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 11px 12px; border-radius: var(--r-md);
  border: 1px solid var(--garis-kuat); background: var(--putih);
  font-size: 14px; color: var(--tinta-muted); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.pilihan input { position: absolute; opacity: 0; pointer-events: none; }
.pilihan:hover { border-color: var(--olive-300); }
.pilihan:has(input:checked) {
  border-color: var(--olive-500); background: var(--olive-50);
  color: var(--olive-800); font-weight: 600;
}
.pilihan:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--olive-100); }

.form-error { font-size: 13px; color: #A1442F; margin-top: 6px; display: none; }
.field.salah .input, .field.salah .select, .field.salah .textarea { border-color: #C2705C; }
.field.salah .form-error { display: block; }

.form-status {
  display: none; margin-top: 16px; padding: 16px 18px;
  border-radius: var(--r-md); font-size: 14.5px;
}
.form-status.tampil { display: block; }
.form-status.sukses { background: var(--olive-50); border: 1px solid var(--olive-200); color: var(--olive-800); }
.form-status.gagal { background: #FBF0EC; border: 1px solid #E8CFC6; color: #8A3F2C; }

/* --- Kalender cek tanggal --- */
.kalender { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-lg); padding: 20px; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kal-bulan { font-family: var(--font-judul); font-size: 18px; font-weight: 500; color: var(--tinta); }
.kal-nav { display: flex; gap: 6px; }
.kal-nav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--garis-kuat);
  display: flex; align-items: center; justify-content: center; color: var(--tinta-muted);
}
.kal-nav button:hover:not(:disabled) { border-color: var(--olive-400); color: var(--olive-700); }
.kal-nav button:disabled { opacity: .35; cursor: not-allowed; }
.kal-nav svg { width: 14px; height: 14px; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-hari {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--tinta-soft);
  padding-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.kal-sel {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500;
  color: var(--tinta-muted); position: relative;
}
.kal-sel.kosong { visibility: hidden; }
.kal-sel.lewat { color: #C4BEB2; }
.kal-sel.bisa { background: var(--olive-50); color: var(--olive-800); cursor: pointer; font-weight: 600; }
.kal-sel.bisa:hover { background: var(--olive-200); }
.kal-sel.penuh { background: #F7EBE7; color: #B0705E; cursor: not-allowed; text-decoration: line-through; }
.kal-sel.terpilih { background: var(--olive-600); color: var(--putih); }
.kal-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 12.5px; color: var(--tinta-muted); }
.kal-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.kal-legenda i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.kal-hasil {
  display: none; margin-top: 16px; padding: 16px;
  border-radius: var(--r-md); background: var(--krem-100); font-size: 14.5px;
}
.kal-hasil.tampil { display: block; }
.kal-hasil .btn { margin-top: 12px; }

/* --- Filter katalog --- */
.filter-bar { display: grid; gap: 12px; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 15px; border-radius: var(--r-full);
  border: 1px solid var(--garis-kuat); background: var(--putih);
  font-size: 13.5px; color: var(--tinta-muted); white-space: nowrap;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--olive-300); }
.chip[aria-pressed="true"] {
  background: var(--olive-600); border-color: var(--olive-600);
  color: var(--putih); font-weight: 600;
}
.toggle-sewa {
  display: inline-flex; padding: 4px; border-radius: var(--r-full);
  background: var(--krem-200); gap: 3px;
}
.toggle-sewa button {
  padding: 9px 18px; border-radius: var(--r-full); font-size: 13.5px;
  font-weight: 600; color: var(--olive-700);
}
.toggle-sewa button[aria-pressed="true"] { background: var(--putih); box-shadow: var(--shadow-sm); color: var(--olive-800); }

.hasil-kosong {
  display: none; text-align: center; padding: 48px 20px;
  background: var(--krem-100); border-radius: var(--r-lg);
}
.hasil-kosong.tampil { display: block; }

/* --- Alur booking tiga langkah --- */
.langkah-bar {
  position: sticky; top: 64px; z-index: 30;
  background: rgba(253, 251, 246, .95);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--garis);
  padding-block: 12px;
}
.langkah-daftar {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.langkah-daftar::-webkit-scrollbar { display: none; }
.langkah-titik {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 14px 7px 8px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 500; color: var(--tinta-soft);
  white-space: nowrap; transition: background-color .18s ease, color .18s ease;
}
.langkah-titik + .langkah-titik { margin-left: 2px; }
.langkah-angka {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--krem-200); color: var(--tinta-muted);
  font-size: 12px; font-weight: 700;
}
.langkah-titik.aktif { background: var(--olive-50); color: var(--olive-800); font-weight: 600; }
.langkah-titik.aktif .langkah-angka { background: var(--olive-600); color: var(--putih); }
.langkah-titik.selesai { color: var(--olive-700); cursor: pointer; }
.langkah-titik.selesai .langkah-angka { background: var(--olive-200); color: var(--olive-800); }
.langkah-titik.selesai:hover { background: var(--olive-50); }

.langkah { padding-block: 40px; }
.langkah + .langkah { border-top: 1px solid var(--garis); }
/* Langkah yang belum dibuka: masih ada di DOM (biar isian gak hilang), tapi
   diredupkan dan gak bisa di-tab supaya fokusnya jelas. */
.langkah.terkunci {
  opacity: .35; pointer-events: none; filter: saturate(.4);
  max-height: 110px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

/* Kartu pilih paket */
.pilih-paket { display: grid; gap: 12px; }
.paket-pilih { position: relative; display: block; cursor: pointer; }
.paket-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.paket-pilih-isi {
  display: block; padding: 20px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-lg);
  background: var(--putih);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.paket-pilih:hover .paket-pilih-isi { border-color: var(--olive-300); }
.paket-pilih input:checked + .paket-pilih-isi {
  border-color: var(--olive-500); border-width: 2px; padding: 19px;
  background: var(--olive-50); box-shadow: var(--shadow-md);
}
.paket-pilih input:focus-visible + .paket-pilih-isi { box-shadow: 0 0 0 3px var(--olive-100); }
.paket-pilih-badge {
  display: inline-block; margin-bottom: 8px; padding: 4px 11px;
  border-radius: var(--r-full); background: var(--olive-600); color: var(--putih);
  font-size: 11.5px; font-weight: 700;
}
.paket-pilih-nama {
  display: block; font-family: var(--font-judul); font-size: 20px; font-weight: 500;
  color: var(--tinta); font-variation-settings: "SOFT" 40, "opsz" 22;
}
.paket-pilih-harga {
  display: block; margin-top: 6px;
  font-family: var(--font-judul); font-size: 26px; font-weight: 500; color: var(--olive-700);
  font-variation-settings: "SOFT" 40, "opsz" 30;
}
.paket-pilih-harga small {
  font-family: var(--font-isi); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-soft);
}
.paket-pilih-ket { display: block; margin-top: 6px; font-size: 14px; color: var(--tinta-muted); }
.paket-pilih .pill { display: inline-flex; margin-top: 10px; }

/* Ringkasan sebelum kirim */
.ringkasan {
  background: var(--krem-100); border-radius: var(--r-lg); padding: 24px;
}
.ringkasan-daftar { display: grid; gap: 10px; }
.ringkasan-baris {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
  font-size: 14.5px; padding-bottom: 10px; border-bottom: 1px dashed var(--garis-kuat);
}
.ringkasan-baris:last-child { border-bottom: 0; padding-bottom: 0; }
.ringkasan-baris dt { color: var(--tinta-soft); }
.ringkasan-baris dd { margin: 0; font-weight: 600; color: var(--tinta); text-align: right; }

/* Layar selesai */
.ikon-sukses {
  width: 62px; height: 62px; border-radius: 50%; margin-inline: auto;
  background: var(--olive-600); color: var(--putih);
  display: flex; align-items: center; justify-content: center;
}
.ikon-sukses svg { width: 30px; height: 30px; }
.kode-booking {
  display: inline-block; padding: 14px 26px; border-radius: var(--r-md);
  background: var(--putih); border: 1px dashed var(--garis-kuat);
}
.kode-booking strong {
  display: block; margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 20px; letter-spacing: .06em; color: var(--olive-700);
}

/* --- Breadcrumb --- */
.remah { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--tinta-soft); padding-block: 20px; }
.remah a:hover { color: var(--olive-700); text-decoration: underline; }
.remah li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--garis-kuat); }
.remah li { display: inline-flex; align-items: center; }

/* --- Tabel banding sewa vs beli --- */
.banding {
  display: grid; gap: 12px; grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
.banding-sel { border-radius: var(--r-lg); padding: 18px; border: 1px solid var(--garis); }
.banding-sel.utama { border-color: var(--olive-400); background: var(--olive-50); border-width: 2px; }
.banding-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-soft); }
.banding-sel.utama .banding-label { color: var(--olive-600); }
.banding-angka {
  font-family: var(--font-judul); font-size: 26px; font-weight: 500; color: var(--tinta);
  margin-top: 8px; font-variation-settings: "SOFT" 40, "opsz" 30;
}
.banding-sel.utama .banding-angka { color: var(--olive-700); }
.banding-ket { font-size: 13px; color: var(--tinta-muted); margin-top: 8px; }

/* 6. UTILITIES =========================================================== */
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.tengah { text-align: center; }
.tebal { font-weight: 600; }
.blok { display: block; }
.sembunyi { display: none !important; }
.penuh { width: 100%; }
.antar { justify-content: space-between; }
.pusat { justify-content: center; }
.rata-atas { align-items: flex-start; }
.nowrap { white-space: nowrap; }
.olive { color: var(--olive-700); }
.relatif { position: relative; }

/* Animasi masuk yang sangat ringan (CSS-only trigger via JS class) */
.muncul { opacity: 0; transform: translateY(14px); }
.muncul.tampil { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .muncul { opacity: 1; transform: none; }
}

/* 7. RESPONSIVE ========================================================== */
@media (min-width: 640px) {
  :root { --gap-section: 88px; }
  .bungkus { padding-inline: 28px; }
  .t-hero { font-size: 46px; }
  .t-section { font-size: 32px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .empati-daftar { grid-template-columns: repeat(2, 1fr); }
  .statistik { grid-template-columns: repeat(3, 1fr); }
  .produk-grid { grid-template-columns: repeat(3, 1fr); }
  .rw-grid { grid-template-columns: repeat(2, 1fr); }
  .artikel-grid { grid-template-columns: repeat(3, 1fr); }
  .tumbler { padding: 40px 36px; }
  .penutup { padding: 48px 40px; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field-lebar { grid-column: 1 / -1; }
  .pilihan-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-bar { gap: 14px; }
  .alamat-blok { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .nav-utama { display: flex; align-items: center; gap: 26px; }
  .header-aksi .btn { display: inline-flex; }
  .tombol-menu { display: none; }
  .menu-hp { display: none !important; }
  .wa-melayang { display: none; }
  .header-isi { height: 74px; }
  .hero { padding-block: 64px 80px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .t-hero { font-size: 54px; }
  .t-section { font-size: 36px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .paket-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .empati-daftar { grid-template-columns: repeat(4, 1fr); }
  .produk-grid { grid-template-columns: repeat(4, 1fr); }
  /* Cuplikan di beranda cuma 6 item — 3 kolom biar barisnya rata */
  .produk-grid.cuplikan { grid-template-columns: repeat(3, 1fr); }
  .rw-grid { grid-template-columns: repeat(4, 1fr); }
  .tumbler { grid-template-columns: 1fr 1fr; padding: 48px; gap: 48px; }
  .blok-termasuk { padding: 36px 40px; }
  .blok-termasuk .daftar-centang { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
  .blok-belum { padding: 32px 40px; }
  .blok-belum .daftar-silang { grid-template-columns: repeat(3, 1fr); gap: 12px 32px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
  .alamat-blok { grid-template-columns: 1fr 1fr; gap: 40px; }
  .penutup { padding: 56px; }
  .alur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .alur-langkah { padding-left: 0; padding-bottom: 0; padding-top: 48px; }
  .alur-langkah::before {
    left: 42px; right: -32px; top: 16px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--olive-300), var(--olive-200));
  }
  .alur-tutup { grid-column: 1 / -1; margin-top: 16px; }

  /* Versi tegak — dipakai kalau langkahnya lebih dari tiga, atau kalau
     alurnya diletakkan di kolom sempit. Garis penghubungnya ikut memutar
     jadi vertikal lagi. */
  .langkah-bar { top: 74px; padding-block: 14px; }
  .langkah-daftar { gap: 10px; }
  .langkah-titik { font-size: 14.5px; padding: 8px 18px 8px 9px; }
  .langkah { padding-block: 56px; }
  .pilih-paket { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ringkasan { padding: 28px 32px; }

  .alur.alur-tegak { display: block; }
  .alur-tegak .alur-langkah { padding: 0 0 40px 46px; }
  .alur-tegak .alur-langkah:last-child { padding-bottom: 0; }
  .alur-tegak .alur-langkah::before {
    left: 15px; right: auto; top: 34px; bottom: -6px;
    width: 2px; height: auto;
    background: linear-gradient(var(--olive-300), var(--olive-200));
  }
  .kepala-section { margin-bottom: 44px; }
}

@media (min-width: 1120px) {
  .t-hero { font-size: 60px; }
}

/* Print — jarang dipakai tapi murah */
@media print {
  .situs-header, .situs-footer, .wa-melayang, .peta { display: none !important; }
  body { background: #fff; }
}