/* * avaz-colors.css — tema colors.css şablonunun Avaz sürümü (STİL EKİBİ). * Seçici listesi theme-source/colors.css ile BİREBİR aynıdır; yalnızca değerler değişti. * Tema hex sabitleri yerine :root token'larına var() ile bağlanır → tek noktadan (ileride * SiteSettings.colors ile ) yeniden renklendirilebilir. * Kontrast kararı (docs/STYLE_TOKENS.md §3): #009EBA beyaz metinle 3.18:1 → yalnız zemin/bordür/ikon; * beyaz zemin üstündeki turkuaz METİN grubu --avaz-turquoise-ink (#007287, 5.59:1). * Beyaz metin taşıyan turkuaz zeminler avaz-overrides.css'te --avaz-turquoise-dark'a (#007F96) çekilir. */ :root { /* Marka token'ları */ --avaz-turquoise: #009EBA; --avaz-turquoise-dark: #007F96; --avaz-turquoise-ink: #007287; --avaz-gold: #BFA067; --avaz-black: #0B0B0B; --avaz-white: #FFFFFF; --avaz-bg-dark: #111111; --avaz-border: rgba(191, 160, 103, 0.28); /* Tema colors.css değişkenleri */ --tema-primary-color: var(--avaz-turquoise); --tema-secondary-color: var(--avaz-black); --tema-footer-color: var(--avaz-bg-dark); --tema-bagis-color: var(--avaz-gold); /* theme-source/index.html satır içi :root bloğu. home.css kendi :root'unda kırmızı varsayılanlar (#e30613 …) taşır ve ana sayfada BU dosyadan SONRA yüklenir; tema da bunu satır içi blokta !important ile eziyor → aynı yöntem: !important olmadan ana sayfa kırmızıya döner. */ --birincil-renk: var(--avaz-turquoise) !important; --ikincil-renk: var(--avaz-black) !important; --iletisim-renk: var(--avaz-turquoise-dark) !important; /* form gönder butonu zemini + sayaç ikonları: AA */ --hover-renk: var(--avaz-black) !important; /* tema: hover = ikincil renk; koyu turkuaz zeminden ayrışsın */ --kisayol-arkaplan-url: url('/theme-img/pattern.png') !important; } /* --- Aşağısı theme-source/colors.css seçici seçici aynı; değerler token --- */ .middle-tab { height: 92.5px; } .middle-tab.line-tab, #middle-area .middle-tab.line-tab, #middle-area .middle-tab.active.line-tab, .middle-tab.line-box, #middle-area .middle-tab.line-box, #middle-area .middle-tab.active.line-box { width: calc(100% / 4) !important; } @media (min-width: 320px) and (max-width: 768px) { .middle-tab.line-tab, #middle-area .middle-tab.line-tab, #middle-area .middle-tab.active.line-tab, .middle-tab.line-box, #middle-area .middle-tab.line-box, #middle-area .middle-tab.active.line-box { width: 50% !important; } } .btn-doa { border-color: var(--tema-secondary-color) !important; } .banner .owl-nav, #middle-area .widget-card .widget-info, section#top-bar .tb-phones>li:first-child>a>i { background-color: var(--tema-secondary-color) !important; } .marq-item .tarih, #shortcut .shortcut-item p, .phone-link a span, .phone-link a i { color: var(--tema-secondary-color) !important; } #banner, section#top-bar .tb-links>li>a>i, #shortcut, #title, #content .etkinlik-list .etkinlik-item .etkinlik-date, .main-pagination li.active a, .modal-footer .btn-doa, .uye-resim:hover b, .lang-link.active a { background-color: var(--tema-primary-color) !important; } /* Bootstrap 3 birincil buton: editör içeriğindeki (RichText allowlist) BS3 lacivertiyle (#004385) gelmesin — tema paletine çekilir. Beyaz metin taşıdığı için zemin AA tonu (--avaz-turquoise-dark). */ .btn-primary, .btn-primary:focus { background-color: var(--avaz-turquoise-dark) !important; border-color: var(--avaz-turquoise-dark) !important; } .btn-primary:hover, .btn-primary:active, .btn-primary.active { background-color: var(--avaz-turquoise-ink) !important; border-color: var(--avaz-turquoise-ink) !important; } #about h2, #galleries h3, footer .footer-links h4, #content .sidebar .sidebar-list .sidebar-item:hover, #content .etkinlik-list .etkinlik-item:hover, .main-pagination li.active a, .form-control:focus, .modal-footer .btn-doa, .iletisim-list h4, .navs>li>a:hover { border-color: var(--tema-primary-color) !important; } /* Metin grubu: beyaz/açık gri zemin üstünde → ink tonu (AA) */ .nav .sub-menu ul>li a, .counter-item i, #galleries .gallery-item.video:after, #shortcut .shortcut-item i, #content .sidebar h3, #content .sidebar ul li.active a, #content .sidebar .sidebar-list .sidebar-item h5, #content .etkinlik-list .etkinlik-item .etkinlik-info h5, #content .blog-list .blog-item .bi-info h4, section#top-bar .tb-links .standart-link.open a, .iletisim-item i, .navs .sub-menu ul>li a, .kurul-item .kurul-info h4, .popover-title, #mobile-header .burger, #mobile-menu>ul>li>a, .uye-item .uye-title, .navs>li>a:hover, .dernekweb, .main-color, .yazar-box h3 a, .biyografi a { color: var(--avaz-turquoise-ink) !important; } footer, .btn-doa { background-color: var(--tema-footer-color) !important; } .bagis-yap { background-color: var(--tema-bagis-color) !important; } /* =========================================================================================== * Erişilebilirlik / kontrast ek kuralları (Faz 7 QA düzeltmeleri — STİL EKİBİ). * avaz-overrides.css 8 KB sınırına (AGENT_RULES tema koruma kuralı 3) dayandığı için RENK * kuralları bu dosyada toplanır. Yükleme sırası aynı komşuluk: * bootstrap → basamak → circle → BU DOSYA → fonts → avaz-overrides → home.css (yalnız ana sayfa). * home.css'ten SONRA gelen seçiciler +1 sınıf taşır (STYLE_TOKENS §4 madde 3). * ======================================================================================== */ /* Kontrast (eski avaz-overrides §3): beyaz metin taşıyan turkuaz zeminler → --avaz-turquoise-dark (4.69:1 AA) */ #title, .lang-link.active a, .main-pagination li.active a, .uye-resim:hover b, #content .etkinlik-list .etkinlik-item .etkinlik-date { background-color: var(--avaz-turquoise-dark) !important; } /* tema rgba(255,255,255,.8) → 2.6:1; tam beyaz 4.69:1 */ #title .sub-title { color: #fff; } /* ana sayfa (home.css sonra yüklenir; +1 sınıf) */ .creative-slider-wrapper .main-slider .btn-creative, .creative-slider-wrapper .main-slider .badge-custom, .middle__area .ah-tab, .shortcut__area .shortcut__items, .shortcut__area .shortcut__items .page__btns { background-color: var(--avaz-turquoise-dark); } /* beyaz zemin üstünde turkuaz metin: aktif sekme 18px/500, gün 20px/700 → ink 5.59:1 */ .middle__area .ah-tab-item[data-ah-tab-active="true"], .middle__area .tab__items .date span:first-child { color: var(--avaz-turquoise-ink); } @media (max-width: 768px) { /* mobil tarih şeridi: koyu zemin; gün sayısı temadaki gibi beyaz (yukarıdaki ink kuralını geri alır) */ .middle__area .tab__items .date { background: var(--avaz-turquoise-dark); } .middle__area .tab__items .date span:first-child { color: #fff; } } /* Altın CTA (.bagis-yap → "Üyelik Başvurusu"): altın üstünde beyaz 2.49:1 ✗ → siyah 7.91:1 */ section#top-bar .bagis-yap, section#top-bar .bagis-yap a, section#top-bar .bagis-yap i.fa { color: var(--avaz-black); } /* Telegram paylaşım butonu (temada yok; Türk dünyası): marka rengi, beyaz ikon 3.02:1 ≥ 3 */ .share-buttons a.telegram, .share-item.telegram { background: #229ed9 !important; } /* BS3 .btn-success ham yeşili (#5CB85C) + beyaz 14px metin = 2,48:1 ✗ ve marka paletinde yeşil yok. İletişim/üyelik formlarının gönder butonları ana sayfa bandıyla aynı zemine çekilir (4,69:1 AA). Tema DOM'u ve `.btn.btn-success` sınıf adı korunur; yalnız renklendirme. */ .btn-success, .btn-success:focus { background-color: var(--avaz-turquoise-dark) !important; border-color: var(--avaz-turquoise-dark) !important; color: var(--avaz-white) !important; } .btn-success:hover, .btn-success:active, .btn-success.active { background-color: var(--avaz-black) !important; /* tema mantığı: hover = ikincil renk */ border-color: var(--avaz-black) !important; } /* Swiper'ın varsayılan iOS mavisi (#007AFF) token tablosunda yok; hero'nun aktif sayfalama noktası marka turkuazına çekilir. Değişken öğe üzerinde tanımlandığı için :root'u gölgeler (sıra bağımsız). */ .creative-slider-wrapper, .mySwiperBanns, .ticker-slider { --swiper-theme-color: var(--avaz-turquoise-dark); --swiper-pagination-bullet-inactive-color: var(--avaz-black); } /* Topbar gövde metni: tema #797979, zemin #ECECEC → 3,68:1 ✗ → #5F5F5F 5,41:1 AA */ section#top-bar .tb-phones>li>a>span, section#top-bar .tb-links .standart-link a { color: #5f5f5f; } /* #777 beyaz üstünde 4,48:1 (AA eşiğinin hemen altında) → #666 5,74:1. Kapsam: .text-muted (404 paragrafı, ek dosya boyutu ), ana sayfa şerit tarihi. */ .text-muted { color: #666; } .slider-ticker-wrapper .ticker-item span { color: #666; } /* home.css SONRA yüklenir → +1 sınıf */ /* 404: tema .not-found rengi #A5C3D5, beyaz üstünde 1,85:1 ✗ (30px başlık, eşik 3:1) */ .not-found h2 { color: var(--avaz-turquoise-ink); } /* Gövde metni içindeki bağlantılar yalnız renkle ayrılıyordu (çevre metinle 1,29:1, WCAG 1.4.1): altı çizili + ink tonu (5,59:1). Kart/menü bağlantıları etkilenmez. Tema `a { text-decoration: none !important }` (basamak.min.css:45) → altı çizgi de !important olmalı. */ #content .content-body p a:not(.btn), #content .content-body li a:not(.btn):not(.page-link) { color: var(--avaz-turquoise-ink); text-decoration: underline !important; text-underline-offset: 2px; } /* =========================================================================================== * Kabul denetimi düzeltmeleri (M2 + m5/m6/m7) — STİL EKİBİ. * avaz-overrides.css 8192 bayt sınırına dayandığı için bu kurallar da BU dosyada durur. * ======================================================================================== */ /* M2 — Sayfalamanın AKTİF öğesi: turkuaz zemin (#007F96) üstünde ink metin 1,19:1 idi (görünmezdi). Kök neden yukarıdaki `.content-body li a` kuralının sayfalamayı da yakalamasıydı; seçici `:not(.page-link)` ile daraltıldı. Aşağıdaki kural garantidir: zemin `--avaz-turquoise-dark` olduğundan beyaz metin 4,69:1 (WCAG 1.4.3 AA ✓) ve temada olmayan altı çizgi kalkar. */ .main-pagination li.active a, .main-pagination li.active a:hover, .main-pagination li.active a:focus { color: #fff !important; text-decoration: none !important; } /* m6 — Etkinlik sekmeleri (.content-body > ul.nav-tabs) aynı kuralın yan etkisiyle altı çizili görünüyordu; temada sekme görünümü altı çizgisizdir (renk ink kalır: beyaz üstünde 5,59:1). */ #content .content-body ul.nav.nav-tabs > li > a:not(.btn) { text-decoration: none !important; } /* m5/m7 — Dokunmatik hedefler (WCAG 2.5.8, ≥24 px) — YALNIZ pointer:coarse; masaüstü ölçüsü değişmez. avaz-overrides.css §13'ün devamı (orada yer kalmadı). */ @media (pointer: coarse) { /* Hero sayfalama noktaları 8×8 px idi. Kutu 24×24'e çıkar, GÖRÜNEN nokta 8 px kalır: border-box + 8 px dolgu → içerik kutusu 8×8, `background-clip: content-box` yalnız onu boyar (köşe yarıçapı da dolgu kadar küçülür → daire korunur). Yatay boşluk 0'a çekilir ki komşu hedefler ÜST ÜSTE BİNMESİN; noktalar arası görünen aralık artar, boyutları artmaz. Swiper CSS bundler'dan geldiği için sıra garantisi yok → !important. */ .creative-slider-wrapper .swiper-pagination-bullet, .mySwiperBanns .swiper-pagination-bullet { width: 24px !important; height: 24px !important; box-sizing: border-box !important; padding: 8px !important; background-clip: content-box !important; border-radius: 50% !important; --swiper-pagination-bullet-horizontal-gap: 0px; } /* Footer künye bloğundaki telefon/e-posta bağlantıları 147×16 px idi. Satır içi öğede dikey dolgu satır kutusunu büyütmez, yalnız tıklama alanını (breadcrumb ile aynı yöntem): 16+24 = 40 px. */ footer .footer-about .we-info a { padding: 12px 0; } }