/* ==========================================
   PREMIUM WEDDING INVITATION
   ANDROID OPTIMIZED
========================================== */


/* ==========================================
   RESET
========================================== */

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


html{

    scroll-behavior:auto;

    scroll-padding-top:30px;

}


body{

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

    background:#fff;

    color:#444;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

}



img{

    display:block;

    max-width:100%;

}



section{

    position:relative;

    overflow:hidden;

    scroll-margin-top:20px;

}



button,
a{

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

    -webkit-tap-highlight-color:transparent;

}



button:active,
a:active{

    transform:scale(.96);

}




/* ==========================================
   FLOWER FALLING EFFECT
========================================== */


#flowers{

position:fixed;

inset:0;

pointer-events:none;

z-index:10;

}



.flower{

    position:absolute;

    top:-80px;

    user-select:none;


    filter:
    drop-shadow(
    0 3px 5px rgba(0,0,0,.15)
    );


    animation:

    flowerFall 12s linear forwards,

    flowerWind 3s ease-in-out infinite;

}



@keyframes flowerFall{


0%{

    transform:

    translateY(-80px)
    translateX(0)
    rotate(0);

    opacity:0;

}



10%{

    opacity:1;

}



50%{

    transform:

    translateY(50vh)
    translateX(-30px)
    rotate(220deg);

}



100%{

    transform:

    translateY(110vh)
    translateX(30px)
    rotate(420deg);

    opacity:0;

}


}



@keyframes flowerWind{


0%{

    margin-left:0;

}


50%{

    margin-left:25px;

}


100%{

    margin-left:-20px;

}


}





/* ==========================================
   COVER OPENING
========================================== */


.cover{


    position:fixed;

    inset:0;


    display:flex;

    justify-content:center;

    align-items:center;


    background:


    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.75)

    ),


    url("../img/cover.jpg");



    background-size:cover;

    background-position:center;


    z-index:99999;


    transition:1.8s ease;


}





.overlay{


    text-align:center;

    color:white;

    padding:20px;


    animation:

    coverShow 1.5s ease;

}





.overlay .small{


    font-size:18px;

    letter-spacing:4px;

    text-transform:uppercase;

}





.overlay h1{


    font-family:'Great Vibes',cursive;


    font-size:75px;


    font-weight:400;


    color:#FFD66B;


    margin:10px 0;


}





.overlay h2{


    font-size:45px;

}





.guest-title{


    margin-top:35px;

    font-size:17px;


}




#guestName{


    margin-top:10px;

    font-size:28px;


}





/* BUTTON OPEN */


#openBtn{


    margin-top:30px;


    padding:15px 45px;


    border:none;


    border-radius:50px;


    cursor:pointer;


    font-size:18px;


    font-weight:600;


    color:#5a4200;



    background:


    linear-gradient(

        45deg,

        #d4af37,

        #ffe9a6

    );



    box-shadow:

    0 15px 35px rgba(0,0,0,.35);



    animation:

    pulseButton 2s infinite;


}





@keyframes pulseButton{


0%{

box-shadow:

0 0 0 0 rgba(212,175,55,.7);

}



70%{

box-shadow:

0 0 0 20px rgba(212,175,55,0);

}



100%{

box-shadow:

0 0 0 0 rgba(212,175,55,0);

}


}





@keyframes coverShow{


from{

opacity:0;

transform:

translateY(40px);

}


to{

opacity:1;

transform:

translateY(0);

}


}





/* COVER HILANG */


.cover.hide{

    opacity:0;

    visibility:hidden;

    transform:scale(1.08);

    filter:blur(8px);


    transition:

    all 1.5s ease;

}





/* ==========================================
   HERO SECTION
========================================== */


.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:

    linear-gradient(
        rgba(255,250,240,.88),
        rgba(255,250,240,.95)
    ),

    url("../img/hero.jpg");


    background-size:cover;

    background-position:center;


    padding:40px 20px;


    opacity:0;

    transform:translateY(40px);


    transition:

    opacity 2.5s ease,

    transform 2.5s ease;

}


.hero.show{


opacity:1;


transform:

translateY(0);


}



.hero-content{


animation:

heroFade 1.5s ease;


}




.small-text{


letter-spacing:4px;


color:#777;


}





.hero h1{


font-family:'Great Vibes',cursive;


font-size:80px;


font-weight:400;


color:#b8860b;


margin:10px 0;


}




.hero .love{


font-size:45px;


color:#d4af37;


margin:15px 0;


}




.hero h3{


font-size:24px;


color:#666;


}




#countdown{


margin-top:25px;


font-size:22px;


font-weight:bold;


color:#b8860b;


}




.scroll-btn{


display:inline-block;


margin-top:35px;


padding:14px 35px;


border-radius:50px;


background:#b8860b;


color:white;


text-decoration:none;


transition:.4s;


}




.scroll-btn:hover{


transform:

translateY(-5px);


}



@keyframes heroFade{


from{

opacity:0;

transform:

translateY(40px);

}


to{

opacity:1;

transform:

translateY(0);

}


}

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


.couple{

    padding:100px 20px;

    background:#fafafa;

    text-align:center;

}



.couple h2{

    font-family:'Great Vibes',cursive;

    font-size:55px;

    color:#b8860b;

}



.subtitle{

    max-width:700px;

    margin:25px auto 60px;

    color:#777;

    line-height:1.8;

}



.couple-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:45px;

    flex-wrap:wrap;

}




.person{


    width:320px;


    padding:35px;


    background:white;


    border-radius:30px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.10);



    transition:.5s;


    text-align:center;



}




.person:hover{


    transform:

    translateY(-10px);


}




.person img{


    width:200px;


    height:200px;



    margin:auto;


    object-fit:cover;



    border-radius:50%;



    border:

    6px solid #d4af37;


    box-shadow:

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



}




.person h3{


    margin-top:20px;


    font-family:'Great Vibes',cursive;


    font-size:40px;


    color:#b8860b;



}




.person p{


    margin-top:10px;


    color:#666;


    line-height:1.7;


}



.heart{


    font-size:60px;


    color:#d4af37;


    animation:

    heartBeat 2s infinite;


}



@keyframes heartBeat{


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.15);

}


}






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


.event-section{


    padding:100px 20px;


    background:white;


    text-align:center;


}



.event-section h2{


    font-family:'Great Vibes',cursive;


    font-size:55px;


    color:#b8860b;


    margin-bottom:60px;


}




.event-container{


    display:flex;


    justify-content:center;


    align-items:stretch;


    gap:35px;


    flex-wrap:wrap;


}





.event-card{


    width:330px;



    padding:40px;



    background:white;



    border-radius:30px;



    box-shadow:


    0 15px 40px rgba(0,0,0,.12);



    transition:.5s;



}



.event-card:hover{


    transform:

    translateY(-10px);


}




.event-card .icon{


    font-size:55px;


    margin-bottom:20px;


}




.event-card h3{


    color:#b8860b;


    font-size:28px;


    margin-bottom:20px;


}




.event-card p{


    color:#666;


    margin:10px 0;


    font-size:16px;


}





/* ==========================================
   LOCATION
========================================== */



.maps-section{


    padding:100px 20px;


    background:#fff8ef;


    text-align:center;


}




.maps-section h2{


    font-family:'Great Vibes',cursive;


    font-size:55px;


    color:#b8860b;


    margin-bottom:50px;


}




.location-card{


    max-width:750px;


    margin:auto;


    padding:45px;



    background:white;


    border-radius:30px;



    box-shadow:


    0 20px 50px rgba(0,0,0,.12);



}





.location-card h3{


    font-size:30px;


    color:#b8860b;


}



.location-card p{


    margin-top:15px;


    color:#666;


    line-height:1.8;


}





/* GOOGLE MAP BOX */


.map-box{


    margin-top:30px;


    overflow:hidden;


    border-radius:25px;


    box-shadow:


    0 15px 35px rgba(0,0,0,.15);



}




.map-box iframe{


    width:100%;


    height:350px;


    border:0;



}





/* ==========================================
   BUTTON LOKASI
========================================== */


.location-buttons{


    display:flex;


    justify-content:center;


    margin-top:35px;


}



.maps-btn{


    width:280px;


    padding:16px;


    border-radius:60px;


    text-align:center;


    text-decoration:none;


    font-weight:600;


    color:#5a4200;



    background:


    linear-gradient(

    135deg,

    #d4af37,

    #ffe9a6

    );



    box-shadow:


    0 12px 30px rgba(0,0,0,.20);



    transition:.4s;


}




.maps-btn:hover{


    transform:

    translateY(-6px);


}





/* ==========================================
   SCROLL FADE EFFECT
========================================== */



.fade-section{

    opacity:0;

    transform:
    translateY(80px);


    transition:

opacity 1s ease,

transform 1s ease;

}




.fade-section.active{


    opacity:1;


    transform:

    translateY(0);


}

/* ==========================================
   BOTTOM NAVIGATION ANDROID
========================================== */


.bottom-nav{

    position:fixed;


    left:50%;

    bottom:15px;


    transform:

    translateX(-50%);



    width:94%;


    max-width:700px;



    display:flex;


    justify-content:space-around;


    align-items:center;



    padding:14px 10px;



    background:

    rgba(255,255,255,.85);



    backdrop-filter:

    blur(18px);



    -webkit-backdrop-filter:

    blur(18px);



    border-radius:30px;



    box-shadow:


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



    z-index:9998;



}



.bottom-nav a{


    flex:1;


    display:flex;


    flex-direction:column;


    align-items:center;



    text-decoration:none;


    color:#777;



    font-size:22px;



transition:.3s ease;


}



.bottom-nav span{


    margin-top:5px;


    font-size:11px;


}



.bottom-nav a:hover,


.bottom-nav a.active{


    color:#b8860b;


    transform:

    translateY(-5px);


}





/* ==========================================
   MUSIC BUTTON
========================================== */


.music-btn{


    position:fixed;



    right:20px;



    bottom:100px;



    width:58px;



    height:58px;



    border:none;


    border-radius:50%;



    display:flex;


    justify-content:center;


    align-items:center;



    font-size:26px;



    cursor:pointer;



    color:white;



    background:#b8860b;



    box-shadow:


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



    z-index:9998;



    transition:.4s;


}



.music-btn:hover{


    transform:

    scale(1.1);


}



.music-btn.playing{


    animation:

    rotateMusic 4s linear infinite;


}



@keyframes rotateMusic{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}






/* ==========================================
   SCROLL BAR PREMIUM
========================================== */


::-webkit-scrollbar{


    width:8px;


}



::-webkit-scrollbar-track{


    background:#f5f5f5;


}



::-webkit-scrollbar-thumb{


    background:#d4af37;


    border-radius:20px;


}






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



@media(max-width:768px){



    .overlay h1{


        font-size:55px;


    }




    .hero h1{


        font-size:55px;


    }



    .hero h3{


        font-size:18px;


    }




    #countdown{


        font-size:17px;


        line-height:1.8;


    }




    .couple,


    .event-section,


    .maps-section{


        padding:70px 15px;


    }




    .couple h2,


    .event-section h2,


    .maps-section h2{


        font-size:45px;


    }




    .person{


        width:100%;


        max-width:350px;


        padding:25px;


    }




    .person img{


        width:160px;


        height:160px;


    }




    .heart{


        font-size:45px;


    }




    .event-card{


        width:100%;


        max-width:350px;


        padding:30px 20px;


    }





    .location-card{


        padding:25px 20px;


    }





    .map-box iframe{


        height:280px;


    }




}







/* ==========================================
   SMALL ANDROID 320px - 480px
========================================== */



@media(max-width:480px){



    .overlay{


        padding:15px;


    }




    .overlay .small{


        font-size:13px;


        letter-spacing:3px;


    }




    .overlay h1{


        font-size:43px;


    }



    .overlay h2{


        font-size:32px;


    }




    #guestName{


        font-size:20px;


    }





    #openBtn{


        width:90%;


        padding:14px;


        font-size:16px;


    }






    .hero{


        padding:60px 15px;


    }




    .hero h1{


        font-size:45px;


    }




    .hero .love{


        font-size:35px;


    }




    .person h3{


        font-size:34px;


    }





    .location-card h3{


        font-size:24px;


    }





    .maps-btn{


        width:100%;


    }




    .bottom-nav{


        bottom:10px;


        padding:12px 5px;


    }




    .bottom-nav a{


        font-size:20px;


    }




    .bottom-nav span{


        font-size:10px;


    }





    .music-btn{


        width:50px;


        height:50px;


        right:15px;


        bottom:85px;


        font-size:22px;


    }



}







/* ==========================================
   PERFORMANCE ANDROID
========================================== */


*{


    -webkit-font-smoothing:antialiased;


}



.hero,
.cover{

will-change:transform,opacity;

}





/* Mencegah gambar berat di HP */


img{


    image-rendering:auto;


}





/* Efek masuk elemen */


.fade-up{


    opacity:0;


    transform:

    translateY(40px);



    transition:

    1s ease;



}



.fade-up.show{


    opacity:1;


    transform:

    translateY(0);


}

iframe{

max-width:100%;

display:block;

}