/* --- Pengaturan Global --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka One', cursive, sans-serif; /* Menggunakan font Fredoka One */
    color: white;
    overflow: hidden; /* Mencegah scroll */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

/*universal */
   body.page-awal{
    background-color: #153c15;
    background: url('assets/exso2.png') no-repeat center center fixed;
    background-size: cover;
   }
   body.page-menu{
    background: url('assets/pilihan_tidur.png') no-repeat center center fixed;
    background-size: cover;
   }
   body.page-menu-utama {
    background: url('assets/menu_tidur.png') no-repeat center center fixed;
    background-size: cover;
   }
   body.page-peta {
    background: url('assets/peta_new4.png') no-repeat center center fixed;
    background-size: cover;
   }
   body.page-materi {
    /* Asumsi Anda punya gambar bg di folder 'images' */
    /* background: url('images/bg_hutan.jpg') no-repeat center center fixed; */
    background-color: #153c15;
    /* Jika belum punya gambar, pakai warna hijau tua saja dulu: */
    background: url('assets/exso_newbg.png') no-repeat center center fixed;
    background-size: cover;
}

/* --- Tombol-Tombol --- */
.tombol-utama {
    display: block;
    width: 300px; /* Lebar tombol */
    padding: 20px;
    margin: 20px;
    
    font-size: 25px;
    font-weight: bold;
    color: #3e3e3e; /* Warna teks tombol */
    text-decoration: none;
    text-shadow: 1px 1px 1px white;
    background-color: #f7b731; /* Kuning-Oranye */
    border: 3px solid white;
    border-radius: 15px;
    box-shadow: 0 6px 0 #c28e1a, /* Efek 3D bawah */
                0 8px 10px rgba(0,0,0,0.4); /* Bayangan */
    
    transition: all 0.1s ease-out;
}

.tombol-utama:hover {
    transform: scale(1.05); /* Sedikit membesar saat disentuh */
    cursor: pointer;
}

.tombol-utama:active {
    /* Efek saat tombol ditekan */
    transform: translateY(4px);
    box-shadow: 0 2px 0 #c28e1a,
                0 4px 5px rgba(0,0,0,0.4);
}



.tombol-start {
    width: 150px;
    font-size: 20px;
}

/* --- Halaman Menu (menu.php) --- */
.tombol-menu {
    /* Tidak perlu style khusus, sudah diatur oleh .tombol-utama */
}

/* --- Tombol Ikon (Home, Info, Setting) --- */
.tombol-ikon {
    transform: scale(1.05);
    cursor: pointer;
    position: absolute; /* Posisi tetap di layar */
    font-size: 30px;
    padding: 10px;
    background-color: rgb(0, 85, 24);
    color: #333;
    border-radius: 50%; /* Membuatnya bulat */
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid #f7b731;
}

.tombol-ikon:hover {
    background-color: rgb(0, 85, 24);
}

#tombol-kembali {
    top: 20px;
    left: 20px;
}

#tombol-home {
    top: 20px;
    left: 20px;
}

#tombol-info {
    top: 20px;
    right: 20px;
}

#tombol-setting {
    top: 90px; /* Di bawah tombol info */
    right: 20px;
}
/* --- Halaman Peta (peta.php) --- */

.page-peta {
    /* Latar belakang hijau jika gambar peta gagal dimuat */
    background-color: #0c3b0c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-peta {
    position: relative; /* Penting! Agar link-kab bisa diposisikan */
    
    /* Atur ukuran ini agar sesuai dengan rasio gambar peta Anda */
    /* Misalnya, jika gambar Anda 1280x720 pixel */
    width: 1280px; 
    height: 720px;
    max-width: 95%; /* Agar tetap responsif */
    max-height: 95vh;

    /* PENTING: Ganti 'peta_banten.png' dengan nama file gambar peta Anda (Gambar 4) */
    /* Pastikan gambar peta ada di folder /images/ */
    background: url('images/peta_banten.png') no-repeat center center;
    background-size: contain; /* Peta akan pas di dalam container */
}

.link-kab {
    position: absolute; /* Kunci untuk memposisikan link */
    
    /* Tampilan tombol kayu */
    background: #8B4513; /* Warna kayu */
    color: white;
    padding: 6px 8px;
    border: 10px solid #D2691E; /* Coklat muda */
    border-radius: 8px;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out;
    text-align: center;
}



.link-serang {
    position: absolute; /* Kunci untuk memposisikan link */
    
    /* Tampilan tombol kayu */
    color: white;
    padding: 8px 10px;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.2s ease-out;
}

#link-lebak {
    top: 60%;  /* 55% dari atas container */
    left: 27%; /* 10% dari kiri container */
    transform: rotate(-4deg);
    width: 150px;
    padding: 6px;
}

#link-serang {
    top: 36%;
    left: 49%;
    transform: rotate(-3deg);
    width: 100px;
    padding: 4px;
}

#link-tangerang {
    top: 72%;
    left: 54%;
    width: 140px;
    padding: 6px;
}

#link-pandeglang {
    top: 19%;
    left: 68%;
    width: 190px;
    padding: 5px;
    transform: rotate(-3deg);
}

#link-lebak:hover {
    transform: rotate(3deg) scale(1.1); 
    cursor: pointer;
}

#link-serang:hover {
    transform: rotate(-2deg) scale(1.1); 
    cursor: pointer;
}

#link-tangerang:hover {
    transform: scale(1.1);
    cursor: pointer;
}

#link-pandeglang:hover {
    transform: rotate(3deg) scale(1.1);
    cursor: pointer;
}

/* Ulangi untuk link 'KEMBALI' jika ada */
#link-kembali:hover { /* (Asumsi ID-nya 'link-kembali') */
    transform: rotate(-2deg) scale(1.1); /* Sesuaikan kemiringannya */
    cursor: pointer;
}
/* --- Halaman Menu Utama (menu_utama.php) --- */

.page-menu-utama {
    background: none !important;
}

.judul-sociology {
    font-size: 70px; /* Ukuran font judul */
    line-height: 1.1; /* Jarak antar baris */
    color: #f7b731; /* Warna judul kuning */
    text-shadow: 4px 4px 0px white, /* Stroke putih */
                 8px 8px 0px #c28a1a, /* Bayangan 3D */
                 10px 10px 8px rgba(0,0,0,0.5); /* Bayangan gelap */
    margin-bottom: 25px;
}

.tombol-menu-tunggal {
    width: 280px; /* Lebar tombol MENU */
    font-size: 60px;
    margin-top: 250px;
}
/* --- Halaman Materi & Kuis (materi.php) --- */

.page-materi {
    /* Menggunakan background yang sama */
    background: url('images/bg_hutan.jpg') no-repeat center center fixed;
    background-color: #0c3b0c;
    background-size: cover;
    /* Aktifkan kembali scroll jika materi panjang */
    overflow: auto; 
    padding: 40px 20px;
}

.container-materi {
    max-width: 730px;
    margin: 0 auto; /* Tengah secara horizontal */
    background-color: rgba(0, 0, 0, 0.7); /* Latar belakang gelap transparan */
    padding: 30px;
    border-radius: 20px;
    border: 3px solid #f7b731;
    text-align: center;
}

.container-materi h1,
.container-materi h2 {
    color: #f7b731; /* Kuning-Oranye */
    text-shadow: 2px 2px 2px #000;
}

.container-materi h1 {
    font-size: 42px;
    text-align: center;
}

.container-materi h2 {
    font-size: 30px;
    border-bottom: 2px solid #c28e1a;
    padding-bottom: 10px;
}

.container-materi p {
    font-family: Arial, sans-serif; /* Font biasa agar mudah dibaca */
    font-size: 18px;
    line-height: 1.6;
    color: #f0f0f0; /* Putih keabu-abuan */
}

/* --- Styling Kuis --- */
.pertanyaan-kuis {
    margin-bottom: 25px;
}

.pilihan-jawaban {
    display: block;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    margin-bottom: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.pilihan-jawaban:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.pilihan-jawaban input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2); /* Membuat tombol radio sedikit lebih besar */
}

/* Ganti ikon Home 🏠 menjadi ikon Peta 🗺️ khusus di halaman ini */
#tombol-home {
    left: auto; /* Hapus posisi kiri */
    right: 20px; /* Pindahkan ke kanan */
    top: 20px;
}
/* --- Halaman Hasil Kuis (hasil_kuis.php) --- */

.hasil-skor {
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.hasil-skor p {
    font-size: 24px;
    color: #f0f0f0;
    margin: 10px 0;
}

.hasil-skor h2 {
    font-size: 40px;
    color: white;
    margin: 0 0 20px 0;
}

.skor-akhir {
    font-size: 90px;
    color: #f7b731; /* Kuning */
    text-shadow: 4px 4px 0px white;
    margin: 10px 0;
}

/* Membuat tombol "Kembali ke Peta" di tengah */
.container-materi .tombol-utama {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* --- Halaman Pengembang (pengembang.php) --- */

.daftar-pengembang {
    list-style: none; /* Hilangkan bulatan/angka */
    padding: 0;
    margin-top: 20px;
}

.daftar-pengembang li {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #f0f0f0;
    text-align: center;
    border-left: 5px solid #f7b731; /* Aksen kuning */
}
/* --- Halaman Evaluasi (evaluasi.php) --- */

.form-evaluasi {
    margin-top: 20px;
}

.form-grup {
    margin-bottom: 20px;
}

.form-grup label {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.form-input,
.form-textarea {
    width: 95%; /* Lebar input box */
    padding: 12px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 10px;
}

.form-textarea {
    width: 95%; /*TextArea lebarnya beda, jadi samakan lagi*/
    resize: vertical; /* Izinkan user mengubah tinggi textarea */
}

/* Tombol Kirim di tengah */
.form-evaluasi .tombol-utama {
    display: block;
    margin: 20px auto 0 auto;
}

/* Pesan Sukses */
.pesan-sukses {
    text-align: center;
    padding: 30px;
}

.pesan-sukses h2 {
    color: #f7b731; /* Kuning */
    font-size: 28px;
}

/* --- Halaman Game (game.php) --- */

.game-board {
    display: flex; /* Membuat elemen di dalamnya sejajar (horizontal) */
    justify-content: space-around; /* Memberi spasi di antara dua kolom */
    width: 100%;
    gap: 20px; /* Jarak antar kolom */
    padding: 20px 0;
}

.word-column {
    width: 45%; /* Setiap kolom memakan 45% lebar container */
    display: flex;
    flex-direction: column; /* Tombol di dalam kolom akan tersusun ke bawah */
    gap: 15px; /* Jarak antar tombol di dalam kolom */
}

.word-button {
    width: 100%;
    min-height: 60px;  
    padding: 15px;     
    white-space: normal; 

    font-family: Arial, sans-serif;
    font-size: 18px; 
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px #aaa;
}

.word-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px #aaa;
}

/* Style untuk tombol yang sedang DIPILIH */
.word-button.selected {
    background-color: #a7d7f9; /* Biru muda */
    border-color: #3498db;
}

/* Style untuk tombol yang berhasil DICOCOKKAN */
.word-button.matched {
    visibility: hidden; /* Sembunyikan tombolnya */
    cursor: default;
}

/* Style untuk pasangan yang SALAH */
.word-button.wrong {
    animation: shake 0.5s;
    background-color: #e74c3c; /* Merah */
    border-color: #c0392b;
}

/* Animasi Gemetar (Shake) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.game-status {
    text-align: center;
    margin-top: 20px;
    font-size: 28px;
    color: #f7b731;
}

/* --- CSS untuk Timer dan Progress Bar --- */

.game-stats-bar {
    display: flex; /* Bikin bar dan timer sejajar */
    align-items: center;
    gap: 15px; /* Jarak antara bar dan timer */
    margin-bottom: 15px;
}

#progress-bar-container {
    flex-grow: 1; /* Bikin bar-nya memakan sisa ruang */
    height: 20px;
    background-color: #f0f0f0; /* Warna trek (abu-abu) */
    border-radius: 10px;
    overflow: hidden; /* Agar bar merah tidak keluar */
    border: 2px solid #ccc;
}

#progress-bar {
    height: 100%;
    width: 100%; /* Mulai dari 100% */
    background-color: #e74c3c; /* Warna merah */
    border-radius: 8px;

    /* Transisi agar gerakan mundurnya mulus */
    transition: width 1s linear; 
}

.timer-text {
    font-size: 28px;
    font-weight: bold;
    color: #f7b731; /* Warna emas */
}

/* --- CSS untuk Tombol Replay --- */

#replay-button {
    position: relative; /* Menimpa 'position: absolute' dari .tombol-ikon */
    display: none; /* Sembunyi sampai game berakhir */

    /* Menengahkan tombol */
    margin-top: 20px; 

    /* Menghapus override posisi */
    top: auto;
    left: auto;
    right: auto;

    /* Membuatnya sedikit lebih besar */
    font-size: 35px;
    padding: 12px;
}

/* --- CSS untuk Tombol Non-aktif (Disabled) --- */

.tombol-utama.disabled {
    background-color: #999; /* Warna abu-abu */
    color: #ccc;
    box-shadow: 0 6px 0 #666; /* Bayangan lebih gelap */
    cursor: not-allowed; /* Ubah kursor menjadi 'dilarang' */
}

.tombol-utama.disabled:hover {
    transform: none; /* Jangan membesar saat disentuh */
}

.tombol-utama.disabled:active {
    transform: none; /* Jangan ada efek klik */
    box-shadow: 0 6px 0 #666;
}

/* Penataan untuk halaman detail */
.pilihan-menu {
    display: flex;
    justify-content: space-around; /* Tombol Modul dan Kuis akan bersebelahan */
    margin-top: 30px;
}

/* --- Halaman Koreksi Kuis (hasil_kuis.php) --- */

.koreksi-container {
    margin-top: 20px;
    text-align: left; /* Override 'text-align: center' dari container */
}

.koreksi-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    border-left: 5px solid #f7b731; /* Garis kuning di kiri */
}

.koreksi-pertanyaan {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #f0f0f0; /* Putih keabuan */
    margin-top: 0;
}

.jawaban-benar {
    font-family: Arial, sans-serif;
    color: #2ecc71; /* Hijau terang */
    font-weight: bold;
}

.jawaban-salah {
    font-family: Arial, sans-serif;
    color: #e74c3c; /* Merah */
    font-weight: bold;
}

.jawaban-koreksi {
    font-family: Arial, sans-serif;
    color: #2ecc71; /* Hijau terang (untuk jawaban benar) */
}

/* --- CSS UNTUK MODAL PANDUAN --- */

.modal-overlay {
    position: fixed; /* Menutupi seluruh layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Latar gelap transparan */

    /* Sembunyikan modal secara default */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Tengahkan konten modal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Pastikan di atas segalanya */
}

/* :target adalah trik CSS untuk menampilkan modal 
   saat link #modal-panduan di-klik */
.modal-overlay:target {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    position: relative;
    padding: 10px;
    border-radius: 15px;
    border: 5px solid #f7b731; /* Border emas */

    /* Ukuran gambar */
    width: 90%;
    max-width: 900px; /* Batas lebar maksimum */
}

.modal-content img {
    width: 100%; /* Gambar mengisi konten modal */
    display: block;
    border-radius: 10px; /* Sudut gambar sedikit melengkung */
}

/* Tombol Close (x) */
.modal-close {
    position: absolute;
    top: -20px; /* Posisikan di luar kotak */
    right: -15px;

    font-size: 35px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    background-color: #e74c3c; /* Merah */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.modal-close:hover {
    background-color: #c0392b; /* Merah lebih gelap */
}

/* --- CSS untuk Halaman Pengembang (Foto) --- */
.foto-pengembang {
    width: 100%; 
    max-width: 800px; 
    border-radius: 10px;
    margin-top: 20px;
    border: 3px solid #f7b731; 
}

.daftar-pengembang {
    display: none; /* Sembunyikan style lama jika masih ada */
}

/* --- Perbaikan Rata Kiri untuk Halaman Kuis --- */
.konten-kuis {
    text-align: left; 
}

/* --- Menambah Jarak Antar Pertanyaan --- */
.pertanyaan-kuis {
    margin-bottom: 40px; 
                         
}

/* --- CSS UNTUK VIDEO LATAR BELAKANG --- */

  

  /* 🔹 Video background full layar */
.video-background {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    object-fit: contain; /* tampil utuh tanpa crop */
    background-color: black; /* area kosong diisi warna hitam */
    z-index: -1;
  }

  /* --- CSS UNTUK TOMBOL TTS GLOBAL --- */
#tts-global-container {
    position: fixed; /* Membuatnya mengambang */
    bottom: 20px;
    right: 20px;
    z-index: 1001; /* Pastikan di atas modal panduan */
    display: none;
}

/* Kita gunakan style .tombol-ikon yang sudah ada, tapi kita atur posisinya */
#tts-global-container .tombol-ikon {
    position: static; /* Hapus 'absolute' dari .tombol-ikon */
    display: block;
    margin-top: 10px;

    /* Atur ulang warna agar lebih terlihat */
    background-color: #005518; /* Emas */
    color: #333; /* Ikon gelap */
    border: 3px solid white;
}

#tts-global-container .tombol-ikon:hover {
    background-color: #005518;
}

#tts-global-stop {
    background-color: #e74c3c; /* Merah */
    color: white;
}
#tts-global-stop:hover {
    background-color: #c0392b;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* supaya tidak bisa di-scroll */
    font-family: 'Fredoka One', sans-serif;
  }
  
  /* 🔹 Video background full layar */
  .video-background {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    object-fit: cover; /* isi penuh layar */
    object-position: center center; /* fokus tengah */
    z-index: -1;
    background-color: black;
  }

  /* --- Posisi Tombol Musik --- */
#tombol-musik {
    top: 90px; /* Di bawah tombol Info (20px) dan Setting (90px) agak ramai */
    /* Mari kita taruh di sebelah KIRI tombol Info saja agar rapi */
    top: 20px;
    right: 140px; /* Geser ke kiri dari tombol Info */
}

/* Khusus di HP (Layar kecil), sesuaikan jika perlu */
@media (max-width: 768px) {
    #tombol-musik {
        right: 80px; 
        top: 80px; /* Sesuaikan agar tidak menumpuk */
    }
}

/* --- CSS Modal Pengaturan --- */
.pengaturan-box {
    background-color: #0c3b0c; /* Hijau tua */
    color: white;
    text-align: center;
    border: 4px solid #f7b731;
    width: 90%;
    max-width: 400px;
}

.pengaturan-box h2 {
    color: #f7b731;
    margin-top: 0;
}

.slider-group {
    margin: 20px 0;
    text-align: left;
    padding: 0 20px;
}

.slider-group label {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Gaya Slider (Range Input) */
input[type=range] {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    -webkit-appearance: none; /* Hapus gaya default browser */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f7b731; /* Emas */
    cursor: pointer;
}