/*
 * =================================================================================
 * DOSYA ADI: public/css/takvim.css
 * AMACI: bugun.php sayfasındaki Ay Takvimi bileşeni için özel stil tanımları.
 * SON REVİZYON: Koyu temada BEYAZ ARKA PLAN sorununu çözmek için CSS minimuma indirildi ve Bootstrap değişkenleri önceliklendirildi.
 * =================================================================================
 */

/* Dış Container */
.duvar-takvimi-container {
    max-width: 650px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Mobil İyileştirmeler (Boşluk Azaltma) */
/* Mobil İyileştirmeler (Tam Ekran / Edge-to-Edge) */
@media (max-width: 768px) {
    .duvar-takvimi-container {
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .duvar-takvimi {
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        /* Hafif ayırıcı */
    }

    .takvim-baslik {
        border-radius: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .takvim-govde {
        padding: 15px 10px !important;
        /* İçeriği çok kenara yapıştırmadan hafif boşluk, ama dış çerçeve yok */
    }

    /* Kartvizit hissi veren gölge kaldırma */
    .container.card {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Takvim Ana Kutusu */
.duvar-takvimi {
    /* Varsayılan Açık Tema Arkaplanı */
    background-color: #fdfbf5;
    border: 1px solid #aaa;
    border-radius: 5px;
}

/* Koyu Tema Ayarı: Tüm Bileşenleri Temaya Zorlama */
@media (prefers-color-scheme: dark) {

    /* 1. KRİTİK: Ana Takvimi saran Bootstrap 'Card' elementlerini EZER */
    .container.card,
    .container.card .card-body {
        background-color: var(--bs-body-bg) !important;
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }

    /* 2. KRİTİK: Alt Detay Bloğu Arkaplanını Ezme (bg-light sınıfı kullanılan o büyük div) */
    /* Daha güçlü seçici (tipik HTML yapısını varsayarak) */
    .container>div.p-4.bg-light.rounded.shadow-sm {
        background-color: var(--bs-body-bg) !important;
        border: 1px solid var(--bs-border-color);
        color: var(--bs-body-color) !important;
    }

    /* 3. KRİTİK: Takvim Ana Gövdesini ve Çevresini Koyu Temaya Zorlama */
    .duvar-takvimi,
    .duvar-takvimi-container,
    .takvim-govde {
        background-color: var(--bs-body-bg) !important;
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }

    /* 4. KRİTİK: ÖNERİLER BÖLÜMÜNÜN İÇİNDEKİ METİN KUTUSU (Görüntü 13'deki "Bahçede Bugün" kısmı) */
    /* Bu, Öneriler metin kutusu içeriğinin arkaplan sorununu çözmeli.
       HTML'de bu içerik etrafındaki div'de sabit bir arkaplan varsa ezilir. */
    .takvim-govde .takvim-oneriler p,
    .takvim-govde .takvim-oneriler {
        background-color: transparent !important;
        color: var(--bs-body-color);
    }

    .takvim-govde .takvim-oneriler h4 {
        color: var(--bs-body-color);
    }

    /* 5. Özel Arkaplanlar (Kontrast sağlayan küçük kutular) */
    /* Rumi/Halk Kutusu */
    .takvim-rumi-halk {
        background: #343a40 !important;
        border-color: #495057;
    }

    /* Güneş Bilgileri Kutusu */
    .takvim-bilgiler {
        background: #212529 !important;
        border-color: #495057;
    }

    /* 6. İnce Ayarlar */
    .takvim-ayrac-ince,
    .halk-takvimi-olay,
    .takvim-bilgi-notu {
        border-top-color: #495057 !important;
    }

    /* 7. Sabit Kırmızı Rengi Temaya Duyarlı Yapma (Rumi Dönem) */
    .rumi-donem-bilgi .text-danger {
        color: #ff5757 !important;
        /* Koyu temada daha parlak bir kırmızı */
    }
}


/* --- BAŞLIK (HEADER) --- */
/* Bu bölüm görsel kimliğin temelini oluşturduğu için korundu */
.takvim-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #8B0000;
    color: white;
    padding: 15px 15px 15px 20px;
    border-bottom: 2px dashed #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-height: 100px;
}

/* Kolon 1: Hicri Gün */
.takvim-sol {
    flex-basis: 25%;
}

.takvim-gun {
    font-size: 5.5rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* ... (Geri kalan tüm takvim bileşen stilleri korundu) ... */

/* --- GÖVDE (BODY) --- */
.takvim-govde {
    padding: 20px;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    .takvim-govde {
        color: var(--bs-body-color);
    }
}

.takvim-miladi-tarih {
    font-size: 1.3rem;
    font-weight: bold;
    color: #d9534f;
    /* Koyu Kırmızı (Sabit) */
    text-align: center;
}

.takvim-hafta-sayisi {
    font-size: 0.8rem;
    color: #555;
    text-align: center;
    margin-bottom: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.takvim-yil-gunu {
    font-size: 0.8rem;
    color: #777;
    text-align: center;
    margin-bottom: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.takvim-rumi-halk strong {
    font-weight: bold;
    color: #8B0000;
    /* Koyu Kırmızı (Sabit) */
}

.takvim-rumi-halk i {
    color: #007bff;
    /* Mavi (Sabit) */
    margin-right: 5px;
    font-size: 1.1em;
}

.halk-takvimi-olay {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dotted #ccc;
}

.takvim-ayrac-ince {
    border: 0;
    border-top: 1px solid #eee;
    margin: 3px 0;
}

.takvim-bilgiler {
    background: #f4f4f0;
    border: 1px solid #ddd;
    padding: 10px 15px 8px 15px;
    border-radius: 5px;
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2px 5px;
}

.takvim-bilgiler strong {
    text-align: right;
    font-weight: bold;
}

.takvim-bilgiler>span:not(.takvim-bilgi-notu):not(:nth-child(3n-1)) {
    text-align: left;
}

.takvim-bilgiler>span:nth-child(3n-1) {
    text-align: center;
}

.takvim-bilgi-notu {
    display: block;
    text-align: right;
    font-style: italic;
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid #eee;
    grid-column: 1 / -1;
}

.takvim-ayrac {
    border: 0;
    border-top: 1px dashed #aaa;
    margin: 20px 0;
}

.takvim-oneriler {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.takvim-oneriler h4 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-weight: bold;
}

.takvim-oneriler p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.takvim-baslik {
    transition: background-image 1.5s ease;
}

.takvim-baslik.gece {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    /* Rich Night Gradient */
    background-size: 200% 200%;
    animation: gradientAnimation 15s ease infinite;
    color: #ecf0f1;
}

.takvim-baslik.gundogumu {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    /* Sunrise Gradient */
    color: #fff;
}

.takvim-baslik.gunduz {
    background: linear-gradient(135deg, #2980b9, #6dd5fa, #ffffff);
    /* Blue Sky Gradient */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.takvim-baslik.gunbatimi {
    background: linear-gradient(135deg, #c31432, #240b36);
    /* Sunset Purple/Red */
    color: #fff;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.takvim-baslik.gece .takvim-gun,
.takvim-baslik.gunbatimi .takvim-gun {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* =================================================================
   AY EVRESİ GÖRSELİ (CSS ile Çizim)
   ================================================================= */
#moon-phase {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    /* Enhanced Glow */
    border: 3px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}

#moon-phase .shadow {
    width: 100%;
    height: 100%;
    background-color: #1a1a2e;
    /* Darker Space Color */
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

/* Yüzde Yazısı */
/* Yüzde Yazısı - Ayın Tam Ortasında */
#moon-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    pointer-events: none;

    /* Her zeminde okunur olması için güçlü dış kontur (outline) */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0px 0px 5px rgba(0, 0, 0, 0.8);
}

/* Duvar Takvimi Görünümü */
.takvim-kocaman-gun {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    /* Daha modern ve okunaklı */
    background: -webkit-linear-gradient(45deg, #333, #000);
    background-clip: text;
    /* Standard property added */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Koyu temada sorun yaratabilir, kapalı tutalım */
}

/* Ayırıcı Başlık */
.separator-text {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator-text::before,
.separator-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.separator-text:not(:empty)::before {
    margin-right: .5em;
}

.separator-text:not(:empty)::after {
    margin-left: .5em;
}

/* Koyu Tema Uyumları (Yeni Eklenen Kartlar İçin) */
@media (prefers-color-scheme: dark) {
    .takvim-kocaman-gun {
        color: var(--bs-body-color) !important;
        background: none;
        -webkit-text-fill-color: initial;
    }

    .ozel-gun-karti {
        background: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color);
    }

    .ozel-gun-karti .text-dark {
        color: var(--bs-body-color) !important;
    }

    .geleneksel-kutu .card-title {
        color: var(--bs-body-color) !important;
    }

    .geleneksel-kutu.border-success {
        border-color: rgba(25, 135, 84, 0.4) !important;
    }

    .geleneksel-kutu .card-header.bg-success {
        background-color: rgba(25, 135, 84, 0.2) !important;
        color: #75b798 !important;
        /* Açık yeşil */
    }

    .geleneksel-kutu.border-primary {
        border-color: rgba(13, 110, 253, 0.4) !important;
    }

    .geleneksel-kutu .card-header.bg-primary {
        background-color: rgba(13, 110, 253, 0.2) !important;
        color: #6ea8fe !important;
        /* Açık mavi */
    }
}

/* =================================================================
   Güneş Bilgileri Kartları (Modern)
   ================================================================= */
.sun-info-card {
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #f8f9fa;
    /* bg-light karşılığı */
}

.sun-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Koyu Tema: Güneş Kartları */
@media (prefers-color-scheme: dark) {
    .sun-info-card {
        background-color: var(--bs-tertiary-bg) !important;
        /* Daha koyu gri */
        border-color: var(--bs-border-color) !important;
    }

    .sun-info-card .text-dark {
        color: var(--bs-body-color) !important;
    }

    .sun-info-card .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .sun-info-card .badge.bg-white {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-border-color) !important;
    }
}