/* ============================================================
   Accessibility (WCAG 2.2 A + AA) – Yunusemre Belediyesi
   Bu dosya erişilebilirlik düzeltmelerini içerir; mevcut stilleri
   override eder ve yardımcı sınıflar tanımlar.
   ============================================================ */

/* --- Skip-link (Ana İçeriğe Atla) — WCAG 2.4.1 ---
   Header CSS'inde .header { z-index: 99999 } var. Bizim z-index'imiz
   bunun üzerinde olmalı. !important + max z-index ile garantiliyoruz. */
a.skip-link,
.skip-link {
  position: fixed !important;
  top: -200px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  /* signed int max */
  background-color: #d32026 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 16px 28px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 0 8px 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: top 0.15s ease-out !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* CSS Containment ile bağımsız stacking context oluştur */
  isolation: isolate !important;
}

a.skip-link:focus,
a.skip-link:focus-visible,
a.skip-link:focus-within,
.skip-link:focus,
.skip-link:focus-visible {
  top: 0 !important;
  /* Skip-link arkaplanı kırmızı — kırmızı border görünmez, beyaz kullan */
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

a.skip-link:hover,
.skip-link:hover {
  top: 0 !important;
  background-color: #b71c1c !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Skip-link hedefi: gerçek içerik başlangıcındaki gizli anchor.
   <main> KENDİSİ fokus hedefi değil (fokus halkası layout'u bozardı). */
#page-content-start {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

#page-content-start:focus,
#page-content-start:focus-visible {
  /* Fokus alındığında görünmesin (visual layout'u bozmasın),
     ama screen reader "Ana içerik" diye duyursun. */
  outline: none !important;
  box-shadow: none !important;
}

/* --- Görsel olarak gizli, ekran okuyucu için açık ---
   Bootstrap 5'te .visually-hidden mevcut; yedek olarak burada da tanımlı. */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Fokus halkası — WCAG 2.4.7 (AA) + 2.4.13 (AA, yeni 2.2) ---
   Klavyeyle fokus alınan her etkileşimli öğede çok belirgin, kontrastlı halka.
   :focus-visible kullanıyoruz ki fare tıklamalarında görünmesin.
   - 4 px sarı outline (yüksek kontrast, açık+koyu zeminlerde görünür)
   - 4 px ofset (öğeden ayırarak vurgu)
   - 3 px iç koyu halka (sarı arkaplanda bile görünür kalsın diye)
   - Geniş halo gölgesi (uzaktan da fark edilir) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-toggle:focus-visible,
.form-control:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  /* isolation ile stacking context — fokus halkası başka elementlerin arkasında kalmasın */
  isolation: isolate;
  transition: outline 0.1s ease;
}

/* Carousel butonları gibi position:absolute olan elementler — fokus
   halkası kendi konumlarını koruyarak üstte kalsın.
   Kendi border-radius'larını da bozmasın (dairesel ise dairesel kalsın). */
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.carousel-pause-toggle:focus-visible,
.navigation-arrow:focus-visible,
.slider-navigation-int:focus-visible,
.slider-navigation-announcement:focus-visible,
.slider-navigation-announcement.prev:focus-visible,
.slider-navigation-announcement.next:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border-radius: inherit !important;
}

/* Dropdown toggle butonları gibi navbar içindeki ögelerde de aynı */
.dropdown-toggle:focus-visible,
.nav-link:focus-visible {
  border-radius: inherit !important;
}

/* Form alanları için ek olarak iç sınır rengi de değişsin */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
  border-color: #1a1a1a !important;
}

/* Dropdown menü öğeleri için fokus stilini sıkılaştır - dışına taşmasın */
.dropdown-menu a:focus-visible,
.dropdown-menu [role="button"]:focus-visible,
.dropdown-menu .nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid #c72029 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

/* --- Global yakalama kuralı — yukarıdaki listede olmayan tüm element'ler ---
   .slick-prev/next/arrow, .slick-dots button, .carousel-indicators li,
   .tab-pane, custom div[tabindex], 3rd-party widget'lar vb için yedek.
   Border-radius zorlamıyoruz — element kendi border-radius'unu korusun
   (Chrome 94+ outline element'in border-radius'unu takip eder, dairesel
   elementlerde halka da dairesel olur). */
:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* :focus-visible (klavye) DEĞİL ama :focus (fare/touch) olan elementlerde
   default kalın halkayı temizle. Bootstrap'in box-shadow focus halkalarını da
   bastır — sadece klavye için belirgin halka istiyoruz. */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Slick slider butonları — tema zaten kendi halka stilini koyabiliyor,
   override edilsin */
.slick-prev:focus-visible,
.slick-next:focus-visible,
.slick-arrow:focus-visible,
.slick-dots li button:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Carousel sayfa numarası göstergeleri (haberler altındaki 1-10 numaralar) */
.carousel-indicators li:focus-visible,
.carousel-indicators [data-bs-target]:focus-visible,
.news-navigation-number:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* --- Kart yapılı içerikler — Meclis üyeleri, haberler, kategori kartları vb ---
   Yapı: <div class="...-thumb-container"> içinde <a> (default display:inline)
   ve içinde block-level <div>'ler. Tarayıcı inline <a>'nın outline'ını içerik
   block'ları etrafında çoklu/parçalı render edebiliyor, halka belirgin
   görünmüyor. <a>'yı block yapıp halkayı kartın TAMAMINI çevreleyecek şekilde
   net göster. */
.person-thumb-container > a,
.news-thumb-container > a,
.thumb-container > a,
.default-thumb-container > a {
  display: block;
  border-radius: inherit;
}
.person-thumb-container > a:focus-visible,
.news-thumb-container > a:focus-visible,
.thumb-container > a:focus-visible,
.default-thumb-container > a:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
  border-radius: 15px !important; /* kart radius'una uy */
}

/* Navbar içindeki dropdown-toggle'lar için özel ayar */
.navbar .nav-link:focus-visible,
.navbar .dropdown-toggle:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* --- Eski focus stillerinin yer aldığı yerlerde kaldırılmasın diye
   default'a dönmeyi engelle — bazı Bootstrap override'lar :focus için
   `outline: none` kullanıyor; geri ekleyelim. */
:focus:not(:focus-visible) {
  outline: 0;
}

/* --- Reduced Motion — WCAG 2.3.3 (AAA) + iyi pratik ---
   Kullanıcı sistem ayarında "azalt" seçtiyse animasyonları minimuma indir. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Hedef boyutu — WCAG 2.5.8 (AA, yeni 2.2) — minimum 24x24 CSS px ---
   Çok küçük bağlantı/butonları görsel olarak büyütmek yerine
   tıklanabilir alanı genişleten görünmez padding'le çözüyoruz. */
.icon-menu,
.icon-link,
.social-media-link,
.navigation-arrow,
.bottom-menu-btn {
  min-width: 24px;
  min-height: 24px;
}

/* --- Button default reset (scrollTopBtn artık <button> oldu) --- */
button.scrollTopBtn {
  appearance: none;
  font: inherit;
  padding: 0;
  /* Renkler/border .scrollTopBtn class kuralından geliyor */
}

/* --- Carousel duraklat/oynat butonu — WCAG 2.2.2 (A) ---
   5+ saniye süren otomatik geçişlere kullanıcı kontrolü zorunlu.
   Default: küçük dairesel buton (kullanılmıyor şu an ama kalsın).
   Spesifik konum overrideları: .banner-pause-toggle, .announcement-pause-toggle */
.carousel-pause-toggle {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Anasayfa banner pause butonu — home-navigation container'ının doğrudan
   çocuğu. Flex sırasının DIŞINDA, absolute olarak sol kenara yerleştirilmiş.
   Yuvarlak, beyaz, sadece ikon.
   NOT: .home-navigation zaten position:absolute (bottom:0); o yüzden override
   etmiyoruz — buton .home-navigation'a göre absolute konumlanacak. */
.banner-pause-toggle {
  position: absolute !important;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* Yuvarlak, beyaz */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #c72029;
  border: solid 1px #ffffff;
  /* İkonu ortala */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.banner-pause-toggle:hover,
.banner-pause-toggle:focus-visible {
  background-color: #c72029;
  color: #ffffff;
  border-color: #c72029;
}

.banner-pause-toggle[aria-pressed="true"] {
  /* Duraklatılmışken kırmızı zeminde beyaz ikon (ters kontrast) */
  background-color: #c72029;
  color: #ffffff;
  border-color: #ffffff;
}

/* Mobil — biraz daha küçük */
@media (max-width: 991px) {
  .banner-pause-toggle {
    width: 40px;
    height: 40px;
    left: 10px;
    font-size: 14px;
  }
}

/* Duyurular için pause butonu — carousel kutusunun SAĞ ÜSTÜNDE,
   ok butonlarıyla AYNI görünümde (slider-navigation-announcement stili).
   Carousel <div>'ine `position-relative` eklendiği için absolute konum
   carousel'in içinde sağ üst köşeye gider. */
.announcement-pause-toggle.carousel-pause-toggle,
.announcement-pause-toggle {
  /* Pozisyon — kutunun sağ üstü */
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  /* Banner'daki siyah/şeffaf stili sıfırla, slider-navigation-announcement görünümünü kullan */
  background-color: #e4e4e4 !important;
  color: #838383 !important;
  border: solid 1px #e4e4e4 !important;
  border-radius: 50% !important;
  width: 45px !important;
  height: 45px !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.announcement-pause-toggle:hover,
.announcement-pause-toggle:focus-visible {
  background-color: #c72029 !important;
  border-color: #c72029 !important;
  color: #ffffff !important;
}

.announcement-pause-toggle[aria-pressed="true"] {
  /* Duraklatılmışken kırmızı zemin */
  background-color: #c72029 !important;
  border-color: #c72029 !important;
  color: #ffffff !important;
}

/* Slick slider pause butonu — slider-navigation-int ile aynı görünüm.
   .slider-navigation-int class'ı style.css'de kırmızı yuvarlak buton stilini
   sağlıyor; biz sadece <button> default'larını sıfırlayıp aynı görünümü
   koruyoruz. Background/color/border'ı override ETMİYORUZ. */
.slider-pause-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  /* <button> default browser style'ı temizle ama slider-navigation-int kalsın */
  font: inherit;
}

.slider-pause-toggle[aria-pressed="true"] {
  /* Duraklatılmışken kontrast: kırmızı yerine ters renkler */
  background-color: #ffffff !important;
  color: #c72029 !important;
}

/* --- Cookie banner butonu için odak vurgusu ---
   Üzerine yapılmış inline onclick nedeniyle klavye işleyişi default. */
#cb-cookie-banner button:focus-visible {
  outline: 3px solid #c72029;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Form alanlarındaki yardımcı metinler (form-text) için kontrast ---
   Default Bootstrap form-text 6c757d, koyu zeminde okunmayabilir. */
.form-text {
  color: #495057;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* --- Zorunlu alan göstergesi rengi (kontrast için) --- */
.text-danger {
  color: #c82333 !important;
}

/* --- Dosya boyutu metni kontrastı — WCAG 1.4.3 (AA) ---
   style.css .text-file-size #7c7c7c → beyaz zeminde ~3.45:1 (fail AA).
   #495057 ile ~6.83:1 (pass AA). */
.text-file-size {
  color: #495057 !important;
}
.text-file-name {
  color: #212529 !important;
}

/* --- Liste içerik tarih (örn. Meclis Kararları) — WCAG 1.4.3 (AA) ---
   style.css'de .list-content-date #a5a5a5 (2.49:1 fail), takvim ikonu
   #e4e4e4 (1.5:1 fail — neredeyse görünmez).
   Orta-koyu gri kullanıyoruz: simsiyah değil, AA geçer. */
.list-content .list-content-date {
  color: #595959 !important; /* ~7:1 — AA pass, gri tonda */
}
.list-content .list-content-date i {
  color: #6c757d !important; /* ~5:1 — AA pass, ikon hafif daha açık */
}

/* Aynı sorun: müdürlük detay haberler tab'ı, .news-thumb-date — #a5a5a5 fail */
.news-thumb-date span,
.news-thumb-date i {
  color: #595959 !important;
}

/* Haber detay sayfası — üst tarih ve sağ menü "diğer haberler" tarih — #a5a5a5 fail */
.content-main-date,
.content-main-date i,
.content-main-date span,
.side-menu-date {
  color: #595959 !important;
}

/* --- Duyurular listesi mobilde tarih + metin yan yana ---
   Template'te d-flex sabit, tarih kutusunun mobilde yer kaplamasını
   önlemek için küçük ekranlarda kompakt boyut. */
@media (max-width: 575.98px) {
  .announcement .announcement-date {
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 8px 6px !important;
    font-size: 13px;
    border-radius: 8px;
  }
  .announcement .announcement-date-day {
    font-size: 16px;
    line-height: 1.1;
  }
  .announcement .announcement-date-month {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 2px;
  }
  .announcement h5 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
  }
}

/* --- DB rich-text içerik linkleri — duyuru/haber/etkinlik vb detay sayfaları ---
   İçerik editöründen gelen HTML'lerde inline style ile açık mavi
   (rgb(77,153,230) ≈ #4D99E6) link rengi atılıyor → beyaz zeminde ~3.16:1 FAIL.
   .set-font-size tüm detay sayfalarında içerik container'ı; içindeki linkler
   ve link içindeki span'lara kurum kırmızısı zorlanır → ~5.5:1 ✓ AA pass.
   Altı çizili kalır (link belirginliği). */
.set-font-size a,
.set-font-size a *,
.set-font-size a span,
.set-font-size a span[style] {
  color: #c72029 !important;
  background-color: transparent !important;
}
.set-font-size a:hover,
.set-font-size a:hover * {
  color: #8a161c !important; /* hover'da biraz daha koyu kırmızı — ~7:1 */
}

/* --- DB rich-text içerik mobilde taşma fix — duyuru/haber vb detay sayfaları ---
   Editörden gelen içerikte uzun URL'ler, geniş tablolar, büyük resimler
   container'dan taşıyor. word-break + max-width ile sığdır.
   Tablolar yatayda scroll edebilsin. */
.set-font-size,
.set-font-size * {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.set-font-size a,
.set-font-size a * {
  overflow-wrap: anywhere;
  word-break: break-all;
}
.set-font-size img,
.set-font-size video,
.set-font-size iframe {
  max-width: 100% !important;
  height: auto !important;
}
.set-font-size table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.set-font-size pre,
.set-font-size code {
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 575.98px) {
  /* Mobilde içerik wrapper'ın iç padding'ini biraz azalt — fazla yan boşluk varsa */
  .set-font-size {
    overflow-x: hidden;
  }
}

/* --- Breadcrumb kontrast — WCAG 1.4.3 (AA) ---
   .main-header bg #f3f3f3, default text #6c757d = 4.08:1 (yetersiz).
   #495057 ile 6.83:1 sağlanır. */
.main-header-title .breadcrumb li,
.main-header-title .breadcrumb li span,
.main-header-title .breadcrumb-item+.breadcrumb-item::before {
  color: #495057 !important;
}

/* Breadcrumb aktif (current page) — dark olarak işaretli ve bold */
.main-header-title .breadcrumb-item.active {
  color: #212529 !important;
  font-weight: 500;
}

/* Breadcrumb link — zaten siyah ama hover'da kırmızı kontrastı koru */
.main-header-title .breadcrumb li a {
  color: #212529 !important;
}

.main-header-title .breadcrumb li a:hover,
.main-header-title .breadcrumb li a:focus {
  color: #a51920 !important;
  /* #d32026 → koyulaştırıldı, daha iyi kontrast */
  text-decoration: underline;
}

/* --- Genel olarak Bootstrap'in muted/secondary renklerini güçlendir
   Sadece açık zeminde olanlar — koyu zeminde bunlar zaten OK. */
.text-muted {
  color: #495057 !important;
  /* Bootstrap default #6c757d -> daha koyu */
}

.text-secondary {
  color: #495057 !important;
}

/* --- Link altı çizgisi (link-text differentiation) — WCAG 1.4.1 ---
   İçerik bölgelerindeki linkler için renk + alt çizgi.
   Buton görünümündeki linkler hariç tutulur. */
main p a:not(.btn):not(.nav-link):not(.dropdown-item),
main li a:not(.btn):not(.nav-link):not(.dropdown-item):not(.stretched-link),
.event-content-container a:not(.btn),
.modal-body a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Form alanlarında hata vurgusu (WCAG 3.3.1) ---
   .is-invalid class'ı uygulandığında renk + ikon hatayı belirtir.
   Sadece kırmızı çerçeveden fazlasını sağlıyoruz: hata mesajı eşliği önerilir. */
.form-control[aria-invalid="true"],
.form-control.is-invalid {
  border-color: #c82333 !important;
  border-width: 2px !important;
  background-color: #fff5f5;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c82333'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM7 4h2v5H7V4zm0 6h2v2H7v-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
}

/* Geçerli alan göstergesi */
.form-control.is-valid {
  border-color: #198754 !important;
}

/* Hata mesajı görünür */
.invalid-feedback.d-block {
  display: block !important;
  color: #c82333;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.35rem;
  padding-left: 0.25rem;
}

/* KVKK checkbox için hata mesajı yerleşimi */
.kvkk-checkbox+.invalid-feedback {
  margin-left: 0;
}

/* Form üst hata özeti (live region) */
#formErrorSummary {
  display: block;
  border-left: 4px solid #c82333;
  font-weight: 500;
}

/* Modal scrollable body — klavye odağı ile scroll yapılabilsin */
.modal-body[tabindex="0"]:focus-visible {
  outline-offset: -4px;
}

.modal-body[tabindex="0"] {
  /* uzun metin için scroll ipucu */
  scrollbar-width: thin;
}

/* --- Custom Checkbox klavye erişimi — WCAG 2.1.1 + 2.4.7 ---
   default.css'de .custom-checkbox input "width:0;height:0" ile tab order
   dışı kalıyordu. Boyut veriyoruz (görsel olarak hâlâ saydam) ki Tab ile
   odaklanılabilsin ve fokus halkası .checkmark üzerinde görünsün. */
.custom-checkbox input,
.custom-checkbox input[type="checkbox"] {
  width: 25px !important;
  height: 25px !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  /* opacity:0 görsel olarak gizler, position:absolute yer kaplamasın */
  /* Klavyeyle tab order'a girer */
}

/* Native input fokus aldığında, görsel "checkmark" kutusu üzerinde
   belirgin fokus halkası göster. Hem :focus hem :focus-visible kullanıyoruz;
   bazı tarayıcılar opacity:0 input'ta :focus-visible tetiklemeyebiliyor. */
.custom-checkbox input:focus ~ .checkmark,
.custom-checkbox input:focus-visible ~ .checkmark {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border-radius: 5px;
}

/* Checked + odaklanmış durum daha belirgin */
.custom-checkbox input:checked:focus-visible~.checkmark {
  background-color: #c72029 !important;
  border-color: #c72029 !important;
}

/* Aynısı .custom-option (radio benzeri) için de geçerli olsun */
.custom-option input,
.custom-option input[type="radio"],
.custom-option input[type="checkbox"] {
  width: 25px !important;
  height: 25px !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

.custom-option input:focus-visible~.checkmark,
.custom-option input:focus-visible~.optionmark {
  outline: 3px solid #c72029 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* --- Focus Not Obscured — WCAG 2.4.11 (AA, yeni 2.2) ---
   Sticky/fixed header (.fixed-top) odaklanılan içeriği örtmesin diye
   smooth-scroll için margin tampon. */
html {
  scroll-padding-top: 120px;
}

:target {
  scroll-margin-top: 120px;
}

#main-content {
  scroll-margin-top: 120px;
}

/* --- Ana sayfa "Tarih Seç" modu ---
   Mevcut FullCalendar görünümünü BOZMADAN sadece etkinlik metinlerini gizle
   ve hücreleri tıklanabilir/vurgulanabilir yap. Ay başlığı, hafta günleri,
   gün numaraları hepsi olduğu yerde ve boyutta kalır. */
.events-calendar-container.date-select-mode .fc-daygrid-day-events,
.events-calendar-container.date-select-mode .fc-daygrid-day-bottom,
.events-calendar-container.date-select-mode .fc-daygrid-event-harness,
.events-calendar-container.date-select-mode .fc-event,
.events-calendar-container.date-select-mode .fc-daygrid-more-link {
  display: none !important;
}

/* Hücreler tıklanabilir hissini versin — biraz büyük + iç boşluk */
.events-calendar-container.date-select-mode .fc-daygrid-day {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.events-calendar-container.date-select-mode .fc-daygrid-day:hover {
  background: rgba(199, 32, 41, 0.08);
}
.events-calendar-container.date-select-mode .fc-daygrid-day-frame {
  padding: 21px 13px !important;
}
/* --- Mobilde takvim kompakt (A + B3): hücreler küçülür, toolbar tek satır ---
   ≤576px: hücre padding azalır (taşma önlenir), toolbar butonları ve başlığı
   daha küçük fontla tek satıra sıkışır. */
@media (max-width: 576px) {
  .events-calendar-container.date-select-mode .fc-daygrid-day-frame {
    padding: 9px 4px !important;
  }
  .events-calendar-container.date-select-mode .fc-daygrid-day-number {
    font-size: 15px !important;
    padding: 3px 6px !important;
  }

  /* Toolbar kompakt — tüm butonlar + başlık tek satırda */
  .events-calendar-container .fc-toolbar {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .events-calendar-container .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
  }
  .events-calendar-container .fc-toolbar-title {
    font-size: 14px !important;
    white-space: nowrap;
    text-align: center;
  }
  .events-calendar-container .fc-button {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .events-calendar-container .fc-icon {
    font-size: 14px !important;
  }
  .events-calendar-container .fc .fc-toggleSelect-button {
    padding: 4px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

/* Klavye ile hücre üzerine gelindiğinde belirgin odak halkası
   Sadece :focus-visible (klavye) — fare tıklamasında halka gösterilmez, sadece
   .selected-day sınıfının işareti kalır. */
.events-calendar-container.date-select-mode .fc-daygrid-day:focus-visible {
  outline: 3px solid #c72029 !important;
  outline-offset: -3px !important;
  z-index: 5;
  position: relative;
}
.events-calendar-container.date-select-mode .fc-daygrid-day:focus:not(:focus-visible) {
  outline: none !important;
}
.events-calendar-container.date-select-mode .fc-daygrid-day-number {
  font-size: 18px !important;
  font-weight: 600;
  padding: 6px 10px !important;
}

/* Seçili gün — kurum kırmızısı hafif zemin + belirgin çerçeve */
.events-calendar-container.date-select-mode .fc-day.selected-day {
  background: rgba(199, 32, 41, 0.18) !important;
  box-shadow: inset 0 0 0 2px #c72029;
}

/* Bugün, seçim modunda mavi zeminde belirgin kalsın */
.events-calendar-container.date-select-mode .fc-day-today {
  background: rgba(1, 90, 168, 0.08) !important;
}
.events-calendar-container.date-select-mode .fc-day-today .fc-daygrid-day-number {
  color: #015aa8 !important;
  font-weight: 700;
}
.events-calendar-container.date-select-mode .fc-day-today.selected-day {
  background: rgba(199, 32, 41, 0.18) !important; /* seçim baskın */
  box-shadow: inset 0 0 0 2px #c72029, inset 0 0 0 4px #015aa8;
}

/* FullCalendar toolbar'a yerleştirilen "Tarih Seç" butonu — Yunusemre teması */
.fc .fc-toggleSelect-button {
  background-color: #c72029 !important;
  border-color: #c72029 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 6px 14px !important;
}
.fc .fc-toggleSelect-button:hover,
.fc .fc-toggleSelect-button:focus,
.fc .fc-toggleSelect-button:focus-visible {
  background-color: #8a161c !important;
  border-color: #8a161c !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
/* Aktif durum (aria-pressed="true") renk DEĞİŞMESİN — sadece metin değişir */

/* --- Takvim renk ve kontrast düzeltmeleri — WCAG 1.4.3 (AA) ---
   Selçuk'tan kopyalanan calendar.css'te varsayılan renkler çok açık tonlar:
   - .calendar-arrow, .calendar-display: #ddd (~1.5:1 fail)
   - .week (hafta isimleri), .calendar-display .m: #888 (~3.5:1 borderline)
   - .old, .new (önceki/sonraki ay günleri): #ccc (~1.8:1 fail)
   - li[disabled]: #bbb / #eee (fail)
   Yunusemre teması renkleriyle güncelleniyor:
   - Bugün → ana sayfa alt kutuların mavisi #015aa8
   - Seçili → kurum kırmızısı #c72029 */

/* Bugün ve seçili gün */
.calendar .calendar-views .now {
  color: #ffffff !important;
  background: #015aa8 !important; /* ana sayfa alt kutu mavisi */
  border-radius: 50% !important;
}
.calendar .calendar-views .selected {
  color: #ffffff !important;
  background: #c72029 !important; /* kurum kırmızısı */
  border-radius: 50% !important;
}
.calendar .calendar-views .now.selected {
  background: #c72029 !important; /* seçim öncelikli */
  outline: 2px solid #015aa8 !important; /* bugün olduğunu işaretle */
  outline-offset: -2px !important;
}

/* Hizalama — gün numarası tam ortala */
.calendar .days li,
.calendar .week li,
.calendar .month-items li {
  text-align: center !important;
  position: relative;
}

/* "Bugün" / "seçili" hücresindeki etkinlik noktası beyaz */
.calendar .calendar-views .now .dot,
.calendar .calendar-views .selected .dot {
  background: #ffffff !important;
}

/* Etkinlik noktası (varsayılan) — yeterli kontrastlı kırmızı */
.calendar .calendar-views .dot {
  background: #c72029 !important;
}

/* Ay/yıl başlığı (Mart 2026 vb) — koyu, okunaklı */
.calendar-display,
.calendar-display .m,
.calendar-display:hover {
  color: #1f1f1f !important;
}

/* Ok butonları (önceki/sonraki ay) — koyu gri, yeterli kontrast */
.calendar-arrow,
.calendar-arrow span,
.calendar-arrow span:hover {
  color: #1f1f1f !important;
}

/* Hafta isimleri (Pzt, Sal, …) — orta-koyu gri */
.calendar-views .week,
.calendar-views .week li {
  color: #424143 !important; /* ~9:1 — AAA */
}

/* Önceki/sonraki ay günleri (gri günler) — okunaklı orta gri */
.calendar-views .days .old,
.calendar-views .days .new {
  color: #6c757d !important; /* ~4.6:1 — AA pass */
}

/* Disabled günler */
.calendar li[disabled],
.calendar li.old[disabled],
.calendar li.new[disabled] {
  color: #8e9298 !important; /* ~3.5:1 — disabled için kabul edilebilir */
}

/* --- Header navigation kontrast düzeltmesi — WCAG 1.4.3 (AA) ---
   Mevcut gradient karartma .main-menu-bg::before pseudo elementinde:
   linear-gradient(0deg, #f1f1f100 0%, #0000009e 50%, #000000 100%) + opacity 0.9
   Görsel olarak header üst kısmı koyulaşıyor, beyaz yazı okunabilir.
   ANCAK WAVE/aXe pseudo elementleri contrast hesabına dahil etmiyor —
   metnin parent zincirinde opak BG bulamayıp default beyaz varsayıyor → FAIL.

   Çözüm: Aynı gradient'i .main-menu-bg öğesinin KENDİ background-image'ine
   taşıyıp pseudo'yu gizliyoruz. Sıfır görsel değişim (aynı gradient aynı yerde),
   WAVE artık element'in kendi BG'sini okuyor → kontrast geçer.
   .header-internal (iç sayfalar) beyaz BG kullandığından specificity ile
   etkilenmez. */
.main-menu-bg {
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.56) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.main-menu-bg:before {
  display: none !important;
}
/* İç sayfa header'ı beyaz arkaplan kullandığında gradient'i devreden çıkar */
.header-internal .main-menu-bg {
  background-image: none;
}

/* --- Hero carousel görselleri artık <img alt="..."> kullanıyor ---
   Eskiden CSS background-image ile veriliyordu; alt-text uyumu için <img>
   etiketine geçildi. Görsel: eskiyle aynı (fluid + cover) — img'yi
   carousel-item'a tam sığdırıyoruz. */
.home-banner .carousel-item {
  overflow: hidden;
}
.home-banner .carousel-item .home-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* --- Header YUNUSEMRE / GÜNCEL dropdown slider ok butonları ---
   .navigation-arrow varsayılan: beyaz yarı-saydam zemin + beyaz ikon.
   Koyu zeminde tasarlanmış ama header dropdown içi BEYAZ → görünmüyorlar.
   Dropdown içindeki kullanım için koyu zemin + beyaz ikon (~10:1 kontrast). */
.dropdown-menu .navigation-arrow,
.main-dropdown .navigation-arrow,
.header-slide-yunusemreDeYasam-slide-prev,
.header-slide-yunusemreDeYasam-slide-next,
.header-slide-guncel-slide-prev,
.header-slide-guncel-slide-next {
  background-color: rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.dropdown-menu .navigation-arrow:hover,
.main-dropdown .navigation-arrow:hover,
.header-slide-yunusemreDeYasam-slide-prev:hover,
.header-slide-yunusemreDeYasam-slide-next:hover,
.header-slide-guncel-slide-prev:hover,
.header-slide-guncel-slide-next:hover,
.header-slide-yunusemreDeYasam-slide-prev:focus-visible,
.header-slide-yunusemreDeYasam-slide-next:focus-visible,
.header-slide-guncel-slide-prev:focus-visible,
.header-slide-guncel-slide-next:focus-visible {
  background-color: #c72029 !important;
  color: #ffffff !important;
}

/* --- Header YUNUSEMRE dropdown slick slider kartları — WCAG 1.4.3 (AA) ---
   Kartlarda .thumb-info içinde beyaz yazı (.content-title, "Keşfet"), .thumb-image
   içinde ise arka plan olarak <img>. Görsel karartma .thumb-image::after pseudo
   üzerinde — WAVE pseudo'yu okuyamıyor → "Very low contrast" hatası.
   Hero çözümüyle aynı teknik: metnin ortak atası .thumb-container'a
   background-image gradient veriyoruz. İçindeki <img> gradient'i tamamen
   kapladığı için GÖRÜNTÜDE değişim yok, sadece WAVE tanımlı bir BG okuyabilir. */
.thumb-container {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* --- Hero alt çubuk (.home-navigation) — başkan ismi, sosyal medya,
   menü butonları (E-BELEDİYE, HİZMETLERİMİZ, BİLGİ HİZMETLERİ, YUNUSEMRE)
   Mevcut karartma .home-banner .carousel-item::before pseudo'sunda (style.css).
   WAVE pseudo'yu okumadığı için aynı görseli .home-navigation öğesinin KENDİ
   background-image'ine paralel olarak ekliyoruz. Görsel etki: alt çubuk biraz
   daha kontrastlı (zaten okunabilirliği arttırır), WAVE artık element BG'sini
   okuyabiliyor. */
.home-navigation {
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 45%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* --- Haberler carousel başlık/açıklama (.page-gallery .carousel-caption)
   Haber görseli üzerinde tarih, başlık (h4), açıklama (p) — kendi BG'si YOK.
   WAVE default beyaz → beyaz yazı vs beyaz FAIL. Görsel olarak da hâlihazırda
   okunabilirlik düşük; alt %60'a gradient karartma ekliyoruz. */
.page-gallery .carousel-caption {
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 0 0 15px 15px;
  padding-top: 60px; /* gradient'in tepesi yazıların hemen üstünde başlasın */
}

/* --- Sayfa-içi tab linkler (.nav-tabs içindeki pasif sekme)
   Aktif tab kırmızı/koyu zeminli ama pasif tab açık gri renkte, beyaz zemin
   üzerinde kontrast düşük. Pasif tab metnini koyu griye çek. */
.nav-tabs .nav-link:not(.active) {
  color: #2b2b2b !important;
}
.nav-tabs .nav-link:not(.active):hover {
  color: #c72029 !important;
}

/* --- Hero (.home-banner) carousel ileri/geri okları ---
   Mevcutta Bootstrap default — yarı şeffaf siyah arka, beyaz ikon, opacity 0.5.
   WAVE bunu okuyamayıp kontrast hatası veriyor. Opak koyu zemin ver. */
.home-banner .carousel-control-prev,
.home-banner .carousel-control-next {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-banner .carousel-control-prev {
  left: 20px;
}
.home-banner .carousel-control-next {
  right: 20px;
}
.home-banner .carousel-control-prev:hover,
.home-banner .carousel-control-next:hover,
.home-banner .carousel-control-prev:focus-visible,
.home-banner .carousel-control-next:focus-visible {
  background-color: #c72029;
  opacity: 1;
}

/* --- Haberler (.page-gallery) ileri/geri okları ---
   style.css'de .navigation-arrow rgba(255,255,255,0.3) — yarı şeffaf beyaz,
   beyaz ikon ile blend sonrası FAIL. Koyu opak zemin + beyaz ikon. */
.page-gallery .navigation-arrow {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
  border: solid 1px rgba(255, 255, 255, 0.4) !important;
}
.page-gallery .carousel-control-prev:hover .navigation-arrow,
.page-gallery .carousel-control-next:hover .navigation-arrow,
.page-gallery .carousel-control-prev:focus-visible .navigation-arrow,
.page-gallery .carousel-control-next:focus-visible .navigation-arrow {
  background-color: #c72029 !important;
  border-color: #ffffff !important;
}

/* --- Haberler durdurma butonu ---
   Mevcutta konumsuz, sayfanın alt-orta yerine düşmüş. Carousel'in SAĞ ÜST
   köşesine absolute olarak yerleştir, ok butonlarıyla aynı stil. */
.page-gallery .carousel-pause-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: solid 1px rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-gallery .carousel-pause-toggle:hover,
.page-gallery .carousel-pause-toggle:focus-visible {
  background-color: #c72029;
  color: #ffffff;
  border-color: #ffffff;
}
.page-gallery .carousel-pause-toggle[aria-pressed="true"] {
  background-color: #c72029;
  color: #ffffff;
  border-color: #ffffff;
}

/* --- .visually-hidden — WAVE false positive düzeltmesi ---
   Bootstrap'in .visually-hidden class'ı ekran okuyucular için DOM'da metni
   tutar, görsel olarak clip:rect(0,0,0,0) + 1x1 px ile sıfır boyuta indirir.
   ANCAK rengini tanımlamaz; WAVE bu elementi DOM'da görüp parent BG'sinde
   opak değer bulamayınca default beyaz varsayıyor → "beyaz yazı + beyaz BG"
   yorumlayıp "Very low contrast" rapor ediyor (false positive).

   Yüksek kontrast renk değerleri atıyoruz: element zaten 1x1px clip ile
   sıfır görünür alanda olduğundan KULLANICIYA görünmez — sadece WAVE'in
   kontrast hesabını tatmin eder. */
.visually-hidden,
.sr-only {
  color: #000000 !important;
  background-color: #ffffff !important;
}

/* --- Yüksek kontrast modunda (Windows Forced Colors) öğelerin
   görünürlüğünü garanti et. */
@media (forced-colors: active) {

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid CanvasText;
  }

  .skip-link {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}