@import "animate.css";
html {
     scroll-behavior: smooth;
 }
 body {
     font-family: 'Lato', sans-serif;
     /* Latar belakang utama menjadi Cream */
     background: #f2f2f2;
        /* background: linear-gradient(90deg, rgba(242, 236, 217, 1) 0%, rgba(248, 246, 238, 1) 44%, rgba(242, 236, 217, 1) 100%); */
     /* Warna teks utama menjadi Navy */
     color: #2C3E50;
     padding-bottom: 80px; 
     
 }
 .mb-cover{
    margin-bottom: 350px;
 }
 .bg-utama{
    background: #F2ECD9;
     background:linear-gradient(90deg, rgba(242, 236, 217, 1) 0%, rgba(248, 246, 238, 1) 44%, rgba(242, 236, 217, 1) 100%);
 }
 .font-cormorant {
     font-family: 'Cormorant Garamond', serif;
 }
 .font-dancing {
     font-family: 'Dancing Script', cursive;
     color: #2C3E50;
 }
 .italiana-regular {
  font-family: "Italiana", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2C3E50;
}
.inria-sans-light {
  font-family: "Inria Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #2C3E50;
}

.inria-sans-regular {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2C3E50;
}

.inria-sans-bold {
  font-family: "Inria Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.inria-sans-light-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.inria-sans-regular-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.inria-sans-bold-italic {
  font-family: "Inria Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}


 /* Class ini sekarang menggunakan warna Navy untuk aksen pada latar terang */
 .text-gold {
     color: #2C3E50; /* Navy color */
 }
 /* Class baru untuk teks warna Cream pada latar gelap */
 .text-cream {
     color: #F7F4EC; /* Cream color */
 }
 .text-underline{
    text-decoration: underline;
 }
 .bg-header{
    background-image:url('https://hssmqpgmgnptpcmcjrus.supabase.co/storage/v1/object/public/Assets%20Wedding/Cover%20undangan%20(3).webp');
    background-repeat: no-repeat;
    background-position:top;
    background-size:contain;
 }
 .bg-navy-light {
     background-color: #2D3748; /* Lighter navy */
     color: #F7F4EC; /* Teks default di dalam blok ini menjadi cream */
 }
 .bottom-nav {
     box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
     background-color: rgba(26, 32, 44, 0.8);
     backdrop-filter: blur(10px);
 }
 .wedding-text {
     font-size: 3rem;
     line-height: 1;
     color: #F7F4EC;
     font-weight: 700;
 }
 .cover-screen {
     background: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url('https://hssmqpgmgnptpcmcjrus.supabase.co/storage/v1/object/public/Assets%20Wedding/foto-cover.webp') center center/cover;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 100;
     transition: opacity 1s ease-out;
     color: #2C3E50;
 }
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 0.5rem;
 }
 .form-input {
     color: #F7F4EC;
     background-color: #2D3748;
     border: 1px solid #4A5568;
 }
 .btn-primary {
     background-color: #2C3E50;
     color: #F7F4EC;
     font-weight: bold;
     transition: background-color 0.3s;
 }
 .btn-primary:hover {
     background-color: #4A5568;
 }
 .btn-primary:disabled {
     background-color: #1A202C;
     cursor: not-allowed;
 }
 .wish-card {
     background-color: #2D3748;
     border-left: 4px solid #F7F4EC;
 }
 ::placeholder{
    font-weight: 400;
 }

 /* --- PENAMBAHAN ANIMASI --- */

 /* 1. Keyframes untuk animasi */
 @keyframes pulse {
   0%, 100% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(247, 236, 236, 0.3);
   }
   70% {
     transform: scale(1.05);
     box-shadow: 0 0 8px 12px rgba(247, 236, 236, 0);
   }
 }

 @keyframes wobble {
   0% { transform: rotate(0deg); }
   15% { transform: rotate(-5deg) scale(1.05); }
   30% { transform: rotate(5deg) scale(1.05); }
   45% { transform: rotate(-3deg) scale(1.05); }
   60% { transform: rotate(2deg) scale(1.05); }
   75% { transform: rotate(-1deg) scale(1.05); }
   100% { transform: rotate(0deg) scale(1); }
 }

 /* 2. Menerapkan animasi ke elemen */

 /* Animasi berdenyut (pulse) untuk tombol kontrol musik */
 #music-control {
     animation: pulse 3s infinite ease-in-out;
 }

 /* Animasi goyang (wobble) saat hover pada judul utama */
 #couple h3:hover, 
 #event h2:hover, 
 #gallery h2:hover, 
 #gift h2:hover, 
 #rsvp h2:hover,
 #wishes-list-section h2:hover {
   cursor: pointer;
   animation: wobble 0.8s ease-in-out;
 }
 
 /* 3. Menyesuaikan animasi masuk dari AOS agar lebih halus */
 .aos-init[data-aos="fade-up"] {
    transform: translateY(40px);
    opacity: 0;
 }
 
 .aos-animate[data-aos="fade-up"] {
    transform: translateY(0);
    opacity: 1;
 }

 /* timeline love story*/

 .timeline-container {
            position: relative;
            margin-left: 1rem;
            padding-left: 3rem; 
            border-left: 2px solid #4A5568; /* Garis vertikal timeline */
        }
        .timeline-item {
            position: relative;
            margin-bottom: 2.5rem; /* Jarak antar item */
        }
        .timeline-item:last-child {
            margin-bottom: 0;
        }
        /* Lingkaran pada timeline */
        .timeline-item::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            /* Posisi: di tengah garis vertikal */
            left: calc(-3rem - 8px + 1px); /* (padding-left + setengah lebar lingkaran + setengah lebar border) */
            top: 5px; 
            background-color: #d4af37; /* Warna gold */
            border: 3px solid #1A202C; /* Warna background utama */
            border-radius: 50%;
            z-index: 1;
        }
        .timeline-content {
            padding: 1rem;
            background-color: #2D3748; /* Warna navy light */
            border-radius: 0.5rem;
            position: relative;
        }
        .timeline-date {
            font-size: 0.875rem; /* text-sm */
            color: #A0AEC0; /* gray-400 */
            font-weight: 600;
            font-family: 'Lato', sans-serif;
        }

.btn-map {
    display: inline-block; /* Agar bisa diberi padding dan margin */
    margin-top: 1rem;      /* Jarak dari teks lokasi di atasnya */
    padding: 0.5rem 1.25rem; /* Ukuran tombol (tinggi dan lebar) */
    background-color: #d4af37; /* Warna gold yang serasi dengan tema */
    color: #1A202C;        /* Warna teks gelap agar mudah dibaca */
    font-size: 0.875rem;   /* Ukuran font (sedikit kecil) */
    font-weight: 600;      /* Teks agak tebal */
    border-radius: 0.375rem; /* Sudut tombol sedikit membulat */
    text-decoration: none;   /* Menghapus garis bawah pada link */
    transition: all 0.2s ease-in-out; /* Animasi halus saat disentuh */
}

.btn-map:hover {
    background-color: #c8a02a; /* Warna menjadi sedikit lebih gelap saat disentuh */
    transform: translateY(-2px); /* Tombol sedikit terangkat */
}

/* Style untuk Modal (Pop Up) */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
            padding-top: 60px;
        }

        /* Konten Modal */
        .modal-content {
            background-color: #1A202C; /* Warna background utama */
            color: #E2E8F0; /* Warna teks cream */
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 500px;
            border-radius: 8px;
            position: relative;
            animation: fadeIn 0.5s;
        }

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

        /* Tombol Close (x) */
        .close-button {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
        }

        .close-button:hover,
        .close-button:focus {
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }

        /* Grid untuk daftar hadiah fisik */
        .physical-gift-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .physical-gift-item {
            background-color: #2D3748; /* Navy light */
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
        }
        .physical-gift-item img {
            max-width: 100px;
            height: auto;
            margin-bottom: 0.5rem;
            border-radius: 4px;
            display: inline-block;
        }
        .physical-gift-item a {
            display: inline-block;
            margin-top: 0.5rem;
            font-size: 0.8rem;
        }

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll {
  display: inline-flex;
  animation: scroll 20s linear infinite;
}