/**
 * ========================================================================
 * TATIL VİLLAMIZ - TAKVİM & TARİH SEÇİCİ ÖZEL CSS
 * ========================================================================
 * 
 * Bu dosya sadece takvim ve tarih seçici bileşenlerine odaklanır:
 * - jQuery UI Datepicker
 * - Flatpickr
 * - Özel takvim sınıfları (bjutgiris, bjutcikis, vb.)
 * - Fiyat hesaplama kutusu
 * 
 * Renk Şeması:
 * - Seçili Günler: #E91E63 (Pembe)
 * - Dolu Günler: #FFA726 (Amber)
 * - Giriş/Çıkış Gradient: Pembe → Amber
 * - Müsait Değil: #F8BBD0 (Açık Pembe)
 * 
 * Önemli: Bu dosya custom-overrides.css'ten SONRA yüklenmelidir.
 * Tüm inline <style> bloklarındaki hardcoded renkleri ezer.
 * 
 * Versiyon: 1.0
 * Tarih: 13 Mayıs 2026
 * ========================================================================
 */


/* ========================================================================
   1. JQUERY UI DATEPICKER - GENEL YAPILANDIRMA
   ======================================================================== */

/**
 * Ana takvim container ve genel yapı
 * Keskin köşeli, modern tasarım
 */

/* Ana datepicker container */
.ui-datepicker,
#ui-datepicker-div {
    background-color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.2) !important;
    padding: 1rem !important;
    font-family: 'Inter', sans-serif !important;
}

/* Datepicker başlık (header) */
.ui-datepicker-header {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    color: #ffffff !important;
}

/* Ay ve yıl başlığı */
.ui-datepicker-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
}

/* Navigasyon butonları (önceki/sonraki ay) */
.ui-datepicker-prev,
.ui-datepicker-next {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    color: #ffffff !important;
}

/* Takvim tablosu */
.ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin-top: 1rem !important;
}

/* Haftanın günleri başlığı (Pzt, Sal, Çar...) */
.ui-datepicker-calendar thead th {
    color: #898989 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
    text-align: center !important;
}

/* Takvim hücreleri (td) */
.ui-datepicker-calendar td {
    padding: 0 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
}

/* Gün linkleri - Varsayılan durum */
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block !important;
    padding: 0.6rem !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #454545 !important;
    background-color: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* Gün hover efekti */
.ui-datepicker-calendar td a:hover {
    background-color: #FFE0B2 !important;
    border-color: #FFA726 !important;
    color: #2C3E50 !important;
    transform: scale(1.05) !important;
}


/* ========================================================================
   2. TAKVİM ÖZEL DURUMLAR - HARDCODED RENK OVERRİDE
   ======================================================================== */

/**
 * Inline <style> bloğundaki tüm hardcoded renkleri override ediyoruz
 * !important kullanarak inline stilleri eziyoruz
 */

/* Seçili gün - Ana pembe */
.ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker-calendar td.ui-state-active a,
.ui-datepicker-calendar td a.ui-state-active {
    background-color: #E91E63 !important;
    border-color: #E91E63 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Bugün */
.ui-datepicker-calendar td.ui-datepicker-today a {
    background-color: #FFA726 !important;
    border-color: #FFA726 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Disabled/Müsait olmayan günler */
.ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker-calendar td.ui-state-disabled span {
    background-color: #F5F5F5 !important;
    color: #BDBDBD !important;
    border-color: #EEEEEE !important;
    cursor: not-allowed !important;
}

/* Diğer ayların günleri */
.ui-datepicker-other-month {
    opacity: 0.3 !important;
}


/* ========================================================================
   3. ÖZEL TAKVİM SINIFLARI (bjut*, jut*, secils*)
   ======================================================================== */

/**
 * Tatil Villamız'a özel takvim durumları
 * Giriş, çıkış, dolu günler ve aralık seçimleri
 */

/* ===== DOLU GÜNLER (Rezerve Edilmiş) ===== */
.bjutdolu,
.jutdolu {
    background-color: #FFA726 !important;
    color: #ffffff !important;
    border-color: #FFA726 !important;
    position: relative !important;
    font-weight: 600 !important;
}

.bjutdolu::after,
.jutdolu::after {
    content: '●' !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    color: #ffffff !important;
    font-size: 8px !important;
}

/* ===== GİRİŞ GÜNÜ ===== */
.bjutgiris,
.jutgiris {
    background: linear-gradient(135deg, #E91E63 0%, #FFA726 100%) !important;
    color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    position: relative !important;
}

.bjutgiris::before,
.jutgiris::before {
    content: '→' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ===== ÇIKIŞ GÜNÜ ===== */
.bjutcikis,
.jutcikis {
    background: linear-gradient(135deg, #FFA726 0%, #E91E63 100%) !important;
    color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    position: relative !important;
}

.bjutcikis::before,
.jutcikis::before {
    content: '←' !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ===== GİRİŞ VE ÇIKIŞ AYNI GÜN ===== */
.bjutgiriscikis,
.jutgiriscikis {
    background: linear-gradient(135deg, 
        #E91E63 0%, 
        #FFA726 50%, 
        #E91E63 100%) !important;
    color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    position: relative !important;
}

.bjutgiriscikis::before,
.jutgiriscikis::before {
    content: '⇄' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ===== ÇIKIŞ VE GİRİŞ (Ters Sıra) ===== */
.cikisbgiris,
.bgiriscikis {
    background: linear-gradient(135deg, #FFA726 0%, #E91E63 100%) !important;
    color: #ffffff !important;
    border: 2px solid #FFA726 !important;
    border-radius: 0 !important;
}


/* ========================================================================
   4. SEÇİLİ ARALIK (Tarih Aralığı Seçimi)
   ======================================================================== */

/**
 * Kullanıcı tarafından seçilen tarih aralığı stilleri
 */

/* Seçili aralık - Genel */
.secilspler,
.ui-datepicker-calendar td.ui-datepicker-selected a {
    background-color: rgba(233, 30, 99, 0.1) !important;
    border-color: #E91E63 !important;
    color: #2C3E50 !important;
}

/* Seçili aralık başlangıç */
.secilspler.ilki {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(233, 30, 99, 0.15) 50%, 
        rgba(233, 30, 99, 0.1) 100%) !important;
    border-left: 3px solid #E91E63 !important;
    border-radius: 0 !important;
}

/* Seçili aralık bitiş */
.secilspler.sonu {
    background: linear-gradient(90deg, 
        rgba(233, 30, 99, 0.1) 0%, 
        rgba(233, 30, 99, 0.15) 50%, 
        transparent 100%) !important;
    border-right: 3px solid #E91E63 !important;
    border-radius: 0 !important;
}

/* Seçili aralık içindeki günler - Çıkıştan sonraki günler */
.secilspler.cdansonra,
.secilspler.cdansonra1,
.secilspler.cdansonra2,
.secilspler.cdansonra3,
.secilspler.cdansonra4,
.secilspler.cdansonra5,
.secilspler.cdansonra6,
.secilspler.cdansonra7 {
    background-color: rgba(233, 30, 99, 0.08) !important;
    border-top: 1px solid rgba(233, 30, 99, 0.3) !important;
    border-bottom: 1px solid rgba(233, 30, 99, 0.3) !important;
}


/* ========================================================================
   5. MÜSAİT DEĞİL / KAPALI GÜNLER
   ======================================================================== */

/**
 * Rezerve edilemeyecek veya müsait olmayan günler
 */

.musaitdegil,
.kapali,
.ui-datepicker-calendar td.disabled {
    background-color: #F5F5F5 !important;
    color: #BDBDBD !important;
    border-color: #EEEEEE !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Müsait değil hover - Hover efekti olmamalı */
.musaitdegil:hover,
.kapali:hover {
    background-color: #F5F5F5 !important;
    transform: none !important;
}

/* Onay bekleyen günler */
.onaybekliyor {
    background-color: #FFE0B2 !important;
    color: #F57C00 !important;
    border: 2px dashed #FFA726 !important;
    border-radius: 0 !important;
    position: relative !important;
}

.onaybekliyor::after {
    content: '?' !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    color: #F57C00 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}


/* ========================================================================
   6. FLATPICKR TAKVİM STİLLERİ
   ======================================================================== */

/**
 * Flatpickr takvimi için özelleştirilmiş stiller
 * (Anasayfa ve listeleme sayfasında kullanılıyor)
 */

/* Flatpickr ana container */
.flatpickr-calendar {
    background-color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.2) !important;
}

/* Flatpickr aylar (months) */
.flatpickr-months {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%) !important;
    border-radius: 0 !important;
}

.flatpickr-month {
    color: #ffffff !important;
}

.flatpickr-current-month {
    color: #ffffff !important;
}

.flatpickr-current-month input.cur-year {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Flatpickr navigasyon okları */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #ffffff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: #FFE0B2 !important;
}

/* Flatpickr haftanın günleri */
.flatpickr-weekdays {
    background-color: #F5F5F5 !important;
}

.flatpickr-weekday {
    color: #757575 !important;
    font-weight: 600 !important;
}

/* Flatpickr günler */
.flatpickr-day {
    color: #2C3E50 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 0 !important;
}

.flatpickr-day:hover {
    background-color: #FFE0B2 !important;
    border-color: #FFA726 !important;
}

/* Flatpickr - Seçili gün */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: #E91E63 !important;
    border-color: #E91E63 !important;
    color: #ffffff !important;
}

/* Flatpickr - Aralık içi */
.flatpickr-day.inRange {
    background-color: rgba(233, 30, 99, 0.1) !important;
    border-color: rgba(233, 30, 99, 0.3) !important;
    box-shadow: none !important;
}

/* Flatpickr - Bugün */
.flatpickr-day.today {
    border-color: #FFA726 !important;
    background-color: #FFE0B2 !important;
}

.flatpickr-day.today:hover {
    background-color: #FFA726 !important;
    color: #ffffff !important;
}

/* Flatpickr - Disabled */
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    color: #BDBDBD !important;
    background-color: #F5F5F5 !important;
    cursor: not-allowed !important;
}


/* ========================================================================
   7. FİYAT HESAPLAMA KUTUSU
   ======================================================================== */

/**
 * Detay sayfasındaki fiyat hesaplama container'ı (#fiyatcontainer)
 */

/* Ana fiyat container */
#fiyatcontainer {
    background-color: #ffffff !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.1) !important;
}

/* Fiyat başlığı */
#fiyatcontainer h3,
#fiyatcontainer h4 {
    color: #E91E63 !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

/* Fiyat değeri */
#fiyatcontainer .fiyat,
#fiyatcontainer .price-value {
    color: #FFA726 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

/* Fiyat detay satırları */
#fiyatcontainer .price-row {
    border-bottom: 1px solid #E0E0E0 !important;
    padding: 0.75rem 0 !important;
}

#fiyatcontainer .price-row:last-child {
    border-bottom: none !important;
}

/* Toplam fiyat */
#fiyatcontainer .total-price {
    background-color: rgba(233, 30, 99, 0.05) !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    border-top: 2px solid #E91E63 !important;
}

#fiyatcontainer .total-price .amount {
    color: #E91E63 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

/* Rezervasyon butonu */
#fiyatcontainer .btn-rezervasyon,
#fiyatcontainer .btn-booking {
    background-color: #E91E63 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

#fiyatcontainer .btn-rezervasyon:hover,
#fiyatcontainer .btn-booking:hover {
    background-color: #C2185B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.3) !important;
}

/* Fiyat listesi tablosu */
#fiyatcontainer table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#fiyatcontainer table th {
    background-color: #E91E63 !important;
    color: #ffffff !important;
    padding: 0.75rem !important;
    text-align: left !important;
    border: none !important;
}

#fiyatcontainer table td {
    padding: 0.75rem !important;
    border-bottom: 1px solid #E0E0E0 !important;
    color: #2C3E50 !important;
}

#fiyatcontainer table tr:last-child td {
    border-bottom: none !important;
}

#fiyatcontainer table tr:hover {
    background-color: rgba(233, 30, 99, 0.03) !important;
}


/* ========================================================================
   8. TAKVİM GÖSTERGE (Legend)
   ======================================================================== */

/**
 * Takvim altındaki renk açıklamaları (gösterge)
 */

.gosterge,
.calendar-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding: 1rem !important;
    background-color: #F5F5F5 !important;
    border-radius: 0 !important;
}

.gosterge-item,
.legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
}

.gosterge-renk,
.legend-color {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #757575 !important;
    border-radius: 0 !important;
}

/* Gösterge renkleri */
.gosterge-secili {
    background-color: #E91E63 !important;
}

.gosterge-dolu {
    background-color: #FFA726 !important;
}

.gosterge-giris {
    background: linear-gradient(135deg, #E91E63 0%, #FFA726 100%) !important;
}

.gosterge-cikis {
    background: linear-gradient(135deg, #FFA726 0%, #E91E63 100%) !important;
}

.gosterge-musaitdegil {
    background-color: #F5F5F5 !important;
    border: 1px solid #BDBDBD !important;
}

.gosterge-onaybekliyor {
    background-color: #FFE0B2 !important;
    border: 2px dashed #FFA726 !important;
}


/* ========================================================================
   9. TAKVİM TOOLTIP & POPOVER
   ======================================================================== */

/**
 * Takvim günlerine ait tooltip'ler (fiyat bilgisi vb.)
 */

/* Tooltip container */
.calendar-tooltip,
.price-tooltip {
    background-color: #2C3E50 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0 !important;
    font-size: 0.875rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999 !important;
}

.calendar-tooltip::before,
.price-tooltip::before {
    border-top-color: #2C3E50 !important;
}

/* Tooltip fiyat vurgusu */
.tooltip-price {
    color: #FFA726 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* Tooltip durum ikonu */
.tooltip-status {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 0.5rem !important;
}

.tooltip-status.available {
    background-color: #4CAF50 !important;
}

.tooltip-status.booked {
    background-color: #FFA726 !important;
}

.tooltip-status.unavailable {
    background-color: #F44336 !important;
}


/* ========================================================================
   10. INLINE <style> BLOĞU OVERRİDE
   ======================================================================== */

/**
 * HTML dosyalarındaki inline <style> bloklarını ezmek için
 * Yüksek spesifite ve !important kullanıyoruz
 */

/* Eski hardcoded renkleri override et */
#ui-datepicker-div td[style*="#13357B"],
#ui-datepicker-div td[style*="#123478"],
#ui-datepicker-div td[style*="#102754"] {
    background-color: #E91E63 !important;
    border-color: #E91E63 !important;
}

#ui-datepicker-div td[style*="#e59f00"],
#ui-datepicker-div td[style*="#ffbf47"] {
    background-color: #FFA726 !important;
    border-color: #FFA726 !important;
}

#ui-datepicker-div td[style*="#8d9ddd"],
#ui-datepicker-div td[style*="#3554D1"] {
    background-color: #F8BBD0 !important;
    border-color: #E91E63 !important;
}

/* Inline border-radius kaldırma */
#ui-datepicker-div td[style*="border-radius"],
.flatpickr-calendar [style*="border-radius"],
#fiyatcontainer [style*="border-radius"] {
    border-radius: 0 !important;
}

/* Inline background gradient override */
[style*="background: linear-gradient"][style*="#13357B"],
[style*="background: linear-gradient"][style*="#123478"] {
    background: linear-gradient(135deg, #E91E63 0%, #FFA726 100%) !important;
}

[style*="background: linear-gradient"][style*="#e59f00"] {
    background: linear-gradient(135deg, #FFA726 0%, #F57C00 100%) !important;
}


/* ========================================================================
   11. RESPONSIVE TAKVİM DÜZENLEMELERİ
   ======================================================================== */

/**
 * Mobil cihazlar için takvim optimizasyonları
 */

@media (max-width: 767px) {
    /* Mobilde takvim daha küçük */
    .ui-datepicker,
    .flatpickr-calendar {
        font-size: 0.875rem !important;
        padding: 0.75rem !important;
    }
    
    /* Mobilde günler daha küçük padding */
    .ui-datepicker-calendar td a,
    .ui-datepicker-calendar td span,
    .flatpickr-day {
        padding: 0.4rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mobilde başlık daha küçük */
    .ui-datepicker-title,
    .flatpickr-current-month {
        font-size: 1rem !important;
    }
    
    /* Fiyat container mobilde tam genişlik */
    #fiyatcontainer {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Mobilde fiyat daha küçük */
    #fiyatcontainer .fiyat,
    #fiyatcontainer .price-value {
        font-size: 1.5rem !important;
    }
    
    /* Mobilde gösterge dikey */
    .gosterge,
    .calendar-legend {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 575px) {
    /* Çok küçük ekranlarda takvim daha da kompakt */
    .ui-datepicker-calendar {
        border-spacing: 2px !important;
    }
    
    .ui-datepicker-calendar td a,
    .ui-datepicker-calendar td span {
        padding: 0.3rem !important;
        font-size: 0.75rem !important;
    }
}


/* ========================================================================
   12. TAKVİM ANIMASYONLARI
   ======================================================================== */

/**
 * Takvim açılma/kapanma ve günlük hover animasyonları
 */

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

.ui-datepicker,
.flatpickr-calendar {
    animation: fadeInCalendar 0.3s ease-out !important;
}

/* Gün hover animasyonu */
.ui-datepicker-calendar td a,
.flatpickr-day {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui-datepicker-calendar td a:hover,
.flatpickr-day:hover {
    transform: scale(1.08) !important;
}

/* Seçili gün pulse efekti */
@keyframes pulseSelected {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(233, 30, 99, 0);
    }
}

.ui-datepicker-calendar td.ui-state-active a,
.flatpickr-day.selected {
    animation: pulseSelected 2s infinite !important;
}


/* ========================================================================
   13. TAKVİM PRINT STİLLERİ
   ======================================================================== */

/**
 * Takvim yazdırma stilleri
 */

@media print {
    .ui-datepicker,
    .flatpickr-calendar {
        border: 2px solid #000 !important;
        box-shadow: none !important;
    }
    
    .ui-datepicker-calendar td a,
    .flatpickr-day {
        color: #000 !important;
        border: 1px solid #ccc !important;
    }
    
    .ui-datepicker-header,
    .flatpickr-months {
        background: #ccc !important;
        color: #000 !important;
    }
    
    /* Tooltip'leri yazdırmada gizle */
    .calendar-tooltip,
    .price-tooltip {
        display: none !important;
    }
}


/* ========================================================================
   14. TAKVİM ERİŞİLEBİLİRLİK İYİLEŞTİRMELERİ
   ======================================================================== */

/**
 * Klavye navigasyonu ve ekran okuyucu desteği
 */

/* Focus görünürlüğü */
.ui-datepicker-calendar td a:focus,
.flatpickr-day:focus {
    outline: 3px solid #FFA726 !important;
    outline-offset: 2px !important;
    z-index: 10 !important;
}

/* Seçili günün ARIA desteği */
.ui-datepicker-calendar td[aria-selected="true"] a {
    background-color: #E91E63 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Disabled günlerin ARIA desteği */
.ui-datepicker-calendar td[aria-disabled="true"] span {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}


/* ========================================================================
   15. ÇOK TAKVİMLİ GÖRÜNÜM (Multi-month)
   ======================================================================== */

/**
 * Yan yana birden fazla ay gösterimi
 */

.ui-datepicker-multi {
    display: flex !important;
    gap: 1rem !important;
}

.ui-datepicker-multi .ui-datepicker-group {
    flex: 1 !important;
    border: 2px solid #E91E63 !important;
    border-radius: 0 !important;
}

.ui-datepicker-multi .ui-datepicker-group:not(:last-child) {
    border-right: none !important;
}


/* ========================================================================
   DOSYA SONU
   ======================================================================== 
   
   Bu CSS dosyası custom-overrides.css'ten SONRA yüklenmelidir.
   
   Yükleme sırası:
   1. style.css (ana CSS)
   2. custom-overrides.css
   3. datepicker-custom.css (bu dosya)
   
   PHP header'a şu şekilde ekleyin:
   <link rel="stylesheet" href="path/to/datepicker-custom.css">
   
   ========================================================================
*/