Masthead'in kart görünümünü geri getir

Hayalet sandığım header ölü DEĞİLDİ. `BaseLayout`ta çıplak eleman
seçicili bir `header { ... }` kuralı vardı ve o kural blog döneminin
başlığını değil, HABER MASTHEAD'İNİ biçimlendiriyordu: ortalanmış,
900px'e sınırlı, kenarlıklı, yuvarlak köşeli yüzen çubuk. Kuralı
silince masthead kenardan kenara düz bir bara döndü.

Ölçümüm bunu neden yakalamadı: markup denkliğine baktım, hesaplanmış
stile bakmadım. Beş sayfanın HTML'i karakter karakter aynıydı — ve
tam da bu yüzden hiçbir şey görünmüyordu. Silinen bir CSS kuralı
markup'ta iz bırakmaz. `header`/`nav` gibi çıplak eleman seçicileri
"hangi bileşene ait" sorusunu cevaplamaz; sahibini markup'tan
okuyamadığım için sahipsiz sandım.

Ölçüler artık `.news-masthead` üzerinde, adıyla yazılı. İki derleme
yan yana ölçüldü: 900x78@190, margin 16px auto, radius 16px, border
1px, sticky/z-30 — masaüstü ve mobilde eskisiyle birebir.

Aynı ölçüm iki şey daha gösterdi:

Başlıktaki düğmeler dar ekranda bölünüyordu. Sığmayan şey düğmeler
değil, düğmelerin İÇİNDEKİ metindi: "Orbit ile giriş" iki satıra
düşüp masthead'i şişiriyor ve marka adının üstüne biniyordu. Düğmeler
artık bölünmez; yer daralınca kısalan şey marka adı. 640px altında
"Blog'a dön" başlıktan çıkıyor — alt bilgide "Ana blog" olarak zaten
duruyor, marka ve giriş içinse ikinci bir adres yok. Bu düğme
22 Ağustos'ta giriş eklendiğinden beri sıkışıktı; kart geri gelince
görünür hale geldi.

Bilgi sayfalarının başlık bloğu geri GETİRİLMEDİ. Aynı global kural
ona `margin-left: 16px` ve `top: 16px` veriyordu, yani başlık gövde
metniyle hizasız duruyordu. O hizasızlık kuralın kazasıydı; kural
gidince başlık gövdeye hizalandı.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: sametbasbug

src/components/OturumDugmesi.astro

@@ -78,7 +78,7 @@ const donus = Astro.url.pathname + Astro.url.search;
 	 *
 	 * Değerler `--news-*` değişkenlerinden geliyor, yani tema değişince ikisi
 	 * birlikte değişiyor ve kopya bir palet oluşmuyor. */
-	.oturum { display: flex; align-items: center; gap: .5rem; margin: 0; }
+	.oturum { display: flex; align-items: center; gap: .5rem; margin: 0; flex-shrink: 0; }
 	.oturum-ad {
 		max-width: 14ch;
 		overflow: hidden;
@@ -104,6 +104,9 @@ const donus = Astro.url.pathname + Astro.url.search;
 		font-family: inherit;
 		font-size: 0.8rem;
 		font-weight: 700;
+		/* "Orbit ile giriş" iki kelime: sarmasına izin verilirse dar başlıkta
+		   iki satıra düşüp masthead'i markanın üstüne bindiriyor. */
+		white-space: nowrap;
 		color: var(--news-muted-strong);
 		background: color-mix(in srgb, var(--news-panel) 85%, transparent);
 		cursor: pointer;

src/layouts/NewsLayout.astro

@@ -261,13 +261,35 @@ const blogHomeHref = isNewsSubdomainEnabled() ? getMainSiteUrl() : '/';
 			var(--news-bg);
 		color: var(--news-text);
 	}
+	/* Masthead bir KART: ortalanmış, kenarlıklı, yuvarlak köşeli yüzen çubuk.
+	   Bu görünüm uzun süre `BaseLayout`taki global `header { ... }` kuralından
+	   geliyordu — blog döneminden kalma, çıplak eleman seçicili bir kural. O
+	   kuralı "hayalet" sanıp sildim ve masthead kenardan kenara düz bir bara
+	   döndü: markup'ın aynı kalması stilin de aynı kaldığı anlamına gelmiyor.
+	   Ölçüler artık burada, adıyla yazılı. */
 	.news-masthead {
 		position: sticky;
 		top: 0;
 		z-index: 30;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0.75rem;
+		width: calc(100% - 2rem);
+		max-width: 900px;
+		margin: 1rem auto;
+		padding: 1rem 1.5rem;
 		background: rgba(5, 5, 5, 0.9);
 		backdrop-filter: blur(14px);
-		border-bottom: 1px solid color-mix(in srgb, var(--news-border) 88%, transparent);
+		border: 1px solid color-mix(in srgb, var(--news-border) 88%, transparent);
+		border-radius: 1rem;
+		box-shadow: var(--shadow);
+		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	@media (max-width: 700px) {
+		.news-masthead {
+			padding: 1rem;
+		}
 	}
 	.news-masthead-wrap,
 	.news-hero,
@@ -320,12 +342,19 @@ const blogHomeHref = isNewsSubdomainEnabled() ? getMainSiteUrl() : '/';
 	.news-brand-copy {
 		display: flex;
 		align-items: center;
+		min-width: 0;
 	}
 	.news-brand strong {
 		font-size: 1rem;
 		font-weight: 800;
 		letter-spacing: -0.03em;
 		line-height: 1;
+		/* Dar ekranda kısalacak olan MARKA ADI. Düğmeler bölünmez; bir düğme
+		   iki satıra düşünce başlık şişiyor ve üst üste biniyor. */
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 	.news-nav-row {
 		display: grid;
@@ -395,6 +424,8 @@ const blogHomeHref = isNewsSubdomainEnabled() ? getMainSiteUrl() : '/';
 		align-items: center;
 		justify-content: center;
 		align-self: center;
+		white-space: nowrap;
+		flex-shrink: 0;
 		padding: 0.28rem 0.58rem;
 		border: 1px solid color-mix(in srgb, var(--news-border) 88%, transparent);
 		border-radius: 999px;
@@ -624,6 +655,14 @@ const blogHomeHref = isNewsSubdomainEnabled() ? getMainSiteUrl() : '/';
 		}
 	}
 	@media (max-width: 640px) {
+		/* Dar başlıkta dört öğe (marka, tema, giriş, blog) yan yana sığmıyor;
+		   sığdırmaya zorlanınca kısalan şey marka adı oluyordu ve "Equinox
+		   Haber" tek harfe düşüyordu. Blog bağlantısı burada gizleniyor çünkü
+		   alt bilgide "Ana blog" olarak zaten duruyor — marka ve giriş için
+		   ikinci bir adres yok. */
+		.news-actions.mobile-only .news-action-pill {
+			display: none;
+		}
 		.news-masthead-inner,
 		.news-hero,
 		.news-body {