*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:linear-gradient(
135deg,
#4a90e2,
#5da9ff,
#7ec3ff,
#bde3ff
);
min-height:100vh;
color:white;
overflow-x:hidden;
}

/* PAGE */

.page{
display:none;
padding:20px;
text-align:center;
}

.active{
display:block;
animation:fadePage 1s ease;
}

@keyframes fadePage{
from{
opacity:0;
}
to{
opacity:1;
}
}

/* LOGIN */

.login-box{
width:90%;
max-width:420px;
margin:70px auto;
background:rgba(0,0,0,.20);
backdrop-filter:blur(18px);
padding:30px;
border-radius:25px;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.profile-container{
display:flex;
justify-content:center;
margin-bottom:15px;
}

.profile-img{
width:130px;
height:130px;
object-fit:cover;
border-radius:50%;
border:5px solid white;
box-shadow:0 0 25px rgba(255,255,255,.7);
animation:float 3s infinite;
}

.special-name{
font-weight:600;
margin-bottom:15px;
color:white;
}

.subtitle{
margin-top:10px;
margin-bottom:20px;
color:white;
}

input{
width:100%;
padding:14px;
border:none;
outline:none;
border-radius:12px;
margin:10px 0;
font-size:15px;
}

/* BUTTON */

button{
padding:12px 25px;
border:none;
border-radius:30px;
background:#2563eb;
color:white;
font-weight:600;
cursor:pointer;
margin:10px;
transition:.3s;
}

button:hover{
transform:translateY(-3px);
}

/* HERO */

.hero{
padding-top:20px;
}

.hero h1,
.hero h2,
.login-box h1,
.login-box h2{
color:white;
text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.birthday-message{
line-height:1.8;
margin-top:15px;
}

/* SLIDER */

.memory-slider{
max-width:500px;
margin:25px auto;
}

.memory-slider img{
width:100%;
height:300px;
object-fit:cover;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

/* MENU */

.menu{
margin-top:20px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.menu button{
min-width:150px;
}

/* CARD */

.card{
display:none;
background:rgba(0,0,0,.20);
backdrop-filter:blur(15px);
padding:20px;
border-radius:20px;
margin-top:20px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.show{
display:block;
animation:fadeInUp .8s ease;
}

@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* SURAT */

.envelope{
font-size:90px;
margin-bottom:10px;
}

.letter{
text-align:left;
line-height:1.9;
margin-top:20px;
}

/* HADIAH */

.gift{
font-size:90px;
animation:bounce 2s infinite;
}

.gift-section{
margin:20px 0;
}

#flowerBox{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:20px 0;
min-height:120px;
}

#cakeArea{
margin:20px 0;
}

.big-cake{
font-size:100px;
line-height:1.1;
}

.cake-large{
font-size:180px;
animation:bounce 2s infinite;
}

@keyframes bounce{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-15px);
}
}

/* GALERI */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
margin-top:20px;
align-items:start;
}

.gallery img,
.gallery video{
width:100%;
height:220px;
object-fit:contain;
background:#111;
border-radius:15px;
display:block;
cursor:pointer;
transition:.4s;
}

.gallery img:hover,
.gallery video:hover{
transform:scale(1.03);
}

/* DOA */

.doa-text{
line-height:1.8;
margin-top:20px;
}

/* LIGHTBOX */

.portal-overlay{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:fixed;
inset:0;
background:rgba(3,10,25,.95);
backdrop-filter:blur(12px);
color:white;
text-align:center;
padding:30px;
z-index:10000;
opacity:0;
visibility:hidden;
transition:opacity .3s ease, visibility .3s ease;
}

.portal-overlay.show{
opacity:1;
visibility:visible;
}

.portal-count{
font-size:6rem;
font-weight:800;
letter-spacing:.2em;
text-shadow:0 0 40px rgba(255,255,255,.5);
animation:pulse 0.8s ease-in-out infinite alternate;
}

.portal-text{
margin-top:18px;
font-size:1.3rem;
color:#cfd8ff;
}

.portal-effect .portal-count{
transform:scale(1.12);
}

@keyframes pulse{
from{transform:scale(1);}
to{transform:scale(1.06);}
}

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
justify-content:center;
align-items:center;
z-index:9999;
}

.lightbox-inner{
position:relative;
display:flex;
justify-content:center;
align-items:center;
max-width:95%;
max-height:95%;
width:100%;
min-height:320px;
padding:20px;
}

.lightbox-content{
position:relative;
width:60vw;
height:60vh;
background:rgba(0,0,0,.20);
backdrop-filter:blur(10px);
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.lightbox-content img,
.lightbox-content video{
width:100%;
height:100%;
object-fit:contain;
border-radius:20px;
display:block;
transform-origin:center center;
transition:transform .2s ease;
}

.lightbox-close,
.lightbox-nav,
.lightbox-zoom{
position:absolute;
background:rgba(0,0,0,.7);
border:none;
color:white;
font-size:2rem;
width:48px;
height:48px;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.lightbox-close{
top:10px;
right:10px;
}

.lightbox-nav{
top:50%;
transform:translateY(-50%);
}

.lightbox-prev{
left:-24px;
}

.lightbox-next{
right:-24px;
}

.lightbox-zoom-in{
right:80px;
bottom:15px;
}

.lightbox-zoom-out{
right:15px;
bottom:15px;
}

.lightbox video{
max-width:100%;
max-height:80vh;
}

@media (max-width: 768px) {
.lightbox-nav {
width:40px;
height:40px;
font-size:1.5rem;
}

.lightbox-prev {
left:8px;
}

.lightbox-next {
right:8px;
}
}

/* PENUTUP */

.closing-message{
margin-top:30px;
padding:25px;
border-radius:20px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
}

.closing-message h2{
margin-bottom:15px;
}

.closing-message p{
line-height:1.8;
}

footer{
margin:40px 0;
font-size:14px;
}

/* FLOAT */

@keyframes float{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}

/* MOBILE */

@media(max-width:600px){

.hero h1{
font-size:1.9rem;
}

.hero h2{
font-size:1.2rem;
}

.profile-img{
width:110px;
height:110px;
}

.memory-slider img{
width:100%;
height:auto;
}

.menu{
flex-direction:column;
}

.menu button{
width:100%;
margin:8px 0;
}

input{
font-size:1rem;
}

button{
width:100%;
}

.gallery{
grid-template-columns:1fr;
}

.gallery img,
.gallery video{
height:auto;
}

.envelope{
font-size:70px;
}

.letter,
.doa-text,
.birthday-message {
font-size:0.98rem;
}

.big-cake{
font-size:80px;
}

.cake-large{
font-size:120px;
}

.lightbox-content{
width:95vw;
height:75vh;
}

.lightbox-close,
.lightbox-nav,
.lightbox-zoom{
width:42px;
height:42px;
font-size:1.4rem;
}

}