*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Poppins,sans-serif;
overflow-x:hidden;
background:#111;

}

/* HERO */

.hero{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}

.bg{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

animation:zoom 25s linear infinite;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(

180deg,

rgba(0,0,0,.3),

rgba(0,0,0,.75)

);

backdrop-filter:blur(2px);

}

.hero-content{

position:relative;

z-index:2;

text-align:center;

color:white;

padding:30px;

width:90%;

max-width:700px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border-radius:25px;

border:1px solid rgba(255,255,255,.2);

box-shadow:0 20px 50px rgba(0,0,0,.5);

}

.hero h5{

letter-spacing:7px;

font-weight:300;

font-size:15px;

margin-bottom:20px;

}

.hero h1{

font-size:70px;

font-family:"Cormorant Garamond",serif;

font-weight:700;

line-height:1.1;

}

.hero span{

color:#e7c77d;

}

.hero p{

margin:25px 0;

font-size:20px;

letter-spacing:3px;

}

.guest{

margin:35px auto;

padding:20px;

background:rgba(255,255,255,.1);

border-radius:20px;

}

.guest h4{

font-weight:400;

}

.guest h2{

margin-top:10px;

font-size:24px;

}

#open{

padding:18px 45px;

border:none;

border-radius:50px;

background:#d4af37;

color:white;

font-size:18px;

cursor:pointer;

transition:.4s;

}

#open:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(212,175,55,.4);

}

@keyframes zoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}
/* ==========================
SCROLL INDICATOR
========================== */

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

z-index:20;

color:white;

text-align:center;

animation:updown 2s infinite;

}

.mouse{

width:32px;

height:55px;

border:2px solid white;

border-radius:30px;

margin:auto;

margin-top:10px;

}

.wheel{

width:5px;

height:10px;

background:white;

margin:auto;

margin-top:8px;

border-radius:10px;

animation:wheel 1.5s infinite;

}

@keyframes wheel{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(20px);

opacity:0;

}

}

@keyframes updown{

50%{

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

}

}

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

.floating{

position:fixed;

right:20px;

bottom:20px;

display:flex;

flex-direction:column;

gap:12px;

z-index:9999;

}

.floating button{

width:58px;

height:58px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

backdrop-filter:blur(12px);

color:white;

font-size:20px;

cursor:pointer;

border:1px solid rgba(255,255,255,.3);

transition:.3s;

}

.floating button:hover{

transform:scale(1.1);

background:#d4af37;

}

/* ==========================
PETALS
========================== */

.petal{

position:fixed;

top:-30px;

width:15px;

height:15px;

background:#ffd6e7;

border-radius:70% 0 70% 0;

opacity:.8;

pointer-events:none;

animation:fall linear forwards;

}

@keyframes fall{

0%{

transform:translateY(-30px) rotate(0deg);

}

100%{

transform:translateY(110vh) rotate(720deg);

}

}

/*=====================================
 GOLD LIGHT
======================================*/

.gold-light{

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,#f7d16a 0%,transparent 70%);

top:50%;

left:50%;

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

opacity:.15;

filter:blur(70px);

animation:pulse 5s infinite;

}

@keyframes pulse{

50%{

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

opacity:.3;

}

}

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

.title{

font-size:85px;

line-height:1;

}

.title .text{

display:inline-block;

opacity:0;

transform:translateY(50px);

animation:fadeUp 1s forwards;

}

.title .text:nth-child(1){

animation-delay:.5s;

}

.title .text:nth-child(3){

animation-delay:1s;

}

.and{

display:block;

font-size:55px;

color:#d4af37;

margin:15px 0;

opacity:0;

animation:fadeUp 1s forwards;

animation-delay:.8s;

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

/*=====================================
 STARS
======================================*/

.star{

position:absolute;

background:white;

border-radius:50%;

animation:blink infinite;

}

@keyframes blink{

50%{

opacity:.2;

transform:scale(.4);

}

}

/*=====================================
 CURSOR GLOW
======================================*/

#cursorGlow{

position:fixed;

width:180px;

height:180px;

background:radial-gradient(circle,

rgba(255,215,100,.35),

transparent 70%);

pointer-events:none;

border-radius:50%;

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

z-index:99999;

mix-blend-mode:screen;

}
/*======================================
GENERAL
======================================*/

.container{

width:90%;

max-width:1200px;

margin:auto;

}

.mini-title{

color:#d4af37;

letter-spacing:4px;

text-transform:uppercase;

margin-bottom:15px;

}

.section-title{

font-family:"Cormorant Garamond",serif;

font-size:55px;

margin-bottom:60px;

}

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

.countdown-section{

padding:130px 0;

background:linear-gradient(180deg,#111,#1d1d1d);

color:white;

text-align:center;

}

.countdown-box{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.time-card{

width:170px;

padding:35px;

border-radius:25px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.15);

transition:.4s;

}

.time-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(212,175,55,.25);

}

.time-card span{

display:block;

font-size:65px;

font-weight:bold;

font-family:"Cormorant Garamond",serif;

color:#d4af37;

}

.time-card small{

font-size:17px;

}

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

.couple{

padding:150px 0;

background:#f8f5ef;

text-align:center;

}

.couple-wrapper{

display:flex;

justify-content:center;

align-items:center;

gap:60px;

flex-wrap:wrap;

}

.person{

width:350px;

}

.photo{

width:320px;
height:320px;

margin:auto;

padding:10px;

border-radius:50%;

background:linear-gradient(
135deg,
#fef3b0 0%,
#d4af37 20%,
#fff8d6 40%,
#c79b1b 60%,
#fff3a0 80%,
#d4af37 100%
);

box-shadow:
0 0 0 6px rgba(255,255,255,.4),
0 10px 40px rgba(212,175,55,.45),
0 0 80px rgba(212,175,55,.3);

position:relative;

overflow:hidden;

}

.photo img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

border:5px solid white;

transition:.5s;

}
.photo::before{

content:"";

position:absolute;

top:-60%;
left:-60%;

width:60%;
height:220%;

background:rgba(255,255,255,.45);

transform:rotate(30deg);

transition:1s;

}

.photo:hover::before{

left:140%;

}

.photo:hover img{

transform:scale(1.08);

}
.photo:hover{

transform:translateY(-8px) scale(1.03);

transition:.4s;

}

.person h2{

font-family:"Cormorant Garamond",serif;

font-size:40px;

margin-top:30px;

}

.person p{

margin-top:10px;

color:#666;

}

.love-icon{

font-size:70px;

color:#d4af37;

animation:heartbeat 1.5s infinite;

}

@keyframes heartbeat{

50%{

transform:scale(1.3);

}

}

/*===============================
LOVE STORY
================================*/

.story{

padding:150px 0;

background:#111;

color:white;

overflow:hidden;

}

.timeline{

position:relative;

margin-top:80px;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:linear-gradient(

#d4af37,

#ffffff,

#d4af37

);

transform:translateX(-50%);

}

.timeline-item{

width:50%;

padding:40px;

position:relative;

}

.timeline-item.left{

left:0;

text-align:right;

}

.timeline-item.right{

left:50%;

}

.story-card{

display:inline-block;

max-width:420px;

background:rgba(255,255,255,.06);

backdrop-filter:blur(15px);

padding:30px;

border-radius:25px;

border:1px solid rgba(255,255,255,.1);

transition:.5s;

}

.story-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(212,175,55,.25);

}

.story-card img{

width:100%;

height:230px;

object-fit:cover;

border-radius:20px;

margin:20px 0;

}

.story-card h3{

font-family:"Cormorant Garamond",serif;

font-size:35px;

margin-bottom:15px;

}

.story-card p{

line-height:1.9;

color:#ddd;

}

.date{

display:inline-block;

padding:12px 25px;

border-radius:50px;

background:#d4af37;

color:black;

font-weight:bold;

}
.bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
/*====================================
EVENT
====================================*/

.event{

padding:140px 0;

background:linear-gradient(180deg,#faf8f3,#f0ece2);

text-align:center;

}

.event-wrapper{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.event-card{

width:380px;

padding:45px;

background:white;

border-radius:30px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

transition:.4s;

position:relative;

overflow:hidden;

}

.event-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:linear-gradient(90deg,#d4af37,#f7e08d,#d4af37);

}

.event-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 80px rgba(0,0,0,.15);

}

.event-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#d4af37;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

margin-bottom:25px;

color:white;

}

.event-card h3{

font-family:"Cormorant Garamond",serif;

font-size:40px;

margin-bottom:20px;

}

.event-date{

font-weight:600;

margin-bottom:10px;

}

.event-time{

color:#b8860b;

margin-bottom:20px;

font-weight:600;

}

.event-address{

line-height:1.8;

color:#666;

margin-bottom:30px;

}

.event-btn{

display:inline-block;

padding:15px 35px;

background:#d4af37;

color:white;

border-radius:50px;

text-decoration:none;

transition:.3s;

}

.event-btn:hover{

background:#b68d1d;

transform:scale(1.05);

}
/*=====================================
EVENT MAP
=====================================*/

.event-map{

margin-top:80px;

border-radius:30px;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.event-map iframe{

width:100%;

height:450px;

border:0;

display:block;

}

/*=====================================
CALENDAR
=====================================*/

.calendar-box{

margin-top:60px;

padding:50px;

border-radius:30px;

background:white;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.calendar-box h3{

font-size:38px;

font-family:"Cormorant Garamond",serif;

margin-bottom:15px;

}

.calendar-box p{

color:#666;

margin-bottom:30px;

}

.calendar-btn{

display:inline-block;

padding:18px 45px;

background:#d4af37;

color:white;

text-decoration:none;

border-radius:50px;

transition:.4s;

font-weight:600;

}

.calendar-btn:hover{

background:#c89d1c;

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(212,175,55,.35);

}
.event-decoration{

font-size:28px;

margin-bottom:40px;

letter-spacing:15px;

opacity:.8;

animation:floatDecor 4s ease-in-out infinite;

}

@keyframes floatDecor{

50%{

transform:translateY(-10px);

}

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

.gallery{

padding:150px 0;

background:#111;

color:white;

text-align:center;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:70px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

cursor:pointer;

position:relative;

box-shadow:0 20px 40px rgba(0,0,0,.3);

}

.gallery-item img{

width:100%;

height:380px;

object-fit:cover;

transition:.6s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.4)

);

opacity:0;

transition:.4s;

}

.gallery-item:hover::after{

opacity:1;

}

/*===========================
LIGHTBOX
===========================*/

.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.92);

display:none;

justify-content:center;

align-items:center;

z-index:999999;

backdrop-filter:blur(10px);

}

.lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

animation:zoomImage .35s;

}

.close-lightbox{

position:absolute;

top:25px;

right:35px;

font-size:55px;

color:white;

cursor:pointer;

}

@keyframes zoomImage{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}
/*==================================
WEDDING GIFT
==================================*/

.gift{

padding:150px 0;

background:#faf7f2;

text-align:center;

}

.gift-text{

max-width:700px;

margin:auto;

margin-bottom:70px;

line-height:1.8;

color:#666;

}

.gift-wrapper{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.gift-card{

width:380px;

padding:40px;

border-radius:30px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.4);

box-shadow:0 20px 50px rgba(0,0,0,.08);

transition:.4s;

position:relative;

overflow:hidden;

}

.gift-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(212,175,55,.25);

}

.bank-logo{

display:inline-block;

padding:10px 20px;

background:#d4af37;

color:white;

font-weight:bold;

border-radius:50px;

margin-bottom:20px;

}

.gift-card h3{

font-size:28px;

margin-bottom:15px;

font-family:"Cormorant Garamond",serif;

}

.gift-card h1{

font-size:34px;

margin-bottom:15px;

letter-spacing:2px;

}

.gift-card p{

margin-bottom:25px;

color:#666;

}

.gift-card button{

padding:15px 30px;

border:none;

background:#d4af37;

color:white;

border-radius:50px;

cursor:pointer;

transition:.3s;

font-size:15px;

}

.gift-card button:hover{

background:#b88f17;

}

.qris-box{

margin-top:70px;

}

.qris-box img{

width:260px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

}
/*=====================================
RSVP
=====================================*/

.rsvp{

padding:150px 0;

background:#111;

color:white;

text-align:center;

}

.rsvp-box{

max-width:700px;

margin:auto;

}

.rsvp-box input,
.rsvp-box select,
.rsvp-box textarea{

width:100%;

padding:18px;

margin-bottom:20px;

border:none;

border-radius:18px;

background:rgba(255,255,255,.08);

color:white;

font-size:16px;

outline:none;

}

.rsvp-box textarea{

resize:none;

}

.rsvp-box button{

padding:18px 40px;

border:none;

background:#d4af37;

color:white;

border-radius:50px;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.rsvp-box button:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(212,175,55,.35);

}

.statistik{

display:flex;

justify-content:center;

gap:30px;

margin:60px 0;

flex-wrap:wrap;

}

.stat-card{

width:180px;

padding:30px;

background:rgba(255,255,255,.08);

border-radius:20px;

}

.stat-card h2{

font-size:55px;

color:#d4af37;

font-family:"Cormorant Garamond",serif;

}

#listUcapan{

margin-top:50px;

display:flex;

flex-direction:column;

gap:20px;

}

.ucapan-card{

background:rgba(255,255,255,.08);

padding:25px;

border-radius:20px;

text-align:left;

}

.ucapan-card h3{

margin-bottom:10px;

color:#d4af37;

}

.ucapan-card small{

display:block;

margin-bottom:15px;

opacity:.7;

}
/*====================================
LOADER
====================================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#111;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:1s;

}

.loader-content{

text-align:center;

color:white;

}

.loader-ring{

width:90px;

height:90px;

border-radius:50%;

border:6px solid rgba(255,255,255,.15);

border-top:6px solid #d4af37;

margin:auto;

animation:spin 1s linear infinite;

margin-bottom:30px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*====================================
BACK TO TOP
====================================*/

#backTop{

position:fixed;

right:30px;

bottom:95px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#d4af37;

color:white;

font-size:22px;

cursor:pointer;

display:none;

z-index:9999;

box-shadow:0 10px 30px rgba(0,0,0,.3);

transition:.3s;

}

#backTop:hover{

transform:translateY(-5px);

}

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

footer{

padding:90px 20px;

background:#0e0e0e;

text-align:center;

color:white;

}

footer h2{

font-family:"Cormorant Garamond",serif;

font-size:48px;

margin-bottom:20px;

}

.footer-line{

width:120px;

height:3px;

background:#d4af37;

margin:30px auto;

border-radius:20px;

}

footer small{

opacity:.7;

}
.reveal {
    opacity: 0;
    transform: translateY(60px) scale(.9);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@keyframes floating{
    0%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}

.couple-photo img{
    animation:floating 5s ease-in-out infinite;
}
.typing{
    overflow:hidden;
    white-space:nowrap;
    border-right:3px solid #fff;
    width:0;
    animation:
    typing 3s steps(20,end) forwards,
    blink .8s infinite;
}

@keyframes typing{
    from{width:0}
    to{width:100%}
}

@keyframes blink{
    50%{border-color:transparent;}
}
.btn{
    position:relative;
    overflow:hidden;
}

.btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-20deg);
    animation:shine 3s infinite;
}

@keyframes shine{
    to{
        left:150%;
    }
}
@keyframes petals{
    0%{
        transform:translateY(-100px) rotate(0deg);
    }

    50%{
        transform:translateY(50vh) translateX(50px) rotate(180deg);
    }

    100%{
        transform:translateY(110vh) translateX(-50px) rotate(360deg);
    }
}
.gallery-slider{

    width:100%;
    overflow:hidden;
    border-radius:20px;

}

.gallery-track{

    display:flex;
    width:max-content;

    animation:slideGallery 25s linear infinite;

}

.gallery-track img{

    width:320px;
    height:420px;

    object-fit:cover;

    border-radius:20px;

    margin-right:20px;

    transition:.5s;

}

.gallery-track img:hover{

    transform:scale(1.08);

}

@keyframes slideGallery{

0%{
transform:translateX(0);
}

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

}
.countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.flip-card{

    width:90px;
    height:100px;

    background:#fff;
    border-radius:15px;

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

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transition:.4s;

}

.flip-card span{

    font-size:38px;
    font-weight:bold;
    color:#8B5E3C;

}

.flip-card small{

    color:#666;
}

.flip{

    animation:flip .5s;
}

@keyframes flip{

0%{
transform:rotateX(0deg);
}

50%{
transform:rotateX(90deg);
}

100%{
transform:rotateX(0deg);
}

}