/* ============================================ MAIN.CSS — Simya Koleji Sadece: Topbar, Header, Navbar, Footer, Back to Top, Bottom Menu, Global Butonlar Mobile-first — Logo renkleri: #0072BC mavi ============================================ */ /* ---------- CSS Variables ---------- */ :root { --c-primary: #0072BC; --c-primary-dark: #004A7C; --c-primary-light: #E8F4FD; --c-accent: #F5A623; --c-accent-dark: #D4891A; --c-white: #ffffff; --c-light: #f7f9fc; --c-dark: #1e293b; --c-text: #334155; --c-gray: #64748b; --c-gray-light: #e2e8f0; --c-success: #059669; --c-green: #10b981; --c-purple: #7c3aed; --c-orange: #f97316; --c-teal: #0d9488; /* ============================================================ LOGO/AMBLEM RENKLERİ — MARKA KİMLİĞİ, TEMA PALETİ DEĞİL ------------------------------------------------------------ Kaynak: public/uploads/firma/simya-logo.svg (ölçüldü, 2026-07-28) #0070B8 ana mavi · #009CD8 açık mavi · #8AC53F yeşil (+ #19416F lacivert yazı markası) Aynı palet yönetim panelinde de belgeli: assets/yonetim/css/root.css:12 ⚠ NEDEN --c-primary'DEN AYRI: kampüs mikrositelerinde head.php --c-primary'yi kampüsün KENDİ rengiyle EZER. Logo ise her kampüste AYNI kalır (amblem değişmiyor). Bu yüzden logo renkleri ayrı jetonlardır ve primary'e bağlanmaz — bağlansaydı Nevşehir kırmızıya çekildiğinde amblem yeşili de kayardı. ⚠ NEDEN --c-green KULLANILMADI: o #10b981 (generic emerald), logonun yeşili DEĞİL. Ölçüm farkı gözle görülür. ⚠ Bu jetonlar 2026-07-28 denetim bulgusuyla eklendi: preloader.css onları `var(--c-logo-acik, #009cd8)` diye okuyordu ama HİÇBİR YERDE TANIMLI DEĞİLLERDİ — yani her istekte yedek hex kullanılıyordu, kural 1 fiilen ihlal ediliyordu. ============================================================ */ --c-logo-mavi: #0070B8; --c-logo-acik: #009CD8; --c-logo-yesil: #8AC53F; --c-logo-koyu: #19416F; /* ============================================================ SOSYAL PLATFORM KİMLİK RENKLERİ — MARKA, TEMA PALETİ DEĞİL ------------------------------------------------------------ ⚠ NEDEN --c-primary'DEN AYRI JETONLAR: kampüs mikrositelerinde head.php --c-primary'yi kampüsün KENDİ rengiyle EZER. Instagram'ın moru, YouTube'un kırmızısı ise her kampüste AYNI kalmalı — bunlar Simya paletinin parçası değil, üçüncü tarafın tescilli kimliği. --c-primary'ye bağlansalardı Nevşehir kırmızıya çekildiğinde LinkedIn mavisi de kayardı. (Aynı gerekçe --c-logo-* için de geçerli.) ⚠ NEDEN main.css'TE, bölüm CSS'inde DEĞİL: bu değerler daha önce anasayfa.css içinde bölüme özel değişkenlerde (--sm-facebook…) ham hex olarak duruyordu. "Sabit hex yok, jetonlar tek yerde" kuralı gereği tek kaynağa taşındı; bileşen CSS'i artık hiç hex yazmaz. ⚠ DEĞERLER RESMİ TONLARIN KOYULAŞTIRILMIŞ TÜREVİ — keyfi değil: yeni tasarımda karo ZEMİNİ platform rengi, ÜSTÜNDEKİ metin beyaz. Resmi tonlar beyazla WCAG AA'yı (4,5:1) geçemiyordu: #1877F2 → 4,23 · #E1306C → 4,34 · #FF0000 → 4,00 (BAŞARISIZ) Buradaki türevler ölçüldü: 5,90 · 6,15 · 6,27 (GEÇER). LinkedIn (#0A66C2 → 5,69) ve X (#0F1419) resmi tonlarıyla zaten geçiyor. ⚠ Resmi tonlara dönülürse karo metni --c-dark'a çevrilmeli, yoksa AA düşer. ============================================================ */ --c-sosyal-facebook: #0E5FCE; --c-sosyal-instagram: #B8225A; --c-sosyal-youtube: #C40000; --c-sosyal-twitter: #0F1419; --c-sosyal-linkedin: #0A66C2; --c-sosyal-genel: var(--c-primary-dark); /* tanınmayan platform → marka */ /* Instagram'ın kimliği TEK RENK DEĞİL; resmi gradyan da AYNI blokta durur, bileşen CSS'ine literal olarak dağılmasın diye. Durakları da koyulaştırıldı (beyaz metinle en düşüğü 6,47:1). Düz ton (yukarıdaki) odak halkası ve karışım hesapları için gerekir — gradyan `outline-color` olamaz. */ --c-sosyal-instagram-gradyan: linear-gradient(135deg, #A63A1E 0%, #B8225A 45%, #6C2A92 78%, #3A44B0 100%); /* ============================================================ HATA / UYARI TONLARI ------------------------------------------------------------ ⚠ 2026-07-28 denetim bulgusu: token setinde hata rengi YOKTU, bu yüzden form doğrulama ve Turnstile plakası kırmızıları CSS'e SABİT yazılmıştı (kural 1 ihlali). Ölçüm: tema CSS'lerinde #dc2626 6 kez, #fef2f2 3, #fca5a5 2, #b91c1c 2, #f87171 1 kez tekrarlanıyordu. ⚠ Panel tarafı zaten `--danger: #ef4444` tanımlıyor (yonetim/root.css:47); tema tonu bir tık koyu (#dc2626) çünkü açık zeminde metin olarak da kullanılıyor ve kontrast payı gerekiyor. İkisi BİLEREK farklı. ============================================================ */ --c-danger: #dc2626; /* kenarlık + ikon */ --c-danger-dark: #b91c1c; /* açık zeminde metin */ --c-danger-bg: #fef2f2; /* açık zemin dolgusu */ --c-danger-light: #fca5a5; /* koyu zeminde metin */ --c-danger-border: #f87171; /* koyu zeminde kenarlık */ --c-danger-bg-koyu:#3f1d1d; /* koyu zemin dolgusu */ /* Form sonuç kutuları (form.css .tema-form__mesaj) — değerler MEVCUT görünümden birebir alındı, renk DEĞİŞMEDİ; yalnız tek yere toplandı. */ --c-danger-cerceve:#fecaca; --c-danger-metin: #991b1b; --c-success-bg: #ecfdf5; --c-success-cerceve:#a7f3d0; --c-success-metin: #065f46; --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.04); --shadow-xl: 0 20px 40px rgba(0,0,0,.12); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; /* Hap (pill) — tam yuvarlak uç. Değer üç ayrı yerde ham "50px" olarak tekrar ediyordu (kampus.css .kampus-rozet ve .kampus-bolum__etiket, header CTA'sı dördüncü olacaktı); jeton tekrarı bitirir. */ --radius-hap: 50px; /* ============================================================ HEADER CTA KATMANI (portal "Franchise" · kampüs "Ön Başvuru") ------------------------------------------------------------ ⚠ NEDEN --c-primary'YE DOĞRUDAN BAĞLANMIYOR: kampüs mikrositelerinde head.php satır içi blokla --c-primary ailesini kurumlar.renk_ana ile EZER. CTA'nın bunu İZLEMESİ istenir (mikrositenin kendi kabuğunun parçası, üçüncü taraf markası değil) — bu yüzden varsayılan değer var(--c-primary), sabit hex DEĞİL. Ara katmanın tek işi acil durum kapısı olmak: temaRenkNormal() (varlik.php) renk_ana'nın yalnız BİÇİMİNİ doğrular, PARLAKLIĞINI değil. Açık tonlu bir kampüs rengi girildiği gün beyaz metin AA'nın altına düşer; düzeltme head.php'nin satır içi bloğuna --c-cta-zemin eklemekle biter, bu dosya AÇILMAZ. ⚠ NEDEN --c-accent DEĞİL: beyaz metin #F5A623 üzerinde 2,03:1 — AA'nın (4,5) yarısı, grafik öğe eşiğinin (3,0) bile altı. ÖLÇÜM: beyaz / #0072BC = 5,08:1 (AA ✓) · beyaz / #004A7C = 9,25:1 (AAA ✓) ============================================================ */ --c-cta-zemin: var(--c-primary); --c-cta-zemin-hover: var(--c-primary-dark); --c-cta-metin: var(--c-white); --transition: .25s cubic-bezier(.4,0,.2,1); --header-h: 64px; --topbar-h: 38px; --bottom-menu-h: 64px; } /* ---------- Base Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 1rem); } body { font-family: var(--ff-body); font-weight: var(--fw-normal); color: var(--c-text); background: var(--c-white); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: var(--bottom-menu-h); /* ---- STICKY FOOTER İSKELETİ ---- Kısa içerikli sayfalarda (404, az içerikli kampüs alt sayfası) gövde viewport'u doldurmadığı için footer yukarıda kalıyor ve ALTINDA beyaz boşluk oluşuyordu. dikey flex kolonu olur,
artan boşluğu yutar (flex:1 0 auto), footer daima ekranın dibine oturur. ⚠ Mobil alt menü telafisi BOZULMAZ: box-sizing:border-box olduğu için min-height:100vh, body'nin padding-bottom:var(--bottom-menu-h) dolgusunu İÇERİR; footer'ın negatif alt marjı + eşit alt dolgusu footer zeminini alt menünün ARKASINA taşımaya devam eder, menü footer'ı örtmez. >=1200px'te --bottom-menu-h:0px olduğundan hesap kendiliğinden sadeleşir. */ min-height: 100vh; display: flex; flex-direction: column; } /* Sabit yükseklikli chrome parçaları ezilmesin; içerik alanı boşluğu yutsun */ .topbar, .site-header, .site-footer { flex-shrink: 0; } body > main, #mainContent { flex: 1 0 auto; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none !important; transition: color var(--transition); } a:hover { text-decoration: none !important; } a:focus-visible, button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } ul, ol { list-style: none; } .visually-hidden { 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; } .container { width: 100% !important; max-width: 100% !important; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { padding-right: 1.5rem; padding-left: 1.5rem; } } @media (min-width: 1200px) { .container { max-width: 1340px !important; padding-right: 2rem; padding-left: 2rem; } } /* ---------- Buttons (global) ---------- */ .btn { display: inline-flex !important; align-items: center; gap: .5rem; padding: .65rem 1.5rem; font-size: .9375rem; font-weight: var(--fw-semibold); font-family: var(--ff-body); line-height: 1.4; border-radius: var(--radius-md) !important; border: 2px solid transparent; cursor: pointer; transition: all var(--transition); text-align: center; white-space: nowrap; text-decoration: none !important; } .btn--primary { background: var(--c-primary) !important; color: var(--c-white) !important; border-color: var(--c-primary) !important; } .btn--primary:hover, .btn--primary:focus-visible { background: var(--c-primary-dark) !important; border-color: var(--c-primary-dark) !important; color: var(--c-white) !important; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--accent { background: var(--c-accent) !important; color: var(--c-white) !important; border-color: var(--c-accent) !important; } .btn--accent:hover, .btn--accent:focus-visible { background: var(--c-accent-dark) !important; border-color: var(--c-accent-dark) !important; color: var(--c-white) !important; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--outline { background: transparent !important; color: var(--c-primary) !important; border-color: var(--c-primary) !important; } .btn--outline:hover, .btn--outline:focus-visible { background: var(--c-primary) !important; color: var(--c-white) !important; } .btn--white { background: var(--c-white) !important; color: var(--c-primary) !important; border-color: var(--c-white) !important; } .btn--white:hover, .btn--white:focus-visible { background: var(--c-primary-light) !important; color: var(--c-primary-dark) !important; border-color: var(--c-primary-light) !important; } .btn--lg { padding: .8rem 2rem; font-size: 1rem; } /* ========================================================================== MEKTUP KUTUSU (letterbox) — SABİT ORANLI MEDYA ALANI, KIRPILMAYAN GÖRSEL -------------------------------------------------------------------------- NEDEN VAR? Haber kapaklarının çoğu AFİŞ/KAMPANYA görselidir; içlerinde büyük yazılar bulunur ("%40 EĞİTİM BURSU", "1. SINIF KAYITLARIMIZ BAŞLADI" gibi). object-fit:cover bu yazıları kenarlardan KESİYORDU. ÖLÇÜM (tools/kapak-oran-analiz.php · 593 kapak): dikey %18.2 · kare %25.5 · hafif yatay %35.8 · ~16:9 yalnız %15.9 16:9 kutuda kapakların %82.6'sı alanının >%20'sini, %20.4'ü YARISINDAN fazlasını kaybediyordu. Yani sorun tek tek görsellerde değil, KUTU ORANININ İÇERİĞE UYMAMASINDAYDI. ÇÖZÜM — iki katman, TEK dosya: 1) zemin : aynı görsel, object-fit:cover + blur → boşluğu doldurur 2) ön : aynı görsel, object-fit:contain → TAMAMI görünür, hiç kesilmez İki AYNI src'yi paylaşır; tarayıcı tek kez indirir (ikincisi bellek önbelleğinden gelir), ikisi de loading="lazy" kalır. CSS background-image yerine seçilmesinin nedeni budur: background-image loading="lazy" sözleşmesine UYMAZ ve ekran dışı kartların kapaklarını erkenden indirtir. KULLANIM
Başlık
Kutunun aspect-ratio'su ÇAĞIRAN bileşene aittir (kart 4:3, detay ~3:2). ========================================================================== */ .mektup-kutusu { position: relative; overflow: hidden; background: var(--c-light); } /* Bulanık zemin — ölçek, blur'un kenarlardaki saydam sönümünü kutu dışına iter */ .mektup-kutusu__zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(16px) saturate(1.2) brightness(.78); transition: transform .45s cubic-bezier(.4, 0, .2, 1); } /* Ön katman — görselin TAMAMI; hiçbir yazı kesilmez. z-index YOK: konumlanmış kardeşler DOM sırasına göre boyanır, yani zemin → ön → (kategori rozeti gibi mutlak konumlu ek katmanlar) doğal olarak doğru sırayı verir. z-index:1 verilseydi kartın üzerindeki rozetler görselin ALTINDA kalırdı. */ .mektup-kutusu__on { position: relative; width: 100%; height: 100%; object-fit: contain; } /* Hover'da YALNIZ zemin hareket eder. Ön katman sabit kalır; büyütülseydi contain'in kazandırdığı "hiç kesilmeme" garantisi geri kaybedilirdi. */ .mektup-kutusu:hover .mektup-kutusu__zemin, a:hover .mektup-kutusu__zemin { transform: scale(1.32); } @media (prefers-reduced-motion: reduce) { .mektup-kutusu__zemin { transition: none; } .mektup-kutusu:hover .mektup-kutusu__zemin, a:hover .mektup-kutusu__zemin { transform: scale(1.25); } } /* ========================================== TOPBAR ========================================== */ .topbar { background: #f1f5f9; color: var(--c-dark); font-size: .875rem; line-height: var(--topbar-h); height: var(--topbar-h); border-bottom: 1px solid #e2e8f0; } /* Topbar ve header, sayfanın geri kalanıyla AYNI container genişliğini kullanır (≥1200px'te max-width:1340px) — böylece logo/menü, altındaki içerikle hizalanır. Not: burada eskiden `max-width:100% !important` vardı; bu ikisini kenardan kenara taşırıyor, içerikle hizasız bırakıyordu (2026-07-26 kullanıcı isteğiyle kaldırıldı). */ .topbar .container, .site-header .container { padding-right: .75rem; padding-left: .75rem; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; } .topbar__left, .topbar__right { display: flex; align-items: center; gap: 1rem; } .topbar__link { color: var(--c-dark); display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 500; transition: color var(--transition); } .topbar__link:hover { color: var(--c-primary); } .topbar__search-btn { background: none; border: none; cursor: pointer; color: var(--c-dark); font-size: .9375rem; padding: 0; display: inline-flex; align-items: center; transition: color var(--transition); } .topbar__search-btn:hover { color: var(--c-primary); } /* SOL = sosyal ikonlar · SAĞ = telefon + e-posta. E-posta yalnız >=768px'te görünür: dar ekranda sosyal şerit + telefon üst çubuğu zaten doldurur, e-posta eklenince satır taşardı. */ .topbar__link--email { display: none; } .topbar__link--phone { display: inline-flex; } .topbar__social { display: flex; align-items: center; gap: .4rem; } .topbar__social-link { color: var(--c-dark); font-size: 1rem; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition); } .topbar__social-link:hover { color: var(--c-primary); background: var(--c-primary-light); } /* Çok dar ekran (<480px): 5 sosyal ikon + telefon tek satıra sığsın */ @media (max-width: 479.98px) { .topbar__left, .topbar__right { gap: .5rem; } .topbar__social { gap: .1rem; } .topbar__social-link { width: 26px; height: 26px; font-size: .9375rem; } .topbar__link { font-size: .8125rem; } } /* ========================================== HEADER & NAVBAR ========================================== */ .site-header { background: var(--c-white); height: var(--header-h); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 1rem; } .site-header__logo img { height: 36px; width: auto; } .site-header__badges { display: none; align-items: center; gap: .5rem; flex-shrink: 0; } .site-header__badge-img { height: 48px; width: auto; } .site-header__ataturk-img { height: 52px; width: auto; border-radius: var(--radius-sm); } /* Hamburger */ .main-nav__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 2px solid var(--c-gray-light); cursor: pointer; padding: 0; z-index: 1100; border-radius: var(--radius-sm); transition: all var(--transition); } .main-nav__toggle:hover { background: var(--c-light); border-color: var(--c-primary); } .main-nav__hamburger, .main-nav__hamburger::before, .main-nav__hamburger::after { display: block; width: 22px; height: 2.5px; background: var(--c-dark); border-radius: 2px; transition: all var(--transition); } .main-nav__hamburger { position: relative; } .main-nav__hamburger::before, .main-nav__hamburger::after { content: ''; position: absolute; left: 0; } .main-nav__hamburger::before { top: -7px; } .main-nav__hamburger::after { top: 7px; } .main-nav__toggle[aria-expanded="true"] .main-nav__hamburger { background: transparent; } .main-nav__toggle[aria-expanded="true"] .main-nav__hamburger::before { top: 0; transform: rotate(45deg); } .main-nav__toggle[aria-expanded="true"] .main-nav__hamburger::after { top: 0; transform: rotate(-45deg); } /* Mobile menu */ .main-nav__list { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--c-white); flex-direction: column; padding: 1rem; display: flex; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; z-index: 1050; gap: .125rem; /* Bootstrap reboot'un ul{margin-bottom:1rem}'i sabit paneli ekranın dibinden 16px yukarıda bitiriyordu; açık menünün altından alt menünün şeridi görünüyordu. Masaüstü kuralı zaten margin:0 verir. (2026-10-02) */ margin: 0; } .main-nav__list.is-open { transform: translateX(0); } /* Menü açıkken başlık katmanı (2026-10-02). Mobil menü (.main-nav__list, fixed, z 1050) .site-header'ın (sticky, z 1000) stacking context'inde yaşar; z-index'i yalnız başlığın içinde geçerlidir. Sayfa düzeyindeki sabit katmanlar — çerez barı (1040), çerez FAB'ı (1050), alt menü (.bottom-menu, 1100) — başlıktan yüksek olduğu için açık menünün ÜSTÜNE biniyor, akordeon açılınca alttaki öğeleri (Atatürk Köşesi, İletişim, Franchise) örtüyordu. Menü açıkken başlık alt menünün de üstüne alınır (1101; galeri lightbox'ı 1200 ve ön yükleyici 9999 altında kalır). Kapanırken z-index, menünün kayma süresi (--transition .25s) bitince düşer: kayarak kapanan menünün üstünde çubuklar belirmez. Kapanınca çerez barı ve alt menü aynen görünür ve tıklanabilir. :has() desteklemeyen tarayıcı yalnız ikinci kuralı atlar (eski davranış; ilk kuraldaki geçiş z-index değişmediği için etkisizdir). Masaüstü (≥1200px) etkilenmez. */ @media (max-width: 1199.98px) { .site-header { transition: z-index 0s linear .25s; } .site-header:has(.main-nav__list.is-open) { z-index: 1101; transition-delay: 0s; } } .main-nav__link { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; color: var(--c-dark); font-weight: var(--fw-medium); font-size: .9375rem; border-radius: var(--radius-sm); transition: all var(--transition); } .main-nav__link:hover, .main-nav__link--active { color: var(--c-primary); background: var(--c-primary-light); } .main-nav__arrow { font-size: .625rem; margin-left: auto; transition: transform var(--transition); color: var(--c-gray); } /* Dropdown */ .main-nav__dropdown { display: none; padding-left: 1rem; } .main-nav__item--dropdown.is-open .main-nav__dropdown { display: block; } .main-nav__item--dropdown.is-open .main-nav__arrow { transform: rotate(180deg); } .main-nav__dropdown-link { display: block; padding: .5rem 1rem; color: var(--c-gray); font-size: .875rem; border-radius: var(--radius-sm); transition: all var(--transition); border-left: 2px solid var(--c-gray-light); } .main-nav__dropdown-link:hover { color: var(--c-primary); background: var(--c-primary-light); border-left-color: var(--c-primary); } /* ========================================================================== HEADER CTA — .main-nav__cta -------------------------------------------------------------------------- PORTAL : "Franchise" → /marka-isbirligi (core/header.php) KAMPÜS : "Ön Başvuru" → /{slug}/kayit (core/kampus-nav.php) SABİT TASARIM ÖĞESİDİR — menü editöründen (ayar.menu_nav_json) gelmez ve header.php'deki aktif-öğe puanlama döngüsünün DIŞINDA basılır. Puanlamaya girseydi /marka-isbirligi'ndeyken hem "Başvurular" hem CTA vurgulanırdı. NEDEN .btn DEĞİL: .btn'de `border-radius: var(--radius-md) !important` var — hap yapmak için ikinci bir !important yazmak gerekirdi. Ayrıca .btn'in 2px kenarlığı + .65rem dolgusu 72px'lik header şeridinde menü bağlantılarından belirgin şekilde yüksek kalıyor. NEDEN .main-nav__link ile BİRLİKTE yazılmaz: o kuralın padding/color/ background'ı CTA'nınkiyle çakışır. (Örnek alınan bogazicivipkurs teması Bootstrap olduğu için bu çakışmayı her satıra !important yazarak çözmüştü; burada rakip kural olmadığı için hiç !important yok.) JS GEREKMEZ: main.js dinleyiciyi yalnız .main-nav__item--dropdown içindeki .main-nav__link'e bağlar. Düz bir
  • hamburger/çekmece davranışını olduğu gibi devralır. ========================================================================== */ /* ---- MOBİL TABAN (<1200px) — off-canvas çekmecede TAM GENİŞLİK ---- .main-nav__list mobilde position:fixed + flex-direction:column bir panel; CTA orada bir "menü satırı" gibi değil, panelin dip eylemi gibi durur. */ .main-nav__item--cta { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--c-gray-light); } .main-nav__cta { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .8rem 1.1rem; background: var(--c-cta-zemin); color: var(--c-cta-metin); font-family: var(--ff-body); font-size: .9375rem; /* mobil .main-nav__link ile aynı */ font-weight: var(--fw-semibold); line-height: 1.4; border-radius: var(--radius-hap); white-space: nowrap; /* `all` DEĞİL adı geçen özellikler: dar masaüstünde CTA'nın dolgusu medya sorgusuyla değiştiği için `transition:all` hover'da titreme yaratıyordu. */ transition: background var(--transition), box-shadow var(--transition); } .main-nav__cta:hover, .main-nav__cta:focus-visible { background: var(--c-cta-zemin-hover); color: var(--c-cta-metin); /* a:hover mirasını kilitle */ box-shadow: var(--shadow-md); } /* Odak halkası: global kural (a:focus-visible) turuncu --c-accent veriyor; beyaz header zemininde 2,03:1 ile WCAG 1.4.11'in 3:1 eşiğinin ALTINDA kalıyor. CTA kendi halkasını koyu tonla verir. */ .main-nav__cta:focus-visible { outline: 2px solid var(--c-cta-zemin-hover); outline-offset: 2px; } /* Hedef sayfadayken (aria-current="page") kalıcı basılı görünüm */ .main-nav__cta[aria-current="page"] { background: var(--c-cta-zemin-hover); } .main-nav__cta i { font-size: .875rem; opacity: .9; } /* ========================================== FOOTER ========================================== */ .site-footer { background: #0072BC; color: rgba(255,255,255,.8); padding: 3rem 0 0; margin-bottom: calc(-1 * var(--bottom-menu-h)); padding-bottom: var(--bottom-menu-h); font-size: .9375rem; } /* Brand area (logo + about + social) */ .site-footer__brand { text-align: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12); } .site-footer__logo { margin: 0 auto; } /* 4 SÜTUN: Kurumsal/Kampüs · Eğitim · Hızlı Erişim · İletişim Mobil 2x2 → 992px+ tek satırda 4 sütun (İletişim en geniş kolon). */ .site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; } /* Sütunlar daraldığında uzun e-posta/adres satırı ızgara izini taşırmasın (mobilde İletişim artık yarım genişlikte bir hücrede duruyor) */ .site-footer__col { min-width: 0; } .site-footer__about { margin-top: 1rem; font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.85); } /* Sosyal ikonlar İLETİŞİM sütununun altındadır (marka bloğunda değil) */ .site-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; } .site-footer__social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: .875rem; transition: all var(--transition); } .site-footer__social a:hover { background: var(--c-accent); color: var(--c-white); transform: translateY(-2px); } .site-footer__heading { color: var(--c-white); font-size: 1rem; font-weight: var(--fw-semibold); margin-bottom: 1rem; position: relative; padding-bottom: .75rem; } .site-footer__heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--c-accent); border-radius: 1px; } .site-footer__links li + li { margin-top: .5rem; } .site-footer__links { padding-left: 0; } .site-footer__links a { color: rgba(255,255,255,.8); font-size: .9375rem; transition: all var(--transition); display: inline-flex; align-items: center; gap: .35rem; } .site-footer__links a::before { content: ''; width: 0; height: 1px; background: var(--c-accent); transition: width var(--transition); } .site-footer__links a:hover { color: var(--c-white); } .site-footer__links a:hover::before { width: 12px; } .site-footer__contact { font-style: normal; font-size: .875rem; } .site-footer__contact p { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; } /* E-posta/adres gibi boşluksuz uzun diziler dar sütunda satır kırsın. 'anywhere' (break-word değil) min-content genişliğini de küçültür → esnek kutu artık minimum genişliğini sütunun dışına taşırmaz. */ .site-footer__contact a, .site-footer__contact p { min-width: 0; overflow-wrap: anywhere; } .site-footer__contact a { color: rgba(255,255,255,.85); } .site-footer__contact a:hover { color: var(--c-white); } .site-footer__contact i { color: var(--c-accent); margin-top: .25rem; flex-shrink: 0; width: 16px; text-align: center; } .site-footer__bottom { margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; font-size: .8125rem; color: rgba(255,255,255,.5); } .site-footer__legal { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .site-footer__legal a { color: rgba(255,255,255,.5); font-size: .8125rem; } .site-footer__legal a:hover { color: var(--c-white); } /* ========================================== BACK TO TOP ========================================== */ .back-to-top { position: fixed; bottom: calc(var(--bottom-menu-h) + 1rem); right: 1rem; width: 44px; height: 44px; border-radius: var(--radius-md); /* BEYAZ zemin + MARKA MAVİSİ ikon (2026-07-27, kullanıcı isteği: "tersine çevir"). Yüzen çerez ikonuyla (.cerez-fab) aynı dil — ikisi de sayfanın alt köşelerinde duran yüzen düğmeler, tutarlı görünmeliler. Hover'da renkler yer değiştirir. */ background: var(--c-white); color: var(--c-primary); border: 1px solid var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--shadow-lg); transition: all var(--transition); z-index: 900; opacity: 0; visibility: hidden; } .back-to-top:not([hidden]) { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--c-primary); color: var(--c-white); transform: translateY(-3px); } /* ========================================== BOTTOM MENU (Mobile/Tablet) ========================================== */ .bottom-menu { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-menu-h); background: var(--c-white); display: flex; align-items: stretch; justify-content: space-around; box-shadow: 0 -2px 16px rgba(0,0,0,.08); z-index: 1100; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-menu__item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--c-gray); font-size: .6875rem; font-weight: var(--fw-medium); gap: .2rem; transition: color var(--transition); text-decoration: none; border: none; background: none; cursor: pointer; min-width: 0; position: relative; } .bottom-menu__item i { font-size: 1.125rem; } .bottom-menu__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bottom-menu__item--active { color: var(--c-primary); } .bottom-menu__item--active::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--c-primary); border-radius: 0 0 2px 2px; } .bottom-menu__item--kampus.bottom-menu__item--active::before { display: none; } .bottom-menu__item--call { color: var(--c-success); } .bottom-menu__item--kampus { color: var(--c-white); background: var(--c-accent); border-radius: var(--radius-md); margin: .5rem .25rem; flex: 1.1; font-weight: var(--fw-semibold); } .bottom-menu__item--kampus:hover { color: var(--c-white); background: var(--c-accent-dark); } .bottom-menu__item:hover:not(.bottom-menu__item--kampus) { color: var(--c-primary); } /* ========================================== BREAKPOINTS ========================================== */ /* -- Normal mobile (480px+) -- */ @media (min-width: 480px) { .bottom-menu__item { font-size: .75rem; } .bottom-menu__item i { font-size: 1.25rem; } } /* -- Tablet (768px+) -- */ @media (min-width: 768px) { :root { --header-h: 72px; --topbar-h: 40px; } .topbar .container, .site-header .container { padding-right: 1.5rem; padding-left: 1.5rem; } /* E-posta ancak burada sığar (sol sosyal şerit + sağ telefon yan yanayken) */ .topbar__link--email { display: inline-flex; } .site-header__logo img { height: 38px; } .site-header__badges { display: flex; } .site-header__badge-img { height: 36px; } .site-header__ataturk-img { height: 36px; } .site-footer__brand { text-align: left; } .site-footer__logo { margin: 0; } .site-footer__bottom { flex-direction: row; justify-content: space-between; } } /* -- Küçük masaüstü (992px+): footer 4 sütun tek satıra açılır -- */ @media (min-width: 992px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -- Desktop (1200px+) -- */ @media (min-width: 1200px) { :root { --header-h: 72px; --bottom-menu-h: 0px; } body { padding-bottom: 0; } /* Hide mobile elements */ .bottom-menu { display: none; } .main-nav__toggle { display: none; } /* Desktop nav */ .main-nav { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; } .main-nav__list { position: static; flex-direction: row; transform: none; padding: 0; margin: 0; background: transparent; align-items: center; gap: 0; overflow: visible; } /* ⚠ YATAY DOLGU .7rem → .45rem (2026-08-18, header CTA'sı eklenirken). ÖLÇÜM: ≥1440px'te .container iç genişliği 1292px'te tavan yapıyor ama menü sıkıştırma medya sorgusu (1200–1439.98) orada bitiyordu → portal menüsü 773px'ten 881px'e çıkıyor ve artık alan 100px'e düşüyordu. 125px'lik CTA hapı + 8px kenar boşluğu 133px istiyor → SIĞMIYORDU. Öğe başına 2×.25rem kısaltma portalda ~64px kazandırır (artık alan ≥1440px'te 100 → 30px, 1200px'te CTA'yla birlikte 122px). Yazı boyutu DEĞİŞMEDİ — yalnız öğeler arası nefes payı daraldı. ⚠ DEĞER TEK YERDE: 1200–1439.98 bloğu eskiden aynı değeri TEKRAR yazıyordu, kampüs menüsü de kendi satır içi kuralında .55rem ile bunu EZİYORDU (iki sınıflık özgüllük). Üçü tek değere indirildi; artık dolgu yalnız burada tanımlı. ⚠ .45rem → .4rem (2026-08-19): "Haberler" öğesi blog için açılır menüye çevrilince ok işareti (~22px) eklendi ve ≥1440px'teki artık alan 30px'ten 8px'e düştü. Kayıp üç yerden paylaştırılarak geri alındı: menü dolgusu (8 öğe × 2 × .05rem), CTA kenar boşluğu (.5→.35rem) ve CTA dolgusu (1.1→.95rem). Tek bir yerden kısılsaydı o öğe gözle görülür biçimde sıkışırdı. */ .main-nav__link { padding: .5rem .4rem; font-size: .875rem; } .main-nav__arrow { margin-left: .25rem; } /* CTA yatay şeritte hap olur — çekmecedeki tam genişlik/ayırıcı kalkar */ .main-nav__item--cta { margin-top: 0; margin-left: .35rem; padding-top: 0; border-top: none; } .main-nav__cta { display: inline-flex; padding: .4rem .95rem; font-size: .875rem; /* masaüstü .main-nav__link ile birebir */ } /* ---- Masaüstü açılır menü (portal "Kurumsal"/"Eğitim Programları", kampüs "Daha Fazla") ---- HATA: tetikleyici ile panel arasında 4px boşluk vardı; fare oraya gelince ne
  • ne panel :hover'da kalıyordu ve menü kapanıyordu. ÇÖZÜM (iki katman): 1) SAYDAM KÖPRÜ — panelin ::before'u boşluğu fiziksel olarak kapatır. Pseudo panelin ÇOCUĞU olduğu için üstüne gelmek
  • 'yi :hover'da tutar. 2) KAPANIŞ GECİKMESİ — görünürlük display yerine opacity/visibility ile yönetilir; visibility geçişi 200ms GECİKİR, fare bu sürede panele girerse menü hiç kapanmaz. Klavye erişilebilirliği KORUNUR: :focus-within (tab ile gelen odak) ve main.js'in .is-open sınıfı (Enter/Space) aynı kuralı tetikler. */ .main-nav__item--dropdown { position: relative; } .main-nav__dropdown { display: block; visibility: hidden; opacity: 0; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-.25rem); min-width: 220px; background: var(--c-white); box-shadow: var(--shadow-xl); border-radius: var(--radius-md); padding: .5rem; z-index: 1100; border: 1px solid var(--c-gray-light); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .2s; } /* 1) Saydam köprü — 4px'lik boşluğu 2px taşmayla kapatır (zemini yok, fare olayı alır) */ .main-nav__dropdown::before { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px; } .main-nav__item--dropdown:hover > .main-nav__dropdown, .main-nav__item--dropdown:focus-within > .main-nav__dropdown, .main-nav__item--dropdown.is-open > .main-nav__dropdown { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s; } /* Hareketi azalt tercihinde yalnız animasyon kalkar; gecikme/köprü çalışır */ @media (prefers-reduced-motion: reduce) { .main-nav__dropdown, .main-nav__item--dropdown:hover > .main-nav__dropdown, .main-nav__item--dropdown:focus-within > .main-nav__dropdown, .main-nav__item--dropdown.is-open > .main-nav__dropdown { transform: translateX(-50%); transition: visibility 0s linear .2s; } .main-nav__item--dropdown:hover > .main-nav__dropdown, .main-nav__item--dropdown:focus-within > .main-nav__dropdown, .main-nav__item--dropdown.is-open > .main-nav__dropdown { transition: visibility 0s; } } .main-nav__dropdown-link { padding: .5rem .75rem; border-left: none; border-radius: var(--radius-sm); } .main-nav__dropdown-link:hover { border-left-color: transparent; } .site-header__logo img { height: 42px; } .site-header__badge-img { height: 42px; } .site-header__ataturk-img { height: 42px; } /* Footer desktop */ .site-footer__brand { display: flex; align-items: center; gap: 2rem; text-align: left; } .site-footer__brand .site-footer__about { margin-top: 0; margin-bottom: 0; /* Bootstrap reboot p{margin-bottom:1rem}'i sıfırla — dikey ortalama */ flex: 1; } /* İletişim sütunu (adres + saatler) diğerlerinden geniş olsun */ .site-footer__grid { grid-template-columns: 1fr 1fr 1fr 1.4fr; } /* Back to top: no bottom menu offset */ .back-to-top { bottom: 2rem; } } /* ========================================================================== HEADER — KAMPÜS ADI ROZETİ / NAV ÇAKIŞMASI DÜZELTMESİ -------------------------------------------------------------------------- SORUN (ölçülerek doğrulandı, 2026-07-26): Masaüstü navigasyon @1200px'te açılıyor. `.main-nav` `flex: 1` (yani flex-basis:0 + shrink:1) olduğu için serbest alanı tamamen yutuyor; yanındaki `.site-header__logo` ise shrink edilebilir kalıyor ve GEREKENİN YARISINA eziliyor (ör. /iskenderun @1200px: gereken 213px, verilen 106px). İçindeki `.site-header__kampus-ad` `white-space:nowrap` taşıdığından ezilen kutudan taşıp menünün ilk öğesinin ("Kampüs") ÜSTÜNE biniyordu; uzun kampüs adlarında (Gaziantep/İskenderun) sayfa yatay taşma da veriyordu. 1200–1399px aralığında tüm mikrositelerde görülüyordu; portal (/) etkilenmiyor çünkü rozet yok. ALAN BÜTÇESİ (/iskenderun = en uzun kampüs adı, ölçülen değerler): padding 24 + marka 232 + gap 16 + menü 874 + gap 16 + rozetler 153 + padding 24 = 1339px → 1200px ve 1280px'e SIĞMIYOR, 1366px'e sığıyor. Kampüs menüsü 9 öğe (portal 6); portal menüsü 631px olduğu için portalda hiçbir genişlikte sorun çıkmıyor. ÇÖZÜM (yalnız masaüstü nav aralığı — mobil menü davranışına dokunmaz): 1) marka bloğu asla ezilmez → flex-shrink: 0 2) nav küçülebilir olur → min-width: 0 3) 1200–1439px dar aralıkta menü öğeleri sıkışır (874 → ~800px) 4) 1200–1439px + SADECE kampüs mikrositesinde kurumsal rozetler gizlenir (169px kazanç). Rozetler <768px'te ZATEN gizli olduğu için bu, temada var olan davranışın bir miktar daha geniş bir aralığa uzatılmasıdır; yeni bir davranış değildir. Portal (/) rozetleri her genişlikte görür. ========================================================================== */ @media (min-width: 1200px) { /* 1) Logo + kampüs adı rozeti tek parça: içeriğinin altına ASLA inmez */ .site-header__logo { flex-shrink: 0; } .site-header__logo img { flex-shrink: 0; } .site-header__kampus-ad { flex-shrink: 0; } /* 2) Esneme yükü navigasyonda olsun (flex item min-width:auto kilidini aç) */ .main-nav { min-width: 0; } } /* 3-4) Dar masaüstü (1200–1439px): menü öğelerini sıkıştır ve kampüs mikrositesinde kurumsal rozetleri gizle ki marka + 9 menü öğesi tek satıra ÇAKIŞMADAN sığsın. 1440px ve üzeri varsayılan ölçüde kalır. */ @media (min-width: 1200px) and (max-width: 1439.98px) { /* Yalnız YAZI BOYUTU daralır — yatay dolgu ≥1200px kuralında zaten .45rem (eskiden burada tekrar yazılıyordu, aynı değerin ikinci kopyasıydı). */ .main-nav__link { font-size: .8125rem; } .site-header__kampus-ad { font-size: .875rem; } /* Yalnız mikrosite: portal menüsü 1280px'ten itibaren zaten sığdığı için rozetleri korur (portalın kendi darboğazı için bir alttaki bloğa bak). */ .kampus-modu .site-header__badges { display: none; } /* CTA bu aralıkta bir tık sıkışır — menü bağlantıları da .8125rem'e indiği için hap tek başına iri kalıyordu. */ .main-nav__cta { padding: .35rem .8rem; font-size: .8125rem; } .main-nav__item--cta { margin-left: .25rem; } } /* ========================================================================== PORTAL DARBOĞAZI — 1200–1279.98px (header CTA'sı eklenince doğdu) -------------------------------------------------------------------------- ÖLÇÜM (playwright-cli, temiz yükleme, / ve /haberler özdeş sonuç verdi): genişlik │ container iç │ logo │ menü │ rozet │ ARTIK ALAN 1200 │ 1152 │ 126 │ 773 │ 153 │ 68px ← SIĞMAZ 1280 │ 1232 │ 126 │ 773 │ 153 │ 148px ✓ 1366 │ 1292 │ 126 │ 773 │ 153 │ 208px ✓ Sıkıştırılmış CTA ("Franchise", .8125rem) ≈ 93px + 4px kenar boşluğu. 1280px ve üzeri rahat sığıyor; kırılan TEK aralık 1200–1279px. ⚠ NEDEN ROZETLER: portal menüsü 8 üst seviye öğeyle zaten %92 dolu (773/841). Menüyü daha da sıkıştırmak (.45rem → .3rem) etiketleri birbirine yapıştırıyor; rozet şeridini gizlemek ise bu depoda ZATEN kurulu çözüm — mikrosite için aynı gerekçeyle bir üstteki blokta yapılıyor. Burada yalnız aralık DARALTILDI: portal 1280px'ten itibaren rozetlerini geri alır, mikrosite 1440px'e kadar gizli kalır (onun menüsü kampüs adı rozetini de taşıdığı için daha uzun süre dar kalıyor). ⚠ Rozetler <768px'te ZATEN gizli; bu kural yeni bir davranış değil, var olanın 80px'lik bir aralığa uzatılmasıdır. ========================================================================== */ @media (min-width: 1200px) and (max-width: 1279.98px) { .site-header__badges { display: none; } } /* ========================================================================== BELİRİŞ YARDIMCISI (kaydırınca yumuşak giriş) -------------------------------------------------------------------------- Sürücüsü: tema/js/gorunum.js · İşaretleme: [data-belir] ⚠ GİZLEME KOŞULLU: kural yalnız altında geçerlidir ve o sınıfı gorunum.js ekler. JS yüklenmezse/hata alırsa hiçbir şey gizlenmez — animasyon SÜS'tür, görünürlüğün ön koşulu değildir. (Klasik hata: [data-belir]{opacity:0} yazıp JS patlayınca sayfayı boş bırakmak. Burada bilerek yapılmıyor.) translate3d → iOS Safari'de kompozit katman açar, geçiş 60fps kalır. ========================================================================== */ .js-belir [data-belir] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .js-belir [data-belir].belirdi { opacity: 1; transform: none; will-change: auto; /* katmanı geri bırak: uzun sayfalarda bellek */ } /* Hareket azaltma: gorunum.js zaten .js-belir eklemiyor, ama kullanıcı tercihini sayfa açıldıktan SONRA değiştirirse takılı kalmasın. */ @media (prefers-reduced-motion: reduce) { .js-belir [data-belir] { opacity: 1; transform: none; transition: none; } }