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


html,body{

    width:100%;
    height:100%;

    overflow:hidden;

}


body{

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

    color:white;

    background:

    radial-gradient(
        circle at top,
        #c77dff,
        #7b2cbf,
        #240046
    );

}



/* HALAMAN */

.page{

    width:100%;
    height:100dvh;

    display:none;

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

    padding:20px;

    text-align:center;

}



.page.active{

    display:flex;

    animation:

    fade .8s ease;
    transform:none;

}



@keyframes fade{

    from{

        opacity:0;

        transform:translateY(30px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* CARD */

.box{

    width:100%;

    max-width:390px;


    padding:30px 20px;


    background:

    rgba(255,255,255,.12);


    border-radius:25px;


    border:

    1px solid rgba(255,255,255,.25);


    backdrop-filter:blur(15px);


    box-shadow:

    0 0 35px rgba(199,125,255,.6);

}





/* JUDUL */

h1{

    font-family:'Great Vibes',cursive;


    font-size:

    clamp(45px,15vw,65px);


    line-height:1.1;


    color:#fff;


    text-shadow:

    0 0 10px #e0aaff,

    0 0 25px #9d4edd;


}



h2{

    margin-top:10px;

    font-size:24px;

}





p{

    margin-top:20px;

    font-size:14px;

    line-height:1.7;

}






/* COUNTDOWN */

.countdown{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:30px;

}



.countdown div{


    width:65px;

    height:70px;


    background:

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


    border-radius:15px;


    display:flex;

    flex-direction:column;

    justify-content:center;


}



.countdown span{


    font-size:25px;

    font-weight:bold;


}


.countdown p{

    margin:0;

    font-size:10px;

}

#openButton{
    animation: fadeUp 1s;
}


/* BUTTON */

button{


    margin-top:25px;


    width:80%;


    padding:14px;


    border:none;


    border-radius:50px;


    background:

    linear-gradient(
        45deg,
        #9d4edd,
        #e0aaff
    );


    color:white;


    font-size:15px;


    font-weight:700;


    box-shadow:

    0 0 20px #c77dff;

       /* TAMBAHKAN INI */
    display:block;
    margin-left:auto;
    margin-right:auto;
    transform:none;
    


}





/* VIDEO */

video{


    width:100%;


    max-height:350px;


    border-radius:20px;


    margin-top:20px;


    object-fit:cover;


}






/* HP KECIL */

@media(max-width:360px){


    .box{

        padding:25px 15px;

    }


    h1{

        font-size:45px;

    }


    .countdown div{

        width:55px;

        height:60px;

    }


    .countdown span{

        font-size:20px;

    }


}

#home {
    position: relative;
    overflow: hidden;
}


#home-effects {

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}


#home .box {

    position:relative;

    z-index:3;

}



/* HATI */

.falling-heart {

    position:absolute;

    top:-50px;

    font-size:25px;

    animation:heartDrop linear infinite;

    filter:
    drop-shadow(0 0 10px #ff8cff);

}



/* BINTANG */

.falling-star {

    position:absolute;

    top:-20px;

    width:6px;

    height:6px;

    background:white;

    border-radius:50%;


    box-shadow:

    0 0 10px white,
    0 0 20px #d8a7ff;


    animation:starDrop linear infinite;

}



@keyframes heartDrop {


0%{

transform:
translateY(-50px)
rotate(0deg);

opacity:1;

}


100%{

transform:
translateY(110vh)
rotate(360deg);

opacity:0;

}


}



@keyframes starDrop {


0%{

transform:
translateY(-20px);

opacity:1;

}


100%{

transform:
translateY(110vh);

opacity:0;

}


}



/* Page Gift */
/* =====================
   GIFT OPENING
===================== */


#gift{

background:
radial-gradient(
circle at center,
#9d4edd,
#240046
);

overflow:hidden;

}



.gift-wrapper{

text-align:center;

width:100%;

}



.gift-top{

font-size:13px;

letter-spacing:4px;

margin-bottom:20px;

}



.gift-click{

font-size:14px;

margin-bottom:40px;

}



.gift-box-area{
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
}






/* CAHAYA */

.sparkle{

position:absolute;

width:200px;

height:200px;

background:#e0aaff;

border-radius:50%;

filter:blur(60px);

opacity:.6;

animation:glow 2s infinite;

}




@keyframes glow{


50%{

transform:scale(1.3);

opacity:1;

}

}




/* KOTAK */

.gift-box{
    position:relative;
    width:160px;
    height:130px;
    cursor:pointer;
}


/* BADAN KADO */

.gift-body{

    position:absolute;

    bottom:0;

    width:160px;

    height:90px;

    background:#a855f7;

    border-radius:10px;

    box-shadow:
    0 0 30px #d8a7ff;

}



/* TUTUP KADO */

.gift-lid{

    position:absolute;

    top:15px;

    left:-10px;

    width:180px;

    height:35px;

    background:#e0aaff;

    border-radius:10px;

    z-index:3;

    transition:1s;

}



/* PITA */

.ribbon{

    position:absolute;

    left:70px;

    width:20px;

    height:100%;

    background:#ffd6ff;

}



/* SAAT TERBUKA */

.gift-box.open .gift-lid{


    transform:

    translateY(-90px)

    rotate(-20deg);


}



/* BADAN BERGETAR */

.gift-box.open .gift-body{


    animation:

    shake .5s;


}



@keyframes shake{


0%{
transform:rotate(0);
}


25%{
transform:rotate(5deg);
}


50%{
transform:rotate(-5deg);
}


100%{
transform:rotate(0);
}


}




/* HASIL */


.gift-result{


display:none;

animation:

fadeUp 1s;

margin-top:30px;


}




.gift-result h1{


font-family:'Great Vibes';

font-size:60px;

color:white;


text-shadow:

0 0 20px #e0aaff;


}



.gift-result p{

font-size:15px;

margin-top:20px;

}



.gift-result button{


margin-top:30px;

padding:14px 50px;

border:none;

border-radius:50px;


background:

linear-gradient(
45deg,
#9d4edd,
#e0aaff
);


color:white;

font-weight:bold;


}




@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}





/* ======================
      MEMORY SECTION
====================== */


#memory{

background:

radial-gradient(
circle at top,
#7b2cbf,
#16002b
);


overflow:hidden;

}



.memory-container{

width:100%;

text-align:center;

padding:20px;

}



.memory-container h1{


font-family:'Great Vibes';

font-size:65px;

color:white;


text-shadow:

0 0 20px #e0aaff;


}



.subtitle{

font-size:13px;

letter-spacing:3px;

margin-bottom:30px;

}




.photo-gallery{


display:flex;

gap:25px;

overflow-x:auto;

padding:20px;


scroll-snap-type:x mandatory;


}



.photo-gallery::-webkit-scrollbar{

display:none;

}




.photo-card{

    min-width:160px;
    width:160px;
    height:210px;

    background:white;

    padding:8px;

    border-radius:8px;

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


    transform:rotate(-5deg);

    transition:.4s;

}



.photo-card:nth-child(even){

    transform:rotate(5deg);

}




.photo-card img{

    width:100%;

    height:160px;

    object-fit:cover;

    border-radius:5px;

}








/* SAAT DISENTUH */

.photo-card:active{


transform:

scale(1.15)

rotate(0deg);


z-index:5;


box-shadow:

0 0 40px #e0aaff;


}




.video-btn{


margin-top:35px;


padding:15px 50px;


border:none;


border-radius:50px;


background:

linear-gradient(
45deg,
#9d4edd,
#e0aaff
);


color:white;


font-weight:bold;


font-size:16px;


box-shadow:

0 0 25px #c77dff;


}



/* ======================
      BIRTHDAY WISHES
====================== */


#wishes{


background:

radial-gradient(
circle at top,
#6a1b9a,
#160022
);


}



.wish-card{


width:90%;

max-width:520px;


padding:35px 25px;



background:

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



border:

1px solid rgba(255,255,255,.2);



border-radius:20px;



backdrop-filter:

blur(15px);



box-shadow:

0 0 40px rgba(216,167,255,.25);



text-align:center;



animation:

fadeUp 1s;

}





.wish-card h1{


font-family:'Great Vibes',cursive;


font-size:55px;


color:white;


text-shadow:

0 0 15px #e0aaff;



}



.small-title{


font-size:13px;

margin-top:15px;

color:#f3d9ff;

}



.wish-text{


margin-top:25px;


font-size:14px;


line-height:1.8;


color:#fff;


}




.heart-icon{


margin:25px auto;


font-size:40px;


color:#ffb3ff;


text-shadow:

0 0 20px pink;


animation:

heartBeat 1.5s infinite;


}




@keyframes heartBeat{


50%{

transform:scale(1.3);

}

}




.wish-card button{


padding:12px 40px;


border-radius:50px;


border:1px solid white;


background:

transparent;


color:white;


font-size:12px;


letter-spacing:2px;


transition:.3s;


}



.wish-card button:hover{


background:#e0aaff;


color:#240046;


}



/* =====================
      FINAL SECTION
===================== */


#final{


background:

radial-gradient(
circle at center,
#8e44ad,
#160022
);


overflow:hidden;


}




.final-content{


width:90%;

max-width:600px;


text-align:center;


animation:

fadeUp 1.5s ease;


}





.final-content h1{


font-family:'Great Vibes',
cursive;


font-size:

clamp(60px,15vw,90px);



color:white;



text-shadow:


0 0 15px #fff,

0 0 35px #d8a7ff;



}



.final-sub{


margin-top:20px;


font-size:14px;


color:#f3d9ff;


}




.final-text{


margin-top:25px;


font-size:15px;


line-height:1.8;


}



.final-heart{


font-size:50px;


margin:25px;


color:#ffb3ff;


animation:

pulseHeart 1.5s infinite;


}




@keyframes pulseHeart{


50%{


transform:scale(1.3);


}


}





.final-content button{


padding:12px 40px;


border-radius:50px;


background:transparent;


border:

1px solid white;


color:white;


letter-spacing:2px;


font-size:12px;


transition:.3s;


}



.final-content button:hover{


background:#e0aaff;


color:#240046;


}




@keyframes fadeUp{


from{


opacity:0;


transform:

translateY(40px);


}


to{


opacity:1;


transform:

translateY(0);


}


}

/* ======================
   FINAL POLAROID
====================== */


#final{

position:relative;

overflow:hidden;

}



.polaroid{

position:absolute;

width:85px;

height:105px;

background:white;

padding:6px;

box-shadow:

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


z-index:1;


transition:.5s;


}



.polaroid img{

width:100%;

height:80px;

object-fit:cover;


}




/* POSISI FOTO */


.p1{

top:15%;

left:8%;

transform:

rotate(-15deg);


}



.p2{

top:22%;

right:8%;

transform:

rotate(12deg);


}



.p3{

bottom:18%;

left:10%;

transform:

rotate(10deg);


}



.p4{

bottom:15%;

right:12%;

transform:

rotate(-15deg);


}




/* EFEK SAAT DISENTUH */


.polaroid:hover{


transform:

scale(1.15)

rotate(0deg);


z-index:5;


box-shadow:

0 0 35px #e0aaff;


}




/* MOBILE */

@media(max-width:600px){


.polaroid{


width:70px;

height:90px;


}



.polaroid img{


height:65px;


}


}

/* ======================
       MOMENT VIDEO
====================== */


#moment{


background:

radial-gradient(
circle at center,
#a855f7,
#240046
);


}




.moment-card{


width:90%;

max-width:430px;


padding:30px 20px;


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.25);


border-radius:25px;


backdrop-filter:blur(15px);


box-shadow:

0 0 40px rgba(216,167,255,.5);


text-align:center;


animation:

fadeUp 1s;


}





.moment-card h1{


font-family:'Great Vibes';


font-size:60px;


line-height:1;


color:white;


text-shadow:


0 0 20px #e0aaff;


}





.moment-sub{


font-size:12px;


letter-spacing:3px;


margin:15px;


}




.video-frame{


position:relative;


margin-top:25px;


}




.video-frame video{


width:100%;


height:240px;


object-fit:cover;


border-radius:20px;


box-shadow:


0 0 35px #d8a7ff;


}




/* FOTO KECIL */


.mini-photo{


position:absolute;


width:70px;


height:85px;


background:white;


padding:5px;


z-index:3;


box-shadow:

0 0 20px black;


}



.mini-photo img{


width:100%;

height:100%;

object-fit:cover;


}




.left{


left:-20px;

top:-25px;


transform:rotate(-15deg);

}



.right{


right:-20px;

bottom:-20px;


transform:rotate(15deg);


}





.moment-text{


margin-top:30px;


font-size:14px;


line-height:1.7;


}




.moment-card button{


margin-top:25px;


width:80%;


padding:14px;


border:none;


border-radius:50px;


background:

linear-gradient(
45deg,
#9d4edd,
#e0aaff
);


color:white;


font-weight:bold;


box-shadow:

0 0 20px #c77dff;


}

.mini-photo{

animation:

floatPhoto 3s infinite alternate;

}


@keyframes floatPhoto{


from{

transform:
translateY(0)
rotate(-10deg);

}


to{

transform:
translateY(-10px)
rotate(10deg);

}


}