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

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

.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:48%;
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
}

/* FOTO */

.cover-foto{
    width:72%;
    position:absolute;
    top:270px;
    left:50%;
    transform:translateX(-50%);
    z-index:4;
}

/* 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:1;
}

/* =========================
   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:50%;
    position:absolute;
    top:40px;
    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:50%;

    transform:translateX(-50%);
}

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

.frame-ayat{
    width:112%;
    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;
}

.rekening{
    gap:25px;
    margin-top:80px;
}

.rekening-icon{
    width:70px;

    position:absolute;

    left:50%;
    top:0;

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

.rekening-box{
    background:#ece4d8;
    color:#000;
    border-radius:20px;
    padding:25px;
    text-align:center;
    width:100%;

position:relative;
padding-top:50px;
}

.bank-name{
    margin-top:15px;
    background:#000;
    color:#fff;
    border-radius:5px;
    padding:8px;
    font-weight:600;
    font-size:13px;
}

.bank-number{
    margin-top:10px;
    background:#000;
    color:#fff;
    border-radius:5px;
    padding:8px;
    font-weight:700;
    letter-spacing:1px;
}

.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;
}