/* =========================================================
   DESIGN TOKENS
========================================================= */
:root {
  --color-cream: #f7f2e9;
  --color-cream-2: #ede7d8;
  --color-ink: #3e3a32;
  --color-ink-soft: #4a453a;
  --color-espresso: #4c6b78;
  --color-espresso-dark: #37505c;
  --color-whatsapp: #1fae7a;
  --color-white: #ffffff;
  --color-line: rgba(62, 58, 50, 0.15);

  /* Palet pastel terinspirasi dari foto prewedding: hijau sage
     (jeruk limau di pasar & rumput), dusty blue (galon air & kemeja
     groom), terracotta (lentera & sepatu), dan blush dusty rose
     (blouse bride) -- dipakai sebagai aksen di beberapa titik saja,
     bukan menggantikan warna dasar. Warna "espresso" di atas kini
     jadi dusty blue gelap, dipakai untuk semua panel solid/tombol
     utama supaya identitas warna baru terasa konsisten. */
  --color-dusty-rose: #d8b4ac;
  --color-marigold: #d98f6f;
  --color-marigold-dark: #c07a5c;
  --color-sage: #b7c7a0;

  --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: 1px;
  background: currentColor;
  opacity: 0.4;
  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: center;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 1.4s ease, transform 1.8s var(--ease);
}

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

/* 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% + 35%) center; /* Sesuaikan posisi sesuai kebutuhan gambar ketiga */
}

/* 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: 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);
  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-position: center;
  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);
}

/* "Attending" dikasih warna marigold saat aktif -- aksen hangat yang
   diambil dari bunga marigold di foto prewedding, sekaligus beda dari
   "Not Attending" biar terasa lebih inviting. */
.js-rsvp-choice[data-status="attend"].is-active {
  background: var(--color-marigold);
  border-color: var(--color-marigold);
}

/* =========================================================
   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(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 85%);
}

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

.hero-photo__content .eyebrow{
  font-size:20px;
}

.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-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;
}

/* ---------------------------------------------------------
   COUPLE — MODE "SINGLE"
   (content.php: 'couple_photo_mode' => 'single')
   1 foto berdua dalam frame arch + info mempelai di bawahnya.
   Info: portrait = atas-bawah, landscape = kiri-kanan
   (bisa dipaksa lewat 'couple_info_layout': auto | stack | side)
--------------------------------------------------------- */
.couple-single {
  background: var(--color-cream);
  padding: var(--section-pad) 0 0; /* padding bawah & samping ada di __inner, agar .couple-photo-together bisa full-width */
  position: relative;
}

.couple-single__inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-pad);
  text-align: center;
}

.couple-single__eyebrow {
  margin: 0 0 30px;
  color: var(--color-ink-soft);
}

/* Frame arch: garis tipis di luar + foto di dalam (bentuk kubah) */
.couple-single__frame {
  width: min(100%, 320px);
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--color-dusty-rose);
  border-radius: 200px 200px 6px 6px;
}

.couple-single__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 190px 190px 2px 2px;
  background-size: cover;
  background-position: center 25%;
  background-color: var(--color-cream-2);
  box-shadow: 0 26px 50px -26px rgba(55, 80, 92, 0.45);
}

/* --- Info mempelai (default: atas-bawah) --- */
.couple-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
}

.couple-person { width: 100%; }

.couple-person__relation {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-espresso);
  margin: 0 0 10px;
}

.couple-person__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 14px;
}

.couple-person__parents {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  /*max-width: 270px;*/
  margin: 0 auto;
}

/* garis kecil aksen di atas keterangan orang tua */
.couple-person__parents::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-marigold);
  margin: 0 auto 14px;
}

/* Pemisah "&" (garis — & — garis) */
.couple-info__amp {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 240px;
  margin: 30px 0;
  color: var(--color-marigold-dark);
}

.couple-info__amp::before,
.couple-info__amp::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-dusty-rose);
}

.couple-info__amp span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
}

/* --- Info mempelai: kiri-kanan --- */
.couple-info--side {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  column-gap: 14px;
}
.couple-info--side .couple-person { width: auto; }
.couple-info--side .couple-person__name { font-size: 22px; }
.couple-info--side .couple-person__parents { font-size: 13.5px; max-width: 100%; }
.couple-info--side .couple-info__amp {
  flex-direction: column;
  width: auto;
  max-width: none;
  margin: 0;
  gap: 12px;
}
.couple-info--side .couple-info__amp::before,
.couple-info--side .couple-info__amp::after {
  width: 1px;
  height: auto;
  min-height: 24px;
}

/* --- Keterangan orang tua: versi portrait/mobile vs landscape/desktop ---
   Default = versi portrait. Landscape (mode auto & section couple double)
   atau layout 'side' = versi landscape. Layout 'stack' selalu versi portrait. */
.parents-landscape { display: none; }
.couple-info--side .parents-portrait { display: none; }
.couple-info--side .parents-landscape { display: inline; }

/* auto: layar landscape -> kiri-kanan (portrait tetap atas-bawah) */
@media (orientation: landscape) {
  .couple-info--auto .parents-portrait,
  .couple-parents .parents-portrait { display: none; }
  .couple-info--auto .parents-landscape,
  .couple-parents .parents-landscape { display: inline; }

  .couple-info--auto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    column-gap: 14px;
  }
  .couple-info--auto .couple-person { width: auto; }
  .couple-info--auto .couple-person__name { font-size: 22px; }
  .couple-info--auto .couple-person__parents { font-size: 13.5px; max-width: 100%; }
  .couple-info--auto .couple-info__amp {
    flex-direction: column;
    width: auto;
    max-width: none;
    margin: 0;
    gap: 12px;
  }
  .couple-info--auto .couple-info__amp::before,
  .couple-info--auto .couple-info__amp::after {
    width: 1px;
    height: auto;
    min-height: 24px;
  }
}

/* =========================================================
   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: rgba(10, 8, 6, 0.45);
}

.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-cream);
  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: 13px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin: 0 0 12px;
}

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

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

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

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

.event-item__dresscode-note {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
  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);
}

/* =========================================================
   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-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-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;
}

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

.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: rgba(10, 8, 6, 0.35);
  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: rgba(21, 32, 37, 0.72); /* tint dusty blue gelap, senada --color-espresso-dark, ganti dari hitam pekat */
}

#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: 300px;
  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(0,0,0,0) 30%, rgba(0,0,0,0.75) 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(0,0,0,0.35);
  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: 380px) {
  .section-title { font-size: 24px; }
  .closing-title { font-size: 28px; }
}