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

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#17243B;
    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:#17243B;
    overflow:visible;

}



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

.cover{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.cover-layer{

    position:relative;
    width:390px;
    height:750px;
    margin:0 auto;
}



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

.cover-garis{

    position:absolute;

    width:80%;

    top:30px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.cover-bunga{

    position:absolute;

    width:100%;

    top:5px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.cover-the-wedding{

    position:absolute;

    width:40%;

    top:90px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



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

.cover-nama{

    position:absolute;

    width:50%;

    top:140px;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}



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

.cover-foto{

    position:absolute;

    width:65%;

    top:315px;
    left:50%;

    transform:translateX(-50%);

    z-index:5;

}



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

.cover-button{

    position:absolute;

    width:175px;

    top:555px;
    left:50%;

    transform:translateX(-50%);

    z-index:6;

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

}

.cover-button-image{

    width:100%;

}

/* ========================================
   PENGANTIN
======================================== */

.pengantin{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.pengantin-layer{

    position:relative;

    width:390px;
    height:555px;

    margin:0 auto;

}



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

.sec2-frame{

    position:absolute;

    width:90%;

    top:25px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.sec2-text{

    position:absolute;

    width:65%;

    top:85px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.jadwal{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.jadwal-layer{

    position:relative;

    width:390px;
    height:450px;

    margin:0 auto;

}



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

.sec3-akad{

    position:absolute;

    width:75%;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.sec3-garis-tengah{

    position:absolute;

    width:80%;

    top:175px;
    left:50%;

    transform:translateX(-50%);
    transform-origin:center;
    z-index:2;

}



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

.sec3-ikon-tengah{

    position:absolute;

    width:8%;

    top:160px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



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

.sec3-resepsi{

    position:absolute;

    width:75%;

    top:235px;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}



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

.sec3-text-maps{

    position:absolute;

    width:42%;

    top:395px;
    left:50%;

    transform:translateX(-50%);

    z-index:5;

}



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

.sec3-tombol-maps{

    position:absolute;

    width:180px;

    top:350px;
    left:50%;

    transform:translateX(-50%);

    z-index:6;

}

/* ========================================
   SLIDESHOW
======================================== */

.slideshow{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.slideshow-layer{

    position:relative;

    width:390px;
    height:500px;

    margin:0 auto;

}



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

.slide-background{

    position:absolute;

    left:0;
    top:205px;

    width:100%;
    height:130px;

    background:#E8AA4C;

}



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

.slide-frame{

    position:absolute;

    left:50%;
    top:55px;

    transform:translateX(-50%);

    width:285px;
    height:390px;

    border:2px solid #E8AA4C;
    border-radius:150px 150px 0 0;

    overflow:hidden;

    z-index:2;

}



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

.slide-wrapper{

    width:100%;
    height:100%;

    overflow:hidden;

}

.slide-track{

    display:flex;

    height:100%;

    transition:.4s;

}

.slide-item{

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

}

.slide-image{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 0;

}



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

.sec4-ornament{

    position:absolute;

    width:100px;

    top:40px;
    left:65%;

    transform:translateX(-50%);

    z-index:3;

}



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

.slide-prev{

    position:absolute;

    left:12px;
    top:270px;

    transform:translateY(-50%);

    width:25px;

    z-index:4;

}



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

.slide-next{

    position:absolute;

    right:12px;
    top:270px;

    transform:translateY(-50%);

    width:25px;

    z-index:4;

}

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

    width:100%;

}



/* ========================================
   AYAT SUCI
======================================== */

.ayat{

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

}

.ayat-layer{

    position:relative;

    width:390px;
    height:425px;

    margin:0 auto;

}



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

.sec5-frame{

    position:absolute;

    width:88%;

    top:43px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.sec5-ayat{

    position:absolute;

    width:65%;

    top:88px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.rekening{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.rekening-layer{

    position:relative;

    width:390px;
    height:300px;

    margin:0 auto;

}



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

.sec6-bunga{

    position:absolute;

    width:90%;

    top:55px;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.sec6-garis{

    position:absolute;

    width:85%;

    top:65px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.sec6-ikon{

    position:absolute;

    width:50px;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



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

.sec6-rekening{

    position:absolute;

    width:60%;

    top:180px;
    left:50%;

    transform:translateX(-50%);

    z-index:4;

}



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

.sec6-teks{

    position:absolute;

    width:60%;

    top:120px;
    left:50%;

    transform:translateX(-50%);

    z-index:5;

}



/* ========================================
   UCAPAN & DOA
======================================== */

.ucapan{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.ucapan-layer{

    position:relative;

    width:390px;

    margin:0 auto;

    padding:25px 14px 35px;

}

.sec7-judul{

    width:44%;

    display:block;

    margin:0 auto 14px;

}

.sec7-box{

    position:relative;

    width:93%;

    margin:0 auto;

    border:1.5px solid #E8DDCC;

    border-radius:18px;

    padding:14px 20px 20px;

}

.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:#E8DDCC;

    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:#E8DDCC;

    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:#17243B;

    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:#E8DDCC;

    font-weight:500;

}

.sec7-message{

    color:#E8AA4C;

}




/* ========================================
   PENUTUP
======================================== */

.penutup{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.penutup-layer{

    position:relative;

    width:390px;
    height:220px;

    margin:0 auto;

}



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

.sec8-ornament{

    position:absolute;

    width:75%;

    top:0;
    left:50%;

    transform:translateX(-50%);

    z-index:1;

}



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

.sec8-teks{

    position:absolute;

    width:78%;

    top:50px;
    left:50%;

    transform:translateX(-50%);

    z-index:2;

}



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

.sec8-nama{

    position:absolute;

    width:52%;

    top:130px;
    left:50%;

    transform:translateX(-50%);

    z-index:3;

}



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

.footer{

    width:100%;
    display:flex;
    justify-content:center;
    background:#17243B;

}

.footer-layer{

    position:relative;

    width:390px;
    height:72px;

    margin:0 auto;

}

.footer-image{

    position:absolute;

    width:100%;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

}



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

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

    opacity:0;

}



/* ========================================
   Cover Garis
======================================== */

.cover-garis{

    animation:
    bloom .9s ease forwards;

}



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

.cover-bunga{

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

    animation:
    bungaBloom 1s ease forwards;

    animation-delay:.45s;

}



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

.cover-the-wedding{

    animation:
    fadeUp .7s ease forwards;

    animation-delay:1.25s;

}



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

.cover-nama{

    animation:
    fadeUp .7s ease forwards;

    animation-delay:1.65s;

}



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

.cover-foto{

    animation:
    fadeUp .8s ease forwards;

    animation-delay:2.05s;

}



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

.cover-button{

    animation:
    fadeDown .8s ease forwards;

    animation-delay:2.05s;

}



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

@keyframes bloom{

    0%{

        opacity:0;

        filter:blur(20px);

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

    }

    70%{

        opacity:1;

        filter:blur(2px);

    }

    100%{

        opacity:1;

        filter:blur(0);

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

    }

}



@keyframes bungaBloom{

    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 fadeDown{

    from{

        opacity:0;

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

    }

    to{

        opacity:1;

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

    }

}

@keyframes revealLine{

    0%{

        opacity:0;

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

    }

    100%{

        opacity:1;

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

    }

}



@keyframes scaleIn{

    from{

        opacity:0;

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

    }

    to{

        opacity:1;

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

    }

}

@keyframes pulse{

    0%{

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

    }

    50%{

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

    }

    100%{

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

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeUpCenter{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUpAbsolute{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.sec2-frame,
.sec2-text{

    opacity:0;

}

.sec2-frame.show{

    animation:
    bloom .8s ease forwards;

}

.sec2-text.show{

    animation:
    fadeUp .7s ease forwards;

    animation-delay:.45s;

}

/* ========================================
   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:fadeUp .7s ease forwards;

}



/* Ikon */

.sec3-ikon-tengah.show{

    animation:fadeUp .5s ease forwards;

}



/* Garis */

.sec3-garis-tengah.show{

    animation:revealLine .7s ease forwards;

}



/* Resepsi */

.sec3-resepsi.show{

    animation:fadeDown .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 .6s ease forwards;

}

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

.sec4-ornament{

    opacity:0;

}

.sec4-ornament.show{

    animation:scaleIn .7s ease forwards;

}

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

.sec5-frame,
.sec5-ayat{

    opacity:0;

}



/* Frame */

.sec5-frame.show{

    animation:bloom .8s ease forwards;

}



/* Ayat */

.sec5-ayat.show{

    animation:fadeUp .7s ease forwards;

    animation-delay:.45s;

}

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

.sec6-garis,
.sec6-bunga,
.sec6-ikon,
.sec6-teks,
.sec6-rekening{

    opacity:0;

}



/* Garis */

.sec6-garis{

    transform-origin:center;

}

.sec6-garis.show{

    animation:revealLine .8s ease forwards;

}



/* Bunga */

.sec6-bunga.show{

    animation:bloom .8s ease forwards;

}



/* Ikon */

.sec6-ikon.show{

    animation:fadeUp .6s ease forwards;

}



/* Teks */

.sec6-teks.show{

    animation:fadeUp .7s ease forwards;

}



/* Rekening */

.sec6-rekening.show{

    animation:fadeUp .7s ease forwards;

}

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

.sec7-judul,
.sec7-bunga{

    opacity:0;

}



/* Judul */

.sec7-judul.show{

    animation:fadeUpCenter .7s ease forwards;

}



/* Bunga */

.sec7-bunga.show{

    animation:
    fadeUpAbsolute .7s ease forwards,
    floating 2.5s ease-in-out infinite;

    animation-delay:
    0s,
    .7s;

}

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

.sec8-ornament,
.sec8-teks,
.sec8-nama{

    opacity:0;

}



/* Ornament */

.sec8-ornament{

    transform-origin:center;

}

.sec8-ornament.show{

    animation:revealLine .8s ease forwards;

}



/* Teks Penutup */

.sec8-teks.show{

    animation:fadeUp .7s ease forwards;

}



/* Nama */

.sec8-nama.show{

    animation:fadeUp .7s ease forwards;

    animation-delay:.45s;

}

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

body.lock-scroll{

    overflow:hidden;

    height:100vh;

}