/* ============================================================ Yorum katmanı — HEADER KİMLİK + AVATAR parçası (#254) ------------------------------------------------------------ yorum.css'ten AYRILDI (CWV denetimi bulgu 1): yorum bölümü OLMAYAN liste sayfalarında (blog.php, yks-atlas.php) DOM'da yalnız header kimlik pili var; 10 KB'lık tam yorum.css oraya render-bloklayıcı olarak iniyor ve %93'ü ölü kalıyordu. Bu dosya beş sayfada da yüklenir (MA_YORUM_HDR_SAYFALAR), tam yorum.css yalnız yorum bölümü olan üç sayfada (MA_YORUM_SAYFALAR). ⚠ TEK KAYNAK: header pili + avatar kuralları YALNIZ burada yaşar, yorum.css'te KOPYASI YOKTUR. Header/avatar stili eklerken bu dosyayı düzenle. Renk token'ları (--may-av-*, --may-accent) bilinçli olarak yorum.css'te `.ma-yorum` scope'unda kaldı: yorum kartı avatarları oradan çözer, header avatarı (scope dışı) ayrılmadan ÖNCE de token'sızdı — davranış birebir korundu. ============================================================ */ /* ---------- Avatarlar (forumla aynı) ---------- */ .ma-yorum-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #fff; background: var(--may-av-bg, var(--may-accent)); user-select: none; } .ma-yorum-avatar--sm { width: 32px; height: 32px; font-size: 11px; } .ma-yorum-avatar--c1 { --may-av-bg: var(--may-av-1); } .ma-yorum-avatar--c2 { --may-av-bg: var(--may-av-2); } .ma-yorum-avatar--c3 { --may-av-bg: var(--may-av-3); } .ma-yorum-avatar--c4 { --may-av-bg: var(--may-av-4); } .ma-yorum-avatar--c5 { --may-av-bg: var(--may-av-5); } .ma-yorum-avatar--c6 { --may-av-bg: var(--may-av-6); } .ma-yorum-avatar--logo { background: #0d0f12; overflow: hidden; padding: 0; } .ma-yorum-avatar--logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ma-yorum-avatar--foto { overflow: hidden; padding: 0; } .ma-yorum-avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ Header kimlik aksiyonu (blog-detay + atlas evergreen + listeler) — YKS Forum'daki header sağ ucunun aynası (forum.css .ma-forum-hdr-* deseninin ma-yorum-* kopyası; nudge/tooltip bilinçli yok). Markup: header.php SSR (atlas'ta daima misafir pili — CDN cache) + yorum-viewer hydrate 'hdr' takası. body.ma-yorum-hdr yalnız bu sayfalarda basılır (header.php ). ============================================================ */ .header-action > ul > li.ma-yorum-hdr-li { margin-right: 0; } .ma-yorum-hdr-giris-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 20px; border-radius: 50px; border: 1.5px solid var(--color-sb); color: var(--color-sb); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; transition: color .18s ease, background-color .18s ease, border-color .18s ease; } .ma-yorum-hdr-giris-ico { display: none; flex: none; line-height: 0; } .ma-yorum-hdr-giris-btn:hover { background: #16C0B0; border-color: #16C0B0; color: #04211E; } /* Profil avatarı + dropdown (avatar sınıfları ma-yorum-avatar — foto dalı dahil) */ .ma-yorum-hdr-profil { display: inline-flex; border-radius: 50%; background: transparent; border: 0; padding: 0; cursor: pointer; } .ma-yorum-hdr-profil .ma-yorum-avatar { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); transition: box-shadow .18s ease; } body.active-dark-mode .ma-yorum-hdr-profil .ma-yorum-avatar { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } .ma-yorum-hdr-profil:hover .ma-yorum-avatar, .ma-yorum-hdr-user.is-open .ma-yorum-hdr-profil .ma-yorum-avatar { box-shadow: 0 0 0 2px #16C0B0; } /* flex (inline-flex DEĞİL): baseline boşluğu avatarı ~3px aşağı kaydırıyordu (forum dersi 16.08) */ .ma-yorum-hdr-user { position: relative; display: flex; } .ma-yorum-hdr-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 184px; max-width: calc(100vw - 32px); z-index: 1050; padding: 6px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); } .ma-yorum-hdr-menu--right { left: auto; right: 0; transform: none; } .ma-yorum-hdr-user.is-open .ma-yorum-hdr-menu { display: block; } .ma-yorum-hdr-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #2b2f36; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .ma-yorum-hdr-menu-item svg { flex: none; opacity: .8; } .ma-yorum-hdr-menu-item:hover { background: rgba(0, 0, 0, 0.05); color: #069A8E; } .ma-yorum-hdr-menu-item--danger:hover { background: rgba(199, 92, 111, 0.10); color: #C75C6F; } body.active-dark-mode .ma-yorum-hdr-menu { background: rgba(22, 28, 38, 0.97); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } body.active-dark-mode .ma-yorum-hdr-menu-item { color: #E7EAF0; } body.active-dark-mode .ma-yorum-hdr-menu-item:hover { background: rgba(255, 255, 255, 0.07); color: #16C0B0; } body.active-dark-mode .ma-yorum-hdr-menu-item--danger:hover { background: rgba(235, 139, 160, 0.12); color: #eb8ba0; } /* Desktop pill (hamburger gizli, ≥1200) */ @media (min-width: 1200px) { .ma-yorum-hdr-li { margin-left: 12px; } .ma-yorum-hdr-giris-btn { padding: 10px 15px; font-size: 13px; } } /* 1200-1399 in-flow bandı: pilin ayak izi menü margin sıkıştırmasıyla ödenir ("Bize Ulaşın" wrap guard'ı — forum header dersi 16.08.2026) */ @media (min-width: 1200px) and (max-width: 1399.98px) { body.ma-yorum-hdr .mainmenu > li { margin: 0 16px; } } @media (min-width: 1200px) and (max-width: 1280px) { body.ma-yorum-hdr .mainmenu > li { margin: 0 12px; } } @media (min-width: 1200px) { body.ma-yorum-hdr .header-main-nav { min-width: 0; } body.ma-yorum-hdr ul.mainmenu { flex-wrap: nowrap; } body.ma-yorum-hdr ul.mainmenu > li { flex: none; } } /* ≤1199 hamburger bandı: ikon-daire yüz */ @media only screen and (max-width: 1199.98px) { .ma-yorum-hdr-li { margin-left: 8px; } .ma-yorum-hdr-giris-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; } .ma-yorum-hdr-giris-ico { display: block; } .ma-yorum-hdr-giris-text { display: none; } } /* ≥1400: akış dışına çık — KOÇLUK AL + menü tema konumlarında kalır (forum "header zıplıyor" dersi 16.08.2026); avatar da pil de aynı slot */ @media (min-width: 1400px) { body.ma-yorum-hdr .header-action > ul { position: relative; } body.ma-yorum-hdr .header-action > ul > li.ma-yorum-hdr-li { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); margin: 0; } } /* 1400-1499: sağ pay yalnız 80px — pil ikon-daire yüzünü giyer */ @media (min-width: 1400px) and (max-width: 1499.98px) { .ma-yorum-hdr-giris-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; } .ma-yorum-hdr-giris-ico { display: block; } .ma-yorum-hdr-giris-text { display: none; } } /* Pre-paint anti-flaş: girişli tarayıcıda (okunur MA_LOGGED — header'daki inline script ekler) misafir pili boyanmadan gizlenir, hydrate avatarı basana dek yer tutar (visibility: layout kaymaz). yorum.js kaldırır: blog'da (SSR doğru durumu basar) hemen; atlas'ta hydrate misafir/hata dönerse veya 4 sn emniyet süresinde. */ .ma-yorum-hdr-bekle .ma-yorum-hdr-li--giris { visibility: hidden; } /* Gizliyken pil, avatar ayak izini (40px daire) giyer: takas 40->40 olur ve 1200-1399 in-flow bandindaki ~50px sag-blok toparlanmasi (olculen 0.0015 CLS) tamamen sifirlanir. Gorunmez oldugu icin yuz farki onemsiz. */ .ma-yorum-hdr-bekle .ma-yorum-hdr-giris-btn { width: 40px; height: 40px; padding: 0; }