html,
body{
    width:100%;
    overflow-x:hidden !important;
}

[data-aos]{
    overflow-x: hidden;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
    background: linear-gradient(to bottom, #fdf8f2, #f6efe5);
    color:#333;
}

section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:60px 20px;
    text-align:center;
    width:100%;
    overflow:hidden;
}

.cover{
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url('https://images.unsplash.com/photo-1520854221256-17451cc331bf');
background-size:cover;
background-position:center;
color:white;
}

.cover h1{
font-size:70px;
font-family:'Great Vibes',cursive;
margin-bottom:20px;
}

.cover h2{
font-size:25px;
font-weight:300;
}

.btn{
margin-top:30px;
padding:15px 35px;
background:#d4af37;
color:white;
text-decoration:none;
border-radius:30px;
}

.title{
font-size:50px;
font-family:'Great Vibes',cursive;
color:#b8860b;
margin-bottom:20px;
}

.card{
    width:95%;
    max-width:900px;
    margin:auto;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border-radius:20px;
    padding:40px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.nama{
font-size:35px;
color:#b8860b;
margin:15px;
font-family:'Great Vibes',cursive;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
width:90%;
}

.section-cream{
    background:#FFF8F0;
}

.section-white{
    background:#FFFFFF;
}

.section-gold{
    background:linear-gradient(135deg,#C9A227,#E8C76A);
    color:white;
}

.section-dark{
    background:#2F2A25;
    color:white;
}

.music-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#d4af37;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
    z-index:9999;
}

.gallery img{
width:100%;
border-radius:15px;
height:250px;
object-fit:cover;
}

/* HADIAH DIGITAL & QRIS */
.gift-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qris-box {
    text-align: center;
}

.qris-icon {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.qris-image-wrapper {
    width: 140px;
    height: 140px;
    margin: 10px auto;
    border: 2px dashed var(--primary);
    border-radius: 12px;
    padding: 6px;
}

.qris-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

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

.box{
background:white;
padding:20px;
border-radius:15px;
width:100px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

section{
    position:relative;
    overflow:hidden;
}

section::before{
    content:"🌸";
    position:absolute;
    top:20px;
    left:20px;
    font-size:35px;
    opacity:.25;
}

section::after{
    content:"🌿";
    position:absolute;
    bottom:20px;
    right:20px;
    font-size:35px;
    opacity:.25;
}

.popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-content{
    background:#fff;
    padding:30px;
    border-radius:20px;
    text-align:center;
    width:320px;
    animation:muncul .3s ease;
}

.check{
    width:70px;
    height:70px;
    background:#4CAF50;
    color:white;
    font-size:40px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    margin-bottom:20px;
}

.popup button{
    margin-top:20px;
    padding:10px 30px;
    border:none;
    background:#d4af37;
    color:white;
    border-radius:30px;
    cursor:pointer;
}

@keyframes muncul{
    from{
        transform:scale(.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.box h3{
font-size:35px;
color:#b8860b;
}

.section-gold{
    background:linear-gradient(135deg,#C9A227,#E8C76A);
}

.section-gold .card{
    background:white;
}

.section-gold .title{
    color:#b8860b;
}

.section-gold p,
.section-gold h3{
    color:#333;
}

footer{
    background:#1F1F1F;
    color:white;
}

footer{
background:#222;
color:white;
padding:40px;
text-align:center;
}

/* ===========================
      FALLING FLOWERS
=========================== */

.flowers{
    position: fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.flower{
    position:absolute;
    top:-60px;

}

@keyframes fall{

    0%{
        transform:
            translateY(-100px)
            translateX(0)
            rotate(0deg);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{

        transform:
            translateY(110vh)
            translateX(120px)
            rotate(720deg);

        opacity:0;

    }

}

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

.mempelai{
    background:linear-gradient(135deg,#FFF8F0,#F7E7CE);
}

.countdown{
    background:linear-gradient(135deg,#f7d895bb,#f1cca75d)
}

.acara{
    background:linear-gradient(135deg,#F7E7A8,#e6c453e0)
}

.galeri{
    background:linear-gradient(135deg,#9186a794,#E6DBFF)
}

.story{
    background:linear-gradient(135deg,#98f1b3e0,#9bc0a0)
}

.lokasi{
    background:linear-gradient(135deg,#d2e2f0,#FFFFFF);
}

.rsvp{
    background:linear-gradient(135deg,#f1ddd0,#FFF7F2);
}

.gift{
    background:linear-gradient(135deg,#f0ddcc,#F6F0EA);
}
.mempelai{
    background:#f06fba34;
    text-align:center;
    padding:100px 20px;
}

.couple-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.couple-card{
    width:360px;
    background:#fff;
    border-radius:30px;
    padding:35px 25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.couple-card img{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #D97A7A;
}

.couple-card h3{
    margin-top:20px;
    font-size:34px;
    color:#C45A5A;
    font-family:'Great Vibes',cursive;
}

.couple-card p{
    color:#666;
}

.love{
    font-size:60px;
    color:#C45A5A;
    font-family:'Great Vibes',cursive;
}
.calendar{
    background:linear-gradient(135deg,#EEF7FF,#D6EBFF);
}

.calendar .card{
    text-align:center;
}

.calendar p{
    margin:20px 0;
    color:#555;
}
/* ===========================
      GALLERY LIGHTBOX
=========================== */

.lightbox{
    display:none;
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);

    justify-content:center;
    align-items:center;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:20px;
    object-fit:contain;
}

.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:45px;
    color:white;
    cursor:pointer;
}

@keyframes zoom{

    from{

        transform:scale(.5);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.gallery img{

    cursor:pointer;

    transition:.3s;

}

.gallery img:hover{

    transform:scale(1.05);

}
/* Tombol Dark Mode */
.theme-btn{
    position:fixed;
    right:20px;
    bottom:90px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#d4af37;
    color:white;
    font-size:22px;
    cursor:pointer;
    z-index:9999;
}


/* MODE GELAP */
body.dark{

    background:#121212;
    color:#eee;

}


/* Card saat gelap */
body.dark .card,
body.dark .couple-card{

    background:#1e1e1e;
    color:white;

}


/* Judul */
body.dark .title,
body.dark h1,
body.dark h2,
body.dark h3{

    color:#f5d77a;

}


/* Section */
body.dark section{

    background:#121212;

}


/* Input RSVP */
body.dark input,
body.dark select,
body.dark textarea{

    background:#333;
    color:white;
    border:1px solid #555;

}


/* Footer */
body.dark footer{

    background:#0b0b0b;
    color:white;

}
.intro-text{
    text-align:center;
    margin-bottom:35px;
}

.welcome{
    font-size:30px;
    color:#d4af37;
    margin-bottom:20px;
    animation:fadeDown 1s ease;
}

.fade-text{
    opacity:0;
    animation:fadeUp 1s forwards;
}

.delay1{
    animation-delay:.8s;
}

.delay2{
    animation-delay:1.6s;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.story{

    background:#fffaf5;

}

.timeline{

    position:relative;

    max-width:800px;

    margin:50px auto;

    padding-left:30px;

    border-left:3px solid #d4af37;

}

.timeline-item{

    position:relative;

    margin-bottom:50px;

}

.timeline-dot{

    position:absolute;

    left:-42px;

    top:5px;

    width:20px;

    height:20px;

    background:#d4af37;

    border:4px solid white;

    border-radius:50%;

    box-shadow:0 0 10px rgba(212,175,55,.4);

}

.timeline-content{

    background:white;

    padding:20px;

    border-radius:15px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.timeline-content h3{

    color:#d4af37;

    margin-bottom:10px;

}

.timeline-content small{

    display:block;

    color:#888;

    margin-bottom:12px;

}

.timeline-content p{

    line-height:1.7;

}
body.dark .timeline-content{

    background:#222;

    color:white;

}

body.dark .timeline{

    border-left:3px solid #d4af37;

}

body.dark .timeline-dot{

    border-color:#222;

}

.share{
    background:linear-gradient(135deg,#FFF5E8,#FFE8C7);
}

.share .btn{
    border:none;
    cursor:pointer;
    font-size:16px;
}

.share .btn i{
    margin-right:8px;
}