/* style.css */

/* --- Variabel CSS & Reset Dasar --- */
:root {
    --color-primary: #8B4513; /* Cokelat tua untuk aksen */
    --color-secondary: #D2B48C; /* Cokelat muda/tan untuk latar belakang */
    --color-text-dark: #362A20; /* Teks gelap */
    --color-text-light: #F5F5DC; /* Teks terang */
    --font-script: 'Dancing Script', cursive;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --max-width: 1000px;
}

/* Reset dan Box-Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.6;
    background-color: var(--color-text-light);
    overflow-x: hidden;
}

/* --- Animasi Masuk/Keluar Kolom (Global) --- */
/* Definisi animasi masuk */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Terapkan animasi pada elemen utama di bagian detail */
.details-section .section-block,
.couple-names, .couple-names-lg, .couple-names-sm,
.kepada, .tamu, .open-button,
.header, .footer,
.couple-names-lg.closing-names {
    /* Atur durasi dan timing function */
    animation: fadeInSlideUp 0.8s ease-out forwards;
    /* Atur opasitas awal 0 agar tidak terlihat sebelum animasi dimulai */
    opacity: 0;
}

/* Penundaan animasi untuk urutan masuk yang lebih menarik */
.details-section .section-block:nth-child(1) { animation-delay: 0.1s; }
.details-section .section-block:nth-child(2) { animation-delay: 0.3s; }
.details-section .section-block:nth-child(3) { animation-delay: 0.5s; }
.details-section .section-block:nth-child(4) { animation-delay: 0.7s; }
.details-section .section-block:nth-child(5) { animation-delay: 0.9s; }
.details-section .section-block:nth-child(6) { animation-delay: 1.1s; }
.details-section .section-block:nth-child(7) { animation-delay: 1.3s; }

/* Animasi untuk elemen di dalam cover (biar tampak berurutan) */
#cover .couple-names { animation-delay: 0.2s; }
#cover .kepada { animation-delay: 0.4s; }
#cover .tamu { animation-delay: 0.6s; }
#cover .open-button { animation-delay: 0.8s; }


/* --- Tata Letak Kolom Umum --- */
.details-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-block {
    width: 90%;
    max-width: var(--max-width);
    padding: 30px 20px;
    margin-bottom: 30px;
    background-color: #FFFFFF; /* Latar belakang putih untuk kolom */
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* --- Typografi dan Gaya Elemen --- */

/* Font khusus */
.serif-text {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.couple-names, .couple-names-lg, .couple-names-sm {
    font-family: var(--font-script);
    color: var(--color-primary);
}

.couple-names {
    font-size: 2.5rem;
    margin: 10px 0;
}
.couple-names-sm {
    font-size: 3rem;
    margin: 20px 0;
}
.couple-names-lg {
    font-size: 4rem;
    margin: 5px 0 20px 0;
}

/* Header/Cover */
.invitation-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('cover_bg.jpg'); /* Asumsi ada gambar latar belakang */
    background-size: cover;
    background-position: center;
    text-align: center;
    position: relative;
    padding: 20px;
}

.logo {
    width: 250px;
    margin-bottom: 20px;
}

.photo-frame {
    width: 250px;
    height: 300px;
    border: 5px solid var(--color-primary);
    border-radius: 5px;
    overflow: hidden;
    margin: 20px auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.couple-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.photo-frame:hover .couple-photo {
    transform: scale(1.05);
}

.kepada, .tamu {
    color: var(--color-text-dark);
    margin: 5px 0;
}
.tamu {
    font-size: 1.5rem;
    font-weight: 700;
}

.open-button, .location-button, .calendar-button, .submit-button, .copy-button {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 20px;
    border: none;
    border-radius: 50px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 10px rgba(139, 69, 19, 0.4);
}

.open-button:hover, .location-button:hover, .calendar-button:hover, .submit-button:hover, .copy-button:hover {
    background-color: #A0522D; /* Sienna */
    transform: translateY(-2px);
}

/* --- Bagian Pembuka Quote & Countdown --- */
.opening-quote {
    background-color: var(--color-secondary);
    color: var(--color-text-dark);
    padding-top: 50px;
    padding-bottom: 50px;
}
.opening-quote h3 {
    color: var(--color-text-dark);
}
.date-text-lg {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.timer-box {
    background-color: var(--color-primary);
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.timer-box span {
    font-size: 1.5rem;
    font-weight: 700;
}

.timer-box small {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.floral-divider {
    width: 80%;
    max-width: 300px;
    margin: 20px auto;
    opacity: 0.8;
}

.quote-box {
    margin-top: 20px;
    padding: 20px;
    border-left: 5px solid var(--color-primary);
    background-color: #F8F8FF; /* Ghost White */
}

.quote-text {
    font-style: italic;
    margin-bottom: 10px;
}

.quote-source {
    font-weight: 700;
    color: var(--color-primary);
}

/* --- Info Mempelai (Grid Kolom) --- */
.couple-info {
    display: grid;
    /* Dua kolom dengan ukuran yang sama pada layar lebar */
    grid-template-columns: 1fr; 
    gap: 20px;
    text-align: center;
}

.person-photo {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    margin: 10px auto;
}

.person-name {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* Penyesuaian Grid untuk layar yang lebih besar */
@media (min-width: 768px) {
    .couple-info {
        grid-template-columns: 1fr auto 1fr; /* Kolom Mempelai Wanita, Pemisah (&), Kolom Mempelai Pria */
        align-items: center;
    }
    .couple-info h3:nth-of-type(1) { grid-column: 1 / 2; }
    .couple-info h3:nth-of-type(2) { grid-column: 3 / 4; }
    .couple-info img:nth-of-type(2) { grid-column: 1 / 2; }
    .couple-names-sm { 
        grid-column: 2 / 3; 
        align-self: flex-start;
        margin-top: 150px;
    }
    .couple-info img:nth-of-type(3) { grid-column: 3 / 4; }
    .couple-info p:nth-of-type(2) { grid-column: 1 / 2; }
    .couple-info p:nth-of-type(3) { grid-column: 1 / 2; }
    .couple-info p:nth-of-type(4) { grid-column: 3 / 4; }
    .couple-info p:nth-of-type(5) { grid-column: 3 / 4; }
}

/* --- Detail Acara (Kolom Flexbox) --- */
.event-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-box {
    background-color: var(--color-text-light);
    border: 1px solid var(--color-secondary);
    padding: 20px;
    margin-top: 15px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.event-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.event-title {
    font-family: var(--font-serif);
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.event-date-time {
    font-weight: 700;
}
.event-location, .event-address {
    margin-bottom: 5px;
}

/* --- Bagian Galeri (CSS BARU DITAMBAHKAN DI SINI) --- */
.gallery-section {
    /* Menggunakan background yang berbeda atau tetap sama, disesuaikan dengan tema */
    background-color: #F9F7F5; 
    padding: 30px 20px;
}

.photo-gallery {
    display: grid;
    /* Membuat grid 2 kolom di perangkat kecil/mobile */
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; /* Jarak antar foto */
    margin-top: 20px;
}

.gallery-photo {
    width: 100%;
    /* Membuat rasio aspek yang seragam (misalnya, kotak) */
    aspect-ratio: 1 / 1; 
    object-fit: cover; /* Memastikan foto mengisi kotak tanpa terdistorsi */
    border-radius: 8px; /* Sudut membulat */
    border: 3px solid var(--color-secondary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* --- AKHIR CSS GALERI --- */


/* --- Wedding Gifts (Kolom Flexbox) --- */
.wedding-gifts {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gift-text {
    margin-bottom: 20px;
}

.bank-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px dashed var(--color-primary);
    border-radius: 8px;
    margin: 10px 0;
    width: 100%;
    max-width: 350px;
    background-color: #F8F8FF;
}
.qris-download{
     padding: 8px 20px;
    font-size: 0.9rem;
    margin-top: 10px;

}
.qris-logo{
    width: 150px;
    height: 150px;
}
.qris{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px dashed var(--color-primary);
    border-radius: 8px;
    margin: 10px 0;
    width: 100%;
    max-width: 350px;
    background-color: #F8F8FF;
}

.bank-logo {
    width: 80px;
    margin-bottom: 10px;
}

.bank-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-dark);
}

.bank-name {
    margin-bottom: 10px;
}

.copy-button {
    padding: 8px 20px;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* --- RSVP Form (Kolom Sederhana) --- */
.rsvp-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.rsvp-form input, 
.rsvp-form select, 
.rsvp-form textarea {
    padding: 12px;
    border: 1px solid var(--color-secondary);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.rsvp-form input:focus, 
.rsvp-form select:focus, 
.rsvp-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.5);
    outline: none;
}

.rsvp-form textarea {
    resize: vertical;
}

/* --- Bagian Penutup --- */
.closing-section {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 50px 20px;
    margin-bottom: 0;
}

.closing-names {
    color: var(--color-text-light);
    margin-top: 10px;
    margin-bottom: 0;
}

.closing-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--color-text-light);
    margin-bottom: 20px;
}

/* --- Footer --- */
.footer {
    width: 100%;
    background-color: var(--color-text-dark);
    color: var(--color-secondary);
    text-align: center;
    padding: 15px;
}

.copyright {
    font-size: 0.8rem;
}

/* --- Media Queries (Responsif) --- */
@media (min-width: 600px) {
    /* Penyesuaian umum untuk tablet */
    .couple-names { font-size: 3.5rem; }
    .couple-names-lg { font-size: 5rem; }

    /* Tata letak event dan hadiah lebih dari 1 kolom */
    .event-details {
        display: grid;
        grid-template-columns: 1fr; /* Dipertahankan 1 kolom untuk keseragaman */
        gap: 20px;
    }
    
    .wedding-gifts {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dua kolom untuk kotak bank */
        gap: 20px;
        align-items: start;
        text-align: left;
    }
    
    
    .wedding-gifts > img, .wedding-gifts h2, .wedding-gifts p {
        grid-column: 1 / 3; /* Elemen ini mencakup kedua kolom */
        text-align: center;
    }
    .bank-box {
        width: 100%;
    }

    /* Penyesuaian Galeri untuk layar yang lebih besar */
    .photo-gallery {
        /* Mengubah ke 3 kolom di perangkat yang lebih besar */
        grid-template-columns: repeat(3, 1fr); 
        gap: 15px;
        max-width: 900px; /* Batasi lebar maksimum galeri */
        margin-left: auto;
        margin-right: auto;
    }
}