/* YAZI TİPLERİ TANIMLAMALARI */
@font-face { font-family: 'Adobe Arabic'; src: url('../fonts/Adobe Arabic Regular.otf') format('opentype'); }
@font-face { font-family: 'Allame Mushaf Yasin Dar'; src: url('../fonts/Allame Mushaf Yasin Dar.ttf') format('truetype'); }
@font-face { font-family: 'Allame Mushaf Yasin'; src: url('../fonts/Allame Mushaf Yasin.ttf') format('truetype'); }
@font-face { font-family: 'Amiri Quran'; src: url('../fonts/Amiri Quran.ttf') format('truetype'); }
@font-face { font-family: 'Arabic Regular'; src: url('../fonts/Arabic Regular.ttf') format('truetype'); }
@font-face { font-family: 'Arabic Typesetting Regular'; src: url('../fonts/Arabic Typesetting Regular.ttf') format('truetype'); }
@font-face { font-family: 'Droid Arabic Naskh Regular'; src: url('../fonts/Droid Arabic Naskh Regular.ttf') format('truetype'); }
@font-face { font-family: 'DS Arabic Regular'; src: url('../fonts/DS Arabic Regular.ttf') format('truetype'); }
@font-face { font-family: 'eKalem Düz Regular'; src: url('../fonts/eKalem Düz Regular.ttf') format('truetype'); }
@font-face { font-family: 'eKalem Tezyinat Regular'; src: url('../fonts/eKalem Tezyinat Regular.ttf') format('truetype'); }
@font-face { font-family: 'FS Arabic Regular'; src: url('../fonts/FS Arabic Regular.ttf') format('truetype'); }
@font-face { font-family: 'Hasenat'; src: url('../fonts/Hasenat.TTF') format('truetype'); }
@font-face { font-family: 'Icomoon'; src: url('../fonts/İcomoon.ttf') format('truetype'); }
@font-face { font-family: 'KacstQurn'; src: url('../fonts/KacstQurn.ttf') format('truetype'); }
@font-face { font-family: 'Kuran Kerim Font Abay'; src: url('../fonts/Kuran Kerim Font Abay.ttf') format('truetype'); }
@font-face { font-family: 'Kuran Kerim Font Hamdullah'; src: url('../fonts/Kuran Kerim Font Hamdullah.ttf') format('truetype'); }
@font-face { font-family: 'Kuran Kerim Font Latif'; src: url('../fonts/Kuran Kerim Font Latif.ttf') format('truetype'); }
@font-face { font-family: 'Material Icons Regular'; src: url('../fonts/Material İcons Regular.ttf') format('truetype'); }
@font-face { font-family: 'Mushaf Tr'; src: url('../fonts/Mushaf Tr.ttf') format('truetype'); }
@font-face { font-family: 'Nazli'; src: url('../fonts/Nazli.ttf') format('truetype'); }
@font-face { font-family: 'Shaikh Hamdullah Basic'; src: url('../fonts/Shaikh Hamdullah Basic.ttf') format('truetype'); }
@font-face { font-family: 'Shaikh Hamdullah Basic 1'; src: url('../fonts/Shaikh Hamdullah Basic 1.ttf') format('truetype'); }
@font-face { font-family: 'Shaikh Hamdullah Basic 2'; src: url('../fonts/Shaikh Hamdullah Basic 2.ttf') format('truetype'); }
@font-face { font-family: 'Shaikh Hamdullah Basic Volt'; src: url('../fonts/Shaikh Hamdullah Basic Volt.ttf') format('truetype'); }
@font-face { font-family: 'Shaikh Hamdullah Mushaf'; src: url('../fonts/Shaikh Hamdullah Mushaf.ttf') format('truetype'); }
@font-face { font-family: 'Themify'; src: url('../fonts/Themify.ttf') format('truetype'); }
@font-face { font-family: 'Traditional Arabic'; src: url('../fonts/Traditional Arabic.TTF') format('truetype'); }
@font-face { font-family: 'Traditional Naskh'; src: url('../fonts/Traditional Naskh.ttf') format('truetype'); }
@font-face { font-family: 'Uthman Taha Naskh'; src: url('../fonts/Uthman Taha Naskh.ttf') format('truetype'); }
@font-face { font-family: 'Uthmanic Script Hafs'; src: url('../fonts/Uthmanic Script Hafs.otf') format('opentype'); }
@font-face { font-family: 'XB Zar'; src: url('../fonts/XB Zar.ttf') format('truetype'); }

/* DEĞİŞKENLER VE HESAPLAMALAR */
:root {
    --offset: 0pt; 
    --title-size: calc(24pt + var(--offset)); 
    --main-size: calc(22pt + var(--offset));
    --paren-size: calc(20pt + var(--offset));
    --latin-size: calc(12pt + var(--offset)); 
    --font-family: 'Arabic Regular', serif; 
    --latin-font-family: 'Aptos', Arial, sans-serif; 
}

/* MOBİL CİHAZLAR İÇİN ARAPÇA PUNTOYU 4 PUNTO KÜÇÜLTME */
@media (max-width: 767px) {
    :root {
        --title-size: calc(20pt + var(--offset)); 
        --main-size: calc(18pt + var(--offset));  
        --paren-size: calc(16pt + var(--offset)); 
    }
}

body {
    font-family: var(--font-family);
    background-color: #f4f6f8;
    padding: 20px;
    line-height: 2;
    margin: 0;
    padding-bottom: 280px; 
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

/* 1 SANİYELİK TAM EKRAN KAPAK (SPLASH SCREEN) */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #889a76; /* Arkaplan boşluk rengi */
    background-image: url('../images/kapak.png');
    background-size: contain; /* Resmi bozmadan ekrana sığdırır */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99999;
    transition: opacity 0.5s ease;
}
body.splash-active {
    overflow: hidden; 
}

/* LOGO VE BAŞLIK */
.logo-container { text-align: center; margin-bottom: 20px; }
.logo-container img { max-height: 180px; width: auto; max-width: 100%; }

.title { text-align: center; font-size: var(--title-size); font-weight: bold; margin-bottom: 20px; }
.latin-title { display: none; font-family: 'Arial', sans-serif; font-size: 24px; }
.show-latin .arabic-title { display: none; }
.show-latin .latin-title { display: inline-block; }

/* ÖNSÖZ ALANI */
.onsoz-container { text-align: center; margin-bottom: 20px; }
.onsoz-btn { 
    cursor: pointer; background: #00838f; color: white; border: none; 
    padding: 10px 24px; border-radius: 20px; font-weight: bold; 
    font-family: Arial, sans-serif; font-size: 15px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background-color 0.3s; 
}
.onsoz-btn:hover { background: #00acc1; }
.onsoz-text { 
    display: none; direction: ltr; text-align: left; background: #fff; 
    padding: 20px; border-top: 4px solid #00838f; border-radius: 8px; 
    margin: 15px auto; max-width: 800px; font-family: 'Arial', sans-serif; 
    font-size: 15px; line-height: 1.8; color: #333; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}
.onsoz-text p { margin-bottom: 12px; }

/* ÖNSÖZ İÇİNDEKİ ÖZEL PARANTEZLİ İFADELER İÇİN */
.onsoz-term {
    font-size: 14px; /* Orijinalden 1 punto (piksel) daha küçük */
    color: brown;
}

#text-container {
    font-family: var(--font-family) !important;
    text-align: right;
    font-size: var(--main-size);
}

/* Tıklanabilir Metin Blokları */
.verse-block {
    position: relative;
    cursor: pointer;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: background-color 0.2s, padding-left 0.3s, border-color 0.2s;
    border: 1px solid transparent;
}
.verse-block:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* Dinleme Modu Açıkken Metnin Sola Kayması */
.listening-mode .verse-block {
    padding-left: 65px; 
}

/* LATİN OKUNUŞ (TRANSCRIPT) STİLLERİ */
.latin-text {
    display: none !important; 
    direction: ltr; 
    text-align: left;
    font-family: var(--latin-font-family) !important; 
    font-size: var(--latin-size);
    line-height: 1.8;
    color: #222;
}
.show-latin .arabic-text { display: none !important; }
.show-latin .latin-text { display: block !important; }

/* Meal Simgesi ve Metni */
.meal-text {
    display: none; 
    direction: ltr; 
    text-align: left;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    background-color: #fff9e6;
    padding: 12px;
    margin-top: 10px;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}

/* Ses Çalma Butonu */
.play-btn {
    display: none; 
    position: absolute;
    left: 10px;
    top: 15px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 8px 12px;
    cursor: pointer;
    background: #e0f7fa;
    border: 1px solid #00acc1;
    border-radius: 5px;
    color: #00838f;
    font-weight: bold;
    z-index: 10;
}
.play-btn:hover { background: #b2ebf2; }
.listening-mode .play-btn { display: block; } 

.parentheses { color: brown; font-size: var(--paren-size); }
.latin-text .parentheses { font-size: inherit; } 

.center-text { text-align: center; margin-top: 15px; } 
.son-img { height: 1.2em; vertical-align: middle; margin: 0 5px; }
.subscript { font-size: 0.6em; vertical-align: sub; line-height: 0; position: relative; bottom: -0.1em; }

/* Sayfa Modu Stilleri */
.page-mode .page-block {
    background: #ffffff; border: 1px solid #dcdcdc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px; padding: 20px; border-radius: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}
.whole-mode .page-block { background: transparent; border: none; box-shadow: none; margin: 0; padding: 0; }

/* Renklendirme */
.color-names .holy-name { color: #008000; }

/* TEMA STİLLERİ */
body.theme-dark { background-color: #1a1a1a; color: #e0e0e0; }
body.theme-dark .verse-block:hover { background-color: #2d2d2d; border-color: #444; }
body.theme-dark .latin-text { color: #d0d0d0; }
body.theme-dark .onsoz-text { background: #2a2a2a; color: #d0d0d0; border-top-color: #00acc1; }
body.theme-dark .meal-text { background-color: #332a00; color: #e0e0e0; border-left-color: #ffb300; }
body.theme-dark .page-mode .page-block { background: #222; border-color: #444; }
body.theme-dark #settingsToggleBtn { background-color: #333; border-color: #555; color: #ddd; }
body.theme-dark .controls-container { background-color: #2a2a2a; border-top-color: #555; }
body.theme-dark .control-group { background: #333; border-color: #555; color: #ddd; }
body.theme-dark .controls-container button, body.theme-dark .controls-container select { background-color: #444; color: #ddd; border-color: #666; }
body.theme-dark .parentheses { color: #d89f70; }

body.theme-yellow { background-color: #fff9c4; color: #3e2723; }
body.theme-yellow .verse-block:hover { background-color: #fff59d; border-color: #fbc02d; }
body.theme-yellow .latin-text { color: #4e342e; }
body.theme-yellow .onsoz-text { background: #fffde7; color: #3e2723; border-top-color: #f57f17; }
body.theme-yellow .meal-text { background-color: #ffecb3; color: #3e2723; border-left-color: #ff8f00; }
body.theme-yellow .page-mode .page-block { background: #fffde7; border-color: #fbc02d; }
body.theme-yellow #settingsToggleBtn { background-color: #fff59d; border-color: #fbc02d; color: #3e2723; }
body.theme-yellow .controls-container { background-color: #fff9c4; border-top-color: #fbc02d; }
body.theme-yellow .control-group { background: #fffde7; border-color: #fbc02d; color: #3e2723; }
body.theme-yellow .controls-container button, body.theme-yellow .controls-container select { background-color: #fff59d; color: #3e2723; border-color: #fbc02d; }

/* KONTROL PANELİ SARICISI */
#controlsWrapper {
    position: fixed;
    bottom: 0; 
    left: 0; 
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
}

#controlsWrapper.hidden {
    transform: translateY(100%);
}

#settingsToggleBtn {
    position: absolute;
    top: -30px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: #efefef;
    border: 2px solid #ccc;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    width: 70px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.1);
    color: #555;
    font-size: 16px;
    user-select: none;
    z-index: 1001;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
#settingsToggleBtn:hover {
    opacity: 0.8;
}

.controls-container {
    background-color: #efefef; border-top: 2px solid #ccc;
    padding: 15px 10px 10px; display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 8px;
    direction: ltr; box-shadow: 0 -5px 15px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif; box-sizing: border-box; 
    max-height: 40vh; 
    overflow-y: auto; 
    transition: background-color 0.3s, border-color 0.3s;
}

.control-group {
    display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 5px;
    background: #fff; padding: 8px 10px; border-radius: 8px; border: 1px solid #ddd;
    width: 100%; max-width: 600px;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.controls-container button, .controls-container select {
    font-size: 13px; padding: 6px 10px; cursor: pointer;
    border: 1px solid #aaa; border-radius: 5px; background-color: #f9f9f9;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.controls-container button:hover, .controls-container select:hover { opacity: 0.8; }
.checkbox-label { cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: bold; white-space: nowrap; }
.checkbox-label input { width: 15px; height: 15px; cursor: pointer; margin: 0; }

/* Sıfırlama Butonu Özel Rengi */
.reset-btn { background-color: #ffeaea !important; color: #c62828 !important; border-color: #ef9a9a !important; font-weight: bold; }
.reset-btn:hover { background-color: #ffcdd2 !important; }
body.theme-dark .reset-btn { background-color: #4a1c1c !important; color: #ffbaba !important; border-color: #7a2e2e !important; }

@media (min-width: 768px) {
    body { padding: 40px; padding-bottom: 180px; }
    .controls-container { flex-direction: row; gap: 15px; padding: 15px 20px; overflow-y: visible; max-height: none; }
    .control-group { width: auto; flex-wrap: nowrap; }
    .logo-container img { max-height: 220px; }
    .page-mode .page-block { padding: 40px; }
}