/* =========================================
   1. DEĞİŞKENLER VE GECE MODU
   ========================================= */
:root {
    --fs-arabic: 36px;
    --fs-latin: 18px;
    --fs-basmala: 32px;
    --bg-main: #052e16;
    --card-bg: linear-gradient(145deg, #fffef8 0%, #fff9e6 100%);
    --card-text: #1b4332;
    --header-bg: rgba(5, 46, 22, 0.98);
    --outside-title: #ffe066;
    --footer-bg: rgba(255, 255, 255, 0.98);
}

body.night-mode {
    --bg-main: #000000;
    --card-bg: #121212;
    --card-text: #e0e0e0;
    --header-bg: #000000;
    --outside-title: #d4af37;
    --footer-bg: #1a1a1a;
}

@font-face {
    font-family: "Shaikh Hamdullah Mushaf";
    src: url('fonts/ShaikhHamdullahMushaf.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* =========================================
   2. GENEL AYARLAR (ZOOM ENGELLEYİCİ EKLENDİ)
   ========================================= */
html, body { 
    /* Çift tıklama zoom'u engellemek için en kritik satır */
    touch-action: manipulation; 
    font-family: "Plus Jakarta Sans", sans-serif; 
    background-color: var(--bg-main); 
    margin: 0; height: 100vh; overflow: hidden;
    transition: background-color 0.3s ease;
    /* Metin seçmeyi engelle (yanlışlıkla kopyalama moduna girmesin) */
    -webkit-user-select: none;
    user-select: none;
}

.header-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 50px;
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 15px; padding-top: env(safe-area-inset-top);
    background-color: var(--header-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 1000;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    box-sizing: border-box;
}

.header-title { font-size: 1.1rem; color: #ffe066; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.header-logo { height: 32px; width: auto; }
.header-controls { display: flex; gap: 5px; align-items: center; }

.font-btn {
    background: #1b4332; color: #ffd700; border: 1px solid #d4af37;
    border-radius: 6px; padding: 4px 8px; cursor: pointer; font-weight: bold; font-size: 13px;
    touch-action: manipulation;
}

.header-badge { 
    background-color: #1b4332; color: #ffd700; padding: 4px 10px; 
    border-radius: 12px; font-size: 0.75rem; font-weight: bold; border: 1px solid #d4af37;
}

/* Ana İçerik */
.main-container {
    position: absolute; top: 50px; bottom: 55px; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; padding: 5px; gap: 5px;
}

.center-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 550px; height: 100%; justify-content: center; }

.outside-title { text-align: center; color: var(--outside-title); font-size: 1.4rem; font-weight: 700; margin: 5px 0; }

.card { 
    background: var(--card-bg); color: var(--card-text); border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; flex: 1; 
    display: flex; flex-direction: column; padding: 10px 5px; overflow: hidden; box-sizing: border-box;
    /* Kart içinde kaydırma yapılabilsin ama zoom yapılmasın */
    touch-action: pan-y; 
}

.text-scroll-area { overflow-y: auto; flex-grow: 1; padding: 5px 15px; text-align: center; -webkit-overflow-scrolling: touch; }

.arabic-text { font-family: "Shaikh Hamdullah Mushaf", serif; font-size: var(--fs-arabic); line-height: 2.2; direction: rtl; padding-bottom: 15px; }
.basmala { font-family: "Shaikh Hamdullah Mushaf", serif; font-size: var(--fs-basmala); color: #d4af37; margin-bottom: 20px; }
.verse-marker { color: #c0392b; margin: 0 5px; font-size: 0.9em; }
.latin-text { font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--fs-latin); line-height: 1.6; text-align: left; padding-bottom: 20px; }

/* Navigasyon Butonları */
.nav-btn {
    background: rgba(27, 67, 50, 0.9); color: #ffd700; border: 2px solid #d4af37;
    width: 35px; height: 70px; border-radius: 8px; cursor: pointer; z-index: 100;
    touch-action: manipulation;
}
.nav-btn.hidden { visibility: hidden; }

/* Footer */
.footer-area {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 55px; 
    background: var(--footer-bg); border-top: 3px solid #d4af37;
    border-radius: 15px 15px 0 0; z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}

.mode-buttons { display: flex; gap: 5px; width: 95%; max-width: 450px; }
.mode-btn { 
    flex: 1; padding: 10px 0; border: 1px solid #1b4332; border-radius: 8px; 
    font-weight: 700; font-size: 11px; cursor: pointer;
    touch-action: manipulation;
}
.mode-btn.active { background: #1b4332; color: #ffd700; }
.audio-btn { background-color: #d4af37; color: #052e16; }
.audio-btn.playing { background-color: #c0392b; color: white; animation: pulse 2s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}