@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');
/* ==========================================
   THE WEDDING OF DEDY & AGNES
   STYLE.CSS V1
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#fff8f5;

    color:#444;

    overflow-x:hidden;

}

/* Container */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* ================= Opening ================= */

.opening{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        rgba(70,0,0,.45),
        rgba(20,0,0,.55)
    ),
    url("../images/cover/cover1.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:9999;

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}
/* ==========================================
   COVER SLIDER
========================================== */

.cover-slider{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}

.cover-slider img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    opacity:0;

    transform:scale(1.05);

    filter:brightness(.82);

    transition:

    opacity 2s ease,

    transform 1.2s ease,

    filter 2s ease;

}

.cover-slider img.active{

    opacity:1;

    transform:scale(1);

    filter:brightness(1);

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to bottom,

        rgba(0,0,0,.08) 0%,

        rgba(0,0,0,.18) 35%,

        rgba(0,0,0,.38) 70%,

        rgba(0,0,0,.65) 100%

    );
    
     transition:background .9s ease;
}

/*=====================================
OPENING WRAPPER
=====================================*/

.opening-wrapper{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

    z-index:2;

}

.opening-content{

    width:min(88%,360px);

    text-align:center;

    margin-bottom:90px;

    z-index:3;

}

/*=====================================
OPENING CARD
=====================================*/

@keyframes openingCard{

    0%{

        opacity:0;

        transform:
            translateY(20px)
            scale(.97);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/*=====================================
SLIDER DOTS
=====================================*/

.slider-dots{

    position:absolute;

    left:0;
    right:0;

    bottom:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}

.slider-dots.show{

    opacity:1;

    transform:translateY(0);

}

.dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:rgba(255,255,255,.28);

    transition:.35s ease;

}

.dot.active{

    width:24px;

    border-radius:50px;

    background:rgba(232,200,128,.9);

    box-shadow:none;

}

    

.small-title{

    font-family:'Cinzel',serif;
    font-size:13px;
    letter-spacing:6px;
    color:rgba(255,255,255,.75);
    text-transform:uppercase;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
     margin-bottom:10px;

}


.and{

    font-size:40px;

    margin:10px 0;

}

.nickname{

    margin-top:20px;

    font-size:20px;

}

.date{

    font-size:17px;

    letter-spacing:3px;

    color:rgba(255,255,255,.82);

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);
     margin:10px 0;

}

.opening-title{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(36px,8vw,50px);

    font-weight:600;

    color:rgba(232,200,128,.92);

    line-height:1;

    letter-spacing:.5px;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45);

    margin:6px 0;
   
    transform:translateY(20px) scale(.96);
}

.opening-rings{
    display:inline-flex;
    width:42px;
    height:30px;
    margin:0 8px;
    vertical-align:middle;
    align-items:center;
    justify-content:center;
}

.opening-rings svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.opening-rings circle{
    fill:none;
    stroke:rgba(232,200,128,.92);
    stroke-width:2.2;
}

.guest-title{

    font-size:12px;

    letter-spacing:4px;

    color:rgba(232,200,128,.88);
    
    margin-top:26px;
    margin-bottom:8px;

}

#guestName{

    color:rgba(255,255,255,.95);

    font-size:22px;

    font-weight:500;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);
    
    margin-top:0;
}

.opening-divider{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin:18px 0;

    opacity:0;

    transform:translateY(8px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.opening-divider.show{

    opacity:1;

    transform:translateY(0);

}

.opening-divider.show i{

    animation:
        dividerStar .65s cubic-bezier(.22,1,.36,1) forwards;

}

.opening-divider span{

    width:58px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(232,200,128,.95),
        transparent
    );

    transform:scaleX(0);

}

.opening-divider span:first-child{

    transform-origin:right;

}

.opening-divider span:last-child{

    transform-origin:left;

}

.opening-divider.show span{

    animation:
        dividerLine .7s cubic-bezier(.16,1,.3,1) .40s forwards;

}

.opening-divider i{

    color:#e8c880;

    font-size:14px;

    opacity:0;

    transform:scale(.2);

    display:flex;

    align-items:center;

    justify-content:center;

}

.guest-note{

    margin-top:18px;

    font-size:11px;

    line-height:1.6;

    color:rgba(255,255,255,.72);

    text-align:center;

    max-width:280px;

    margin-left:auto;

    margin-right:auto;

    font-weight:300;

    font-style:italic;
}

#openInvitation{

    margin-top:28px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:15px 30px;

    border-radius:18px;

    border:1px solid rgba(232,200,128,.45);

    background:rgba(25,25,25,.18);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    color:rgba(255,255,255,.92);

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:.35s ease;
   
    position:relative;

    overflow:hidden;

}

#openInvitation.breath{

    animation:buttonBreath 3.5s ease-in-out infinite;

}

#openInvitation.show{

    opacity:1;

    transform:translateY(0) scale(1);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22,.61,.36,1);

}

#openInvitation::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    animation:buttonShine 4s infinite;

}

.btn-icon{

    font-size:18px;

    color:rgba(232,200,128,.92);

}

@keyframes buttonShine{

    0%{

        left:-120%;

    }

    35%{

        left:150%;

    }

    100%{

        left:150%;

    }

}

#openInvitation:hover{

    transform:translateY(-2px);

    border-color:#E8C880;

    box-shadow:

        0 0 20px rgba(232,200,128,.18),

        0 10px 25px rgba(0,0,0,.18);

}

/*=====================================
BUTTON PRESS
=====================================*/

#openInvitation.pressed{

    transform:scale(.96);

    transition:
        transform .18s ease;

}

/*=====================================
OPENING CLICK
=====================================*/

.opening.zoom .cover-slider img.active{

    transform:scale(1.08);

}

.opening.zoom .overlay{

    background:linear-gradient(

        to bottom,

        rgba(0,0,0,.18),

        rgba(0,0,0,.35),

        rgba(0,0,0,.60),

        rgba(0,0,0,.82)

    );

}

/*=====================================
OPENING CLOSE
=====================================*/

.opening.zoom{

    transform:scale(.97);

    opacity:0;

    transition:

        transform 1.2s cubic-bezier(.22,.61,.36,1),

        opacity 1.2s ease;

}

/* ==========================================
   ANIMASI
========================================== */
@keyframes dividerLine{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}

@keyframes dividerStar{

    0%{

        opacity:0;

        transform:
            scale(.2)
            rotate(-25deg);

        text-shadow:
            0 0 0 rgba(232,200,128,0);

    }

    55%{

        opacity:1;

        transform:
            scale(1.45)
            rotate(8deg);

    }

    75%{

        transform:
            scale(.92)
            rotate(-3deg);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            rotate(0);

        text-shadow:
            0 0 8px rgba(232,200,128,.55);

    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes heroZoom{

    from{

        background-size:100%;

    }

    to{

        background-size:112%;

    }

}
/* ==========================================
   HERO
========================================== */

.hero{

    min-height:100vh;
    min-height:100svh;

    display:flex;

    justify-content:center;

    align-items:stretch;

    text-align:center;

    padding:0 20px;

    position:relative;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url("../images/hero/hero-bg.jpg") center center/cover no-repeat;

    transform:scale(1.05);

    animation:heroKenBurns 18s linear infinite alternate;

    z-index:0;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(45,0,0,.28),
        rgba(0,0,0,.50),
        rgba(55,0,0,.28)
    );

    z-index:1;

} 

.hero-content{

    position:relative;

    z-index:2;

    width:100%;
    max-width:480px;

    margin:0 auto;

    min-height:100svh;

    display:grid;

    grid-template-rows:auto 1fr auto;

    justify-items:center;

    padding:40px 0 20px;

}

.hero-top{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

}

.hero-bottom{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-self:end;

    align-self:end;

    padding-bottom:
       calc(env(safe-area-inset-bottom) + 82px);
}

.hero h4{

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:clamp(13px,2.8vw,18px);

    color:#ffe7a0;

    margin:0 0 10px;

}

.hero h1{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(22px,5.8vw,34px);

    text-wrap:balance;

    font-weight:600;

    line-height:.95;

    letter-spacing:.3px;

    color:rgba(232,200,128,.92);

}

.hero h2{

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

    margin:0;

    color:rgba(232,200,128,.9);

}

.hero .nickname{

    font-size:clamp(16px,4vw,22px);

    margin-top:18px;

    opacity:.95;

}

.hero-date{

    margin-top:8px;

    margin-bottom:0;

}

.couple-quote{

    max-width:650px;

    margin:60px auto;

    text-align:center;

}

.couple-quote p{

    font-style:italic;

    line-height:2;

    color:#555;

    text-shadow:none;

    font-size:17px;

}

.couple-quote span{

    display:block;

    margin-top:18px;

    color:#B8860B;

    letter-spacing:2px;

    font-family:'Cinzel',serif;

    font-size:14px;

}

/*=====================================
COUPLE INTRO
=====================================*/

.couple-intro{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

}

.couple-subtitle{

    margin-top:45px;

    font-family:'Cinzel',serif;

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:13px;

    color:#B8860B;

    opacity:0;

    transform:translateY(25px);

}

.couple-heading{

    margin-top:12px;

    font-family:'Great Vibes',cursive;

    font-size:56px;

    color:#8B1E2D;

    line-height:1.2;

    opacity:0;

    transform:translateY(30px);

}

.couple-description{

    margin-top:30px;

    line-height:2;

    font-size:17px;

    color:#666;

    opacity:0;

    transform:translateY(35px);

}

.couple-description strong{

    color:#8B1E2D;

    font-weight:600;

}

/*=====================================
HERO MONOGRAM
=====================================*/

.couple-monogram{

    position:relative;

    margin:45px auto 30px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

}

.zodiac-dog,
.zodiac-goat {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    z-index: 2;
    opacity: 0.75;
}

.zodiac-dog {
    left: 30px;
    top: -8px;
}

.zodiac-goat {
    right: 30px;
    bottom: -10px;
}

.mono-d,
.mono-a{
    font-family:'Great Vibes',cursive;
    font-size:clamp(50px,12vw,78px);
    color:#FFD86B;
    line-height:1;
    letter-spacing:2px;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45),
        0 0 20px rgba(255,216,107,.25);

    opacity:0;
}

.mono-d {
    transform: translateX(-80px);
}

.mono-a {
    transform: translateX(80px);
}

.mono-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    width:100%;

}

.mono-divider span{

    position:relative;

    overflow:hidden;

    width:60px;

    height:1.5px;

    background:linear-gradient(
        to right,
        transparent,
        #D4AF37,
        transparent
    );

    opacity:0;

    transform:scaleX(0);

    box-shadow:
        0 0 8px rgba(212,175,55,.45);

}

.mono-divider span::after{

    content:"";

    position:absolute;

    top:0;

    left:-180%;

    width:90%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.95),

        transparent

    );

    opacity:0;

}

.mono-divider span:first-child{

    transform-origin:right;

}

.mono-divider span:last-child{

    transform-origin:left;

}

.mono-logo{

    width:44px;

    height:44px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(212,175,55,.35));

    opacity:0;

    transform:scale(.25) rotate(-20deg);

}

/* ===========================
   COUPLE MONOGRAM ANIMATION
=========================== */

.couple-header.is-visible .mono-d{

    animation:monoD 1.2s cubic-bezier(.22,1,.36,1) forwards;

}

.couple-header.is-visible .mono-a{

    animation:monoA 1.2s cubic-bezier(.22,1,.36,1) .35s forwards;

}

.couple-header.is-visible .mono-logo{
    animation:
        peonyBloom .9s ease .75s forwards,
        peonyBreath 3.5s ease-in-out 1.65s infinite;

}

.couple-header.is-visible .mono-divider span:first-child{

    animation:lineLeftGrow .65s ease 1.45s forwards;

}

.couple-header.is-visible .mono-divider span:last-child{

    animation:lineRightGrow .65s ease 1.45s forwards;

}

.couple-header.is-visible .mono-divider span::after{

    opacity:1;
    animation:lineShine .9s ease 2s forwards;

}

/* Quote */

.couple-quote{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.couple-header.is-visible .couple-quote{
    animation:fadeUpReveal .8s ease 2.25s forwards;
}


/* Subtitle */

.couple-subtitle{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.couple-header.is-visible .couple-subtitle{
    animation:fadeUpReveal .8s ease 2.45s forwards;
}


/* Heading */

.couple-heading{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.couple-header.is-visible .couple-heading{
    animation:fadeUpReveal .8s ease 2.65s forwards;
}


/* Description */

.couple-description{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.couple-header.is-visible .couple-description{
    animation:fadeUpReveal .8s ease 2.9s forwards;
}

@keyframes monoD {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(.82);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes monoA {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(.82);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes peonyBloom{

    0%{

        opacity:0;

        transform:scale(.25) rotate(-20deg);

    }

    60%{

        opacity:1;

        transform:scale(1.15) rotate(8deg);

    }

    100%{

        opacity:1;

        transform:scale(1) rotate(0);

    }

}

@keyframes peonyBreath{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }

}

@keyframes lineLeftGrow{

    0%{

        opacity:0;

        transform:scaleX(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:.9;

        transform:scaleX(1);

    }

}

@keyframes lineRightGrow{

    0%{

        opacity:0;

        transform:scaleX(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:.9;

        transform:scaleX(1);

    }

}

@keyframes fadeUpReveal{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes lineShine{

    0%{

        opacity:0;

        left:-180%;

    }

    20%{

        opacity:1;

    }

    100%{

        opacity:0;

        left:180%;

    }

}

/* ==========================================
   COUNTDOWN
========================================== */

.countdown{

    margin:0 0 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:nowrap;

}

.box{

    width:clamp(60px,16vw,64px);
    height:clamp(84px,21vw,90px);

    position:relative;

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

    background:
        linear-gradient(
            180deg,
            #7b121b 0%,
            #631018 45%,
            #4d0b11 100%
        );

    border:2px solid #d8b36a;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -2px 8px rgba(0,0,0,.25),
        0 8px 20px rgba(0,0,0,.30);
}

.box::before,
.box::after{

    position:absolute;

    color:#f1d38a;

    font-size:13px;

    line-height:1;

    text-shadow:0 0 5px rgba(232,200,128,.45);
    
    opacity:.95;
}

.box::before{

    content:"❀";

    top:6px;
    left:6px;

}

.box::after{

    content:"❀";

    bottom:6px;
    right:6px;

}

.box h3{

    margin:0;

    font-family:'Cormorant Garamond',serif;
    
    margin-top:6px;

    font-size:clamp(24px,6vw,30px);

    font-weight:700;

    color:#f7d98c;

    line-height:1;

    text-shadow:
        0 0 8px rgba(232,200,128,.25);

}

.box span{

    margin-top:6px;

    width:72%;

    padding-top:5px;

    border-top:1px solid rgba(216,179,106,.45);

    text-align:center;

    font-size:10px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#f5e8c4;

}

/* ==========================================
   SECTION UMUM
========================================== */

section{

    padding:90px 20px;

}

section h2{

    text-align:center;

    font-family:'Cinzel',serif;

    font-size:42px;

    color:#a11c2b;

    margin-bottom:20px;

}

section p{

    line-height:1.8;

}

/* ==========================================
   COUPLE
========================================== */

.couple{

    background-color:#fff7f2;

}

.couple-header{

    position:relative;
    background:none;

}

.couple-header::before{
    content:"";
    position:absolute;

    top:-115px;
    bottom:0;
    left:50%;
    width:100vw;

    transform:translateX(-50%);

    background-image:url("../images/couple/couple-bg.png");
    background-position:center top;
    background-size:100% 100%;
    background-repeat:no-repeat;

    z-index:0;
    pointer-events:none;
}

.couple-header > *{

    position:relative;
    z-index:1;

}

.couple .container{

    max-width:900px;

    margin:auto;

}

/*=====================================
LOVE DIVIDER
=====================================*/

.love-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:10px 0;
}

.couple .love-divider{
    margin:50px 0 35px;
}

.love-divider span{

    width:80px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #D4AF37,
        transparent
    );

}

.love-divider img{

    width:26px;

    height:26px;

}

/* ==========================================
   EVENT
========================================== */

.event{

    background:#ffffff;

}

.event-card{

    max-width:700px;

    margin:35px auto;

    padding:45px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(12px);

    border-radius:30px;

    border:1px solid rgba(212,175,55,.2);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

    transition:.4s ease;

    display:flex;
    flex-direction:column;

}

.event-card h3{

    font-family:'Great Vibes',cursive;

    font-size:42px;

    color:#8B1E2D;

    margin-bottom:18px;

}

.event-label{

    font-family:'Cinzel', serif;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#D4AF37;

    font-size:13px;

    margin-bottom:10px;

}

.event-card p{

    margin:8px 0;

}

.event-location{

    color:#666;

    margin:18px 0;

    font-size:16px;

}

.event-button{

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

    width:100%;

    margin-top:auto;

    padding:18px 20px;

    text-decoration:none;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FFF8F1 100%
        );

    border:1.5px solid rgba(212,175,55,.55);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 25px rgba(0,0,0,.06);

    transition:.35s ease;

}

.event-btn-title{

    display:flex;
    align-items:center;
    gap:8px;

    color:#8B1E2D;

    font-size:.96rem;

    font-weight:600;

    letter-spacing:.6px;

}

.event-btn-title i{

    font-size:1rem;

}

.event-btn-subtitle{

    margin-top:5px;

    font-size:.78rem;

    color:#8A7A67;

    letter-spacing:.3px;

}

@media (hover:hover){

     .event-card:hover{

        transform:translateY(-8px);

        box-shadow:
            0 28px 60px rgba(0,0,0,.12);

    }

    .event-button:hover{

        transform:none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 10px 25px rgba(0,0,0,.06);

    }

}

/* ===========================
EVENT IMAGE
=========================== */

.event-image{

    position:relative;

    width:100%;

    margin-bottom:32px;

    overflow:hidden;

    border-radius:24px;

    transform:translateY(-6px);

    box-shadow:
        0 18px 36px rgba(0,0,0,.08),
        0 6px 16px rgba(212,175,55,.06);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.event-image::before{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(212,175,55,.45);

    border-radius:18px;

    pointer-events:none;
    
    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18);
}

.event-image::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:40%;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18),
        transparent
    );

    pointer-events:none;

}

.event-image img{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:.6s ease;

}

.event-ornament{

    margin:10px auto 8px;

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#D4AF37;

    font-size:16px;

    opacity:.9;

}

/*=====================================
SECTION DIVIDER
=====================================*/

.section-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin:25px 0 50px;

}

.section-divider span{

    width:70px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #D4AF37,
        transparent
    );

}

.divider-flower{

    width:28px;

    height:28px;

    display:block;

    flex-shrink:0;

    object-fit:contain;

    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.28));

    transition:
        transform .45s ease,
        filter .45s ease;
    
    animation:dividerBreath 5s ease-in-out infinite;

}

.section-divider:hover .divider-flower,
.love-divider:hover .divider-flower{

    transform:rotate(8deg) scale(1.08);

    filter:
        drop-shadow(0 0 14px rgba(212,175,55,.45));

}

@keyframes dividerBreath{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

}

.story-label{

    font-family:'Cinzel',serif;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:14px;

    color:#D4AF37;

    margin-bottom:12px;

}
/* ==========================================
   LOVE STORY
========================================== */

.story{

    background:#fffdf9;

    padding:110px 20px;

}

.story-quote{

    max-width:700px;

    margin:0 auto 45px;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    line-height:1.6;

    color:#8B1E2D;

    font-style:italic;

}

.story-photo{

    width:100%;

    max-width:700px;

    margin:0 auto 45px;

    overflow:hidden;

    border-radius:30px;

    box-shadow:

        0 18px 40px rgba(0,0,0,.08);

}

.story-photo img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.story-video{
    width:100%;
    max-width:700px;
    margin:0 auto 45px;
    overflow:hidden;
    border-radius:30px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.story-video video{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
}

.story-card{

    max-width:760px;
    margin:auto;
    padding:42px;

    background:#fffdfa;

    background-image:
        linear-gradient(
            rgba(255,255,255,.55),
            rgba(255,255,255,.55)
        );

    border-radius:28px;

    border:1px solid rgba(212,175,55,.18);

    box-shadow:
        0 18px 45px rgba(0,0,0,.05),
        0 2px 10px rgba(212,175,55,.05);

    position:relative;
    overflow:hidden;
    min-height:260px;
}

.story-switch{

    display:flex;

    justify-content:center;

    margin-bottom:35px;

    background:#f7f2ea;

    border-radius:50px;

    padding:5px;

}

.story-btn{

    border:none;

    background:none;

    padding:13px 28px;

    border-radius:40px;

    cursor:pointer;

    font-size:14px;

    transition:.35s;
   
    font-family:'Poppins',sans-serif;

    font-weight:500;

    letter-spacing:.3px;

    min-width:130px;

}

.story-btn.active{

    background:#8B1E2D;

    color:white;

    box-shadow:
    0 8px 18px rgba(139,30,45,.22);
}

.story-content{

    opacity:0;

    visibility:hidden;

    position:absolute;

    inset:0;

    transform:translateY(8px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}

.story-content.active{

    opacity:1;

    visibility:visible;

    position:relative;

    transform:translateY(0);

}

.story-content p{

    text-align:center;

    color:#666;

    line-height:2.1;

    margin-bottom:18px;

}

.story-signature{

    margin-top:45px;

    text-align:center;

    font-family:'Cinzel',serif;

    color:#999;

}

.story-signature span{

    display:block;

    margin-top:10px;

    font-family:'Great Vibes',cursive;

    font-size:42px;

    color:#8B1E2D;

}

/* ==========================================
   GALLERY
========================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:50px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    background:#fff;

    padding:8px;

    border-radius:24px;

    cursor:pointer;

    border:1px solid rgba(212,175,55,.15);

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(212,175,55,.35);

    border-radius:18px;

    pointer-events:none;

    z-index:2;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:18px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18),
        transparent 35%
    );

    pointer-events:none;

    z-index:1;

}

.gallery-item img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:16px;

    transition:transform .7s ease;

}

.gallery-item.gallery-featured{
    grid-column:1/-1;
    aspect-ratio:3/4;
}

.gallery-item.landscape{

    grid-column:1/-1;

    aspect-ratio:16/9;

}

.gallery-item.portrait{

    aspect-ratio:3/4;

}

/* ==========================================
   GALLERY LIGHTBOX
========================================== */

.gallery-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

    padding:20px;
   
     transition:
        opacity .35s ease,
        visibility .35s ease;

}

.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}

.gallery-lightbox img{
    max-width:100%;
    max-height:82vh;
    border-radius:20px;
    object-fit:contain;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    display:block;
}

.lightbox-close{

    position:absolute;

    top:20px;

    right:20px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    backdrop-filter:blur(8px);
    
    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

}

.lightbox-counter{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:15px;

    letter-spacing:1px;
   
    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.12);

}

.gallery-item:active{

    transform:scale(.98);

    transition:.15s;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

.lightbox-prev{

    left:18px;

}

.lightbox-next{

    right:18px;

}

/* ==========================================
   RSVP
========================================== */

.rsvp{
    background:#ffffff;
}


.rsvp form{
    width:100%;
    max-width:620px;
    margin:0 auto;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(255,248,245,.94)
        );

    padding:38px 34px;

    border-radius:28px;

    border:1px solid rgba(212,175,55,.28);

    box-shadow:
        0 20px 55px rgba(74,25,18,.08),
        0 4px 18px rgba(212,175,55,.06);

    position:relative;
    overflow:hidden;

    background-image:
        url("../images/decor/sakura-chinese-top-left.png"),
        url("../images/decor/sakura-chinese-top-right.png"),
        url("../images/decor/sakura-chinese-bottom-left.png"),
        url("../images/decor/sakura-chinese-bottom-right.png"),
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(255,248,245,.95)
        );

    background-position:
        left top,
        right top,
        left bottom -8px,
        right bottom -8px,
        center;

    background-size:
        95px auto,
        105px auto,
        95px auto,
        90px auto,
        100% 100%;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
}


.rsvp input,
.rsvp textarea,
.rsvp select{
    width:100%;
    box-sizing:border-box;

    padding:15px 17px;
    margin:9px 0;

    background:rgba(255,255,255,.78);

    border:1px solid rgba(150,45,35,.16);
    border-radius:14px;

    color:#4a2521;
    font-family:inherit;
    font-size:15px;

    outline:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        transform .3s ease;
}


.rsvp input::placeholder,
.rsvp textarea::placeholder{
    color:#9a8580;
    opacity:1;
}


.rsvp input:focus,
.rsvp textarea:focus,
.rsvp select:focus{
    border-color:#c99b35;

    background:#fffdfb;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.08),
        0 8px 20px rgba(74,25,18,.05);
}


.rsvp textarea{
    min-height:125px;
    resize:vertical;
    line-height:1.6;
}


.rsvp select{
    appearance:none;
    -webkit-appearance:none;

    padding-right:44px;

    background-image:
        linear-gradient(45deg, transparent 50%, #a77b2d 50%),
        linear-gradient(135deg, #a77b2d 50%, transparent 50%);

    background-position:
        calc(100% - 19px) 21px,
        calc(100% - 13px) 21px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:no-repeat;
}


.rsvp button{
    width:100%;
    min-height:64px;

    padding:11px 18px;

    border:1px solid rgba(212,175,55,.38);
    border-radius:16px;

    background:rgba(255,253,249,.96);

    color:#8b2520;

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

    gap:3px;

    font-family:inherit;
    font-size:16px;
    font-weight:600;
    letter-spacing:.2px;

    cursor:pointer;

    position:relative;
    overflow:hidden;

    box-shadow:
        0 7px 18px rgba(74,25,18,.06),
        0 1px 3px rgba(212,175,55,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.rsvp button::after{
    content:"Konfirmasi Kehadiran  →";

    display:block;

    color:#9b8a78;

    font-size:11px;
    font-weight:400;
    letter-spacing:.3px;
}


.rsvp button::before{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transform:skewX(-20deg);

    transition:left .7s ease;
}


.rsvp button:hover::before{
    left:140%;
}


.rsvp button:hover{
    transform:translateY(-2px);

    border-color:rgba(212,175,55,.65);

    background:#fffaf5;

    box-shadow:
        0 11px 24px rgba(74,25,18,.09),
        0 2px 6px rgba(212,175,55,.10);
}


.rsvp button:active{
    transform:translateY(1px) scale(.985);
}


/* ISI FORM TETAP DI ATAS DEKORASI */

.rsvp form > *{
    position:relative;
    z-index:1;
}


/* ==========================================
   GIFT — PREMIUM BANK CARD
========================================== */

.gift{

    background:#fff7f2;
}

.gift-account-card {
    width: min(100%, 420px);
    margin: 0 auto 26px;
    padding: 28px 24px 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(255,249,245,.95)
        );

    border: 1px solid rgba(202,160,70,.30);
    border-radius: 28px;

    box-shadow:
        0 18px 45px rgba(91,42,35,.07),
        0 5px 16px rgba(202,160,70,.05);

    text-align: center;

    position: relative;
    overflow: hidden;
}


/* GARIS GOLD BAGIAN ATAS */

.gift-account-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;
    right: 14%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c9a44c,
            transparent
        );

    opacity: .65;
}


/* LOGO BANK */

.gift-account-card .bank-logo {
    display: flex;

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

    min-height: 48px;

    margin-bottom: 9px;
}

.gift-account-card .bank-logo img {
    display: block;

    width: auto;

    max-width: 135px;
    max-height: 45px;

    object-fit: contain;
}


/* DIVIDER GOLD */

.gift-account-card .bank-divider {
    width: 34px;
    height: 1px;

    margin: 0 auto 15px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c9a44c,
            transparent
        );

    opacity: .8;
}


/* INFORMASI REKENING */

.gift-account-card .bank-info h3 {
    margin: 0 0 7px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.2;

    color: #7f2928;
}


/* NOMOR REKENING */

.gift-account-card .account-number {
    margin: 0;

    font-family: 'Cinzel', serif;

    font-size: clamp(23px, 6.5vw, 30px);

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: 1.4px;

    color: #b78d25;

    text-align: center;

    white-space: nowrap;
}


/* NAMA BANK */

.gift-account-card .bank-name {
    display: block;

    margin-top: 6px;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: #9a857d;
}


/* ==========================================
   GIFT INTRO
========================================== */

.gift-intro {
    max-width: 420px;

    margin: 0 auto 30px;

    text-align: center;
}

.gift-intro .gift-icon {
    display: block;

    margin-bottom: 10px;

    font-size: 15px;

    color: #c29b32;

    opacity: .8;
}

.gift-intro p {
    margin: 0 auto 7px;

    max-width: 360px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    line-height: 1.55;

    color: #7f2928;
}

.gift-intro .gift-subtitle {
    display: block;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 10px;

    line-height: 1.6;

    color: #9a857d;

    letter-spacing: .2px;
}


/* ==========================================
   COPY ACCOUNT
========================================== */

.gift-account-card .copy-account {
    width: 100%;

    min-height: 64px;

    padding: 11px 18px;

    border:
        1px solid rgba(212,175,55,.38);

    border-radius: 16px;

    background:
        rgba(255,253,249,.96);

    color: #8b2520;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: .2px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 7px 18px rgba(74,25,18,.06),
        0 1px 3px rgba(212,175,55,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.gift-account-card .copy-title {
    display: block;

    margin: 0;

    color: #8b2520;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .2px;
}


.gift-account-card .copy-account > span:last-child {
    margin-top: 2px;

    color: #9b8a78;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.3;

    letter-spacing: .3px;
}


.gift-account-card .copy-account:hover {
    transform: translateY(-2px);

    border-color:
        rgba(212,175,55,.65);

    box-shadow:
        0 10px 24px rgba(74,25,18,.10);
}
/* ==========================================
   UCAPAN
========================================== */

.wish{

    background:#ffffff;

}

.wish-card{

    max-width:700px;

    margin:30px auto;

    padding:35px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(12px);

    border-radius:28px;

    border:1px solid rgba(212,175,55,.2);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

    transition:.35s ease;

}
.wish-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 24px 55px rgba(0,0,0,.12);

}

.wish-card h4{

    font-family:'Cinzel',serif;

    color:#D4AF37;

    letter-spacing:2px;

    margin-bottom:14px;

}

.wish-card p{

    color:#666;

    line-height:1.9;

    font-size:15px;

}
/* ==========================================
   CLOSING — FOTO BACKGROUND
========================================== */

.closing{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    color:#fff;
    text-align:center;
}

/* Foto sebagai background */
.closing::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(55,0,0,.68),
            rgba(35,0,0,.78)
        ),
        url("../images/closing/foto-kalian.jpg")
        center center / cover no-repeat;

    z-index:-2;
}

/* Efek lembut di atas foto */
.closing::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,210,130,.08),
            transparent 65%
        );

    z-index:-1;
    pointer-events:none;
}

/* Semua isi tetap di atas foto */
.closing .container{
    position:relative;
    z-index:2;
}

.closing h2{
    color:#ffd86b;
}

/* Kalimat penutup */
.closing p{
    max-width:760px;
    margin:35px auto;
    line-height:2;
    font-size:17px;
    color:rgba(255,255,255,.92);
}

/* ==========================================
   CLOSING COUPLE NAMES
========================================== */

.closing-couple-names{
    width:100%;
    margin:32px auto 0;

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

    text-align:center;
}

.closing-name{
    display:block;

    font-family:'Great Vibes',cursive;
    font-size:clamp(38px,9vw,56px);
    line-height:1.05;

    color:#FFD86B;

    text-shadow:
        0 5px 15px rgba(0,0,0,.30);
}

.closing-rings{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:34px;

    margin:4px 0;

    color:#D9AE3A;
    flex:0 0 auto;
}

.closing-rings svg{
    display:block;
    width:38px;
    height:auto;

    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

@media (max-width:576px){

    .closing-rings{
        width:38px;
        height:31px;
        margin:3px 0;
    }

    .closing-rings svg{
        width:34px;
    }
}

@media (max-width:576px){

    .closing-couple-names{
        margin-top:28px;
    }

    .closing-name{
        font-size:38px;
    }

}

/* ==========================================
   CLOSING CREDIT
========================================== */

.closing-credit{
    margin-top:30px;

    text-align:center;
}

.closing-music{
    display:flex;

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

    gap:8px;

    color:#f6d98a;

    font-size:13px;

    letter-spacing:.5px;
}

.closing-music-icon{
    font-size:12px;

    color:#ffd86b;
}

.closing-created{
    margin-top:12px;

    font-family:'Cinzel',serif;

    font-size:11px;

    letter-spacing:1.5px;

    color:rgba(255,255,255,.82);

    text-transform:uppercase;
}

.closing-copyright{
    margin-top:18px;

    font-size:10px;

    line-height:1.7;

    letter-spacing:.4px;

    color:rgba(255,255,255,.58);
}

/* ==========================================
   FOOTER
========================================== */

footer{

    background:#5a0d0f;

    color:white;

    text-align:center;

    padding:30px;

}

footer p{

    color:white;

    line-height:1.8;

}

/*=====================================
   FLOATING NAVIGATION
=====================================*/

.bottom-nav{
    position:fixed;
    right:18px;
    bottom:18px;

    width:auto;
    height:auto;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    background:transparent;
    border:0;
    box-shadow:none;

    z-index:99999;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(10px);
    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}

/* Navigation aktif setelah undangan dibuka */
.bottom-nav.nav-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

/* Kumpulan tombol */
.floating-links{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;

    margin-bottom:10px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(10px) scale(.95);
    transform-origin:bottom right;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}

/* Menu terbuka */
.bottom-nav.menu-open .floating-links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0) scale(1);
}

/* Tombol navigasi */
.floating-links a,
.music-toggle{
    width:46px;
    height:46px;

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

    border-radius:50%;

    background:rgba(120,0,0,.94);
    border:1px solid #D4AF37;

    color:#F5D98A;
    text-decoration:none;

    box-shadow:0 5px 18px rgba(0,0,0,.25);

    box-sizing:border-box;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

/* Ikon */
.floating-links a i,
.music-toggle i{
    font-size:17px;
}

/* Teks tidak ditampilkan pada floating button */
.floating-links a span{
    display:none;
}

/* Tombol utama */
.menu-toggle{
    width:54px;
    height:54px;

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

    border-radius:50%;

    background:transparent;
    border:2px solid rgba(212,175,55,.75);

    color:#F5D98A;

    box-shadow:none;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}

.menu-toggle i{
    font-size:19px;
}

/* Efek hover */
.floating-links a:hover,
.music-toggle:hover{
    transform:scale(1.08);
    background:#900000;
    color:#FFD86B;
}

.menu-toggle:hover{
    transform:scale(1.08);
    background:rgba(120,0,0,.18);
    color:#FFD86B;
}

/* Saat menu terbuka */
.bottom-nav.menu-open .menu-toggle{
    transform:rotate(45deg);
}

/*=====================================
SCROLL INDICATOR
=====================================*/

.scroll-indicator{

    margin:0 0 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.scroll-arrow{

    display:flex;

    justify-content:center;

    margin-bottom:8px;

}

.scroll-arrow i{

    width:10px;

    height:10px;

    border-right:1.8px solid #e8c880;

    border-bottom:1.8px solid #e8c880; 

    transform:rotate(45deg);

    animation:arrowFloat 1.8s ease-in-out infinite;
 
    filter:drop-shadow(
    0 0 6px rgba(232,200,128,.35)
    );

}

.scroll-indicator p{

    margin:0;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:rgba(255,255,255,.82);

}

.scroll-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:8px;

}

.scroll-divider b{

    color:#e8c880;

    font-size:13px;

    animation:flowerLoop 5.5s ease-in-out infinite;

}

.scroll-divider .line{

    width:68px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #d8b36a,
        transparent
    );

    transform:scaleX(0);

}

.scroll-divider .left{

    transform-origin:right;

    animation:lineLeftLoop 5.5s ease-in-out infinite;

}

.scroll-divider .right{

    transform-origin:left;

   animation:lineRightLoop 5.5s ease-in-out infinite;

}

@keyframes arrowFloat{

    0%,100%{

        opacity:.45;

        filter:drop-shadow(0 0 2px rgba(232,200,128,.15));

        transform:
            translateY(0)
            rotate(45deg);

    }

    50%{

        opacity:1;

        filter:drop-shadow(0 0 8px rgba(232,200,128,.55));

        transform:
            translateY(6px)
            rotate(45deg);

    }

}

@keyframes flowerLoop{

     0%,65%,100%{
         opacity:0;

         transform:scale(.6);
   }

     10%{
         opacity:1;

         transform:scale(1.08);
   }

     18%{
         opacity:1;

         transform:scale(1);
   }

}

@keyframes lineLeftLoop{

    0%,12%{

        transform:scaleX(0);

    }

    22%,100%{

        transform:scaleX(1);

    }

}

@keyframes lineRightLoop{

    0%,12%{

        transform:scaleX(0);

    }

    22%,100%{

        transform:scaleX(1);

    }

}

/*=====================================
HERO REVEAL
=====================================*/

.hero-reveal{

    opacity:0;

    transform:translateY(25px);

    animation:heroFade .8s ease forwards;

}
@keyframes heroFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
OPENING REVEAL
=====================================*/

.opening-reveal{

    opacity:0;

    filter:blur(15px);

    transform:
        translateY(45px)
        scale(.92);

    transition:

        opacity .9s cubic-bezier(.22,.61,.36,1),

        transform .9s cubic-bezier(.22,.61,.36,1),

        filter .9s cubic-bezier(.22,.61,.36,1);

}

.opening-reveal.show{

    opacity:1;

    filter:blur(0);

    transform:
    translateY(0)
    scale(1);

}

@keyframes openingReveal{

    from{

        opacity:0;

        filter:blur(10px);

        transform:translateY(35px);

    }

    to{

        opacity:1;

        filter:blur(0);

        transform:translateY(0);

    }

}

@keyframes heroKenBurns{

    0%{
        transform:scale(1.02) translateY(0);
    }

    100%{
        transform:scale(1.06) translateY(-10px);
    }

}

@keyframes buttonBreath{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .hero-bg{

        background-size:cover;

        background-position:center 15%;

        background-repeat: no-repeat;

    }

    .opening-title{

        font-size:clamp(34px,9vw,46px);

    } 


    .countdown{

        gap:12px;

    }

    .box h3{

        font-size:26px;

    }

    section{

        padding:70px 15px;

    }

    .guest-box{

        width:90%;

    }

}

/* ===========================
   GLOBAL REVEAL SYSTEM
=========================== */

.reveal{

    opacity:0;

    transform:translateY(34px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);

    will-change:
        opacity,
        transform;

}

.reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}

.couple-intro.reveal{

    transform:none;

}

.couple-intro.reveal.is-visible{

    transform:none;

}

/* =========================================
   COUPLE PROFILE V2
========================================= */

.profile-card{
    position:relative;
    width:100%;
    overflow:hidden;
    text-align:center;
}

.profile-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent 25%,
        rgba(255,255,255,.65) 48%,
        rgba(255,255,255,.95) 50%,
        rgba(255,255,255,.65) 52%,
        transparent 75%
    );

    transform:translateX(-180%) skewX(-22deg);

    opacity:0;

    pointer-events:none;

}

.profile-card.bride.reveal.is-visible::before,
.profile-card.groom.reveal.is-visible::before{
    animation:none;
}

/* ==========================================
   PROFILE CARD REVEAL
========================================== */

.profile-card.reveal{

    opacity:0;

}

.profile-image img{

    transform:scale(1);

}

.profile-card.bride.reveal.is-visible .profile-image img,
.profile-card.groom.reveal.is-visible .profile-image img{
    animation:none;
}

@keyframes imageZoom{

    from{

        transform:scale(1.12);

    }

    to{

        transform:scale(1);

    }

}

@keyframes cardShine{

    0%{

        opacity:0;

        transform:translateX(-180%) skewX(-22deg);

    }

    10%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateX(220%) skewX(-22deg);

    }

}

@keyframes brideReveal{

    from{
        opacity:0;
        transform:translateX(-60px) scale(.95);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:translateX(0) scale(1);
        filter:blur(0);
    }

}

@keyframes groomReveal{

    from{
        opacity:0;
        transform:translateX(60px) scale(.95);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:translateX(0) scale(1);
        filter:blur(0);
    }

}

.profile-card:first-of-type{

    margin-top:60px;

}

.profile-label{
    position:relative;

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

    gap:18px;

    width:100%;

    margin-bottom:24px;

    font-family:'Cinzel',serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:5px;

    color:#B8892D;

    text-transform:uppercase;
}

.profile-label::before,
.profile-label::after{

    content:"";

    flex:1;

    max-width:80px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #D4AF37,
        transparent
    );

    opacity:.75;

}

.profile-frame{
    position:relative;

    width:228px;
    aspect-ratio:9 / 16;
    height:auto;

    margin-left:auto;
    margin-right:auto;

    overflow:hidden;

    border-radius:28px;

    border:none;

    background:#fff;

    box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    0 0 24px rgba(212,175,55,.12);

    isolation:isolate;

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.profile-frame:hover{

    transform:
        translateY(-4px)
        scale(1.015);

    box-shadow:

        0 28px 56px rgba(0,0,0,.18),

        0 0 26px rgba(212,175,55,.24);

}

.profile-frame::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.28) 0%,

    rgba(255,255,255,.12) 18%,

    transparent 42%,

    rgba(255,230,170,.06) 100%

    );

    opacity:0;

    transition:opacity .9s ease;

}

.frame-shine{

    position:absolute;

    inset:-35%;

    background:linear-gradient(

    115deg,

    transparent 35%,

    rgba(255,248,215,.95) 48%,

    rgba(255,233,170,.82) 52%,

    transparent 65%

    );

    transform:
        translateX(-180%)
        rotate(20deg);

    pointer-events:none;

    opacity:0;

    z-index:2;

}

.profile-card.is-visible .profile-frame::after{

    opacity:1;

    box-shadow:

        inset 0 0 12px rgba(255,225,160,.18);

    transition-delay:1.35s;

}

.profile-card.is-visible .frame-border::before{

    animation:borderTop .30s linear .30s forwards;

}

.profile-card.is-visible .border-right{

    animation:borderRight .30s linear .60s forwards;

}

.profile-card.is-visible .frame-border::after{

    animation:borderBottom .30s linear .90s forwards;

}

.profile-card.is-visible .border-left{

    animation:borderLeft .30s linear 1.20s forwards;

}

.profile-media {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    opacity:0;
    transform:scale(1);
    transition:opacity .9s ease;
    position:relative;
    z-index:1;
}

.profile-card.is-visible .profile-media {
    opacity:1;
    transform:scale(1);
    transition-delay:1.85s;
}

.profile-instagram{

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#B8892D;

    font-size:14px;

}

.profile-instagram img{

    width:18px;

    height:18px;

}

.profile-name{
    margin:18px auto 0;

    width:100%;
    max-width:330px;

    font-family:'Cormorant Garamond',serif;
    font-size:38px;
    font-weight:600;
    line-height:1.12;

    text-align:center;

    color:#642C2C;
}

.profile-nickname{
    margin:7px auto 0;

    width:100%;
    max-width:300px;

    font-size:18px;
    line-height:1.4;

    text-align:center;

    color:#B8892D;
    font-style:italic;
}

.profile-parents{
    margin:22px auto 0;

    width:100%;
    max-width:300px;

    line-height:1.8;

    text-align:center;

    color:#555;
    font-size:14px;
}

.profile-card.is-visible .frame-shine{

    animation:

        frameShine .95s ease 1.55s forwards;

}

.frame-border{

    position:absolute;

    inset:0;

    border-radius:inherit;

    overflow:hidden;

    z-index:3;

    pointer-events:none;

}

/* Garis Atas */

.frame-border::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:#D4AF37;

    background:linear-gradient(
    to right,
    #F6E7A8,
    #D4AF37,
    #B8892D
    );

    transform:scaleX(0);

    transform-origin:left;

}

/* Garis Bawah */

.frame-border::after{

    content:"";

    position:absolute;

    bottom:0;
    right:0;

    width:100%;
    height:1px;

    background:linear-gradient(
    to right,
    #F6E7A8,
    #D4AF37,
    #B8892D
    );

    transform:scaleX(0);

    transform-origin:right;

}

.frame-border .border-left,
.frame-border .border-right{

    position:absolute;

    width:1px;

    height:100%;

    background:#D4AF37;

    transform:scaleY(0);

}

.frame-border .border-left{

    top:0;
    left:0;

    transform-origin:top;

}

.frame-border .border-right{

    bottom:0;
    right:0;

    transform-origin:bottom;

}

.profile-frame::after{

    content:"";

    position:absolute;

    inset:7px;

    border-radius:22px;

    border:1px solid rgba(255,235,180,.32);

    pointer-events:none;

    opacity:0;

    transition:

    opacity .8s ease,

    box-shadow .8s ease;

    box-shadow:

    inset 0 0 0 rgba(255,220,150,0);

    z-index:2;

}

@keyframes frameShine{

    0%{

        opacity:0;

        transform:
            translateX(-180%)
            rotate(20deg);

    }

    12%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translateX(180%)
            rotate(20deg);

    }

}

@keyframes borderTop{

    to{

        transform:scaleX(1);

    }

}

@keyframes borderRight{

    to{

        transform:scaleY(1);

    }

}

@keyframes borderBottom{

    to{

        transform:scaleX(1);

    }

}

@keyframes borderLeft{

    to{

        transform:scaleY(1);

    }

}

/* ==========================================
   COUPLE — ELEGANT CENTER REVEAL
========================================== */

.profile-card.bride.reveal,
.profile-card.groom.reveal{
    opacity:0;
    transform:translateY(18px) scale(.97);
    filter:blur(4px);

    will-change:
        transform,
        opacity,
        filter;
}

.profile-card.bride.reveal.is-visible{
    animation:
        coupleCenterReveal .9s cubic-bezier(.22,1,.36,1) forwards;
}

.profile-card.groom.reveal.is-visible{
    animation:
        coupleCenterReveal .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}

@keyframes coupleCenterReveal{

    0%{
        opacity:0;
        transform:translateY(18px) scale(.97);
        filter:blur(4px);
    }

    60%{
        opacity:.9;
        transform:translateY(3px) scale(.99);
        filter:blur(1px);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }

}

/* ===========================
   PROFILE INITIAL STATE
=========================== */

.profile-label,
.profile-frame,
.profile-instagram,
.profile-name,
.profile-nickname,
.profile-parents{

    opacity:0;

    transform:translateY(14px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}

/* ===========================
   PROFILE STAGGER REVEAL
=========================== */

.profile-card.is-visible .profile-label{

    opacity:1;

    transform:translateY(0);

    transition-delay:.10s;

}

.profile-card.is-visible .profile-frame{

    opacity:1;

    transform:translateY(0);

    transition-delay:.35s;

}

.profile-card.is-visible .profile-instagram{

    opacity:1;

    transform:translateY(0);

    transition-delay:2.15s;

}

.profile-card.is-visible .profile-name{

    opacity:1;

    transform:translateY(0);

    transition-delay:2.40s;

}

.profile-card.is-visible .profile-nickname{

    opacity:1;

    transform:translateY(0);

    transition-delay:2.65s;

}

.profile-card.is-visible .profile-parents{

    opacity:1;

    transform:translateY(0);

    transition-delay:2.90s;

}

button{

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}

/* ==========================================
   COUPLE RESPONSIVE — MOBILE
========================================== */

@media (max-width:576px){

    .profile-frame{
        width:min(228px,72vw);
        aspect-ratio:9 / 16;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }

    .profile-card{
        width:100%;
        text-align:center;
    }

    .profile-name{
        width:100%;
        max-width:330px;
        padding:0 12px;
        font-size:36px;
        line-height:1.12;
    }

    .profile-nickname{
        max-width:300px;
        padding:0 10px;
        font-size:17px;
    }

    .profile-parents{
        max-width:300px;
        padding:0 12px;
        font-size:14px;
        line-height:1.75;
    }

    .event-card{
    padding:28px 20px;
    border-radius:24px;

    }

    .story-card{
    padding:28px 20px;
    border-radius:24px;

    }   
 
}

/* =========================================
   STEP 2 — ALIGN COUPLE PROFILE
========================================= */

.couple .profile-card{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.couple .profile-label,
.couple .profile-frame,
.couple .profile-instagram,
.couple .profile-name,
.couple .profile-nickname,
.couple .profile-parents{
    margin-left:auto;
    margin-right:auto;
}

/* =========================================
   STEP 3 — COUPLE LABEL SPACING
========================================= */

.couple .profile-label{
    margin-top:0;
    margin-bottom:18px;
}

.couple .profile-frame{
    margin-top:0;
}

/* =========================================
   STEP 4 — COUPLE INFO SPACING
========================================= */

.couple .profile-instagram{
    margin-top:18px;
    margin-bottom:12px;
}

.couple .profile-name{
    margin-top:0;
    margin-bottom:6px;
}

.couple .profile-nickname{
    margin-top:0;
    margin-bottom:14px;
}

.couple .profile-parents{
    margin-top:0;
}

@media (max-width:430px){

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

    main,
    section{
        width:100%;
        max-width:100%;
    }

    .container{
        width:calc(100% - 32px);
        max-width:1200px;
        margin-left:auto;
        margin-right:auto;
    }

    .bottom-nav{
        right:14px;
        bottom:14px;
        max-width:calc(100vw - 28px);

        /* OPTIMASI SCROLL HP */
        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        will-change:transform;
    }

    .floating-links{
        max-width:calc(100vw - 28px);
    }

    .menu-toggle,
    .music-toggle,
    .floating-links a{
        flex-shrink:0;
    }

}

/* ==========================================
   UCAPAN & DOA — GUEST WISH LIST
   ========================================== */

.wish-list{
    width:min(100%, 520px);
    margin:30px auto 0;

    max-height:420px;

    overflow-y:auto;
    overflow-x:hidden;

    padding:4px 8px 4px 4px;

    scroll-behavior:smooth;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(194,155,50,.45)
        transparent;
}


/* SCROLLBAR CHROME / EDGE / SAFARI */

.wish-list::-webkit-scrollbar{
    width:5px;
}

.wish-list::-webkit-scrollbar-track{
    background:transparent;
}

.wish-list::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            rgba(194,155,50,.25),
            rgba(194,155,50,.65)
        );

    border-radius:20px;
}


/* ==========================================
   KARTU UCAPAN TAMU
   ========================================== */

.wish-list .wish-card{
    width:100%;
    max-width:none;

    margin:0 0 16px;

    padding:22px 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(255,250,246,.96)
        );

    border:1px solid
        rgba(212,175,55,.20);

    border-radius:22px;

    box-shadow:
        0 10px 28px
        rgba(74,25,18,.06);

    text-align:left;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.wish-list .wish-card:last-child{
    margin-bottom:0;
}


/* NAMA TAMU */

.wish-list .wish-card h4{
    margin:0 0 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:20px;

    font-weight:600;

    letter-spacing:.3px;

    color:#7f2928;
}


/* UCAPAN */

.wish-list .wish-card p{
    margin:0;

    font-family:
        "Poppins",
        sans-serif;

    font-size:13px;

    line-height:1.8;

    color:#666;

    overflow-wrap:anywhere;
}


/* ==========================================
   PEMISAH HALUS
   ========================================== */

.wish-list .wish-card::after{
    content:"";

    display:block;

    width:42px;

    height:1px;

    margin-top:14px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c9a44c,
            transparent
        );

    opacity:.55;
}


/* ==========================================
   SAAT TIDAK ADA UCAPAN
   ========================================== */

.wish-empty{
    padding:35px 20px;

    text-align:center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:18px;

    color:#9a857d;
}


/* ==========================================
   LOADING
   ========================================== */

.wish-loading{
    padding:35px 20px;

    text-align:center;

    font-size:12px;

    color:#9a857d;

    letter-spacing:.4px;
}


/* ==========================================
   STATUS RSVP
   ========================================== */

.rsvp-status{
    min-height:20px;

    margin:14px auto 0;

    text-align:center;

    font-size:12px;

    line-height:1.6;

    color:#8b2520;
}

.rsvp-status.success{
    color:#8a6a20;
}

.rsvp-status.error{
    color:#9b2d2d;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width:430px){

    .wish-list{
        max-height:390px;

        padding-right:5px;
    }

    .wish-list .wish-card{
        padding:19px 17px;

        border-radius:20px;
    }

    .wish-list .wish-card h4{
        font-size:19px;
    }

    .wish-list .wish-card p{
        font-size:12.5px;

        line-height:1.75;
    }

}

/* ==========================================
   PROFILE PARENTS — PREMIUM
========================================== */

.couple .profile-parents {
    max-width: 300px;
    margin: 18px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    color: #555;
}

.couple .parents-label {
    display: block;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

.couple .parent-name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    line-height: 1.4;
}

.couple .parent-name small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #999;
}

.couple .parents-and {
    margin: 9px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #B8860B;
}

/* ==========================================
   LOVE ORNAMENT — STORY
========================================== */

.story-love {
    margin-top: 14px;
    text-align: center;

    font-family: 'Times New Roman', serif;
    font-size: 58px;
    line-height: 1;

    color: #C9A24A;

    text-shadow:
        0 2px 8px rgba(201, 162, 74, .18);

    opacity: .9;

    transform: scale(1);
}

/* ==========================================
   COUPLE ANIMAL — GALAXY S8
========================================== */

@media (max-width: 380px) and (max-height: 760px) {

    .zodiac-dog,
    .zodiac-goat {
        width: 105px !important;
        height: 105px !important;
    }

}

/* ==========================================
   FINAL MOBILE SAFETY
   Aman untuk HP kecil 320px–360px
========================================== */

@media (max-width:360px){

    /* =========================
       COUNTDOWN
    ========================= */

    .countdown{
        gap:8px;
    }

    .box{
        width:58px;
        height:82px;
    }


    /* =========================
       NOMOR REKENING
    ========================= */

    .gift-account-card .account-number{
        font-size:21px;
        letter-spacing:1px;
    }


    /* =========================
       QUOTE
    ========================= */

    .couple-quote p{
        font-size:15px;
        line-height:1.85;
    }

}

/* ==========================================
   GALLERY — SMOOTH & LIGHT
   Hanya untuk animasi Gallery
========================================== */

.gallery-animate{
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .5s ease,
        transform .5s cubic-bezier(.22,1,.36,1);
}

.gallery-animate.gallery-visible{
    opacity:1;
    transform:translateY(0);
}

/* Stagger ringan */
.gallery-animate:nth-child(2){
    transition-delay:.04s;
}

.gallery-animate:nth-child(3){
    transition-delay:.08s;
}

.gallery-animate:nth-child(4){
    transition-delay:.12s;
}

.gallery-animate:nth-child(5){
    transition-delay:.16s;
}

.gallery-animate:nth-child(6){
    transition-delay:.20s;
}

.gallery-animate:nth-child(7){
    transition-delay:.24s;
}

.gallery-animate:nth-child(8){
    transition-delay:.28s;
}

.gallery-animate:nth-child(9){
    transition-delay:.32s;
}

.gallery-animate:nth-child(10){
    transition-delay:.36s;
}

.gallery-animate:nth-child(11){
    transition-delay:.40s;
}

.gallery-animate:nth-child(12){
    transition-delay:.44s;
}

/* HP kecil */
@media (max-width:380px){

    .gallery-animate{
        transform:translateY(15px);
    }

}

/* LOVE STORY VIDEO - FINAL MOBILE FIX */
.story-video{
    width:100% !important;
    max-width:700px !important;
    height:auto !important;
    margin:0 auto 45px !important;
    overflow:hidden;
    border-radius:30px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.story-video video{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
}