/* =====================================================================
   DENETİM DÜZELTMESİ — MOBİL + ERİŞİLEBİLİRLİK
   Dosya main.css'ten SONRA yüklenir. main.css'e HİÇ dokunulmadı;
   tüm düzeltmeler burada, en dar yüzeyle ve geriye dönük uyumlu yapıldı.

   İçindekiler
   1) 768 px uçurumu — dokunma hedefi katmanı 1024 px'e genişletildi
   2) Manşet (gündem) nokta göstergeleri: 40x40 hedef, çakışmasız
   3) Renk kontrastı — ölçülmüş WCAG AA ihlalleri (altın metin, kart tarihleri)
   4) iOS odak yakınlaştırması — girdiler 16 px
   5) CLS — haber detayı kapak görselinin yeri baştan ayrılır
   6) E-dergi okuyucusu — 4 px sayfa kaydıracı + çerez perdesi çakışması
   7) Sayfalama ve paylaş şeridi dokunma hedefleri
   8) Hareket azaltma tercihi

   Ölçüm yöntemi: headless Chrome, 390/768/820/1280 px; kontrast oranları
   getComputedStyle + WCAG 2.x bağıl parlaklık formülüyle hesaplandı.
   ===================================================================== */

:root {
    /* Kurumsal palet KORUNDU; yalnız "açık zeminde metin" için AA'yı
       geçen koyu türevleri eklendi. Zemin/çerçeve altınları değişmedi. */

    /* Altın metin. Beyaz 5.54:1 · #F8FAFC 5.30:1 · #F1F5F9 5.06:1 ·
       #F7F2E4 4.95:1 · #FEF9EC 5.27:1  (eski #A8882E = 3.37:1) */
    --metin-altin: #806515;

    /* Soluk metin / kart tarihleri. Beyaz 5.45:1 · #F1F5F9 4.97:1
       (eski --text-muted #94A3B8 = 2.56:1) */
    --metin-soluk: #5B6B7F;

    /* Altın ZEMİN üzerindeki metin. #C8A23C üzerinde 4.81:1
       (eski beyaz metin = 2.42:1). Altın zemin olduğu gibi kalır. */
    --altin-uzeri-metin: #1B3A5C;

    /* Durum yeşili, açık yeşil zeminde. #E1F2ED 4.73:1 · beyaz 5.48:1
       (eski #059669 = 3.26:1 / 3.77:1) */
    --metin-yesil: #047857;
}


/* =====================================================================
   1) 768 px UÇURUMU
   main.css'teki dokunma hedefi düzeltmeleri yalnız (max-width: 768px)
   içinde yaşıyordu; 769–1024 px arasındaki tabletler (iPad 820, iPad Air
   834, iPad Pro 1024 dikey) düzeltmesiz kalıyordu. Aynı kurallar burada
   1024 px'e kadar geçerli kılınır. Yalnız BOYUT kuralları taşındı;
   yerleşim ve yazı boyutu değişiklikleri taşınmadı, masaüstü görünümü
   (>1024 px) hiç etkilenmez.
   ===================================================================== */
@media (max-width: 1024px) {

    /* Başlık çubuğu düğmeleri */
    .header-search-btn,
    .mobile-menu-btn {
        width: 42px;
        height: 42px;
    }

    .mobile-close {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    /* Kenar çubuğu dil seçimi ve alt menü bağlantıları */
    .mobile-dil-secim a {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    .mobile-sub-menu li a {
        min-height: 42px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Üst çubuk dil düğmeleri: 50x33 px doğuyordu */
    .top-bar-lang a {
        min-height: 40px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Sayfalama */
    .sayfalama-link {
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        font-size: 14px;
    }

    /* Paylaş şeridi düğmeleri */
    .paylas-btn {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    /* Süzgeç hapları */
    .duyuru-sekme,
    .kariyer-pill,
    .ihracat-sekme a {
        min-height: 42px;
    }

    /* Manşet kaydırıcısı okları */
    .hero-arrow {
        width: 42px;
        height: 42px;
    }

    /* Hero noktaları: görsel boyut korunur, hedef alanı görünmez
       ::after katmanıyla 40x40'a çıkar. */
    .hero-dots { gap: 12px; }

    .hero-dot { position: relative; }

    .hero-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
    }

    /* Personel kartlarındaki telefon/e-posta bağlantıları */
    .personel-tel,
    .personel-email {
        min-height: 40px;
        align-items: center;
    }

    /* Fuar takvimi satır eylemleri: 114x31 px doğuyordu */
    .fuar-eylem {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .kariyer-kapi-alt a,
    .fuar-gecmis-baglanti,
    .fuar-oge-ok {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Alt bilgi bağlantıları */
    .footer-contact a,
    .footer-contact li {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .footer-links li a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    /* "KVKK" gibi kısa künye bağlantıları 32 px genişlikte doğuyordu */
    .footer-bottom-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 44px;
    }

    /* Sosyal medya ikon düğmeleri 36–38 px doğuyordu */
    .footer-social a,
    .mobile-social a,
    .top-bar-social a {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Satır içi metin bağlantıları: blok yapmak cümleyi bozar, satır içi
       dolgu satır kutusunu büyütmeden tıklama alanını genişletir.
       9 px ile 33–35 px doğuyordu; 12 px ile ~40 px. */
    .bulten-riza a,
    .form-check label a,
    .banner-yolu a,
    .tuik-kaynak a,
    .ist-kaynak a,
    .bvr-bilgi-not a,
    .cerez-metin p a {
        padding: 13px 4px;
        margin: -13px -4px;
    }

    /* Başkan kartındaki e-posta / X hesabı bağlantıları 17–18 px doğuyordu */
    .baskan-detail-item a,
    .xk-bas-kimlik a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Formlardaki düğmeler */
    .btn {
        min-height: 44px;
    }

    /* E-dergi okuyucu araç çubuğu */
    .ok-btn {
        width: 40px;
        height: 40px;
    }

    /* NOT: Onay kutusu boyut kuralı bu medya sorgusundan ÇIKARILDI.
       WCAG 2.5.8 yalnız dokunmalı genişliklere özgü değildir; kural
       artık aşağıda, 10. bölümde her genişlik için geçerli. */
}


/* =====================================================================
   2) MANŞET (GÜNDEM) NOKTA GÖSTERGELERİ
   Asıl düzeltme kendi dosyasında (bolum-duzen.css): hedef 22x40 → 40x40,
   aralarında 4 px boşluk, duraklat düğmesi eklendi.
   Burada yalnız işaretlemeden bağımsız güvence kalır.
   ===================================================================== */
/* Pasif slayt inert aldığında tıklama da kapansın (gundem.js koyar) */
.gundem-slider-pist .gundem-slide[inert] {
    pointer-events: none;
}


/* =====================================================================
   3) RENK KONTRASTI — ÖLÇÜLMÜŞ WCAG AA İHLALLERİ
   Palet korunur; yalnız METİN renkleri koyulaştırılır, zemin altınları
   ve çerçeveler aynı kalır. Her satırın yanında ölçülen yeni oran var.
   ===================================================================== */

/* --- 3-0) KÖK NEDEN: iki belirtecin AÇIK zeminde metin olarak kullanımı
   Ölçüm 30 sayfada aynı iki değeri gösterdi:
     --secondary-dark #A8882E  beyaz üzerinde 3.37:1  (onlarca "altın etiket")
     --text-muted     #94A3B8  beyaz üzerinde 2.56:1  (tüm kart tarihleri)
   Seçici seçici saymak yerine belirteçler koyulaştırıldı; böylece bugün
   görülmeyen sayfalar da düzelir. KOYU zeminli kaplarda eski değerler
   geri verilir (aşağıdaki 3-0b), çünkü orada eskisi zaten AA'yı geçiyordu.
   --------------------------------------------------------------------- */
:root {
    --secondary-dark: #806515;  /* beyaz 5.54:1 · #F1F5F9 5.06:1 */
    --text-muted: #5B6B7F;      /* beyaz 5.45:1 · #F1F5F9 4.97:1 */
}

/* 3-0b) KOYU zeminli kaplar: belirteçler eski (açık) değerlerine döner.
   Ölçüm: #94A3B8 lacivert #1B3A5C üzerinde 4.53:1 (AA geçer),
          #5B6B7F aynı zeminde 2.13:1 (geçmez) → burada eskisi doğru. */
.tv-bolum,
.hb-surec,
.proje-serit,
.site-footer,
.footer,
.footer-bottom,
.cerez-ic,
.okuyucu,
.hb-cta-kart-koyu,
.kariyer-kapi-kart,
.yayin-tur.aktif,
.duyuru-panel,
.page-banner,
.hero-slider,
.ihracat-tablo thead,
[class*="-koyu"] {
    --secondary-dark: #A8882E;
    --text-muted: #94A3B8;
}

/* Beyaz zeminli işveren kartı koyu kart ailesinin içinde: geri koyulaşır */
.kariyer-kapi-kart.kariyer-kapi-isveren {
    --secondary-dark: #806515;
    --text-muted: #5B6B7F;
}

/* Lacivert tablo başlığındaki "#" hücresi: --text-muted lacivert üzerinde
   sınırda kalıyordu (4.53:1). Başlık satırı zaten beyaz metin kullanır. */
.ihracat-tablo th.sut-no {
    color: var(--white);
}

/* --- 3a) Açık zeminde altın metin: 3.37:1 → 5.06–5.54:1 --------------- */
.bolum-ust:not(.bolum-ust-acik),
.manset-lnk,
.baskan-label,
.proje-kart-lnk,
.bb-kart-git,
.hb-surec-kat,
.listing-card-tag,
/* yalnız BEYAZ zeminli işveren kartı; lacivert kart varyantındaki
   altın metin koyu zemin üzerinde zaten AA'yı geçiyor, dokunulmaz */
.kariyer-kapi-isveren .kariyer-kapi-ok,
.srg-rozet-sure,
.srg-kart-ok,
.xb-hesap,
.xk-metin .xk-etiket,
.xk-metin .xk-baglanti,
.xk-metin .xk-bahset {
    color: var(--metin-altin);
}

/* Krem zeminli rozet: 3.02:1 → 4.95:1 */
.manset-rozet {
    color: var(--metin-altin);
}

/* KOYU zeminli bölümlerde altın metin koyulaştırılmaz — orada zaten
   AA'yı geçiyor, koyulaştırmak tersine bozardı. Bu kural yukarıdakinden
   SONRA gelir ve eşit özgüllükte olduğu için onu geri alır.
   Ölçüm: #D4B44E, .tv-bolum zemini rgb(20,22,26) üzerinde 9.13:1. */
.tv-bolum .bolum-ust {
    color: var(--secondary-light);
}

/* --secondary (#C8A23C) doğrudan METİN olarak kullanılan yerler: 2.23–2.42:1 */
.anket-kart-git,
.baskan-card-title,
.timeline-year {
    color: var(--metin-altin);
}

/* --- 3b) Altın ZEMİN üzerinde beyaz metin: 2.42:1 → 4.81:1 ------------ */
/* Altın zemin (#C8A23C) olduğu gibi kalır, metin lacivere döner. */
/* main.css'te "altın zemin + beyaz metin" deseninin TAMAMI tarandı
   (27 kural); metin ve ikonlar lacivere alındı, zemin altın kaldı. */
.top-bar-lang a.active,
.mobile-lang a.active,
.mobile-dil-secim a.aktif,
.btn-secondary,
.footer-cta-form button,
.hero-badge,
.hero-btn:hover,
.featured-badge,
.featured-card .featured-badge,
.video-play-btn,
.video-play-sm,
.project-card-kurum,
.kaysi-msg-user .kaysi-msg-text,
.mega-baskan-btn:hover,
.news-section .section-more:hover,
.projects-section .section-more:hover,
.proje-tumu:hover,
.gundem-tumu:hover,
.dserit-tumu:hover,
.dserit-ok:hover:not(:disabled),
.mega-hizli-liste a:hover,
.iskur-git:hover,
.ok-btn:hover,
.online-islemler-btn,
.yan-cta-randevu,
.ihracat-sekme a.aktif,
.ihracat-sekme a.aktif span,
.bulten-alanlar button,
.bulten-form button[type="submit"] {
    color: var(--altin-uzeri-metin);
}

/* --- 3c) Kart tarihleri / soluk metin: 2.34–2.56:1 → 4.97–5.45:1 ------ */
.xk-alt,
.xk-alt time,
.xk-kimlik span,
.uys-ipucu,
.personel-unvan,
.tuik-donem,
.tuik-kaynak,
.tuik-baslik-satir p,
.tuik-rakam small,
.tuik-degisim span,
.fuar-ay-baslik em,
.tuik-kart em,
/* DÜZELTME (QA artığı): `.fuar-sonuc em` ve `.arsiv-sonuc em` hiçbir öğeyle
   eşleşmiyordu. Sonuç sayacının gerçek sınıfları şunlar (templates/page/
   arama.php:49 ve templates/kariyer/index.php:67, adaylar.php:103): */
.arama-sonuc-sayi,
.kariyer-sonuc,
.mobile-contact-card small,
.ek-dosya-boyut,
.listing-card-date,
.duyuru-page-date,
.sayfalama-bosluk,
.yayin-tur:not(.aktif) em,
/* `.baskan-mesaj-kimlik span` de ölüydü; gerçek seçici bir üst satırdaki
   `.baskan-message .baskan-info span` (templates/home/... baskan bloğu). */
.baskan-message .baskan-info span {
    color: var(--metin-soluk);
}

/* --- 3d) Açık gri zeminde --text-light rozetleri: 4.34:1 → 4.97:1 ----- */
.xk-rozet,
.hb-rozet,
.hb-rozet bdi,
.hb-cta-govde > span,
.fuar-serit-ust p,
.srg-rozet,
.iskur-not,
.bvr-bilgi-not span,
.fuar-etiket {
    color: var(--metin-soluk);
}

/* --- 3d2) Marka renkli BAĞLANTI METNİ (sosyal hesaplar sayfası) -------
   Renkler satır içi --marka ile geliyor; Instagram 4.34:1, Facebook
   4.23:1, YouTube 4.00:1 ile AA'nın altındaydı. İkon ve rozetlerdeki
   gerçek marka rengine DOKUNULMADI; yalnız küçük bağlantı metni
   koyulaştırıldı (Instagram 8.0 · Facebook 7.8 · YouTube 7.7 · WhatsApp 4.7).
   color-mix desteklemeyen tarayıcı kuralı yok sayar, eski davranış sürer. */
.sosyal-kart-git,
.sak-platform {
    color: color-mix(in srgb, var(--marka, var(--primary)) 62%, black);
}

/* --- 3e) Durum yeşili: 3.26/3.77:1 → 4.73/5.48:1 ---------------------- */
.fuar-etiket.fuar-etiket-yesil,
.tuik-degisim.artis {
    color: var(--metin-yesil);
}

/* --- 3f) Koyu lacivert altbilgi: 2.64/3.61:1 → 8.0+/6.6:1 ------------- */
/* Renk aynı (beyaz), yalnız saydamlık AA'yı geçecek kadar artırıldı. */
.footer-bottom-inner p,
.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.78);
}

/* Altbilgi tanıtım metni: 4.18:1 → 6.29:1 */
.footer-desc {
    color: rgba(255, 255, 255, 0.6);
}

/* DÜZELTME (QA artığı): `.footer-logo-text span` ve `.footer-brand span`
   hiçbir öğeyle eşleşmiyordu; altbilgi logosunun gerçek sınıfı yalnızca
   `.footer-logo` (templates/layout/footer.php). */
.footer-logo span {
    color: rgba(255, 255, 255, 0.78);
}

/* İletişim sayfası birim kartı dahili numarası: 3.49:1 → 5.0:1 */
.birim-dahili {
    color: rgba(255, 255, 255, 0.82);
}

/* E-dergi okuyucu ipucu: 2.6:1 → 5.3:1 (koyu zemin) */
.ok-ipucu {
    color: rgba(255, 255, 255, 0.72);
}


/* =====================================================================
   4) iOS ODAK YAKINLAŞTIRMASI
   Safari, 16 px'ten küçük yazı tipli bir girdiye odaklanınca sayfayı
   zorla yakınlaştırır ve geri çıkmaz. Yalnız dokunmalı genişliklerde
   16 px'e çekilir; masaüstü tipografisi değişmez.
   ===================================================================== */
@media (max-width: 1024px) {
    .fuar-suzgec-alan input,
    .fuar-suzgec-alan select,
    .uys-alan input,
    .uys-alan select,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .bvr-alan input,
    .bvr-alan select,
    .bulten-alanlar input,
    /* DÜZELTME (QA artığı): `.header-search-input`, `.arama-form input` ve
       `.arama-girdi` hiçbir öğeyle eşleşmiyordu. Sitedeki tek üst arama
       kutusu templates/layout/header.php:329'daki `.search-form` — o da
       zaten bir alt satırda karşılanıyor. Yerine gerçek arama alanları: */
    .search-form input[type="text"],
    .ihracat-arama-kutu input,
    .komite-arama-kutu input,
    #kaysiWGiris,
    input[type="search"] {
        font-size: 16px;
    }
}


/* =====================================================================
   5) CLS — HABER DETAYI KAPAK GÖRSELİ
   .detail-cover img'in ne genişlik/yükseklik özniteliği ne de en-boy
   oranı vardı; görsel geç yüklenince altındaki gövde metni aşağı
   kayıyordu (ölçülen CLS 0.115). Kutunun yeri en-boy oranıyla baştan
   ayrılır; max-height sınırı korunduğu için kadraj değişmez.
   ===================================================================== */
.detail-cover {
    aspect-ratio: 16 / 9;
    height: auto;
    /* width olmadan aspect-ratio kutuyu yüksekliğe göre daraltıyordu:
       1280px'te 892→711px, sağda 181px boşluk kalıyordu (görsel gerileme). */
    width: 100%;
}

.detail-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aynı sorun galeri karolarında da vardı.
   DÜZELTME (QA artığı): buradaki eski seçiciler `.detail-galeri a` ve
   `.detail-ilgili-gorsel` idi; ikisi de HİÇBİR öğeyle eşleşmiyordu, yani
   kural ölüydü. Gerçek işaretleme templates/news/detail.php ve
   templates/page/detail.php içinde şöyle:
       <div class="detail-gallery-grid">
         <div class="lightbox-trigger" ...><img ...></div>
   Karo kutusunun ölçüsü yoktu; küçük resim geç yüklenince altındaki
   "paylaş" şeridi aşağı kayıyordu. Yer artık baştan ayrılır.

   Yan sütundaki ilgili haber görselleri için AYRI kural yazılmadı:
   `.yan-haber img` main.css'te zaten 66x50 px sabit ölçüde (satır 6597),
   yani orada kayma yok. Ölü seçiciyi oraya bağlamak çalışan boyutu
   bozardı — bilinçli olarak yapılmadı. */
.detail-gallery-grid .lightbox-trigger {
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

.detail-gallery-grid .lightbox-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =====================================================================
   6) E-DERGİ OKUYUCUSU
   6a) #okKaydirac 4 px yüksekliğindeydi — parmakla tutulamıyordu.
       Kutu 40 px'e çıkar, çizgi ince kalır; tutamak 22 px altın daire.
   6b) Çerez perdesi (position: fixed; bottom: 16px; z-index: 9000)
       okuyucunun alt çubuğunu tam olarak örtüyordu.
   ===================================================================== */
#okKaydirac {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

#okKaydirac::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
}

#okKaydirac::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    border: 2px solid #112840;
    background: var(--secondary);
}

#okKaydirac::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
}

#okKaydirac::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #112840;
    background: var(--secondary);
}

#okKaydirac:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 4px;
}

/* Çerez perdesi okuyucu sayfasında alt çubuğun ÜSTÜNE çıkar.
   :has() desteklenmeyen tarayıcıda kural yok sayılır, mevcut davranış
   aynen sürer (aşamalı iyileştirme). */
body:has(.okuyucu) .cerez-cubuk {
    bottom: 84px;
}

@media (max-width: 900px) {
    body:has(.okuyucu) .cerez-cubuk {
        bottom: 96px;
    }
}


/* =====================================================================
   7) FORM ERİŞİLEBİLİRLİĞİ — hata mesajı bağı
   İşaretleme tarafındaki label/for bağı ilgili şablonlarda yapıldı;
   burada yalnız hata metninin görsel dili tanımlanır.
   ===================================================================== */
.form-hata {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #B02A21; /* beyaz üzerinde 5.3:1 */
    font-weight: 600;
}

.form-hata i {
    margin-inline-end: 5px;
}

/* =====================================================================
   9) RTL (Arapça) — yatay taşma
   .online-islemler-dropdown "right: 0" ile konumlanıyor; RTL'de sarmalayıcı
   sağdan sola akınca 240 px'lik açılır menü görüş alanının SOLUNA taşıyor
   (ölçüm: /ar/ @1280 → scrollWidth 1331 / clientWidth 1280) ve sayfa yatay
   kayıyordu. Yalnız RTL'de yön çevrilir; LTR (TR/EN/DE/RU) hiç etkilenmez.
   ===================================================================== */
[dir="rtl"] .online-islemler-dropdown {
    right: auto;
    left: 0;
}

/* DÜZELTME (QA artığı): burada `.yalniz-okuyucu` adında ikinci bir
   "yalnız ekran okuyucu" yardımcı sınıfı tanımlıyordu; hiçbir şablon onu
   kullanmıyordu (ölü). Aynı işi gören ve GERÇEKTEN kullanılan sınıf
   main.css:12853'teki `.gorsel-gizli` (örn. templates/home/index.php'deki
   gizli H1). Kopya kaldırıldı; yeni işaretlemede `.gorsel-gizli` kullanın. */


/* =====================================================================
   8) HAREKET AZALTMA TERCİHİ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .gs-duraklat,
    .hero-duraklat {
        transition: none;
    }

    /* Otomatik geçiş JS tarafında hiç başlamaz; çubuk da dolmasın
       (dolan çubuk "birazdan kayacak" der, kaymayınca yalan olur). */
    .hero-progress-bar {
        transition: none;
    }
}


/* =====================================================================
   10) KAPANIŞ TURU — PANEL GERİ BİLDİRİMİ + ERİŞİLEBİLİRLİK ARTIKLARI
   (2026-08 · QA artıkları)
   ===================================================================== */

/* --- 10a) ÜST MANŞET (HERO) DURAKLAT/SÜRDÜR DÜĞMESİ -------------------
   WCAG 2.2.2: 5 sn'de bir kendiliğinden değişen içeriğin durdurulabilir
   olması gerekir. Düğme main.js tarafından .hero-dots içine eklenir
   (işaretleme dosyası ortak). Nokta göstergeleriyle aynı şeritte,
   40x40 px dokunma hedefiyle durur. */
.hero-dots {
    align-items: center;
}

.hero-duraklat {
    width: 40px;
    height: 40px;
    margin-inline-start: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}

.hero-duraklat:hover,
.hero-duraklat:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}

.hero-duraklat:focus-visible,
.hero-arrow:focus-visible,
.hero-dot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Pasif slayt inert aldığında tıklama da kapansın (main.js koyar) */
.hero-slide[inert] {
    pointer-events: none;
}

/* --- 10b) ONAY KUTUSU DOKUNMA HEDEFLERİ (WCAG 2.5.8) ------------------
   Ölçüm (headless Chrome, 1280 px): .form-check kutusu 13x13,
   .bulten-riza kutusu 16x16 px. Asgari 24x24. Kural artık MEDYA
   SORGUSUNUN DIŞINDA: 2.5.8 fare/kalem için de geçerlidir, yalnız
   telefonda düzeltmek ölçütü karşılamıyordu.
   Masaüstünde yalnız kutu büyür; yerleşim flex olduğu için etiket metni
   kaymaz, sayfa genişliği değişmez (1280 px'te taşma 0 doğrulandı). */
.form-check input[type="checkbox"],
.form-check input[type="radio"],
.bulten-riza input[type="checkbox"],
.bvr-kvkk input[type="checkbox"],
.etk-kvkk input[type="checkbox"],
/* DÜZELTME (QA artığı): `.anket-kvkk` hiçbir öğeyle eşleşmiyordu.
   Onay kutusu taşıyan gerçek KVKK kabı randevu formundaki `.rnd-kvkk`
   (templates/randevu/index.php:163). `.tercih-kvkk` bir <p>'dir, onay
   kutusu içermez — bilerek listeye alınmadı. */
.rnd-kvkk input[type="checkbox"],
.komite-form .form-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    /* main.css kutuyu 2-3 px aşağı itiyordu (13/16 px kutuyu ilk satıra
       hizalamak için). 24 px kutu satır yüksekliğinden zaten büyük;
       itme kaldırılmazsa kutu metnin altına sarkıyor. */
    margin-top: 0;
}

/* --- 10c) EDİTÖRDEN GELEN GÖVDEDE YATAY TAŞMA ------------------------
   /kisisel-verilerin-korunmasi 390 px'te 78 px taşıyordu. Kök neden:
   Word'den yapıştırılmış başlıkta sözcükler &nbsp; ile bağlanmış
   ("KİŞİSEL&nbsp;VERİLERİN&nbsp;KORUNMASI…"), yani tek bir kırılmaz
   simge. main.css'teki `overflow-wrap: break-word` bu durumda YETMEZ:
   break-word öğenin min-content genişliğine katkısını düşürmez, bu
   yüzden `grid-template-columns: 1fr` olan .detail-layout kabı 358 px
   yerine 452 px doğuyordu. `anywhere` min-content'i de düşürür.
   Kural her genişlikte geçerlidir (aynı patlama 768 ve 1024 px'te de
   olabilir) ve yalnız BAŞKA kırılma noktası kalmadığında devreye girer;
   normal metnin sarması değişmez. */
.detail-body {
    overflow-wrap: anywhere;
}

/* AMA TABLO HÜCRELERİNDE DEĞİL. `anywhere` min-content'i 1 karaktere
   düşürdüğü için otomatik yerleşimli tablo sütunları da 1 karaktere
   iniyor, "ŞUBE KODU" dikey harf sütununa dönüyordu (390 ve 1280 px'te
   ölçüldü). Hücrelerde main.css'in `break-word` davranışı korunur:
   sütun genişliği en uzun sözcüğe göre hesaplanır, taşarsa tablo zaten
   .tablo-kaydir içinde yatay kayar. */
.detail-body table th,
.detail-body table td,
.tablo-kaydir th,
.tablo-kaydir td {
    overflow-wrap: break-word;
}

/* Editörden gelen TABLOLAR sayfayı yatay kaydırıyordu (ölçüm 390 px:
   /temel-hizmetler/kapasite-raporu 321 px · /malatya/i-organize-sanayi-
   bolgesi 168 px · /Haber/sayisal-takograf… 238 px taşma).

   Tablo sarmalayıcısı ZATEN VAR ve doğru: Page::zengin() her tabloyu
   `.tablo-kaydir` içine alıyor, main.css o kaba `overflow-x:auto` veriyor.
   Kaydırma yine de çalışmıyordu, çünkü kap kendi kutusuna sığmıyordu:
   .detail-layout bir ızgara; ızgara öğesinin `min-width` değeri varsayılan
   `auto`, yani "içeriğin min-content genişliğinden dar olamaz". Tablonun
   `min-width:540px` kuralı bu yolla .detail-content sütununu 693 px'e
   şişiriyor, kaydırma kabı da onunla büyüyordu.

   Doğru düzeltme ızgara/esnek yerleşimin bilinen `min-width:0` kuralı:
   sütun kendi payına sığar, taşan tablo .tablo-kaydir içinde kaydırılır.
   display/table-layout DEĞİŞTİRİLMEDİ — tablo semantiği (ekran okuyucuda
   satır/sütun ilişkisi) olduğu gibi korunur. */
.detail-layout > .detail-content,
.detail-layout > .detail-sidebar {
    min-width: 0;
}

/* Kaydırılabilir kap klavyeyle de gezilebilmeli (WCAG 2.1.1).
   Chrome 127+ kaydırıcıyı kendiliğinden odaklanabilir yapar; odak
   halkası burada görünür kılınır. */
.tablo-kaydir:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Uzun bağlantı adresleri ve kod parçaları da kabı patlatmasın */
.detail-body a,
.detail-body code,
.detail-body pre {
    overflow-wrap: anywhere;
}

/* --- 10d) İLETİŞİM FORMU HATA METNİ ----------------------------------
   Alan hatası artık aria-describedby ile girdilere bağlı; kutunun görsel
   dili 7. bölümdeki .form-hata ile ortak. Form geneli için uyarı kutusu. */
.form-durum {
    display: block;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 14.5px;
    line-height: 1.5;
}

.form-durum-ok {
    background: #E5F5EB;
    color: #047857; /* beyaz/açık yeşil üzerinde AA */
}

.form-durum-hata {
    background: #FDEAEA;
    color: #B02A21; /* açık kırmızı zeminde 5.0:1 */
}