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

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

html{
    scroll-behavior:smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #2f2a27;
    color: #3d342d;
    overflow-x: hidden;
}

img{
    display:block;
    max-width:100%;
}


/* ==========================================
   COLOR
========================================== */

:root{
    --primary:#b58b52;
    --secondary:#d8c3a5;
    --dark:#2f2a27;
    --light:#f8f4ef;
    --white:#ffffff;
}


/* ==========================================
   SPLASH
========================================== */

#splash {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    max-width: 430px;

    height: 100vh;

    z-index: 99999;
    overflow: hidden;

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

    color: white;

    transition: transform 1.2s cubic-bezier(.77, 0, .18, 1);
}

#splash.close {
    transform: translate(-50%, 100%);
}


/* Background */
#splash::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("assets/flow.jpg") center center / cover no-repeat;

    transform: scale(1.1);
}

#splash .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

#splash .content{
    position:relative;
    z-index:10;
    width:90%;
    max-width:420px;
    padding:35px;
    border-radius:30px;
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
}


#splash .content {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(8px);

    animation: splashContentAppear 1.5s ease-out forwards;
}

@keyframes splashContentAppear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* ==========================================
   TITLE
========================================== */

.small{
    font-size:.9rem;
    letter-spacing:3px;
    text-transform:uppercase;
    opacity:.85;
}

#splash h1{
    margin-top:15px;
    /* font-family:'Cormorant Garamond',serif; */
   font-size: 4.3rem !important;
    font-weight:600;
    line-height:0.8;
     font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
}

#splash h1 span{
    display:block;
    color:#ffe4ae;
    font-size:2rem;
}

.guest-title{
    margin-top:45px;
    font-size:.9rem;
    opacity:.85;
}

#guestName{
    margin-top:8px;
    font-size:1.4rem;
    font-weight:500;
}


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

#openInvitation{
    margin-top:40px;
    border:none;
    cursor:pointer;
    padding:15px 34px;
    border-radius:50px;
    font-size:15px;
    background:linear-gradient(135deg,#d7b26d,#b58b52);
    color:white;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}

#openInvitation i{
    margin-right:8px;
}

#openInvitation:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}


/* ==========================================
   MUSIC TOGGLE
========================================== */

#musicToggle{
    position:fixed;
    top:18px;
    right:18px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:rgba(181,139,82,.9);
    color:white;
    font-size:18px;
    cursor:pointer;
    z-index:9999;
    display:none;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

#musicToggle.spin i{
    animation:spin 4s linear infinite;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}


/* ==========================================
   MAIN
========================================== */

#mainContent {
    display: none;
    min-height: 100vh;

    /* KUNCI SEPERTI LAYAR HP */
    width: 100%;
    max-width: 430px;

    margin: 0 auto;

    background: var(--light);

    overflow: hidden;

    /* sedikit shadow saat dibuka di laptop */
    box-shadow: 0 0 40px rgba(0,0,0,.12);
}

section{
    min-height:100vh;
    padding:80px 25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}


/* ==========================================
   SECTION TITLE
========================================== */

.section-title{
    text-align:center;
    margin-bottom:45px;
    max-width:620px;
}

.section-title small{
    display:block;
    color:var(--primary);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.8rem;
    line-height: 1;
    margin: 0 0 3px 0;
}

.section-title h2{
    font-family:"Cormorant Garamond", serif;
    font-size:45px;
    font-weight:600;
    margin: 0 !important;
     line-height: 1.1;
}

.couple-intro{
    margin-top:18px;
    font-size:.95rem;
    line-height:1.7;
    opacity:.85;
    font-weight:300;
}


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

#hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: white;
    padding: 0;

    opacity: 0;
    filter: brightness(1.2) blur(8px);

    animation: heroPhotoAppear 2.2s ease-out forwards;
}


.hero-video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transition: opacity 2s ease-in-out;

    z-index: 1;
}

.hero-video.active {
    opacity: 1;
    z-index: 2;
}


.hero-content {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

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

@keyframes heroPhotoAppear {
    from {
        opacity: 0;
        filter: brightness(1.2) blur(8px);
    }

    to {
        opacity: 1;
        filter: brightness(1) blur(0);
    }
}

/* @keyframes heroPhotoAppear {
    0% {
        opacity: 0;
        filter: brightness(1.2) blur(8px);
    }

    50% {
        opacity: 0.5;
        filter: brightness(1.1) blur(4px);
    }

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

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
}

/* .hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
} */

.hero-subtitle{
    letter-spacing:5px;
    text-transform:uppercase;
    font-size:14px;
    opacity:.8;
}

.hero-content h1{
    font-family:"Cormorant Garamond", serif;
    font-size:70px;
    margin:20px 0;
    line-height:1.1;
}

.hero-content h1 span{
    display:block;
    font-size:40px;
    color:#e6c27a;
}

.hero-date{
    font-size:18px;
    letter-spacing:2px;
}

.scroll-down{
    margin-top:650px;
    font-size:30px;
    animation:bounce 2s infinite;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{ transform:translateY(0); }
    40%{ transform:translateY(10px); }
    60%{ transform:translateY(5px); }
}


/* ==========================================
   QURAN
========================================== */

#quran {
    min-height: 50vh;
    background: url("assets/flow.jpg") center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quran-box {
    position: relative;
    width: 82%;
    max-width: 680px;
    min-height: 80%;

    text-align: center;
    padding: 80px 20px 30px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.92);

    /* bentuk arch */
    border-radius: 340px 340px 0 0;
}

.quote-icon{
    font-size:34px;
    color:var(--secondary);
    margin-bottom:25px;
}

.quran-text{
    font-family:"Cormorant Garamond", serif;
    /* color: rgb(113, 55, 13); */
    font-size:1.55rem;
    line-height:1.8;
    font-style:italic;
}

.quran-source{
    margin-top:25px;
    /* color:var(--primary); */
    letter-spacing:2px;
}


/* ==========================================
   COUNTDOWN
========================================== */

#countdown{
    /* background:var(--white); */
     /* background:url("assets/NFL_0154.jpg"); */
       position:relative;
    background:url("assets/NFL_0391.jpg")   center/cover;
    color:white;
    overflow:hidden;
    padding:0;
}

.flipdown{
    margin:10px;
}


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

#couple{
    background:var(--light);
}

.person{
    text-align:center;
    max-width:340px;
    margin-bottom:10px;
}

.person-photo{
    width:240px;
    height:240px;
    margin:0 auto 22px;
    border-radius:50%;
    overflow:hidden;
    border:5px solid var(--white);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.person-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.person h3{
    /* font-family:"Cormorant Garamond", serif; */
    font-size:2.2rem;
    font-weight:600;
    margin-bottom:10px;
     font-family: "Italianno";
  font-weight: 400;
  font-style: normal;
}

.person-role{
    font-size:.85rem;
    color:var(--primary);
    letter-spacing:1px;
}

.person-parents{
    margin-top:6px;
    font-size:.95rem;
    line-height:1.6;
    font-weight:300;
}

.ig-link{
    display:inline-block;
    margin-top:14px;
    color:var(--dark);
    text-decoration:none;
    font-size:.9rem;
    opacity:.8;
}

.ig-link:hover{ color:var(--primary); }

.couple-amp{
    font-family:"Cormorant Garamond", serif;
    font-size:3rem;
    color:var(--primary);
    margin:20px 0;
}


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

#event{
    /* background:var(--white); */
    background: url("assets/doa.jpg") center center / cover;
}
#event h2{
    font-family: "Italianno", cursive;
    font-size: 3.3rem !important;
}

.event-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    justify-content:center;
    width:100%;
    max-width:820px;
}

.event-card{
    flex:1 1 300px;
    max-width:360px;
    background:var(--light);
    border:1px solid var(--secondary);
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
}

.event-icon{
    font-size:34px;
    color:var(--primary);
    margin-bottom:18px;
}

.event-card h3{
    font-family:"Cormorant Garamond", serif;
    font-size:1.7rem;
    margin-bottom:14px;
}

.event-date{ font-weight:500; }
.event-time{ color:var(--primary); margin:6px 0 14px; }
.event-place{ font-size:.92rem; line-height:1.6; font-weight:300; }

.btn-outline{
    display:inline-block;
    margin-top:40px;
    padding:13px 30px;
    border:1.5px solid var(--primary);
    border-radius:50px;
    color:var(--primary);
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.btn-outline:hover{
    background:var(--primary);
    color:white;
}


/* ==========================================
   GALLERY
========================================== */

#gallery{
    background:var(--light);
}

.gallery-swiper{
    width:100%;
    max-width:600px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:25px;
}

.gallery-swiper .swiper-slide img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.gallery-swiper .swiper-button-prev,
.gallery-swiper .swiper-button-next{
    color:white;
}

.gallery-swiper .swiper-pagination-bullet-active{
    background:var(--primary);
}

.gallery-grid {
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.gallery-grid img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

/* Foto ke-3 full */
.gallery-grid img:nth-child(3) {
    grid-column: span 2;
}

/* Foto ke-6 full */
.gallery-grid img:nth-child(6) {
    grid-column: span 2;
}

/* Foto ke-7 full */
.gallery-grid img:nth-child(7) {
    grid-column: span 2;
}


/* ==========================================
   GIFT
========================================== */

#gift {
    min-height: 50vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;
    box-sizing: border-box;
}

.gift-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    width: 100%;
    max-width: 860px;
}

.gift-card {
    flex: 1 1 300px;
    max-width: 340px;
    background: linear-gradient(135deg, #c9a86e, #a5793f);
    color: white;
    border-radius: 20px;
    padding: 14px 18px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.gift-bank{
    letter-spacing:2px;
    font-weight:500;
    margin-bottom:14px;
}

.gift-number{
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:2px;
}

.gift-name{
    margin-top:8px;
    font-size:.9rem;
    opacity:.9;
}

.btn-copy{
    margin-top:18px;
    padding:10px 22px;
    border:none;
    border-radius:50px;
    background:rgba(255,255,255,.2);
    color:white;
    cursor:pointer;
    font-size:13px;
    transition:.3s;
}

.btn-copy:hover{
    background:rgba(255,255,255,.35);
}


/* ==========================================
   DRESSCODE
========================================== */

#dresscode{
    position:relative;
    background:url("assets/sudut.jpg") center center/cover;
    color:white;
    overflow:hidden;
    padding:0;
}

.dresscode-colors{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
}

.dresscode-colors span{
    width:60px;
    height:60px;
    border-radius:50%;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    border:3px solid var(--white);
}


/* ==========================================
   MAPS
========================================== */

#maps{
    /* background:var(--white); */
     background:url("assets/sudut.jpg") center center/cover;
}

.map-frame{
    width:100%;
    max-width:620px;
    height:340px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.map-frame iframe{
    width:100%;
    height:100%;
    border:0;
}


/* ==========================================
   WISHES
========================================== */

#wishes{
    /* background:var(--light); */
     background:url("assets/flow.jpg") center center/cover;
    
}

.wish-form{
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.wish-form input,
.wish-form select,
.wish-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--secondary);
    border-radius:12px;
    font-family:'Poppins',sans-serif;
    font-size:.95rem;
    background:var(--white);
    color:var(--dark);
    resize:none;
}

.wish-form input:focus,
.wish-form select:focus,
.wish-form textarea:focus{
    outline:none;
    border-color:var(--primary);
}

#wishSubmit{
    padding:14px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#d7b26d,#b58b52);
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:.3s;
}

#wishSubmit:hover{ transform:translateY(-3px); }
#wishSubmit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.wish-status{
    text-align:center;
    font-size:.85rem;
    min-height:18px;
    color:var(--primary);
}

.wish-list{
    width:100%;
    max-width:480px;
    margin-top:35px;
    max-height:360px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.wish-item{
    background:var(--white);
    border-radius:14px;
    padding:16px 18px;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.wish-item .wi-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.wish-item .wi-name{
    font-weight:600;
}

.wish-item .wi-badge{
    font-size:.7rem;
    padding:3px 10px;
    border-radius:50px;
    background:var(--secondary);
    color:var(--dark);
}

.wish-item .wi-msg{
    font-size:.9rem;
    line-height:1.6;
    font-weight:300;
}


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

footer{
    background:url("assets/gordeng.jpg") center center/cover;
    position:relative;
    color:white;
    text-align:center;
    padding:90px 25px;
}

footer::before{
    content:"";
    position:absolute;
    inset:0;
    /* background:rgba(0,0,0,.55); */
}

.footer-inner{
    position:relative;
    z-index:2;
    max-width:560px;
    margin:0 auto;
}

.footer-thanks{
    font-size:.95rem;
    line-height:1.8;
    font-weight:300;
}

.footer-wass{
    margin-top:24px;
    font-style:italic;
    font-size:.9rem;
    opacity:.9;
}

.footer-names{
    font-family:"Cormorant Garamond", serif;
    font-size:2.6rem;
    margin:16px 0;
}

.footer-credit i{ color:#ff6b6b; }


/* ==========================================
   FLOATING MENU
========================================== */

#bottomNav{
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:430px;
    height:65px;
    display:none;
    justify-content:space-around;
    align-items:center;
    border-radius:60px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(15px);
    box-shadow:0 10px 35px rgba(0,0,0,.15);
    z-index:999;
}

#bottomNav button{
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:none;
    font-size:19px;
    color:var(--primary);
    cursor:pointer;
    transition:.3s;
}

#bottomNav button:hover{
    background:var(--primary);
    color:white;
}


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

.fadeOut{
    animation:fadeOut .9s forwards;
}

@keyframes fadeOut{
    to{
        opacity:0;
        visibility:hidden;
    }
}


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

@media(max-width:768px){

    .hero-content h1{ font-size:52px; }
    .hero-content h1 span{ font-size:30px; }

    #splash h1{ font-size:2.8rem; }

    #guestName{ font-size:1.2rem; }

    .section-title h2{ font-size:38px; }

    .quran-text{ font-size:1.3rem; }

    .gallery-swiper .swiper-slide img{ height:320px; }

    #bottomNav{ width:95%; }

      #splash {
        left: 0;
        right: auto;
        max-width: none;
    }

}
 

/* ==========================================
   DESKTOP LAYOUT
========================================== */

@media (min-width: 769px) {

    body {
        background: url("assets/gordeng.jpg") center left / cover no-repeat fixed;
        background-color: #2f2a27;
    }

    /* Undangan menempel di kanan */
    #mainContent {
        width: 100%;
        max-width: 430px;

        margin-left: auto;
        margin-right: 0;

        min-height: 100vh;

        box-shadow: -10px 0 40px rgba(0, 0, 0, .15);
    }

    
    #splash {
        left: 0;
        right: auto;

        width: 100%;
        max-width: none;

        height: 100vh;

        background: url("assets/gordeng.jpg")
                    center center / cover no-repeat;
    }

    /* Hilangkan background flow.jpg */
    #splash::before {
        display: none;
    }
      #splash .content {
        position: absolute;

        left: auto;
        right: 10%;

        top: 20%;

        width: 380px;
        max-width: 90%;

        text-align: center;
    }

}