/*
 * Temel katman: sıfırlama, tipografik ritim, yerleşim yardımcıları.
 * Bileşenler bilesen.css içindedir.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

body {
	margin: 0;
	background: var(--ts-zemin);
	color: var(--ts-metin);
	font-family: var(--ts-yazi);
	font-size: var(--ts-fs-md);
	line-height: var(--ts-satir);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Mobil aksiyon çubuğu içeriğin üstünü kapatmasın. */
	padding-bottom: 0;
}

@media (max-width: 899px) {
	body { padding-bottom: calc(var(--ts-cubuk-yukseklik) + env(safe-area-inset-bottom, 0px)); }
}

h1, h2, h3, h4 {
	margin: 0 0 var(--ts-b2);
	font-weight: 700;
	line-height: var(--ts-satir-siki);
	letter-spacing: var(--ts-aralik-siki);
	text-wrap: balance;
}

h1 { font-size: var(--ts-fs-3xl); }
h2 { font-size: var(--ts-fs-2xl); }
h3 { font-size: var(--ts-fs-xl); }
h4 { font-size: var(--ts-fs-lg); }

p, ul, ol { margin: 0 0 var(--ts-b2); }
p { text-wrap: pretty; }

a { color: inherit; }

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

/* Odak halkası her yerde görünür — klavye kullanıcısı kaybolmasın. */
:focus-visible {
	outline: 3px solid var(--ts-turuncu);
	outline-offset: 2px;
	border-radius: var(--ts-yaricap-sm);
}

/* ---- Yerleşim ---- */

.ts-kapsayici {
	width: 100%;
	max-width: var(--ts-kapsayici);
	margin-inline: auto;
	padding-inline: var(--ts-b3);
}

.ts-bolum {
	padding-block: var(--ts-bolum);
}

.ts-bolum--alt { background: var(--ts-zemin-alt); }

/* Bölüm ritmi tek dolguda kalırsa sayfa tek nefeste okunuyor ve şablon
   hissi veriyor. Kanıt bandı sıkışık, kapanış geniş nefes alıyor. */
.ts-bolum--dar { padding-block: calc(var(--ts-bolum) * 0.5); }
.ts-bolum--genis { padding-block: calc(var(--ts-bolum) * 1.4); }

/* Okuma ölçüsü BAŞLIĞA değil paragrafa uygulanır.
 *
 * Blok üzerindeki 44ch gövde fontuna göre hesaplanıyordu ve 403 piksel
 * ediyordu; içindeki h2 ise 40 piksel puntoda. Sonuç satır başına on
 * karakter — kısa bir başlık bile üç dar satıra kırılıyordu.
 *
 * Başlık kendi puntosuna göre ölçülmeli: 24ch, 40 piksellik bir h2'de
 * iki satırlık rahat bir blok veriyor. */
.ts-bolum__baslik {
	margin-bottom: var(--ts-b5);
}

.ts-bolum__baslik h2 { max-width: 24ch; }
.ts-bolum__baslik p { max-width: 58ch; }

.ts-bolum__baslik p {
	color: var(--ts-metin-yumusak);
	font-size: var(--ts-fs-lg);
	margin-bottom: 0;
}

/* Üst etiket — bölümün ne olduğunu tek kelimeyle söyler. */
.ts-etiket {
	display: inline-block;
	margin-bottom: var(--ts-b1);
	color: var(--ts-turuncu);
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ts-izgara {
	display: grid;
	gap: var(--ts-b3);
}

.ts-izgara--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ts-izgara--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ts-izgara--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.ts-okuma { max-width: var(--ts-okuma); }

/* Ekran okuyucuya görünür, gözle görünmez. */
.ts-gizli-metin {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* İçeriğe atla bağlantısı — klavyeyle ilk sekmede belirir. */
.ts-atla {
	position: absolute;
	left: var(--ts-b2);
	top: -100px;
	z-index: 100;
	padding: var(--ts-b1) var(--ts-b2);
	background: var(--ts-turuncu);
	color: var(--ts-aksiyon-metin);
	font-weight: 700;
	border-radius: var(--ts-yaricap-sm);
	transition: top var(--ts-gecis);
}

.ts-atla:focus { top: var(--ts-b2); }

/* Kaydırınca beliren bölümler — JS bunu açar, JS yoksa içerik görünür kalır. */
.ts-belir {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--ts-gecis-yavas), transform var(--ts-gecis-yavas);
}

.ts-belir.ts-belir--acik,
.no-js .ts-belir {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ts-belir { opacity: 1; transform: none; }
}

/* ============ Tipografik cila ============ */

/* Başlıklarda öksüz kelime bırakma.
 *
 * "Konya Demirdöküm Kombi / Servisi" gibi son satırda tek kelime kalması
 * başlığı kırık gösteriyor. balance satırları eşitler; pretty yalnız
 * son satırı korur ve uzun gövde metninde daha ucuzdur. */
h1, h2, h3, .ts-hero__giris, .ts-bolum__baslik p {
	text-wrap: balance;
}

.ts-okuma p, .ts-kart__metin, .ts-ozet__metin {
	text-wrap: pretty;
}

/* ============ Yüzey dokusu ============
 * Tamamen düz yüzeyler dijital ve ucuz duruyor. Çok ince bir gren,
 * ekranda fark edilmeden yüzeye derinlik veriyor — baskıdaki kâğıt
 * dokusunun yaptığı şey.
 *
 * Görsel dosyası yok: gren, satır içi SVG gürültü filtresinden geliyor.
 * pointer-events yok, tıklamayı engellemiyor.
 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Koyu temada gren daha çok görünür; azaltılıyor. */
:root[data-tema="koyu"] body::after { opacity: 0.02; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) body::after { opacity: 0.02; }
}

/* Hareket azaltma tercihinde de kalır — gren hareket değil, doku. */