/* ===== RESET ===== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

html,body{
min-height:100vh;
}

body{
background:#f9f9f9;
color:#333;
line-height:1.6;
display:flex;
flex-direction:column;
}

/* ===== HEADER ===== */
header{
background:#1976d2;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 40px;
}

nav a,
.dropdown>a{
color:#fff;
text-decoration:none;
margin:0 10px;
display:inline-block;
cursor:pointer;
transition:color .3s,transform .2s;
}

nav a:hover{
color:#05c70f;
transform:translateY(-2px);
}

nav a.active{
color:#ffeb3b;
transform:translateY(-2px);
}

main{flex:1}

/* ===== HERO ===== */
#hero{
text-align:center;
padding:60px 20px;
}

.nama{color:#f7f706}

.intro{
text-align:center;
font-size:1.5rem;
}

.foto-profil{
width:120px;
height:120px;
border-radius:50%;
margin:15px auto;
display:block;
border:3px solid #1976d2;
}

/* ===== CARD ===== */
.card{
background:#fff;
margin:30px auto;
padding:25px;
max-width:700px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.1);
}

/* ===== BOX ===== */
.box{
display:block;
width:fit-content;
background:#e3f2fd;
padding:10px 15px;
border-radius:8px;
margin:10px 0;
text-align:justify;
transition:.3s;
}

.box:hover{
transform:scale(1.05);
box-shadow:0 4px 12px rgba(0,0,0,.2);
}

ul{list-style:none}
ul li{margin:5px 0}

/* ===== MEDIA CARD ===== */
.media-card{
background:#f4f8fb;
border-radius:16px;
padding:24px;
margin-bottom:24px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
transition:.3s;
}

.media-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.media-card__title{
font-size:20px;
font-weight:700;
color:#e53935;
margin-bottom:16px;
}

/* ===== CONTACT FORM ===== */
#contact-form{
display:flex;
flex-direction:column;
gap:15px;
max-width:400px;
margin:80px auto;
padding:25px;
background:#fff;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,.1);
}

#contact-form input,
#contact-form textarea{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
transition:.3s;
}

#contact-form input:focus,
#contact-form textarea:focus{
outline:none;
border-color:#25D366;
box-shadow:0 0 5px rgba(37,211,102,.3);
}

#contact-form textarea{
resize:none;
min-height:100px;
}

#contact-form button{
padding:12px;
border:none;
border-radius:6px;
background:#25D366;
color:#fff;
font-size:16px;
cursor:pointer;
transition:.3s;
}

#contact-form button:hover{
background:#1ebe5d;
}

/* ===== GALLERY ===== */
#lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
}

#lightbox.show{
display:flex;
}

#lightbox-img{
max-width:90%;
max-height:90%;
border-radius:10px;
box-shadow:0 10px 40px rgba(0,0,0,.8);
}

.lightbox-close{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:#fff;
cursor:pointer;
font-weight:bold;
transition:.3s;
}

.lightbox-close:hover{
color:#ff4444;
transform:scale(1.2);
}

.gallery-title{
text-align:center;
margin-bottom:30px;
font-size:28px;
}

.gallery-subtitle{
margin:25px 0 15px;
color:#1976d2;
}

/* GRID FOTO */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
}

.gallery-grid img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

.gallery-grid img:hover{
transform:scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* VIDEO */

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

.video-grid video{
width:100%;
border-radius:10px;
}

/* AUDIO */

.audio-list{
display:flex;
flex-direction:column;
gap:15px;
margin-top:10px;
}

.audio-item{
background:#f4f8fb;
padding:15px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* ===== FOOTER ===== */
footer{
text-align:center;
background:#1976d2;
color:#fff;
padding:15px;
margin-top:auto;
}

/* ===== DROPDOWN ===== */
.dropdown{
position:relative;
display:inline-block;
}

.dropdown-content{
position:absolute;
top:100%;
left:0;
min-width:180px;
background:#fff;
border-radius:8px;
box-shadow:0 6px 15px rgba(0,0,0,.15);
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:.25s;
}

.dropdown-content a{
display:block;
padding:10px 15px;
color:#333;
text-decoration:none;
white-space:nowrap;
}

.dropdown:hover .dropdown-content{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* ===== GAME TEBAK ANGKA ===== */

#inputAngka{
width:200px;
padding:10px 12px;
font-size:1rem;
border-radius:8px;
border:2px solid #1976d2;
text-align:center;
transition:.3s;
}

#inputAngka:focus{
border-color:#0d47a1;
box-shadow:0 0 0 3px rgba(25,118,210,.2);
outline:none;
}

.btn{
padding:10px 20px;
margin-left:10px;
font-size:1rem;
border-radius:8px;
border:none;
background:#1976d2;
color:#fff;
cursor:pointer;
transition:.3s;
}

.btn:hover{
background:#0d47a1;
transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,.2);
}

.btn:active{
transform:scale(.97);
}

#hasil{
margin-top:15px;
font-size:1.2rem;
font-weight:500;
}

/* ===== RPG GAME ===== */

.game-page{
padding:40px 20px;
display:flex;
justify-content:center;
}

.game-area{
text-align:center;
width:100%;
}

.game-title{
font-size:30px;
margin-bottom:25px;
}

.rpg-frame-wrapper{
width:816px;
height:624px;
margin:auto;
background:#000;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.rpg-frame{
width:816px;
height:624px;
border:none;
}

/* ===== DARK MODE ===== */

#toggleDark{
background:none;
border:1px solid #fff;
color:#fff;
padding:5px 10px;
cursor:pointer;
font-size:14px;
}

#toggleDark:hover{opacity:.8}

body.dark{
background:#121212;
color:#e0e0e0;
}

body.dark header,
body.dark footer,
body.dark .card,
body.dark .box{
background:#1e1e1e;
}

body.dark a{color:#fff}

body.dark .dropdown-content{
background:#1e1e1e !important;
}

body.dark .dropdown-content a{
color:#fff !important;
}

body.dark .dropdown-content a:hover{
background:#333 !important;
}

/* ===== SYSTEM DARK ===== */

@media (prefers-color-scheme: dark){
body{
background:#121212;
color:#f1f1f1;
}
}

/* ===== RESPONSIVE ===== */

@media (max-width:768px){

header{
flex-direction:column;
align-items:flex-start;
padding:10px 20px;
}

/* NAV MENU */
header nav{
width:100%;
display:flex;
flex-direction:column;
margin-top:10px;
}

header nav a,
header .dropdown > a{
display:block;
width:100%;
margin:5px 0;
}

/* DROPDOWN */
.dropdown{
width:100%;
}

.dropdown-content{
position:static;
opacity:1;
transform:none;
pointer-events:auto;
width:100%;
background:#1976d2;
box-shadow:none;
border-radius:6px;
margin:5px 0 10px;
padding-left:15px;
}

.dropdown-content a{
display:block;
color:#fff;
padding:8px 10px;
margin:3px 0;
border-radius:4px;
}

.dropdown-content a:hover{
background:#0d47a1;
}

/* HERO */
#hero{padding:50px 15px}

.intro{font-size:1.3rem}

.foto-profil{
width:100px;
height:100px;
}

.card{
margin:20px 15px;
padding:20px;
}

footer{
padding:12px;
font-size:.95rem;
}

}


/* ===== MOBILE ===== */

@media (max-width:480px){

header{padding:10px 15px}

#hero{padding:40px 10px}

.intro{font-size:1.15rem}

.foto-profil{
width:90px;
height:90px;
}

.card{
margin:15px 10px;
padding:18px;
}

.box{font-size:.9rem}

footer{
padding:10px;
font-size:.9rem;
}

}

/* ===== Fullscreen RPG Maker ===== */

.rpg-frame-wrapper {
    position: relative; /* Penting agar tombol bisa absolute di dalam wrapper */
    display: inline-block; /* Sesuaikan dengan layout Anda */
}

.fullscreen-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
    transition: background 0.3s;
}

.fullscreen-btn:hover {
    background-color: rgba(0, 0, 0, 1);
}