body{
font-family:Arial;
margin:0;
transition:0.3s;
}

/* HERO */

.hero{
text-align:center;
padding:80px;
}

.logo{
width:150px;
}

.start-btn{
margin-top:20px;
padding:15px 30px;
font-size:18px;
}

/* NAV */

nav{
text-align:center;
padding:15px;
}

nav a{
margin:15px;
text-decoration:none;
font-weight:bold;
}

/* SECTION */

.container{
width:80%;
margin:auto;
padding:40px;
}

/* MOVIE GRID */

.movie-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
}

.movie-grid img{
width:100%;
border-radius:10px;
transition:0.3s;
}

.movie-grid img:hover{
transform:scale(1.08);
box-shadow:0 10px 20px rgba(27, 27, 27, 0.6);
}

/* DARK MODE */

.dark{
background:#0d172e;
}

.dark .title{
color:white;
}

.dark .section-title{
color:#facc15;
}

.dark .text{
color:#e5e7eb;
}

/* LIGHT MODE */

.light{
background:#f8fafc;
}

.light .title{
color:#00112b;
}

.light .section-title{
color:#7c3aed;
}

.light .text{
color:#374151;
}

/* STARS */

.stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:transparent;
z-index:-1;
}

/* GENIE */

.lamp-btn{
background:gold;
color:black;
padding:12px 20px;
}

#genie-smoke{
width:120px;
height:120px;
opacity:0;
background:radial-gradient(circle,white,transparent);
border-radius:50%;
}

.smoke{
animation:genieSmoke 1s ease;
}

@keyframes genieSmoke{

0%{opacity:0; transform:scale(0.5);}
50%{opacity:1; transform:scale(1.3);}
100%{opacity:0; transform:scale(2);}

}
/* INTRO SCREEN */

#intro{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
animation:introFade 3s forwards;
}

.intro-title{
color:white;
font-size:50px;
letter-spacing:5px;
animation:introZoom 2s ease;
}

.intro-sub{
color:gold;
margin-top:20px;
font-size:20px;
}

@keyframes introZoom{

0%{
transform:scale(0.5);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

@keyframes introFade{

0%{opacity:1;}

90%{opacity:1;}

100%{
opacity:0;
visibility:hidden;
}

}
.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 50px;
}

.header-left{
display:flex;
align-items:center;
gap:15px;
}

.text-group{
display:flex;
flex-direction:column;
}

.header-right{
display:flex;
align-items:center;
gap:15px;
}

.logo{
width:70px;
}

.title{
font-size:22px;
margin:0;
}

.slogan{
font-size:14px;
margin:0;
opacity:0.8;
}
.dark .slogan{
color:#facc15;
}

.light .slogan{
color:#6b21a8;
}
.dark nav a{
color:#e5e7eb;
}

.dark nav a:hover{
color:#facc15;
}
.light nav a{
color:#1e293b;
}

.light nav a:hover{
color:#7c3aed;
}
nav a{
margin:15px;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}
nav{
text-align:center;
padding:15px;
backdrop-filter:blur(10px);
}
.team{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
margin-top:20px;
}
@media (max-width:600px){
.team{
grid-template-columns:1fr;
}
}
.member{
text-align:center;
}


.member{
padding:20px;
border-radius:15px;
background:rgba(255,255,255,0.05);
transition:0.3s;
}

.member:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}

.member h3{
margin-bottom:10px;
font-size:16px;
}

.member p{
font-size:14px;
opacity:0.9;
}
.dark .member{
background:rgba(255,255,255,0.05);
color:#e5e7eb;
}

.dark .member h3{
color:#facc15;
}
.light .member{
background:rgba(0,0,0,0.05);
color:#1e293b;
}

.light .member h3{
color:#7c3aed;
}
.member{
padding:20px;
border-radius:15px;
transition:0.3s;
}
.text ul{
padding-left:20px;
}

.text li{
margin-bottom:8px;
}
.movie{
text-align:center;
}

.movie p{
margin-top:8px;
font-size:14px;
}
.movie{
position:relative;
overflow:hidden;
border-radius:10px;
}

/* overlay gelap */
.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);

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

opacity:0;
transition:0.3s;
padding-bottom:20px;
}
.overlay p{
color:#facc15;
font-weight:bold;
transform:translateY(20px);
opacity:0;
transition:0.3s ease;
text-align:center;
}
.movie:hover .overlay{
opacity:1;
}

.movie:hover .overlay p{
transform:translateY(0);
opacity:1;
}
.movie:hover img{
transform:scale(1.08);
filter:brightness(0.6);
transition:0.3s;
}