@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---- MEMANGGIL FONT LOKAL DARI FOLDER ---- */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: normal; font-display: swap;
    src: url('./fonts/inter.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: normal; font-display: swap;
    src: url('./fonts/jetbrains.woff2') format('woff2');
}
@font-face {
    font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: normal; font-display: swap;
    src: url('./fonts/material.woff2') format('woff2');
}

/* ---- MENGHIDUPKAN KEMBALI KELAS IKON AGAR TAMPIL ---- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@layer base {
    body { 
        background-color: #0B1120; 
        color: #F8FAFC; 
        overflow-x: hidden;
        background-image: radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%), radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.08), transparent 25%);
        scroll-behavior: smooth;
    }
    
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 10px; }
}

@layer components {
    .glass {
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    #qText u {
        text-decoration-color: #f3f3f4;
        text-underline-offset: 6px;
        text-decoration-thickness: 1px;
        font-weight: 600;
    }

    #qText sub {
        font-size: 0.45em;
        color: #F3f3f4;
        padding: 0.05em 0.35em;
        border-radius: 6px;
        font-weight: 600;
        margin-left: -3px;
        margin-right: 2px;
        bottom: 0.1em;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Option Button Hover & Active States */
    .opt-btn {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .opt-btn:hover {
        transform: translateX(6px);
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.2);
    }
    .opt-btn:active { transform: scale(0.98); }
    .opt-btn.selected {
        background: rgba(59, 130, 246, 0.12);
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateX(10px);
        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);
    }
    .opt-btn.selected .opt-letter {
        background-color: rgba(59, 130, 246, 0.35); /* Transparansi biru ditingkatkan agar lebih cerah dari kotaknya */
        color: #93C5FD; /* Warna huruf biru yang lebih terang/menyala */
        border-color: rgba(59, 130, 246, 0.6); /* Garis tepi lingkaran lebih tegas */
        /* Bayangan gelap dihilangkan, diganti efek pendaran biru (glow) yang elegan ke luar */
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
    }

    /* Loader */
    .spinner {
        border: 3px solid rgba(255,255,255,0.1);
        border-top: 3px solid #3B82F6;
        border-radius: 50%;
        width: 40px; height: 40px;
        animation: spin 1s linear infinite;
    }

    .audio-locked::-webkit-media-controls-play-button, 
    .audio-locked::-webkit-media-controls-timeline { 
        display: none !important; 
    }

    /* ---- TATA LETAK UTAMA & PASSAGE SCROLL BAR ---- */
    #passageBox {
        display: flex;
        flex-direction: column;
    }

    #passageText {
        position: relative; 
        font-family: 'Georgia', serif;
        font-size: 15px;
        color: #E2E8F0;
        overflow-y: auto;
        overflow-x: auto; 
        flex: 1;
        padding-bottom: 20px;
        display: block; 
        transition: font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Animasi halus saat tombol zoom ditekan */
    }

    .passage-content-wrapper {
        display: block;
        margin: 0 auto; 
        width: max-content; 
        padding-left: 3.5em; /* Menggunakan em agar padding ikut membesar/mengecil saat dizoom */
        padding-right: 1.5em;
    }

    .passage-line {
        position: relative;
        width: 100%; 
        white-space: nowrap; 
        line-height: 1.9;
        text-align: justify;
        text-align-last: justify; 
    }

    .passage-line.paragraph-start {
        padding-left: 2.5em; 
    }

    .passage-line.paragraph-end {
        text-align-last: left; 
    }

    /* Nomor indikator baris di sebelah kiri */
    .line-marker-static {
        position: absolute;
        left: -3.8em; /* Dinamis menggunakan em */
        width: 2.5em;
        text-align: right;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85em; /* Ukuran font nomor akan responsif sebesar 85% dari teks bacaan utama */
        font-weight: 700;
        color: #60A5FA;
        opacity: 0.8;
        user-select: none;
    }

    /* KHUSUS MOBILE: Kotak diturunkan maksimal memakan layar & Memaksimalkan Ruang Kiri-Kanan */
    @media (max-width: 1023px) {
        #passageBox {
            height: 68vh; 
            max-height: 68vh;
            margin-bottom: 25px; 
            padding: 16px 8px !important; /* OVERRIDE: Menghilangkan sisa area biru kosong agar merapat ke tepi HP */
        }
        #passageText {
            font-size: 10px; /* Karena area baca sudah diperlebar, ukuran font bawaan (Fit Screen) bisa dinaikkan ke 10px */
        }
        .passage-content-wrapper {
            padding-left: 3.2em; /* Ruang kiri dirapatkan */
            padding-right: 0.8em; /* Ruang kanan dirapatkan maksimal */
        }
        .line-marker-static {
            left: -3.2em; /* Menggeser angka baris merapat ke kiri */
        }
        .passage-line.paragraph-start {
            padding-left: 2em; 
        }
    }

    /* KHUSUS DESKTOP & TABLET */
    @media (min-width: 1024px) {
        main {
            min-height: calc(100vh - 80px);
        }
        #passageBox {
            max-height: 420px; 
        }
        .wrapper-bawah {
            align-items: stretch !important;
        }
        #questionContainer {
            height: 100%;
        }
        #qnaBox {
            flex: 1 !important;
            display: flex;
            flex-direction: column;
        }
    }

    #optionsWrap {
        flex: none;
        overflow: visible !important;
        padding-right: 8px;
    }

    #gridDesktop {
        flex: 1;
        overflow-y: auto !important;
        align-content: flex-start;
    }
}

@layer utilities {
    /* Animasi Ujian & Transisi */
    .fade-in { animation: fadeIn 0.4s ease-out forwards; }
    .slide-in-right { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .slide-out-left { animation: slideOutLeft 0.3s ease-in forwards; }
    
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } }
    
    .fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
    @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
    
    /* Mobile Menu & Accordion Transition */
    #mobileMenu { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; }
    #mobileMenu.open { max-height: 400px; opacity: 1; }

    .accordion-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
    }
    .accordion-content > div { overflow: hidden; }
    .accordion-item.active .accordion-content { grid-template-rows: 1fr; }
    .accordion-item.active .accordion-icon { transform: rotate(180deg); }
}