/* css/giris-kapisi.css — A3 katmanı: üst künye şeridi, açılır menünün * görünürlük mekaniği, Canlı Yayın butonu ve giriş kapısı modalı. * * NEDEN AYRI DOSYA: çekirdek (css/cekirdek.css) ve anasayfa (css/anasayfa.css) * başka ajanların; aynı satırda buluşmamak için A3'ün eklediği her kural * burada duruyor. Çekirdekten SONRA yükleniyor (zy_head_kaynaklar), yani * oradaki tanımları bilinçli olarak ezebiliyor. * * RENK KURALI (şartname §1): ham hex yok. Yalnız var(--token) ve * color-mix(in srgb, …). Dosyadaki her renk yedi temada da taşınır. * * ÇEKİRDEĞE NOT (B3): cekirdek.css'teki "HİÇBİR ŞEY KENDİLİĞİNDEN AÇILMAZ: * :hover ile açılan panel yok" yorumu ARTIK GEÇERLİ DEĞİL — şartname §5 * panelin JS'siz `:hover`/`:focus-within` ile açılmasını istiyor ve mekanik * aşağıya taşındı. O yorum bloğu güncellenmeli. */ /* ========================================================================== 1. Üst künye şeridi (şartname §4.0) — .zy-ust Barın ÜSTÜNDE, sayfayla birlikte kayar (sticky olan bar'dır). Solda telefon/e-posta, sağda Giriş · Kayıt Ol. ========================================================================== */ .zy-ust { background: var(--murekkep); color: var(--yuzey); } .zy-ust-ic { max-width: var(--kap); margin: 0 auto; padding: 4px var(--kap-bosluk); min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 18px; font-size: 13px; line-height: 1.4; } .zy-ust-kunye, .zy-ust-hesap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-width: 0; } /* min-height 24: WCAG 2.5.8 dokunma hedefi. 13px satır tek başına 18px kalır. */ .zy-ust a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 4px; border-radius: 6px; color: var(--yuzey); text-decoration: none; } .zy-ust a:hover, .zy-ust a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .zy-ust a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zy-ust svg { flex: none; width: 16px; height: 16px; } .zy-ust-ayrac { color: color-mix(in srgb, var(--yuzey) 60%, var(--murekkep)); } /* --- Sosyal ağ bağlantıları (şeridin sağ ucu) --- Şerit tek satır: künye sola, sosyal sağa yaslanır. Ortada boşluk kalırsa `justify-content: space-between` ikisini uçlara iter (zaten .zy-ust-ic'te). İKON BAĞLANTILARDA ALT ÇİZGİ YOK: .zy-ust a kuralı hover'da underline veriyor ama içinde metin olmayan bir bağlantıda alt çizgi ikonun altında kopuk bir tire gibi görünür. Yerine yumuşak bir zemin veriliyor. */ .zy-ust-sosyal { display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; min-width: 0; } /* Etiket 900px altında düşer: dar şeritte "Bizi takip edin" künyeyi sıkıştırır, ikonlar zaten kendi başlarına anlaşılır (her birinde aria-label + title var). */ .zy-ust-sosyal-et { color: color-mix(in srgb, var(--yuzey) 82%, var(--murekkep)); margin-right: 2px; white-space: nowrap; } @media (max-width: 899px) { .zy-ust-sosyal-et { display: none; } } /* 24×24 dokunma hedefi (WCAG 2.5.8): 16px ikon + 4px iç boşluk. */ .zy-ust a.zy-sosyal-bag { min-width: 24px; min-height: 24px; padding: 4px; justify-content: center; border-radius: 6px; transition: background-color .15s ease, transform .15s ease; } .zy-ust a.zy-sosyal-bag:hover, .zy-ust a.zy-sosyal-bag:focus-visible { text-decoration: none; background: color-mix(in srgb, var(--yuzey) 18%, transparent); } @media (prefers-reduced-motion: no-preference) { .zy-ust a.zy-sosyal-bag:hover { transform: translateY(-1px); } } /* <768px'te gizlenir (§4.0): dar ekranda künye zaten altbilgide ve iletisim.php'de duruyor, tepede iki satır yer kaplardı. */ @media (max-width: 767px) { .zy-ust { display: none; } } /* ========================================================================== 2. Masaüstü açılır panelinin görünürlüğü (şartname §5) Panel JS OLMADAN açılır: içindeki bir öğe odak alınca (:focus-within). Betik yalnız tıklama kilidini ([data-acik]) ve Esc'i ([data-kapali]) ekler. :hover ile AÇILMIYOR (7 Eylül 2026, orkestratör kararı). A3 bunu şartname §5'e dayanarak eklemiş ve kendi raporunda "en zayıf kararım" diye bildirmişti: fare "Akademiler" kelimesinin üstünden geçerken 680px'lik panel hero'nun üstünü örtüyor ve cekirdek.css'te gerekçesi yazılı bir kararı bozuyordu. Kayıp yok: fareyle tıklamak düğmeye odak verir, :focus-within panelı JS'siz de açar. ========================================================================== */ .zy-acilir-panel { /* visibility (display değil): panel `position: fixed`, yani gizliyken de yer kaplamıyor; visibility ile hem ekrandan hem SEKME SIRASINDAN çıkıyor, üstelik geçişi (transition) canlandırılabiliyor. */ visibility: hidden; opacity: 0; transition: opacity .14s ease-out, visibility 0s linear .14s; } .zy-acilir:focus-within > .zy-acilir-panel, .zy-acilir[data-acik] > .zy-acilir-panel { visibility: visible; opacity: 1; transition-delay: 0s; } /* Esc ile kapatıldı: odak hâlâ kutunun içinde olsa bile panel kapalı kalır. Sıra ÖNEMLİ — aynı özgüllükteki üstteki kuralı ezmek için sonra geliyor. */ .zy-acilir[data-kapali] > .zy-acilir-panel { visibility: hidden; opacity: 0; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .zy-acilir-panel { transition: none; } } /* Açıcı artık değil