/* ============================================================
   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. */
/* Masaüstü kontrol çubuğu ‹ ⏸ › — görselin alt-ortasında, alt menünün
   (.home-navigation) hemen üstünde. Çubuk .home-navigation'ın çocuğu ve o da
   absolute (bottom:0) olduğu için bottom:100% menünün üst kenarına hizalar;
   margin ile araya boşluk koyuyoruz.
   (Konumlandırma eskiden .banner-pause-toggle üzerindeydi; oklar da yanına
   geldiği için gruba taşındı.) */
.banner-desktop-controls {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================================
   HERO SLAYT GÖSTERGESİ (dotnav) — developer.apple.com davranışı
   Aktif nokta bir çubuğa dönüşür ve otomatik geçiş süresince dolar.
   Kap: yarı saydam koyu hap; fotoğraf üzerinde her zaman okunur.
   ========================================================================== */
.banner-dotnav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 50px;
  padding: 0 14px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Görünür nokta 8px; buton 24px (WCAG 2.5.8 asgari hedef boyutu).
   Fazlalık alan şeffaf, yalnızca dokunma/tıklama payı. */
.banner-dotnav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.4s ease;
}
.banner-dotnav-item.current {
  width: 72px;
}

.banner-dotnav-track {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  transition: width 0.4s ease;
}
.banner-dotnav-item.current .banner-dotnav-track {
  width: 100%;
  /* Aktif rayın boş kısmı daha sönük olsun ki beyaz dolum belirgin okunsun */
  background-color: rgba(255, 255, 255, 0.28);
}

/* Dolum: otomatik geçiş süresiyle (5sn) aynı. Animasyon her slayt
   değişiminde JS tarafından yeniden başlatılır. */
.banner-dotnav-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background-color: #ffffff;
}
/* VARSAYILAN: animasyon çalışır. JS hiç yüklenmezse ya da tarayıcı eski bir
   accessibility.js'i önbellekten verirse çubuk yine de dolar — gösterge asla
   ölü kalmaz. (Bu kural bilinçli olarak JS'e bağlı DEĞİL.) */
.banner-dotnav-item.current .banner-dotnav-fill {
  animation: banner-dotnav-progress 5s linear forwards;
}

/* JS çalışıyorsa (<html class="js-dotnav">) senkronu o üstlenir:
   CSS animasyonu sayfa çizilir çizilmez başlar, Bootstrap ise otomatik
   geçiş sayacını 'load' olayında kurar. Aradaki fark yüzünden ilk çubuk
   erken dolup bekliyordu; bu yüzden JS varken sayaç kurulana kadar
   duraklatıyor, sonra .is-armed ile tam o anda başlatıyoruz. */
.js-dotnav .banner-dotnav .banner-dotnav-item.current .banner-dotnav-fill {
  animation-play-state: paused;
}
.js-dotnav .banner-dotnav.is-armed .banner-dotnav-item.current .banner-dotnav-fill {
  animation-play-state: running;
}
/* Duraklat butonuyla eşlenir. İki sınıfı birden taşıdığı için özgüllüğü
   yukarıdaki .is-armed kuralından yüksek; sıradan bağımsız kazanır. */
.js-dotnav .banner-dotnav.is-armed.is-paused
  .banner-dotnav-item.current
  .banner-dotnav-fill {
  animation-play-state: paused;
}

.banner-dotnav-item:hover .banner-dotnav-track {
  background-color: rgba(255, 255, 255, 0.65);
}
.banner-dotnav-item:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 999px;
}

@keyframes banner-dotnav-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Hareket azaltma tercihi: dolum animasyonu yerine dolu göster */
@media (prefers-reduced-motion: reduce) {
  .banner-dotnav-item,
  .banner-dotnav-track {
    transition: none;
  }
  .banner-dotnav-item.current .banner-dotnav-fill {
    animation: none;
    width: 100%;
  }
}

/* Mobilde butonlar 44px; gösterge de onunla aynı yükseklikte olsun */
@media (max-width: 991.98px) {
  .banner-dotnav {
    height: 44px;
    padding: 0 10px;
  }
  .banner-dotnav-item.current {
    width: 56px;
  }
}

/* Dar telefonlar (≤380px): çubuk ekrana sığmıyordu (356px > 320px) ve
   yatay kaydırma yaratıyordu. Nokta HEDEFLERİ 24px kalıyor (WCAG 2.5.8);
   yalnızca aktif çubuk ve aradaki boşluklar kısalıyor. */
@media (max-width: 380px) {
  .banner-mobile-controls {
    gap: 8px;
  }
  .banner-dotnav {
    padding: 0 6px;
    /* gap 0 olsa da noktalar görsel olarak ayrık kalır: görünür nokta 8px,
       buton 24px — aradaki 16px zaten şeffaf dokunma payı. */
    gap: 0;
  }
  .banner-dotnav-item.current {
    width: 32px;
  }
}

/* Hero duraklat butonu — nokta göstergesiyle aynı görsel dil:
   koyu yarı saydam daire, beyaz ikon. (Sağ/sol oklar kaldırıldığı için
   .banner-dc-btn kuralları da silindi.)
   NOT: Bu KOYU görünüm yalnızca hero'ya özel. Duyurular, haberler ve
   yaşam bölümlerindeki duraklat butonları kırmızı kalmaya devam ediyor. */
.banner-pause-toggle {
  /* Çubuğun içinde, satır akışında duruyor (konum gruba taşındı). */
  position: static !important;
  transform: none;
  margin-bottom: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffffff;
  border: 0;
  /* İkonu ortala */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.banner-pause-toggle:hover,
.banner-pause-toggle:focus-visible {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

.banner-pause-toggle[aria-pressed="true"] {
  /* Durum ikondan anlaşılıyor (⏸ ↔ ▶); renk değişmiyor */
  background-color: rgba(0, 0, 0, 0.38);
  color: #ffffff;
}

/* 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 {
  /* Artık okların ARASINDA, satır içinde duruyor (eskiden kutunun sağ üstündeydi;
     orayı "Tüm Duyurular" butonu aldı). */
  position: static !important;
  /* Her zaman kırmızı (diğer slider butonlarıyla aynı görünüm) */
  background-color: #c72029 !important;
  color: #ffffff !important;
  border: solid 1px #c72029 !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 {
  /* Zaten kırmızı; hover'da koyulaşarak geri bildirim ver */
  background-color: #a81a22 !important;
  border-color: #a81a22 !important;
  color: #ffffff !important;
}

.announcement-pause-toggle[aria-pressed="true"] {
  /* Duraklatılmışken de KIRMIZI kalsın; durum ikondan anlaşılıyor (⏸ ↔ ▶) */
  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 de KIRMIZI kalsın; durum ikondan anlaşılıyor (⏸ ↔ ▶) */
  background-color: #c72029 !important;
  color: #ffffff !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;
}

/* --- Duyurular: "Tüm Duyurular" butonu kutunun sağ üstünde ---
   (.top-tab-content position:relative; duraklat butonunun boşalttığı yer) */
/* "Tüm Duyurular" artık DUYURULAR başlığıyla aynı flex satırında (index.ejs),
   sağa yaslı ve dikey ortalı — mutlak konum/sihirli piksel gerekmiyor, her
   ekran genişliğinde kendiliğinden hizalanıyor. Başlık satırının altına boşluk: */
.top-tab-content > .d-flex:first-child {
  margin-bottom: 8px;
}

/* ==========================================================================
   Ana sayfa "tümünü gör" bağlantıları — zeminsiz, kırmızı, altı çizili metin.
   Tek ortak sınıf .all-detail-link ile: Tüm Duyurular, Tüm Etkinlikler,
   (Yunusemre'de Yaşam) Tüm İçerikler. "Tüm Haberler" dolu kırmızı KALIYOR.
   accessibility.css style.css'ten SONRA yüklendiği ve iki sınıflı seçici
   daha yüksek özgüllükte olduğu için .btn-detail-r dolgusunu eziyor.
   ========================================================================== */
.btn-detail-r.all-detail-link,
.btn-detail-r.all-detail-link:hover,
.btn-detail-r.all-detail-link:focus-visible {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 2px;
  color: #c72029;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.btn-detail-r.all-detail-link:hover,
.btn-detail-r.all-detail-link:focus-visible {
  color: #a4141b;
  text-decoration-thickness: 2.5px;
}

/* Sayaç (1/10) — gezinme satırının sağ ucunda, oklarla aynı hizada */
.announcement-counter {
  color: #434343;
  font-weight: 600;
}

/* --- YUNUSEMRE'DE YAŞAM kartları: görsele yer ayır (layout shift + boşluk) ---
   Görseller lazy yükleniyor. Yüklenene kadar eklenti 1x1 şeffaf GIF koyuyor;
   `height:auto` ile bu 1:1 oran KARE bir kutu üretiyordu (293x293). Gerçek görsel
   ise sunucudan hep 269x179 geliyor (routes/index.js → sharp resize fit:'cover'),
   yani yüklenince kutu 293x195'e düşüp ~98px zıplıyordu.

   Slick'in şeridi en uzun slayta göre yükseklik aldığı için, kartlar farklı
   zamanlarda yüklendiğinde aralarında yükseklik farkı oluşuyor ve kısa kartın
   altında boşluk kalıyordu (kontroller aşağı itiliyordu). Gerçek cihazda ağ yavaş
   olduğu için bu daha belirgin; DevTools'ta görseller hızlı gelince fark edilmiyor.

   aspect-ratio ile yükseklik görsel gelmeden ayrılır: yükleniyor göstergesi de
   gerçek görselle aynı kutuda çizilir, yüklenince kutu HİÇ değişmez. */
#yunusemreDeYasamHome .projects-thumb-image img {
  aspect-ratio: 269 / 179;
  height: auto;
}

/* --- Ok butonlarındaki ikonlar: tam ortala + biraz büyüt ---
   style.css'te .slider-navigation-int ortalamayı `line-height: 45px` ile yapıyor;
   ikon fontlarında bu teknik simgeyi 2-3px aşağı kaydırıyor. Flex ile tam ortalıyoruz.
   İkon da 45px butonda 14px kalıyordu (~%31) — 18px'e çıkarıp dengeli hale getirdik. */
.slider-navigation-int,
.slider-navigation-announcement {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.slider-navigation-int > i,
.slider-navigation-announcement > i {
  font-size: 18px;
  line-height: 1;
}

/* --- Haberler: seçili numara belirgin olsun (kırmızı çerçeve) ---
   Gezinme artık yalnızca bu numaralarla yapılıyor (sağ/sol oklar kaldırıldı),
   bu yüzden hangi haberde olunduğu net görünmeli. */
.page-gallery .carousel-indicators .active {
  border: solid 2px #c72029 !important;
  background-color: #ffffff !important;
  color: #c72029 !important;
  font-weight: 700;
  opacity: 1;
}

/* ==========================================================================
   HABERLER — aktif numaranın çevresinde ZAMANLA DOLAN halka
   Kırmızı çerçeve, otomatik geçiş süresince (5sn) bir zamanlayıcı gibi
   saat yönünde dolar. Hero göstergesiyle aynı fikir, dairesel biçimde.

   İLERİCİ GELİŞTİRME: dolan halka conic-gradient açısının canlanmasını
   gerektirir; bu da @property (Houdini) ister. Eski Safari/Firefox'ta yok.
   Bu yüzden halka yalnızca <html class="js-ring"> varken devreye girer
   (JS, CSS.registerProperty başarılıysa bu sınıfı ekler). Sınıf yoksa
   yukarıdaki STATİK kırmızı çerçeve olduğu gibi kalır — hiçbir şey bozulmaz.
   ========================================================================== */
.js-ring #loadNewsMainIndicators .news-navigation-number.active {
  position: relative;
  /* Çerçevenin "boş" kısmı: soluk kırmızı ray. Dolum ::after halkasından. */
  border-color: rgba(199, 32, 41, 0.22) !important;
}

.js-ring #loadNewsMainIndicators .news-navigation-number.active::after {
  content: "";
  position: absolute;
  /* 2px çerçevenin üstüne otursun diye daireyi hafif büyüt */
  inset: -2px;
  border-radius: 50%;
  /* Dolan kısım kırmızı, kalan kısım şeffaf (altındaki soluk çerçeve ray olur) */
  background: conic-gradient(
    #c72029 var(--news-ring-angle),
    transparent 0deg
  );
  /* Ortayı boşalt → yalnızca ~3px kalınlığında halka görünsün */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  animation: news-ring-fill 5s linear forwards;
  pointer-events: none;
}

/* Duraklat butonuna basılınca halka da donsun. #loadNewsMainIndicators'a
   is-paused ekleyen JS (initNewsRing) news-pause-toggle'ın aria-pressed'ini
   izler; hero'daki is-paused mantığının aynısı. */
.js-ring #loadNewsMainIndicators.is-paused .news-navigation-number.active::after {
  animation-play-state: paused;
}

@keyframes news-ring-fill {
  from {
    --news-ring-angle: 0deg;
  }
  to {
    --news-ring-angle: 360deg;
  }
}

/* Hareket azaltma tercihi: canlanma yerine dolu kırmızı halka göster */
@media (prefers-reduced-motion: reduce) {
  .js-ring #loadNewsMainIndicators .news-navigation-number.active::after {
    animation: none;
    background: #c72029;
  }
}

/* ==========================================================================
   MOBİL KAYDIRMA KONTROLLERİ  ‹ ⏸ ›
   1) Hero banner — görselin alt-ortasında
   2) Footer üstündeki 3 kutu (homeButtons) — kutuların altında
   Masaüstünde ikisi de gizli; oradaki mevcut kontroller kullanılır.
   ========================================================================== */

/* --- 1) Hero: mobil kontrol çubuğu --- */
.banner-mobile-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Mobil duraklat butonu — masaüstündekiyle ve nokta göstergesiyle aynı
   görsel dil: koyu yarı saydam daire, beyaz ikon.
   (Oklar kaldırıldığı için bu sınıf artık yalnızca duraklat butonunda.) */
.banner-mc-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.banner-mc-btn:hover,
.banner-mc-btn:focus-visible {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

/* Durum ikondan anlaşılıyor (⏸ ↔ ▶); renk değişmiyor */
.banner-mc-btn.carousel-pause-toggle[aria-pressed="true"] {
  background-color: rgba(0, 0, 0, 0.38);
  color: #ffffff;
}

/* Kenardaki büyük oklar HER genişlikte gizli — gezinme alt-ortadaki
   ‹ ⏸ › çubuğundan yapılıyor (mobilde .banner-mobile-controls,
   masaüstünde .banner-desktop-controls). */
.home-banner .carousel-control-prev,
.home-banner .carousel-control-next {
  display: none !important;
}

/* --- 2) Footer üstü 3 kutu: kontroller yalnızca kaydığı yerde (≤900px) --- */
.homebuttons-mobile-controls {
  display: none;
}
@media (max-width: 900px) {
  .homebuttons-mobile-controls {
    display: block;
  }
}

/* --- Mobilde "Tarih Seç / Etkinlikleri Gör" özelliği kapalı ---
   Butonu display:none ile gizliyoruz; bu onu erişilebilirlik ağacından da
   çıkarır (ekran okuyucu da görmez). Mod varsayılan olarak KAPALI başladığı ve
   yalnızca bu butonla açılabildiği için, buton olmayınca özellik tamamen devre
   dışı kalır: dateClick handler'ı .date-select-mode sınıfı yoksa erken çıkıyor. */
@media (max-width: 991.98px) {
  .events-calendar-container .fc-toggleSelect-button {
    display: none !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 {
  /* Artık görselin üzerinde değil, alttaki numaraların devamında — satır içinde.
     Boyut numaralarla AYNI. Numaralar content-box + 2px kenarlık kullandığı için
     gerçek boyutları CSS değerinin 4px fazlası (45→49, 30→34, 20→24); bu buton
     border-box olduğundan doğrudan o gerçek değerleri veriyoruz. */
  position: static !important;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  /* Her zaman kırmızı */
  background-color: #c72029;
  color: #ffffff;
  border: solid 1px #c72029;
  flex: 0 0 auto;
  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 {
  /* Zaten kırmızı; hover'da koyulaşarak geri bildirim ver */
  background-color: #a81a22;
  color: #ffffff;
  border-color: #ffffff;
}
.page-gallery .carousel-pause-toggle[aria-pressed="true"] {
  /* Duraklatılmışken de KIRMIZI kalsın; durum ikondan anlaşılıyor (⏸ ↔ ▶) */
  background-color: #c72029;
  color: #ffffff;
  border-color: #c72029;
}

/* Duraklat butonu numaralarla AYNI boyutta kalsın — numaraların
   (style.css) kırılma noktalarını birebir izliyoruz. Numaralar content-box
   + 2px kenarlık olduğu için gerçek boyut = CSS + 4px; bu buton border-box
   olduğundan doğrudan gerçek değeri veriyoruz. */
@media only screen and (max-width: 1500px) {
  .page-gallery .carousel-pause-toggle {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}
@media only screen and (max-width: 1200px) {
  .page-gallery .carousel-pause-toggle {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}
@media only screen and (max-width: 991px) {
  .page-gallery .carousel-pause-toggle {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}
@media only screen and (max-width: 576px) {
  /* Numaralar burada 14px'lik noktacığa dönüşüyor; buton o boyutta
     tıklanamaz olurdu (WCAG 2.5.8 asgari 24px) — tabanı 24px tutuyoruz. */
  .page-gallery .carousel-pause-toggle {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

/* --- .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;
  }
}

/* ==========================================================================
   Kırpılan (…) metinlerin tam metin tooltip'i (initTruncatedTooltips)
   Uzun metin tek satıra sıkışmasın; okunaklı bir kutuda sarmalı gösterilsin.
   ========================================================================== */
.tooltip.tooltip-truncated,
.tooltip.tooltip-truncated .tooltip-inner {
  white-space: normal !important;
}

/* Tooltip fare olaylarını "çalmasın": carousel gibi absolute/overflow düzenlerde
   Popper tooltip'i imlecin üstüne konumlayınca, tetikleyici öğeden mouseleave
   olup tooltip anında kapanıyordu. pointer-events:none ile imleç hep tetikleyici
   öğenin üstünde sayılır; tooltip yalnızca görüntüleme amaçlı olduğu için sorun yok. */
.tooltip.tooltip-truncated {
  pointer-events: none;
}

.tooltip.tooltip-truncated .tooltip-inner {
  max-width: 320px;
  text-align: left;
  line-height: 1.4;
}