/* ==========================================================================
accessibility.css — WCAG 2.1 A/AA yardımcıları
Tasarımı değiştirmez; yalnızca erişilebilirlik (klavye/odak/ekran okuyucu)
davranışlarını ekler.
========================================================================== */
/* --- Ekran okuyucu için görsel olarak gizli, erişilebilir metin --- */
.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;
}
/* Odaklanınca görünür hale gelen gizli içerik (skip-link gibi) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
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;
}
/* --- "İçeriğe geç" skip-link ---
position:fixed + transform ile viewport'a göre konumlanır; body'nin
position:relative olması veya sayfa kaydırması bu yöntemi etkilemez. Normalde
transform ile ekranın üstüne gizlenir, yalnızca odaklanınca en üstte belirir. */
.skip-link {
position: fixed;
top: 0;
left: 16px;
z-index: 100000;
display: inline-block;
padding: 12px 20px;
background: #ffffff;
color: #bd1522;
font-weight: 700;
border: 2px solid #bd1522;
border-radius: 6px;
text-decoration: none;
transform: translateY(-150%);
transition: transform 0.15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid #bd1522;
outline-offset: 2px;
}
/* --- Görünür klavye odağı: KIRMIZI, tüm odaklanabilir öğelerde, her yerde ---
Evrensel seçici + !important ile Bootstrap/bileşen stillerinin outline:none
gibi geçersiz kılmalarını ezerek istisnasız görünür kılıyoruz. */
*:focus-visible {
outline: 3px solid #e3001b !important;
outline-offset: 2px !important;
border-radius: 2px;
}
/* Bazı bileşenler mouse tıklamasında da odak halkasını gizler/ezerse diye,
klavye-odağı (focus-visible) her durumda kırmızı kalsın. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible,
.dropdown-toggle:focus-visible,
.btn:focus-visible {
outline: 3px solid #e3001b !important;
outline-offset: 2px !important;
}
/* Odak hedefi olarak kullanılan ana içerik bölgesi, odakta outline göstermesin */
#main-content:focus,
#main-content:focus-visible {
outline: none !important;
}
/* Anasayfa header'ı scroll'da yukarı kayıp utility satırını (.main-menu-top:
arama, sosyal medya, hızlı menü vb.) ekran dışına çıkarıyor ama bu öğeler hâlâ
Tab ile odaklanılabilir kalıyordu → klavye odağı görünmez şekilde ekran dışına
gidiyordu (WCAG 2.4.3/2.4.7). Scroll'da görünmez yaparak hem gizliyoruz (zaten
ekran dışındaydı, görsel değişiklik yok) hem de tab sırasından çıkarıyoruz.
Scroll yukarı çıkınca tekrar görünür/odaklanılabilir olur. */
.header-scroll .main-menu-top {
visibility: hidden;
}
/* overflow:hidden taşıyan kapsayıcılar (kart/slayt) focus outline'ını dışarıda
çizildiği için kırpıyor. Bu öğelerde outline'ı içeriden (negatif offset) çiz ki
görünür kalsın: büyük haber slaytı (#pageGallery) ve sağdaki/çoklu medya haber
kartları (.int-content), ayrıca rota/haber thumb kartları. */
#pageGallery .carousel-item a:focus-visible,
.int-content a:focus-visible {
outline: 3px solid #e3001b !important;
outline-offset: -3px !important;
}
/* Kart linkleri blok olsun ki outline tüm kartı sarsın */
.int-content > [class*="col-"] > a {
display: block;
}
/* Projeler kartı: başlık linki .stretched-link ile tüm kartı kapsar (görsel/CTA
ayrı link değil → redundant link yok). stretched-link'in konteyneri kaplaması
için kart position:relative olmalı. */
.project-thumb {
position: relative;
}
/* Galeri/lightbox foto linkleri: . Link inline + .gallery-thumb overflow:hidden olduğundan focus
outline ya boşlukta çiziliyor ya kırpılıyordu. Linki blok yap ve outline'ı
içeriden (negatif offset) çiz → foto kenarının hemen içinde kırmızı halka. */
a:has(> .gallery-thumb) {
display: block;
}
a:has(> .gallery-thumb):focus-visible {
outline: 3px solid #e3001b !important;
outline-offset: -3px !important;
}
/* Liste başlık linki (.link-b) inline + block