/* pages-home.css — ana sayfa ("sözlük kokpiti", v4) + sözlük/harf listesi,
   arama, 404 ve kavşak sayfaları.
   KAPSAM: front-page · archive-word · archive · index · taxonomy-harf · search
   · templates/{artikel,cumleler}-index · template-parts/{home-masthead,
   home-tabs,home-wortart,home-ask,daily-word,artikel-board,word-rail,
   letter-nav,word-list,content-none}.

   ────────────────────────────────────────────────────────────────────────────
   ANA SAYFANIN TASARIM SÖZLEŞMESİ (gerekçeler §0'da)

   1. YOĞUNLUK ÖLÇÜLEBİLİR BİR HEDEFTİR. İlk ekranda en az üç ayrı bilgi
      bloğu bulunur (ölçüm: 1440×800'de altı). v3'te BİR taneydi.
   2. PANEL DİLİ SİTENİN KENDİ İMZASIDIR: kırmızı dikey çizgi + BÜYÜK HARF
      başlık (components.css `.card__title`). Büyük harfe çıkan şey Almanca
      sözcük değil, Türkçe bölüm etiketidir.
   3. KIRMIZI = EYLEM + BÖLÜM ÇİZGİSİ, kelime detay sayfasındaki kuralın
      birebir aynısı: arama düğmesi ve "Soru sor" düğmesi (eylem), panel
      başlığının dikey çizgisi (bölüm), sekme göstergesi (durum — aynı iş
      components.css `.pill.is-active`ta da kırmızıyla yapılıyor). Başka
      hiçbir yerde kırmızı yok.
      ARTİKEL RENKLERİ = VERİ (pano çubukları, günün kelimesinin zemini,
      satırlardaki der/die/das). İkisi hiçbir yerde aynı ölçeğin iki ucu
      olarak yan yana gelmez; sekme çubuğundaki der/die/das renksizdir.
   4. RENK ASLA TEK TAŞIYICI DEĞİL. `der/die/das` her yerde YAZIYLA da var;
      her çubuğun yanında kesin sayı (ve panoda yüzde) yazılıdır.
   5. AMBER (--c-mark) YALNIZCA ZEMİN: günün kelimesindeki tarih pili
      (üstünde --c-mark-ink, 8,26:1). Metin rengi olarak hiç kullanılmaz.
   6. SÜTUNLAR BAĞIMSIZ YIĞINDIR. `grid-template-areas` ve `order` YOK:
      görsel sıra = DOM sırası, her genişlikte. Odak sütunlar arası zıplamaz.

   MOBİL ÖNCELİKLİ: taban kurallar dar ekran içindir; genişletme yalnızca
   `min-width` ile (34em · 40em · 48em · 64em).
   ──────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════ 0. Yerel token'lar ═══════════════════════ */
/* tokens.css DONDURULMUŞ. Buradaki değerler yalnızca ana sayfa/kavşak
   şablonlarını ilgilendiriyor.
   SABİT RENK SAYISI 4 → 3'e İNDİ (2026-09): bandın zemini artık uydurma bir
   koyu renk değil, `var(--color-text)`. Kalan üçü (bant mürekkebi, bant soluk
   yazısı, bant ayracı) yalnızca KOYU BANDIN ÜSTÜNDE anlamlı; tokens.css'te
   koyu bir yüzeyin üstü için karşılıkları yok. Koyu tema değerleri dark.css'te
   tanımlıdır, bu yüzden tema değişince kendiliğinden doğru değere dönerler.
   Geri kalan her şey mevcut token'lara dayanır. */

:root {
	/* Masthead — sayfanın tek koyu yüzeyi.
	   2026-09 GÖRSEL DİL BİRLİĞİ: değer #1D2126'dan --color-text'e (#333333)
	   çekildi. Gerekçe: #1D2126 sitenin hiçbir yerinde bulunmayan, yalnızca bu
	   bant için icat edilmiş bir renkti — kullanıcının "sanki farklı sayfalar
	   gibi" dediği şeyin ta kendisi. #333333 ise kelime detay sayfasının
	   MÜREKKEP rengidir (tokens.css --c-ink, sayfadaki her paragrafın rengi).
	   Bant artık yeni bir renk getirmiyor; sayfanın kendi mürekkebini YÜZEY
	   olarak kullanıyor.
	   ÖLÇÜM (WCAG 2.1 kontrast oranı — hesap, tahmin değil):
	     beyaz başlık ................. 12,63:1  (≥4,5 ✓)
	     --home-mast-muted (#D0D0D0) ..  8,19:1  (≥4,5 ✓)
	     arama hapının beyaz dolgusu .. 12,63:1  (arayüz sınırı ≥3:1 ✓)
	   MARKA KIRMIZISI BANTLA KARŞILAŞTIRILMAZ: kırmızı yuvarlak düğme bandın
	   üstünde değil, hapın 4px beyaz iç dolgusunun içindedir (components.css
	   `.search-form { padding: var(--space-1) }`). Geçerli komşuluk
	   kırmızı/beyaz = 4,86:1 ✓. (Bilgi: #E30A16 ile #333333 arasında 2,60:1
	   var, ama bu iki renk sayfada hiçbir yerde yan yana gelmiyor.) */
	/* 2026-09-13: KOYU BANT KALDIRILDI.
	   Müşteri kararı: anasayfa diğer sayfalarla (kelime detay, artikel, cümle)
	   birebir aynı yüzeyi kullanacak. Koyu bant tek başına anasayfayı "ayrı bir
	   site" gibi gösteriyordu; rengi paletten seçmek yetmedi.
	   Token'lar SİLİNMEDİ, sayfanın kendi renklerine bağlandı — böylece
	   masthead işaretlemesi ve koyu tema kuralları olduğu gibi çalışmaya devam
	   ediyor, yalnızca yüzey beyaza döndü. Bandı geri istersen bu dört satır
	   yeterli. */
	/* 2026-09-13 (2. tur): düz beyaz yerine ÇOK HAFİF bir yüzey.
	   Koyu bant "ayrı sayfa" hissi veriyordu; düz beyaz ise hero'yu hiç
	   ayırmıyordu. --color-surface-muted (#F8F9FA) sitenin kendi token'ı —
	   kelime detaydaki tablo başlığı ve cümle kutuları da aynı tonu kullanıyor,
	   yani yeni bir renk ICAT EDİLMEDİ. Altına saç teli çizgi: hero biter,
	   içerik başlar. */
	/* 2026-09-13 (son): hero bandı DÜZ YÜZEYE döndü.
	   Kelime detay sayfasında gri YALNIZCA veri kutularında kullanılıyor
	   (.data-table thead, .sentence-item). Ana sayfada hem tam genişlikte gri
	   bant hem her panelde gri başlık şeridi vardı — gri baskın hâle gelip
	   sayfayı "başka bir sistem" gibi gösteriyordu. Gri artık burada da
	   yalnızca veri yüzeylerinde. */
	--home-mast-bg: transparent;
	--home-mast-ink: var(--color-text);
	--home-mast-muted: var(--color-text-muted);
	--home-mast-line: var(--color-border);

	/* Panel iskeleti.
	   2026-09: panel artık BİR KARTTIR. Yarıçap, gölge, kenarlık ve iç boşluk
	   components.css `.card` ile aynı token'lardan gelir; aşağıdaki iki token
	   yalnızca panelin İÇİNDEKİ ayrıntılar için kaldı:
	     --home-panel-line: başlık şeridinin altındaki saç teli. Kelime detay
	       sayfasında kart İÇİ ayraç `--color-border`dır (.data-table hücre
	       çizgisi, .home-list satır çizgisi) — aynı token kullanılıyor.
	     --home-panel-head: başlık şeridinin zemini. `--color-surface-muted`,
	       yani kelime detay sayfasındaki `.data-table thead` ve
	       `.sentence-item` zeminiyle AYNI token. Yeni bir gri icat edilmedi. */
	--home-panel-line: var(--color-border);
	/* 2026-09-13 (son): panel başlık şeridi ARTIK GRİ DEĞİL.
	   Gerekçe: kelime detay sayfasında kart başlığı düz kart yüzeyinde durur;
	   gri yalnızca .data-table thead ve .sentence-item gibi VERİ kutularında.
	   Ana sayfada her panelin başlığı gri şeritti ve hero da griydi → gri
	   sayfanın ana yüzeyi hâline gelmişti. Şerit kalktı; ayrımı alttaki saç
	   teli çizgi (--home-panel-line) yapıyor, kelime sayfasındaki kart içi
	   ayraçla aynı token. Panelin veri tabloları grisini KORUR. */
	--home-panel-head: transparent;

	/* PANEL İÇ BOŞLUĞU — kartın kendi token'ı.
	   `--card-padding` tokens.css'te 16px, ≥40em'de 24px'tir ve kelime detay
	   sayfasındaki her kartın iç boşluğu budur. Panel başlığı, gövdesi ve
	   liste satırları AYNI değeri kullanır, böylece panelin içindeki her şey
	   tek bir sol kenara oturur — kartta olduğu gibi. SAPMA YOK: 1440px'te en
	   dar sütun (sol ray) 216px ve 24+24px iç boşluktan sonra ölçü satırına
	   168px kalıyor; "der 211 %22" 100px sürüyor, yani sığıyor (ölçüldü).
	   YOĞUNLUK DEĞİŞMEDİ: satır yüksekliği ve satır sayısı aynı; büyüyen tek
	   şey yatay iç boşluk. */
	--home-pad: var(--card-padding);

	/* Koyu banttaki arama hapının SINIRI.
	   AÇIK TEMADA `.search-form`un kendi kenarlığıyla AYNI token — yani hiçbir
	   sapma yok (hapın beyaz dolgusu bandı zaten 12,63:1 ile deliyor).
	   KOYU TEMADA zorunlu bir istisna: dolgu (#191C21) ile bant (#262B33)
	   1,35:1 kalıyor ve WCAG 1.4.11'in istediği 3:1 sınır oluşmuyor; dark.css
	   bu token'ı #7D8797'ye çeker (banda 3,92:1 · hapa 4,71:1). */
	--home-field-line: var(--color-border);

	/* Zebra şeridi. Ayrı token, çünkü koyu temada değeri değişebilsin. */
	--home-zebra: var(--color-surface-muted);

	/* Artikel almayan sözcüklerin dolgusu.
	   --color-border açık temada #ebebeb, koyuda #2c3037 — ikisi de nötr ve
	   ikisi de zemininden ayrışıyor, artikel soluk tonlarıyla aynı ağırlıkta. */
	--home-none-soft: var(--color-border);

	/* Ölçü çubuğunun uzunluğu. Satır bazında `style="--home-bar:46%"` ile
	   ezilir (şablon veriden hesaplar); burada güvenli taban. */
	--home-bar: 0%;

	/* Satır yüksekliği = dokunma hedefi. Liste satırları BAĞLANTIDIR, bu yüzden
	   asla --tap-min'in altına inmez; ölçü satırları (tür dağılımı) bağlantı
	   olmadığı için daha sıkı olabilir. */
	--home-row-h: var(--tap-min);
	--home-meter-h: 2rem;
	--home-rank-w: 1.5rem;

	/* Alfabe hücresi iki satır taşır (harf + kelime sayısı). */
	--home-cell-min: 2.75rem;
	--home-cell-h: 3.25rem;
}

/* ═══════════════════════════════ 1. Sayfa ritmi ═══════════════════════════ */

/* Bantlar ve paneller arasındaki tek boşluk. v3'te --space-6/--space-7 idi
   (32/48px) ve sayfanın "boş" görünmesinin ikinci sebebiydi; burada 16px. */
.home {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
}

/* --- Panel: sayfadaki tek kutu türü = KART -------------------------------
   2026-09 GÖRSEL DİL BİRLİĞİ. Önce: `border: 1px solid #dcdcdc` + `--radius`
   (5px) + gölge YOK. Kelime detay sayfasındaki kart ise kenarlıksız,
   `--radius-card` (12px) ve `--shadow-card`. İki sayfa yan yana konduğunda
   ilk göze çarpan fark buydu: solda "çerçeveli kutu", sağda "yüzen kart".
   Artık üç değer de components.css `.card` ile AYNI token'dan geliyor.

   KENARLIK YOK: `--shadow-card` açık temada iki katmanlı yumuşak gölge,
   koyu temada `0 0 0 1px #2c3037` halkasıyla başlıyor — yani kenarlık koyu
   temada gölgenin İÇİNDEN geliyor ve burada tekrar edilmesi gerekmiyor
   (kartın kelime sayfasındaki davranışının birebir aynısı). */
.home-panel {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	min-width: 0;

	/* KIRPMA GEREKLİ: `.card`ın kendi iç dolgusu var, bu yüzden çocukları asla
	   yuvarlatılmış köşeye değmez. Panel ise BİLE İSTEYE dolgusuzdur (başlık
	   şeridi ve liste satırları kenardan kenara gider); kırpma olmasaydı gri
	   başlık şeridi, zebra şeridi ve ölçü çubuğu dolgusu köşeleri kareltirdi. */
	overflow: hidden;
}

/* Kartın İÇİNDEKİ panel bir kart DEĞİL, alt yüzeydir — gölge tekrarlanmaz.
   (templates/artikel-index.php `.home-panel`i bir `.card` içinde kullanıyor.)
   Kullanılan dil kelime detay sayfasının kart içi kutusudur: 1px
   `--color-border` + `--radius` — `.table-scroll` ile birebir aynı. */
.card .home-panel {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: none;
}

.card .home-panel > .home-panel__head {
	border-radius: var(--radius) var(--radius) 0 0;
}

/* Başlık şeridi: sessiz gri alt yüzey + saç teli ayraç.
   KORUNDU, çünkü bu bir SAPMA DEĞİL: kelime detay sayfası da kartın içinde
   aynı dili konuşuyor — `.data-table thead th` tam olarak bu (aynı
   `--color-surface-muted` zemin, aynı BÜYÜK HARF küçük başlık, altında aynı
   `--color-border` çizgi). Şerit panelin "veri paneli" karakterini taşıyor;
   kullanıcının beğendiği yoğunluk buradan geliyor ve renk sözlüğü ortak.
   İç boşluk artık kartın token'ı: başlık ile gövde aynı sol kenara oturur. */
.home-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	padding: var(--space-3) var(--home-pad);
	background: var(--home-panel-head);
	border-bottom: var(--border-width) solid var(--home-panel-line);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* components.css `.card__title` imzası (kırmızı çizgi + BÜYÜK HARF) AYNEN
   kullanılır — ölçek dâhil. Önce burada `--text-sm` (14px) ile bir kademe
   küçültülüyordu; kelime detaydaki kart başlığı ise `--text-eyebrow` (15px).
   1px'lik bu fark, yan yana bakıldığında iki sayfayı "aynı sistem" olmaktan
   çıkaran ayrıntılardan biriydi; ölçek ezmesi kaldırıldı.
   `lang="tr"` şablonda: text-transform'un i → İ eşlemesi doğru olsun diye. */
.home-panel__title {
	min-width: 0;
}

/* Başlık şeridinin sağ ucu: sayı, tarih ya da "tümü" bağlantısı. */
.home-panel__note {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-tight);
	color: var(--color-text-muted);
}

.home-panel__more {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: var(--weight-medium);
}

.home-panel__more:hover {
	color: var(--color-brand);
}

/* Gövde: `.card__body` ile aynı — aynı boşluk (`--space-4`) ve aynı iç
   dolgu (`--card-padding`). Önce `--space-3` (12px) idi. */
.home-panel__body {
	display: grid;
	gap: var(--space-4);
	padding: var(--home-pad);
	min-width: 0;
}

/* Panelin altındaki açıklama satırı (artikel notu, tür dizini notu). */
.home-panel__foot {
	margin: 0;
	padding: var(--space-3) var(--home-pad) var(--home-pad);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
}

/* ═══════════════════════════════ 2. Masthead ══════════════════════════════ */

/* MOBİLDE BAŞLIKTAKİ ARAMA KUTUSU GİZLENİR — yalnızca ana sayfada.
   header.php 48em altında tam genişlikte bir arama hapı basıyor; hemen altında
   masthead'in arama alanı var. İki özdeş alan ilk ekranı yiyor. */
@media (max-width: 47.99em) {
	.home .site-header__search {
		display: none;
	}
}

.home-mast {
	position: relative;
	isolation: isolate;
	/* site-main'in üst dolgusunu geri alır: koyu bant başlığa yapışır. */
	margin-top: calc(-1 * var(--space-4));
	padding: var(--space-5) 0 var(--space-4);
	color: var(--home-mast-ink);
}

/* TAM BANT — zemin bir PSEUDO'da yaşar, öğenin kendisinde değil.
   NİÇİN BÖYLE: `width:100vw` + negatif margin yöntemi, kaydırma çubuğu
   genişliği kadar YATAY KAYDIRMA üretir (100vw belge genişliğinden büyüktür).
   `box-shadow`un yayılması ise asla kaydırılabilir taşma üretmez; `clip-path`
   de yerleşimi etkilemez, yalnızca gölgenin dikeyde taşmasını keser.
   Zemin pseudo'da olduğu için `clip-path` İÇERİĞİ KIRPMAZ — arama önerisi
   listesi (position:absolute, bandın altına taşar) olduğu gibi görünür. */
/* TAM BANT — zemin bir PSEUDO'da yaşar, öğenin kendisinde değil.
   `width:100vw` + negatif margin yöntemi kaydırma çubuğu kadar YATAY KAYDIRMA
   üretirdi; `box-shadow` yayılması asla kaydırılabilir taşma üretmez.
   `clip-path` yalnızca gölgenin dikeyde taşmasını keser, içeriği kırpmaz —
   arama önerisi listesi (position:absolute) bandın altına serbestçe taşar. */
.home-mast::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--home-mast-bg);
	box-shadow: 0 0 0 100vmax var(--home-mast-bg);
	clip-path: inset(0 -100vmax);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* Hero ortalanır: müşteri "arama tam ortada olsun" dedi. Arama tek başına
   ortalanıp başlık solda kalsaydı hizalama kırılırdı; blok bütün olarak
   ortalanıyor. Sayfanın geri kalanı (paneller, listeler) sola hizalı kalır —
   kelime detay sayfasıyla aynı. */
.home-mast__inner {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
	/* `justify-items: center` KULLANILMAZ: grid öğelerini içerik genişliğine
	   daraltır ve arama kutusunun max-width'i devreye giremez (ölçüldü: 42rem
	   yerine 282px'te kalıyordu). Öğeler tam genişlikte kalır (stretch),
	   ortalama metin hizasıyla ve kutunun kendi margin-inline:auto'suyla olur. */
	text-align: center;
}

.home-mast__title {
	margin: 0;
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	color: var(--home-mast-ink);
}

.home-mast__lead {
	margin: 0;
	max-width: 62ch;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--home-mast-muted);
}

@media (min-width: 48em) {
	.home-mast {
		padding-block: var(--space-6) var(--space-5);
	}

	.home-mast__title {
		font-size: var(--text-2xl);
	}

	.home-mast__lead {
		font-size: var(--text-md);
	}
}

/* --- Arama alanı ---------------------------------------------------------- */
/* TEK BİLEŞEN. 2026-09'a kadar burada `.search-form`un BİÇİMİNİ değiştiren bir
   blok vardı: kare köşe (`--radius`), 2px çerçeve, gölgesiz kutu ve yazılı
   dikdörtgen "ARA" düğmesi. Aynı searchform.php'nin kelime detay sayfasındaki
   hâli ise hap (`--radius-pill`), saç teli kenarlık, `--shadow-card` ve
   KIRMIZI YUVARLAK ikon düğmesiydi. Yani tek bir şablon iki ayrı görünüm
   üretiyordu; kullanıcının "farklı sayfalar gibi" dediği şeyin ikinci
   kaynağı buydu.

   ARTIK BİÇİMİ EZEN TEK BİR KURAL YOK: hap, yükseklik, düğme biçimi, yarıçap,
   gölge ve kenarlık components.css `.search-form`dan aynen gelir. Buradaki üç
   kural yalnızca ÖLÇÜ ve KOYU ZEMİN uyarlamasıdır, görsel dil değil.

   "ARA" SÖZCÜĞÜ GİTTİ (bilinçli, brief gereği "aynı düğme biçimi"). Metin
   silinmedi: searchform.php'deki `<span class="screen-reader-text">Ara</span>`
   yerinde duruyor, yalnızca artık her iki sayfada da görsel olarak gizli —
   ekran okuyucu için hiçbir şey değişmedi. */

/* Genişlik EZİLMEZ: `.search-box`un kendi 32rem'i kalır — kelime detay
   sayfasındaki hapla aynı ölçü. Değişen tek şey hizalama: bant içinde hap
   başlık ve lead ile aynı sol kenardan başlar, ortalanmaz. */
.home-mast__search .search-box {
	/* 2026-09-13: 0 → auto. Arama kutusu hero'nun ortasında durur (müşteri
	   isteği). Genişlik 32rem → 42rem: hero sayfanın birincil eylemi, kutu
	   burada daha geniş durur. BİÇİM değişmiyor (hap, saç teli kenarlık,
	   kırmızı yuvarlak düğme components.css'ten) — yalnızca genişlik sınırı.
	   Diğer sayfalardaki arama 32rem'de kalır. */
	margin-inline: auto;
	max-width: 42rem;
}

/* Koyu zemin uyarlaması — YALNIZCA kenarlık rengi.
   Açık temada `--home-field-line` = `--color-border`, yani `.search-form`un
   kendi değeri (sıfır sapma). Koyu temada dark.css bunu #7D8797'ye çeker;
   gerekçe §0'da (WCAG 1.4.11). */
.home-mast__search .search-form {
	border-color: var(--home-field-line);
}

/* Odak halkası HAPIN TAMAMINDA: girdinin kendi outline'ı hapın içine çizilir
   (dar ve çirkin). Halka koyu bandın üstünde okunsun diye bant mürekkebi
   (beyaz, 12,63:1) kullanılır; kartın gölgesi korunur. */
.home-mast__search .search-form:focus-within {
	box-shadow: var(--shadow-card), 0 0 0 3px var(--home-mast-ink);
}

.home-mast__search .search-form__input:focus-visible {
	outline: none;
}

/* --- Sayaçlar ------------------------------------------------------------- */
/* Sayfanın büyüklüğü ilk ekranda, dört rakam hâlinde. BAĞLANTI DEĞİLLER:
   hemen altındaki sekme çubuğu zaten aynı iki hedefe (sözlük, cümleler)
   bağlanıyor; ikinci kez bağlamak hem yinelenen bağlantı hem de 44px
   dokunma hedefi zorlaması olurdu. */
.home-mast__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3) var(--space-4);
	margin: 0;
	padding-top: var(--space-3);
	border-top: var(--border-width) solid var(--home-mast-line);
}

@media (min-width: 40em) {
	.home-mast__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* DOM'da <dt> (etiket) önce, <dd> (sayı) sonra — ekran okuyucu "kelime, 972"
   duyar. Gözün önce rakamı görmesi için görsel sıra ters çevrilir. Bu bir
   OKUMA SIRASI değişikliği değil, aynı çiftin iki gösterimi. */
.home-stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	min-width: 0;
}

.home-stat__value {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--home-mast-ink);
}

.home-stat__label {
	font-size: var(--text-xs);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--home-mast-muted);
}

/* ═══════════════════════ 3. İkinci seviye sekme çubuğu ════════════════════ */
/* v3'te bu katman HİÇ YOKTU. Şerit içerik sütunuyla hizalıdır (masthead gibi
   tam banda taşmaz): iki tam bant üst üste gelseydi sayfanın başı iki koyu
   bloktan ibaret olurdu ve sekmeler masthead'in parçası sanılırdı. */
/* Şerit de bir KARTTIR: aynı yüzey, aynı yarıçap, aynı gölge. Önce gri zemin
   + 1px çerçeve + 5px yarıçap idi; sayfadaki tek "başka türlü kutu" oydu. */
.home-tabs {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	min-width: 0;

	/* Panelle aynı gerekçe: ilk/son sekmenin hover dolgusu köşeyi kareltirdi. */
	overflow: hidden;
}

.home-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	/* 2026-09-13: şerit ortalanır (müşteri isteği). Hero ortalı olduğu için
	   hemen altındaki sekme şeridinin sola yaslı kalması hizayı kırıyordu. */
	justify-content: center;
}

.home-tabs__item {
	min-width: 0;
}

/* Sekme göstergesi ALT ÇİZGİDİR, dolgu değil: dolgulu aktif sekme kırmızı bir
   blok olurdu ve sayfadaki tek eylem düğmesiyle (arama) yarışırdı.
   Kırmızı burada bir DURUM işaretidir; components.css'teki `.pill.is-active`
   ve views.css'teki `.artikel-nav__link.is-active` de aynı işi kırmızıyla
   yapıyor, yani kural iki sayfada da aynı. */
.home-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding-inline: var(--home-pad);
	border-bottom: 3px solid transparent;
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
}

/* Şerit artık beyaz (kart) olduğu için hover dolgusu gri alt yüzeye döner —
   kelime detay sayfasındaki `.nav__list a:hover` ile aynı token. */
.home-tabs__link:hover {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
	background: var(--color-surface-muted);
}

.home-tabs__link:focus-visible {
	outline-offset: -3px;
}

/* Almanca sekme etiketi (der/die/das) serif yazıda ama RENKSİZ — bu şeritte
   çalışan işaret kırmızı göstergedir (bkz. §0/3). */
.home-tabs__label[lang="de"] {
	font-weight: 600;
}

/* 2026-09-13: sayı artık ROZET. Önce etiketin yanında serbest duran soluk bir
   rakamdı ve "kırık bir üst simge" gibi okunuyordu. Rozet hâlinde sayı bir
   veri noktası olarak okunur: kendi yüzeyi, hizalı yüksekliği, tabular
   rakamları var — 972 ile 10.477 aynı ritimde dizilir. Rozet NÖTR yüzeydedir;
   kırmızı bu şeritte yalnızca aktif/hover göstergesi olarak çalışır. */
.home-tabs__count {
	display: inline-flex;
	align-items: center;
	min-height: 1.375rem;
	padding-inline: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--color-text-muted);
}

.home-tabs__link:hover .home-tabs__count {
	background: var(--color-surface);
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.home-tabs__link:hover .home-tabs__count {
	color: inherit;
}

/* ═══════════════════════════ 4. A–Z harf dizini ═══════════════════════════ */
/* Tam genişlikte, aramanın hemen altında — bir sözlüğün beklendiği yer.
   Rayda olsaydı dört sütuna sığar ve ~470px uzardı; burada iki satır, ~150px.

   Bu blok BİLİNÇLİ OLARAK `.home` ile sınırlandırılmadı: aynı şerit harf
   arşivlerinde de kullanılıyor ve iki satırlı hücre orada da doğru. Yalnızca
   RENK ayarı aşağıda `.home` altına alındı. */

/* components.css `.card__body > * { margin: 0 }` diyor ama views.css sonra
   yüklendiği için `.letter-nav { margin-bottom }` kazanıyordu → kart içinde
   çift boşluk. Kart/panel bağlamında sıfırlanır. */
.card__body .letter-nav,
.home-panel__body .letter-nav {
	margin-bottom: 0;
}

.letter-nav__list {
	grid-template-columns: repeat(auto-fill, minmax(var(--home-cell-min), 1fr));
	gap: var(--space-1);
}

/* 29 hücre 15 sütuna oturunca iki eşit satır çıkar (15 + 14) ve hiçbir satır
   yarım kalmaz. Ölçüm: 768px'te hücre 46px, 1440px'te 71px — ikisi de
   --tap-min'in (44px) üstünde. */
@media (min-width: 48em) {
	.home .letter-nav__list {
		grid-template-columns: repeat(15, minmax(0, 1fr));
	}
}

.letter-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: var(--home-cell-h);
	padding-block: var(--space-1);
	line-height: var(--leading-tight);
	border-color: var(--color-border-strong);
	border-radius: var(--radius);
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.letter-nav__glyph {
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

.letter-nav__count {
	font-size: var(--text-xs);
	font-weight: var(--weight-normal);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.letter-nav__link.is-empty {
	border-color: var(--color-border);
}

/* Kelimesi olmayan harf: metin --color-text-muted, --color-text-faint DEĞİL.
   Ölçüm: #8A8A8A koyu temanın gri hücre zemininde (#22262D) 4,40:1 — 4,5'in
   ALTINDA. #A9A9A9 aynı zeminde 6,46:1. "Boş" bilgisini taşıyan şey renk
   değil zaten: sayının yerinde tire var ve hücre bağlantı değil. */
.letter-nav__link.is-empty .letter-nav__count {
	color: var(--color-text-muted);
}

/* --- Ana sayfaya özel renk ayarı ------------------------------------------
   Ana sayfada üç artikel rengi + eylem kırmızısı çalışıyor; alfabeye dördüncü
   ve beşinci renk (kırmızı harfler, amber hover) eklenirse palet dağılır.
   Harfler mürekkep, hover nötr dolgu, aktif hâl koyu dolgu + kağıt yazı. */
.home .letter-nav__link {
	color: var(--color-text);
}

.home .letter-nav__link:hover {
	background: var(--color-surface-muted);
	border-color: var(--color-text-faint);
	color: var(--color-text);
}

.home .letter-nav__link.is-empty {
	color: var(--color-text-muted);
	background: var(--color-surface-muted);
	border-color: var(--color-border);
}

.home .letter-nav__link.is-active {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-surface);
}

.home .letter-nav__link.is-active .letter-nav__count,
.home .letter-nav__link:hover .letter-nav__count {
	color: inherit;
}

/* ═══════════════════════════ 5. Üç sütunlu gövde ══════════════════════════ */
/* Sütunlar BAĞIMSIZ YIĞINDIR: her biri kendi içinde akar, `grid-template-areas`
   ve `order` kullanılmaz. Sonuç: görsel sıra = DOM sırası her genişlikte, yani
   klavye odağı sütunlar arasında zıplamaz (WCAG 2.4.3) ve mobilde tek sütuna
   inerken sıra kendiliğinden doğru olur:
   A–Z → artikel → tür → günün kelimesi → en çok bakılan → yeni → soru-cevap. */
/* İÇERİK GENİŞLİĞİ — DEĞİŞTİRİLMEZ.
   Ana sayfa ve arşivler `.wrap`in tam genişliğini (1140px → içerik 1092px)
   kullanır. Kelime sayfası dar sütun + yan reklam raylarıdır; bu FARK
   BİLİNÇLİDİR ve içerik türünden gelir: biri çok sütunlu pano, diğeri tek
   sütunlu okuma sayfası. Genişliği eşitleme denendi ve geri alındı
   (2026-09-13). Sayfalar arası tutarlılık RENK ve YÜZEY dilinden gelir,
   ölçüden değil. */

.home-cols {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
}

.home-col {
	display: grid;
	gap: var(--space-4);
	align-content: start;
	min-width: 0;
}

/* 48em: iki sütun. Dar ray solda tam boy; orta ve sağ blok alt alta sağda. */
@media (min-width: 48em) {
	.home-cols {
		grid-template-columns: 13rem minmax(0, 1fr);
	}

	.home-col--rail {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.home-col--main {
		grid-column: 2;
		grid-row: 1;
	}

	.home-col--aside {
		grid-column: 2;
		grid-row: 2;
	}
}

/* 64em: üç sütun. Ölçüm (1140px sarmalayıcı, 24px gutter, 16px boşluk):
   ray 216px · orta 572px · sağ 256px. */
@media (min-width: 64em) {
	.home-cols {
		grid-template-columns: 13.5rem minmax(0, 1fr) 16rem;
	}

	.home-col--rail {
		grid-column: 1;
		grid-row: 1;
	}

	.home-col--main {
		grid-column: 2;
		grid-row: 1;
	}

	.home-col--aside {
		grid-column: 3;
		grid-row: 1;
	}
}

/* ═════════════════════ 6. Ölçü panelleri (artikel + tür) ══════════════════ */

/* Dolgu bir gradient'tir: ek DOM düğümü yok, ek boyama katmanı yok.
   Sert durak (`renk X, transparent X`) → çubuk kenarı net. */
.home-board__list,
.home-meter {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-board__item {
	--home-fill: var(--color-surface-muted);

	min-width: 0;
}

.home-board__item + .home-board__item,
.home-meter__item + .home-meter__item {
	border-top: var(--border-width) solid var(--color-border);
}

.home-board__item[data-home-artikel="der"] {
	--home-fill: var(--color-artikel-der-soft);
}

.home-board__item[data-home-artikel="die"] {
	--home-fill: var(--color-artikel-die-soft);
}

.home-board__item[data-home-artikel="das"] {
	--home-fill: var(--color-artikel-das-soft);
}

/* ARTİKEL ALMAYAN SÖZCÜKLER genellikle EN UZUN çubuğu taşır — sözlüğün en
   kalabalık grubu. Rengi solgun bir "veri yok" grisi değil, nötr ve tam
   ağırlıklı bir dolgu. */
.home-board__item--none {
	--home-fill: var(--home-none-soft);
}

.home-board__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--home-row-h);
	padding-inline: var(--home-pad);
	color: var(--color-text);
	text-decoration: none;
	background-image: linear-gradient(
		to right,
		var(--home-fill) var(--home-bar),
		transparent var(--home-bar)
	);
}

/* Bağlantı olmayan satır (kovası boş artikel ya da artikel almayanlar satırı)
   tıklanabilir görünmez. */
.home-board__row--static {
	cursor: default;
}

/* ODAK HALKASI İÇERİ ALINIR: panelin `overflow` kırpması olmasa bile dış
   halka komşu satırın dolgusuyla çakışıyordu. */
.home-board__row:focus-visible {
	outline-offset: -3px;
}

.home-board__artikel {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--leading-tight);
}

/* Türkçe etiket: SANS yazı, mürekkep rengi. Artikel Almanca ve seriftir;
   ikisi asla karışmaz. */
.home-board__kinds {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text);
}

.home-board__count {
	flex: 0 0 auto;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
}

/* Yüzde: sayının yanında ikinci bir ölçü. Sağa hizalı sabit genişlik, böylece
   dört satırın yüzdeleri alt alta okunur. */
.home-board__pct {
	flex: 0 0 2.75em;
	text-align: right;
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

/* KIRMIZI YASAĞI: artikel satırında hover kırmızıya dönmez. */
.home-board__row:hover,
.home-board__row:focus-visible {
	color: var(--color-text);
}

.home-board__row:hover .home-board__artikel {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

/* --- Tür dağılımı ölçeği --------------------------------------------------
   Satırlar BAĞLANTI DEĞİL (wortart bir taksonomi değil), bu yüzden 44px
   dokunma hedefi gerekmez ve satır 2rem'e sıkışabilir: on bir satır 352px. */
/* Dolgu --color-border'dır, --color-surface-muted DEĞİL: #f8f9fa beyaz zeminde
   1,04 kontrast oranıyla neredeyse görünmüyordu (ölçüldü, önizlemede
   bakıldı) — bir ölçü çubuğu görünmüyorsa ölçü değildir. #ebebeb 1,19 ile
   artikel soluk tonlarıyla (1,14–1,16) aynı ağırlıkta. */
.home-meter__item {
	--home-fill: var(--color-border);

	min-width: 0;
	background-image: linear-gradient(
		to right,
		var(--home-fill) var(--home-bar),
		transparent var(--home-bar)
	);
}

.home-meter__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: var(--home-meter-h);
	padding-inline: var(--home-pad);
}

.home-meter__label {
	min-width: 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.home-meter__count {
	flex: 0 0 auto;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
}

/* ═══════════════════ 7. Katlanan panel (mobilde tür dağılımı) ═════════════ */
/* <details> KULLANILMADI: `open` bir HTML NİTELİĞİDİR ve CSS onu kırılım
   başına değiştiremez — "mobilde kapalı / masaüstünde açık" davranışı
   <details> ile JS'siz kurulamaz. Aynı gerekçeyle footer.php da gizli onay
   kutusu + <label> kullanıyor; burada o desen tekrarlanır. */
.home-fold__toggle {
	/* .screen-reader-text ile gizli ama KLAVYEYE AÇIK. */
	position: absolute;
}

.home-fold__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	cursor: pointer;
	color: inherit;
}

/* Ok yalnızca dekoratif; durumu onay kutusu taşır. */
.home-fold__chev {
	width: 0.875rem;
	height: 0.875rem;
	flex: 0 0 auto;
	transition: transform var(--duration) var(--ease);
}

.home-panel--fold .home-fold__body {
	display: none;
}

.home-fold__toggle:checked ~ .home-fold__body {
	display: block;
}

.home-fold__toggle:checked ~ .home-panel__head .home-fold__chev {
	transform: rotate(180deg);
}

/* Onay kutusu görsel olarak gizli → odak halkası etiketin üzerinde gösterilir,
   yoksa odak hiç görünmezdi. */
.home-fold__toggle:focus-visible ~ .home-panel__head .home-fold__label {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-sm);
}

/* ≥48em: katlama tamamen yok. Denetim kutusu ve ok gizlenir, gövde daima
   açıktır — masaüstünde bu bir istatistik paneli, bir açılır menü değil. */
@media (min-width: 48em) {
	.home-panel--fold .home-fold__body {
		display: block;
	}

	.home-fold__toggle,
	.home-fold__chev {
		display: none;
	}

	.home-fold__label {
		min-height: 0;
		cursor: default;
	}
}

/* ═══════════════════════ 8. Bugünün kelimesi paneli ═══════════════════════ */
/* Zemin kelimenin CİNSİNE göre boyanır → ana sayfa her gün başka renkte açılır.
   v3'teki tam genişlik bandın aksine bu bir panel: orta sütunda ~300px. */
.home-panel--today .home-panel__body {
	--home-today-bg: var(--home-none-soft);

	background: var(--home-today-bg);
	border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.home-panel--today[data-home-artikel="der"] .home-panel__body {
	--home-today-bg: var(--color-artikel-der-soft);
}

.home-panel--today[data-home-artikel="die"] .home-panel__body {
	--home-today-bg: var(--color-artikel-die-soft);
}

.home-panel--today[data-home-artikel="das"] .home-panel__body {
	--home-today-bg: var(--color-artikel-das-soft);
}

/* Tarih pili: --c-mark YALNIZCA ZEMİN, üstündeki yazı --c-mark-ink (8,26:1).
   Markanın ikinci rengi sayfaya bir kez, ölçülmüş kontrastla girer. */
.home-today__date {
	margin: 0;
	padding: 2px var(--space-2);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	white-space: nowrap;
}

.home-today__grid {
	gap: var(--space-3);
}

/* Genişlik varsa kelime solda, örnek sağda: panel yayılmak yerine dolgunlaşır. */
@media (min-width: 64em) {
	.home-today__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--space-4);
		align-items: start;
	}

	/* Örnek cümlesi OLMAYAN kelimede (aktarımı tamamlanmamış kayıtlar) sağ
	   sütun boş kalırdı ve sözcük yarım genişlikte tirelenirdi
	   ("Ausfallsicher-heit"). Tek çocuk kalınca künye iki sütunu da alır. */
	.home-today__entry:only-child {
		grid-column: 1 / -1;
	}
}

.home-today__entry {
	display: grid;
	gap: var(--space-2);
	align-content: start;
	min-width: 0;
}

.home-today__word {
	margin: 0;
	min-width: 0;
}

/* Dokunma hedefi: artikel almayan sözcükte bağlantı TEK SATIRDIR ("besser")
   ve 360px'te 28px yüksekliğe düşüyordu (ölçüldü). --tap-min tabanı, iki
   satırlı hâlde (artikelli isim) zaten aşıldığı için hiçbir şeyi büyütmez. */
.home-today__link {
	display: grid;
	align-content: center;
	gap: 0;
	min-height: var(--tap-min);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* ARTİKEL İSMİN ÜSTÜNDE, EŞİT BOYUTTA. Yazı Literata'dır (fonts.css
   `[lang="de"]`), değişken ağırlık aralığı 400–600 olduğu için 600 istenir;
   components.css'in [data-artikel] kuralı 700 isterdi ve tarayıcı sentetik
   kalınlık üretirdi.

   ÖLÇEK v3'ten BİR KADEME KÜÇÜK (3rem → 2rem/2.25rem): kelime artık tek
   başına bir bant değil, üç sütunlu bir sayfanın bir paneli. */
.home-today__artikel,
.home-today__noun {
	display: block;
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: var(--tracking-display);
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
}

@media (min-width: 34em) {
	.home-today__artikel,
	.home-today__noun {
		font-size: 2rem;
	}
}

@media (min-width: 64em) {
	.home-today__artikel,
	.home-today__noun {
		font-size: 2.25rem;
	}
}

/* Bağlantı olduğunu söyleyen tek işaret: artikel renginde alt çizgi. */
.home-today__noun {
	color: var(--color-heading);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.1em;
	text-decoration-color: var(--color-text-faint);
}

.home-panel--today[data-home-artikel="der"] .home-today__noun {
	text-decoration-color: var(--color-artikel-der);
}

.home-panel--today[data-home-artikel="die"] .home-today__noun {
	text-decoration-color: var(--color-artikel-die);
}

.home-panel--today[data-home-artikel="das"] .home-today__noun {
	text-decoration-color: var(--color-artikel-das);
}

/* KIRMIZI YASAĞI. base.css `a:hover` markayı kırmızıya çeviriyor; bu bir
   artikel bloğu (protanopide kırmızı↔das ΔE 12,6; tritanopide kırmızı↔die 9,5).
   Hover yalnızca alt çizgiyi koyulaştırır. */
.home-today__link:hover,
.home-today__link:focus-visible {
	color: inherit;
}

.home-today__link:hover .home-today__noun {
	text-decoration-color: currentcolor;
}

/* Artikel yuvasının nötr hâli: sözcüğün türü. Türkçe ve SANS yazıda. */
.home-today__kind {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.home-today__tr {
	margin: 0;
	max-width: 34ch;
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--color-text);
	overflow-wrap: anywhere;
}

/* Okunuş + çoğul: iki satırlık künye. Anahtar küçük ve gri, değer mürekkep —
   sözlük künyesi dili. */
.home-today__facts {
	display: grid;
	gap: 2px;
	margin: 0;
}

.home-fact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
}

.home-fact__key {
	flex: 0 0 4.5rem;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.home-fact__val {
	flex: 1 1 8ch;
	margin: 0;
	min-width: 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Örnek cümle bloğu: renkli zeminin üstünde kağıt bir kutu — panelin içinde
   ikinci bir katman, referanstaki "alıntı bloğu" dili. */
.home-today__example {
	display: grid;
	gap: var(--space-1);
	align-content: start;
	min-width: 0;
	max-width: 46ch;
	/* 2026-09-13: markanın İKİNCİ rengi (sarı) burada çalışıyor.
	   Sarı metin olarak kullanılamaz (#FFC107 beyazda 1,63:1) ama ZEMİN ve
	   ŞERİT olarak markanın imzasını taşır. Örnek cümle "vurgulanmış" bir
	   alıntı gibi okunur — bir dil öğrenme sayfasında doğru çağrışım.
	   #FFF8E1 üstünde metin: #333333 = 11,4:1, #555555 = 6,7:1. */
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-note-bg);
	border: var(--border-width) solid var(--color-note-line);
	border-inline-start: 4px solid var(--color-accent);
}

.home-today__exlabel {
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.home-today__de {
	margin: 0;
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.home-today__detr {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
}

.home-today__more {
	margin: var(--space-1) 0 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.home-today__more a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.home-today__more a:hover {
	color: var(--color-text);
	text-decoration-thickness: 2px;
}

/* ═══════════════════════════ 9. Kelime listeleri ══════════════════════════ */

/* Sütun başlığı satırı — referanstaki veri tablosu dili. Sol etiket sözcüğün
   başladığı yerde başlar (sıra numarası genişliği kadar içeri alınmış), sağ
   etiket sayının hizasında biter. */
.home-list__cols {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-2) var(--home-pad);
	padding-inline-start: calc(var(--home-pad) + var(--home-rank-w) + var(--space-2));
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.home-list {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.home-list__item {
	min-width: 0;
}

.home-list__item + .home-list__item {
	border-top: var(--border-width) solid var(--color-border);
}

/* ZEBRA yalnızca geniş listede: on satırlık bir sıralamada göz satırı
   kaybetmesin diye. Ölçüm: #333 üstünde #f8f9fa = 11,99:1. */
.home-list--wide .home-list__item:nth-child(even) {
	background: var(--home-zebra);
}

/* Satırın birimi ARTİKELLİ SÖZCÜKTÜR ("die Ausstattung"), Türkçesi yanında.
   İkisi yan yana sığarsa yan yana, sığmazsa alt alta — ara kırılma noktası
   gerekmez. */
.home-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-2);
	row-gap: 0.1rem;
	min-height: var(--home-row-h);
	padding: var(--space-2) var(--home-pad);
	color: var(--color-text);
	text-decoration: none;
}

.home-list__row:focus-visible {
	outline-offset: -3px;
}

/* Sıra numarası: gözü satır başına sabitler. `aria-hidden` — <ol> sırayı
   zaten duyuruyor. */
.home-list__rank {
	flex: 0 0 var(--home-rank-w);
	text-align: right;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

.home-list__de {
	flex: 0 1 auto;
	min-width: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--leading-tight);
	overflow-wrap: anywhere;
}

/* Renk components.css'teki [data-artikel] kuralından gelir (beyazda
   6,55–7,19:1). Ağırlık 600'e çekilir: Literata'nın değişken aralığı 400–600. */
.home-list__artikel {
	font-weight: 600;
}

/* Artikel almayan sözcükte yuva boş kalmaz: türü yazılır. */
.home-list__kind {
	flex: 0 0 auto;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.home-list__tr {
	flex: 1 1 10ch;
	min-width: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}

.home-list__num {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

/* Dar liste (sağ ray): Türkçesi daima kendi satırında. */
.home-list--narrow .home-list__tr {
	flex: 1 1 100%;
}

/* KIRMIZI YASAĞI (bkz. §0/3). */
.home-list__row:hover,
.home-list__row:focus-visible {
	color: var(--color-text);
	background: var(--color-border);
}

.home-list__row:hover .home-list__noun {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Boş durum ölü alan bırakmaz: ne olduğunu söyler, varsa bir kapı gösterir. */
.home-list__empty {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.home-list__empty a {
	color: var(--color-text);
	text-decoration: underline;
}

.home-list__empty a:hover {
	color: var(--color-brand);
}

/* ═══════════════════ 10. Soru-cevap · boş sözlük · statik metin ═══════════ */

/* Burada kırmızı SERBESTTİR — bu panelin yakınında hiçbir artikel rengi yok. */
.home-ask__text {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.home-ask__action {
	margin: 0;
}

.home-panel--ask .btn {
	width: 100%;
}

/* Sözlük tamamen boşken (yeni kurulum / aktarım başlamamış). */
.home-blank {
	margin: 0;
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-muted);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.home-panel--wide .prose {
	max-width: var(--prose-max);
}

/* ══════════════════ 11. Diğer kavşak sayfaları (arama, arşiv, 404) ════════ */
/* Bu dosya ana sayfadan başka sayfalarda da yükleniyor (inc/assets.php →
   atc_is_index_view). Aşağıdaki sınıflar o şablonlarda kullanılıyor; ana
   sayfayla ilgileri yok, o yüzden ayrı bölümde ve dokunulmadan bırakıldı. */

.home-inline-search {
	width: 100%;
	max-width: 34rem;
}

.home-result-grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-result {
	display: grid;
	align-content: start;
	gap: var(--space-1);
	padding: var(--space-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	min-width: 0;
}

.home-result__kind {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-faint);
}

.home-result__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.home-result__title a {
	text-decoration: none;
}

.home-result__title a:hover {
	text-decoration: underline;
}

.home-result__artikel {
	font-weight: var(--weight-normal);
	color: var(--color-text-muted);
}

.home-result__tr {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}

.home-result__source {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}

.home-entry-list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-entry {
	padding-bottom: var(--space-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

.home-entry:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.home-entry__title {
	font-size: var(--text-base);
	margin-bottom: var(--space-1);
}

.home-entry__title a {
	text-decoration: none;
}

.home-entry__title a:hover {
	text-decoration: underline;
}

.home-entry__excerpt {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	max-width: var(--prose-max);
	margin: 0;
}

.home-empty {
	display: grid;
	gap: var(--space-4);
}

/* Bayrak, kelime listesi satırlarına ve arama sonuçlarına eklendi (canlı sitede
   her satırda vardı). Ana sayfada bayrak YOKTUR — yazı tipi (Literata/Nunito)
   zaten dili söylüyor (bkz. fonts.css). */
.word-row__de > .flag,
.word-row__tr > .flag {
	margin-inline-end: var(--space-2);
}

/* ══════════════════════════════ 12. Koyu tema ═════════════════════════════ */
/* BU BÖLÜM BOŞ VE BOŞ KALMALI.
   Ana sayfanın koyu tema karşılıkları TOKEN düzeyinde çözülür (dark.css):
   üç artikel soluk zemini, masthead paleti ve panel çizgileri orada yeniden
   tanımlanır. Bu dosyada koyu temaya özel TEK BİR KURAL bile yoktur —
   bir bileşen kuralını iki kez yazmak, birinin unutulması demektir. */