/* İz ayracı için chevron — mask olarak kullanılır, renk CSS'ten gelir. */
:root {
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 1 5.5 4 2.5 7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bileşen katmanı — KRİTİK yol. Sınıf SÖZLEŞMESİ burada tanımlanır;
   pages-home.css / pages-word.css bu isimleri kullanır, yeniden tanımlamaz.
   Sabit hex/px YOK. Gerekçeler: scratchpad/revize-kabuk.md */

/* 1. Sayfa kabuğu / düzen */
.layout { display: grid; gap: var(--space-5) }
@media (min-width: 64rem) {
	.layout--rail { grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--rail-gap); align-items: start }
	.layout__rail { position: sticky; top: var(--space-4) }
}
.layout__main { min-width: 0 }

/* 2. Kart — gri zemin (base.css body) üstünde beyaz yüzey + yumuşak gölge */
.card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--card-padding);
}
.card + .card { margin-top: var(--space-5) }
.card__head {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
}
.card__body { display: grid; gap: var(--space-4) }
.card__body > * { margin: 0 }

/* MARKA İMZASI: kırmızı dikey çizgi + BÜYÜK HARF başlık (her genişlikte). */
.card__title,
.rule-title,
.section-title,
.footer-col__title {
	font-size: var(--text-eyebrow);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-heading);
	border-inline-start: var(--rule-width) solid var(--rule-color);
	padding-inline-start: var(--space-3);
	text-wrap: balance;
	margin: 0;
}
.card__title a, .rule-title a, .section-title a { color: inherit; text-decoration: none }
.section-title { margin-bottom: var(--space-3) }
/* Alt bölüm sütun başlığı: sarı çizgi + kırmızı yazı (h4.modern-title) */
.footer-col__title { color: var(--color-brand); border-inline-start-color: var(--color-accent) }
.card__title + * { margin-top: var(--space-3) }

/* 3. Metin */
.lead-text, .lead {
	font-size: var(--text-md); line-height: var(--leading-relaxed);
	color: var(--color-text-muted); max-width: var(--prose-max); margin: 0;
}
.lead-text strong, .lead strong { color: var(--color-text); font-weight: var(--weight-bold) }
.muted { color: var(--color-text-muted); font-size: var(--text-sm) }

/* 4. Düğmeler */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--space-2); min-height: var(--tap-min);
	padding: var(--space-2) var(--space-5);
	font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold);
	line-height: var(--leading-tight); text-align: center; text-decoration: none;
	border: var(--border-width) solid transparent; border-radius: var(--radius-pill);
	cursor: pointer; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn--primary { background: var(--color-brand); color: var(--color-brand-ink); border-color: var(--color-brand) }
.btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-brand-ink) }
/* Sarı düğme: metin KOYU (9,46:1) + koyu 1px kenarlık (canlı) */
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent-ink) }
.btn--accent:hover { background: var(--color-accent-hover); color: var(--color-accent-ink) }
.btn--ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong) }
.btn--ghost:hover { border-color: var(--color-brand); color: var(--color-brand) }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center }

/* 5. Pil etiketler */
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.pill {
	display: inline-flex; align-items: center; gap: var(--space-2);
	min-height: var(--tap-min); padding-inline: var(--space-4);
	background: var(--color-surface); color: var(--color-text);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-pill); text-decoration: none;
	font-size: var(--text-sm); line-height: var(--leading-tight);
}
.pill:hover { border-color: var(--color-brand); color: var(--color-brand) }
.pill.is-active, .pill[aria-current="page"] {
	background: var(--color-brand); border-color: var(--color-brand);
	color: var(--color-brand-ink); font-weight: var(--weight-bold);
}

/* 6. Bayraklar — daire CSS clip-path ile: SVG'de yinelenen id üretilmez */
.flag, .flag--de, .flag--tr {
	width: var(--size-flag); height: var(--size-flag); flex: 0 0 auto;
	clip-path: circle(50%); display: inline-block; vertical-align: -0.2em;
}

/* 7. Bilgi kutusu */
.note {
	padding: var(--space-3) var(--space-4); border-radius: var(--radius);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-muted); color: var(--color-text-muted);
	font-size: var(--text-sm); line-height: var(--leading-normal);
}
.note--warn { background: var(--color-note-bg); border-color: var(--color-note-line); color: var(--color-note-ink) }
.note p { margin: 0 }
.note p + p { margin-top: var(--space-2) }

/* 8. Cümle listesi */
.sentence-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: atc-cumle }
.sentence-item {
	position: relative; counter-increment: atc-cumle;
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
	background: var(--color-surface-muted); border-radius: var(--radius-lg);
}
.sentence-item:target { background: var(--color-note-bg); box-shadow: 0 0 0 2px var(--color-accent) }
/* Sarı eğik numara pili — kutunun sol üstüne taşar; metin koyu (8,26:1) */
.sentence-item__num {
	position: absolute; left: calc(var(--space-3) * -1); top: calc(var(--space-2) * -1);
	width: var(--badge-width); height: var(--badge-height);
	display: grid; place-items: center;
	background: var(--color-accent); color: var(--color-accent-ink);
	border-radius: var(--radius-lg); transform: rotate(var(--badge-rotate));
	font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sentence-item__num:empty::before { content: counter(atc-cumle) }
.sentence-item__line { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 }
.sentence-item__line + .sentence-item__line { margin-top: var(--space-2) }
.sentence-item__text { min-width: 0 }
.sentence-item__de .sentence-item__text { font-weight: var(--weight-medium); color: var(--color-text) }
.sentence-item__tr .sentence-item__text { color: var(--color-text-muted) }
.sentence-item__report {
	margin-top: var(--space-3); align-self: start;
	background: var(--color-brand); color: var(--color-brand-ink);
	border: 0; border-radius: var(--radius);
	min-height: var(--tap-min); padding-inline: var(--space-3);
	font-size: var(--text-xs); font-weight: var(--weight-bold);
	display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.sentence-item__report:hover { background: var(--color-brand-hover) }
@media (min-width: 48rem) {
	.sentence-item { padding-right: 9rem }
	.sentence-item__report { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); margin: 0 }
}

/* 9. Artikel rozeti + lejant */
[data-artikel] { font-weight: var(--weight-bold) }
[data-artikel="der"] { color: var(--color-artikel-der) }
[data-artikel="die"] { color: var(--color-artikel-die) }
[data-artikel="das"] { color: var(--color-artikel-das) }
.artikel-badge {
	display: inline-block; padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-lg); color: var(--color-brand-ink);
	font-family: var(--font-serif-de); font-size: var(--text-2xl);
	font-weight: var(--weight-bold); line-height: var(--leading-tight);
	background: var(--color-text); text-decoration: none;
}
.artikel-badge[data-artikel] { color: var(--color-brand-ink) }
.artikel-badge[data-artikel="der"] { background: var(--color-artikel-der) }
.artikel-badge[data-artikel="die"] { background: var(--color-artikel-die) }
.artikel-badge[data-artikel="das"] { background: var(--color-artikel-das) }

.artikel-badge__word { border-bottom: var(--border-width-thick) dashed currentColor; padding-bottom: 2px }
.artikel-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm) }
.artikel-legend__item { display: inline-flex; align-items: center; gap: var(--space-2) }
.artikel-legend__swatch { width: 0.75rem; height: 0.75rem; border-radius: 2px; background: var(--color-text-faint); flex: 0 0 auto }
.artikel-legend__item[data-artikel="der"] .artikel-legend__swatch { background: var(--color-artikel-der) }
.artikel-legend__item[data-artikel="die"] .artikel-legend__swatch { background: var(--color-artikel-die) }
.artikel-legend__item[data-artikel="das"] .artikel-legend__swatch { background: var(--color-artikel-das) }

/* 10. Arama — beyaz hap, yumuşak gölge, sağda kırmızı yuvarlak düğme */
/* .search-box: SARMALAYICI (genişlik sınırı). Hap görünümü .search-form'da —
   ikisi iç içe kullanıldığında çift hap oluşmaz. */
.search-box { width: 100%; max-width: 32rem; margin-inline: auto }
.search-form {
	position: relative; display: flex; align-items: center; gap: var(--space-2);
	background: var(--color-surface); border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card); padding: var(--space-1);
	border: var(--border-width) solid var(--color-border);
}
/* Etiket .screen-reader-text ile gizlenir (position:absolute). Buraya
   `display:contents` KOYULMAZ: kutu üretmeyen bir öğede position etkisiz
   kalır, etiket metni hap kutusunun içine akar ve girdiyi daraltır. */
.search-form__input {
	flex: 1 1 auto; min-width: 0; min-height: var(--tap-min);
	padding-inline: var(--space-4); border: 0; background: none;
	border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--text-base);
}
.search-form__input::placeholder { color: var(--color-text-faint) }
.search-form__submit {
	flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min);
	display: grid; place-items: center; border: 0; border-radius: 50%;
	background: var(--color-brand); color: var(--color-brand-ink); cursor: pointer;
}
.search-form__submit:hover { background: var(--color-brand-hover) }
.search-form__results {
	position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0;
	z-index: var(--z-suggest); background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
	max-height: 60vh; overflow-y: auto; padding: 0; list-style: none;
}
.search-form__results li { border-bottom: var(--border-width) solid var(--color-border) }
.search-form__results li:last-child { border-bottom: 0 }
.search-form__results a {
	display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
	align-items: baseline; padding: var(--space-2) var(--space-4);
	min-height: var(--tap-min); text-decoration: none; color: var(--color-text);
}
.search-form__results a:hover, .search-form__results [aria-selected="true"] a { background: var(--color-brand-soft) }
.sg-de { font-weight: var(--weight-bold) }
.sg-tr, .sg-empty { color: var(--color-text-muted); font-size: var(--text-sm) }
.sg-empty { padding: var(--space-3) var(--space-4) }

/* 11. Site başlığı + menü */
.site-header { background: var(--color-surface); position: relative; z-index: var(--z-header) }
.site-header__inner {
	display: grid; grid-template-columns: 1fr auto; align-items: center;
	gap: var(--space-3); padding-block: var(--space-3);
}
.site-title { margin: 0; font-size: var(--text-xl); font-weight: 800; line-height: 1 }
.site-title a { display: inline-flex; align-items: center; min-height: var(--tap-min); text-decoration: none; color: inherit }
/* Logo: "almanca" sarı + "türkçe" kırmızı (canlı ölçüm) */
.wordmark { text-transform: lowercase; letter-spacing: -0.02em; white-space: nowrap }
.wordmark__a { color: var(--color-accent) }
.wordmark__b { color: var(--color-brand) }
.site-title img { max-height: 3rem; width: auto }

.nav-toggle {
	min-width: var(--tap-min); min-height: var(--tap-min); display: grid; place-items: center;
	background: none; cursor: pointer; border-radius: var(--radius); color: var(--color-text);
	border: var(--border-width) solid var(--color-border);
}
.nav-toggle__bar {
	width: 18px; height: 12px; border-top: var(--border-width-thick) solid;
	border-bottom: var(--border-width-thick) solid; position: relative;
}
.nav-toggle__bar::after { content: ""; position: absolute; inset: 50% 0 auto; height: 0; border-top: var(--border-width-thick) solid }

.nav { grid-column: 1 / -1; display: none }
.nav.is-open { display: block }
.nav__list { display: flex; flex-direction: column; gap: var(--space-1) }
.nav__list a {
	display: flex; align-items: center; gap: var(--space-2);
	min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
	border-radius: var(--radius); font-weight: var(--weight-medium);
	text-decoration: none; color: var(--color-text);
}
.nav__list a:hover { background: var(--color-surface-muted); color: var(--color-brand) }
.nav__list .current-menu-item > a { color: var(--color-brand) }
.nav__icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--color-text-faint) }
.nav__list a:hover .nav__icon { color: currentColor }
/* ------------------------------------------------------------------
   HEADER — yalnızca kimlik ve gezinme

   2026-09-13: arama kutusu header'dan ÇIKARILDI ve sayfa gövdesinin en
   üstüne (`.page-search`) alındı. Header'ın işi marka ve gezinme; arama
   içeriğin bir parçası. Referans: tureng.com — header ince, düz metin
   menülü, aramasız; arama hemen altta, gövdede.

   Menü ikonları da kaldırıldı (bkz. inc/template-tags.php): "Sözlük"
   yazısının yanındaki kitap ikonu yazının söylediğini tekrar ediyordu.
   ------------------------------------------------------------------ */
@media (min-width: 48rem) {
	.site-header__inner { grid-template-columns: auto 1fr; padding-block: var(--space-3) }
	.nav-toggle { display: none }
	.nav { grid-column: 2; display: block; justify-self: end }
	.nav__list { flex-direction: row; gap: var(--space-1) }
	.nav__list a { padding-inline: var(--space-4) }
	.site-title { font-size: var(--text-2xl) }
}

/* ------------------------------------------------------------------
   SAYFA ARAMASI — gövdenin en üstünde, içerikten önce.
   Anasayfa hariç her sayfada (bkz. header.php). Genişlik `max-width` ile
   sınırlanır, `margin:auto` ile DEĞİL — kap ızgara olursa otomatik yan
   boşluklar öğeyi sıfır genişliğe büzer (bu projenin tekrar eden tuzağı).
   ------------------------------------------------------------------ */
.page-search { width: 100%; margin-bottom: var(--space-5) }
.page-search .search-form { width: 100%; max-width: 42rem }

/* 12. Ekmek kırıntısı */
/* İZ (breadcrumb).
   2026-09-13: ">" karakteri yerine CSS ile çizilmiş bir chevron kullanılıyor.
   Gerekçe: düz ">" yazı tipine göre farklı yükseklikte oturuyor ve metinle
   aynı ağırlıkta okunuyordu — göz onu bir bağlantı sanabiliyordu. Chevron
   daha ince, dikeyde ortalı ve `aria-hidden` bir süs; ekran okuyucu yalnızca
   bağlantı adlarını okur (liste zaten <ol>).
   SEO: görünen iz ile JSON-LD BreadcrumbList aynı kaynaktan (atc_breadcrumb_items)
   beslenir, yani ikisi asla ayrışmaz. */
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-tight) }
.breadcrumb__list {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-1) var(--space-2);
	margin: 0; padding: 0; list-style: none;
}
.breadcrumb__item { display: inline-flex; align-items: center; color: var(--color-text-muted); min-width: 0 }

.breadcrumb__item a {
	color: var(--color-text-muted);
	font-weight: var(--weight-normal);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--duration) var(--ease);
}
.breadcrumb__item a:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px }
.breadcrumb__item a:focus-visible { outline-offset: 2px }

/* Son öğe = bulunduğun sayfa: tek koyu ve kalın öğe, böylece iz içinde
   nerede olduğun bir bakışta okunur. */
.breadcrumb__item [aria-current="page"] {
	color: var(--color-text);
	font-weight: var(--weight-bold);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}

/* Chevron ayraç — inline SVG maskesi, ek istek yok. */
.breadcrumb__item + .breadcrumb__item::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem; height: 0.5rem;
	margin-right: var(--space-2);
	background: var(--color-text-faint);
	mask: var(--icon-chevron) center / contain no-repeat;
	-webkit-mask: var(--icon-chevron) center / contain no-repeat;
}

/* 13. Kelime gövdesi (paylaşılan iskelet; ayrıntı pages-word.css) */
.word-body { display: grid; gap: var(--space-5) }
.word-section { display: grid; gap: var(--space-3) }
.word-section__more { color: var(--color-text-muted); font-size: var(--text-sm) }
.word-figure { margin: 0 }
.word-figure img { border-radius: var(--radius-card) }

.empty-state { padding: var(--space-5); background: var(--color-surface-muted); border-radius: var(--radius-lg); display: grid; gap: var(--space-4) }

/* 14. Yan ray */
.sidebar { display: grid; gap: var(--space-4) }
/* Rayda menü daima dikey kalır (başlıktaki yatay .nav__list kuralına karşı) */
.sidebar .nav__list { flex-direction: column; gap: 0 }
.sidebar .nav__list li + li { border-top: var(--border-width) solid var(--color-border) }
.sidebar__title { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: var(--space-3) }
.sidebar__block { padding: var(--card-padding); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card) }

/* 15. Alt bölüm */
.site-footer { margin-top: var(--space-6); position: relative; background: var(--color-surface); padding-bottom: var(--space-5) }
.site-footer > .wrap { padding-top: var(--space-5) }
/* Dekoratif kırmızı dalga (canlı footer-border SVG'si) */
.site-footer__wave { display: block; width: 100%; height: 3rem; color: var(--color-brand) }
.site-footer__wave path { fill: none; stroke: currentColor; stroke-width: 3; vector-effect: non-scaling-stroke }
.footer-cols {
	display: grid; gap: var(--space-5); margin: 0 0 var(--space-6); padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.footer-cols > li > a, .footer-cols > li > .footer-col__title { display: block; margin-bottom: var(--space-3) }
.footer-cols .sub-menu, .footer-col__list { display: grid; gap: var(--space-1) }
.footer-cols .sub-menu a, .footer-col__list a {
	display: flex; align-items: center; min-height: var(--tap-min);
	color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm);
}
.footer-cols .sub-menu a:hover, .footer-col__list a:hover { color: var(--color-brand); text-decoration: underline }
.site-footer__bottom {
	display: grid; gap: var(--space-4); justify-items: center; text-align: center;
	padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border);
}
.site-footer__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 }
.site-footer__bottom .site-title { font-size: var(--text-lg) }
.social-list { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.social-list a { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; color: var(--color-text-faint) }
.social-list a:hover { color: var(--color-brand); background: var(--color-surface-muted) }
.social-list svg { width: 1.25rem; height: 1.25rem }
@media (min-width: 48rem) {
	.site-footer__bottom { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left }
	.site-footer__bottom .social-list { justify-self: end }
}

/* 16. Alt bölüm — DAR EKRANDA KATLANAN SÜTUNLAR
   Ölçüm: 360px'te alt bölüm 951px (sayfanın %31'i). Bağlantı SİLİNMEDİ;
   sütunlar katlandı. Denetim mekanizması gizli onay kutusu + <label>:
   <details>in `open` durumu bir HTML niteliğidir ve CSS onu değiştiremez,
   yani masaüstünde açık / mobilde kapalı davranışı <details> ile JS'siz
   kurulamaz (gerekçe: footer.php başlığı). Mobil öncelikli: varsayılan
   KAPALI, ≥48rem'de onay kutusu tamamen devre dışı ve liste daima açık —
   masaüstü görünümü BİREBİR eskisi gibi. */
.footer-cols { gap: var(--space-2); margin-bottom: var(--space-5) }
.footer-cols > .footer-col > .footer-col__title {
	display: flex; align-items: center; gap: var(--space-2);
	min-height: var(--tap-min); /* 44px dokunma hedefi */
	margin-bottom: 0; cursor: pointer;
}
/* Ok yalnızca dekoratif; durumu onay kutusu taşır. currentColor = marka
   kırmızısı (beyazda 4,86:1 / koyuda 5,58:1 — UI için ≥3:1). */
.footer-col__chev {
	width: 1rem; height: 1rem; flex: 0 0 auto; margin-inline-start: auto;
	transition: transform var(--duration) var(--ease);
}
.footer-col__list { display: none }
.footer-col__toggle:checked ~ .footer-col__list { display: grid; padding-block: var(--space-1) var(--space-3) }
.footer-col__toggle:checked ~ .footer-col__title .footer-col__chev { transform: rotate(180deg) }
/* Onay kutusu görsel olarak gizli (.screen-reader-text) ama klavyeye açık →
   odak halkası etiketin üzerinde gösterilir, yoksa odak görünmez olurdu. */
.footer-col__toggle:focus-visible ~ .footer-col__title {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset); border-radius: var(--radius-sm);
}
/* Dar ekranda dalga ve alt şerit sıkıştırılır (dekoratif yüksekliği yarıya). */
.site-footer__wave { height: 2rem }
.site-footer__bottom { gap: var(--space-3) }

@media (min-width: 48rem) {
	/* MASAÜSTÜ: katlama tamamen yok; eski görünüm birebir geri gelir. */
	.footer-cols { gap: var(--space-5); margin-bottom: var(--space-6) }
	.footer-cols > .footer-col > .footer-col__title {
		display: block; min-height: 0; margin-bottom: var(--space-3); cursor: default;
	}
	.footer-col__list { display: grid }
	.footer-col__toggle, .footer-col__chev { display: none }
	.site-footer__wave { height: 3rem }
	.site-footer__bottom { gap: var(--space-4) }
}

/* 17. Geri bildirim paneli — "Hata Bildir" / "Cümle Ekle" formu.
   Panel YALNIZCA ?atc_bildir= / ?atc_fb= varken basılır (bkz.
   inc/template-tags.php · atc_feedback_panel), yani normal sayfa
   görüntülemesinde bu kuralların hiçbiri bir öğeyle eşleşmez. */
.feedback {
	margin-top: var(--space-5); padding: var(--card-padding);
	background: var(--color-surface); border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: grid; gap: var(--space-4);
	/* Çapa ile inildiğinde başlık ekranın en tepesine yapışmasın. */
	scroll-margin-top: var(--space-5);
}
.feedback:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset) }
.feedback__form { display: grid; gap: var(--space-4); margin: 0 }
.feedback__field { display: grid; gap: var(--space-2); margin: 0 }
.feedback__label {
	display: flex; align-items: center; gap: var(--space-2);
	font-weight: var(--weight-bold); color: var(--color-heading);
}
.feedback__hint { color: var(--color-text-muted); font-size: var(--text-sm) }
/* Girdi kenarlığı: --color-border-strong beyazda 1,37:1 kalıyor ve WCAG
   1.4.11'i (arayüz bileşeni sınırı ≥3:1) karşılamıyor. Form alanında sınır
   ZORUNLU bilgi olduğu için --color-text-faint kullanıldı: 5,12:1 açık,
   4,95:1 koyu. */
.feedback__input {
	width: 100%; min-height: calc(var(--tap-min) * 2);
	padding: var(--space-3); background: var(--color-surface); color: var(--color-text);
	border: var(--border-width) solid var(--color-text-faint);
	border-radius: var(--radius); font-size: var(--text-base);
	line-height: var(--leading-normal); resize: vertical;
}
.feedback__input:focus { border-color: var(--color-brand) }
.feedback__note { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 }
/* Durum mesajı. ANLAMI RENK TAŞIMIYOR: metin açıkça ne olduğunu söylüyor,
   şeritler yalnızca pekiştirme. Yine de ikisi de ≥3:1:
   ok  #333/#f8f9fa 11,99:1 · koyu #e6e6e6/#22262d 12,16:1
   err #e30a16/#f8f9fa 4,61:1 · koyu #ff5964/#22262d 4,96:1 */
.feedback__msg {
	padding: var(--space-3) var(--space-4); background: var(--color-surface-muted);
	border-radius: var(--radius); color: var(--color-text);
	border-inline-start: var(--rule-width) solid var(--color-text);
}
.feedback__msg p { margin: 0 }
.feedback__msg--err { border-inline-start-color: var(--color-brand) }
/* Bildirilen cümlenin alıntısı — kullanıcı doğru satırı bildirdiğini görür. */
.feedback__quote {
	margin: 0; padding: var(--space-3) var(--space-4);
	background: var(--color-surface-muted); border-radius: var(--radius);
	border-inline-start: var(--rule-width) solid var(--color-text-faint);
}
.feedback__quote p { margin: 0 }
.feedback__quote-tr { color: var(--color-text-muted) }
.feedback__quote-src { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-2) }
.feedback .btn-row { justify-content: flex-start }

/* Bal küpü (spam tuzağı). `display:none` KULLANILMAZ — bazı botlar gizli
   alanları atlar; ekran dışına alınır. Ekran okuyucu ve klavye erişimi
   işaretlemede kapatıldı (aria-hidden + tabindex="-1"). */
.atc-hp {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}