/* =========================================================
   DESIGN TOKENS
========================================================= */
:root {
  --color-cream: #fdf6e3;
  --color-cream-2: #fbecc4;
  --color-ink: #3d3555;
  --color-ink-soft: #7fa0bb;
  --color-espresso: #4a6350;
  --color-espresso-dark: #384b3d;
  --color-whatsapp: #1fae7a;
  --color-white: #ffffff;
  --color-line: rgba(61, 53, 85, 0.15);

  /* Palet pastel baru: sky blue, lavender, peach, butter yellow, dusty
     pink, sage green. Karena semuanya pastel/terang, --color-ink &
     --color-espresso sengaja dibuat versi "gelap"-nya (plum tua &
     sage tua) supaya teks dan tombol solid tetap kebaca -- warna
     pastel aslinya dipakai untuk aksen, border, dan gradient bg. */
  --color-dusty-rose: #f8bcc5;
  --color-marigold: #f6be96;   /* peach / warm apricot */
  --color-marigold-dark: #e8935c;
  --color-sage: #b2ccb4;
  --color-sky: #b8d0e2;
  --color-lavender: #d2c5e5;

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-label: "Cormorant Garamond", Georgia, serif;

  --gutter: 28px;
  --section-pad: 88px;
  --max-width: 480px; /* undangan didesain mobile-first, dibatasi lebar di desktop */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   RESET & BASE
========================================================= */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-ink);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.lock-scroll { overflow: hidden; height: 100vh; }

img { max-width: 100%; display: block; }

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

button { font-family: inherit; cursor: pointer; }

.stage {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: transparent;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
  overflow-x: hidden;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}

.section {
  padding: var(--section-pad) var(--gutter);
  position: relative;
}

.section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  text-align: center;
}

/* Judul "RSVP" dibuat lebih besar & responsif, khusus di section ini
   saja — tidak memengaruhi .section-title di Galeri/Gift/Ucapan. */
#rsvp .section-title {
  font-size: clamp(30px, 9vw, 36px);
}

.divider {
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-dusty-rose);
  opacity: 0.9;
  margin: 22px auto;
}

/* =========================================================
   COVER / OPENING GATE
========================================================= */
/* =========================================================
   BACKGROUND SLIDESHOW (1 background bersama, dipakai tembus
   di belakang section Hero / Save the Date / Gallery yang
   sengaja dibuat transparan). Baru mulai berganti otomatis
   setelah tombol "Open Invitation" diklik -- lihat main.js.
========================================================= */
.bg-slideshow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-ink-soft);
}

.bg-slideshow__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: calc(50% + 10%) center;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 1.4s ease, transform 1.8s var(--ease);
}

/* Pengaturan khusus untuk gambar slide kedua */
.bg-slideshow__slide:nth-child(1) {
  background-position: center; /* Sesuaikan posisi sesuai kebutuhan gambar ketiga */
}

/* Pengaturan khusus untuk gambar slide kedua */
.bg-slideshow__slide:nth-child(2) {
  background-position: calc(50% + 5%) center; /* Sesuaikan posisi sesuai kebutuhan gambar ketiga */
}

/* Pengaturan khusus untuk gambar slide ketiga */
.bg-slideshow__slide:nth-child(3) {
  background-position: calc(50% + 20%) center; /* Sesuaikan posisi sesuai kebutuhan gambar ketiga */
}

.bg-slideshow__slide.is-active {
  opacity: 1;
}

/* Begitu tombol "Open Invitation" diklik, foto slideshow (yang sedang
   aktif di belakang Hero) sedikit mengecil ke ukuran normal -- efek
   zoom-settle sekali saat pertama dibuka, kesan foto "muncul mendekat"
   seperti amplop dibuka. Class .is-open dipicu dari main.js. */
.bg-slideshow.is-open .bg-slideshow__slide {
  transform: scale(1);
}

#cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
  transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}

#cover.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cover-blur-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: calc(50% + 10%) center;
  background-color: var(--color-ink-soft);
  filter: blur(6px) brightness(0.55);
  transform: scale(1.1);
}

.cover-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  /*background: var(--color-white);*/
  background: var(--color-cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  animation: cardRise 0.9s var(--ease) both;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Animasi "popup" saat tombol Open Invitation diklik: kartu mengecil
   sambil memudar lebih dulu (seperti modal/popup ditutup), baru
   backdrop gelapnya ikut hilang sedikit lebih lambat -- efek berlapis
   supaya terasa lebih halus daripada fade polos. */
#cover.is-hidden .cover-card {
  opacity: 0;
  transform: scale(0.82) translateY(-16px);
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cover-card__photo {
  height: 320px;
  /*background-size: cover;*/
  background-size: 200%;
  /*background-position: center;*/
  /*background-position: center calc(50% + 10%);*/
  background-position: center calc(50% + 15%);
  background-color: var(--color-ink-soft);
}

.cover-card__body {
  padding: 26px 26px 30px;
  text-align: center;
}

.cover-card__names {
  font-family: var(--font-display);
  font-size: 23px;
  margin: 6px 0 18px;
  letter-spacing: 0.03em;
}

.cover-card__to {
  font-size: 14px;
  opacity: 0.7;
  margin: 0 0 4px;
}

.cover-card__guest {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 16px;
}

.cover-card__note {
  font-size: clamp(11px, 3vw, 12px);
  line-height: 1.5;
  opacity: 0.6;
  margin: 0 0 22px;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color .25s var(--ease);
  background: none;
}

.btn:active { transform: scale(0.97); }

.btn-solid {
  background: var(--color-espresso);
  color: var(--color-white);
}
.btn-solid:hover { background: var(--color-espresso-dark); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-white); }

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
}
.btn-whatsapp:hover { filter: brightness(0.95); }

.btn-block { width: 100%; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-select {
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}
.btn-select.is-active {
  background: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-white);
}

/* Pastel di palet ini terlalu terang untuk teks putih, jadi tombol
   "Attending" aktif dibuat dusty-pink dengan teks ink gelap -- tetap
   beda & "pop" dari tombol default (sage tua + teks putih), tapi
   kontrasnya tetap aman dibaca. */
.js-rsvp-choice[data-status="attend"].is-active {
  background: var(--color-dusty-rose);
  border-color: var(--color-dusty-rose);
  color: var(--color-ink);
}

/* =========================================================
   HERO
========================================================= */
#hero {
  padding: 0;
}

.hero-photo {
  height: 100vh;
  min-height: 560px;
  background-color: transparent;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  text-align: center;
  position: relative;
}

/* Animasi "amplop terbuka": monogram/label/nama baru muncul (fade +
   geser) tepat pas tombol "Open Invitation" diklik, dengan jeda
   bertahap -- dipicu class .is-open dari main.js, BUKAN lewat sistem
   scroll-reveal biasa. Ini sengaja dipisah dari .reveal karena section
   hero sudah "kelihatan" (secara geometris) sejak awal walau ketutup
   cover, jadi kalau pakai .reveal biasa, animasinya akan selesai
   diam-diam duluan sebelum sempat diklik. */
.hero-monogram {
  opacity: 0;
  transform: translateY(-26px);
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
}

.hero-photo__content > .eyebrow,
.hero-names {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
}

.hero-photo.is-open .hero-monogram,
.hero-photo.is-open .hero-photo__content > .eyebrow,
.hero-photo.is-open .hero-names {
  opacity: 1;
  transform: none;
}

.hero-photo.is-open .hero-monogram { transition-delay: 1.2s; }
.hero-photo.is-open .hero-photo__content > .eyebrow { transition-delay: 1.4s; }
.hero-photo.is-open .hero-names { transition-delay: 1.6s; }

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246,190,150,0.12) 0%, rgba(248,188,197,0.35) 55%, rgba(61,53,85,0.62) 100%);
}

.hero-photo__content {
  position: relative;
  z-index: 1;
  padding: 0 24px 56px;
  width: 100%;
}

.hero-monogram {
  /*font-family: var(--font-display);*/
  /*font-size: 48px;*/
  /*margin: 0 0 6px;*/
  /*font-weight: 500;*/
  margin: 0 auto;
  filter: invert(1);
  width:100px;
  height:auto;
}

.hero-names {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}

.opening-quote {
  background: var(--color-cream);
  padding: 64px var(--gutter);
  margin-bottom:-10px;
  text-align: center;
}

.opening-quote p {
  font-family: var(--font-display);
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.6;
  font-style: italic;
  max-width: 340px;
  margin: 0 auto;
}

/* =========================================================
   COUPLE
========================================================= */
.couple-block {
  text-align: center;
  padding: var(--section-pad) var(--gutter) 40px;
  background: var(--color-cream);
}

.couple-photo {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  margin: 0 auto 26px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream-2);
  border: 1px solid var(--color-line);
}

.couple-name {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 14px;
}

.couple-relation {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 6px;
}

.couple-parents {
  font-size: 15px;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

.couple-photo-together {
  position: relative;
  /*height: 70vh;*/
  min-height: 420px;
  background-size: cover;
  /*background-position: center;*/
  background-position: calc(50% + 0%) calc(50% + 35%);
  background-color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.couple-photo-together::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.couple-photo-together span {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =========================================================
   SAVE THE DATE + EVENT CARD
========================================================= */
.savedate {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  padding: 70px var(--gutter) 40px;
  text-align: center;
}

.savedate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(61,53,85,0.58) 0%, rgba(184,208,226,0.35) 55%, rgba(210,197,229,0.35) 100%);
}

.savedate-title {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 36px);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 34px;
  letter-spacing: 0.03em;
}

.countdown {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
}

.countdown__unit {
  color: var(--color-white);
  min-width: 58px;
}

.countdown__num {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-marigold);
  display: block;
  line-height: 1;
}

.countdown__label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Kartu detail acara dibuat flex:1 supaya SELALU mengisi penuh sisa
   tinggi section .savedate (tidak lagi menyisakan celah/terpotong di
   bawahnya kalau isinya sedikit, dan tetap otomatis memanjang kalau
   event-nya banyak). */
.event-card {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 22px;
  padding: 44px 26px 40px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}

.event-card__heading {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 10px;
}

.event-card__date {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 26px;
  letter-spacing: 0.04em;
}

/* =========================================================
   EVENT ITEM (satu blok per acara: Pemberkatan / Resepsi / dst)
   Setiap field di bawah ini OPSIONAL — kalau kosong di content.php,
   otomatis tidak ditampilkan (lihat renderEventIcon() & index.php).
========================================================= */
.event-item {
  text-align: center;
  padding: 26px 0;
  border-top: 1px solid var(--color-dusty-rose);
}

.event-item:first-of-type {
  border-top: 1px solid var(--color-dusty-rose);
  padding-top: 30px;
}

.event-item__icon-wrap {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  opacity: 0.85;
}

.event-item__icon-wrap svg,
.event-item__icon-wrap .event-item__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-item__title {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 6px;
}

.event-item__datetime {
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0 0 12px;
}

.event-item__venue {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.event-item__address {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0 auto 10px;
  max-width: 260px;
}

.event-item__maps {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  margin-bottom: 4px;
}

.event-item__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 4px;
}

.event-item__links .event-item__maps { margin-bottom: 0; }

.event-item__addcal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  color: inherit;
}

.event-item__addcal-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.event-item__dresscode {
  margin-top: 14px;
}

.event-item__dresscode-note {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 260px;
  margin: 0 auto 10px;
}

.dress-swatches {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.dress-swatch {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--color-line);
}

.dresscode-btn {
  font-size:10px;
}

/* Styling Dresscode Lightbox */
.dresscode-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dresscode-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.dresscode-lightbox__content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dresscode-lightbox__content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dresscode-lightbox__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  padding: 5px 10px;
}

.event-item__dresscode-footer {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
  padding-top:10px;
  max-width: 260px;
  margin: 0 auto 10px;
}

/* =========================================================
   RSVP
========================================================= */
#rsvp {
  background: var(--color-cream);
  text-align: center;
}

.rsvp-dear {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 6px;
}

.rsvp-guest {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 18px;
}

.rsvp-deadline {
  font-size: 14px;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 30px;
  opacity: 0.8;
}

.rsvp-deadline--date {
  margin-bottom: 6px;
}

.rsvp-choices {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.rsvp-current-status {
  font-size: 12px;
  opacity: 0.7;
  margin: -10px 0 22px;
}

.rsvp-current-status--note {
  margin-top: 0;
}

/* Kartu kuota + status per-acara (muncul kalau rsvp_qty_mode di
   content.php = 'single' DAN tamu diundang ke 2 acara sekaligus). */
.rsvp-quota-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto 14px;
}

.rsvp-quota-item {
  flex: 1 1 160px;
  min-width: 145px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  text-align: center;
}

.rsvp-quota-item__title {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 6px;
}

.rsvp-quota-item__quota {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.8;
  margin: 0 0 4px;
}

.rsvp-quota-item__status {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
}

.rsvp-qty-area {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.rsvp-qty-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 10px;
}

.rsvp-qty-select {
  width: 100%;
  max-width: 110px;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 24px 12px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-ink);
  background: var(--color-white);
  color: var(--color-ink);
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

.rsvp-qty-select option {
  text-align: center;
}

/* Select jumlah tamu & tombol konfirmasi ditaruh sejajar (inline),
   bukan bertumpuk atas-bawah. "nowrap" + qty-area yang boleh menyusut
   (flex-shrink, TANPA flex-grow supaya tidak melebar dan bikin jarak
   kosong ke tombol) memaksa keduanya tetap satu baris rapat walau di
   layar HP sempit. Kalau "Tidak Hadir" dipilih (qty area disembunyikan),
   tombol konfirmasi otomatis berdiri sendiri di tengah. */
.rsvp-qty-confirm-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 10px;
}

.rsvp-confirm-area {
  margin-top: 0;
  flex: 0 0 auto;
}

/* =========================================================
   RSVP - PILIHAN ACARA (multi-event, hanya muncul kalau tamu
   diundang ke lebih dari 1 acara sekaligus)
========================================================= */
.rsvp-event-area {
  margin-bottom: 20px;
}

.rsvp-event-choices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rsvp-event-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-ink);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.rsvp-event-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-espresso);
  cursor: pointer;
}

/* Mode 'single' (content.php -> rsvp_qty_mode): tiap acara ditampilkan
   sebagai baris sendiri, checkbox + select jumlah tamu berdampingan,
   supaya jelas kuotanya tidak digabung dengan acara lain. */
.rsvp-event-choices--single {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.rsvp-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid var(--color-line);
}

.rsvp-event-row .rsvp-event-checkbox {
  border: none;
  padding: 0;
  flex: 1 1 auto;
}

.rsvp-event-row .js-rsvp-event-qty {
  flex: 0 0 auto;
  width: auto;
  max-width: 130px;
}

.rsvp-event-row .js-rsvp-event-qty:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rsvp-status-msg {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 18px 0;
  min-height: 24px;
}

.rsvp-note {
  margin-top: 36px;
  padding: 0 10px;
}

/* =========================================================
   TOAST / NOTIFIKASI SUKSES-GAGAL (RSVP & Wishes)
========================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  max-width: min(90vw, 380px);
  width: max-content;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-white);
  background: var(--color-ink);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.toast--success { background: var(--color-espresso); }
.toast--error   { background: #a24444; }

.rsvp-note p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto;
  opacity: 0.8;
}

.rsvp-help {
  margin-top: 46px;
  padding-top: 36px;
  border-top: 1px solid var(--color-line);
}

.rsvp-help p {
  font-size: 13px;
  opacity: 0.75;
  max-width: 280px;
  margin: 0 auto 18px;
}

/* =========================================================
   GALLERY
========================================================= */
#gallery {
  position: relative;
  padding: var(--section-pad) 0;
  background: transparent;
}

/* Overlay gelap tipis supaya judul & carousel tetap kebaca jelas,
   nggak peduli foto slideshow apa yang lagi tampil di belakangnya. */
#gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61,53,85,0.4) 0%, rgba(178,204,180,0.22) 100%);
  z-index: 0;
}

#gallery .section-title,
#gallery .carousel,
#gallery .carousel-dots {
  position: relative;
  z-index: 1;
}

#gallery .section-title { color: var(--color-white); margin-bottom: 30px; }

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s var(--ease);
}

.carousel-slide {
  flex: 0 0 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--color-ink-soft);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.carousel-arrow--prev { left: 14px; }
.carousel-arrow--next { right: 14px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}

.carousel-dot.is-active { background: var(--color-sage); }

/* =========================================================
   GIFT
========================================================= */
#gift {
  background-size: cover;
  background-position: center;
  background-color: var(--color-espresso-dark);
  position: relative;
  color: var(--color-white);
  text-align: center;
  padding: var(--section-pad) 0;
}

#gift::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(61,53,85,0.74) 0%, rgba(210,197,229,0.55) 55%, rgba(248,188,197,0.5) 100%);
}

#gift .section-inner { position: relative; z-index: 1; }

#gift .section-title { color: var(--color-white); }

.gift-intro {
  font-size: 14px;
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto 36px;
  opacity: 0.85;
}

.bank-row {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.bank-row__info p {
  margin: 0;
}

.bank-row__bank {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px !important;
}

.bank-row__number {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 4px !important;
}

.bank-row__holder {
  font-size: 12px;
  opacity: 0.8;
}

.copy-btn {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  white-space: nowrap;
  padding: 6px 0;
}

/* =========================================================
   WISHES
========================================================= */
#wishes { background: var(--color-cream); }

.wish-form input,
.wish-form textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-white);
  margin-bottom: 14px;
  resize: vertical;
}

.wish-form textarea { min-height: 90px; }

.wish-list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px;
}

.wish-item {
  background: var(--color-espresso);
  color: var(--color-white);
  border-radius: 14px;
  padding: 18px 20px;
  border-left: 3px solid var(--color-marigold);
}

.wish-item__name {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

.wish-item__message {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.9;
  margin: 0;
}

.wish-empty {
  padding: 22px 20px;
  text-align: center;
  font-size: 13px;
  background: var(--color-espresso);
  color: rgba(255,255,255,0.85);
  border-radius: 14px;
}

/* =========================================================
   CLOSING
========================================================= */
#closing {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: var(--color-ink-soft);
  display: flex;
  align-items: flex-end;
  text-align: center;
  color: var(--color-white);
}

#closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(184,208,226,0) 28%, rgba(61,53,85,0.62) 75%, rgba(61,53,85,0.85) 100%);
}

.closing-content {
  position: relative;
  z-index: 1;
  padding: 0 28px 40px;
  width: 100%;
}

.closing-title {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.closing-message {
  font-size: 14px;
  line-height: 1.7;
  max-width: 300px;
  margin: 0 auto 28px;
  opacity: 0.9;
}

.closing-footer {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* =========================================================
   NAV (hamburger)
========================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  z-index: 60;
  display: flex;
  justify-content: flex-start;
  padding: 18px var(--gutter);
  pointer-events: none;
}

.hamburger {
  pointer-events: all;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(61,53,85,0.5);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hamburger span {
  width: 18px;
  height: 1.5px;
  background: var(--color-white);
  display: block;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-espresso-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.nav-overlay.is-open { opacity: 1; visibility: visible; }

.nav-overlay a {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
}

.nav-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 26px;
  line-height: 1;
}

/* =========================================================
   MUSIC TOGGLE (fixed bottom right)
========================================================= */
.music-toggle {
  position: fixed;
  bottom: 24px;
  right: 50%;
  transform: translateX(calc(var(--max-width) / 2 - 58px));
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.music-toggle.is-visible { opacity: 1; visibility: visible; }

.music-toggle svg { width: 18px; height: 18px; }

/* Secara default tampilkan icon play, sembunyikan pause */
#musicToggle .icon-pause { display: none; }
#musicToggle .icon-play { display: block; }

/* Jika sedang memutar musik, balik kondisinya */
#musicToggle[data-playing="true"] .icon-play { display: none; }
#musicToggle[data-playing="true"] .icon-pause { display: block; }


@media (max-width: 520px) {
  .music-toggle {
    right: 24px; /* di layar sempit, taruh langsung 24px dari tepi kanan (pojok kanan bawah) */
    transform: none;
  }
}

/* =========================================================
   SCROLL REVEAL ANIMATIONS
========================================================= */
/* Elemen dengan class .reveal sembunyi dulu, lalu muncul (fade + geser)
   saat masuk ke area layar ketika discroll. Arah & jeda diatur lewat
   class tambahan di HTML: reveal--up / --down / --left / --right / --zoom
   dan reveal--delay-1 s/d reveal--delay-4. Logic pemicunya ada di main.js. */
.reveal {
  opacity: 0;
  transition: opacity 2.15s var(--ease), transform 2.15s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none !important;
}

.reveal--up    { transform: translateY(48px); }
.reveal--down  { transform: translateY(-48px); }
.reveal--left  { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }
.reveal--zoom  { transform: scale(0.88); }
.reveal--fade  { transform: none; }

.reveal--delay-1 { transition-delay: .18s; }
.reveal--delay-2 { transition-delay: .36s; }
.reveal--delay-3 { transition-delay: .54s; }
.reveal--delay-4 { transition-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width: 900px) {
  :root { --section-pad: 110px; }
  .stage { margin: 40px auto; min-height: auto; border-radius: 12px; overflow: hidden; }
}

@media (max-width: 480px) {
  
}

@media (max-width: 380px) {
  .section-title { font-size: 24px; }
  .closing-title { font-size: 28px; }
}