/* Hero section: latar dan layout utama */



.hero {
  position: relative;
  width: 100%;
  max-width: 100vw;         /* Biar tampak seperti mobile */
  height: 100vh;
  margin: 0 auto;           /* Tengah di layar desktop */
  background: url('background.jpg') no-repeat center center;
  background-size: cover;
  overflow: hidden;
  /* ...style yang sudah ada... */
  animation: fadeIn 2.5s ease-out forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-70%); /* dari luar kiri */
  }
  100% {
    opacity: 1;
    transform: translateX(-30%); /* target posisi akhir */
  }
}

/* Nama Tamu */
#guest-name {
  position: absolute;
  bottom: 25.3vh;
  left: 26vh;
  /*transform: translateX(-30%);*/
  font-family: 'Open Sans', sans-serif;
  font-weight: 900;
  max-width: calc(100% - 80px); /* 40px kiri + 40px kanan */
  font-size: clamp(1.4rem, 2.5vw, 1.6rem);
  color: rgb(171, 146, 45) !important;
-webkit-text-fill-color: rgb(171, 146, 45) !important;
   text-align: left;
  white-space: normal; /* Supaya tidak jadi dua baris */
  opacity: 0; /* Awalnya tidak terlihat */
  animation: slideFadeIn 2s ease-out forwards;
  animation-delay: 2.5s; /* Tunda sampai background selesai */
}

/* Tombol Open Invitation */
.open-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  padding: 35px 0;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  color: transparent;
  box-shadow: none;
}





/* Reset dan paksa tema terang */
html, body {
max-width: 100vw;
   margin: 0 auto;
overflow-x: hidden;
  box-sizing: border-box;
  padding: 0;
  background-color: #fff !important;
  /*color: #000 !important;*/
 /* -webkit-text-fill-color: #000 !important;*/
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
}

:root {
  color-scheme: light;
}


/* Pastikan tidak mengikuti dark mode */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #fff !important;
   color: #000 !important;
  /*  -webkit-text-fill-color: #000 !important;*/
  }
}

/* Optional: batasan lebar maksimum konten di luar .hero */
body {
  max-width: 480px;
}