/* Menggunakan variabel warna Finris/Shield Papua */
:root {
    --finris-base: #82453F;
    /* Coklat Tua */
    --finris-primary: #D4B495;
    /* Krem Muda */
    --finris-black: #522D28;
}

.academy-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 10px 30px 10px 30px;
    background-color: var(--finris-white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    min-height: 600px;
}

.step-content {
    transition: opacity 0.5s ease-in-out;
    display: none;
    /* Default tersembunyi */
    padding: 20px;
}

.step-content.active {
    display: block;
    opacity: 1;
}

.btn-academy {
    background-color: var(--finris-base);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-academy:hover {
    background-color: var(--finris-black);
    color: white;
}

/* Styling Form Input */
.academy-form input[type="text"],
.academy-form input[type="email"],
.academy-form input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--finris-gray);
    border-radius: 4px;
}

/* Styling Kuis yang Direvisi */
.quiz-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

/* Kiri: Pertanyaan dan Pilihan */
.quiz-left {
    /* Revisi: Mengurangi lebar Quiz-Left */
    flex: 3;
    /* Mengambil 60% - 65% ruang */
    /* Menambahkan padding agar konten tidak terlalu rapat */
    padding-right: 15px;
}

/* Kanan: Foto Pertanyaan (500x500) */
.quiz-right {
    /* Revisi: Memberi lebar tetap atau flex yang lebih kecil */
    flex: 2;
    /* Mengambil 35% - 40% ruang */
    max-width: 400px;
    /* Batas lebar agar tidak terlalu besar */

    /* Mengatur konten agar gambar terpusat vertikal/horizontal di dalam box */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Menjaga border/box tetap rapi */
    border-radius: 8px;
    background-color: #f9f9f9;
    /* Warna latar belakang box gambar */
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.quiz-right img {
    /* Mengelola gambar persegi (500x500) */
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Memastikan gambar mengisi ruang dengan baik tanpa keluar batas */
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.question-options label {
    display: block;
    padding: 10px 15px;
    margin-bottom: 8px;
    border: 1px solid var(--finris-primary);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--finris-black);
}

.question-options label:hover {
    background-color: var(--finris-primary);
    color: white;
}

.question-options input[type="radio"] {
    margin-right: 10px;
}

/* Styling untuk mode Fullscreen - Wajib ditambahkan */
#step-3:fullscreen {
    background-color: white !important;
    /* Standar W3C */
    width: 100vw !important;
    height: 100vh !important;
    padding: 20px;
    box-sizing: border-box;

    /* 🔥 Tambahkan Flexbox di elemen Fullscreen untuk Kontrol Anak 🔥 */
    display: flex;
    flex-direction: column;
}

/* Memastikan Konten Kuis (Quiz-Form) mengisi ruang Fullscreen */
#step-3:fullscreen #quiz-form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Memastikan Layout Kuis menggunakan 50:50 di Fullscreen */
#step-3:fullscreen .quiz-layout {
    flex-grow: 1;
    /* Biarkan layout mengisi sisa ruang */
}

/* 🔥 FUNGSI UTAMA: Mengatur Rasio 50:50 🔥 */
#step-3:fullscreen .quiz-layout .quiz-left {
    flex: 1;
    /* Rasio 1 */
    max-width: 50%;
    /* Memastikan tidak melebihi setengah layar */
}

#step-3:fullscreen .quiz-layout .quiz-right {
    flex: 1;
    /* Rasio 1 */
    max-width: 50%;
    /* Memastikan tidak melebihi setengah layar */
}