/* =========================
CUSTOM WARNA & FONT
========================= */

:root{

--warna-utama:#6f8b85;
--warna-teks:#ffffff;

--font-judul:'Playfair Display';
--font-nama:'Great Vibes';
--font-isi:'Poppins';

}


/* BODY */

body{

margin:0;
font-family:var(--font-isi);

}


/* PAGE */

.page{

display:none;

min-height:100vh;

background-size:cover;
background-position:center;

padding-top:80px;
padding-bottom:100px;

}

#home{
display:block;
background-image:url("ka\ flora.jpg");
}

#story{
background-image:url("4.jpg");
}

#gallery{
background-image:url("bg-gallery.jpg");
}

#location{
background-image:url("bg-location.jpg");
}

#gift{
background-image:url("bg-gift.jpg");
}



/* CONTENT BOX */

.content{

background:rgba(0,0,0,0.55);

color:white;

padding:40px;

max-width:800px;

margin:auto;

border-radius:10px;

text-align:center;

}



/* TEXT STYLE */

.title{

font-family:var(--font-judul);
font-size:50px;

text-shadow:3px 3px 12px rgba(0,0,0,0.8);

}

.couple{

font-family:var(--font-nama);
font-size:60px;

text-shadow:4px 4px 15px rgba(0,0,0,0.9);

}

.date{

font-size:20px;
margin-top:10px;

}



/* COUNTDOWN */

.countdown{

display:flex;

justify-content:center;

gap:20px;

margin-top:20px;

}

.countdown div{

background:var(--warna-utama);

padding:10px 15px;

border-radius:6px;

}



/* GALERI */

.gallery-grid{

display:grid;

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

gap:15px;

margin-top:20px;

}

.gallery-grid img{

width:100%;
height:150px;

object-fit:cover;

border-radius:8px;

cursor:pointer;

transition:0.3s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}



/* POPUP FOTO */

#popup{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.85);

justify-content:center;
align-items:center;

}

#popup img{

max-width:80%;

border-radius:10px;

}



/* LOKASI */

iframe{

width:100%;

height:400px;

border:none;

border-radius:10px;

margin-top:20px;

}



/* GIFT */

.bank-card{

background:white;

color:black;

padding:20px;

border-radius:10px;

margin-top:20px;

}

.qr{

width:160px;

margin-top:20px;

}



/* =====================
BOTTOM NAVIGATION
===================== */

.bottom-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

height:65px;

background:white;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:0 -2px 10px rgba(0,0,0,0.2);

z-index:1000;

}


/* BUTTON MENU */

.bottom-nav button{

flex:1;

height:100%;

border:none;

background:none;

font-family:var(--font-isi);

color:var(--warna-utama);

font-size:14px;

cursor:pointer;

}


/* HOVER EFFECT */

.bottom-nav button:hover{

background:#f5f5f5;

}