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

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

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    background:#370F45;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;

}

img{

    display:block;
    width:100%;
    height:auto;

}

button{

    border:none;
    background:none;
    cursor:pointer;

}

a{

    text-decoration:none;

}



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

.mobile-wrapper{

    width:390px;
    max-width:100%;
    margin:0 auto;
    background:#370F45;
    overflow:visible;

}



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

.cover{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.cover-layer{

    position:relative;

    width:390px;
    height:725px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.cover-bunga{

    position:absolute;

    width:100%;

    top:0;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}



/* ========================================
   Layer 2
======================================== */

.cover-the-wedding{

    position:absolute;

    width:30%;

    top:45px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



/* ========================================
   Layer 3
======================================== */

.cover-nama{

    position:absolute;

    width:35%;

    top:110px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



/* ========================================
   Layer 4
======================================== */

.cover-foto{

    position:absolute;

    width:82%;

    top:290px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 5
======================================== */

.cover-button{

    position:absolute;

    width:170px;

    top:600px;
    left:50%;

    transform:translateX(-50%);

    z-index:5;

    padding:0;
    background:none;
    border:none;

}

.cover-button-image{

    width:100%;

}

/* ========================================
   SECTION 2
======================================== */

.pengantin{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.pengantin-layer{

    position:relative;

    width:390px;
    height:600px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.sec2-garis{

    position:absolute;

    width:80%;

    top:45px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 2
======================================== */

.sec2-teks{

    position:absolute;

    width:65%;

    top:110px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



/* ========================================
   Layer 3
======================================== */

.sec2-bunga{

    position:absolute;

    width:37%;

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}

/* ========================================
   SECTION 3
======================================== */

.jadwal{

    width:100%;
    display:flex;
    justify-content:center;
    background:#530A6E;
}

.jadwal-layer{

    position:relative;

    width:390px;
    height:425px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.sec3-akad{

    position:absolute;

    width:72%;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 2
======================================== */

.sec3-garis-tengah{

    position:absolute;

    width:82%;

    top:160px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



/* ========================================
   Layer 3
======================================== */

.sec3-ikon-tengah{

    position:absolute;

    width:8%;

    top:145px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



/* ========================================
   Layer 4
======================================== */

.sec3-resepsi{

    position:absolute;

    width:72%;

    top:215px;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}



/* ========================================
   Layer 5
======================================== */

.sec3-tombol-maps{

    position:absolute;

    width:205px;

    top:320px;
    left:50%;

    transform:translateX(-50%);

    z-index:5;

}



/* ========================================
   Layer 6
======================================== */

.sec3-text-maps{

    position:absolute;

    width:50%;

    top:370px;
    left:50%;

    transform:translateX(-50%);

    z-index:6;

}

/* ========================================
   SECTION 4
======================================== */

.slideshow{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.slideshow-layer{

    position:relative;

    width:390px;
    height:510px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.slide-frame{

    position:absolute;

    width:285px;
    height:405px;

    top:55px;
    left:50%;

    transform:translateX(-50%);

    border:3px solid #E8AA4C;

    overflow:hidden;

    z-index:2;

}

.sec4-bunga{

    position:absolute;

    width:47%;

    top:38px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



/* ========================================
   Layer 2
======================================== */

.slide-wrapper{

    width:100%;
    height:100%;

    overflow:hidden;

}

.slide-track{

    display:flex;

    height:100%;

    transition:.45s ease;

}

.slide-item{

    min-width:100%;
    height:100%;

}

.slide-image{

    width:100%;
    height:100%;

    object-fit:cover;

}



/* ========================================
   Layer 3
======================================== */

.slide-prev{

    position:absolute;

    width:25px;

    left:16px;
    top:258px;

    transform:translateY(-50%);

    z-index:4;

}



/* ========================================
   Layer 4
======================================== */

.slide-next{

    position:absolute;

    width:25px;

    right:16px;
    top:258px;

    transform:translateY(-50%);

    z-index:4;

}



.slide-prev-image,
.slide-next-image{

    width:100%;

    display:block;

}




/* ========================================
   SECTION 5
======================================== */

.ayat{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.ayat-layer{

    position:relative;

    width:390px;
    height:425px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.sec5-frame{

    position:absolute;

    width:75%;

    top:75px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 2
======================================== */

.sec5-ornament{

    position:absolute;

    width:50%;

    top:110px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



/* ========================================
   Layer 3
======================================== */

.sec5-ikon-burung{

    position:absolute;

    width:12%;

    top:50px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



/* ========================================
   Layer 4
======================================== */

.sec5-ayat{

    position:absolute;

    width:60%;

    top:140px;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}

/* ========================================
   SECTION 6
======================================== */

.rekening{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.rekening-layer{

    position:relative;

    width:390px;
    height:345px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.sec6-frame{

    position:absolute;

    width:80%;

    top:60px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 2
======================================== */

.sec6-ikon{

    position:absolute;

    width:45px;

    top:65px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



/* ========================================
   Layer 3
======================================== */

.sec6-isi-rekening{

    position:absolute;

    width:62%;

    top:130px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}

/* ========================================
   SECTION 7
======================================== */

.ucapan{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.ucapan-layer{

    position:relative;

    width:390px;

    margin:0 auto;

    padding:30px 14px 35px;

}



/* ========================================
   Layer 1
======================================== */

.sec7-judul{

    width:48%;

    display:block;

    margin:0 auto 18px;

}



/* ========================================
   Layer 2
======================================== */

.sec7-box{

    position:relative;

    width:85%;

    margin:0 auto;

    border:2px solid #E8AA4C;

    border-radius:18px;

    padding:16px 20px 20px;

    background:#370F45;

}

.sec7-box label{

    position:absolute;

    width:60px;

    color:#E8AA4C;

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

    font-size:16px;

    font-weight:500;

}

.sec7-box label:nth-of-type(1){

    top:24px;
    left:20px;

}

.sec7-box label:nth-of-type(2){

    top:72px;
    left:20px;

}

.sec7-box input{

    width:calc(100% - 75px);

    height:30px;

    margin-left:72px;

    margin-bottom:16px;

    background:#F4E9D8;

    border:none;

    border-radius:4px;

    padding:0 10px;

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

}

.sec7-box textarea{

    width:calc(100% - 75px);

    height:90px;

    margin-left:72px;

    resize:none;

    background:#F4E9D8;

    border:none;

    border-radius:4px;

    padding:10px;

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

}

.sec7-bunga{

    position:absolute;

    width:42px;

    left:22px;

    top:125px;

}

.sec7-button{

    width:calc(100% - 75px);

    height:42px;

    margin-top:12px;

    margin-left:72px;

    background:#E8AA4C;

    border:none;

    border-radius:5px;

    color:#370F45;

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

    font-size:18px;

    font-weight:700;

}

.sec7-list{

    margin-top:18px;

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

    font-size:14px;

    line-height:2;

    color:#FFFFFF;

}

.sec7-item{

    margin-bottom:10px;

}

.sec7-name{

    color:#E8AA4C;

    font-weight:600;

}

.sec7-message{

    color:#FFFFFF;

}

/* ========================================
   SECTION 8
======================================== */

.penutup{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;
}

.penutup-layer{

    position:relative;

    width:390px;
    height:200px;

    margin:0 auto;

}



/* ========================================
   Layer 1
======================================== */

.sec8-teks{

    position:absolute;

    width:75%;

    top:0;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



/* ========================================
   Layer 2
======================================== */

.sec8-nama{

    position:absolute;

    width:48%;

    top:100px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.footer{

    width:100%;
    display:flex;
    justify-content:center;
    background:#370F45;

}

.footer-layer{

    position:relative;

    width:390px;
    height:72px;

    margin:0 auto;

}

.footer-image{

    position:absolute;

    width:100%;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

}


/* ========================================
   DASH LINE
======================================== */

.section-dash{

    width:88%;

    margin:0 auto;

    border-top:1px dashed rgba(255,255,255,.7);

}

/* ========================================
   COVER ANIMATION
======================================== */

.cover-bunga,
.cover-foto,
.cover-nama,
.cover-the-wedding,
.cover-button{

    opacity:0;

}



/* ========================================
   Cover Bunga
======================================== */

.cover-bunga{

    animation:
    bloom 1s ease forwards;

}



/* ========================================
   Cover Foto
======================================== */

.cover-foto{

    animation:
    fadeUp .8s ease forwards;

    animation-delay:.8s;

}



/* ========================================
   Cover Nama
======================================== */

.cover-nama{

    animation:
    fadeUp .7s ease forwards;

    animation-delay:1.45s;

}



/* ========================================
   Cover The Wedding
======================================== */

.cover-the-wedding{

    animation:
    fadeUp .7s ease forwards;

    animation-delay:2.0s;

}



/* ========================================
   Cover Button
======================================== */

.cover-button{

    animation:
    scaleIn .7s ease forwards;

    animation-delay:2.55s;

}

/* ========================================
   SECTION 2 ANIMATION
======================================== */

.sec2-garis,
.sec2-teks,
.sec2-bunga{

    opacity:0;

}



/* Garis */

.sec2-garis{

    transform-origin:center;

}

.sec2-garis.show{

    animation:revealLine .8s ease forwards;

}



/* Teks */

.sec2-teks.show{

    animation:fadeUp .7s ease forwards;

}



/* Bunga */

.sec2-bunga.show{

    animation:fadeUp .7s ease forwards;

}

/* ========================================
   SECTION 3 ANIMATION
======================================== */

.sec3-akad,
.sec3-ikon-tengah,
.sec3-garis-tengah,
.sec3-resepsi,
.sec3-tombol-maps,
.sec3-text-maps{

    opacity:0;

}



/* Akad */

.sec3-akad.show{

    animation:fadeLeft .7s ease forwards;

}



/* Ikon */

.sec3-ikon-tengah.show{

    animation:fadeUp .6s ease forwards;

}



/* Garis */

.sec3-garis-tengah{

    transform-origin:center;

}

.sec3-garis-tengah.show{

    animation:revealLine .8s ease forwards;

}



/* Resepsi */

.sec3-resepsi.show{

    animation:fadeRight .7s ease forwards;

}



/* Tombol Maps */

.sec3-tombol-maps.show{

    animation:
    scaleIn .6s ease forwards,
    pulse 1.5s ease-in-out infinite;

    animation-delay:
    0s,
    .6s;

}



/* Text Maps */

.sec3-text-maps.show{

    animation:fadeDown .7s ease forwards;

}

/* ========================================
   SECTION 4 ANIMATION
======================================== */

.slide-frame,
.slide-prev,
.slide-next,
.sec4-bunga{

    opacity:0;

}



/* Foto */

.slide-frame.show{

    animation:scaleIn .7s ease forwards;

}



/* Tombol */

.slide-prev.show,
.slide-next.show{

    animation:bloomButton .7s ease forwards;

}



/* Bunga */

.sec4-bunga.show{

    animation:revealFlower .8s ease forwards;

}

/* ========================================
   SECTION 5 ANIMATION
======================================== */

.sec5-ikon-burung,
.sec5-frame,
.sec5-ornament,
.sec5-ayat{

    opacity:0;

}



/* Ikon Burung */

.sec5-ikon-burung.show{

    animation:
    fadeRightToLeft .7s ease forwards,
    pulseBird 2s ease-in-out infinite;

    animation-delay:
    0s,
    .7s;

}



/* Frame */

.sec5-frame.show{

    animation:scaleTop .8s ease forwards;

}



/* Ornament */

.sec5-ornament.show{

    animation:fadeUp .7s ease forwards;

}



/* Ayat */

.sec5-ayat.show{

    animation:fadeUp .7s ease forwards;

}

/* ========================================
   SECTION 6 ANIMATION
======================================== */

.sec6-ikon,
.sec6-frame,
.sec6-isi-rekening{

    opacity:0;

}



/* Ikon */

.sec6-ikon.show{

    animation:fadeUp .7s ease forwards;

}



/* Frame */

.sec6-frame{

    transform-origin:center;

}

.sec6-frame.show{

    animation:revealLine .8s ease forwards;

}



/* Isi Rekening */

.sec6-isi-rekening.show{

    animation:fadeUp .7s ease forwards;

}

/* ========================================
   SECTION 7 ANIMATION
======================================== */

.sec7-judul{

    opacity:0;

}



/* Judul */

.sec7-judul.show{

    animation:fadeLeftCenter .7s ease forwards;

}



/* Bunga */

.sec7-bunga{

    animation:floatingUp 2.5s ease-in-out infinite;

}

/* ========================================
   SECTION 8 ANIMATION
======================================== */

.sec8-nama{

    opacity:0;

}



/* Nama Penutup */

.sec8-nama.show{

    animation:fadeUp .8s ease forwards;

}




/* ========================================
   KEYFRAMES
======================================== */

@keyframes bloom{

    0%{

        opacity:0;

        filter:blur(20px);

        transform:
        translateX(-50%)
        scale(.75);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
        translateX(-50%)
        scale(1);

    }

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(25px);

    }

    to{

        opacity:1;

        transform:
        translateX(-50%)
        translateY(0);

    }

}



@keyframes scaleIn{

    from{

        opacity:0;

        transform:
        translateX(-50%)
        scale(.7);

    }

    to{

        opacity:1;

        transform:
        translateX(-50%)
        scale(1);

    }

}

@keyframes revealLine{

    0%{

        opacity:0;

        transform:
        translateX(-50%)
        scaleX(0);

    }

    100%{

        opacity:1;

        transform:
        translateX(-50%)
        scaleX(1);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(calc(-50% - 30px));

    }

    to{

        opacity:1;

        transform:
        translateX(-50%);

    }

}



@keyframes fadeRight{

    from{

        opacity:0;

        transform:
        translateX(calc(-50% + 30px));

    }

    to{

        opacity:1;

        transform:
        translateX(-50%);

    }

}



@keyframes fadeDown{

    from{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(-25px);

    }

    to{

        opacity:1;

        transform:
        translateX(-50%)
        translateY(0);

    }

}



@keyframes pulse{

    0%{

        transform:
        translateX(-50%)
        scale(1);

    }

    50%{

        transform:
        translateX(-50%)
        scale(1.08);

    }

    100%{

        transform:
        translateX(-50%)
        scale(1);

    }

}

@keyframes bloomButton{

    0%{

        opacity:0;

        filter:blur(12px);

        transform:scale(.7);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:scale(1);

    }

}



@keyframes revealFlower{

    0%{

        opacity:0;

        clip-path:inset(0 50% 0 50%);

    }

    100%{

        opacity:1;

        clip-path:inset(0 0 0 0);

    }

}

@keyframes fadeRightToLeft{

    from{

        opacity:0;

        transform:
        translateX(calc(-50% + 35px));

    }

    to{

        opacity:1;

        transform:
        translateX(-50%);

    }

}



@keyframes scaleTop{

    from{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(-30px)
        scale(.75);

    }

    to{

        opacity:1;

        transform:
        translateX(-50%)
        translateY(0)
        scale(1);

    }

}

@keyframes fadeLeftCenter{

    from{

        opacity:0;

        transform:
        translateX(-30px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}



@keyframes floatingUp{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseBird{

    0%{

        transform:
        translateX(-50%)
        scale(1);

    }

    50%{

        transform:
        translateX(-50%)
        scale(1.08);

    }

    100%{

        transform:
        translateX(-50%)
        scale(1);

    }

}

/* ========================================
   LOCK SCROLL
======================================== */

body.lock-scroll{

    overflow:hidden;

    height:100vh;

}