/**
 * ========================================================================
 * TATİL VİLLAMIZ - UYGUNLUK TAKVİMİ V3 (Detay Sayfası - #atakvim)
 * ========================================================================
 *
 * Referans tasarım: mobil ekran görüntüsü (Temmuz 2026)
 * - Ay başlığı: lacivert, ortalanmış, transparan zemin
 * - Navigasyon: yuvarlak lacivert butonlar (sol/sağ ok)
 * - Müsait günler: açık gri-mavi (#EDF1F8) yuvarlatılmış hücre,
 *   koyu gün numarası + altında fiyat
 * - Dolu günler: canlı kırmızı, sadece gün numarası (etiket yok)
 * - Giriş günü: sol üst açık / sağ alt kırmızı çapraz
 * - Çıkış günü: sol üst kırmızı / sağ alt açık çapraz
 * - Opsiyonlu (beklemede) günler: açık kırmızı
 * - Geçmiş günler: soluk, etiketsiz
 *
 * Bu dosya head.php'deki inline <style> bloğundan SONRA yüklenmelidir.
 * Tüm kurallar #atakvim'e scope edilmiştir; flatpickr ve diğer
 * takvimlere dokunmaz.
 *
 * Versiyon: 3.0 — Temmuz 2026
 * ========================================================================
 */

:root {
    --tkv-navy: #13357B;
    --tkv-navy-hover: #1c46a0;
    --tkv-cell: #EDF1F8;
    --tkv-cell-hover: #DFE7F5;
    --tkv-ink: #1A1F29;
    --tkv-price: #4A5160;
    --tkv-red: #ED1C24;
    --tkv-red-soft: #FFB200;  /* opsiyonlu/beklemede tarihler — site amber rengi */
    --tkv-past-ink: #B6BDCB;
    --tkv-sel-mid: #D9E2F6;
}

/* ========================================================================
   1. GENEL KAPSAYICI
   ======================================================================== */

#atakvim {
    box-shadow: none !important;
    border: none !important;
}

#atakvim .ui-widget.ui-widget-content,
#atakvim .ui-datepicker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

#atakvim .ui-datepicker-multi .ui-datepicker-group {
    border: none !important;
    min-height: 0 !important;
}

/* Alt "Önceki/Sonraki Aylar" butonları gizle — nav artık üstteki oklarda */
.property_single_page_widget .dpbutonlar {
    display: none !important;
}

/* ========================================================================
   2. BAŞLIK (Ay/Yıl) — Lacivert, transparan zemin
   ======================================================================== */

#atakvim .ui-datepicker-header,
#atakvim .ui-widget-header {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    position: relative !important;
    padding: 0.5rem 3.25rem 1rem !important;
    min-height: 52px;
}

#atakvim .ui-datepicker-title {
    color: var(--tkv-navy) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    text-align: center !important;
    line-height: 44px !important;
    margin: 0 !important;
}

#atakvim .ui-datepicker-title .ui-datepicker-month,
#atakvim .ui-datepicker-title .ui-datepicker-year {
    color: var(--tkv-navy) !important;
    font-weight: 700 !important;
}

/* ========================================================================
   3. NAVİGASYON OKLARI — Yuvarlak lacivert butonlar
   ======================================================================== */

#atakvim .ui-datepicker .ui-datepicker-prev,
#atakvim .ui-datepicker .ui-datepicker-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 4px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--tkv-navy) !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 5 !important;
    transition: background-color .2s ease, transform .15s ease !important;
    overflow: hidden !important;
}

#atakvim .ui-datepicker .ui-datepicker-prev { left: 6px !important; right: auto !important; }
#atakvim .ui-datepicker .ui-datepicker-next { right: 6px !important; left: auto !important; }

#atakvim .ui-datepicker .ui-datepicker-prev:hover,
#atakvim .ui-datepicker .ui-datepicker-next:hover {
    background: var(--tkv-navy-hover) !important;
    transform: scale(1.05);
    top: 4px !important;
}
#atakvim .ui-datepicker .ui-datepicker-prev-hover { left: 6px !important; }
#atakvim .ui-datepicker .ui-datepicker-next-hover { right: 6px !important; }

/* Sprite ikonunu gizle, ok'u CSS ile çiz */
#atakvim .ui-datepicker .ui-datepicker-prev span,
#atakvim .ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

#atakvim .ui-datepicker .ui-datepicker-prev::before,
#atakvim .ui-datepicker .ui-datepicker-next::before {
    content: '' !important;
    display: block !important;
    width: 11px;
    height: 11px;
    border-top: 2.5px solid #fff;
    border-right: 2.5px solid #fff;
    border-radius: 1px;
}

#atakvim .ui-datepicker .ui-datepicker-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

#atakvim .ui-datepicker .ui-datepicker-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

/* Geri gidilemiyorsa (minDate) ok soluk */
#atakvim .ui-datepicker .ui-datepicker-prev.ui-state-disabled,
#atakvim .ui-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: .3 !important;
    pointer-events: none !important;
}

/* ========================================================================
   4. HAFTA GÜNLERİ BAŞLIĞI (Pzt, Sal, ...)
   ======================================================================== */

#atakvim .ui-datepicker th {
    color: #99A1B0 !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: .45rem .2rem !important;
    border: none !important;
}

#atakvim .ui-datepicker th span {
    color: #99A1B0 !important;
}

/* ========================================================================
   5. GÜN HÜCRELERİ — TABAN (Müsait)
   ======================================================================== */

#atakvim .ui-datepicker-calendar {
    border-collapse: separate !important;
    border-spacing: 4px !important;
    padding: 0 !important;
    margin: 0 auto .4em !important;
}

#atakvim .ui-datepicker td {
    background: var(--tkv-cell) !important;
    border: none !important;
    border-radius: 12px !important;
    width: 14.28% !important;
    height: 56px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;  /* eski td.disabled line-through kuralını ez */
    opacity: 1 !important;             /* eski td.disabled opacity .6 kuralını ez */
    transition: background-color .15s ease;
}

/* Gün numarası (a/span) — hücre zemini td'de, içerik transparan */
#atakvim .ui-datepicker td a,
#atakvim .ui-datepicker td span {
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    color: var(--tkv-ink) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

#atakvim .ui-datepicker td a:hover {
    background: transparent !important;
    border: none !important;
    color: var(--tkv-ink) !important;
    transform: none !important;
}

/* Fiyat / durum etiketi (td[title]::after) */
#atakvim .ui-datepicker td[title]::after {
    content: attr(title);
    display: block !important;
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tkv-price) !important;
    font-size: .66rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    border-radius: 0 !important;
    padding: 1px 1px 0 !important;
    margin-top: 0 !important;
    z-index: 2 !important;
}

/* Müsait gün hover */
#atakvim .ui-datepicker td:not(.jutdolu):not(.bjutdolu):not(.past):not(.jutgiris):not(.jutcikis):not(.bjutgiris):not(.bjutcikis):not(.cikisbgiris):not(.bgiriscikis):not(.jutgiriscikis):not(.bjutgiriscikis):not(.secilspler):hover {
    background: var(--tkv-cell-hover) !important;
}

/* Diğer ayın günleri — hiç gösterme (boş hücre) */
#atakvim .ui-datepicker td.ui-datepicker-other-month {
    background: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
#atakvim .ui-datepicker td.ui-datepicker-other-month a,
#atakvim .ui-datepicker td.ui-datepicker-other-month span {
    visibility: hidden !important;
}
#atakvim .ui-datepicker td.ui-datepicker-other-month[title]::after {
    display: none !important;
}

/* ========================================================================
   6. GEÇMİŞ GÜNLER — Soluk, etiketsiz
   ======================================================================== */

#atakvim .ui-datepicker td.past,
#atakvim .ui-datepicker td.past.jutdolu {
    background: #F3F5F9 !important;
    background-image: none !important;
    cursor: default !important;
}

#atakvim .ui-datepicker td.past a,
#atakvim .ui-datepicker td.past span {
    color: var(--tkv-past-ink) !important;
    text-decoration: none !important;
    cursor: default !important;
}

#atakvim .ui-datepicker td.past[title]::after {
    display: none !important;
}

/* ========================================================================
   7. DOLU GÜNLER — Kırmızı, sadece numara
   ======================================================================== */

#atakvim .ui-datepicker td.jutdolu:not(.past),
#atakvim .ui-datepicker td.jutgiriscikis:not(.past) {
    background: var(--tkv-red) !important;
    background-image: none !important;
}

#atakvim .ui-datepicker td.jutdolu:not(.past) a,
#atakvim .ui-datepicker td.jutdolu:not(.past) span,
#atakvim .ui-datepicker td.jutgiriscikis:not(.past) a,
#atakvim .ui-datepicker td.jutgiriscikis:not(.past) span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: not-allowed !important;
}

/* "Dolu" etiketini gizle — sadece numara görünsün */
#atakvim .ui-datepicker td.jutdolu[title]::after,
#atakvim .ui-datepicker td.jutgiriscikis[title]::after {
    display: none !important;
}

/* Opsiyonlu / beklemede dolu günler — açık kırmızı, fiyat görünür */
#atakvim .ui-datepicker td.bjutdolu:not(.past),
#atakvim .ui-datepicker td.bjutgiriscikis:not(.past) {
    background: var(--tkv-red-soft) !important;
    background-image: none !important;
}

#atakvim .ui-datepicker td.bjutdolu:not(.past) a,
#atakvim .ui-datepicker td.bjutdolu:not(.past) span,
#atakvim .ui-datepicker td.bjutgiriscikis:not(.past) a,
#atakvim .ui-datepicker td.bjutgiriscikis:not(.past) span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #14181f !important;  /* amber zeminde koyu yazı */
    text-decoration: none !important;
    text-shadow: none !important;
}

#atakvim .ui-datepicker td.bjutdolu[title]::after,
#atakvim .ui-datepicker td.bjutgiriscikis[title]::after {
    color: rgba(20, 24, 31, .8) !important;
}

/* ========================================================================
   8. GİRİŞ / ÇIKIŞ GÜNLERİ — Çapraz bölünmüş hücreler
   ------------------------------------------------------------------------
   Giriş günü: sol üst açık (müsait sabah) / sağ alt kırmızı (dolu gece)
   Çıkış günü: sol üst kırmızı (dolu gece) / sağ alt açık (müsait sabah)
   ======================================================================== */

#atakvim .ui-datepicker td.jutgiris:not(.past) {
    background: linear-gradient(136deg, var(--tkv-cell) 50%, var(--tkv-red) 50%) !important;
}

#atakvim .ui-datepicker td.jutcikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red) 50%, var(--tkv-cell) 50%) !important;
}

/* Beklemede giriş/çıkış — açık kırmızı çapraz */
#atakvim .ui-datepicker td.bjutgiris:not(.past) {
    background: linear-gradient(136deg, var(--tkv-cell) 50%, var(--tkv-red-soft) 50%) !important;
}

#atakvim .ui-datepicker td.bjutcikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red-soft) 50%, var(--tkv-cell) 50%) !important;
}

/* Çıkış + beklemede giriş aynı gün / tersi */
#atakvim .ui-datepicker td.cikisbgiris:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red) 50%, var(--tkv-red-soft) 50%) !important;
}

#atakvim .ui-datepicker td.bgiriscikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red-soft) 50%, var(--tkv-red) 50%) !important;
}

/* Çapraz hücrelerin içeriği transparan + okunur */
#atakvim .ui-datepicker td.jutgiris a, #atakvim .ui-datepicker td.jutgiris span,
#atakvim .ui-datepicker td.jutcikis a, #atakvim .ui-datepicker td.jutcikis span,
#atakvim .ui-datepicker td.bjutgiris a, #atakvim .ui-datepicker td.bjutgiris span,
#atakvim .ui-datepicker td.bjutcikis a, #atakvim .ui-datepicker td.bjutcikis span,
#atakvim .ui-datepicker td.cikisbgiris a, #atakvim .ui-datepicker td.cikisbgiris span,
#atakvim .ui-datepicker td.bgiriscikis a, #atakvim .ui-datepicker td.bgiriscikis span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--tkv-ink) !important;
    text-decoration: none !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, .9) !important;
}

/* Tam kırmızı kombinasyonlarda numara beyaz kalsın */
#atakvim .ui-datepicker td.cikisbgiris a, #atakvim .ui-datepicker td.cikisbgiris span,
#atakvim .ui-datepicker td.bgiriscikis a, #atakvim .ui-datepicker td.bgiriscikis span {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}

/* Çapraz hücre fiyat etiketi — beyaz hâleli koyu yazı */
#atakvim .ui-datepicker td.jutgiris[title]::after,
#atakvim .ui-datepicker td.jutcikis[title]::after,
#atakvim .ui-datepicker td.bjutgiris[title]::after,
#atakvim .ui-datepicker td.bjutcikis[title]::after {
    color: var(--tkv-ink) !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, .9) !important;
}

#atakvim .ui-datepicker td.cikisbgiris[title]::after,
#atakvim .ui-datepicker td.bgiriscikis[title]::after {
    color: rgba(255, 255, 255, .95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}

/* ========================================================================
   9. SEÇİM ARALIĞI — Lacivert
   ======================================================================== */

#atakvim .ui-datepicker td.secilspler {
    background: var(--tkv-sel-mid) !important;
    border: none !important;
}

#atakvim .ui-datepicker td.secilspler a,
#atakvim .ui-datepicker td.secilspler span {
    background: transparent !important;
    color: var(--tkv-navy) !important;
    text-shadow: none !important;
}

#atakvim .ui-datepicker td.secilspler[title]::after {
    color: var(--tkv-navy) !important;
}

/* Aralık başı / sonu — dolgun lacivert */
#atakvim .ui-datepicker td.secilspler.ilki,
#atakvim .ui-datepicker td.secilspler.sonu {
    background: var(--tkv-navy) !important;
    background-image: none !important;
}

#atakvim .ui-datepicker td.secilspler.ilki a, #atakvim .ui-datepicker td.secilspler.ilki span,
#atakvim .ui-datepicker td.secilspler.sonu a, #atakvim .ui-datepicker td.secilspler.sonu span {
    color: #fff !important;
}

#atakvim .ui-datepicker td.secilspler.ilki[title]::after,
#atakvim .ui-datepicker td.secilspler.sonu[title]::after {
    color: rgba(255, 255, 255, .85) !important;
}

/* Çıkış gününden başlayan / giriş gününde biten seçimler (çapraz) */
#atakvim .ui-datepicker td.secilspler.cdansonrailki {
    background: linear-gradient(136deg, var(--tkv-red) 50%, var(--tkv-navy) 50%) !important;
}

#atakvim .ui-datepicker td.secilspler.cdansonrasonu {
    background: linear-gradient(136deg, var(--tkv-navy) 50%, var(--tkv-red) 50%) !important;
}

#atakvim .ui-datepicker td.secilspler.bcdansonrailki {
    background: linear-gradient(136deg, var(--tkv-red-soft) 50%, var(--tkv-navy) 50%) !important;
}

#atakvim .ui-datepicker td.secilspler.bcdansonrasonu {
    background: linear-gradient(136deg, var(--tkv-navy) 50%, var(--tkv-red-soft) 50%) !important;
}

#atakvim .ui-datepicker td.secilspler.cdansonrailki a, #atakvim .ui-datepicker td.secilspler.cdansonrailki span,
#atakvim .ui-datepicker td.secilspler.cdansonrasonu a, #atakvim .ui-datepicker td.secilspler.cdansonrasonu span,
#atakvim .ui-datepicker td.secilspler.bcdansonrailki a, #atakvim .ui-datepicker td.secilspler.bcdansonrailki span,
#atakvim .ui-datepicker td.secilspler.bcdansonrasonu a, #atakvim .ui-datepicker td.secilspler.bcdansonrasonu span {
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}

/* ========================================================================
   10. RESPONSIVE
   ======================================================================== */

@media (max-width: 767px) {
    /* tek ay modu: başlık ve tablo tam genişlik (flex kapsayıcı içinde) */
    #atakvim .ui-datepicker-header {
        width: 100% !important;
    }
    #atakvim .ui-datepicker-calendar {
        width: 100% !important;
    }

    #atakvim .ui-datepicker td {
        height: 52px !important;
        border-radius: 10px !important;
    }

    #atakvim .ui-datepicker td a,
    #atakvim .ui-datepicker td span {
        font-size: .88rem !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    #atakvim .ui-datepicker td[title]::after {
        font-size: .62rem !important;
    }

    #atakvim .ui-datepicker .ui-datepicker-prev,
    #atakvim .ui-datepicker .ui-datepicker-next {
        width: 40px !important;
        height: 40px !important;
    }

    #atakvim .ui-datepicker-title {
        font-size: 1.05rem !important;
        line-height: 40px !important;
    }
}

@media (max-width: 575px) {
    #atakvim .ui-datepicker-calendar {
        border-spacing: 3px !important;
    }

    #atakvim .ui-datepicker td {
        height: 50px !important;
    }
}

/* ========================================================================
   11. DEVİR GÜNLERİ — aynı gün çıkış + giriş: iki rezervasyon arasında
       beyaz çapraz çizgi (sol üst: biten, sağ alt: başlayan rezervasyon)
   ======================================================================== */
#atakvim .ui-datepicker td.jutgiriscikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red) 0%, var(--tkv-red) 46%, #ffffff 46%, #ffffff 54%, var(--tkv-red) 54%, var(--tkv-red) 100%) !important;
}
/* iki opsiyonlu rezervasyon arası */
#atakvim .ui-datepicker td.bjutgiriscikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red-soft) 0%, var(--tkv-red-soft) 46%, #ffffff 46%, #ffffff 54%, var(--tkv-red-soft) 54%, var(--tkv-red-soft) 100%) !important;
}
/* kesin çıkış + opsiyonlu giriş */
#atakvim .ui-datepicker td.cikisbgiris:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red) 0%, var(--tkv-red) 46%, #ffffff 46%, #ffffff 54%, var(--tkv-red-soft) 54%, var(--tkv-red-soft) 100%) !important;
}
/* opsiyonlu çıkış + kesin giriş */
#atakvim .ui-datepicker td.bgiriscikis:not(.past) {
    background: linear-gradient(136deg, var(--tkv-red-soft) 0%, var(--tkv-red-soft) 46%, #ffffff 46%, #ffffff 54%, var(--tkv-red) 54%, var(--tkv-red) 100%) !important;
}