/* =============================================================
   STYLE.CSS - QURAN DIGITAL PRO
   ============================================================= */

:root {
    /* --- COLOR PALETTE --- */
    --primary: #047857;
    --primary-dark: #064e3b;
    --accent: #d97706;
    
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;

    /* Features Colors */
    --science-color: #7e22ce;
    --science-bg: #f3e8ff;
    --science-border: #d8b4fe;
    --en-color: #be123c;
    
    /* Audio Colors */
    --audio-verse-color: #0891b2;
    --audio-verse-bg: #ecfeff;
    --audio-full-bg: #f0fdf4;
    --audio-full-border: #86efac;

    /* TAFSIR THEMES */
    --tafsir-kemenag-bg: #f0fdf4; --tafsir-kemenag-border: #86efac; --tafsir-kemenag-text: #14532d;
    --tafsir-jalalayn-bg: #fffbeb; --tafsir-jalalayn-border: #fcd34d; --tafsir-jalalayn-text: #78350f;
    --tafsir-quraish-bg: #eff6ff; --tafsir-quraish-border: #93c5fd; --tafsir-quraish-text: #1e3a8a;
    --tafsir-ibnu-bg: #fff1f2; --tafsir-ibnu-border: #fda4af; --tafsir-ibnu-text: #881337;
    
    /* CATEGORY COLORS (NATURAL SCIENCE) */
    --cat-astro: #3b82f6;
    --cat-bio: #10b981;
    --cat-fisika: #f59e0b;
    --cat-geo: #8b5cf6;
    --cat-kimia: #ef4444;

    /* TYPOGRAPHY */
    --font-latin: 'Plus Jakarta Sans', sans-serif;
    --font-doc: 'Merriweather', serif;
    --font-arabic: 'Scheherazade New', serif;
    
    --arabic-size: 2.0rem;
    --word-trans-size: 0.85rem;
}

/* --- THEMES --- */
[data-theme="sepia"] {
    --bg-body: #f5f0e1; --bg-card: #fffdf5;
    --text-main: #5d4037; --text-muted: #8d6e63;
    --primary: #5d4037; --border-color: #e6dcc8;
    --audio-verse-color: #006064; --audio-verse-bg: #e0f7fa;
    --audio-full-bg: #e8f5e9; --audio-full-border: #c8e6c9;
    --tafsir-kemenag-bg: #e8f5e9; --tafsir-jalalayn-bg: #fff8e1; --tafsir-quraish-bg: #e3f2fd; --tafsir-ibnu-bg: #fce4ec;
}
[data-theme="dark"] {
    --bg-body: #0f172a; --bg-card: #1e293b;
    --text-main: #f1f5f9; --text-muted: #94a3b8;
    --primary: #34d399; --border-color: #334155;
    --science-bg: #2e1065; --science-border: #4c1d95; --science-color: #d8b4fe;
    --audio-verse-color: #22d3ee; --audio-verse-bg: #155e75;
    --audio-full-bg: #064e3b; --audio-full-border: #059669;
    --tafsir-kemenag-bg: #064e3b; --tafsir-kemenag-border: #059669; --tafsir-kemenag-text: #d1fae5;
    --tafsir-jalalayn-bg: #451a03; --tafsir-jalalayn-border: #d97706; --tafsir-jalalayn-text: #fef3c7;
    --tafsir-quraish-bg: #172554; --tafsir-quraish-border: #2563eb; --tafsir-quraish-text: #dbeafe;
    --tafsir-ibnu-bg: #4c0519; --tafsir-ibnu-border: #be123c; --tafsir-ibnu-text: #ffe4e6;
}

/* --- GLOBAL LAYOUT --- */
* { box-sizing: border-box; }
body {
    font-family: var(--font-latin);
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0; padding: 0;
    transition: background 0.3s, color 0.3s;
    scroll-behavior: smooth;
}

.header-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: white;
    padding: 20px 20px 80px 20px;
    text-align: center;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    position: relative;
}
.header-title {
    font-family: var(--font-arabic);
    font-size: 3.5rem;
    margin: 0;
    color: #fbbf24;
    line-height: 1.4;
}
.header-sub { opacity: 0.9; margin-top: 5px; font-weight: 400; }

.container {
    max-width: 90%;
    margin: -60px auto 40px auto;
    padding: 0 15px;
    position: relative;
    z-index: 10;
}

/* --- CONTROLS & INPUTS --- */
.controls-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.settings-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}

.btn-icon {
    background: transparent; border: 1px solid var(--border-color);
    border-radius: 8px; cursor: pointer; padding: 6px 10px;
    color: var(--text-main); transition: 0.2s; font-size: 0.9rem;
}
.btn-icon:hover, .btn-icon.active { background: yellow; color: black; border-color: var(--primary); }
.btn-icon.font-btn { font-weight: bold; width: 35px; }

.input-group { display: flex; gap: 10px; flex-wrap: wrap; }
.form-control {
    padding: 12px; border-radius: 10px;
    border: 2px solid var(--border-color);
    background: var(--bg-body); color: var(--text-main);
    font-size: 1rem; flex: 1; outline: none; transition: 0.2s;
}
.form-control:focus { border-color: var(--accent); }
select.form-control { flex: 3; font-weight: 600; cursor: pointer; }

/* --- SURAH DISPLAY --- */
.surah-info-display { text-align: center; margin: 20px 0 40px 0; animation: fadeIn 0.8s; }
.surah-name-big { font-family: var(--font-arabic); font-size: 4rem; color: var(--primary); margin: 0; line-height: 1.3; }
.surah-meta-badge { display: inline-block; background: var(--primary-dark); color: #fbbf24; padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; margin-top: 10px; }

.full-audio-container {
    margin: 20px auto; max-width: 500px;
    background: var(--audio-full-bg); border: 1px solid var(--audio-full-border);
    padding: 15px; border-radius: 15px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.full-audio-label { font-size: 0.85rem; color: var(--primary); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.full-audio-player { width: 100%; height: 40px; }

.basmalah { font-family: var(--font-arabic); font-size: 2.8rem; color: var(--text-main); text-align: center; margin: 30px 0; line-height: 1.5; }

/* --- VERSE CARD --- */
.verse-card {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.verse-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }
.verse-card.playing-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2); }

.science-corner-badge {
    position: absolute; top: 0; left: 0;
    background: linear-gradient(90deg, var(--science-color), #9333ea);
    color: white; padding: 5px 12px;
    border-bottom-right-radius: 15px;
    font-size: 0.75rem; font-weight: bold;
    display: flex; align-items: center; gap: 5px; z-index: 5;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.verse-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 20px 5px 20px; }
.verse-meta-col { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-left: auto; }
.verse-number-circle {
    width: 40px; height: 40px; background: var(--accent); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-family: sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- BUTTON AI --- */
.btn-ai-naskah {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white; border: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-ai-naskah:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); }

.verse-content-body { padding: 10px 25px 25px 25px; }

.ai-word-hint {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid #38bdf8;
    color: #0f172a;
    padding: 10px 24px;
    margin: 10px auto 30px auto;
    width: fit-content;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ai-word-hint:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.35);
    border-color: #0ea5e9;
}

.arabic-text-container {
    direction: rtl; text-align: center; margin-bottom: 25px;
    line-height: 2.2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
}
.word-group { display: inline-flex; flex-direction: column; align-items: center; margin: 0 3px 10px 3px; vertical-align: top; }

.word-arabic {
    font-family: var(--font-arabic); font-size: var(--arabic-size);
    color: var(--text-main); line-height: 1.8; cursor: pointer; transition: color 0.2s;
}
.word-arabic:hover { color: var(--accent); }

.word-trans {
    font-family: var(--font-latin); font-size: var(--word-trans-size);
    color: var(--primary); margin-top: -5px; opacity: 0.9;
    direction: ltr; text-align: center; font-weight: 500;
}

.translation-id {
    font-size: 1.05rem; line-height: 1.6; color: var(--text-main);
    margin-bottom: 15px; text-align: justify; display: block;
    border-left: 3px solid var(--accent); padding-left: 15px;
}

.translation-en-box {
    background: #fff1f2; border-left: 4px solid var(--en-color);
    padding: 12px; margin-bottom: 15px; border-radius: 0 8px 8px 0;
    display: none; animation: slideDown 0.3s;
}
.translation-en-text { color: #881337; font-style: italic; font-size: 0.95rem; }

.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color); }
.btn-action {
    padding: 6px 14px; border-radius: 50px; font-size: 0.8rem;
    cursor: pointer; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-muted);
    display: flex; align-items: center; gap: 5px; font-weight: 500; transition: all 0.2s;
}
.btn-action:hover { background: var(--border-color); color: var(--text-main); }
.btn-action.active-tafsir { background: var(--primary); color: white; border-color: var(--primary); }
.btn-action.active-science { background: var(--science-color); color: white; border-color: var(--science-color); }

.btn-audio { border-color: var(--audio-verse-color); color: var(--audio-verse-color); font-weight: 600; }
.btn-audio:hover { background: var(--audio-verse-bg); transform: scale(1.05); }
.btn-copy { border-color: #cbd5e1; color: var(--primary); }
.btn-copy:hover { background: #ecfdf5; border-color: var(--primary); }

/* --- TAFSIR & CONTENT PANELS --- */
.tafsir-container { margin-top: 25px; display: none; animation: slideDown 0.4s ease-out; }
.tafsir-tabs { display: flex; gap: 6px; margin-bottom: -1px; padding-left: 5px; flex-wrap: wrap; position: relative; z-index: 2;}
.tab-btn {
    padding: 10px 15px; background: var(--bg-body); border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0; cursor: pointer; color: var(--text-muted);
    font-size: 0.85rem; font-weight: 700; transition: all 0.2s; flex-grow: 1; text-align: center;
}
.tab-btn:hover { background: #fff; transform: translateY(-2px); }
.tab-btn.active { opacity: 1; transform: translateY(0); border-bottom: 1px solid transparent; box-shadow: 0 -2px 5px rgba(0,0,0,0.03); z-index: 10; }

.tab-btn.kemenag-theme.active { background: var(--tafsir-kemenag-bg); color: var(--tafsir-kemenag-text); border-color: var(--tafsir-kemenag-border); }
.tab-btn.jalalayn-theme.active { background: var(--tafsir-jalalayn-bg); color: var(--tafsir-jalalayn-text); border-color: var(--tafsir-jalalayn-border); }
.tab-btn.quraish-theme.active { background: var(--tafsir-quraish-bg); color: var(--tafsir-quraish-text); border-color: var(--tafsir-quraish-border); }
.tab-btn.ibnukatsir-theme.active { background: var(--tafsir-ibnu-bg); color: var(--tafsir-ibnu-text); border-color: var(--tafsir-ibnu-border); }

.tafsir-content-panel {
    background: var(--bg-card); padding: 25px 30px; border-radius: 0 16px 16px 16px;
    font-size: 1rem; line-height: 1.8; text-align: justify;
    border: 2px solid var(--border-color); position: relative; z-index: 1;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.05); transition: all 0.3s;
}
.tafsir-content-panel.kemenag-active { background: var(--tafsir-kemenag-bg); border-color: var(--tafsir-kemenag-border); color: var(--tafsir-kemenag-text); }
.tafsir-content-panel.jalalayn-active { background: var(--tafsir-jalalayn-bg); border-color: var(--tafsir-jalalayn-border); color: var(--tafsir-jalalayn-text); }
.tafsir-content-panel.quraish-active { background: var(--tafsir-quraish-bg); border-color: var(--tafsir-quraish-border); color: var(--tafsir-quraish-text); }
.tafsir-content-panel.ibnukatsir-active { background: var(--tafsir-ibnu-bg); border-color: var(--tafsir-ibnu-border); color: var(--tafsir-ibnu-text); }

.science-box {
    margin-top: 20px; padding: 25px; background: var(--science-bg); border: 1px solid var(--science-border);
    border-radius: 12px; display: none; animation: slideDown 0.3s;
}

.science-text {
    font-family: var(--font-latin);
    color: var(--text-main);
}
.science-label {
    font-family: var(--font-latin);
    color: var(--text-main);
}

/* Fix Arabic in Science Modal */
.science-text blockquote,
.science-text p[dir="rtl"],
.science-text .arabic, 
.science-text [lang="ar"] { 
    font-family: var(--font-arabic) !important;
    font-size: 2.4rem;
    line-height: 2.0;
    text-align: right;
    margin: 15px 0;
    display: block;
}

.science-text blockquote {
    background-color: #ecfeff;
    border-left: 5px solid #06b6d4;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

/* --- STICKY PLAYER --- */
.sticky-verse-player {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-top: 2px solid var(--accent); padding: 10px 20px;
    display: none; align-items: center; justify-content: center; gap: 15px;
    z-index: 100; box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}
.sticky-verse-player audio { height: 35px; width: 100%; max-width: 500px; }
.player-info { display: flex; flex-direction: column; align-items: flex-end; min-width: 100px; }

/* --- ANIMATIONS --- */
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.highlight-verse { animation: flashYellow 2s ease-out; }
@keyframes flashYellow { 0% { background-color: #fef08a; } 100% { background-color: var(--bg-card); } }

/* --- OVERLAYS & SPINNERS --- */
#loadingOverlay {
    position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.8);
    z-index: 50; display:none; align-items:center; justify-content:center;
    border-radius: 20px;
}

#extractOverlay {
    position: fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7);
    z-index: 200; display:none; flex-direction:column; align-items:center; justify-content:center;
    color: white; text-align: center; backdrop-filter: blur(5px);
}
.spinner {
    width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.3); border-top: 5px solid var(--accent);
    border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#scrollTopBtn {
    position: fixed; bottom: 90px; right: 25px;
    background: var(--accent); color: white; width: 50px; height: 50px;
    border-radius: 50%; border: none; font-size: 1.5rem;
    display: none; align-items: center; justify-content: center; padding: 0;
    cursor: pointer; box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
    z-index: 99; transition: transform 0.2s;
}
#scrollTopBtn:hover { transform: translateY(-3px); }

/* --- GEMINI MODAL --- */
.gemini-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
    z-index: 300; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;
}
.gemini-modal {
    background: var(--bg-card); width: 90%; max-width: 600px; border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 2px solid var(--accent);
    transform: scale(0.9); transition: transform 0.3s; overflow: hidden;
    max-height: 80vh; display: flex; flex-direction: column;
}
.gemini-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 15px 20px; color: white; display: flex; justify-content: space-between; align-items: center;
}
.gemini-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-latin); }
.gemini-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }
.gemini-body { padding: 25px; overflow-y: auto; color: var(--text-main); font-size: 1rem; line-height: 1.6; }
.gemini-loading { text-align: center; color: var(--primary); font-weight: bold; display: none; }

/* --- NASKAH FULL SCREEN OVERLAY --- */
.naskah-overlay {
    position: fixed; inset: 0; background: #f3f4f6;
    z-index: 400; display: none; flex-direction: column;
    overflow: hidden;
}

.naskah-toolbar {
    background: #fff; border-bottom: 1px solid #ccc;
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 10;
}

.naskah-actions { display: flex; gap: 10px; }
.btn-toolbar-naskah {
    padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 8px; border: 1px solid #ccc;
    background: white; color: #374151; font-size: 0.9rem; transition: 0.2s;
}
.btn-toolbar-naskah:hover { background: #f9fafb; border-color: #9ca3af; }
.btn-toolbar-naskah.primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-toolbar-naskah.primary:hover { background: var(--primary-dark); }

.btn-close-naskah {
    background: #dc2626; color: white; border: none;
    padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.btn-close-naskah:hover { background: #b91c1c; }

.naskah-content-wrapper {
    flex: 1; overflow-y: auto; padding: 40px 20px;
    display: flex; justify-content: center;
    position: relative;
}

/* Selection Panel */
#naskahSelection {
    text-align: center; margin-top: 50px;
    animation: fadeIn 0.5s;
}
.naskah-option-btn {
    background: white; border: 2px solid var(--primary);
    color: var(--primary); padding: 20px 30px;
    margin: 10px; border-radius: 15px;
    font-size: 1.1rem; font-weight: bold; cursor: pointer;
    transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
    width: 220px; height: 140px; justify-content: center;
}
.naskah-option-btn:hover {
    background: var(--primary); color: white; transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(4, 120, 87, 0.2);
}
.naskah-option-btn span { font-size: 2rem; }

/* Loading Container */
#naskahLoading {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
    z-index: 50;
}

.document-paper {
    background: white; width: 100%; max-width: 850px;
    min-height: 100vh;
    padding: 50px 60px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: #1f2937; line-height: 1.8; font-family: var(--font-doc);
    font-size: 16px;
    margin-bottom: 50px;
}

/* --- SEARCH RESULT & DOCUMENTS --- */
.search-result-container {
    background: white; width: 100%; max-width: 900px; margin: 0 auto;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-bottom: 50px;
}
.search-result-header {
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    padding: 20px 30px; color: white;
    display: flex; justify-content: space-between; align-items: center;
}
.search-result-body { padding: 40px; font-family: var(--font-doc); line-height: 1.8; }

.doc-heading {
    font-size: 24px; font-weight: 700; color: #111827;
    margin-top: 30px; margin-bottom: 15px; border-bottom: 2px solid #e5e7eb;
    padding-bottom: 5px; font-family: var(--font-latin);
}
.doc-subheading {
    font-size: 19px; font-weight: 600; color: #374151;
    margin-top: 25px; margin-bottom: 10px; font-family: var(--font-latin);
}
.doc-paragraph { margin-bottom: 15px; text-align: justify; }
.doc-arabic {
    font-family: var(--font-arabic); font-size: 22px; direction: rtl; text-align: right;
    line-height: 2.2; color: #000; margin: 15px 0; padding: 15px;
    background-color: #f9fafb; border-right: 4px solid #10b981; border-radius: 4px;
}

/* MUNASABAH SEARCH STYLE */
.munasabah-result-item {
    background: var(--bg-card); padding: 15px; border-radius: 12px;
    border: 1px solid var(--border-color); margin-bottom: 15px;
    transition: all 0.2s;
}
.munasabah-result-item:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.05); }
.munasabah-match { background: #fef9c3; color: #000; padding: 2px 4px; border-radius: 4px; }
.munasabah-link-btn {
    display: inline-block; margin-top: 10px; margin-right: 8px;
    padding: 6px 12px; font-size: 0.85rem; font-weight: bold;
    background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
    border-radius: 50px; text-decoration: none; cursor: pointer;
}
.munasabah-link-btn:hover { background: #2563eb; color: white; }

/* --- SCIENCE GRID & CARDS --- */
.science-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
    width: 100%; max-width: 1000px; margin: 20px auto;
}
.sci-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 16px; overflow: hidden; position: relative;
    cursor: pointer; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}
.sci-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--primary); }
.card-header { padding: 15px 20px; background: #f8fafc; border-bottom: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.badge-surah { font-weight: 800; color: var(--primary); background: #d1fae5; padding: 4px 12px; border-radius: 8px; font-size: 0.85rem; }
.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

.cat-tag {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
    margin-bottom: 12px; display: inline-block; padding: 3px 10px; border-radius: 4px; color: white; align-self: flex-start;
}
.tag-astro { background-color: var(--cat-astro); }
.tag-bio { background-color: var(--cat-bio); }
.tag-fisika { background-color: var(--cat-fisika); }
.tag-geo { background-color: var(--cat-geo); }
.tag-kimia { background-color: var(--cat-kimia); }

.card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: var(--text-main); }
.card-icon { position: absolute; bottom: 10px; right: 10px; font-size: 4rem; opacity: 0.05; transform: rotate(-15deg); }

.filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; margin-top: 20px; }
.btn-filter {
    padding: 8px 20px; border: 1px solid var(--border-color); background: white; border-radius: 12px; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; color: var(--text-muted); transition: all 0.2s;
}
.btn-filter:hover, .btn-filter.active { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(4, 120, 87, 0.2); }

/* --- FEATURES: HAFALAN & BOOKMARK --- */
.blur-arab .arabic-text-container { filter: blur(6px); transition: 0.3s; user-select: none; }
.blur-arab .arabic-text-container:hover { filter: blur(0); }
.blur-trans .translation-id { opacity: 0; transition: 0.3s; }
.blur-trans .translation-id:hover { opacity: 1; }

#resumeContainer {
    margin-top: 10px; display: none; animation: slideDown 0.5s;
}
.btn-resume {
    background: rgba(255, 255, 255, 0.25); color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 20px; border-radius: 50px;
    font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    backdrop-filter: blur(5px);
}
.btn-resume:hover { background: rgba(255, 255, 255, 0.4); transform: translateY(-2px); }

/* --- MEDIA PRINT --- */
@media print {
    body * { visibility: hidden; }
    #naskahOverlay, #naskahPaper, #naskahPaper * { visibility: visible; }
    #naskahOverlay {
        position: absolute; left: 0; top: 0; width: 100%; height: auto;
        background: white; z-index: 9999; overflow: visible; display: block !important;
    }
    .naskah-toolbar, .btn-close-naskah { display: none !important; }
    #naskahPaper {
        box-shadow: none; border: none; margin: 0; padding: 0;
        max-width: 100%; width: 100%; min-height: auto;
    }
    .doc-heading, .doc-subheading { color: black !important; }
    a { text-decoration: none; color: black; }
}

/* --- FOOTER & MISC --- */
.title-container { margin-bottom: 20px; }
.main-title { margin-bottom: 5px !important; }

.version-badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-main);
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 16px; border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ver-num { color: #cbd5e1; font-size: 0.9rem; font-weight: 500; }
.separator { color: rgba(255,255,255,0.2); }
.ver-label {
    background: linear-gradient(to right, #fbbf24, #d97706);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 800; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase;
}

/* Button Styles */
.buttonqu-base {
    font-size: 1.1rem; color: black; border: none;
    margin-bottom: 8px; margin-right: 5px; font-weight: normal;
    cursor: pointer; text-align: left; border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden; display: inline-block; text-decoration: none;
}

.buttonqu, .buttonqu-2, .buttonqu-3 { background: linear-gradient(#dff2ee, #dff2ee, #dff2ee); }
.buttonqu:hover, .buttonqu-2:hover, .buttonqu-3:hover {
    background: linear-gradient(#bdf0e5, #bdf0e5, #bdf0e5);
    font-weight: bold;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px) scale(1.02);
}
.buttonqu:active, .buttonqu-2:active, .buttonqu-3:active {
    transform: translateY(0) scale(1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Hadits Modal Styles */
.hadits-navbar {
    display: flex; justify-content: center; align-items: center;
    padding: 10px 15px; gap: 10px; width: 100%; max-width: 800px; margin: 0 auto;
}
#haditsDropdown {
    flex-grow: 1; max-width: 400px; padding: 10px; font-size: 15px;
    font-weight: bold; color: #fff; background-color: #007bff;
    border: 1px solid #0056b3; border-radius: 15px; cursor: pointer;
    transition: background-color 0.3s;
}
#haditsDropdown:hover { background-color: #0056b3; }
#haditsDropdown option { color: #333; background-color: #f8f9fa; }
#hadits-search-btn {
    text-decoration: none; color: white; font-size: 14px; font-weight: bold;
    padding: 10px 15px; border-radius: 15px; background-color: #dc3545;
    border: 1px solid #b02a37; transition: all 0.3s ease; cursor: pointer;
    white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
#hadits-search-btn:hover { background-color: #b02a37; }
.hadits-iframe-container { width: 100%; flex: 1; overflow: hidden; position: relative; }
.hadits-iframe-container iframe { width: 100%; height: 100%; border: none; display: block; }
@media (max-width: 768px) {
    .hadits-navbar { padding: 5px 10px; }
    #haditsDropdown { font-size: 13px; max-width: 250px; }
    #hadits-search-btn { font-size: 13px; padding: 8px 10px; }
}

/* Animations Flip */
@keyframes flip-continuous {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.icon-flip {
    display: inline-block;
    animation: flip-continuous 3s infinite linear;
    transform-style: preserve-3d;
}

/* Tafsir specific Arabic font */
.tafsir-arabic-text {
    font-family: var(--font-arabic) !important;
    font-size: 2.2rem;
    line-height: 2.2;
    color: #000;
    text-align: right;
    direction: rtl;
    margin: 15px 0;
    display: block;
    background-color: #fcfcfc;
    padding: 5px 10px;
    border-radius: 8px;
}
.tafsir-inline-arabic {
     font-family: var(--font-arabic) !important;
     font-size: 1.4rem;
}

/* ============================================================= */
/* --- MEDIA QUERIES (RESPONSIVE) --- */
/* ============================================================= */

/* Mobile Portrait (max-width: 600px) */
@media (max-width: 600px) {
    .header-hero {
        padding: 15px 15px 60px 15px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .header-title { font-size: 2.5rem; }
    .container { margin: -40px auto 20px auto; padding: 0 10px; }
    .controls-card { padding: 15px; border-radius: 15px; }
    
    .settings-bar {
        flex-direction: column; align-items: stretch; gap: 10px;
        padding-bottom: 10px; margin-bottom: 10px;
    }
    .settings-bar > div { display: flex; justify-content: space-between; width: 100%; }
    .settings-bar .btn-icon { flex-grow: 1; padding: 8px 10px; font-size: 0.85rem; }
    .settings-bar .btn-icon:nth-child(2) { margin-left: 0; }
    
    .input-group { flex-direction: column; gap: 8px; }
    .form-control { padding: 10px; font-size: 0.9rem; }
    #verseInput { max-width: 100%; }
    .input-group button { padding: 10px 20px; }
    
    .surah-name-big { font-size: 3rem; }
    .basmalah { font-size: 2.2rem; margin: 20px 0; }
    
    :root { --arabic-size: 1.8rem; --word-trans-size: 0.75rem; }
    .verse-card { margin-bottom: 15px; border-radius: 12px; }
    .verse-header { padding: 10px 15px 5px 15px; }
    .verse-content-body { padding: 5px 15px 15px 15px; }
    .verse-number-circle { width: 35px; height: 35px; font-size: 0.9rem; }
    .btn-ai-naskah { width: 35px; height: 35px; font-size: 1.1rem; }
    
    .arabic-text-container { gap: 8px 0; }
    .word-group { margin: 0 2px 8px 2px; }
    
    .translation-id { font-size: 1rem; padding-left: 10px; }
    .actions-row { flex-wrap: wrap; gap: 5px; margin-top: 15px; padding-top: 10px; }
    .btn-action { padding: 6px 10px; font-size: 0.75rem; flex-grow: 1; min-width: unset; justify-content: center; }
    .btn-action i { display: none; }
    
    .tafsir-tabs { flex-wrap: wrap; gap: 4px; padding-left: 0; }
    .tab-btn { padding: 8px 10px; font-size: 0.7rem; border-radius: 8px 8px 0 0; }
    .tafsir-content-panel { padding: 15px; font-size: 0.9rem; }
    
    .sticky-verse-player { padding: 8px 10px; flex-wrap: wrap; gap: 8px; }
    .sticky-verse-player audio { flex: 1 1 100%; max-width: 100%; height: 30px; }
    .player-info { flex: 1 1 auto; min-width: unset; align-items: flex-start; }
    .player-info strong { font-size: 0.9rem; }
    
    .gemini-modal { width: 95%; border-radius: 15px; }
    .gemini-body { padding: 15px; font-size: 0.9rem; }
    
    .naskah-toolbar { padding: 10px 15px; }
    .btn-toolbar-naskah, .btn-close-naskah { font-size: 0.8rem; padding: 6px 12px; }
    .naskah-content-wrapper { padding: 5px 10px; }
    .document-paper { padding: 30px 20px; font-size: 15px; line-height: 1.6; }
    .doc-heading { font-size: 20px; }
    .doc-subheading { font-size: 17px; }
    .doc-arabic { font-size: 20px; padding: 10px; }
    
    .science-grid { grid-template-columns: 1fr; }
    .btn-filter { flex-grow: 1; padding: 6px 10px; font-size: 0.8rem; }
    
    .buttonqu-base { font-size: 1rem; padding: 10px 15px; display: flex; width: 100%; text-align: center; justify-content: center; align-items: center; gap: 8px; }
    .version-badge { display: none; }
}

/* Tablet Portrait (max-width: 900px) */
@media (max-width: 900px) {
    .container { max-width: 750px; }
    .verse-card { margin-bottom: 20px; }
    .verse-content-body { padding: 10px 20px 20px 20px; }
    .tafsir-content-panel { padding: 20px 25px; }
    
    .science-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .settings-bar { flex-wrap: wrap; gap: 15px; }
    .settings-bar > div:first-child { flex: 1 1 auto; justify-content: flex-start; }
    .settings-bar > div:last-child { flex: 1 1 100%; justify-content: space-between; }
}

        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            z-index: 99999;
            font-size: 12px;
            display: none; /* Ubah ke block untuk debugging */
        }
        
        /* Fallback styles jika style-index.css tidak ada */
        .spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .verse-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .btn-icon {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-icon:hover {
            background: #f5f5f5;
        }
        
        .form-control {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        /* Variabel AI Search */
        :root {
            --ai-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            --ai-accent: #d4af37;
            --ai-bg: #f4f6f9;
            --arabic-size: 2.8rem; /* Default Arabic font size */
        }

        /* Modal Content Styling Override */
        #aiSearchOverlay .naskah-content-wrapper {
            background-color: var(--ai-bg);
            background-image: radial-gradient(#e6e9f0 1px, transparent 1px);
            background-size: 20px 20px;
            padding: 20px;
            overflow-y: auto;
        }

        /* Hero Header di dalam Modal */
        .ai-hero-header {
            background: var(--ai-gradient);
            color: white;
            border-radius: 16px;
            padding: 30px 20px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(30, 60, 114, 0.2);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
        }
        .ai-hero-header h2 { font-weight: 700; margin-bottom: 5px; font-size: 1.8rem; }
        .ai-hero-header p { font-weight: 300; opacity: 0.9; font-size: 0.95rem; margin: 0; }

        /* Cards */
        .ai-card {
            background: white;
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            overflow: hidden;
            border-top: 4px solid #2a5298;
        }
        .ai-card-header {
            padding: 15px 25px;
            background: white;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            font-weight: 600;
            color: #1e3c72;
            gap: 10px;
        }
        .ai-card-body { padding: 25px; }
        
        /* Floating Inputs */
        .ai-form-group { position: relative; margin-bottom: 15px; }
        .ai-form-control {
            width: 100%;
            border: 2px solid #eef2f7;
            border-radius: 10px;
            padding: 12px 15px;
            background-color: #fbfbfd;
            font-family: inherit;
            transition: all 0.3s;
            outline: none;
        }
        .ai-form-control:focus {
            border-color: #2a5298;
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);
        }
        .ai-arabic-input { font-family: 'Scheherazade New', serif; font-size: 1.4rem; direction: rtl; }
        
        /* Buttons AI */
        .btn-ai-search {
            background: var(--ai-gradient);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 10px;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .btn-ai-search:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(30, 60, 114, 0.2); }

        /* Result Area */
        .ai-result-box {
            background: #fff;
            border: 1px solid #eef2f7;
            border-radius: 12px;
            padding: 20px;
            min-height: 150px;
        }
        .ai-highlight { 
            background-color: rgba(255, 243, 205, 0.9); 
            color: #856404; padding: 2px 4px; border-radius: 4px; 
        }
        .ai-arabic-clickable {
            cursor: pointer; color: #b71c1c; font-weight: 500;
            font-family: 'Scheherazade New', serif; font-size: 2.2rem;
            line-height: 2.2; padding: 0 2px; transition: all 0.2s;
        }
        .ai-arabic-clickable:hover {
            color: #d32f2f; background-color: #fffde7; border-radius: 5px;
        }
        .ai-verse-link {
            cursor: pointer; color: #e67e22; font-weight: 700;
            background: #fff3e0; padding: 2px 8px; border-radius: 15px;
            font-size: 0.85rem; margin: 0 3px; display: inline-flex; align-items: center; gap: 4px;
        }
        .ai-verse-link:hover { background-color: #ffe0b2; color: #d35400; }
        
        /* Style untuk highlight ayat dari URL */
        .highlight-verse {
            animation: pulseHighlight 2s ease-in-out;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
            border-radius: 10px;
        }

        @keyframes pulseHighlight {
            0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
        }

        /* --- STYLE BARU UNTUK GLOBAL WORD COUNTER --- */
        .global-word-badge {
            display: block;
            font-size: 0.6rem;
            color: #4f46e5; /* Indigo */
            font-weight: 700;
            margin-bottom: 2px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            letter-spacing: -0.5px;
        }

        /* Penyesuaian agar badge lokal (di bawah) lebih rapi */
        .word-num-badge {
            display: block; 
            font-size: 0.6rem; 
            color: #9ca3af; 
            width: 16px; 
            height: 16px; 
            line-height: 16px; 
            border-radius: 50%; 
            margin: 4px auto 0 auto; /* Tambah jarak atas */
            border: 1px solid #e5e7eb;
        }
        
        /* --- TAMBAHAN: MELEBARKAN LAYOUT (90%) --- */
        .container {
            max-width: 90% !important; /* Mengubah batas lebar maksimal menjadi 90% layar */
            width: 90% !important;     /* Memaksa lebar menjadi 90% */
            padding-left: 15px;        /* Menjaga jarak aman di sisi kiri */
            padding-right: 15px;       /* Menjaga jarak aman di sisi kanan */
        }
        
        /* Opsional: Agar kartu kontrol (kotak putih) mengikuti lebar kontainer */
        .controls-card {
            width: 100%;
        }
        
        /* --- STYLE TAMBAHAN UNTUK MENGATASI SCROLL GANDA --- */
        body.modal-open {
            overflow: hidden !important;
            position: fixed;
            width: 100%;
        }
        
        .naskah-overlay, .gemini-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            display: none;
            overflow-y: auto;
        }
        
        .naskah-content-wrapper {
            max-height: calc(100vh - 100px);
            overflow-y: auto;
        }
        
/* --- PERBAIKAN TAMPILAN SEARCH BAR UTAMA --- */
        
        .input-group {
            display: flex;           /* Menggunakan Flexbox */
            flex-wrap: nowrap;       /* Memaksa tetap 1 baris */
            align-items: center;     /* Posisi vertikal tengah */
            gap: 8px;                /* Jarak antar elemen */
            width: 100%;             /* Lebar mengikuti container */
            margin-top: 15px;
        }

        .form-control {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 0.9rem;
            outline: none;
            transition: all 0.2s;
            background-color: #fff;
            
            /* PROPERTI PENTING AGAR TIDAK MELEBAR */
            min-width: 0;            /* Mengizinkan elemen mengecil jika layar sempit */
        }

        .form-control:focus {
            border-color: #2a5298;
            box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);
        }

        /* Pengaturan Lebar Spesifik per Item */
        #surahSelect {
            flex: 2;                 /* Prioritas lebar paling besar */
            text-overflow: ellipsis; /* Jika teks kepanjangan, potong jadi ... */
        }

        #searchInSurah {
            flex: 2;                 /* Prioritas lebar kedua */
        }

        #verseInput {
            flex: 0 0 60px;          /* Lebar tetap (fixed) 60px */
            width: 60px;
            text-align: center;
            padding-left: 2px;
            padding-right: 2px;
        }

        .input-group .btn-icon {
            flex: 0 0 auto;          /* Lebar tombol mengikuti kontennya */
            white-space: nowrap;     /* Teks tombol dilarang turun baris */
            height: 42px;            /* Samakan tinggi tombol dengan input */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsif untuk Layar Sangat Kecil (HP < 400px) */
        @media (max-width: 450px) {
            .input-group {
                gap: 4px; /* Perkecil jarak */
            }
            .form-control {
                padding: 8px; /* Perkecil padding */
                font-size: 0.8rem;
            }
            #verseInput {
                flex: 0 0 45px; /* Perkecil input ayat */
                width: 45px;
            }
            .input-group .btn-icon {
                padding: 0 10px !important; /* Perkecil padding tombol */
                font-size: 0.85rem;
            }
        }
 
        body {
            /* --- 1. PERBAIKAN SCROLL (Wajib Dipertahankan) --- */
            /* Mengizinkan scroll vertikal jika konten panjang */
            overflow-y: auto !important;
            position: relative;
            width: 100%;
            /* Memastikan body minimal setinggi layar browser agar gradient utuh */
            min-height: 100vh;
        
            /* --- 2. BACKGROUND GANDA (PATTERN DI ATAS GRADIENT) --- */
        
            /*
               PENTING: Dalam CSS, kita bisa menumpuk gambar.
               Urutannya dipisahkan koma. Gambar yang ditulis PERTAMA
               akan muncul paling DEPAN/ATAS.
            */
            background-image:
                /* >>> LAPISAN 1 (PALING ATAS): Pattern Islami Tipis (SVG) <<< */
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c5b0' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        
                /* >>> LAPISAN 2 (DI BAWAHNYA): Gradient Emas ke Putih <<< */
                /* Mulai dari warna Emas Lembut (#fceab3) di atas, ke Putih (#ffffff) di bawah */
                linear-gradient(to bottom, #fceab3 0%, #fffcf5 60%, #ffffff 100%);
        
            /*
               --- PENGATURAN MASING-MASING LAPISAN ---
               Urutan nilai di bawah ini sesuai urutan gambar di atas (Pattern dulu, lalu Gradient)
            */
        
            /* Pattern: diulang-ulang (repeat). Gradient: jangan diulang (no-repeat) */
            background-repeat: repeat, no-repeat;
        
            /* Pattern: ukuran asli (auto). Gradient: menutupi seluruh area (cover) */
            background-size: auto, cover;
        
            /* Pattern: ikut scroll. Gradient: tetap diam di layar (fixed) agar terlihat elegan */
            background-attachment: scroll, fixed;
        
            background-position: center, center;
        } 
       
/* Style untuk modal pintasan */
#shortcutModal .gemini-modal {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#shortcutSuccess {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        /* Style untuk tombol shortcut di header */
        .btn-shortcut-header {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: 15px;
            padding: 10px 20px;
            /* Gradient Warna Menarik (Sunset/Gold) */
            background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
            background-size: 200% auto;
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .btn-shortcut-header:hover {
            background-position: right center; /* Efek gerak gradient */
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(221, 36, 118, 0.5);
            color: #fff;
        }

        .btn-shortcut-header i {
            font-size: 1.1rem;
        }

            /* --- CSS KHUSUS TOMBOL HEADER BARU --- */
            .btn-hero-tafsir {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 15px;
                margin-bottom: 10px;
                padding: 10px 20px;
                
                /* Gradient Warna Menarik (Sunset/Gold) */
                background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
                background-size: 200% auto;
                
                color: white;
                text-decoration: none;
                font-weight: 700;
                font-size: 0.95rem;
                border-radius: 50px;
                box-shadow: 0 4px 15px rgba(221, 36, 118, 0.3);
                transition: all 0.4s ease;
                border: 2px solid rgba(255, 255, 255, 0.5);
                position: relative;
                z-index: 10;
            }

            .btn-hero-tafsir:hover {
                background-position: right center; /* Efek gerak gradient */
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(221, 36, 118, 0.5);
                color: #fff;
            }

            .btn-hero-tafsir i {
                font-size: 1.1rem;
            }

            /* Style popup gambar (bawaan lama) */
            .icon-wrapper {
                position: relative;
                display: inline-block;
                margin-right: 8px;
                margin-bottom: 4px;
                cursor: pointer;
            }
            .icon-small {
                height: 1em;
                width: auto;
                vertical-align: middle;
            }
            .img-popup {
                display: none;
                position: absolute;
                width: 300px;
                top: 100%;
                left: 0;
                z-index: 9999;
                box-shadow: 0 5px 15px rgba(0,0,0,0.5);
                border: 2px solid #fff;
                border-radius: 8px;
            }
            .icon-wrapper:hover .img-popup {
                display: block;
            }
            
            /* --- CSS KHUSUS TOMBOL HEADER BARU --- */
            .btn-hero-tafsir {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 15px;
                margin-bottom: 10px;
                padding: 10px 20px;
                
                /* Gradient Warna Menarik (Sunset/Gold) */
                background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
                background-size: 200% auto;
                
                color: white;
                text-decoration: none;
                font-weight: 700;
                font-size: 0.95rem;
                border-radius: 50px;
                box-shadow: 0 4px 15px rgba(221, 36, 118, 0.3);
                transition: all 0.4s ease;
                border: 2px solid rgba(255, 255, 255, 0.5);
                position: relative;
                z-index: 10;
            }

            .btn-hero-tafsir:hover {
                background-position: right center; /* Efek gerak gradient */
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(221, 36, 118, 0.5);
                color: #fff;
            }

            .btn-hero-tafsir i {
                font-size: 1.1rem;
            }

            /* Style popup gambar (bawaan lama) */
            .icon-wrapper {
                position: relative;
                display: inline-block;
                margin-right: 8px;
                margin-bottom: 4px;
                cursor: pointer;
            }
            .icon-small {
                height: 1em;
                width: auto;
                vertical-align: middle;
            }
            .img-popup {
                display: none;
                position: absolute;
                width: 300px;
                top: 100%;
                left: 0;
                z-index: 9999;
                box-shadow: 0 5px 15px rgba(0,0,0,0.5);
                border: 2px solid #fff;
                border-radius: 8px;
            }
            .icon-wrapper:hover .img-popup {
                display: block;
            }