body{
margin:0;
font-family:Poppins, sans-serif;

background-image:url('../img/lebaran-bg.jpg');
background-size:cover;
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;

color:white;
min-height:100vh;
overflow-x:hidden;
}

body{

overflow-x:hidden;

}

/* background ketupat pattern */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:url('../img/ketupat-pattern.png');
background-size:200px;
opacity:0.05;
pointer-events:none;
}

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,40,20,0);
pointer-events:none;
z-index:-1;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:rgba(0,0,0,0.25);
backdrop-filter:blur(6px);
}

.logo{
height:40px;
object-fit:contain;
}

.cs-btn{
background:#22c55e;
padding:10px 15px;
border-radius:8px;
text-decoration:none;
color:white;
font-size:14px;
}

/* CONTAINER UTAMA */

.main-container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin-top:5px;
}

/* LOGO */

/* LOGO AREA */

.logo-area{
text-align:center;
margin-top:20px;
margin-bottom:40px;
}

.main-logo{
width:520px;
max-width:90%;
height:auto;
}

/* MENU */

#menu{
display:flex;
flex-direction:column;
align-items:center;
gap:25px;
margin-top:0px;
}

/* CARD */

.card{

width:420px;
max-width:85%;
height:85px;

display:flex;
align-items:center;
justify-content:center;
gap:20px;

font-size:22px;
font-weight:600;

border-radius:16px;

background:rgba(0,0,0,0.45);
backdrop-filter:blur(12px);

color:white;

transition:0.3s;

box-shadow:0 15px 40px rgba(0,0,0,0.4);

}

.card:hover{
transform:scale(1.05);
background:rgba(0,0,0,0.6);
}
/* POPUP */

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

.popup-box{
background:white;
color:black;
padding:50px;
border-radius:20px;
text-align:center;
max-width:420px;
box-shadow:0 20px 50px rgba(0,0,0,0.4);
animation:popupFade 0.5s ease;
}

.popup button{
margin-top:20px;
padding:10px 20px;
background:#22c55e;
border:none;
border-radius:10px;
color:white;
cursor:pointer;
}

@keyframes popupFade{
from{
transform:scale(0.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

/* FLOATING ANIMATION */

.floating{
position:absolute;
animation:float 6s ease-in-out infinite;
}

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

/* HADIAH GRID */

.hadiah-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

padding:20px 40px;

max-width:1100px;

margin:-80px auto 0 auto;

}

.hadiah-card{

background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);

border-radius:16px;

padding:6px;

text-align:center;

height:120px;

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

transition:0.3s;

}

.hadiah-card img{

width:60px;
margin-bottom:6px;

}

.hadiah-card:hover{
transform:translateY(-10px);
background:#065f46;
}

/* AREA KETUPAT */

.ketupat-area{

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

gap:12px;

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

margin:25px auto;

}

.ketupat{
cursor:pointer;
transition:0.3s;
}

.ketupat img{
width:120px;
transition:0.3s;
}

.ketupat:hover{
transform:scale(1.2) rotate(10deg);
}

.ketupat:active img{
transform:scale(1.3) rotate(20deg);
}

/* FLOATING KETUPAT */

.floating img{
width:70px;
opacity:0.3;
}

.ket1{top:10%;left:5%;position:fixed;animation:float 6s infinite ease-in-out;}
.ket2{top:60%;left:10%;position:fixed;animation:float 7s infinite ease-in-out;}
.ket3{top:20%;right:10%;position:fixed;animation:float 5s infinite ease-in-out;}
.ket4{bottom:10%;right:5%;position:fixed;animation:float 8s infinite ease-in-out;}

/* LAMPU LEBARAN */

.lampu{
position:fixed;
width:30px;
height:30px;
background:#22c55e;
border-radius:50%;
box-shadow:0 0 20px #22c55e;
animation:lampuGlow 2s infinite alternate;
}

.lampu::before{
content:"";
position:absolute;
width:2px;
height:80px;
background:white;
top:-80px;
left:50%;
transform:translateX(-50%);
}

.lampu1{top:120px;left:20%;}
.lampu2{top:120px;left:40%;}
.lampu3{top:120px;left:60%;}
.lampu4{top:120px;left:80%;}

@keyframes lampuGlow{
from{opacity:0.5;}
to{opacity:1;transform:scale(1.1);}
}

/* KETUPAT BACKGROUND */

.ketupat-bg{
position:fixed;
width:20px;
height:20px;
background:#22c55e;
transform:rotate(45deg);
opacity:0.2;
animation:ketupatMove 15s linear infinite;
}

@keyframes ketupatMove{
0%{transform:translateY(100vh) rotate(45deg);}
100%{transform:translateY(-100px) rotate(45deg);}
}

/* MASKOT */

.menu{
position:relative;
z-index:50;
}

.card{
position:relative;
z-index:100;
cursor:pointer;
}

/* PASTIKAN MENU ADA DI ATAS SEMUA LAYER */

.menu{
position:relative;
z-index:999;
margin-top:-120px;
}

/* CARD HARUS DI ATAS */

.card{
position:relative;
z-index:1000;
cursor:pointer;
}

/* SEMUA EFEK BACKGROUND TIDAK BOLEH MENANGKAP KLIK */

.lampu,
.ketupat-bg,
.floating,
#maskot,
body::before,
body::after{
pointer-events:none;
}
@media (max-width:768px){

.main-logo{
width:300px;
}

.card{
width:90%;
height:65px;
font-size:18px;
}

.card span{

display:inline-block;

}

.logo-area{
margin-bottom:30px;
}

.ketupat img{
width:80px;
}

}
/* HEADER HADIAH */

.hadiah-header{
text-align:center;
margin-top:40px;
position:relative;
}

.judul-hadiah{

font-size:28px;
font-weight:bold;
color:white;
margin-bottom:15px;

}

.peringatan-hadiah{

color:white;
font-size:14px;
margin-top:10px;
line-height:1.5;

}

/* TOMBOL KEMBALI */

.back-btn{

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

border:none;

padding:10px 18px;

border-radius:10px;

color:white;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.back-btn:hover{

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

}

/* GRID HADIAH */

.hadiah-grid{

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

gap:35px;
padding:50px;

}

/* GLASS CARD */

.hadiah-card{

background:rgba(255,255,255,0.08);
backdrop-filter:blur(14px);

border-radius:22px;

padding:30px 20px;

text-align:center;

transition:0.35s;

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

box-shadow:0 15px 40px rgba(0,0,0,0.4);

}

/* HOVER EFFECT */

.hadiah-card:hover{

transform:translateY(-10px) scale(1.05);

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

}

/* GAMBAR HADIAH */

.hadiah-card img{

width:60px;
margin-bottom:6px;

}

/* NAMA HADIAH */

.hadiah-card h3{

font-size:14px;
font-weight:600;
letter-spacing:1px;

color:white;

text-shadow:0 3px 10px rgba(0,0,0,0.5);

}
#hadiah{
height:100vh;
overflow:hidden;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:rgba(0,0,0,0.25);
backdrop-filter:blur(6px);
}

.back-btn{

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

border:none;
padding:10px 18px;

border-radius:10px;

color:white;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.back-btn:hover{

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

}

#hadiah{
margin-top:-60px;
}
.voucher-box{

display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:20px;

}

.voucher-box input{

padding:12px;
width:260px;
border-radius:8px;
border:none;

}

.go-btn{

background:#22c55e;
border:none;
padding:12px 18px;
border-radius:8px;
color:white;
font-weight:bold;
cursor:pointer;

}

.amplop{

pointer-events:none;
opacity:100;
transition:0.3s;

}

.amplop.aktif{

filter:drop-shadow(0 0 10px #00ff88);

animation:shake 1s infinite;

}

@keyframes shake{

0%{transform:translateY(0)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0)}

}

.amplop img{

width:110px;
transition:0.3s;

}

.amplop img{
pointer-events:none;
}

.amplop{
pointer-events:none;
opacity:0.6;
}

.amplop.aktif{
pointer-events:auto;
opacity:1;
cursor:pointer;
}
.amplop:hover{

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

}

/* saat amplop dibuka */
.amplop.buka .amplop-inner{
animation:bukaAmplop 0.6s forwards;
}

.amplop.buka img{

animation:amplopOpen 0.5s ease;

}

/* animasi buka */
@keyframes amplopOpen{

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

50%{
transform:rotateX(-60deg) scale(1.1);
}

100%{
transform:rotateX(-120deg) scale(0.95);
}

}
.amplop{
cursor:pointer;
transition:0.3s;

filter:brightness(1);

}

.hadiah-popup{

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

}

.hadiah-box{

background:white;
padding:40px;
border-radius:20px;
text-align:center;
animation:zoomHadiah 0.5s ease;

}

.hadiah-box img{

width:200px;
margin-bottom:20px;

}

@keyframes zoomHadiah{

0%{transform:scale(0)}
100%{transform:scale(1)}

}

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

.box-hadiah{

background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

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

padding:35px;
border-radius:18px;

text-align:center;
width:320px;

box-shadow:0 10px 40px rgba(0,0,0,0.25);

animation:popScale 0.4s ease;

}

.gambar-hadiah{
width:140px;
margin:15px 0;
}

.text-hadiah{
font-size:20px;
font-weight:bold;
}

.box-hadiah button{
background:#2ecc71;
border:none;
color:white;
padding:10px 25px;
border-radius:8px;
font-size:16px;
cursor:pointer;
}

@keyframes popScale{
0%{transform:scale(0.5);opacity:0}
100%{transform:scale(1);opacity:1}
}

.hadiah-keluar{
position:absolute;
top:-60px;
left:50%;
transform:translateX(-50%) scale(0);
opacity:0;
pointer-events:none;
}

.hadiah-keluar img{
width:90px;
filter:drop-shadow(0 10px 15px rgba(0,0,0,0.4));
}

.amplop{
position:relative;
}

.amplop.buka .hadiah-keluar{
animation:hadiahKeluar 0.6s forwards;
}

@keyframes hadiahKeluar{

0%{
transform:translate(-50%,40px) scale(0.3);
opacity:0;
}

60%{
transform:translate(-50%,-40px) scale(1.1);
opacity:1;
}

100%{
transform:translate(-50%,-60px) scale(1);
opacity:1;
}

}

@media screen and (max-width:768px){

#menu{

flex-direction:column;
align-items:center;
gap:15px;

}

.card{

width:85%;
height:70px;

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

gap:8px;

font-size:16px;
font-weight:600;

padding:0 15px;

white-space:nowrap;

}

.card span{
display:inline;

}

}

/* MOBILE VIEW HADIAH */

@media screen and (max-width:768px){

.hadiah-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
padding:10px;
margin-top:20px;

}

.hadiah-card{

padding:8px;
border-radius:10px;

}

.hadiah-card img{

width:100%;
padding:10px;

}

.hadiah-card h3{

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

}

}

@media screen and (max-width:768px){

.ketupat-area{

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

gap:8px;

width:100%;

margin:25px auto;

padding:0 15px;

}

.amplop{

width:22%;
max-width:75px;

}

.amplop img{

width:100%;

}

}

@media screen and (max-width:768px){

.voucher-box{

width:90%;

}

.voucher-box input{

width:65%;
font-size:16px;

}

.go-btn{

width:60px;
font-size:16px;

}

}