/* --- [STYLE.CSS - HALAMAN MENU UTAMA V3.1 (FIXED)] --- */
/* [FIX] Import font disclaimer, fix judul 1 baris, tambah style disclaimer */

/* --- Import Font --- */
/* [DIUBAH] Tambah 'Caveat' untuk disclaimer, font judul 800 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700;800&family=Caveat:wght@700&display=swap');

/* =========================================
--- 1. DEFINISI VARIABEL WARNA (TEMA) ---
=========================================
*/
:root {
    --font-latin: 'Noto Sans', sans-serif;
    --font-disclaimer: 'Caveat', cursive; /* [BARU] Definisikan font disclaimer */
    --warna-bg: #f4f7f6;
    --warna-container-bg: #ffffff;
    --warna-teks-utama: #222;
    --warna-teks-sekunder: #555;
    --warna-teks-judul: #006400;
    --warna-border: #ddd;
    --warna-bayangan: rgba(0,0,0,0.07);
    --warna-bayangan-hover: rgba(0, 70, 0, 0.15);
    --warna-pilihan-bg: #ffffff;
    --warna-pilihan-hover: #ffffff;
    --warna-disclaimer-bg: #fffbe8; /* [BARU] Warna kuning pucat */
    --warna-disclaimer-border: #e8dcb3;
}
html[data-theme="dark"] {
    --warna-bg: #121212;
    --warna-container-bg: #1e1e1e;
    --warna-teks-utama: #f1f1f1;
    --warna-teks-sekunder: #aaa;
    --warna-teks-judul: #38c172;
    --warna-border: #444;
    --warna-bayangan: rgba(0,0,0,0.2);
    --warna-bayangan-hover: rgba(56, 193, 114, 0.2);
    --warna-pilihan-bg: #2a2a2a;
    --warna-pilihan-hover: #2a2a2a;
    --warna-disclaimer-bg: #2b2a21; /* [BARU] Warna kuning gelap */
    --warna-disclaimer-border: #5a5849;
}

/* =========================================
--- 2. KEYFRAMES ANIMASI MASUK ---
(Tidak berubah)
=========================================
*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
--- 3. STYLE DASAR (BODY, CONTAINER) ---
(Tidak berubah)
=========================================
*/
body {
    font-family: var(--font-latin);
    background-color: var(--warna-bg);
    color: var(--warna-teks-utama);
    display: flex;
    flex-direction: column; /* [BARU] Susun elemen ke bawah */
    align-items: center;     /* [DIUBAH] Rata tengah (horizontal) */
    justify-content: flex-start; /* [DIUBAH] Mulai dari atas (vertikal) */
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}
.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 25px;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    box-sizing: border-box; /* [BARU] Perbaikan untuk HP */
}

/* =========================================
--- 4. STYLE NAVIGASI & JUDUL ---
(Tidak berubah)
=========================================
*/
.header-nav { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
.theme-toggle {
    background: var(--warna-container-bg);
    border: 2px solid var(--warna-border);
    box-shadow: 0 4px 10px var(--warna-bayangan);
    color: var(--warna-teks-sekunder);
    font-size: 1.2em;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.1) rotate(15deg); border-color: var(--warna-teks-judul); }
h1 { color: var(--warna-teks-judul); margin-top: 0; margin-bottom: 10px; font-weight: 800; font-size: 2.2em; }
.deskripsi-singkat { font-size: 1.1em; color: var(--warna-teks-sekunder); margin-top: 0; margin-bottom: 40px; }

/* =========================================
--- 5. STYLE KATEGORI ---
(Tidak berubah)
=========================================
*/
.kategori-judul {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--warna-teks-judul);
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--warna-teks-judul);
    padding-bottom: 10px;
}
.pemisah-kategori { border: none; border-top: 2px dashed var(--warna-border); margin-top: 40px; margin-bottom: 30px; }

/* =========================================
--- 6. STYLE DAFTAR GAME (GAME CARD) ---
=========================================
*/
.game-list {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    text-align: left;
}
.game-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex: 1 1 240px;
    perspective: 1000px;
}
.game-card {
    background-color: var(--warna-pilihan-bg);
    border: 1px solid var(--warna-border);
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 6px 18px var(--warna-bayangan);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}
/* =========================================
--- 6b. [FIXED] EFEK STAGGER (PAKAI ID) ---
=========================================
*/

/* Kategori 1 (Qur'an) */
#game-list-quran .game-card-link:nth-child(1) .game-card { animation-delay: 0.1s; }
#game-list-quran .game-card-link:nth-child(2) .game-card { animation-delay: 0.2s; }
#game-list-quran .game-card-link:nth-child(3) .game-card { animation-delay: 0.3s; }

/* Kategori 2 (Hadits) */
#game-list-hadits .game-card-link:nth-child(1) .game-card { animation-delay: 0.4s; }
#game-list-hadits .game-card-link:nth-child(2) .game-card { animation-delay: 0.5s; }
#game-list-hadits .game-card-link:nth-child(3) .game-card { animation-delay: 0.6s; }
#game-list-hadits .game-card-link:nth-child(4) .game-card { animation-delay: 0.7s; }

/* Kategori 3 (Soon) */
#game-list-soon .game-card-link:nth-child(1) .game-card { animation-delay: 0.8s; }


/* Efek Hover 3D (Tidak berubah) */
.game-card:not(.soon):hover {
    border-color: var(--warna-teks-judul);
    transform: translateY(-10px) rotateX(4deg);
    box-shadow: 0 12px 30px var(--warna-bayangan-hover);
}

/* Teks di dalam kartu */
.game-card h3 {
    /* [DIUBAH] Kecilkan sedikit agar 1 baris */
    font-size: 1.2em; 
    font-weight: 700;
    color: var(--warna-teks-utama);
    margin-top: 0;
    margin-bottom: 10px;
}
.game-card p {
    font-size: 1em;
    color: var(--warna-teks-sekunder);
    margin-bottom: 0;
    line-height: 1.5;
}
/* Kartu "Soon" (Tidak berubah) */
.game-card.soon {
    background-color: var(--warna-bg);
    border-style: dashed;
    opacity: 0.7;
    text-align: center;
    box-shadow: none;
}
.game-card.soon h3 { color: var(--warna-teks-sekunder); }

/* =========================================
--- 7. [BARU] STYLE DISCLAIMER ---
=========================================
*/
.disclaimer {
    margin-top: 50px; /* Jarak dari game "Soon" */
    padding: 25px;
    background-color: var(--warna-disclaimer-bg);
    border: 1px solid var(--warna-disclaimer-border);
    border-radius: 10px;
    text-align: center;

    /* Animasi masuk untuk disclaimer */
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.8s; /* Muncul terakhir */
}
.disclaimer p {
    margin: 0;
    color: var(--warna-teks-sekunder);
    font-weight: 700;
    font-family: var(--font-latin); /* Font biasa untuk paragraf */
    font-size: 1em;
    line-height: 1.6;
}
.disclaimer .disclaimer-title {
    /* [BARU] Pakai font 'Caveat' di sini */
    font-family: var(--font-disclaimer);
    font-size: 2em; /* Ukuran font tulisan tangan */
    font-weight: 700;
    color: var(--warna-teks-judul); /* Warna hijau */
    margin-bottom: 15px;
}
.disclaimer .disclaimer-dalil {
    font-family: var(--font-latin);
    font-style: italic;
    font-size: 0.9em;
    color: var(--warna-teks-sekunder);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--warna-disclaimer-border);
}
.disclaimer .disclaimer-dalil strong {
    display: block;
    margin-top: 5px;
    font-style: normal;
    color: var(--warna-teks-utama);
}

/* =========================================
--- 8. [REVISI FINAL] LAYOUT RESPONSIVE (FIX HP) ---
=========================================
*/

/*
 * DEFAULT (MOBILE):
 * Kita tidak perlu style apa-apa di sini.
 * Style .game-card-link { flex: 1 1 240px; } yang asli (di atas)
 * akan otomatis membuat 1 kartu per baris di layar HP.
 * Ini yang Antum inginkan ("itemnya per baris").
 */

/* [BARU] Terapkan layout 1x3 dan 2x2 HANYA di layar besar */
@media (min-width: 600px) {

    /* Atur Qur'an (3 Kartu) agar 1 Baris di DESKTOP */
    #game-list-quran .game-card-link {
        flex-basis: 30%;
    }

    /* Atur Hadits (4 Kartu) agar 2 Baris (2x2) di DESKTOP */
    #game-list-hadits .game-card-link {
        flex-basis: 48%;
        max-width: calc(50% - 13px);
    }
}

/* =========================================
--- 9. [BARU] STYLE FOOTER TAUTAN ---
=========================================
*/
.site-footer {
    width: 100%;
    max-width: 800px; /* Samakan dengan lebar container */
    margin: 30px auto 20px auto; /* Jarak atas & bawah */
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}
.site-footer p {
    font-size: 0.9em;
    color: var(--warna-teks-sekunder); /* Warna abu-abu */
    margin: 0;
}
.site-footer a {
    color: var(--warna-teks-judul); /* Warna hijau (atau hijau terang di dark mode) */
    font-weight: 700;
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}