/* GENEL AYARLAR */
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
body, html { width: 100%; height: 100%; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; overflow: hidden; }
.container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }

/* HEADER */
.top-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; padding: 0 calc(var(--side-padding) - 4vw); background-color: var(--nav-bg-color); flex-shrink: 0; z-index: 50; border-bottom: none; }
.nav-left, .nav-right { flex: 1; } .nav-right { text-align: right; }
.menu-btn, .settings-btn { font-size: 24px; color: var(--primary-color); cursor: pointer; border: none; background: none; padding: 10px; }
.nav-center { flex: 3; text-align: center; }
.city-name { font-size: 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* GÖVDE VE ORTA ALAN */
.main-content { height: calc(100% - 60px); width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.top-half { width: 100%; padding: 0vh var(--side-padding); text-align: center; flex-shrink: 0; }
.middle-section { flex-grow: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px var(--side-padding); gap: 15px; overflow-y: auto; }

/* KARTLAR */
.daily-card { background: #fff; border-left: 4px solid var(--primary-color); border-right: 4px solid var(--primary-color); padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-size: 14px; color: #555; text-align: center; width: 95%; max-width: 400px; animation: fadeIn 1s ease; }
.daily-card h5 { margin-bottom: 5px; color: var(--primary-color); font-weight: bold; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }
.daily-divider { width: 50%; height: 1px; background: #eee; margin: 15px auto; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ALT KISIM */
.bottom-half { width: 100%; background-color: var(--bg-color); display: flex; flex-direction: column; justify-content: flex-end; flex-shrink: 0; overflow: hidden; }
.friday-alert { text-align: center; font-weight: 500; padding: 5px; margin-bottom: 5px; color: var(--primary-color); font-size: 15px; font-family: 'Antonio', sans-serif; background: rgba(255, 255, 255, 0.5); border-radius: 5px; width: 90%; margin-left: auto; margin-right: auto; }

/* GERİ SAYIM */
.next-prayer-name { font-size: 6vw; font-weight: bold; margin-bottom: 0.5vh; }
.countdown-section { display: flex; flex-direction: column; align-items: center; width: 100%; }
#countdown-container { display: flex; gap: 2vw; margin-top: 1vh; line-height: 1.0; align-items: flex-start; justify-content: center; }
.countdown-group { display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; color: #fff; padding: 1.5vh 3vw; border-radius: 10px; width: 30vw; max-width: 125px; box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1); justify-content: center; }
.countdown-number { font-size: clamp(40px, 20vw, 120px); font-weight: 700; font-family: 'Antonio', sans-serif; color: var(--primary-color); padding: 0; line-height: 0.9; }
.countdown-label { font-size: 4vw; font-weight: 400; color: #6c757d; margin-top: 15px; text-transform: uppercase; }

/* TARİH VE VAKİTLER */
.date-section { text-align: center; padding: 0.5vh var(--side-padding); flex-shrink: 0; }
.miladi-date { font-size: 5vw; font-weight: bold; }
.hicri-date { font-size: 4vw; color: #6c757d; margin-top: 0.5vh; }
.times-section { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; margin-top: auto; padding-bottom: 1vh; overflow-y: auto; }
.prayer-row { height: 52px; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.5vh 0; border-bottom: 1px solid #e0e0e0; }
.times-section .prayer-row:last-child { border-bottom: none; }
.prayer-name { font-size: 5vw; font-weight: bold; padding-left: var(--side-padding); width: 50%; text-align: left; color: var(--text-color); display: flex; align-items: center;}
.prayer-time { font-size: 5vw; padding-right: var(--side-padding); width: 50%; text-align: right; color: var(--text-color); }
.active-prayer { background-color: var(--primary-color); color: #fff; font-weight: bold; border-bottom: 1px solid #f90000 !important; }
.active-prayer .prayer-name, .active-prayer .prayer-time { color: #fff !important; }
body.ramadan-mode .active-prayer { border-bottom: 1px solid #ffd700 !important; }

/* MENÜLER VE MODALLAR */
.side-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 900; display: none; }
.side-menu { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: #fff; z-index: 1000; transition: left 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; box-shadow: none; }
.side-menu.open { left: 0; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
.side-menu-footer { margin-top: auto; padding: 20px; text-align: center; border-top: 1px solid #eee; font-size: 1.5rem; font-weight: bold; color: #888; letter-spacing: 1px; }
.menu-header-image { width: 100%; height: 180px; flex-shrink: 0; background-color: #444; background-size: cover; background-position: center; position: relative; }
.menu-header-image::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
.menu-list { flex-grow: 1; overflow-y: auto; padding: 10px 0; list-style: none; }
.menu-item { display: flex; align-items: center; padding: 15px 20px; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
.menu-item:hover { background: #f9f9f9; }
.menu-item i { margin-right: 15px; width: 25px; color: var(--primary-color); font-size: 18px; }

/* SAYFA İÇERİKLERİ VE TABLOLAR */
.page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 2000; transform: translateY(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; }
.page-overlay.open { transform: translateY(0); }
.page-header-fixed { height: 70px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; z-index: 10; }
.page-title { font-size: 20px; font-weight: bold; color: var(--primary-color); margin: 0; }
.close-page-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 20px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.page-content-scroll { flex-grow: 1; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { position: sticky; top: 0; background: #f8f9fa; padding: 10px 2px; text-align: center; font-weight: bold; border-bottom: 2px solid #ddd; z-index: 5; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.data-table td { padding: 8px 2px; border-bottom: 1px solid #eee; text-align: center; }
.data-table tr:nth-child(even) { background-color: #fafafa; }
.today-highlight { background-color: rgba(42, 91, 13, 0.1) !important; font-weight: bold; }
.data-table td:first-child { white-space: nowrap; font-weight: 500; }

/* AYARLAR MODALI */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-content { background: #fff; width: 90%; max-width: 400px; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); text-align: center; position: relative; }
.modal-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: var(--primary-color); }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.form-select { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 8px; background: #f8f9fa; -webkit-appearance: none; appearance: none; }
.btn-save { width: 100%; padding: 12px; background: var(--primary-color); color: #fff; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.btn-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 20px; cursor: pointer; color: #999; }
.btn-auto-location { width: 100%; padding: 10px; margin-bottom: 20px; background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.toggle-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; background: #f9f9f9; padding: 10px; border-radius: 8px; border: 1px solid #eee; }
.toggle-label { font-weight: bold; color: #555; display: flex; align-items: center; gap: 10px; }
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(24px); }

/* YÜKLEME BUTONU */
.install-prompt-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: auto; display: none; max-width: 90%; background-color: #000; color: #fff; padding: 12px 6vw; align-items: center; justify-content: center; border-radius: 35px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 1000; }
.install-prompt-text { font-size: 4.5vw; font-weight: 500; cursor: pointer; }

/* RESPONSIVE */
@media (min-width: 600px) {
    .install-prompt-text { font-size: 20px; } .city-name { font-size: 25px; } .settings-btn, .menu-btn { font-size: 24px; }
    .next-prayer-name { font-size: 35px; } .miladi-date { font-size: 30px; } .hicri-date { font-size: 20px; } 
    .countdown-group { padding: 10px 20px; width: 160px; max-width: none; } 
    .countdown-label { font-size: 1.2vw; margin-top: 25px; } .prayer-name, .prayer-time { font-size: 20px; } 
    .top-half, .date-section { padding-left: 30px; padding-right: 30px; } .nav-nav { padding: 0 30px; } .prayer-name { padding-left: 30px; } .prayer-time { padding-right: 30px; }
}

/* --- GÖRSEL İYİLEŞTİRMELER (SON ADIM) --- */

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* 2. Skeleton Loading (Dalgalanma Efekti) */
.skeleton-loader {
    width: 100%;
    padding: 20px;
}
.skeleton-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.skeleton-box {
    height: 20px;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
/* Animasyon sınıfı */
.skeleton-box::after {
    content: "";
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #ffffff80 50%, transparent 100%);
    animation: loadShimmer 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes loadShimmer { from { left: -150px; } to { left: 100%; } }

/* Genişlik Ayarları */
.sk-date { width: 30%; }
.sk-time { width: 10%; }