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

body{
    background:#000;
    font-family:'Montserrat',sans-serif;
    color:#fff;

    overflow:hidden;
    overflow-x:hidden;
}

.mobile-wrapper{
    width:100%;
    max-width:390px;
    margin:auto;
}

.section{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:40px 20px;
}

.img-full{
    width:100%;
    display:block;
}

.cover{
    width:100%;
    display:flex;
    justify-content:center;
}

.cover-layer{
    position:relative;
    width:390px;
    height:950px;
}

/* GARIS */

.cover-garis{
    width:85%;
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* BUNGA */

.cover-bunga-atas{
    width:85%;
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

/* NAMA */

.cover-nama{
    width:40%;
    position:absolute;
    top:100px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
}

/* FOTO */

.cover-foto{
    width:82%;
    position:absolute;
    top:200px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

/* TOMBOL */

.cover-tombol{
    width:42%;
    position:absolute;
    top:535px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    box-shadow:0 12px 30px rgba(0,0,0,0.5);
}

/* BUNGA BAWAH */

.cover-bunga-bawah{
    width:100%;
    position:absolute;
    bottom:270px;
    left:0;
    z-index:4;
}

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

.section2{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:-220px;
}

.section2-layer{
    position:relative;
    width:390px;
    height:900px;
}

.section2-frame{
    width:90%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.section2-isi{
    width:68%;
    position:absolute;
    top:73px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

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

.section3{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:-300px;
}

.section3-layer{
    position:relative;
    width:390px;
    height:950px;
}

.section3-bunga{
    width:90%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.section3-akad{
    width:65%;
    position:absolute;
    top:55px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

.section3-resepsi{
    width:50%;
    position:absolute;
    top:270px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

.section3-line{
    position:absolute;

    width:350px;
    border-top:2px dashed #D4AF37;

    left:50%;
    transform:translateX(-50%);

    top:220px;

    z-index:1;
}

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

.section4{
    width:100%;
    display:flex;
    justify-content:center;

    margin-top:-450px;
}

.maps-wrapper{
    width:330px;

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

.maps-btn{
    width:90px;
    display:block;
}

.maps-line{
    flex:1;
    border-top:2px dashed #D4AF37;
}

.open-btn{
    background:#c89b4f;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:14px 24px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.card-jadwal{
    margin-top:10px;
}

.maps-btn{
    width:220px;
    max-width:100%;
}

.ayat-bird{
    width:40px;

    position:absolute;
    top:25px;
    left:44%;

    transform:translateX(-50%);
}

.ayat-frame{
    width:100%;
    position:relative;
}

.frame-ayat{
    width:111%;
    display:block;

    position:relative;
    top:70px;

    left:50%;
    transform:translateX(-50%);
}

.ayat-suci{
    width:80%;
    display:block;

    position:relative;
    top:18px;
}

.ayat-circle{
    width:300px;
    height:300px;

    border-radius:50%;

    background:#CDA159;

    position:absolute;

    left:50%;
    top:55%;

    transform:translate(-50%,-50%);

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

.penutup{
    text-align:center;
    font-size:14px;
    line-height:1.8;

    margin-top:50px;
}

.penutup-nama{
    max-width:220px;
}

footer{
    margin-top:20px;
}

html{
    scroll-behavior:smooth;
}

@keyframes bloom{

    0%{
        opacity:0;
        filter:blur(20px);
    }

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

}

.bloom{

    animation:bloom 1s ease forwards;

}

@keyframes fadeUp{

    0%{
        opacity:0;
        transform:translate(-50%,30px);
    }

    100%{
        opacity:1;
        transform:translate(-50%,0);
    }

}

@keyframes fadeUpCircle{

    0%{
        opacity:0;
        transform:translate(-50%,-20%);
    }

    100%{
        opacity:1;
        transform:translate(-50%,-50%);
    }

}

@keyframes fadeDown{

    0%{
        opacity:0;
        transform:translate(-50%,-30px);
    }

    100%{
        opacity:1;
        transform:translate(-50%,0);
    }

}

@keyframes fadeUpNormal{

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

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

}

@keyframes fadeLeft{

    0%{
        opacity:0;
        transform:translateX(30px);
    }

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

}

@keyframes fadeRight{

    0%{
        opacity:0;
        transform:translateX(-30px);
    }

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

}

@keyframes fadeRightBox{

    0%{
        opacity:0;
        transform:translateX(40px);
    }

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

}

@keyframes lineCenterScale{

    0%{
        opacity:0;
        transform:translateX(-50%) scaleX(0);
    }

    100%{
        opacity:1;
        transform:translateX(-50%) scaleX(1);
    }

}

@keyframes popBounce{

    0%{
        opacity:0;
        transform:translateX(-50%) scale(.5);
    }

    60%{
        opacity:1;
        transform:translateX(-50%) scale(1.08);
    }

    80%{
        transform:translateX(-50%) scale(.96);
    }

    100%{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

@keyframes mapsPopBounce{

    0%{
        opacity:0;
        transform:scale(.5);
    }

    60%{
        opacity:1;
        transform:scale(1.08);
    }

    80%{
        transform:scale(.96);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes mapsPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes bloomZoom{

    0%{
        opacity:0;
        filter:blur(20px);
        transform:translateX(-50%) scale(.92);
    }

    60%{
        opacity:1;
        filter:blur(6px);
        transform:translateX(-50%) scale(1.03);
    }

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

}

@keyframes bloomZoomSection3{

    0%{
        opacity:0;
        filter:blur(20px);
        transform:translateX(-50%) scale(.92);
    }

    60%{
        opacity:1;
        filter:blur(6px);
        transform:translateX(-50%) scale(1.03);
    }

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

}

.fade-up{

    opacity:0;

    animation:fadeUp .9s ease forwards;

    animation-delay:.3s;

}

.fade-up-garis{

    opacity:0;

    animation:fadeUp .9s ease forwards;

    animation-delay:.55s;

}

.fade-up-bunga{

    opacity:0;

    animation:fadeUp .9s ease forwards;

    animation-delay:.75s;

}

.bloom-nama{

    opacity:0;

    animation:bloom 1s ease forwards;

    animation-delay:.95s;

}

.pop-bounce{

    opacity:0;

    animation:popBounce .8s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay:2s;

}

.bloom-zoom{

    opacity:0;

}

.bloom-zoom.show{

    animation:bloomZoom 1s ease forwards;

}

.fade-up-section2{

    opacity:0;

}

.fade-up-section2.show{

    animation:fadeUp .8s ease forwards;

    animation-delay:.35s;

}

.bloom-zoom-section3{

    opacity:0;

}

.bloom-zoom-section3.show{

    animation:bloomZoomSection3 1s ease forwards;

}

.fade-up-akad{

    opacity:0;

}

.fade-up-akad.show{

    animation:fadeUp .8s ease forwards;

    animation-delay:1s;

}

.fade-down-resepsi{

    opacity:0;

}

.fade-down-resepsi.show{

    animation:fadeDown .8s ease forwards;

    animation-delay:1s;

}

.line-center-scale{

    opacity:0;

    transform-origin:center;

}

.line-center-scale.show{

    animation:lineCenterScale .6s ease forwards;

    animation-delay:1s;

}

.maps-pop{

    opacity:0;

}

.maps-pop.show{

    animation:
        mapsPopBounce .8s cubic-bezier(.22,1,.36,1) forwards,
        mapsPulse 2.2s ease-in-out infinite;

    animation-delay:
        0s,
        .8s;

}

.maps-line-left{

    opacity:0;

}

.maps-line-left.show{

    animation:fadeLeft .6s ease forwards;

    animation-delay:.2s;

}

.maps-line-right{

    opacity:0;

}

.maps-line-right.show{

    animation:fadeRight .6s ease forwards;

    animation-delay:.2s;

}

.bloom-zoom-ayat{

    opacity:0;

}

.bloom-zoom-ayat.show{

    animation:bloomZoom 1s ease forwards;

}

.fade-up-lingkaran{

    opacity:0;

}

.fade-up-lingkaran.show{

    animation:fadeUpCircle .8s ease forwards;

    animation-delay:1s;

}

.fade-up-ayat{

    opacity:0;

}

.fade-up-ayat.show{

    animation:fadeUpNormal .8s ease forwards;

    animation-delay:1.55s;

}

.fade-up-penutup{

    opacity:0;

}

.fade-up-penutup.show{

    animation:fadeUpNormal .8s ease forwards;

}