/* =============================================================================
   pages-word.css — kelime detayı (/sozluk/…), artikel görünümü
   (/artikel/{der|die|das}/…) ve artikel arşivi (/artikel/der/) DÜZEN katmanı.
   -----------------------------------------------------------------------------
   KAPSAM SÖZLEŞMESİ: paylaşılan bileşenler components.css'te yaşar ve BURADA
   YENİDEN TANIMLANMAZ — .card / .card__head / .card__title / .card__body,
   .lead-text, .btn*, .pill*, .flag*, .search-box + .search-form, .note--warn,
   .sentence-item*, .artikel-badge*, .artikel-legend*, .data-table (base.css).
   Bu dosya yalnızca:
     a) bu üç görünümün sayfa düzenini,
     b) `word-` önekli kendi sınıflarını,
     c) paylaşılan bileşenlerin BU sayfalardaki yerleşim düzeltmelerini
   içerir.

   SABİT DEĞER YOK: her renk/ölçü tokens.css'ten. Tek istisna aşağıda
   işaretlenen `--word-max` yerel değişkeni.

   MOBİL ÖNCELİKLİ: taban kurallar dar ekran içindir. 400px'te yatay sayfa
   kayması YOK (deklination yeniden akar, çekim ızgarası tek sütuna iner).
   ========================================================================== */

/* ============================ 1 — SAYFA DÜZENİ ============================ */

/* Gri sayfa zemini base.css'te body'ye --color-ground ile zaten veriliyor;
   burada tekrar edilmez. Burada yalnızca kart sütununun ölçüsü var.
   --content-col (53,5rem = 855px, canlı ölçüm) pages-home.css'teki .home-col
   ile AYNI değerdir: ana sayfa, arşiv ve kelime sayfası aynı sütuna oturur. */
/* ═══════════ KELİME SAYFASI DÜZENİ: içerik + yan reklam rayları ═══════════
   2026-09-13 (son): içerik DAR sütuna geri döndü (--content-col, 856px) ve
   masaüstünde iki yanına reklam rayı eklendi. Ana sayfa/arşivler geniş
   düzende kalır; burada dar sütun bilinçli, çünkü yanlarda ray var.

   Raylar YALNIZCA ilgili bileşen alanı doluysa DOM'a girer (single-word.php),
   yani boş reklam boşluğu oluşmaz. Sınıflar `has-ad-left` / `has-ad-right`
   hangi rayın var olduğunu söyler; ızgara ona göre kurulur.

   EŞİK 80em (1280px): altında raylar gizlenir ve içerik tek sütun kalır.
   856 + 2×160 + 2×24 boşluk = 1224px; 1280px'in altında ray içeriği
   sıkıştırırdı. Ray genişliği 160px — "wide skyscraper" standardı. */
.word-layout {
	display: grid;
	gap: var(--space-5);
	justify-content: center;
	align-items: start;
}

.word-page {
	width: 100%;
	max-width: var(--content-col);
	margin-inline: auto;
	min-width: 0;
}

.word-ad {
	display: none;
}

/* KAPSAYICI RAY KADAR GENİŞLER.
   `.wrap` 1140px'tir ve iç boşluk sonrası 1092px kalır; 160 + 856 + 160 artı
   iki boşluk 1224px eder, yani sığmaz — ölçümde içerik 856'dan 724'e düşüyordu.
   Bu yüzden YALNIZCA reklam raylı kelime sayfasında <main> genişletilir.
   Site başlığı ve alt bilgi 1140px'te kalır (ayrı `.wrap`ler).
   `:has()` desteklemeyen tarayıcıda kural hiç uygulanmaz; düzen bozulmaz,
   yalnızca içerik dar kalır — kabul edilebilir gerileme. */
@media (min-width: 84em) {
	.site-main:has(.word-layout.has-ad-left.has-ad-right) {
		max-width: 79.5rem; /* 1272px = 160+24+856+24+160 + 2×24 iç boşluk */
	}

	.site-main:has(.word-layout.has-ad-left:not(.has-ad-right)),
	.site-main:has(.word-layout.has-ad-right:not(.has-ad-left)) {
		max-width: 68rem; /* 1088px = 160+24+856 + 2×24 */
	}
}

/* Eşik 84em (1344px) — kapsayıcının genişlediği eşikle AYNI. Daha düşük bir
   eşikte raylar açılırsa (ölçüldü: 80em'de) kapsayıcı henüz genişlemediği için
   içerik 856'dan 724'e sıkışıyordu. */
@media (min-width: 84em) {
	.word-layout.has-ad-left {
		grid-template-columns: 10rem minmax(0, var(--content-col));
	}

	.word-layout.has-ad-right {
		grid-template-columns: minmax(0, var(--content-col)) 10rem;
	}

	.word-layout.has-ad-left.has-ad-right {
		grid-template-columns: 10rem minmax(0, var(--content-col)) 10rem;
	}

	.word-ad {
		display: block;
		position: sticky;
		top: var(--space-4);
		min-width: 0;
	}

	/* Reklam birimi taşarsa sütunu değil kendini kırpar. */
	.word-ad__unit {
		max-width: 100%;
		overflow: hidden;
	}

	.word-ad__unit + .word-ad__unit {
		margin-top: var(--space-4);
	}
}

/* Kart ritmi tek yerden: ızgara boşluğu (kahraman kart + .word-body).
   components.css'teki `.card + .card { margin-top }` ızgarada boşluğa
   EKLENİR, o yüzden aşağıda sıfırlanıyor. */
.word {
	display: grid;
	gap: var(--space-5);
}

.word-page .card + .card {
	margin-top: 0;
}

/* =========================== 2 — KAHRAMAN KART ============================ */

/* İki sütunlu 🇩🇪/🇹🇷 karşılaştırma — sitenin en tanınır öğesi.
   TABANDA TEK SÜTUN: 400px'te uzun Almanca bileşik kelimeler (Fernseh-
   programm, Ausfallsicherheit) iki sütuna sığmıyor ve satırı taşırıyordu.
   30rem'den itibaren iki eşit sütun, her biri kendi yarısında ortalı
   (canlıdaki yerleşimin ölçülen karşılığı). */
.word-pair {
	display: grid;
	gap: var(--space-2);
}

.word-pair__side {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.word-pair__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.word-pair__artikel {
	text-decoration: none;
}

.word-pair__artikel:hover,
.word-pair__artikel:focus-visible {
	text-decoration: underline;
}

.word-pair__term {
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	line-height: var(--leading-tight);
}

/* Türkçe karşılık marka renginde (canlıdaki kırmızı Türkçe sütunu).
   #e30a16 beyaz üstünde 4,86:1 → normal metinde AA. */
.word-pair__side--tr .word-pair__term {
	color: var(--color-brand);
}

.word-pair__note {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
	white-space: nowrap;
}

/* Çoğul satırı bir kademe küçük: birincil bilgi tekil biçimdir. */
.word-pair--plural .word-pair__term {
	font-size: var(--text-base);
}

@media (min-width: 30rem) {
	.word-pair {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
		align-items: center;
	}

	.word-pair__side {
		justify-content: center;
	}
}

/* --- Meta satırı: Nomen | Maskulin | film --------------------------------- */
.word-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-1) var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.word-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* İkon fontu yok — satır içi SVG, currentColor. */
.word-meta__icon {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	color: var(--color-text-faint);
}

.word-meta__sep {
	color: var(--color-border-strong);
	user-select: none;
}

/* --- Açıklama metinleri --------------------------------------------------- */
.word-hero__answer,
.word-hero__lead {
	max-width: var(--prose-max);
}

.word-hero__answer {
	color: var(--color-text-muted);
}

.word-hero__answer strong,
.word-hero__answer a {
	color: var(--color-text);
	font-weight: var(--weight-bold);
}

/* Ortalanmış eylem satırı (Daha fazla cümle, tam liste…). */
.word-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

/* ====================== 3 — ARTİKEL GÖRÜNÜMÜ ÖĞELERİ ====================== */

/* Lejant kutucukları components.css'te; buradaki tek ek çoğul (sarı) kutucuk.
   --color-accent YALNIZCA zemin olarak kullanılır (beyaz üstünde 1,63:1). */
.word-legend__plural .artikel-legend__swatch {
	background: var(--color-accent);
}

/* --- Kahraman kutu: "der Film" -------------------------------------------
   Kutunun kendisi .artikel-badge (components.css): dolgu, yarıçap ve
   ERİŞİLEBİLİR artikel renkleri oradan gelir. Burada yalnızca yerleşim ve
   artikelin altındaki kesikli çizgi var. */
.word-artikel-hero {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	text-align: center;
}

.word-artikel-hero .artikel-badge {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Kesikli alt çizgi ARTİKELİN altındadır (canlıdaki öğrenme ipucu).
   Renk tek taşıyıcı değil: artikel ayrıca yazıyla da orada, biçim de
   (kesikli çizgi) ikinci bir kanal olarak bilgi taşır. */
.word-badge__art {
	border-bottom: var(--border-width-thick) dashed currentColor;
	padding-bottom: 0.08em;
}

.word-artikel-hero__tr {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* ========================== 4 — DEKLİNATİON TABLOSU ======================= */

/* Zebra şerit, gri başlık satırı ve kalın ilk sütun base.css'teki .data-table
   dilinden gelir; burada yalnızca bu tabloya özgü davranış var. */
.word-dekl td,
.word-dekl th {
	overflow-wrap: anywhere;
}

/* Canlıdaki "table-bordered" görünümü: hücreler arasında dikey çizgi de var.
   Yalnızca gerçek tablo düzeninde (34rem üstü) anlamlı. */
@media (min-width: 34rem) {
	.word-dekl th + th,
	.word-dekl td + td,
	.word-dekl tbody td:first-of-type {
		border-inline-start: var(--border-width) solid var(--color-border);
	}
}

/*
 * MOBİL KARARI — YENİDEN AKAN DÜZEN, yatay kaydırma DEĞİL.
 *
 * Ölçüm: 3 sütun × en uzun hücre 25 karakter ≈ 580px ister. 360px'lik
 * telefonda kart iç genişliği ~296px kalıyor; içeriğin %38'i kaydırmanın
 * arkasında kalırdı ve gizlenen şey sayfanın ASIL cevabı olurdu (Genitiv
 * "des Films" gibi). Tabloda toplam 8 veri noktası var; yığılmış düzende
 * dört kısa blok eder, hiçbir şey gizlenmez.
 *
 * Semantik kemer: display:block tablo rollerini düşürür, bu yüzden
 * deklination-table.php role="table/rowgroup/row/columnheader/rowheader/cell"
 * niteliklerini AÇIKÇA basar. Roller masaüstünde de doğrudur.
 */
@media (max-width: 33.99rem) {
	.word-dekl thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.word-dekl,
	.word-dekl tbody,
	.word-dekl tr,
	.word-dekl th,
	.word-dekl td {
		display: block;
		width: 100%;
	}

	.word-dekl tr {
		padding: var(--space-2) var(--space-3);
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.word-dekl tbody tr:last-child {
		border-bottom: 0;
	}

	.word-dekl tbody th {
		padding: 0 0 var(--space-1);
		border: 0;
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-muted);
		white-space: normal;
	}

	.word-dekl td {
		display: grid;
		grid-template-columns: 4.5rem 1fr;
		gap: var(--space-2);
		padding: var(--space-1) 0;
		border: 0;
		white-space: normal;
	}

	/* Sütun başlığı, gizlenen <thead>'in yerine hücrenin önüne taşınır. */
	.word-dekl td::before {
		content: attr(data-label);
		color: var(--color-text-muted);
		font-weight: var(--weight-normal);
	}
}

/* ========================== 5 — FİİL ÇEKİMİ IZGARASI ====================== */

/* Grup başlığı: ortalanmış, altında sarı çizgi (canlıdaki h3.fiil-baslik). */
.word-conj__grouphead {
	position: relative;
	padding-bottom: var(--space-2);
	font-size: var(--text-lg);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-muted);
}

.word-conj__grouphead::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 6rem;
	max-width: 60%;
	height: var(--border-width-thick);
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}

/* TABANDA TEK SÜTUN: en uzun çekim satırı ("ich würde heruntergefahren
   haben" ≈ 32 karakter) 360px'lik ekranda tek sütunda taşmadan sığar. */
.word-conj__grid {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 30rem) {
	.word-conj__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.word-conj__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.word-conj__block {
	min-width: 0;
}

/* Zaman başlığı: sarı çubuk + kırmızı küçük büyük-harf (canlıdaki
   h4.modern-title). --color-brand 14px metinde beyaz üstünde 4,86:1 → AA. */
.word-conj__title {
	margin-bottom: var(--space-2);
	padding-inline-start: var(--space-2);
	border-inline-start: var(--rule-width) solid var(--color-accent);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-brand);
}

.word-conj__lines {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}

.word-conj__lines li + li {
	margin-top: var(--space-1);
}

/* Şahıs zamiri kalın ve tam kontrastta — göz satırı buradan yakalıyor. */
.word-conj__pron {
	font-weight: var(--weight-bold);
	color: var(--color-text);
}

/* ========================= 6 — BENZER KELİMELER =========================== */

.word-related {
	text-align: center;
}

.word-related__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-4);
}

.word-related__list {
	justify-content: center;
}

/* ============================ 7 — YAZDIRMA ================================
   Kullanıcı çekim tablolarını yazdırıyor (print.css'in var olma sebebi).
   Burada yalnızca bu sayfalara özgü düzeltmeler. */
@media print {
	.word-page {
		max-width: none;
	}

	.word-hero__search,
	.word-actions {
		display: none;
	}

	.word-conj__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}