:root {
    --bs-body-bg: #f8f9fa; --bs-body-color: #212529; --bs-card-bg: #ffffff;
    --bs-secondary-bg: #e9ecef; --bs-border-color: #dee2e6; --bs-btn-outline-color: #6c757d;
    --bs-tertiary-bg: #f8f9fa; --bs-secondary-color: #6c757d; --bs-tooltip-bg: #212529;
    --bs-tooltip-color: #ffffff; --player-track-bg: #dee2e6; --player-thumb-bg: #0d6efd;
    --favorite-color: #ffc107;
}
[data-theme="dark"] {
    --bs-body-bg: #212529; --bs-body-color: #dee2e6; --bs-card-bg: #343a40;
    --bs-secondary-bg: #495057; --bs-border-color: #495057; --bs-btn-outline-color: #adb5bd;
    --bs-tertiary-bg: #2b3035; --bs-secondary-color: #adb5bd; --bs-tooltip-bg: #111;
    --bs-tooltip-color: #fff; --player-track-bg: #495057; --player-thumb-bg: #3e8bff;
}
body { background-color: var(--bs-body-bg); color: var(--bs-body-color); transition: background-color 0.2s, color 0.2s; padding-bottom: 120px; }

/* -- ATURAN FONT ARAB TERPUSAT -- */
/* Menerapkan font Lateef ke semua elemen teks Arab yang relevan */
.ayat-text, 
.nomor-ayat-arab, 
.option-btn,
#asmaul-husna-grid-container .card-title {
    font-family: 'Lateef', serif;
    font-weight: 200; /* Pastikan ketebalan sesuai dengan yang diunduh */
}

/* Kita tetap butuh aturan ini untuk styling spesifik (ukuran, dll) */
#asmaul-husna-grid-container .card-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}


.ayat-text { text-align: right; direction: rtl; line-height: 2.5; transition: font-size 0.2s; }
.arti-text { font-style: italic; color: #888; }

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1040;
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

#btn-back-to-top:hover {
    background-color: var(--bs-primary);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

body:has(#global-player:not(.d-none)) #btn-back-to-top {
    bottom: 110px;
}

.favorite-star { cursor: pointer; color: var(--bs-btn-outline-color); font-size: 1.5rem; position: absolute; top: 10px; right: 10px; }
.favorite-star.active { color: var(--favorite-color); }
.audio-play-button { cursor: pointer; font-size: 1.5rem; color: var(--bs-btn-outline-color); }
.audio-play-button:hover { color: var(--bs-body-color); }
#global-player { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); z-index: 1050; transition: transform 0.3s ease-in-out; }
#global-player.d-none { transform: translateY(100%); }
.player-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: var(--player-track-bg); outline: none; transition: opacity .2s; cursor: pointer; border-radius: 5px;}
.player-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; background: var(--player-thumb-bg); border-radius: 50%; }
.player-slider::-moz-range-thumb { width: 15px; height: 15px; background: var(--player-thumb-bg); border-radius: 50%; border: none; }

.form-control-minimalist, .form-select-minimalist {
    border: none;
    background-color: var(--bs-secondary-bg);
    border-radius: 0.375rem;
}
.form-control-minimalist:focus, .form-select-minimalist:focus {
    background-color: var(--bs-card-bg);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    z-index: 3;
}
.search-wrapper {
    position: relative;
}
.search-wrapper .bi-search {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    z-index: 3;
}
.search-wrapper .form-control-minimalist {
    padding-left: 2.5rem;
}

.surah-card {
    height: 100%;
    border: 1px solid transparent;
    background-color: var(--bs-card-bg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.surah-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
[data-theme="dark"] .surah-card {
    background-color: var(--bs-card-bg);
    box-shadow: none;
    border: 1px solid var(--bs-border-color);
}
[data-theme="dark"] .surah-card:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
}

.surah-card .card-body { display: flex; flex-direction: column; }
.surah-card-footer { margin-top: auto; }
.surah-number-decorator { font-size: 1.5rem; font-weight: bold; color: var(--bs-primary); opacity: 0.2; }
.fab-new-test { position: fixed; bottom: 20px; right: 20px; z-index: 1040; width: 56px; height: 56px; }
.favorite-header { cursor: pointer; }
.favorite-header .chevron { transition: transform 0.3s ease; }
.favorite-header[aria-expanded="true"] .chevron { transform: rotate(180deg); }
[data-theme="dark"] .modal-content, [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .tooltip .tooltip-inner { background-color: #111; color: #fff; }
[data-theme="dark"] .tooltip .tooltip-arrow::before { border-top-color: #111; }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--bs-body-color); border-color: var(--bs-border-color); }
[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bs-body-bg); border-bottom-color: var(--bs-body-bg); }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); }
[data-theme="dark"] .select2-selection__rendered { color: var(--bs-body-color) !important; }
[data-theme="dark"] .select2-results__option { color: var(--bs-body-color); }
[data-theme="dark"] .select2-results__option--highlighted { background-color: #0d6efd !important; color: white !important; }
[data-theme="dark"] .select2-search__field { color: var(--bs-body-color); }
[data-theme="dark"] .arti-text { color: #aaa; }
[data-theme="dark"] .text-muted { color: var(--bs-secondary-color) !important; }
[data-theme="dark"] .bg-light { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; }
[data-theme="dark"] .surah-number-decorator { color: var(--bs-primary); opacity: 0.3; }

.list-group-item .btn-outline-warning {
    color: var(--favorite-color);
    border-color: var(--favorite-color);
}

.list-group-item .btn-outline-warning:hover {
    color: #000;
    background-color: var(--favorite-color);
    border-color: var(--favorite-color);
}

@media (max-width: 576px) {
    #favorite-surah-list .btn-group {
        flex-wrap: wrap;
    }
}

.single-ayat {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: border-color 0.2s;
}

.single-ayat:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.nav-tabs {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-item {
    margin-right: 0.5rem;
}

.nav-tabs .nav-link {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    color: var(--bs-body-color);
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
    transform: translateY(0);
    pointer-events: none;
}

[data-theme="dark"] .nav-tabs .nav-link {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

.nav-tabs .nav-link[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    box-shadow: none;
    transform: none;
}

/* -- Gaya untuk Kartu Asmaul Husna (Versi Ditingkatkan) -- */
#asmaul-husna-grid-container .card .card-body {
    padding: 1.5rem; /* Menambah ruang di dalam kartu agar tidak sempit */
}

#asmaul-husna-grid-container .card-title {
    font-family: 'Lateef', serif;
    font-weight: 200; /* Sesuaikan dengan ketebalan yang diunduh */
    margin-bottom: 0.5rem; /* Memberi jarak ke tulisan latin di bawahnya */
}

#asmaul-husna-grid-container .card-subtitle {
    margin-bottom: 0.75rem; /* Memberi jarak ke arti di bawahnya */
}

#asmaul-husna-grid-container .card {
    height: 100%;
}

/* Styling untuk Fitur Tes Susun Ayat */
/* ============================================== */
/* Styling untuk Fitur Tes Susun Ayat (BARU)      */
/* ============================================== */

.ayat-drag-container {
    background-color: var(--bs-secondary-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem;
    min-height: 100px;
    display: flex;
    flex-direction: column; /* <<< UBAH JADI VERTIKAL */
    gap: 10px;
}

.ayat-drag-container.target {
    background-color: var(--bs-light-bg-subtle);
    counter-reset: ayat-counter; /* <<< MULAI PENGHITUNGAN NOMOR DARI 1 */
}

.ayat-piece {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 12px 18px;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
    cursor: grab;
    font-family: 'Uthmanic Hafs', serif;
    font-size: 1.6rem;
    user-select: none;
    box-shadow: var(--bs-box-shadow-sm);
    display: flex; /* <<< Tambahkan flex untuk mengatur nomor */
    align-items: center; /* <<< Vertically center nomor dan teks */
}

/* MENAMBAHKAN NOMOR OTOMATIS PADA TARGET CONTAINER */
#target-container .ayat-piece::before {
    counter-increment: ayat-counter; /* <<< Tambah 1 untuk setiap item */
    content: counter(ayat-counter);  /* <<< Tampilkan nomornya */
    
    /* Styling untuk nomor */
    background-color: var(--bs-primary);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0; /* Agar nomor tidak mengecil */
}

.ayat-piece:active {
    cursor: grabbing;
}

/* Style saat item di-drag */
.sortable-ghost {
    opacity: 0.4;
    background: var(--bs-primary-bg-subtle);
}
.sortable-drag {
    opacity: 1 !important;
}

.ayat-drag-container.target {
    background-color: var(--bs-light-bg-subtle);
}
.ayat-piece {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 12px 18px;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
    cursor: grab;
    font-family: 'Lateef', serif; /* <<< GANTI FONT DI SINI */
    font-size: 1.8rem;             /* Sedikit perbesar agar lebih jelas */
    user-select: none;
    box-shadow: var(--bs-box-shadow-sm);
    display: flex; 
    align-items: center; 
}

/* TAMBAHKAN BLOK INI untuk kolom input */
#partisi-input-container textarea {
    font-family: 'Lateef', serif;
    font-size: 1.8rem;
}

.ayat-piece:active {
    cursor: grabbing;
}
/* Style saat item di-drag */
.sortable-ghost {
    opacity: 0.4;
    background: var(--bs-primary-bg-subtle);
}
.sortable-drag {
    opacity: 1 !important; /* Agar tidak transparan saat ditarik */
}

/* TAMBAHKAN BLOK INI untuk Review Jawaban */
#ayat-test-review .list-group-item {
    font-family: 'Lateef', serif;
    font-size: 1.6rem; /* Kita buat sedikit lebih kecil untuk review */
    /* Menyesuaikan padding agar teks Arab tidak terpotong */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

/* Styling untuk input rentang ayat */
#urut-ayat-setup .input-group .form-control {
    text-align: center;
}

/* ============================================== */
/* Tata Letak Bersebelahan untuk Drag & Drop      */
/* ============================================== */

.drag-drop-wrapper {
    display: flex; /* Mengaktifkan mode flexbox */
    gap: 1.5rem;   /* Memberi jarak antar kolom */
}

.drag-drop-wrapper > div {
    flex: 1; /* Membuat kedua kolom (kiri & kanan) memiliki lebar yang sama */
    display: flex;
    flex-direction: column;
}

.drag-drop-wrapper .ayat-drag-container {
    flex-grow: 1; /* Memastikan area drop mengisi sisa ruang vertikal */
}

/* ============================================== */
/* Perbaikan Tampilan untuk Review Jawaban        */
/* ============================================== */

/* 1. Memberi jarak pada notifikasi hasil tes */
#urut-validation-result {
    margin-top: 1.5rem !important; /* Menambah jarak atas */
}

/* 2. Menyamakan font di panel review 'Tes Urutan Ayat' */
#urut-ayat-review .list-group-item {
    font-family: 'Lateef', serif;
    font-size: 1.6rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

/* ============================================== */
/* Mengubah Urutan Tampilan Asmaul Husna (RTL)   */
/* ============================================== */

#asmaul-husna-grid-container {
    flex-direction: row-reverse;
}

/* ============================================== */
/* Gaya Tampilan untuk Tes Mencocokkan Ayat       */
/* ============================================== */

.match-column {
    display: flex;
    flex-direction: column;
    width: 50%; /* Lebar masing-masing kolom */
}

.match-target-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.match-slot {
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 0.75rem;
    background-color: var(--bs-secondary-bg);
}

.match-slot-number {
    background-color: var(--bs-info);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.match-slot-content {
    flex-grow: 1;
}

.match-slot-translation {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.match-slot-dropzone {
    background-color: var(--bs-body-bg);
    min-height: 60px; /* Tinggi minimal area drop */
    border-radius: .375rem;
    border: 2px dashed var(--bs-border-color-translucent);
    padding: 2px; /* Padding kecil agar pas */
    transition: border-color 0.2s;
}

/* Styling saat jawaban diperiksa */
.match-slot-dropzone.slot-correct {
    border-color: var(--bs-success);
    border-style: solid;
}
.match-slot-dropzone.slot-incorrect {
    border-color: var(--bs-danger);
    border-style: solid;
}

/* ============================================== */
/* Efek Sticky untuk Kolom Opsi Jawaban         */
/* ============================================== */

.sticky-column {
    position: -webkit-sticky; /* Untuk browser Safari */
    position: sticky;        /* Perintah utama untuk menempel */
    top: 20px;               /* Jarak dari atas layar saat menempel */
    align-self: flex-start;  /* Penting agar posisi pas di dalam flexbox */
}