:root{
    --lavender:#967BB6;
    --lavender-light:#E6E6FA;
    --lavender-dark:#4B0082;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat', sans-serif;
    background:#fff;
    overflow-x:hidden;
}

h1,h2,h3{
    font-family:'Playfair Display', serif;
}

/* DEFAULT (MOBILE) */
.layout{
    display:block;
}

.left-side{
    display:none;
}

/* DESKTOP */
@media(min-width:1024px){

    .layout{
        display:grid;
        grid-template-columns: 3fr 1fr; /* ⬅️ 9:3 */
        height:100vh;
        overflow:hidden;
    }

    /* KIRI (FOTO BESAR) */
    .left-side{
        display:block;
        position:relative;

        background:url('image/paralax_1.png') center center / cover no-repeat;

        height:100vh;
    }

    /* OVERLAY */
    .left-side::after{
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(
            to right,
            rgba(0,0,0,0.2),
            rgba(0,0,0,0.6)
        );
    }

    /* KANAN (SCROLL) */
    .right-side{
        height:100vh;
        overflow-y:auto;
        background:#fff;
    }

}

.left-text{
    position:absolute;
    bottom:60px;
    left:50px;
    z-index:2;

    color:white;
    font-family:'Playfair Display', serif;
}

.left-text h1{
    font-size:36px;
}

.left-text p{
    opacity:0.8;
}
/* END DESKTOP */

/* HERO */
.hero{
    height:100vh;
    position:relative;

    background:url('image/hero.jpg') right center / cover no-repeat;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
    padding:20px;
    overflow:hidden;
}

/* OVERLAY BIAR ELEGANT */
.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(76, 0, 130, 0.123),
        rgba(0, 0, 0, 0.182)
    );
    z-index:1;
}

/* CONTENT */
.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:500px;
}

/* BAGIAN ATAS (TITLE) */
.hero-content.top{
    position:absolute;
    top:50px;
}

/* BAGIAN TENGAH (NAMA TAMU) */
.hero-content.middle{
    position:absolute;
    bottom:170px; /* ⬅️ ini kunci, deket ke tombol */
    transform:none;
}

/* TITLE */
.hero-content h1{
    color:#fff;
    font-size:28px;
    letter-spacing:2px;

    text-shadow:0 5px 20px rgba(0,0,0,0.7);
}

/* SUB TEXT */
.hero-content p{
    color:#E6E6FA;
    font-size:14px;
    margin-bottom:5px;
}

/* NAMA TAMU */
.hero-content h3{
    color:#fff;
    font-size:20px;

    background:linear-gradient(135deg, #FFD700, #C9A23A);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* BUTTON */
.btn{
    position:absolute;
    bottom:100px;

    background:linear-gradient(135deg, #967BB6, #E6E6FA);
    border:none;
    padding:12px 30px;
    border-radius:30px;

    color:#4B0082;
    font-weight:600;

    cursor:pointer;
    transition:0.3s;

    z-index:2;

    box-shadow:0 5px 20px rgba(150,123,182,0.4);
}

/* HOVER */
.btn:hover{
    transform:scale(1.08);
    box-shadow:0 8px 25px rgba(150,123,182,0.6);
}

/* CARD */
.card{
    min-height:100vh;
    padding:60px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.dark{
    background:var(--lavender-dark);
    color:white;
}

.light{
    background:var(--lavender-light);
}

/* ANIMASI */
.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:1s;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

.slide-left{
    opacity:0;
    transform:translateX(-100px);
    transition:1s;
}

.slide-left.show{
    opacity:1;
    transform:translateX(0);
}

.zoom{
    transition:1s;
}

.zoom:hover{
    transform:scale(1.1);
}

.spin{
    animation:spin 10s linear infinite;
}

@keyframes spin{
    from{transform:rotate(0);}
    to{transform:rotate(360deg);}
}

.blink{
    animation:blink 2s infinite;
}

@keyframes blink{
    50%{opacity:0.5;}
}

/* OVAL IMAGE */
.oval{
    width:200px;
    height:260px;
    border-radius:50%/60%;
    object-fit:cover;
}

/* GALLERY */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
}

/* FALLING FLOWER */
.fall{
    position:fixed;
    top:-20px;
    pointer-events:none;
    animation:fall linear forwards;
}

/* gerakan jatuh + goyang */
@keyframes fall{
    0%{
        transform:translateY(0) translateX(0) rotate(0);
    }
    50%{
        transform:translateY(50vh) translateX(20px) rotate(180deg);
    }
    100%{
        transform:translateY(100vh) translateX(-20px) rotate(360deg);
        opacity:0;
    }
}

/* HIDE */
#main{
    display:none;
}

/* CARD 1 */
.card-1{
    position:relative;

    min-height:100vh; /* ⬅️ jangan pakai height */

    background:url('image/card1.jpg') center / cover no-repeat;

    color:#f9b005;
    text-shadow: #000 1px 0 10px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;

    padding:50px 0 30px;
}

/* TOP */
.card1-top{
    position:absolute;
    top:50px;
    left: 50%;
    text-align: center;
    transform:translateX(-50%);
}

/* MIDDLE (LAVENDER BOX) */
.card1-middle{
    position:absolute;
    bottom:120px;
    left:50%;
    transform:translateX(-50%);

    width:90%; /* ⬅️ INI YANG LO MAU */

    background:rgba(244, 6, 177, 0.589);
    padding:15px 25px;
    border-radius:15px;

    backdrop-filter: blur(4px);
    text-align:center;
}

/* BOTTOM */
.card1-bottom{
    position:absolute;
    bottom:50px;
    left:50%;
    transform:translateX(-50%);
}

/* COUNTDOWN BOX */
.countdown{
    display:flex;
    gap:10px;
}

.countdown .box{
    background:rgba(76, 0, 130, 0.497);
    padding:10px 15px;
    border-radius:10px;
    text-align:center;
    min-width:60px;

    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.countdown span{
    font-size:20px;
    font-weight:bold;
    display:block;
}

.countdown small{
    font-size:12px;
}

.countdown .box:hover{
    transform:translateY(-5px);
    transition:0.3s;
}
/* END CARD 1 */

/* CARD 2 */
.card-2{
    min-height:auto;   /* ⬅️ penting */
    padding:20px 20px;
    border-radius: 15px;
    box-shadow: #070000 0px 0px 20px;
    margin: 10px 10px;
    background-image: url('image/image_6.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.fade-soft{
    opacity:0;
    transform:translateY(60px) scale(0.98);
    filter:blur(8px);
    transition:
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-soft.show{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}

.card-2 .ayat{
    font-style:italic;
    font-size:15px;
    color:#f5d63b;
    margin-bottom:15px;
}

.card-2 .arti{
    font-size:13px;
    color:#f3c45e;
    margin-bottom:10px;
    text-shadow: #000 1px 0 10px;
}

.card-2 .sumber{
    font-size:11px;
    color:#888;
}

.reveal-text span{
    display:inline-block;
    opacity:0;
    transform:translateY(20px);
    filter:blur(6px);
}

/* saat muncul */
.reveal-text.show span{
    animation:wordFade 0.8s forwards;
}

/* animasi */
@keyframes wordFade{
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

.ayat-img{
    width:60px; /* kecil elegant */
    margin:25px auto 0;
    display:block;

    opacity:0.8;
    filter:drop-shadow(0 5px 10px rgba(150,123,182,0.3));

    animation:floatAyat 4s ease-in-out infinite;
}

/* efek floating halus */
@keyframes floatAyat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}
/* END CARD 2 */

/* CARD 3 */
.card-3{
    background:linear-gradient(to bottom, #fff, #f5f0ff);
    padding:80px 20px;
}

/* TITLE */
.card-3 .title{
    font-size:32px;
    color:#4B0082;
    margin-bottom:10px;
    letter-spacing:2px;
}

/* OPENING */
.card-3 .opening{
    font-style:italic;
    color:#967BB6;
    margin-bottom:10px;
}

/* DESC */
.card-3 .desc{
    max-width:600px;
    margin:0 auto 40px;
    color:#555;
    font-size:14px;
}

/* WRAPPER */
.couple-wrapper{
    display:grid;
    grid-template-columns:1fr; /* ⬅️ ini kunci */
    gap:40px;
    justify-items:center;
}

/* COUPLE CARD */
.couple{
    width:100%;
    max-width:250px;
    text-align:center;
    transition:0.5s;
}

.couple:hover{
    transform:translateY(-10px);
}

/* FOTO */
.couple img{
    width:200px;
    height:260px;
    border-radius:50%/60%;
    object-fit:cover;
    margin-bottom:15px;

    box-shadow:0 10px 30px rgba(150,123,182,0.4);
}

.couple img:hover{
    box-shadow:0 0 25px rgba(150,123,182,0.8);
}

/* NAMA */
.couple h3{
    font-size:20px;
    color:#4B0082;
    margin-bottom:5px;
}

/* SUB */
.sub{
    font-size:13px;
    color:#888;
}

/* ADDRESS */
.addr{
    font-size:12px;
    color:#aaa;
}

/* DIVIDER */
.divider{
    font-size:30px;
    color:#967BB6;
    font-family:'Playfair Display', serif;
    flex:0 0 auto;
}

/* ANIMASI */
.slide-left{
    opacity:0;
    transform:translateX(-80px);
    transition:1s;
}
.slide-left.show{
    opacity:1;
    transform:translateX(0);
}

.slide-right{
    opacity:0;
    transform:translateX(80px);
    transition:1s;
}
.slide-right.show{
    opacity:1;
    transform:translateX(0);
}
/* END CARD 3 */

/* PARALAX */
.parallax{
    min-height:300px; /* ⬅️ fleksibel, jangan height fix */

    background:url('image/paralax_1.png') center center / cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    overflow:hidden;
}
/* END PARALAX */

/* CARD 4 BACKGROUND */
.card-4{
    background:linear-gradient(270deg, #ea08f2, #E6E6FA);
    padding:30px 20px;
}

/* OPENING */
.opening{
    max-width:600px;
    margin:0 auto 40px;
    text-align:center;
    color:#000;
}

/* WRAPPER */
.event-wrapper{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

/* EVENT CARD */
.event-card{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(6px);

    padding:25px;
    border-radius:20px;
    width:260px;
    text-align:center;

    box-shadow:0 10px 30px rgba(150,123,182,0.2);
    transition:0.4s;
}

.event-card:hover{
    transform:translateY(-8px) scale(1.02);
}

/* TITLE */
.event-card h2{
    color:#4B0082;
    margin-bottom:10px;
}

/* TEXT */
.event-card p{
    font-size:14px;
    color:#444;
}

/* MAP SECTION */
.map-section{
    text-align:center;
    margin-bottom:40px;
}

/* BUTTON */
.btn-map{
    display:inline-block;
    padding:12px 25px;
    border-radius:30px;

    background:linear-gradient(135deg, #967BB6, #E6E6FA);
    color:#4B0082;
    font-weight:600;
    text-decoration:none;

    box-shadow:0 5px 15px rgba(150,123,182,0.3);
    transition:0.3s;
}

.btn-map:hover{
    transform:scale(1.05);
}

/* MAP FRAME */
.map-frame{
    margin-top:20px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.map-frame iframe{
    width:100%;
    height:300px;
    border:0;
}

/* CLOSING */
.closing{
    text-align:center;
    color:#555;
}
/* END CARD 4 */

/* CARD SLIDER */
.slider{
    position:relative;
    height:80vh;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:1s ease;
}

.slide.active{
    opacity:1;
}

/* gambar */
.slide{
    background-size:cover;
    background-position:center;
}
.dots{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
}

.dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
}

.dot{
    width:10px;
    height:10px;
    background:rgba(255,255,255,0.5);
    margin:0 4px;
    border-radius:50%;
    transition:0.3s;
}

.dot.active{
    background:#967BB6;
    transform:scale(1.3);
}
.caption{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);

    width:90%;
    max-width:500px;

    padding:20px;
    border-radius:20px;

    /* gradient putih → hitam */
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(255,255,255,0.2)
    );

    backdrop-filter:blur(6px);

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.caption h3{
    font-size:20px;
    margin-bottom:5px;

    background:linear-gradient(135deg, #FFD700, #C9A23A);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-family:'Playfair Display', serif;
}

.caption p{
    font-size:14px;
    color:#f5f5f5;
}

/* END CARD SLIDER */

/* CARD 6 */
.gallery{
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* 2 kolom mobile */
    gap:10px;
    padding:20px;
}
.gallery img{
    width:100%;
    height:180px;
    object-fit:cover;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);

    opacity:0;
    transform:translateY(30px);
    transition:0.6s;
}
.gallery img:hover{
    transform:scale(1.05);
    filter:brightness(0.9);
}
.gallery img.show{
    opacity:1;
    transform:translateY(0);
}
/* END CARD 6 */

/* CARD 7 */
/* BACKGROUND */
.card-7{
    padding:20px 20px;
    text-align:center;

    background:linear-gradient(
        135deg,
        #4B0082,   /* ungu */
        #800020,   /* maroon */
        #2e003e    /* deep purple */
    );

    color:white;
}

/* WRAPPER */
.closing-wrapper{
    max-width:600px;
    margin:auto;
}

/* IMAGE */
.closing-img{
    width:100%;
    max-width:350px;
    border-radius:20px;
    margin-bottom:30px;

    box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

/* TITLE */
.closing-title{
    font-size:20px;
    letter-spacing:2px;
    margin-bottom:10px;
    opacity:0.9;
}

/* NAMA (GOLD EFFECT) */
.closing-name{
    font-size:36px;
    margin-bottom:15px;

    background:linear-gradient(135deg, #FFD700, #C9A23A);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-family:'Playfair Display', serif;
}

/* TEXT */
.closing-text{
    font-size:14px;
    color:#ddd;
}

.closing-wrapper{
    opacity:0;
    transform:scale(0.95) translateY(30px);
    transition:1s ease;
}

.card-7.show .closing-wrapper{
    opacity:1;
    transform:scale(1) translateY(0);
}

.closing-name{
    text-shadow:0 0 20px rgba(255,215,0,0.3);
}

/* GIFT SECTION */
.gift-section{
    text-align:center;
    padding:20px 20px;
    background:linear-gradient(to bottom, #f5f0ff, #fff);
}

.gift-title{
    font-size:28px;
    color:#4B0082;
    margin-bottom:10px;
}

.gift-desc{
    font-size:14px;
    color:#777;
    margin-bottom:40px;
}

/* WRAPPER jadi center */
.gift-wrapper{
    display:flex;
    justify-content:center;
}

/* CARD */
.gift-card{
    width:100%;
    max-width:350px;

    background:linear-gradient(135deg, #967BB6, #E6E6FA);
    padding:25px;
    border-radius:20px;

    color:#4B0082;
    text-align:center;

    box-shadow:0 10px 25px rgba(150,123,182,0.3);
    transition:0.4s;
}

.gift-card:hover{
    transform:translateY(-8px);
}

/* LOGO */
.bank-logo{
    width:80px;
    margin-bottom:15px;

    background:white;
    padding:5px 10px;
    border-radius:10px;
}

/* TEXT */
.rekening{
    font-size:18px;
    font-weight:bold;
    margin:10px 0;
    letter-spacing:2px;
}

/* BUTTON */
.gift-card button{
    margin-top:10px;
    padding:8px 15px;
    border:none;
    border-radius:20px;

    background:#4B0082;
    color:#fff;
    cursor:pointer;

    transition:0.3s;
}

.gift-card button:hover{
    background:#2e004f;
}

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

    object-fit:contain;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}

/* KOMENTAR */
/* SECTION */
.comment-section{
    padding:20px 20px;
    text-align:center;
    background:linear-gradient(to bottom, #fff, #f5f0ff);
}

/* TITLE */
.comment-title{
    font-size:28px;
    color:#4B0082;
}

.comment-sub{
    font-size:14px;
    color:#888;
    margin-bottom:30px;
}

/* FORM */
.comment-form{
    max-width:400px;
    margin:0 auto 40px;
}

/* INPUT */
.comment-form input,
.comment-form textarea{
    width:100%;
    padding:12px;
    margin:10px 0;

    border-radius:12px;
    border:1px solid #ddd;

    font-family:inherit;
    font-size:14px;

    transition:0.3s;
}

.comment-form input:focus,
.comment-form textarea:focus{
    border-color:#967BB6;
    box-shadow:0 0 10px rgba(150,123,182,0.3);
    outline:none;
}

/* TEXTAREA */
.comment-form textarea{
    height:100px;
    resize:none;
}

/* BUTTON */
.comment-form button{
    width:100%;
    padding:12px;

    border:none;
    border-radius:25px;

    background:linear-gradient(135deg, #967BB6, #E6E6FA);
    color:#4B0082;

    font-weight:600;
    cursor:pointer;
    transition:0.3s;

    box-shadow:0 5px 20px rgba(150,123,182,0.3);
}

.comment-form button:hover{
    transform:scale(1.05);
}

/* LIST */
.comment-list{
    max-width:500px;
    margin:auto;
}

/* ITEM */
.comment{
    background:linear-gradient(135deg, #ffffff, #f5f0ff);
    border-radius:15px;

    padding:15px;
    margin-bottom:15px;

    text-align:left;

    box-shadow:0 5px 15px rgba(0,0,0,0.08);

    opacity:0;
    transform:translateY(20px);
    transition:0.5s;
}

.comment.show{
    opacity:1;
    transform:translateY(0);
}

/* NAME */
.comment h4{
    margin:0;
    color:#4B0082;
    font-size:16px;
}

/* MESSAGE */
.comment p{
    margin:5px 0 0;
    font-size:14px;
    color:#555;
}

.comment-status{
    margin-top:10px;
    font-size:13px;
    color:#967BB6;
    min-height:18px;
    transition:0.3s;
}

.comment-status.loading::after{
    content:'...';
    animation:dots 1s infinite;
}

@keyframes dots{
    0%{content:'';}
    33%{content:'.';}
    66%{content:'..';}
    100%{content:'...';}
}

.comment-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.time{
    font-size:11px;
    color:#aaa;
}