@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* BODY */
body {
  background: #eaeaea;
}

/* WRAPPER */
.cover-wrapper {
  width: 100%;
  max-width: 450px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* BACKGROUND BLUR */
.bg-blur {
  position: absolute;
  inset: -40px; /* ⬅️ TRIK AMAN */
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(1.2);
}

.bg-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.65));
}

/* NAVBAR */
.cover-navbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 14px 16px;
  font-size: 13px;
  text-transform: uppercase;
  color: #fff;
}

.nav-left {
  text-align: left;
}
.nav-center {
  text-align: center;
  font-weight: 600;
}
.nav-right {
  text-align: right;
}

/* ===================== */
/* FRAME (KUNCI TOTAL) */
/* ===================== */
.photo-frame {
  position: relative;
  z-index: 5;

  width: 52%;
  max-width: 220px; /* ⬅️ KUNCI SUPAYA TIDAK MELEBAR */
  aspect-ratio: 1 / 1.61;
  margin: 22px auto 0;

  background: #f9f6f6ea;
  padding: 9px;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* FOTO DI DALAM FRAME */
.photo-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ⬅️ FOTO IKUT BINGKAI */
  display: block;
}
/* ===================== */
/* KERTAS SUDUT (STABIL) */
/* ===================== */
.paper-corner {
  position: absolute;
  width: 38%;
  max-width: 110px;
  pointer-events: none;
  z-index: 10;
}

/* ATAS KIRI */
.paper-corner.tl {
  top: 0;
  left: 0;
  transform: translate(-25%, -25%) rotate(-45deg);
}

/* BAWAH KANAN (MIRROR ATAS) */
.paper-corner.br {
  bottom: 0;
  right: 0;
  transform: translate(25%, 25%) rotate(-45deg) scaleX(-1) scaleY(-1);
}

/* ===================== */
/* SAVE DATE */
/* ===================== */
.save-date {
  position: relative;
  z-index: 5;
  margin-top: 9px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 26px;
  line-height: 1.4;
}

/* TAMU */
.guest-info {
  position: relative;
  z-index: 5;
  margin-top: 10px;
  text-align: center;
  color: #fff;
}

.guest-info p {
  font-size: 13px;
}

.guest-info h2 {
  font-family: Italiana, sans-serif;
  font-size: 20px;
  margin-top: 5px;
}

/* BUTTON */
.btn-open {
  position: relative;
  z-index: 5;
  margin: 24px auto 40px;

  display: flex; /* ⬅️ WAJIB */
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  padding: 8px 8px;
  border: none;
  border-radius: 5px;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.705);
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media (max-width: 380px) {
  .photo-frame {
    width: 72%;
  }

  .paper-corner {
    width: 90px;
  }
}

@media (min-width: 768px) {
  body {
    display: flex;
    justify-content: center;
  }
}

/* --- ANIMATION SYSTEM (VARIED ENTRANCE) --- */

/* 1. Background: Zoom Out (Mengecil perlahan ke ukuran asli) */
.bg-blur {
  opacity: 0;
  transform: scale(1.2);
  transition:
    opacity 3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Navbar: Turun dari atas */
.cover-navbar {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Frame Foto: Muncul perlahan dari bawah dengan scale */
.photo-frame {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition:
    opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. Teks Save Date: Slide dari Kiri */
.save-date {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 5. Info Tamu: Slide dari Kanan */
.guest-info {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 6. Tombol: Memudar di tempat (Fade In) */
.btn-open {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2.5s ease;
}

/* --- STATE AKHIR (DISET OLEH JS) --- */
.appear {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* Delay Berurutan agar tidak berbarengan */
.delay-1 {
  transition-delay: 0.2s;
} /* Background */
.delay-2 {
  transition-delay: 1s;
} /* Navbar */
.delay-3 {
  transition-delay: 1.5s;
} /* Foto */
.delay-4 {
  transition-delay: 2.2s;
} /* Save Date */
.delay-5 {
  transition-delay: 2.5s;
} /* Guest Info */
.delay-6 {
  transition-delay: 3s;
} /* Tombol */

/* --- SECTION 2: CINEMATIC WRAPPER --- */
.cinematic-wrapper {
  position: sticky; /* ⬅️ KUNCI: Agar video diam di atas saat di-scroll */
  top: 0; /* ⬅️ KUNCI: Menempel di paling atas layar */
  width: 100%;
  max-width: 450px;
  height: 100vh;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  display: none; /* Tetap none, nanti muncul lewat JS */
  z-index: 1; /* ⬅️ Z-index lebih rendah dari Section 3 */
}

/* Video Background agar Full */
.video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
  z-index: 2;
}

/* Typography Mewah */
.cinematic-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 30px;
}

.cinematic-tag {
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #c4a47c;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.cinematic-names {
  font-family: 'Italiana', serif;
  font-size: 3rem;
  color: #fff;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0;
  transform: scale(1.1);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 50px;
  opacity: 0;
}
.scroll-indicator span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

/* Animasi Pintu Membelah (Split) pada Section 1 */
.split-left {
  animation: splitLeft 1.5s forwards ease-in-out;
}
.split-right {
  animation: splitRight 1.5s forwards ease-in-out;
}

@keyframes splitLeft {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@keyframes splitRight {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Animasi Muncul Konten Cinematic */
.reveal-text {
  animation: revealFade 2s forwards ease-out;
}

@keyframes revealFade {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- SECTION 3 STACKING --- */
.profile-stack {
  position: relative;
  z-index: 10; /* ⬅️ KUNCI: Harus lebih tinggi dari Section 2 (1) */
  background: #fdfcf8;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  display: none; /* ⬅️ TAMBAHKAN INI: Agar tidak muncul di halaman awal */
  padding-bottom: 50px;
}

/* --- CLOUD DIVIDER LOGIC --- */
.cloud-divider {
  position: absolute;
  top: -84px; /* ⬅️ Awan berada di atas garis awal Section 3 */
  left: 0;
  width: 100%;
  height: 85px;
  line-height: 0;
  pointer-events: none;
  z-index: 11; /* Pastikan awan juga di atas video */
}

.cloud-divider svg {
  width: 100%;
  height: 100%;
}

/* Warna Awan (Arah Menghadap Ke Atas) */
.cloud-layer-1 {
  fill: #fdfcf8;
} /* Warna dasar section 3 */
.cloud-layer-2 {
  fill: rgba(196, 164, 124, 0.3);
} /* Emas Transparan */
.cloud-layer-3 {
  fill: rgba(0, 0, 0, 0.05);
} /* Bayangan Halus */

/* Container Utama */
.profile-stack {
  position: relative;
  z-index: 10;
  background: #fdfcf8;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  display: none;
}

.profile-inner-content {
  width: 100%;
  overflow-x: hidden; /* Mengunci animasi reveal-left/right agar tidak meluber */
  padding-top: 60px; /* Memberi ruang agar ayat tidak menempel ke awan */
  padding-bottom: 20px;
}
/* Ayat Styling */
.opening-ayat {
  text-align: center;
  padding: 0 30px;
  margin-bottom: 50px;
}
.bismillah {
  font-size: 22px;
  color: #c4a47c;
  margin-bottom: 10px;
}
.ayat-text {
  font-size: 14px;
  font-style: italic;
  color: #666;
  line-height: 1.8;
}
.ayat-surah {
  font-size: 14px;
  letter-spacing: 1px;
  color: #999;
  display: block;
  margin-top: 5px;
}

/* Grid Side-by-Side */
.editorial-grid {
  display: flex;
  justify-content: space-between;
  gap: 15px; /* Jarak antar foto */
  padding: 0 25px; /* BATAS SAMPING (MARGIN) */
}

.profile-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Photo Wrapper (Tanpa Bingkai) */
.photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.5; /* Proporsi Portrait Editorial */
  overflow: hidden;
  background: #eee;
}

.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon IG Only */
.ig-only-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
  transition: 0.3s;
}

/* Typography Info */
.profile-info {
  margin-top: 15px;
  text-align: left; /* Bisa diganti center jika ingin simetris tengah */
}

.nick-name {
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  color: #c4a47c;
  margin-bottom: -5px;
}

.full-name {
  font-family: 'Italiana', serif;
  font-size: 16px; /* Mengecil karena bersisian */
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 8px;
}

.parents {
  font-size: 11px;
  color: #777;
  line-height: 1.5;
}

/* PONDASI DASAR (State Awal: Hilang) */
.reveal-smooth {
  opacity: 0;
  transition:
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* VARIASI 1: Muncul dari Bawah (Untuk Ayat/Teks) */
.reveal-up {
  transform: translateY(50px);
}

/* VARIASI 2: Muncul dari Kiri (Untuk Profile Pria) */
.reveal-left {
  transform: translateX(-60px);
}

/* VARIASI 3: Muncul dari Kanan (Untuk Profile Wanita) */
.reveal-right {
  transform: translateX(60px);
}

/* VARIASI 4: Zoom In Halus (Untuk Ampersand/Divider) */
.reveal-zoom {
  transform: scale(0.9);
}

/* STATE AKTIF (Muncul) */
.reveal-smooth.active {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0);
}

.timer-editorial-wrapper {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 100vh;
  margin: 0 auto;
  display: none; /* ⬅️ TAMBAHKAN INI agar sembunyi di awal */
  background-color: #fdfcf8;
  overflow: hidden;
  z-index: 25;
}
.timer-editorial-wrapper[style*='display: block'] {
  display: flex !important;
}

/* Bagian Foto (Kiri) */
.timer-bg-photo {
  position: relative;
  flex: 0 0 75%; /* Foto hanya mengambil 75% lebar */
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Background diam saat di-scroll */
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.568); /* Gelap tipis saja agar foto tetap segar */
}

/* Bagian Sidebar Timer (Kanan) */
.timer-sidebar {
  flex: 0 0 25%; /* Sisanya 25% untuk tempat angka */
  height: 100%;
  display: flex;
  align-items: center; /* Tengah secara vertikal */
  justify-content: center;
  background: #fdfcf8; /* Warna solid sesuai kertas */
  border-left: 1px solid rgba(0, 0, 0, 0.05); /* Garis batas tipis */
}

/* Style Angka Vertical */
.vertical-timer-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.t-item {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.t-item span {
  font-family: 'Italiana', serif;
  font-size: 28px;
  color: #333;
  line-height: 1;
}

.t-item label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c4a47c;
  margin-top: 5px;
}
.content-over-photo {
  position: relative;
  z-index: 5;
  padding: 60px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Teks mulai dari atas foto */
}

.timer-header {
  margin-bottom: 30px;
}

.sub-title {
  display: block;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #c4a47c; /* Warna Emas */
  margin-bottom: 10px;
}

.main-title {
  font-family: 'Italiana', serif;
  font-size: 32px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
}

.quote-wrapper {
  max-width: 80%; /* Biar teks tidak terlalu lebar ke samping */
}

.main-quote {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  border-left: 2px solid #c4a47c; /* Garis aksen di samping teks */
  padding-left: 15px;
}

/* Style Tombol Simpan Tanggal */
/* Tombol Simpan Ala IG */
.calendar-action-social {
  display: flex;
  justify-content: flex-end; /* Memaksa tombol ke arah kanan */
  margin: 40px 0 40px 0;
}

.btn-bookmark-ig {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
}

.btn-bookmark-ig span {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

.btn-bookmark-ig i {
  font-size: 15px; /* Ukuran icon bookmark */
}

/* Foto Besar Merapat ke Kanan */
.large-photo-flush {
  position: relative;
  width: 100%; /* Lebih besar dari sebelumnya */
  margin-left: auto; /* Mendorong ke kanan */
  margin-right: -72px;
  aspect-ratio: 4 / 3.99; /* Sedikit lebih tinggi agar terlihat megah */
}

.photo-flush-inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  /* Sudut kanan kita buat tajam agar pas menempel di garis */
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.5);
}

.photo-flush-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kotak Serong di Belakang */
.slant-box-dark {
  position: absolute;
  top: 15px;
  left: -15px;
  width: 100%;
  height: 100%;
  background: #2a2a2a; /* Warna lebih gelap agar kontras */
  transform: rotate(-4deg);
  z-index: 1;
}

.timer-editorial-wrapper {
  /* ... pastikan position-nya relative ... */
  position: relative;
}

.bottom-triangle-decorator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 110%; /* Lebarnya dari tengah ke kanan */
  height: 200px; /* Atur tinggi segitiganya sesuai selera */
  background: #4a4a4a; /* Warna abu-abu gelap */
  z-index: 1; /* Di bawah konten teks tapi di atas background foto */

  /* ⬅️ KUNCI: Membuat segitiga dari tengah-bawah ke pojok kanan-atas lalu ke pojok kanan-bawah */
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);

  pointer-events: none; /* Agar tidak menghalangi klik jika ada tombol di dekatnya */
}

/* SECTION LIMA 5 */
/* --- SECTION 5 CONTAINER --- */
.events-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-color: #fdfcf8;
  padding: 80px 0 60px 0;
  display: none;
  z-index: 30;
  border-top: none;
  margin-top: -1px;
}

/* ANAK PANAH SAMBUNGAN */
.events-section-rebuild::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 25px;
  background-color: #4a4a4a;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 5;
}

/* HEADER STYLE */
.events-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-left: 25px;
  margin-right: 25px;
}

.header-left p {
  font-size: 14px;
  color: #121212;
  margin: 0;
  letter-spacing: 0.5px;
}

.header-right i {
  font-size: 18px;
  color: #333;
}

/* KARTU EVENT */
.editorial-event-card {
  position: relative;
  width: 90%;
  margin: 0 auto 60px auto;
  background: #000;
  clip-path: inset(0 0 0 0);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* FOTO MATI (FIXED) */
.card-bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}

/* KONTEN TEKS DALAM KARTU */
.card-inner {
  position: relative;
  z-index: 10;
  padding: 35px 25px;
  background: rgba(0, 0, 0, 0.2);
}

/* BUTTON MAPS */
.btn-editorial-maps {
  position: relative;
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #222;
  text-decoration: none;
  padding: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* BARISAN JUDUL & ICON */
.event-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.event-label {
  font-family: 'Italiana', serif;
  font-size: 22px;
  color: #c4a47c;
}

.bookmark-mini {
  color: #c4a47c;
  font-size: 18px;
}

/* BARISAN TANGGAL */
.event-row-mid {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 30px;
  color: #fff;
}

.date-number {
  font-family: 'Italiana', serif;
  font-size: 75px;
  line-height: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 25px;
}

.date-text .day-name {
  font-size: 18px;
  font-weight: 600;
  display: block;
}
.date-text .month-year {
  font-size: 14px;
  opacity: 0.8;
}

/* BARISAN DETAIL */
.event-row-bottom {
  color: #fff;
}
.time-info .value {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}
.address-info {
  display: flex;
  gap: 15px;
  background: rgba(255, 255, 255, 0.08);
  padding: 15px;
  border-radius: 4px;
}
.address-detail strong {
  font-size: 10px;
  color: #c4a47c;
  display: block;
  margin-bottom: 5px;
}
.address-detail p {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
  margin: 0;
}

/* 1. KUNCI UTAMA: Tambahkan ini di paling atas CSS Section 5 */
.events-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px; /* Sesuai batas maksimal mobile-first kamu */
  margin: 0 auto;
  background-color: #fdfcf8;
  padding: 80px 0 60px 0;
  display: none;
  z-index: 30;

  /* ⬅️ KUNCI MATI: Agar tidak bisa geser kiri-kanan sama sekali */
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 2. KUNCI RUNDOWN: Pastikan wrapper rundown juga terkunci */
.editorial-rundown-wrapper {
  position: relative;
  width: 100%;
  margin-top: 80px;
  padding-bottom: 80px;

  /* ⬅️ TAMBAHKAN INI */
  overflow: hidden;
  box-sizing: border-box;
}

/* 3. KUNCI ELEMEN TENGAH: Pastikan garis tidak "bocor" */
.timeline-main {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;

  /* ⬅️ TAMBAHKAN INI */
  box-sizing: border-box;
  overflow: hidden;
}

/* 4. PASTIKAN REVEAL-SMOOTH TIDAK TERLALU JAUH */
/* Kadang transform translateX(-100px) bikin layar bisa geser sebelum animasi muncul */
.reveal-left {
  transform: translateX(-30px);
} /* Jangan terlalu jauh angkanya */
.reveal-right {
  transform: translateX(30px);
}

/* --- EDITORIAL RUNDOWN WRAPPER --- */
.editorial-rundown-wrapper {
  position: relative;
  margin-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  overflow: hidden;
}

/* --- HEADER & SUB-TITLE --- */
.rundown-header {
  text-align: center;
  margin-bottom: 60px;
}

.rundown-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: #888;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 500;
}

.rundown-title {
  font-family: 'Italiana', serif;
  font-size: 25px;
  letter-spacing: 1px;
  color: #333;
  margin: 0;
}

.timeline-main {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

/* --- TRACK GARIS TENGAH (PRESIZI) --- */
.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #eeeeee;
  transform: translateX(-50%);
  z-index: 1;
}

.dot-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -5px);
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  z-index: 2;
}

/* Bulatan yang akan digerakkan JS */
.dot-mover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 12px;
  height: 12px;
  background: #333;
  border: 2px solid #fdfcf8;
  border-radius: 50%;
  z-index: 10;
  will-change: top;
}

/* --- ITEM LAYOUT (ZEBRA HP & DESKTOP) --- */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 30px;
  box-sizing: border-box;
  z-index: 5;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}
.timeline-item.right {
  left: 50%;
  text-align: left;
}

/* --- ICON (MENUTUPI GARIS) --- */
.timeline-icon {
  position: absolute;
  top: 25px;
  width: 28px;
  height: 28px;
  background: #fdfcf8;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  color: #333;
  font-size: 11px;
}

.left .timeline-icon {
  right: -14px;
}
.right .timeline-icon {
  left: -14px;
}

/* --- TEXT STYLE --- */
.time-badge {
  font-size: 16px;
  color: #333;
  margin-bottom: 3px;
}
.event-title {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.event-desc {
  font-size: 11px;
  color: #777;
  line-height: 1.4;
}
.time-badge {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
  font-family: 'Italiana', serif;
}

.timezone-text {
  font-size: 11px; /* Dibuat sedikit lebih kecil agar proporsional */
  font-family: 'Inter', sans-serif; /* Pakai font bersih */
  letter-spacing: 1px;
  margin-left: 5px;
  font-weight: 400;
  color: #666; /* Warna abu-abu agar tidak tabrakan dengan angka jam */
}

/* -- HERO HEADER (GAMBAR KECIL + TEKS DI DALAM) --- */
.stories-hero-header {
  position: relative;
  width: 100%;
  padding: 0px 0;
  text-align: center;
  background-color: #fdfcf8;
}

.hero-image-wrap {
  position: relative; /* Kunci agar teks bisa menempel di sini */
  display: inline-block;
  width: 200px; /* <--- Kamu bisa atur lebar gambar di sini (misal 100px - 150px) */
  height: auto;
  overflow: hidden;
  border-radius: 0; /* Sedikit lengkung agar elegan */
}

.hero-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* Gambar utuh, tidak terpotong */
  filter: brightness(0.6); /* Menggelapkan gambar agar teks putih terbaca */
}

/* TEKS DI DALAM GAMBAR */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center sempurna di dalam foto */
  width: 90%; /* Biar teks tidak mepet pinggir foto */
  pointer-events: none;
}

.hero-title {
  font-family: 'Italiana', serif;
  font-size: 20px; /* Sesuaikan ukuran font dengan kecilnya gambar */
  color: #ffffff;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* --- ZEBRA STORY LAYOUT --- */
.story-zebra-item {
  display: flex;
  width: 100%;
  min-height: 350px;
  overflow: hidden;
}

/* Membalik urutan untuk baris genap */
.side-reversed {
  flex-direction: row-reverse;
}

.story-img-part,
.story-txt-part {
  width: 50%; /* Bagi dua rata */
}

.story-img-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-txt-part {
  display: flex;
  align-items: center;
  padding: 30px 20px;
  color: #fff; /* Teks default putih agar kontras di warna gelap */
}

/* VARIASI WARNA KOTAK */
.bg-light-grey {
  background-color: #b5b5b5;
  color: #fff;
}
.bg-dark-grey {
  background-color: #3d3d3d;
  color: #fff;
}
.bg-earth {
  background-color: #5d544b;
  color: #fff;
}

/* TYPOGRAPHY */
.story-title-item {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.story-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.fa-heart-mini {
  font-size: 10px;
}

.story-date-item {
  font-size: 13px;
  font-weight: 500;
}

.story-desc-item {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.85;
}

.story-ending-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 50px 20px 0px 20px;
  background-color: #fdfcf8;
  width: 100%;
}

.ending-line-horizontal {
  flex: 1; /* Membuat garis otomatis mengisi ruang kosong ke samping */
  height: 1px;
  background-color: #e0e0e0;
  max-width: 60px; /* Panjang garis bisa kamu atur di sini */
}

.ending-content-flex {
  display: flex;
  align-items: center;
  gap: 15px;
}

.end-name {
  font-family: 'Italiana', serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #333;
}

/* KONTROL GAMBAR TENGAH */
.end-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.end-center-icon img {
  /* --- ATUR UKURAN GAMBAR DI SINI --- */
  width: 30px; /* Silakan ganti lebarnya sesuai gambar kamu */
  height: 30px; /* Silakan ganti tingginya sesuai gambar kamu */

  object-fit: contain;
  opacity: 0.8;
}

/* Responsif untuk HP layar kecil */
@media (max-width: 380px) {
  .end-name {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .ending-line-horizontal {
    max-width: 30px;
  }
}

/* SECTION GALLERY 6 */
.gallery-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-color: #504f4f; /* Background utama */
  overflow: hidden;
  display: none;
  z-index: 40;
}

/* CONTAINER GARIS MIRING */
.gallery-diagonal-divider {
  position: relative;
  width: 100%;
  height: 120px; /* Tinggi area miring */
  overflow: hidden;
  margin-top: -1px; /* Mencegah celah bocor */
}

/* WARNA 1 (Misal: Hitam Pekat) */
.diagonal-color-one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #161616;
  /* Membentuk miring dari kiri bawah ke kanan atas */
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 10%);
  z-index: 45;
}

/* --- GALLERY HEADER (UTUH & TIDAK TERPOTONG) --- */
.gallery-hero-header {
  position: relative;
  width: 100%;
  padding: 20px 0; /* Memberi ruang atas bawah */
  text-align: left;
  padding-left: 20px;
  margin-top: -140px;
}

.gallery-hero-wrap {
  position: relative;
  display: inline-block; /* Kunci lebar agar teks di dalam pas */
  width: 200px; /* <--- ATUR BESAR/KECIL GAMBAR DI SINI */
  height: auto;
}

.gallery-hero-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* KUNCI: Gambar tampil utuh 100% */
  border-radius: 15px; /* Opsional: agar sudutnya manis */
  filter: brightness(0.6); /* Menggelapkan foto agar teks putih terbaca */
}

/* --- TEKS DI DALAM GAMBAR --- */
.gallery-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  pointer-events: none; /* Biar tidak ganggu klik */
}

.gallery-main-title {
  /* --- ATUR MIRINGNYA DI SINI (deg) --- */
  transform: rotate(-8deg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-main-title span {
  display: block;
  color: #ffffff;
  font-family: 'Great Vibes', cursive; /* Pastikan font bersambung sudah dipanggil */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}

.title-top {
  font-size: 28px;
  margin-left: -30px; /* Estetika tulisan tangan */
}

.title-bottom {
  font-size: 38px;
  margin-top: -10px;
  margin-left: 30px; /* Estetika tulisan tangan */
}

/* --- VIDEO SECTION SIMPLE --- */
.video-section-simple {
  width: 100%;
  padding: 0 20px; /* Jarak kiri kanan agar tidak mepet layar */
  margin-top: -20px;
  margin-bottom: 40px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Rasio Standar Youtube 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px; /* Sudut sedikit halus biar gak kaku banget */
  background-color: #000; /* Warna hitam saat loading */
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- HYBRID GALLERY --- */
.gallery-hybrid-container {
  padding: 10px 20px 80px 20px; /* Saya ubah 10px bawah jadi 80px */
  background-color: #504f4f;
}

.gallery-hybrid-wrapper {
  display: flex;
  gap: 10px; /* Jarak antar kolom */
}

/* KOLOM KIRI (UTAMA) */
/* KOLOM KIRI (UTAMA) - Dengan Bingkai Kotak */
.gallery-left-spotlight {
  flex: 1.2;
  height: 400px;
  position: relative;
  border-radius: 1px;

  /* --- INI CARA BUAT KOTAKNYA --- */
  border: 2px solid #9e9e9e; /* Warna garis kotak (bisa ganti emas #c4a47c atau putih) */

  background-color: transparent; /* Pastikan background bening agar menyatu */

  overflow: hidden; /* Tetap simpan agar foto slideshow tidak keluar bingkai */
  box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.2);
}

/* Pastikan slideshow di dalamnya ikut menyesuaikan radius */
.slideshow-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0; /* Lebih kecil dikit dari radius luar agar pas di dalam kotak */
  overflow: hidden;
}

.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slide-item.active {
  opacity: 1;
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* KOLOM KANAN (GRID) */
.gallery-right-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Jarak antar foto kanan */
}

.mini-grid-item {
  width: 100%;
  height: 125px; /* Ukuran lebih kecil */
  border-radius: 0px;
  overflow: hidden;
}

.mini-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- SECTION GIFT --- */
.gift-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-color: #fdfcf8;
  overflow: hidden;
  display: none;
  z-index: 40;
}

/* --- HERO HEADER (RAPAT UJUNG) --- */
.gift-hero-header {
  position: relative;
  width: 100%;
  height: 250px; /* <--- Tinggi kita potong agar tidak terlalu panjang */
  overflow: hidden;
}

.gift-hero-main {
  position: relative;
  width: 100%;
  height: 100%;
}

.gift-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Foto tetap proporsional meski area dipotong */
  display: block;
}

/* Overlay agar transisi ke konten di bawahnya lebih halus */
.gift-overlay-soft {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(253, 252, 248, 1) 95%);
}

/* --- BINGKAI FOTO KHUSUS SECTION GIFT --- */
.gift-photo-frame {
  position: absolute; /* Biar bisa menimpa header */
  left: 20px; /* Posisi di sebelah kiri */
  bottom: -40px; /* <--- KUNCI: Kasih keluar sedikit di bawah ujung bingkai */
  z-index: 20;

  width: 45%;
  max-width: 180px;
  aspect-ratio: 1 / 1.4;

  background: #f9f6f6ea;
  padding: 7px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.gift-photo-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gift-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ORNAMEN KERTAS SUDUT */
.gift-paper-corner {
  position: absolute;
  width: 35%;
  max-width: 90px;
  pointer-events: none;
  z-index: 25;
}

.gift-paper-corner.tl {
  top: 0;
  left: 0;
  transform: translate(-25%, -25%) rotate(-45deg);
}

.gift-paper-corner.br {
  bottom: 0;
  right: 0;
  transform: translate(25%, 25%) rotate(-45deg) scaleX(-1) scaleY(-1);
}

/* Penyesuaian Header agar tidak menutupi frame yang keluar */
.gift-hero-header {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: visible; /* <--- KUNCI: Biar frame yang keluar tidak terpotong */
  margin-bottom: 40px; /* Kasih ruang untuk frame yang nongol di bawah */
}

/* --- WRAPPER JUDUL GIFT --- */
.gift-titles-wrapper {
  padding: 20px 25px;
  margin-top: 45px; /* Memberi ruang karena bingkai tadi nongol ke bawah */
  text-align: left;
}

.gift-main-title {
  display: flex;
  flex-direction: column; /* Baris bertumpuk */
  line-height: 0.8; /* Membuat teks "Pernikahan" mepet ke "Hadiah" */
  margin-bottom: 20px;
}

/* Tulisan "Hadiah" (Bersambung) */
.gift-cursive {
  font-family: 'Great Vibes', cursive; /* Sama dengan Gallery */
  font-size: 45px;
  color: #c4a47c; /* Warna aksen emas/cokelat */
  z-index: 2;
}

/* Tulisan "Pernikahan" (Standar) */
.gift-standard {
  font-family: 'Italiana', serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #333;
  margin-left: 40px; /* Geser ke kanan agar mepet di ujung kata Hadiah */
  margin-top: -5px;
}

/* Teks Doa / Keterangan */
.gift-sub-text {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  max-width: 280px; /* <--- KUNCI agar tidak terlalu panjang ke kanan */

  opacity: 0.9;
}

/* --- AREA INTERAKSI GIFT --- */
.gift-interaction-area {
  position: relative;
  padding: 0 25px 50px 25px;
}

/* TOMBOL DI KANAN */
.gift-btn-container {
  display: flex;
  justify-content: flex-end; /* Paksa ke kanan */
  margin-bottom: 20px;
}

.btn-toggle-gift {
  background: #333;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-arrow {
  font-size: 10px;
  transition: transform 0.4s ease;
}

/* Efek saat Aktif (Diklik) */
.btn-toggle-gift.active .icon-arrow {
  transform: rotate(90px); /* Panah berputar ke bawah */
}

/* DATA MUNCUL DI KIRI */
.gift-data-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.gift-data-collapse.show {
  max-height: 1000px; /* Nilai besar agar konten tidak terpotong */
}

.gift-card-minimal {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  width: 85%; /* Agar tetap condong ke kiri */
}

.gift-card-line {
  width: 2px;
  background: #c4a47c; /* Garis satu sisi warna emas */
}

.gift-card-info small {
  display: block;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 10px;
  color: #888;
}

.gift-card-info h4 {
  font-size: 18px;
  margin: 5px 0;
  color: #333;
}

.gift-card-info p {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

/* KADO FISIK PALING BAWAH */
.physical-gift-minimal {
  margin-top: 30px;
  padding: 15px;
  background: #f4f4f4;
  border-radius: 8px;
  width: 100%;
}

/* --- ANIMASI COLLAPSE --- */
.gift-data-collapse {
  max-height: 0;
  opacity: 0;
  transform: translateY(20px); /* Muncul dari bawah */
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Transisi halus */
}

.gift-data-collapse.show {
  max-height: 1200px; /* Sesuaikan dengan panjang konten */
  opacity: 1;
  transform: translateY(0);
  padding-top: 20px;
}

/* --- TOMBOL SALIN MINIMALIS --- */
.btn-copy-minimal {
  background: #f0f0f0;
  border: none;
  padding: 6px 12px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
  color: #555;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-copy-minimal:active {
  background: #c4a47c;
  color: white;
}

/* Panah Berputar 180 derajat */
.btn-toggle-gift.active .icon-arrow {
  transform: rotate(180deg);
}

.btn-wa-confirm {
  margin-top: 10px;
  background: #25d366; /* Warna khas WhatsApp */
  color: white;
  text-decoration: none;
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-wa-confirm:hover {
  background: #128c7e;
  transform: translateY(-2px);
}

.btn-copy-minimal {
  /* Biar ukurannya sama tinggi dengan tombol WA */
  flex: 0 0 auto;
}

/* --- DIVIDER MIRING BAWAH (KELAS BARU) --- */
.gift-diagonal-divider-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* Atur tinggi miringnya di sini */
  overflow: hidden;
  z-index: 50;
  pointer-events: none; /* Biar tidak ganggu klik tombol di atasnya */
}

.gift-diagonal-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4a4a4a36; /* Warna hitam sesuai permintaanmu */

  /* Membentuk miring: Start dari kiri agak bawah, naik ke kanan atas */
  /* Polygon(kiri-atas, kanan-atas, kanan-bawah, kiri-bawah) */
  clip-path: polygon(0 85%, 100% 0%, 100% 100%, 0% 100%);
}

/* Pastikan section punya space di bawah agar miringan tidak menutupi teks kado fisik */
.gift-section-rebuild {
  position: relative;
  padding-bottom: 50px !important;
}

/* --- SECTION WISHES REBUILD --- */
.wishes-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  overflow: hidden;
  display: none;
  min-height: 100vh;
  z-index: 10;
}

/* 1. OVERLAY GELAP MERATA (BIAR BG AGAK GELAP SEMUA) */
.wishes-section-rebuild::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Hitam transparan merata di seluruh background */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* 2. GRADASI PEKAT DI BAWAH (AFTER) */
.wishes-section-rebuild::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  /* Menutup bawah lebih pekat untuk area teks */
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* DIVIDER MIRING */
.wishes-diagonal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 20;
  margin-top: -1px;
}

.wishes-diagonal-shape {
  width: 100%;
  height: 100%;
  background-color: #4a4a4ab9;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 15%);
}

/* HERO AREA */
.wishes-hero-box {
  position: relative;
  width: 100%;
  min-height: 500px;
  z-index: 5;
}

/* FOTO KECIL DI KIRI */
.wishes-small-card-wrapper {
  position: absolute;
  top: 70px;
  left: 20px;
  z-index: 20;
  width: 150px;
}

.wishes-small-photo-frame {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.wishes-small-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wishes-text-overlay-inside {
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 25;
}

.wishes-rsvp-label {
  font-family: 'Italiana', serif;
  font-size: 8px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
}

.wishes-icon-inside {
  color: #ffffff;
  font-size: 12px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
}

/* --- RSVP WRAPPER (FLOATING AREA) --- */
.rsvp-wrapper {
  position: relative;
  padding: 0 25px 80px 25px;
  margin-top: -150px;
  z-index: 40; /* Supaya di atas overlay bg */
}

.header-rsvp {
  text-align: center;
  margin-bottom: 40px;
}

.header-rsvp h2 {
  font-family: 'Italiana', serif;
  color: #fff;
  /* Tambahan shadow agar tulisan sangat jelas di atas foto gelap */
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  font-size: 2rem;
  margin-bottom: 5px;
}

.rsvp-intro {
  color: rgba(255, 255, 255, 0.906);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* --- FORM RSVP (FLOATING) --- */
.fluid-input-group {
  position: relative;
  margin-bottom: 35px;
}

.fluid-input-group input,
.fluid-input-group textarea,
.fluid-input-group select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 10px 0;
  font-size: 14px;
  outline: none;
}

.fluid-input-group label {
  position: absolute;
  top: 10px;
  left: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  pointer-events: none;
  transition: 0.3s ease;
}

/* Floating Label Logic */
.fluid-input-group input:focus ~ label,
.fluid-input-group input:not(:placeholder-shown) ~ label,
.fluid-input-group textarea:focus ~ label,
.fluid-input-group textarea:not(:placeholder-shown) ~ label {
  top: -18px;
  font-size: 10px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Garis Bawah (Bar) */
.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #fff;
  transition: 0.4s ease all;
  left: 0;
}
.fluid-input-group input:focus ~ .bar:before {
  width: 100%;
}

/* --- TOMBOL (Tanpa Animasi Pulse Manual) --- */
.btn-pulse-rsvp {
  width: 100%;
  padding: 18px;
  background: #fff;
  color: #161616;
  border: none;
  border-radius: 5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn-pulse-rsvp:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

/* --- BUBBLE STATS --- */
.bubble-stats-container {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 50px 0;
}

.bubble-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  backdrop-filter: blur(5px);
}

.bubble-item small {
  display: block;
  text-align: center;
  color: #fff;
  margin-top: 8px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

/* --- GUESTBOOK --- */
.staggered-list {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.cloud-item {
  width: 88%;
}
.cloud-item.left {
  align-self: flex-start;
}
.cloud-item.right {
  align-self: flex-end;
}

.cloud-inner {
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.status-tag {
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: bold;
  float: right;
}

.cloud-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0;
}

.cloud-date {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

/* --- SECTION CLOSING REBUILD --- */
.closing-section-rebuild {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: none;
  align-items: center; /* Konten di tengah secara vertikal */
  overflow: hidden;
  z-index: 10;
}

/* OVERLAY 3 LAPIS (GELAP MERATA & HALUS) */
.closing-grad-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Menggunakan 3 titik warna agar foto gelap merata namun tetap elegan */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 1;
}

.closing-container {
  position: relative;
  width: 100%;
  padding: 80px 30px;
  z-index: 5;
  color: #ffffff;
  text-align: center;
}

/* TIME BAR (Kiri - Tengah - Kanan) */
.closing-time-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 25px 0;
  margin-bottom: 60px;
}

.time-block {
  display: flex;
  flex-direction: column;
}

.block-left {
  text-align: left;
  flex: 1;
}
.block-mid {
  text-align: center;
  flex: 1;
}
.block-right {
  text-align: right;
  flex: 1;
}

.date-number,
.time-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.month-year,
.timezone {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.day-name {
  font-family: 'Italiana', serif;
  font-size: 1.4rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
}

/* NAMA PENGANTIN PENUTUP (FONT TEGAK BERSAMBUNG) */
.closing-names {
  /* Gunakan font tegak bersambung pilihanmu di sini */
  font-family: 'Great Vibes', cursive;
  font-size: 3.2rem; /* Ukuran diperbesar karena font script biasanya lebih ramping */
  margin-bottom: 20px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  line-height: 1.2;
}

/* Tambahan agar jarak teks keluarga di bawahnya tidak terlalu rapat */
.family-thanks {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1.8;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ANIMASI REVEAL (Jika belum ada) */
.reveal-up {
  /* Kelas pembantu agar selaras dengan JS */
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease;
}

/* DESIGN BY STYLE (DI DALAM SECTION CLOSING) */
.design-by-text {
  font-size: 10px; /* Ukuran sangat kecil agar elegan */
  letter-spacing: 3px; /* Jarak antar huruf agar terkesan mewah */
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.5; /* Dibuat agak samar agar tidak mendominasi */
  margin-top: 140px; /* Memberi jarak dari teks Terima Kasih */
  margin-bottom: 15px;
}

.wa-admin-link {
  display: inline-block;
  color: #ffffff;
  font-size: 22px; /* Ukuran ikon WhatsApp */
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.7;
  margin-bottom: 40px;
}

.wa-admin-link:hover {
  opacity: 1;
  transform: translateY(-5px) scale(1.1); /* Efek melompat kecil saat hover */
}

/* Menghilangkan garis bawah link jika ada settingan global */
.wa-admin-link:active,
.wa-admin-link:focus {
  outline: none;
  text-decoration: none;
}

/* --- FLOATING NAVBAR & NOTIFIKASI --- */
#wrapper-floating-controls {
  position: fixed;
  bottom: -100px; /* Awalnya sembunyi */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

/* Muncul setelah klik Buka Undangan */
#wrapper-floating-controls.show-control {
  bottom: 10px; /* Lebih turun ke bawah sesuai maumu */
  opacity: 1;
  pointer-events: auto;
}

.nav-pill {
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.nav-item {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Penting untuk posisi tooltip */
}

.nav-item:hover,
.nav-item.active {
  color: #ffffff;
  transform: scale(1.15);
}

/* --- NOTIFIKASI AUTO SCROLL (TOOLTIP) --- */
.tooltip-scroll {
  position: absolute;
  bottom: 50px; /* Muncul di atas tombol */
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #000000;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  display: none; /* Dikontrol via JS fadeToggle */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Panah kecil di bawah tooltip */
.tooltip-scroll::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

/* Animasi Putar Ikon Musik */
.fa-spin-slow {
  animation: spin-music 4s infinite linear;
}

@keyframes spin-music {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.music-paused {
  animation-play-state: paused !important;
  color: #ff4d4d !important;
}

/* Warna khusus saat Auto Scroll Aktif */
#auto-scroll-btn.active {
  color: #c4a47c; /* Warna emas/coklat tema kamu */
}
/* Pastikan ini ada di file CSS kamu */
#wrapper-floating-controls.gallery-active {
  display: none !important; /* Paksa hilang total */
  opacity: 0 !important;
  pointer-events: none !important;
}