body, html {
  margin: 0; padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.background-fixed {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('bg-splash.jpg') no-repeat center center/cover;
  z-index: -1; /* biar selalu di belakang konten */
}

/* Tambahkan overlay gradient */
.background-fixed::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,     /* atas transparan */
    rgba(0,0,0,0.7) 100%  /* bawah gelap */
  );
}

@font-face {
  font-family: 'MyScript';
  src: url('LTPerfume-2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Script1';
  src: url('josephsophia.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sans1';
  src: url('MADE Tommy Soft Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sans2';
  src: url('LEMONMILK-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

section {
  min-height: 100vh;
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

h1, h2, h4 {
  font-family: 'MyScript', cursive;
}

h1 {
  font-size: 60px; /* tetap besar untuk judul utama */
}

h2 {
  font-size: 52px; /* lebih kecil dari h1 */
}

h3 {
  font-size: 28px; /* buat subjudul/tanggal */
}

h4 {
  font-size: 22px;
}

/* Default state */
h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Aktif saat terlihat */
h2.animate {
  animation: fadeInUp 1s ease forwards;
}

/* Ornamen pojok khusus halaman */
/* Pastikan setiap page bisa jadi container ornamen */
.page2, .page3, .page4, .page5, .page6 {
  position: relative;  /* biar absolute child nempel di sini */
}

/* Ornamen pojok */
.page2 .ornamen,
.page3 .ornamen,
.page4 .ornamen,
.page5 .ornamen,
.page6 .ornamen {
  position: absolute !important; /* paksa keluar dari aturan flexbox */
  width: 400px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.ornamen-top-left {
  top: 0;
  left: 0;
}

.ornamen-top-right {
  top: 0;
  right: 0;
  transform: scaleX(-1); /* flip horizontal */
}

/* Responsif di HP */
@media (max-width: 768px) {
  .page2 .ornamen,
  .page3 .ornamen,
  .page4 .ornamen,
  .page5 .ornamen,
  .page6 .ornamen {
    width: 140px; /* otomatis lebih kecil di layar kecil */
  }
}

@media (max-width: 480px) {
  .page2 .ornamen,
  .page3 .ornamen,
  .page4 .ornamen,
  .page5 .ornamen,
  .page6 .ornamen {
    width: 100px; /* lebih kecil lagi di layar sangat kecil */
  }
}

/* Splash screen */
.splash {
  position: relative;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

/* Foto dengan border lingkaran */
.splash-photo {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 20px; /* otomatis center */
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-photo img:first-child {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.splash-photo .photo-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  z-index: 3;
  pointer-events: none;
}


.splash-content h1, .splash-content h2 {
  font-family: 'MyScript', cursive;
  letter-spacing: 5px;
  font-size: 70px;
}
.splash-content .tanggal {
  font-family: 'Sans1', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  margin: 10px 0 20px;
}

.guest-wrapper {
  margin-top: 20px;
  text-align: center;
  font-family: 'Sans1', sans-serif; /* bisa ganti sesuai font kamu */
  color: #fff; /* putih biar kontras di splash */
}

.guest-wrapper p {
  margin: 4px 0;
  font-size: 16px;
}

#guestName {
  font-family: 'Script1', cursive; /* kasih font elegan */
  font-size: 42px;
  font-weight: bold;
  color: #d48b26; /* emas */
  margin: 6px 0;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

@media (max-width: 480px) {
  #guestName {
    font-size: 22px;
  }
  .guest-wrapper p {
    font-size: 14px;
  }
}

.btn-buka {
  padding: 14px 30px;
  font-size: 9px;
  font-family: 'Sans2', sans-serif;
  font-weight: 450;
  letter-spacing: 2px;
  border: 2px solid #d48b26;   /* garis kuning */
  outline: none;              /* biar nggak double outline default */
  border-radius: 30px;
  background: linear-gradient(90deg, #00000092, #333333);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #d48b26; /* efek glow lembut */
}

.btn-buka:hover {
  background: linear-gradient(90deg, #333333, #000000);
  transform: scale(1.05);
  box-shadow: 0 0 15px #d48b26; /* glow lebih terang saat hover */
}

.splash-content h1 {
  margin-bottom: 10px;
}

.splash-content h2 {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .splash-content h1 {
    font-size: 40px;
  }
  .splash-content h2 {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .splash-content h1 {
    font-size: 32px;
  }
  .splash-content h2 {
    font-size: 24px;
  }
}

.splash-content .tanggal {
  margin-bottom: 20px;
  display: block;
}

.splash-content .btn-buka {
  margin-top: 10px;
}

/* Animasi fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Terapkan animasi ke splash */
.splash-content h1 {
  animation: fadeInUp 1.0s ease-out forwards;
}
.splash-content h2 {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 0.5s forwards;
}
.splash-content p {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 0.5s forwards;
}
.splash-content img {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}
.splash-content button {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out 1.0s forwards;
}

/* Splash animasi keluar */
.splash.slide-out {
  transform: translateY(-100%);
  transition: transform 1s ease;
}

/* Page1 default */
.page1 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

/* Saat aktif */
.page1.active {
  opacity: 1;
  transform: translateY(0);
}

/* Page 1 dengan overlay gelap */
.page1 {
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page1 > * {
  position: relative;
  z-index: 1;
}
.splash button {
  padding: 12px 25px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background: #000000;
  color: white;
  cursor: pointer;
}

.page1-text {
  position: relative; /* biar di atas overlay */
  z-index: 1;
  max-width: 50vh;
  max-height: 80vh;
  object-fit: contain;
}

.page2 {
  background: #fff;
  line-height: 1.8;
}

/* Aturan umum */
.salam-wrapper {
  text-align: center;
  margin: 20px 0;
}

.salam-wrapper .salam-img {
  height: auto;
}

.salam-pembuka .salam-img {
  max-width: 10%;
}

.salam-penutup .salam-img {
  max-width: 20%;
}

@media (max-width: 768px) {
  .salam-pembuka .salam-img {
    max-width: 40%;
  }
  .salam-penutup .salam-img {
    max-width: 60%;
  }
}

@media (max-width: 480px) {
  .salam-pembuka .salam-img {
    max-width: 60%;
  }
  .salam-penutup .salam-img {
    max-width: 80%;
  }
}

.pengantin-carousel {
  position: relative;
  max-width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,0.8);
  text-align: center;
  padding: 20px;
}

.pengantin-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.8s ease; /* efek fade */
  animation: fade 1s ease;
  text-align: center;
}

.nama {
  font-family: 'Script1', cursive;
  font-size: 42px;
  margin: 10px 0 5px;
}

.desc {
  font-family: 'Sans1', sans-serif;
  font-size: 18px;
  color: #444;
}

@media (max-width: 768px) {
  .nama {
    font-size: 28px;
  }
  .desc {
    font-size: 14px;
  }
}

.pengantin-slide.active {
  display: block;
  opacity: 1;
}

.pengantin-slide img {
  width: 500px;
  height: auto;
  border-radius: 50%; /* kalau PNG, jangan bulat biar transparansinya kelihatan */
  object-fit: contain;
  margin-bottom: 20px;
}

.nama-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 15px 0;
}

.nama-wrapper .nama {
  margin: 0;
}

.nama-wrapper button {
  background: none;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nama-wrapper button img {
  max-width: 100%;
  max-height: 100%;
}

.nama-wrapper button:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

.carousel-dots .dot {
  width: 12px;
  height: 12px;
  background: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel-dots .dot.active {
  background: #333; /* warna aktif lebih gelap */
}

.foto-pengantin {
  max-width: 450px;
  height: auto;
  border: 4px solid gold;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.photo-wrapper {
  position: relative;
  display: inline-block;
}

/* Ornamen bawah tengah */
.ornament-bottom {
  position: absolute;
  bottom: -120px;   /* jarak dari border bawah foto */
  left: 50%;
  transform: translateX(-50%);
  width: 350px !important;
  height: auto !important;    /* sesuaikan dengan ukuran foto */
  pointer-events: none;
}

.tanggal-wrapper {
  display: flex;
  justify-content: center; /* posisi tengah secara keseluruhan */
  align-items: center;
  gap: 60px; /* jarak antara tanggal kiri dan waktu */
}

.page2 p,
.page2 .tanggal-wrapper,
.page2 .tanggal-wrapper span {
  font-family: "Times New Roman", Times, serif !important;
}

.tanggal-kiri {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tanggal-kiri .angka {
  font-size: 80px;
  font-weight: 900;
  color: #d48b26;
  line-height: 1;
  margin: 0 0 5px 0; /* kasih jarak ke bulan */
}

.tanggal-kiri .bulan {
  margin-top: 0; /* hapus minus margin */
  margin-bottom: 5px; /* kasih jarak bawah */
}

.tanggal-kiri .hari {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}

.tanggal-kiri .tahun {
  font-size: 16px;
  margin-top: -5px;
}

.tanggal-kanan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
  text-align: left;
}

.tanggal-kanan .badge {
  background: #d48b26;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  align-self: flex-start;
}

.tanggal-kanan .waktu {
  border: 1px dashed #d48b26;
  padding: 6px 10px;
  border-radius: 6px;
}

.tanggal-kanan .lokasi {
  font-size: 16px;
  line-height: 1.5;
}

.keluarga-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 40px;
  padding: 0 40px; /* biar agak masuk ke dalam, gak mepet tepi */
  box-sizing: border-box;
}

.keluarga {
  text-align: center; /* tulisan tetap align tengah */
  flex: 1;            /* masing-masing ambil ruang sama besar */
}

/* Responsif */
@media (max-width: 768px) {
  .page2 p, {
  font-family: "Times New Roman", Times, serif !important;
  }
  .tanggal-wrapper {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    font-family: "Times New Roman", Times, serif !important;
  }
  .tanggal-kanan {
    align-items: center;
    font-family: "Times New Roman", Times, serif !important;
  }
  /* Tulisan tanggal bagian kanan */
  .tanggal-kanan .badge {
    font-size: 14px;
    padding: 4px 8px;
    font-family: "Times New Roman", Times, serif !important;
  }
  .tanggal-kanan .waktu {
    font-size: 14px;
    padding: 4px 6px;
    font-family: "Times New Roman", Times, serif !important;
  }
  .tanggal-kanan .lokasi {
    font-size: 14px;
    font-family: "Times New Roman", Times, serif !important;
  }

  /* Tombol prev/next lebih kecil */
  .nama-wrapper button {
    width: 45;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .tanggal-kanan .badge,
  .tanggal-kanan .waktu,
  .tanggal-kanan .lokasi {
    font-size: 12px;
    font-family: "Times New Roman", Times, serif !important;
  }
  .page2 p, {
    font-family: "Times New Roman", Times, serif !important;
  }
  .nama-wrapper button {
    width: 28px;
    height: 28px;
  }
}

/* Atur ukuran ornament-bottom lebih kecil di HP */
@media (max-width: 768px) {
  .page2 .ornament-bottom {
    width: 200px !important;
    bottom: -80px; /* biar gak kepotong */
  }
}

@media (max-width: 480px) {
  .page2 .ornament-bottom {
    width: 150px !important;
    bottom: -60px;
  }
}

/* Override text di page2 biar lebih kecil di mobile */
@media (max-width: 768px) {
  .page2 h2 {
    font-size: 28px;
  }
  .page2 p {
    font-size: 14px;
  }
  .page2 .nama {
    font-size: 22px;
  }
  .page2 .desc {
    font-size: 12px;
  }
}

/* Foto pengantin lebih kecil di HP */
@media (max-width: 768px) {
  .foto-pengantin {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .foto-pengantin {
    max-width: 250px;
  }
}

/* Tanggal responsif */
@media (max-width: 768px) {
  .tanggal-kiri .angka {
    font-size: 50px;
  }
  .tanggal-kiri .hari,
  .tanggal-kiri .bulan,
  .tanggal-kiri .tahun {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .tanggal-kiri .angka {
    font-size: 36px;
  }
  .tanggal-kiri .hari,
  .tanggal-kiri .bulan,
  .tanggal-kiri .tahun {
    font-size: 12px;
  }
}

.page3 {
  position: relative;
  background: #ffffff; /* tetap ada dasar putih */
  overflow: hidden;
}

.page3::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('bg-page3.jpg') no-repeat center center/cover;
  opacity: 0.5; /* transparansi 50% */
  z-index: 0;
}

.page3 > * {
  position: relative;
  z-index: 1; /* pastikan konten tetap di atas overlay */
}

.page3 h3 {
  font-family: 'Sans2', sans-serif; /* ganti font */
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #333;
  margin-top: 10px;
}

/* Responsif */
@media (max-width: 480px) {
  .page3 h3 {
    font-size: 20px;
  }
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.countdown-item {
  background: rgba(255, 255, 255, 0.9);
  width: 100px;
  height: 100px;
  border-radius: 50%; /* jadi bulat */
  border: 3px solid #d4af37; /* outline kuning emas */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.countdown-item .number {
  font-family: 'Sans2', sans-serif; /* ganti font angka (misal pakai Sans1 dari file kamu) */
  font-size: 28px;
  font-weight: bold;
  color: #000;
  line-height: 1;
}

.countdown-item .label {
  font-size: 12px;
  font-family: 'Sans2', sans-serif; /* biar lebih halus untuk label */
  color: #555;
  margin-top: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Responsif */
@media (max-width: 768px) {
  .countdown-item {
    width: 80px;
    height: 80px;
  }
  .countdown-item .number {
    font-size: 22px;
  }
  .countdown-item .label {
    font-size: 11px;
  }
}

/* HP kecil */
@media (max-width: 480px) {
  .countdown-item {
    width: 55px;
    height: 55px;
    border: 2px solid #d4af37;
  }
  .countdown-item .number {
    font-size: 16px;
  }
  .countdown-item .label {
    font-size: 9px;
  }
}

.page4 {
  position: relative;
  background: #ffffff; /* tetap ada dasar putih */
  overflow: hidden;
}

.maps-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 30px;
  font-size: 16px;
  font-family: 'Sans2', sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  border: 2px solid #d48b26;   /* garis emas */
  border-radius: 30px;
  background: linear-gradient(90deg, #000000aa, #333333);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #d48b26;
}

.maps-btn:hover {
  background: linear-gradient(90deg, #333333, #000000);
  transform: scale(1.05);
  box-shadow: 0 0 15px #d48b26;
}

/* Ukuran default (desktop) */
.page4 iframe {
  width: 50%;
  height: 400px;
  border: 3px solid #d4af37;  /* emas */
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(212, 139, 38, 0.7); /* glow emas lembut */
}

/* Responsif tablet */
@media (max-width: 768px) {
  .page4 iframe {
    width: 80%;
    height: 300px;
  }
}

/* Responsif HP kecil */
@media (max-width: 480px) {
  .page4 iframe {
    width: 100%;
    height: 250px;
  }
}

.page5 {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* posisi lebih ke atas */
  padding-top: 40px;           /* jarak dari atas */
}

@keyframes fadeBg {
  from { opacity: 0; }
  to   { opacity: 0.7; } /* sesuai opacity yang kamu pakai */
}

.page5 .form-container {
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
  padding: 60px 20px 40px;
  border-radius: 0;
  margin: 0 auto 30px;  /* kasih jarak ke messages */
  overflow: hidden;
  text-align: center;
}

.page5 .form-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    url('bg-pengantin.jpg') no-repeat center center/cover;
  opacity: 0.6;
  z-index: 0;
}

.page5 .form-container > * {
  position: relative;
  z-index: 1;
}

.page5 h2 {
  font-family: 'MyScript', cursive; /* pakai font elegan */
  font-size: 60px;
  color: #000000; /* emas */
  margin-bottom: 25px;
  text-shadow: 0 0 8px rgba(180, 110, 12, 0.6); /* glow lembut */
}

/* Default (mobile & tablet) tetap satu kolom */
.page5 form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Default: desktop (sampingan) */
@media (min-width: 1024px) {
  .page5 form .row-inline {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    max-width: 500px;
  }

  .page5 form .row-inline input {
    flex: 1;
    max-width: none;
  }
}

/* Mobile: tumpuk ke bawah */
@media (max-width: 1023px) {
  .page5 form .row-inline {
    display: flex;
    flex-direction: column !important;  /* pastikan kolom */
    gap: 12px !important;               /* jarak antar input */
    width: 100%;
  }

  .page5 form .row-inline input {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.page5 input,
.page5 textarea,
.page5 select {
  width: 100%;
  max-width: 400px;        /* biar tidak melebar ke samping */
  padding: 12px 18px;
  border: 2px solid #d48b26;
  border-radius: 30px;     /* OVAL */
  font-family: 'Sans1', sans-serif;
  font-size: 12px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.page5 textarea {
  min-height: 100px;       /* tidak terlalu tinggi */
  resize: vertical;        /* biar bisa diubah ukuran */
  border-radius: 20px;     /* sedikit berbeda untuk teks area */
}

.page5 input:focus,
.page5 textarea:focus,
.page5 select:focus {
  outline: none;
  border-color: #d48b26;
  box-shadow: 0 0 10px #d48b26;
}

.page5 button[type="submit"] {
  padding: 12px 25px;
  border: 2px solid #d48b26;
  border-radius: 30px;
  background: linear-gradient(90deg, #000000aa, #333333);
  color: #fff;
  font-family: 'Sans1', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #d48b26;
}
.page5 button[type="submit"]:hover {
  background: linear-gradient(90deg, #333333, #000000);
  transform: scale(1.05);
  box-shadow: 0 0 15px #d48b26;
}

@media (max-width: 768px) {
  .page5 .form-container::before {
    background: #d48b26 !important; /* paksa polos */
    opacity: 1 !important;
  }
  .page5 h2 {
    font-size: 45px;
    margin-bottom: 20px;
  }
  .page5 form {
    gap: 12px;
  }
  .page5 .form-container {
    width: 100% !important;   /* penuh layar */
    max-width: 100% !important;
    padding: 40px 15px;       /* kasih padding biar tidak nempel */
    box-sizing: border-box;   /* hitung padding supaya tidak overflow */
    border-radius: 0;         /* hapus radius biar rapi di mobile */
  }
  .page5 input,
  .page5 textarea,
  .page5 select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .page5 button[type="submit"] {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .page5 .form-container::before {
    background: #fafafa;
    opacity: 1;
    animation: none; /* no fade-in di mobile */
  }
  .page5 h2 {
    font-size: 40px;
  }
  .page5 .form-container {
    padding: 50px 15px;
  }
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin: 20px auto;
}

/* Desktop (≥1024px) → 2 kolom */
@media (min-width: 1024px) {
  .messages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 800px;
  }
}

.message-item {
  border: 2px solid #d48b26;
  border-radius: 12px;
  padding: 15px;
  background: rgba(212, 139, 38, 0.5); /* emas transparan */
  box-shadow: 0 0 12px rgba(212, 139, 38, 0.6);
  font-family: 'Sans2', sans-serif;
}

/* Animasi fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loader {
  display: none;
  margin: 10px auto;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #d48b26;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Default state sebelum animasi */
.page-subtitle {
  font-size: 15px;
  font-family: 'Sans2', sans-serif;
  color: #555;
  margin: 10px auto 25px;
  max-width: 600px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Page 5 khusus */
.page5 .page-subtitle {
  color: #ffffff; /* emas */
}

/* Page 6 khusus */
.page6 .page-subtitle {
  color: #555; /* biru */
}

/* Aktif saat masuk viewport */
.page-subtitle.animate {
  animation: fadeInUp 1s ease forwards;
}

@media (max-width: 768px) {
  .page-subtitle {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Page 6 (Hadiah) */
.page6 {
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gift-btn {
  padding: 14px 30px;
  font-size: 16px;
  font-family: 'Sans2', sans-serif;
  font-weight: 500;
  border: 2px solid #d48b26;   /* garis emas */
  border-radius: 30px;
  background: linear-gradient(90deg, #000000aa, #333333);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #d48b26; /* glow lembut */
}

.gift-btn:hover {
  background: linear-gradient(90deg, #333333, #000000);
  transform: scale(1.05);
  box-shadow: 0 0 15px #d48b26; /* glow lebih terang saat hover */
}

/* Popup hadiah */
.gift-popup {
  display: flex; /* selalu flex, tapi disembunyikan pakai opacity */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 2000;

  opacity: 0;               /* awal transparan */
  pointer-events: none;     /* biar tidak bisa diklik saat hidden */
  transition: opacity 0.4s ease;
}

.gift-popup.active {
  opacity: 1;               /* muncul */
  pointer-events: auto;
}

.gift-popup-content {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  position: relative;

  transform: scale(0.8);     /* awal mengecil */
  opacity: 0;                /* awal transparan */
  transition: all 0.4s ease; /* transisi halus */
}

.gift-popup.active .gift-popup-content {
  transform: scale(1);       /* normal */
  opacity: 1;
}

.gift-popup-content h3 {
  font-family: 'Script1', cursive;  /* font elegan sesuai tema */
  font-size: 28px;
  color: #d48b26; /* emas */
  margin-bottom: 15px;
}

.gift-popup .copy-btn {
  width: auto !important;
}

#an {
  font-family: "Times New Roman", Times, serif !important;
  font-style: normal;
}

.copy-btn {
  display: inline-flex;       /* pakai flex biar ikon + teks sejajar */
  align-items: center;
  justify-content: center;
  gap: 8px;           /* tombol hanya selebar konten */
  margin: 20px auto 0 auto;   /* center secara horizontal */
  padding: 12px 24px;         /* sedikit lebih kecil biar proporsional */
  font-size: 15px;
  font-family: 'Sans2', sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  border: 2px solid #d48b26;   /* border emas */
  border-radius: 30px;
  background: linear-gradient(90deg, #000000aa, #333333);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #d48b26;
}

.copy-btn:hover {
  background: linear-gradient(90deg, #333333, #000000);
  transform: scale(1.05);
  box-shadow: 0 0 15px #d48b26;
}

.copy-btn img.copy-icon {
  width: 18px;   /* atur ukuran kecil */
  height: 18px;
  object-fit: contain;
}

#rekening {
  font-family: 'Sans1', sans-serif; /* font clean & modern */
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #000;
  margin: 10px 0;
}

@media (max-width: 480px) {
  .maps-btn,
  .gift-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 25px;
  }
}

.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.bank-logo {
  max-width: 200px;
  margin: 20px auto;
}



/* Kontainer tombol kontrol */
.controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;

  /* Awal: geser ke kanan + transparan */
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.6s ease;
}

/* Aktif setelah undangan dibuka */
.controls.active {
  transform: translateX(0);
  opacity: 1;
}

/* Style tombol */
.controls button {
  background: #000000;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  opacity: 0.9;
  padding: 0;
}

.controls button:hover {
  opacity: 1;
  transform: scale(1.1);
}

.controls button:active {
  transform: scale(0.95);
  background: #000000;
}

.controls img {
  max-width: 26px;
  max-height: 26px;
}

/* Default tombol back disembunyikan */
.back-control {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Saat aktif (muncul) */
.back-control.active {
  display: flex;
  opacity: 1;
}

body.page5-active .side-menu {
  opacity: 0;
  pointer-events: none;    /* tidak bisa diklik */
  transform: translateX(-150%); /* geser keluar */
}

body.page6-active .side-menu {
  opacity: 0;
  pointer-events: none;    /* tidak bisa diklik */
  transform: translateX(-150%); /* geser keluar */
}

.side-menu {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translate(-150%, -50%); /* geser ke luar layar kiri */
  background: #000000;
  border-radius: 40px;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;                /* awalnya transparan */
  transition: opacity 0.5s ease, transform 0.5s ease; /* transisi halus */
}

/* Class aktif setelah undangan dibuka */
.side-menu.active {
  transform: translate(0, -50%); /* geser ke posisi normal */
  opacity: 1;                   /* jadi kelihatan */
}


/* List icon di dalam panel */
.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.side-menu li {
  display: flex;
  justify-content: center;
}

.side-menu button {
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.side-menu button:hover {
  opacity: 1;
  transform: scale(1.2);
}

.side-menu button:active {
  transform: scale(0.95);
}

.side-menu img {
  max-width: 28px;
  max-height: 28px;
}

/* Responsif di hp */
@media (max-width: 768px) {
  .side-menu {
    left: 10px;
    padding: 15px 8px;
    border-radius: 30px;
  }
  .side-menu img {
    max-width: 22px;
    max-height: 22px;
  }
}



/* Responsif */
@media (max-width: 768px) {
  .page1 h1 { font-size: 28px; }
  .countdown { font-size: 20px; }
}