:root {
    /* DARK MODE (Default) */
    --bg-utama: #050505;
    --bg-card: #111111;
    --teks-utama: #ffffff;
    --teks-deskripsi: rgba(255, 255, 255, 0.8);
    --teks-sekunder: #aaaaaa;
    --neon-biru: #00f3ff;
    --neon-pink: #ff00ff;
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-neon: 0 4px 15px rgba(0,0,0,0.5);
}

[data-theme="light"] {
    /* LIGHT MODE */
    --bg-utama: #f0f2f5;
    --bg-card: #ffffff;
    --teks-utama: #121212;
    --teks-deskripsi: #444444;
    --teks-sekunder: #666666;
    --neon-biru: #0066cc;
    --neon-pink: #cc00cc;
    --glass-border: rgba(0, 0, 0, 0.1);
    --shadow-neon: 0 4px 15px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: var(--bg-utama); color: var(--teks-utama); transition: background 0.4s, color 0.4s; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }

/* NAVBAR */
header { 
    background: var(--bg-utama); 
    border-bottom: 1px solid var(--glass-border); 
    padding: 15px 5%; 
    position: sticky; 
    top: 0; 
    left: 0;
    width: 100%; 
    z-index: 1000; 
    backdrop-filter: blur(10px); 
}
nav { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo-fuck { font-weight: 900; font-size: 30px; letter-spacing: 2px; text-shadow: 0 0 10px var(--neon-biru); transition: 0.3s; }
.logo-fuck:hover { text-shadow: 0 0 20px var(--neon-pink); }
.menu { display: flex; align-items: center; }
.menu a { margin: 0 15px; font-weight: 600; font-size: 14px; color: var(--teks-sekunder); transition: 0.3s; }
.menu a:hover { color: var(--neon-biru); }

/* HERO */
.hero { padding: 100px 5%; text-align: center; }
.hero-description { max-width: 700px; margin: 0 auto 40px; line-height: 1.8; font-size: 1.1rem; color: var(--teks-deskripsi); }

/* CARDS */
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 50px 5%; }
.card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 15px; overflow: hidden; transition: 0.4s; box-shadow: var(--shadow-neon); display: flex; flex-direction: column; align-items: center; text-align: center; }
.card:hover { transform: translateY(-10px); border-color: var(--neon-biru); }
.card-img { width: 100%; height: 230px; object-fit: cover; border-bottom: 1px solid var(--glass-border); }
.card-body { padding: 25px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; }

/* BUTTONS */
.btn-submit, .btn-order, .btn-login, .btn-register, [class*="btn-"] { padding: 12px 20px; border: 1px solid var(--neon-biru); color: var(--neon-biru); font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.3s; display: inline-block; background: transparent; text-transform: uppercase; text-align: center; width: auto; }
.btn-order:hover, .btn-submit:hover, .btn-login:hover, .btn-register:hover, [class*="btn-"]:hover { background: var(--neon-biru); color: #fff; box-shadow: 0 0 15px var(--neon-biru); }

/* PROFIL & FORM */
.img-profile-big { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--neon-biru); margin-bottom: 20px; }
.table-container { overflow-x: auto; width: 100%; } 
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; min-width: 500px; }
th { text-align: left; padding: 15px; color: var(--neon-pink); border-bottom: 2px solid var(--neon-pink); }
td { padding: 15px; border-bottom: 1px solid var(--glass-border); color: var(--teks-utama); }
input, textarea, select { width: 100%; padding: 12px; margin: 10px 0; background: var(--bg-utama); border: 1px solid var(--glass-border); color: var(--teks-utama); border-radius: 8px; font-size: 14px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--neon-biru); }

/* FOOTER GLOBAL */
footer { 
    text-align: center !important; 
    padding: 25px 15px; 
    width: 100%; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
footer p, footer span, footer div { text-align: center !important; margin: 0 auto; }


/* ========================================================================= */
/* KODE RESPONSIVE KHUSUS MOBILE (MAKSIMAL LEBAR 768px)                      */
/* ========================================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. HEADER & NAVBAR */
    header { padding: 15px 5%; width: 100%; }
    nav { flex-wrap: nowrap; } 
    .logo-fuck { font-size: 18px; letter-spacing: 1px; }
    .menu { display: none; } 
    
    .nav-actions { 
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        gap: 6px !important; 
        align-items: center; 
    }
    #theme-toggle { font-size: 18px; margin-right: 0; padding: 0; }
    
    .nav-actions .btn-login, .nav-actions .btn-register {
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        margin-top: 0 !important;
        letter-spacing: 0;
        white-space: nowrap !important; 
        border-width: 1px;
    }

    /* 2. HERO SECTION */
    .hero { padding: 60px 5%; }
    .hero h1 { font-size: 26px !important; margin-bottom: 10px; } 
    .hero-description { font-size: 0.9rem; line-height: 1.5; }

    /* 3. KOTAK CARD */
    .container, .game-grid { 
        grid-template-columns: 1fr !important; 
        gap: 20px; 
        padding: 20px 5%; 
    }
    
    .card { 
        padding: 20px; 
        min-height: auto; 
        align-items: center !important; /* Paksa semua isi card ke tengah */
        text-align: center !important;
    }

    .card img, .card-img { 
        max-height: 80px !important; 
        width: auto;
        margin: 0 auto 15px auto;
        object-fit: contain;
        display: block;
    }

    .card h1, .card h2, .card h3 { 
        font-size: 18px !important; 
        word-wrap: break-word; 
        line-height: 1.3;
        margin-bottom: 10px;
        text-align: center;
        width: 100%;
    } 
    
    .card p, .card-body p {
        font-size: 12px;
        line-height: 1.5;
        color: var(--teks-sekunder);
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }

    /* 4. TOMBOL DALAM KOTAK (DIPAKSA KE TENGAH) */
    .card [class*="btn-"], .btn-submit, .btn-order { 
        width: 100% !important; 
        max-width: 250px !important; /* Tombol tidak melar selebar layar penuh */
        padding: 12px 15px; 
        font-size: 12px;
        margin: auto auto 0 auto !important; /* Mengunci tombol tepat di tengah */
        display: block !important;
        text-align: center !important;
    }

    /* 5. FORM & TABEL */
    .img-profile-big { width: 100px; height: 100px; border-width: 3px; }
    input, textarea, select { padding: 12px; font-size: 16px; } 
    th, td { padding: 8px; font-size: 11px; }
}

/* ========================================================================= */
/* PENYESUAIAN UNTUK HP SANGAT KECIL (Contoh: iPhone SE)                     */
/* ========================================================================= */
@media screen and (max-width: 380px) {
    .logo-fuck { font-size: 15px; }
    .nav-actions .btn-login, .nav-actions .btn-register { padding: 5px 8px !important; font-size: 9px !important; }
    .hero h1 { font-size: 22px !important; }
    .card h1, .card h2, .card h3 { font-size: 16px !important; } 
    .card p { font-size: 11px; }
}