/* =============================================================================
   Biosmyrna — Bileşen katmanı

   Ölçü kaynağı: docs/06-visual-design/COMPONENT_LIBRARY.md  🔒
   Sistem kaynağı: docs/design/COMPONENT_LIBRARY_V1.md

   🔴 Burada tanımlı olmayan bir bileşen tasarıma girmez.
   🔴 Sistem ÇİZGİ ÖNCELİKLİDİR: ayrım önce kenarlıkla, gerekirse gölgeyle.
   🔴 Koyu temada gölge çalışmaz — yükseklik yüzey açıklığıyla kurulur ve
      kart kenarlığı ZORUNLUDUR (C5).
   ============================================================================= */

/* =============================================================================
   BUTON — COMPONENT_LIBRARY §2
   🔴 Bir ekranda TEK birincil buton bulunur (D1).
   🔴 Buton SABİT GENİŞLİKTE OLMAZ — Almanca metin %35 uzayabilir (M1).
   ============================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--motion-ease),
	            border-color var(--motion-fast) var(--motion-ease),
	            color var(--motion-fast) var(--motion-ease);
}

/* Boylar — §2.1 */
.btn--sm { min-block-size: var(--button-sm); padding: 11px 18px; font-size: 14px; }
.btn--md { min-block-size: var(--button-md); padding: 14px 22px; font-size: 15px; }
.btn--lg { min-block-size: var(--button-lg); padding: 17px 26px; font-size: 16px; }

/* Varyantlar */
.btn--primary {
	background: var(--action-primary-bg);
	color: var(--action-primary-text);
	border-color: var(--action-primary-bg);
}
.btn--primary:hover {
	background: var(--action-primary-hover);
	border-color: var(--action-primary-hover);
	color: var(--action-primary-text);
}

.btn--secondary {
	background: transparent;
	color: var(--action-secondary-text);
	border-color: var(--action-secondary-border);
}
.btn--secondary:hover { background: var(--action-soft-bg); color: var(--action-secondary-text); }

/* Koyu bant üstünde — 🔴 accent-500 bu zeminde 4,37:1'de kalır, KULLANILMAZ */
.btn--band-primary {
	background: var(--accent-400);
	color: var(--ink-950);
	border-color: var(--accent-400);
}
.btn--band-primary:hover { background: var(--accent-200); border-color: var(--accent-200); color: var(--ink-950); }

.btn--band-secondary {
	background: transparent;
	color: var(--band-text);
	border-color: var(--primary-300);
}
.btn--band-secondary:hover { background: rgba(124, 196, 155, 0.14); color: var(--white); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Teklif sayacı — "Teklif Al · 2" */
.btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding-inline: 5px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.22);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.btn__count:empty,
.btn__count[hidden] { display: none; }

/* =============================================================================
   İKON DÜĞMESİ — C13 · 🔴 hedef ≥ 44 × 44 px, erişilebilir etiket zorunlu
   ============================================================================= */

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--touch-min);
	block-size: var(--touch-min);
	background: none;
	border: 0;
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	cursor: pointer;
	text-decoration: none;
}
.icon-btn:hover { color: var(--link); background: var(--action-soft-bg); }

/* =============================================================================
   ARROW LINK — C14 · üçüncül bağlantı, düğme DEĞİL
   ============================================================================= */

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-body-sm);
	font-weight: 500;
	color: var(--link);
	text-decoration: none;
}
.arrow-link .icon { transition: transform var(--motion-fast) var(--motion-ease); }
.arrow-link:hover .icon { transform: translateX(2px); }
[dir="rtl"] .arrow-link:hover .icon--directional { transform: scaleX(-1) translateX(2px); }

/* =============================================================================
   ROZET VE ETİKET — COMPONENT_LIBRARY §4
   🔴 Rozet tıklanabilir değildir; bilgi taşır.
   ============================================================================= */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}
.badge--certification { background: var(--action-soft-bg); color: var(--heading-brand); }
.badge--neutral { background: transparent; border: var(--border-width) solid var(--divider); color: var(--text-muted); font-weight: 400; }
.badge--brand { background: var(--accent-700); color: var(--white); }
.badge--status-valid { background: var(--action-soft-bg); color: var(--heading-brand); }
.badge--status-process { background: transparent; border: var(--border-width) solid var(--status-warn); color: var(--status-warn); }
.badge--status-waiting { background: transparent; border: var(--border-width) dashed var(--border); color: var(--text-muted); }

/* =============================================================================
   KART — COMPONENT_LIBRARY §3
   Üç varyant aynı iskeleti paylaşır (D4). elev-0: kenarlıkla ayrılır.
   ============================================================================= */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface-raised);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--motion-fast) var(--motion-ease),
	            box-shadow var(--motion-fast) var(--motion-ease);
}
.card:hover { border-color: var(--action-secondary-border); box-shadow: var(--elev-1); }

/* 🔴 Kesikli çerçeve BİLGİ TAŞIR: kademe 2 — teknik veri hazırlanıyor,
   detay sayfası yok. Stil tercihi değildir. */
.card--tier2 { border-style: dashed; }
.card--tier2:hover { box-shadow: none; }

.card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	color: inherit;
	text-decoration: none;
	flex: 1;
}
@media (min-width: 768px) { .card__link { padding: var(--space-5); gap: var(--space-3); } }

.card__link--static { cursor: default; }

.card__media {
	display: block;
	margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
	background: var(--surface-alt);
}
@media (min-width: 768px) {
	.card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; }
}
.card__img { inline-size: 100%; block-size: auto; object-fit: cover; }

/* 🔴 F13 — ürün görseli AYNALANMAZ (ışık yönü sol üstte kalır) */
[dir="rtl"] .card__img { transform: none; }

.card--product .card__media { aspect-ratio: 1 / 1; }
.card--product .card__img { block-size: 100%; }
.card--category .card__media { aspect-ratio: 4 / 3; }
.card--category .card__img { block-size: 100%; }
.card--article .card__media { aspect-ratio: 16 / 9; }
.card--article .card__img { block-size: 100%; }
/* 2026-10-12 · bölüm sayfası kartları (Kurumsal vb.) — görsel oranı farklı yüklense de kartlar eşit */
.card--section .card__media { aspect-ratio: 3 / 2; }
.card--section .card__media { display: block; }
.card--section .card__media > picture { display: block; block-size: 100%; }
.card--section .card__img { block-size: 100%; }

.card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.card__title { color: var(--heading); }
.card__summary { color: var(--text-secondary); }
.card__meta { color: var(--text-muted); }

.card__specs { display: flex; flex-direction: column; gap: var(--space-1); }
.card__specs li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-body-sm); }
.card__spec-label { color: var(--text-muted); }
/* 2026-09-25 · değer ve birim kopmaz ("min 46" / "%" alt satıra düşüyordu, 375 px) */
.card__spec-value { color: var(--text-secondary); white-space: nowrap; }
/* Birim değerden bir tık soluk — sayı öne çıksın (2026-09-09) */
.card__spec-unit { color: var(--text-muted); font-weight: 400; }

.card__action {
	margin-block-start: auto;
	padding: var(--space-3) var(--space-4);
	border-block-start: var(--border-width) solid var(--divider);
	background: none;
	border-inline: 0;
	border-block-end: 0;
	color: var(--link);
	font-size: var(--text-body-sm);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
	min-block-size: var(--touch-min);
}
.card__action:hover { background: var(--action-soft-bg); }
.card__action.is-added { color: var(--text-muted); }

/* Mobilde hover yoktur (COMPONENT_LIBRARY_V1 §5.9/G) */
@media (hover: none) {
	.card:hover { border-color: var(--divider); box-shadow: none; }
}

/* =============================================================================
   IZGARALAR — COMPONENT_LIBRARY §15
   Ürün ve kategori: masaüstü 3 sütun · < 900 px 2 sütun
   ============================================================================= */

.grid-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}
@media (min-width: 900px) {
	.grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
/* 2026-09-25 · Yazı kartları telefonda tek sütun. COMPONENT_LIBRARY §15'teki
   "< 900 px → 2 sütun" kuralı kategori ve ürün ızgarası içindir (kısa başlık +
   görsel). Yazı kartında uzun başlık + özet 164 px'e sığmıyor, kelimeler
   bölünüyordu ("Spesifikasyon/una"). Kategori/ürün ızgarasına dokunulmadı. */
@media (max-width: 599px) {
	.grid-cards:has(> .card--article) { grid-template-columns: minmax(0, 1fr); }
}
.grid-cards--4 { }
@media (min-width: 1280px) {
	.grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================================================================
   KANIT KATMANI — C35 / C36
   🔴 Varsayılan KAPALI. İçerik kaynakta her zaman vardır.
   🔴 Açılınca YERİNDE açılır; görsel kaymaz.
   ============================================================================= */

.evidence {
	border-block-start: var(--border-width) dashed var(--divider);
	padding-block-start: var(--space-3);
	margin-block-start: var(--space-4);
}
.evidence__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: var(--touch-min);
	font-size: var(--text-body-sm);
	font-weight: 500;
	color: var(--text-secondary);
	cursor: pointer;
	list-style: none;
}
.evidence__row::-webkit-details-marker { display: none; }
.evidence__row:hover { color: var(--link); }
.evidence__chevron { transition: transform var(--motion-fast) var(--motion-ease); }
.evidence[open] > .evidence__row .evidence__chevron { transform: rotate(90deg); }
[dir="rtl"] .evidence[open] > .evidence__row .evidence__chevron { transform: scaleX(-1) rotate(90deg); }

.evidence__detail {
	padding-block-start: var(--space-3);
	padding-inline-start: var(--space-5);
	border-inline-start: var(--border-width-strong) solid var(--divider);
	margin-inline-start: 11px;
	color: var(--text-secondary);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

/* Kapanış bloğundaki blok varyantı */
.evidence--block { border-block-start-color: var(--band-border); }
.band .evidence__row { color: var(--band-text); }
.band .evidence__detail { color: var(--band-text); border-inline-start-color: var(--band-border); }

/* =============================================================================
   KANIT KARTI — markanın temel bileşeni
   ============================================================================= */

.evidence-card {
	background: var(--surface-warm);
	border: var(--border-width) solid var(--surface-warm-line);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-inline-size: 68ch;
}
.evidence-card__claim { color: var(--heading); }
.evidence-card__basis { color: var(--text-secondary); }
.evidence-card__source { color: var(--text-muted); }

/* =============================================================================
   İLERLEME GÖSTERGESİ — C59
   🔴 Yüzde gösterilmez · sayı animasyonu yasak · rakamlar Latin.
   ============================================================================= */

.progress {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.progress__track {
	position: relative;
	block-size: 2px;
	inline-size: 100%;
	max-inline-size: 110px;
	background: var(--divider);
}
.progress__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;   /* 🔴 RTL'de dolum sağdan sola akar */
	background: var(--accent);
}

/* =============================================================================
   YOLCULUK ÇIKIŞI — C60 "Ürünlere geç ↓"
   🔴 SATIŞ CTA'SI DEĞİL. Düğme zemini yok · %72 opaklık · 10,5 px.
   🔴 Görsel ağırlığı kanıt girişinden DÜŞÜK.
   ============================================================================= */

.journey-skip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	font-size: 10.5px;
	letter-spacing: 0.02em;
	color: var(--text-muted);   /* 2026-09-22 · %72 saydamlık kaldırıldı — kontrast 4,5:1 altına düşüyordu (axe) */
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	min-block-size: var(--touch-min);   /* dokunma hedefi korunur (A4) */
}
.journey-skip:hover,
.journey-skip:focus-visible { opacity: 1; color: var(--link); }
.journey-skip .icon { inline-size: 13px; block-size: 13px; }

/* =============================================================================
   TEKNİK PARAMETRE TABLOSU — C37
   🔴 Dış çerçeve yok · satır ayracı 1 px · rakamlar tabular ve sağa hizalı.
   🔴 Yatay kaydırma yalnızca kendi kabında (A12 · D6).
   ============================================================================= */

.spec-wrap { max-inline-size: 100%; }

.spec { font-size: var(--text-body-sm); }
.spec caption { text-align: start; }
.spec th, .spec td {
	padding-block: 11px;
	padding-inline: 0 var(--space-4);
	border-block-end: var(--border-width) solid var(--divider);
	text-align: start;
	vertical-align: baseline;
}
.spec thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	color: var(--text-muted);
}
.spec tbody th { font-weight: 400; color: var(--text-secondary); }
/* 🔴 2026-09-09 · `.spec td` (özgüllük 0,1,1) bu kuralı (0,1,0) eziyordu:
   text-align sonuçta "start" çıkıyordu, yani değerler sağa yanaşmıyordu.
   Başlık hücresi de aynı hizaya alınır, yoksa sütun başlığı ile içeriği
   farklı kenarlara yaslanır. */
.spec td.spec__value,
.spec th.spec__value {
	text-align: end;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	white-space: nowrap;
}
.spec thead th.spec__value { color: var(--text-muted); }
.spec__unit { color: var(--text-muted); white-space: nowrap; }
.spec__note { display: block; color: var(--text-muted); }

/* Mobilde sütunlar alt alta iner — yatay kaydırma gerekmez */
@media (max-width: 599px) {
	.spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; }
	.spec thead { display: none; }
	.spec tr { padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--divider); }
	.spec th, .spec td { border: 0; padding: 0; }
	.spec td.spec__value, .spec th.spec__value { text-align: start; font-size: var(--text-body); }
	.spec__unit { display: inline; }
}

/* =============================================================================
   META BİLGİ IZGARASI — C38
   🔴 Boş alan gizlenir — "—" yazılmaz.
   ============================================================================= */

/* 🔄 2026-10-08 · ÜRÜNÜN TİCARİ ÖZETİ (kullanıcı brifi) — tek bütün panel, tablo
   değil. Masaüstü: yan yana sütunlar, aralarında ince ayraç; ambalaj sütunu iki pay.
   Dar alan: önce form | menşei, ambalaj altta tam satır; telefonda alt alta.
   Etiket küçük ikincil satır (büyük harf DEĞİL), değer güçlü. Gölge/gradyan yok. */
.meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin: 0;
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	background: var(--surface-alt);
}
.meta--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1fr); }
.meta--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.meta__cell {
	display: grid; align-content: start; gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border-inline-start: var(--border-width) solid var(--divider);
	min-inline-size: 0;
}
.meta__cell:first-child { border-inline-start: 0; }
.meta__label { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-muted); }
.meta__value { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--heading); }
.meta__cell--wide .meta__value { font-family: inherit; font-size: inherit; font-weight: inherit; }
.meta__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.meta__chip {
	padding: 4px 10px;
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-sm, 4px);
	background: var(--surface);
	font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text);
	white-space: nowrap;
	unicode-bidi: isolate;   /* 2026-10-19 · Arapçada "(big bag)" gibi Latin parça yönünü bozmasın */
}
/* Dar panel (ürün görselinin yanındaki sütun daralınca / tablet): form · menşei üstte,
   ambalaj altta tam satır. */
@media (min-width: 600px) and (max-width: 1199px) {
	.meta--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.meta--3 .meta__cell--wide { grid-column: 1 / -1; grid-row: 2; border-inline-start: 0; border-block-start: var(--border-width) solid var(--divider); }
	.meta--3 .meta__cell:last-child { border-inline-start: var(--border-width) solid var(--divider); }
}
/* Telefon: alt alta; ambalajlar alt satıra sarar, tek satıra zorlanmaz. */
@media (max-width: 599px) {
	.meta--3, .meta--2 { grid-template-columns: minmax(0, 1fr); }
	.meta__cell { border-inline-start: 0; border-block-start: var(--border-width) solid var(--divider); padding: var(--space-4); }
	.meta__cell:first-child { border-block-start: 0; }
	.meta__chip { white-space: normal; }
}
/* Panel ile düğmeler arasında doğal akış */
.product-head__body .meta + * { margin-block-start: var(--space-5); }

/* =============================================================================
   KIRINTI YOLU — C9 · son öğe bağlantı değildir
   ============================================================================= */

.breadcrumb { border-block-end: var(--border-width) solid var(--divider); }
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-3);
	font-size: 13.5px;
	color: var(--text-muted);
}
.breadcrumb li + li::before {
	content: '›';
	margin-inline-end: var(--space-2);
	color: var(--text-muted);
}
/* RTL'de ayraç ters çevrilir */
[dir="rtl"] .breadcrumb li + li::before { content: '‹'; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text-secondary); font-weight: 500; }

/* =============================================================================
   KATLANIR BAŞLIK — C54 (SSS)
   🔴 Başlangıçta hepsi kapalı · biri açıkken diğerleri kapanmaz.
   ============================================================================= */

.accordion { border-block-start: var(--border-width) solid var(--divider); }
/* 2026-09-25 · SSS bölüm başlığı (faq.php) — ilk bölüm üstte boşluk almaz */
.faq__group { margin-block: var(--space-7) var(--space-4); }
.faq__group:first-child { margin-block-start: 0; }
.accordion__item { border-block-end: var(--border-width) solid var(--divider); }
.accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-block-size: var(--touch-min);
	padding-block: var(--space-4);
	cursor: pointer;
	list-style: none;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--link); }
.accordion__sign { color: var(--text-muted); flex: none; }
.accordion__minus { display: none; }
.accordion__item[open] .accordion__plus { display: none; }
.accordion__item[open] .accordion__minus { display: block; }
.accordion__a { padding-block-end: var(--space-5); color: var(--text-secondary); max-inline-size: 68ch; }

/* =============================================================================
   SAYI ŞERİDİ — C41 · COMPONENT_LIBRARY §13E
   🔴 Yalnızca doğrulanmış rakam. Sayaç animasyonu YASAK.
   ============================================================================= */

.numbers { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

.numbers__item {
	padding-inline-start: var(--space-4);
	border-inline-start: var(--border-width-strong) solid var(--accent);
}
.numbers__value {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 600;
	color: var(--heading-brand);
	font-variant-numeric: tabular-nums;
}
.band .numbers__value { color: var(--band-accent); }
.band .numbers__item { border-inline-start-color: var(--band-accent); }
.numbers__label { color: var(--text-secondary); }
.band .numbers__label { color: var(--band-text); }

/* =============================================================================
   ADIM LİSTESİ — C58 · COMPONENT_LIBRARY §13C
   🔴 Numaralandırma bilgi taşır; dekoratif numara kullanılmaz.
   ============================================================================= */

.steps { display: flex; flex-direction: column; }
.steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--space-4);
	padding-block-end: var(--space-6);
}
.steps__item:last-child { padding-block-end: 0; }
/* Adımlar arası dikey çizgi — RTL'de otomatik olarak sağa geçer */
.steps__item:not(:last-child)::before {
	content: '';
	position: absolute;
	inset-block: 34px 0;
	inset-inline-start: 19px;
	inline-size: var(--border-width);
	background: var(--divider);
}
.steps__num {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--heading-brand);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.steps__body > * + * { margin-block-start: var(--space-2); }

/* =============================================================================
   DEĞER ZİNCİRİ ŞEMASI
   ============================================================================= */

.chain {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}
@media (min-width: 900px) { .chain { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.chain__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}
.chain__num { font-family: var(--font-heading); font-size: 20px; color: var(--heading-brand); }
.chain__label { font-weight: 600; color: var(--heading); }
.chain__text { color: var(--text-muted); }

/* =============================================================================
   ALINTI — C19 · COMPONENT_LIBRARY §13D
   🔴 Kaynaksız alıntı kullanılmaz · kişi fotoğrafı taşımaz · italik değildir.
   ============================================================================= */

.quote {
	padding-inline-start: var(--space-5);
	border-inline-start: 3px solid var(--accent);
	max-inline-size: 60ch;
}
.quote blockquote { color: var(--heading); }
.quote__source { margin-block-start: var(--space-3); color: var(--text-muted); }

/* =============================================================================
   BELGE KARTI — C34 · COMPONENT_LIBRARY §13A
   Önizleme belgenin SOYUT TEMSİLİDİR — gerçek belge küçültülüp gösterilmez.
   ============================================================================= */

.doc {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--surface-raised);
	border: var(--border-width) solid var(--card-border);
	border-radius: var(--radius-md);
}
.doc__preview {
	position: relative;
	aspect-ratio: 3 / 4;
	max-block-size: 180px;
	background: var(--surface-alt);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
/* Resmî organik logo (2026-09-21). Logolar beyaz zemin için tasarlandı;
   koyu temada da BEYAZ plaka üzerinde durur — renkleri değiştirilmez
   (resmî logo kullanım kuralları). Kırpılmaz, `contain`. */
.doc__preview--logo {
	aspect-ratio: auto;
	block-size: 140px;
	max-block-size: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--white);   /* koyu temada da beyaz — token, --surface değil */
}
.doc__preview--logo picture { display: contents; }
.doc__preview--logo img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}
.doc__lines {
	position: absolute;
	inset: 18% 16% 26%;
	background: repeating-linear-gradient(
		to bottom,
		var(--divider) 0 3px,
		transparent 3px 13px);
}
.doc__seal {
	position: absolute;
	inset-block-end: 12%;
	inset-inline-end: 14%;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--radius-full);
	border: var(--border-width-strong) solid var(--action-soft-bg);
	background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.doc__title { color: var(--heading); }
.doc__meta { display: flex; flex-direction: column; gap: var(--space-2); }
.doc__row { display: flex; justify-content: space-between; gap: var(--space-3); }
.doc__row dt { color: var(--text-muted); }
.doc__row dd { color: var(--text-secondary); text-align: end; }
.doc__scope { color: var(--text-secondary); }
.doc__action { margin-block-start: auto; }

/* =============================================================================
   DOĞRULAMA ÇERÇEVESİ — C39 (B7)
   🔴 Liste değil · logo yok · numara yok · rakam yok.
   ============================================================================= */

.verification {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
	text-align: center;
	max-inline-size: var(--container-text);
	margin-inline: auto;
}
.verification__line { color: var(--band-heading); }
.verification__note { color: var(--band-text); }
.band .verification__link { color: var(--band-accent); }

/* =============================================================================
   BÖLÜM GİRİŞİ — C21 · D2: sola hizalı, ortalanmış uzun metin bloğu yok
   ============================================================================= */

.section-intro { max-inline-size: 62ch; margin-block-end: var(--space-6); }
.section-intro > * + * { margin-block-start: var(--space-4); }
.section-intro__lead { color: var(--text-secondary); }

/* =============================================================================
   BOŞ DURUM — C62
   ============================================================================= */

.empty {
	padding: var(--space-8) var(--space-5);
	text-align: center;
	border: var(--border-width) dashed var(--divider);
	border-radius: var(--radius-md);
}
.empty__heading { color: var(--heading); }
.empty__text { margin-block-start: var(--space-3); color: var(--text-secondary); }
.empty__actions { margin-block-start: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* =============================================================================
   SAYFALAMA — C61 · sonsuz kaydırma değil
   ============================================================================= */

.pagination { margin-block-start: var(--space-7); }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.pager a,
.pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--touch-min);
	min-block-size: var(--touch-min);
	padding-inline: var(--space-3);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
	text-decoration: none;
}
.pager a:hover { border-color: var(--action-secondary-border); color: var(--link); }
.pager__current a,
.pager__current span { background: var(--action-soft-bg); color: var(--heading-brand); font-weight: 600; }

/* =============================================================================
   YER TUTUCU — 🔴 GELİŞTİRME ARACI
   PLACEHOLDER STRATEGY (30): gerçekçi ama sahte görsel üretilmez.
   Yayında görünmez: `.ph--silent` yalnızca boş alan bırakır.
   ============================================================================= */

.ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	inline-size: 100%;
	padding: var(--space-5);
	text-align: center;
	background:
		repeating-linear-gradient(45deg,
			transparent 0 8px,
			color-mix(in srgb, var(--status-warn) 22%, transparent) 8px 10px),
		var(--surface-alt);
	border: var(--border-width-strong) dashed var(--status-warn);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
}
.ph__label {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--status-warn);
}
.ph__note { font-size: 12px; color: var(--text-muted); max-inline-size: 34ch; }

/* Yayında: sessiz boşluk, hiçbir geliştirme metni görünmez */
.ph--silent {
	background: var(--surface-alt);
	border: var(--border-width) solid var(--divider);
}

/* =============================================================================
   METİN YER TUTUCUSU — 🔴 GELİŞTİRME ARACI
   Faz 7'de yapı kurulur, metin Faz 8'de yazılır. Yayında hiç basılmaz
   (bkz. bioPendingText()).
   ============================================================================= */

.pending {
	display: inline-block;
	padding: 2px 8px;
	border: var(--border-width) dashed var(--status-warn);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--status-warn);
	background: transparent;
	vertical-align: middle;
}