/* Kunci scroll di awal secara paksa */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  background-color: #ffffff;
  color: #1a1a1a;
  overflow: hidden; /* Mengunci scroll saat pertama kali dimuat */
}

/* Container untuk tombol kontrol di pojok kanan bawah */
.audio-controls-wrapper {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999; /* Pastikan berada di atas semua konten */
  opacity: 0; /* Sembunyikan dulu sebelum undangan dibuka */
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

/* Kelas untuk memunculkan tombol kontrol setelah cover terbuka */
.audio-controls-wrapper.show {
  opacity: 1;
  visibility: visible;
}

/* Desain Tombol Lingkaran Minimalis */
.control-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(26, 26, 26, 0.75);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.control-btn:active {
  transform: scale(0.92);
}

/* Animasi Putar Piringan Musik (Spin) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-animation {
  animation: spin 4s linear infinite;
}

/* Menghentikan animasi putar saat musik di-pause */
.spin-paused {
  animation-play-state: paused !important;
}

/* Pengelompokan Font Face sesuai permintaan awal */
.font1 {
  font-family: "Great Vibes", cursive;
  font-weight: 500;
}
.font2 {
  font-family: "Cormorant", serif;
}
.font3 {
  font-family: "Abhaya Libre", serif;
}
.font4 {
  font-family: "Inter", sans-serif;
}
.font5 {
  font-family: "Italiana", serif;
  font-weight: 500;
}

/* Container Pembungkus (Simulasi Layar HP) */
#cover-undangan {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* HP Ukuran Kecil/Standar (360px - 389px) */
@media screen and (min-width: 320px) and (max-width: 389px) {
  #cover-undangan {
    padding: 6vh !important;
  }
}

/* HP Ukuran Besar/Modern Flagship (390px - 430px) */
@media screen and (min-width: 390px) and (max-width: 430px) {
  #cover-undangan {
    padding: 10vh !important;
  }
}

/* Efek Menghilang saat Tombol Diklik */
.hidden-animation {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
}

/* Styling Detail Elemen */
.couple-names {
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: #333333;
}

.save-the-date {
  font-size: 2.4rem;
  color: #111111;
  line-height: 1.1;
}

.date-text {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: #666666;
}

/* Wadah Tunggal Foto Kolase */
.main-photo-wrapper {
  width: 100%;
}

.main-photo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.to-guest {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #444444;
}

.guest-location {
  font-size: 0.85rem;
  color: #666666;
}

/* Tombol Buka Undangan */
.btn-open {
  font-size: 0.8rem;
  letter-spacing: 1px;
  border: 1px solid #1a1a1a;
  border-radius: 0;
  background: transparent;
  color: #1a1a1a;
  transition: all 0.3s ease;
}

.btn-open:hover {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* --- ANIMASI FADE IN CSS MURNI --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

/* Pengaturan Antrean Efek Muncul */
.delay-1 {
  animation-delay: 0.2s;
} /* Foto utama muncul duluan */
.delay-2 {
  animation-delay: 0.6s;
} /* Teks nama & judul atas */
.delay-3 {
  animation-delay: 1s;
} /* Keterangan tamu */
.delay-4 {
  animation-delay: 1.4s;
} /* Tombol buka */

/* Styling Utama Section Home */
#home-section {
  height: 100vh;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Membuat Efek Lapisan Blur Seluruh Section tanpa memengaruhi konten teks/foto */
#home-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Mengambil background-image yang disuntikkan oleh JavaScript ke parent elemen */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(
    1.1
  ); /* Menghilangkan edge/garis putih di ujung layar akibat filter blur */
  filter: blur(20px) brightness(0.65); /* Atur tingkat blur & kegelapan di sini */
  z-index: -1;
}

/* Teks Judul Atas */
.home-header {
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

.the-wedding {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.couple-title {
  font-size: 2.2rem;
  font-weight: 400;
}

/* Swiper Slider */
.swiper {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 2;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-slide {
  width: 120px;
  aspect-ratio: 1 / 1;
}

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

/* --- PERBAIKAN STYLING COUNTDOWN (PASTI HORIZONTAL) --- */
.countdown-container {
  z-index: 2;
  width: 100%;
  padding: 0 15px;
}

.countdown-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Jarak antar kotak waktu */
}

.countdown-item {
  text-align: center;
  flex: 1; /* Membagi ruang sama rata ke samping */
  max-width: 70px; /* Batas maksimal lebar per kotak angka */
  color: #ffffff;
}

.countdown-number {
  font-size: 1.6rem; /* Ukuran disesuaikan agar tidak meluber di HP */
  font-weight: 400;
  line-height: 1.1;
}

.countdown-label {
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 4px;
}

/* --- Couple Section Styles --- */
.couple-initial {
  font-size: 2.5rem;
  color: #4a5568;
  letter-spacing: 2px;
}

/* Desain Khusus Elemen Instagram & Garis Pembatas */
.instagram-icon {
  color: #8c96a3;
  display: inline-flex;
  align-items: center;
}

.profile-info h3 {
  color: #2d3748;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* --- Event Section Styles --- */
#event-section {
  overflow: hidden;
}

/* Pembungkus Foto dengan Efek Gradien ke Transparan */
.event-photo-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 420px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px 24px 0 0; /* Membuat lengkungan di atas sesuai gambar */
}

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

/* Masking Gradien Putih di Sisi Bawah Foto */
.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%; /* Mengatur jangkauan gradien pada foto */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
}

/* Struktur Konten di bawah Foto */
.content-wrapper {
  max-width: 500px;
  margin: -15px auto 0 auto; /* Menarik teks sedikit ke atas overlay foto */
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

/* Teks Vertikal "Save The Date" */
.vertical-text {
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: #8c96a3;
  writing-mode: vertical-rl; /* Memutar tulisan secara vertikal */
  transform: rotate(180deg);
  align-self: center;
  white-space: nowrap;
  opacity: 0.8;
}

.event-detail {
  flex-grow: 1;
}

/* Tombol Google Maps Solid Grey */
.btn-maps {
  background-color: #d5bdaf;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease;
}

.btn-maps:hover {
  background-color: #e3d5ca;
  color: #695c54;
}

/* --- Love Story Styles --- */
.story-item {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Kotak Konten Abu-Abu Tipis */
.story-card-bg {
  background-color: #e5e5ea; /* Warna abu-abu halus sesuai gambar */
  padding: 1.5rem 1rem;
  border-radius: 4px;
  min-height: 180px; /* Jaga tinggi kotak agar proporsional */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-date {
  font-size: 0.8rem;
  color: #333333;
  letter-spacing: 0.5px;
}

.story-text {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #555555;
}

/* Foto Box dengan Bingkai Putih Tipis */
.story-photo-box {
  width: 100%;
  height: 220px; /* Membuat foto memanjang vertikal */
  overflow: hidden;
  background: #ffffff;
  padding: 6px; /* Memberi jarak putih luar seperti bingkai */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

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

/* Trik Geser Samping (Broken Grid Effect) */
.offset-right {
  margin-left: -25px; /* Menarik foto ke kiri menutupi kotak teks */
}

.offset-left {
  margin-right: -25px; /* Menarik foto ke kanan menutupi kotak teks */
}

/* Pengaturan Tumpukan Z-Index Bootstrap Custom */
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}

/* --- Gallery Pure CSS Infinite Animation --- */
#gallery-section {
  height: 80vh !important;
  display: flex;
  position: relative;
  align-items: center;
}
.gallery-parallax-container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}

.gallery-col {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.gallery-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  width: 100%;
}

.gallery-track a {
  display: block;
  width: 100%;
  height: 140px;
  overflow: hidden;
  border-radius: 4px;
}

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

/* LOGIKA GERAKAN CSS KEYFRAMES (3 foto x 140px + gap = 444px total geser) */

/* Animasi Kolom Kiri & Kanan Bergerak ke Atas */
.track-up {
  animation: scrollUp 20s linear infinite;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-444px);
  }
}

/* Animasi Kolom Tengah Bergerak ke Bawah */
.track-down {
  animation: scrollDown 18s linear infinite;
}

@keyframes scrollDown {
  0% {
    transform: translateY(-444px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Berhenti bergerak sedikit saat pengguna menekan foto */
.gallery-track:hover {
  animation-play-state: paused;
}

/* --- Footer Section Styles --- */
#footer-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Memenuhi satu layar penuh */
  overflow: hidden;
  background-color: #ffffff;
}

/* Container Slider Background */
.footer-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Properti Tiap Slide Gambar */
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
  /* Gabungan animasi zoom in-out dan fade in-out */
  animation: zoomFadeEffect 16s linear infinite;
}

/* Mengatur jeda waktu tampil bergantian antar 2 foto (Total durasi 16 detik) */
.slide-item:nth-child(1) {
  animation-delay: 0s;
}
.slide-item:nth-child(2) {
  animation-delay: 8s; /* Muncul tepat di pertengahan durasi foto pertama */
}

/* Masking Gradien Atas agar menyatu lembut dengan halaman putih sebelumnya */
.footer-gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%; /* Jangkauan gradien */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Container Konten Teks */
.footer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Desain Tombol Save The Date Sesuai Tema */
.btn-save-date {
  background-color: #8e8e93;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 2.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.btn-save-date:active {
  transform: scale(0.98);
  background-color: #636366;
}

/* LOGIKA UTAMA ANIMASI: FADE & ZOOM (Seamless & Smooth) */
@keyframes zoomFadeEffect {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6.25% {
    /* Detik ke-1: Fade In Selesai */
    opacity: 1;
  }
  50% {
    /* Detik ke-8: Mulai Fade Out sambil terus membesar halus */
    opacity: 1;
  }
  56.25% {
    /* Detik ke-9: Fade Out Selesai */
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.12); /* Batas maksimal zoom out */
  }
}

dotlottie-player {
  filter: sepia(40%) saturate(140%) brightness(96%) contrast(92%)
    hue-rotate(335deg) !important;
}