/*
 * Üstün Su — marka kimliği.
 *
 * Çekirdek yapıyı kurar; bu dosya yalnızca kimliği söyler. Kural: burada
 * mümkün olduğunca DEĞİŞKEN ezilir, yeni bileşen yazılmaz. Bileşen gerekiyorsa
 * sektör-nötr olup olmadığına bakılır — nötrse çekirdeğe gider.
 *
 * Tasarım yönü (brief): klasik su firması estetiğinden uzak. Parlak açık mavi
 * zemin, yapay dalga, büyük su damlası, yoğun gradient ve yuvarlak kartlar YOK.
 * Yakın dünya: lojistik, metal tanker yüzeyi, rota, kesintisiz operasyon.
 */

:root {
	/* --- Palet ------------------------------------------------------------
	 * Su mavisi (--renk-vurgu) SADECE etkileşim, bağlantı, aktif durum ve
	 * önemli bilgi için. Sayfanın geniş alanları lacivert/kağıt/buz taşır.
	 */
	--renk-koyu:       #0B2433;  /* derin lacivert — koyu bölümler, birincil metin üstü */
	--renk-koyu-2:     #123B4A;  /* koyu petrol   — hover, ikincil koyu yüzey */
	--renk-vurgu:      #168FB8;  /* temiz su      — yalnızca etkileşim ve vurgu */
	--renk-vurgu-koyu: #0F7396;
	--renk-buz:        #E8F3F6;  /* açık buz      — bilgi kutuları, hafif zemin */
	--renk-kagit:      #F7F8F5;  /* kırık beyaz   — bölüm ayrımı */
	--renk-metal:      #8A979D;  /* metal gri     — çizgi, ikincil metin */
	--renk-metin:      #172126;
	--renk-beyaz:      #FFFFFF;

	/* --- Tipografi ------------------------------------------------------- */
	--yazi-baslik: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--yazi-govde:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * Başlıklar: Manrope 800'e kadar çıkabiliyor. Teknik ve güçlü his için
 * 800 kullanılıyor; harf aralığı sıkılaştırılıyor.
 */
h1, h2 { font-weight: 800; letter-spacing: -0.03em; }
h3, h4 { font-weight: 700; }

/* Gövde metni rahat okunmalı — satır yüksekliği çekirdekten biraz yüksek. */
.saha-icerik { line-height: 1.72; }
.saha-icerik > * + * { margin-top: var(--bo-4); }
.saha-icerik h2 { margin-top: var(--bo-7); }
.saha-icerik h3 { margin-top: var(--bo-6); }
.saha-icerik ul, .saha-icerik ol { padding-left: 1.25rem; }
.saha-icerik li + li { margin-top: var(--bo-2); }

/*
 * Bağlantılar gövde metninde altı çizili — mavi tek başına ayırt edici
 * değil (renk körlüğü). Menü ve butonlar bunun dışında.
 */
.saha-icerik a { text-decoration: underline; text-decoration-thickness: 1px; }

/* --- Marka cümlesi ------------------------------------------------------
 * "Akış kesilmesin." güçlü ama seyrek kullanılmalı. Reklam sloganı gibi her
 * bölümde tekrar edilirse etkisini yitirir.
 */
.ustunsu-marka-cumle {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.ustunsu-marka-cumle span { color: var(--renk-vurgu); }

/* --- Akış hattı: marka imzası ------------------------------------------
 * Çekirdek ince bir çizgi + ilerleyen işaret veriyor. Üstün Su'da bu işaret
 * bölüm başlıklarının yanında da kullanılıyor: rota başlıyor hissi.
 */
.ustunsu-bolum-baslik {
	display: flex;
	align-items: center;
	gap: var(--bo-4);
	margin-bottom: var(--bo-5);
}
.ustunsu-bolum-baslik .saha-akis { flex: 1; min-width: 40px; }

/* --- Metal yüzey dokusu -------------------------------------------------
 * Gradient değil: çok düşük kontrastlı, yönlü bir çizgi dokusu. Tanker
 * sacının ışığı kırma hissi. Yalnızca koyu bölümlerde, çok hafif.
 */
.ustunsu-metal {
	position: relative;
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
	isolation: isolate;
}
.ustunsu-metal::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		100deg,
		rgb(255 255 255 / 0.035) 0px,
		rgb(255 255 255 / 0.035) 1px,
		transparent 1px,
		transparent 7px
	);
}

/* --- Ana sayfa hero -----------------------------------------------------
 * AÇIK zemin. Eskisi koyu laciverttı ve sayfaya giriş ağırdı; alt
 * bölümlerdeki koyu CTA'larla birlikte site yoruyordu.
 *
 * Kompozisyon kuralı: iki kolon AYNI YÜKSEKLİKTE. Görsel, metnin yanında
 * ortada asılı kalan küçük bir kutu değil, kolonu baştan sona dolduran
 * eşit ağırlıkta bir öge. Slider YOK — LCP'yi ve dikkati bölüyor.
 */

.u-hero {
	background: #F4F8F8;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

.u-hero__ic {
	display: grid;
	gap: var(--bo-6);
	align-items: center;
}

@media (min-width: 1000px) {
	.u-hero__ic {
		grid-template-columns: 44fr 56fr;
		gap: clamp(var(--bo-6), 4vw, var(--bo-8));
		/* Tam ekran değil: header dışında kontrollü bir yükseklik. */
		min-height: 620px;
	}
}

/*
 * Başlık ölçüsü optik olarak ayarlandı: dar kolonda üç satırı geçmemeli
 * ama hero'nun ağırlık merkezi olmayı sürdürmeli. `--ol-3xl` (64px'e kadar)
 * bu genişlikte dört satıra taşıyordu.
 */
.u-hero h1 {
	font-size: clamp(2.35rem, 3.4vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--renk-koyu);
	text-wrap: balance;
}

/*
 * Üst yazı açık zeminde koyu tonu kullanır. `--renk-vurgu` (#168FB8) küçük
 * puntoda açık buz üzerinde 3.47:1 kalıyor, AA eşiği 4.5:1 (2026-07-28'de
 * ölçüldü). Koyu ton 5.37:1 veriyor.
 */
.u-hero .saha-ustyazi { color: var(--renk-vurgu-koyu); }

.u-hero__giris {
	font-size: var(--ol-lg);
	color: #40545D;
	max-width: 46ch;
	margin-top: var(--bo-4);
}

.u-hero__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3);
	margin-top: var(--bo-6);
}

/* İkincil eylem: dolgu yok, koyu çerçeve. Ana eylemle yarışmıyor. */
.u-hero__eylem .saha-eylem--telefon {
	background: transparent;
	border: 1px solid var(--renk-koyu);
	color: var(--renk-koyu);
}
.u-hero__eylem .saha-eylem--telefon:hover { background: color-mix(in srgb, var(--renk-koyu) 8%, transparent); }

/* WhatsApp üçüncü düğme değil; metin bağlantısı. */
.u-hero__wa { margin-top: var(--bo-4); }
.u-hero__wa .saha-eylem {
	background: transparent;
	border: 0;
	padding: 0;
	min-height: 44px;
	font-size: var(--ol-sm);
	color: var(--renk-vurgu-koyu);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.u-hero__wa .saha-eylem:hover { color: var(--renk-koyu); }

/*
 * Görsel kolonu: yüksekliği metin kolonundan gelir, görsel onu doldurur.
 * `aspect-ratio` yerine `height:100%` — böylece iki kolonun üst ve alt
 * çizgileri gerçekten hizalanıyor.
 */
.u-hero__gorsel { align-self: stretch; display: flex; }
.u-hero__gorsel picture { display: block; width: 100%; }
.u-hero__gorsel img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: var(--yaricap);
	display: block;
}
@media (min-width: 1000px) {
	.u-hero__gorsel img { min-height: 560px; }
}

/* Görsel gelene kadar: stok tanker fotoğrafı yerine markanın kendi işareti. */
.u-hero__yer-tutucu {
	display: grid;
	gap: var(--bo-5);
	place-items: center;
	width: 100%;
	min-height: 360px;
	padding: var(--bo-6);
	border: 1px dashed var(--renk-cizgi);
	border-radius: var(--yaricap);
	color: var(--renk-metal);
}

/* --- Güven şeridi (hero altı) -------------------------------------------
 * Dört madde hero'nun sol kolonunda sıkışıyordu. Tam genişlikte ince bir
 * şeride alındı; hero kısaldı, maddeler okunur oldu.
 */

.u-guven {
	background: var(--renk-beyaz);
	border-block: 1px solid var(--renk-cizgi);
	padding-block: var(--bo-4);
}
.u-guven__liste {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bo-3) var(--bo-5);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-metin);
}
@media (min-width: 900px) {
	.u-guven__liste { grid-template-columns: repeat(4, 1fr); }
	/* İnce ayraçlar — kutu değil, çizgi. */
	.u-guven__liste li + li {
		border-left: 1px solid var(--renk-cizgi);
		padding-left: var(--bo-5);
	}
}
.u-guven__liste li { display: flex; align-items: center; gap: var(--bo-2); }
.u-guven__liste svg { color: var(--renk-vurgu-koyu); flex: none; }

/* --- "Su alana ücretsiz" imkânı ------------------------------------------
 * Sebil ve depo satılan bir hizmet değil; su müşterisine sağlanan imkân.
 * Kart değil, tek satırlık vurgu — abartılmadan ama gözden kaçmadan.
 */

.u-imkan,
.u-tedarik__imkan {
	display: flex;
	align-items: flex-start;
	gap: var(--bo-3);
	margin-top: var(--bo-5);
	padding: var(--bo-4);
	border-radius: var(--yaricap);
	font-size: var(--ol-sm);
	line-height: 1.6;
}
.u-imkan {
	background: var(--renk-buz);
	border-left: 3px solid var(--renk-vurgu-koyu);
}
.u-imkan svg { color: var(--renk-vurgu-koyu); flex: none; margin-top: 2px; }

/* Koyu zeminli düzenli tedarik bölümünde. */
.u-tedarik__imkan {
	background: color-mix(in srgb, #fff 10%, transparent);
	border-left: 3px solid var(--renk-vurgu);
	color: color-mix(in srgb, #fff 88%, transparent);
	max-width: 56ch;
}
.u-tedarik__imkan svg { color: var(--renk-vurgu); flex: none; margin-top: 2px; }

/* --- Hizmet kartı --------------------------------------------------------
 * Kartın tamamı tıklanabilir ama DOM'da tek bağlantı var: `::after` kartı
 * kaplıyor. Böylece ekran okuyucu tek hedef görüyor, klavye tek durakta
 * geziyor ve metin yine seçilebiliyor.
 */

.u-hizmet-kart { position: relative; display: flex; flex-direction: column; }
.u-hizmet-kart__bag::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.u-hizmet-kart:hover { border-color: var(--renk-vurgu-koyu); }

.u-hizmet-kart__oku {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-2);
	margin-top: auto;
	padding-top: var(--bo-4);
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-vurgu-koyu);
}
.u-hizmet-kart__oku svg { transition: translate var(--gecis); }
.u-hizmet-kart:hover .u-hizmet-kart__oku svg { translate: 3px 0; }

@media (prefers-reduced-motion: reduce) {
	.u-hizmet-kart:hover .u-hizmet-kart__oku svg { translate: 0; }
}

/* --- Blog kartı ----------------------------------------------------------
 * Öne çıkan görsel gelene kadar kartı ayıran şey kategori çipi ve okuma
 * süresi. Görsel yüklendiğinde şablondaki dal kendiliğinden devreye girer.
 */

.u-blog-kart__ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bo-2) var(--bo-3);
	margin-bottom: var(--bo-3);
}
.u-blog-kart__etiket {
	display: inline-flex;
	padding: 2px var(--bo-2);
	border-radius: var(--yaricap-sm);
	background: var(--renk-buz);
	color: var(--renk-koyu);
	font-size: var(--ol-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.u-blog-kart__sure { font-size: var(--ol-xs); color: var(--renk-metin-soluk); }

/* --- Hizmet ızgarası altı bağlantıları ---------------------------------- */

.u-hizmet-alt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3) var(--bo-6);
	margin-top: var(--bo-6);
}
.u-hizmet-alt__bag {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-2);
	min-height: 44px;
	font-family: var(--yazi-baslik);
	font-weight: 600;
	color: var(--renk-vurgu-koyu);
}
.u-hizmet-alt__bag:hover { color: var(--renk-koyu); }

/* --- "Nereye su gerekiyorsa" — sektör + görsel şerit birleşik ----------- */

.u-serit--gomulu { display: block; }
.u-nerede__sektor {
	margin-top: var(--bo-7);
	padding-top: var(--bo-6);
	border-top: 1px solid var(--renk-cizgi);
}
.u-nerede__alt-baslik {
	font-size: var(--ol-sm);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--renk-metin-soluk);
	margin-bottom: var(--bo-4);
}

/* --- Neden Üstün Su + kanıt (birleşik) ---------------------------------- */

.u-neden__ic { display: grid; gap: var(--bo-6); align-items: start; }
@media (min-width: 960px) {
	.u-neden__ic { grid-template-columns: 42fr 58fr; gap: clamp(var(--bo-6), 4vw, var(--bo-8)); }
}
.u-neden__gorsel img {
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--yaricap);
	display: block;
}
.u-neden__giris { color: var(--renk-metin-soluk); margin-bottom: var(--bo-5); max-width: 56ch; }

.u-kanit { display: grid; gap: var(--bo-4); margin: 0; }
.u-kanit__satir { display: grid; gap: 2px; }
.u-kanit dt {
	display: flex;
	align-items: center;
	gap: var(--bo-2);
	font-family: var(--yazi-baslik);
	font-weight: 700;
}
.u-kanit dt svg { color: var(--renk-vurgu-koyu); flex: none; }
.u-kanit dd { margin: 0; font-size: var(--ol-sm); color: var(--renk-metin-soluk); }

/*
 * Soyut vaatler artık büyük kart değil; tek satırlık destek metinleri.
 * Altı ayrı kart yerine dört satır — aynı bilgi, üçte bir yer.
 */
.u-neden__destek {
	list-style: none;
	padding: 0;
	margin: var(--bo-6) 0 0;
	display: grid;
	gap: var(--bo-2);
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
	border-top: 1px solid var(--renk-cizgi);
	padding-top: var(--bo-5);
}
.u-neden__destek li { position: relative; padding-left: 1.2rem; }
.u-neden__destek li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.65em;
	width: 8px; height: 2px;
	background: var(--renk-vurgu-koyu);
}
.u-neden__belge { margin-top: var(--bo-5); font-weight: 600; }
.u-neden__belge a { display: inline-flex; align-items: center; gap: var(--bo-2); color: var(--renk-vurgu-koyu); }

/* --- Sektör listesi ------------------------------------------------------ */

.u-sektor-liste {
	display: grid;
	gap: var(--bo-2);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.u-sektor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-3);
	min-height: 56px;
	padding: var(--bo-3) var(--bo-4);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	font-family: var(--yazi-baslik);
	font-weight: 600;
	color: var(--renk-metin);
	text-decoration: none;
	transition: border-color var(--gecis), color var(--gecis);
}
.u-sektor:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
.u-sektor svg { color: var(--renk-metal); }
.u-sektor:hover svg { color: var(--renk-vurgu); }

/* --- Bölge listesi ------------------------------------------------------- */

.u-bolge-liste { display: flex; flex-wrap: wrap; gap: var(--bo-2); }
.u-bolge {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-2);
	min-height: 44px;
	padding: var(--bo-2) var(--bo-4);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-metin);
	text-decoration: none;
	transition: border-color var(--gecis), color var(--gecis);
}
.u-bolge:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
.u-bolge svg { color: var(--renk-metal); }

/* --- Kompakt süreç zaman çizgisi ----------------------------------------
 * Beş büyük kart yerine beş eşit adım. Masaüstünde yatay, mobilde dikey.
 * Adımları bağlayan ince çizgi markanın "akış hattı" işaretinin işlevsel
 * hâli — dekoratif değil, sırayı gösteriyor.
 */

.u-surec {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--bo-5);
	counter-reset: adim;
}
@media (min-width: 860px) {
	.u-surec { grid-template-columns: repeat(5, 1fr); gap: var(--bo-4); }
}

.u-surec__adim { position: relative; padding-top: var(--bo-5); }

/* Yatay bağlantı çizgisi — son adımdan sonra devam etmiyor. */
@media (min-width: 860px) {
	.u-surec__adim::before {
		content: '';
		position: absolute;
		top: 15px;
		left: 32px;
		right: calc(-1 * var(--bo-4));
		height: 1px;
		background: var(--renk-cizgi);
	}
	.u-surec__adim:last-child::before { display: none; }
}

.u-surec__no {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
	font-family: var(--yazi-baslik);
	font-size: var(--ol-xs);
	font-weight: 700;
}

.u-surec__baslik {
	display: flex;
	align-items: center;
	gap: var(--bo-2);
	font-size: var(--ol-md);
	margin-top: var(--bo-3);
}
.u-surec__baslik svg { color: var(--renk-vurgu-koyu); flex: none; }
.u-surec__adim p {
	margin-top: var(--bo-2);
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
}

/* Mobilde dikey çizgi. */
@media (max-width: 859px) {
	.u-surec__adim { padding-left: 44px; padding-top: 0; }
	.u-surec__no { top: 2px; }
	.u-surec__adim:not(:last-child)::before {
		content: '';
		position: absolute;
		left: 15px;
		top: 34px;
		bottom: calc(-1 * var(--bo-5));
		width: 1px;
		background: var(--renk-cizgi);
	}
	.u-surec__baslik { margin-top: 0; }
}

/* --- Kart ikonu ---------------------------------------------------------- */

.u-kart__ikon { color: var(--renk-vurgu); }

/* --- Kurumsal tedarik şeridi --------------------------------------------- */

.u-kurumsal {
	display: grid;
	gap: var(--bo-6);
	align-items: center;
}
@media (min-width: 900px) {
	.u-kurumsal { grid-template-columns: 1.4fr 1fr; }
}
.u-kurumsal h2 { margin-block: var(--bo-2) var(--bo-3); }
.u-kurumsal p { color: color-mix(in srgb, #fff 76%, transparent); max-width: 56ch; }
.u-kurumsal__eylem { display: flex; flex-wrap: wrap; gap: var(--bo-3); margin-top: var(--bo-6); }

/*
 * Görsel arka plan DEĞİL, yan kolon. Arka plana konup üstüne koyu overlay
 * çekilseydi gerçek operasyon kaybolur, metnin kontrastı da riske girerdi.
 * Mobilde tamamen gizleniyor: orada dekoratif kalıyor ve bölümü uzatıyor.
 */
.u-tedarik__gorsel { display: none; }
@media (min-width: 900px) {
	.u-tedarik__gorsel { display: block; }
	.u-tedarik__gorsel img {
		width: 100%;
		height: 100%;
		max-height: 340px;
		object-fit: cover;
		border-radius: var(--yaricap);
		display: block;
	}
}
.u-kurumsal__eylem .saha-eylem--telefon {
	background: transparent;
	color: #fff;
	border-color: color-mix(in srgb, #fff 30%, transparent);
}

/* --- Yorum --------------------------------------------------------------- */

.u-yorum {
	display: grid;
	gap: var(--bo-4);
	margin: 0;
	padding: var(--bo-5);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-left: 3px solid var(--renk-vurgu);
	border-radius: var(--yaricap);
}
.u-yorum p { font-size: var(--ol-lg); line-height: 1.55; }
.u-yorum footer { display: grid; gap: 2px; font-size: var(--ol-sm); }
.u-yorum footer span { color: var(--renk-metin-soluk); font-size: var(--ol-xs); }

/* --- Örnek dezenfeksiyon formu ------------------------------------------
 * Kağıt formun boş hâlinin yeniden üretimi. Gerçek belge yayımlanmaz
 * (müşteri unvanı, vergi no ve iki ıslak imza taşıyor).
 * Tamamı dekoratif: aria-hidden, tek erişilebilir açıklama dışarıda.
 */

.u-ornek-form { margin: 0; }

.u-ornek-form__kagit {
	position: relative;
	max-width: 560px;
	padding: var(--bo-5);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	box-shadow: var(--golge-1);
	font-size: 0.75rem;
	line-height: 1.5;
	overflow: hidden;
}

.u-ornek-form__damga {
	position: absolute;
	top: 42%;
	left: 50%;
	translate: -50% -50%;
	rotate: -18deg;
	font-family: var(--yazi-baslik);
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	font-weight: 800;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--renk-vurgu) 12%, transparent);
	pointer-events: none;
	user-select: none;
}

.u-ornek-form__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-4);
	padding-bottom: var(--bo-3);
}
.u-ornek-form__ust img { max-height: 34px; width: auto; }
.u-ornek-form__sira { color: var(--renk-metin-soluk); }
.u-ornek-form__sira b { color: var(--renk-metal); letter-spacing: 0.08em; }

.u-ornek-form__baslik {
	margin: var(--bo-3) auto var(--bo-4);
	width: fit-content;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--renk-metin);
	font-family: var(--yazi-baslik);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.u-ornek-form__blok { display: grid; gap: var(--bo-3); }
.u-ornek-form__satir { display: grid; gap: var(--bo-3); grid-template-columns: 1.4fr 1fr; }
.u-ornek-form__alan { display: grid; gap: 2px; }
.u-ornek-form__alan i { font-style: normal; color: var(--renk-metin-soluk); font-size: 0.6875rem; }
.u-ornek-form__alan u,
.u-ornek-form__cizgiler u,
.u-ornek-form__imza u {
	display: block;
	height: 1px;
	background: var(--renk-cizgi);
	text-decoration: none;
}

.u-ornek-form__bolum {
	margin: var(--bo-5) 0 var(--bo-3);
	font-family: var(--yazi-baslik);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--renk-cizgi);
	padding-bottom: var(--bo-2);
}

.u-ornek-form__depo { display: grid; gap: var(--bo-3); margin: 0; }
.u-ornek-form__depo > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--bo-3); align-items: center; }
.u-ornek-form__depo dt { color: var(--renk-metin-soluk); }
.u-ornek-form__depo dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--bo-3); align-items: center; }
.u-ornek-form__depo label { display: inline-flex; align-items: center; gap: 0.35rem; }

.u-ornek-form__kutu {
	display: inline-block;
	width: 15px; height: 15px;
	border: 1px solid var(--renk-metal);
	flex: none;
}

.u-ornek-form__cizgiler { display: grid; gap: var(--bo-4); padding-block: var(--bo-2); }

.u-ornek-form__imza {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bo-5);
	margin-top: var(--bo-6);
}
.u-ornek-form__imza span { display: grid; gap: 4px; }
.u-ornek-form__imza u { margin-top: var(--bo-6); }
.u-ornek-form__imza i { font-style: normal; font-weight: 600; font-size: 0.6875rem; }

.u-ornek-form__dipnot {
	margin-top: var(--bo-5);
	padding-top: var(--bo-3);
	border-top: 1px solid var(--renk-cizgi);
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--renk-metin-soluk);
}

.u-ornek-form__aciklama {
	margin-top: var(--bo-3);
	max-width: 560px;
	font-size: var(--ol-xs);
	color: var(--renk-metin-soluk);
}

@media (max-width: 520px) {
	.u-ornek-form__satir,
	.u-ornek-form__depo > div,
	.u-ornek-form__imza { grid-template-columns: 1fr; }
}

/* --- Hizmet şeridi (altbilgi üstü) --------------------------------------
 * Canlı sitedeki beş bölümlü slider'ın karşılığı. Dönen slider değil: beşi
 * de aynı anda görünen bir ızgara. Böylece otomatik hareket, gizli içerik ve
 * dokunmatik kaydırma tuzağı yok; her kart klavyeyle de sırayla geziliyor.
 *
 * Yatay kaydırmalı şerit BİLEREK kullanılmadı — mobilde gövdeyi taşırma
 * riski taşıyor (tarayıcı testinde denetlenen bir madde).
 */

.u-serit__liste {
	display: grid;
	gap: var(--bo-4);
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 700px)  { .u-serit__liste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .u-serit__liste { grid-template-columns: repeat(5, 1fr); } }

.u-serit__kart {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	overflow: hidden;
	color: var(--renk-metin);
	text-decoration: none;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.u-serit__kart:hover { border-color: var(--renk-vurgu); box-shadow: var(--golge-1); }

/*
 * Görseller canlıdan geldiği için oranları eşit değil (700×460 ve 460×460
 * karışık). Kutu oranı burada sabitleniyor, görsel kırpılarak yerleşiyor —
 * kutu boyutu CSS'ten geldiği için düzen kayması (CLS) olmuyor.
 */
.u-serit__gorsel {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--renk-buz);
}
.u-serit__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: scale var(--gecis);
}
.u-serit__kart:hover .u-serit__gorsel img { scale: 1.04; }

.u-serit__metin {
	display: flex;
	flex-direction: column;
	gap: var(--bo-2);
	flex: 1;
	padding: var(--bo-4);
}

/*
 * Beyaz kart üzerinde --renk-vurgu (#168FB8) küçük punto için 3.71:1 kalıyor,
 * WCAG AA eşiği 4.5:1. Koyu tonu (#0F7396) 5.37:1 veriyor — şeritteki küçük
 * metinler bu yüzden koyu tonu kullanıyor. (Koyu zeminde durum tersi, orada
 * açık ton doğru; bu yüzden değişken global olarak ezilmedi.)
 */
.u-serit__kart .saha-ustyazi { color: var(--renk-vurgu-koyu); }

.u-serit__baslik {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-md);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* "Devamını oku" kartın altına yaslanır — kart yükseklikleri farklı olsa da
 * satır hizası bozulmaz. */
.u-serit__oku {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-2);
	margin-top: auto;
	padding-top: var(--bo-2);
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-vurgu-koyu);
}
.u-serit__oku svg { transition: translate var(--gecis); }
.u-serit__kart:hover .u-serit__oku svg { translate: 3px 0; }

@media (prefers-reduced-motion: reduce) {
	.u-serit__kart:hover .u-serit__gorsel img { scale: 1; }
	.u-serit__kart:hover .u-serit__oku svg { translate: 0; }
}

/* --- Hizmete özel modüller ----------------------------------------------
 * Her hizmet sayfası aynı ritmi tekrarlamasın diye eklenen tek modül.
 * Ortak kabuk burada; içerik farkı bileşenin kendisinde.
 */

.u-modul { border-top: 1px solid var(--renk-cizgi); padding-top: var(--bo-6); }
.u-modul__not {
	margin-top: var(--bo-4);
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
}
.u-modul__eylem { margin-top: var(--bo-5); }

/* İkmal planı — "aramadan önce bunlar hazır olsun" */
.u-plan { display: grid; gap: var(--bo-3); margin: var(--bo-5) 0 0; }
.u-plan__satir {
	display: grid;
	gap: var(--bo-1);
	padding: var(--bo-4);
	background: var(--renk-kagit);
	border-left: 3px solid var(--renk-vurgu-koyu);
	border-radius: 0 var(--yaricap) var(--yaricap) 0;
}
.u-plan dt {
	display: flex;
	align-items: center;
	gap: var(--bo-2);
	font-family: var(--yazi-baslik);
	font-weight: 700;
}
.u-plan dt svg { color: var(--renk-vurgu-koyu); flex: none; }
.u-plan dd { margin: 0; color: var(--renk-metin-soluk); font-size: var(--ol-sm); }

/* Havuz hacmi hesaplayıcı */
.u-hesap {
	margin-top: var(--bo-5);
	padding: var(--bo-5);
	background: var(--renk-buz);
	border-radius: var(--yaricap);
}
.u-hesap__girisler {
	display: grid;
	gap: var(--bo-4);
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.u-hesap__alan label {
	display: block;
	font-family: var(--yazi-baslik);
	font-size: var(--ol-sm);
	font-weight: 600;
	margin-bottom: var(--bo-2);
}
.u-hesap__alan input {
	width: 100%;
	padding: var(--bo-3);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	background: var(--renk-beyaz);
	color: var(--renk-metin);
	font-size: var(--ol-md);
}
.u-hesap__sonuc {
	display: block;
	margin-top: var(--bo-5);
	padding: var(--bo-4);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
}
.u-hesap__sonuc--dolu {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--renk-metin);
	border-color: var(--renk-vurgu-koyu);
}
.u-hesap__not {
	margin-top: var(--bo-3);
	font-size: var(--ol-xs);
	color: var(--renk-metin-soluk);
}
.u-hesap [data-havuz-aktar] { margin-top: var(--bo-4); }

/* İçme / kullanma suyu ayrımı */
.u-ayrim {
	display: grid;
	gap: var(--bo-4);
	margin-top: var(--bo-5);
}
@media (min-width: 760px) {
	.u-ayrim { grid-template-columns: 1fr 1fr; }
}
.u-ayrim__kutu {
	padding: var(--bo-5);
	border-radius: var(--yaricap);
	border: 1px solid var(--renk-cizgi);
}
.u-ayrim__kutu h3 { font-size: var(--ol-lg); margin-bottom: var(--bo-3); }
.u-ayrim__kutu--olur { background: var(--renk-kagit); }
.u-ayrim__kutu--olmaz { background: #fdf3f2; border-color: #e6c9c6; }

/*
 * Olumsuz liste onay işareti KULLANMAZ — "yapılabilir" listesiyle aynı
 * görünürse yanlış okunur. Çizgi işareti kullanılıyor.
 */
.u-ayrim__liste { list-style: none; padding: 0; display: grid; gap: var(--bo-2); }
.u-ayrim__liste li { position: relative; padding-left: 1.5rem; }
.u-ayrim__liste li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.7em;
	width: 12px; height: 2px;
	background: #a4322a;
}

/* --- Kanıt ve güven ------------------------------------------------------ */

.u-kanit__kart {
	display: grid;
	gap: var(--bo-2);
	align-content: start;
	padding: var(--bo-5);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.u-kanit__ikon { color: var(--renk-vurgu-koyu); }
.u-kanit__baslik { font-size: var(--ol-md); font-weight: 700; }
.u-kanit__metin { font-size: var(--ol-sm); color: var(--renk-metin-soluk); }

.u-kanit__belgeler {
	margin-top: var(--bo-6);
	padding: var(--bo-5);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.u-kanit__belgeler h3 { font-size: var(--ol-lg); margin-bottom: var(--bo-3); }
.u-kanit__alt { margin-top: var(--bo-5); font-size: var(--ol-sm); }

/* --- Sahadan uygulama kartı ---------------------------------------------- */

.u-saha-kart__satir {
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
	margin-top: var(--bo-2);
}
.u-saha-kart__satir strong { color: var(--renk-metin); }
.u-saha-kart__tarih {
	margin-top: var(--bo-3);
	font-size: var(--ol-xs);
	color: var(--renk-metin-soluk);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- Araç kartı ---------------------------------------------------------- */

.u-arac-kart__teknik {
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
	margin-top: var(--bo-2);
}
.u-arac-kart__kullanim {
	font-size: var(--ol-xs);
	color: var(--renk-metin-soluk);
	margin-top: var(--bo-2);
}

/* --- Vitrin (yalnızca geliştirme) --------------------------------------- */

.vitrin-blok + .vitrin-blok { margin-top: var(--bo-8); }

.vitrin-renkler {
	display: grid;
	gap: var(--bo-3);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.vitrin-renk {
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	overflow: hidden;
	font-size: var(--ol-xs);
}
.vitrin-renk__ornek { height: 76px; }
.vitrin-renk__ad {
	padding: var(--bo-2) var(--bo-3);
	display: grid;
	gap: 2px;
}
.vitrin-renk__ad code {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	color: var(--renk-metin-soluk);
}
.vitrin-renk__not { color: var(--renk-metin-soluk); }

.vitrin-satir {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3);
	align-items: center;
}

.vitrin-olcek > * { margin-bottom: var(--bo-3); }
.vitrin-olcek small {
	display: block;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.75rem;
	color: var(--renk-metal);
	font-weight: 400;
	letter-spacing: 0;
}