/*
 * Ü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 -----------------------------------------------------
 * Slider YOK. Brief: "tek güçlü görsel veya kısa optimize video daha
 * doğruysa onu kullan". Slider hem LCP'yi hem dikkati bölüyor.
 */

.u-hero { padding-block: clamp(3rem, 8vw, 6rem); }
.u-hero__ic {
	display: grid;
	gap: var(--bo-7);
	align-items: center;
}
@media (min-width: 900px) {
	.u-hero__ic { grid-template-columns: 1.05fr 0.95fr; }
}
.u-hero__giris {
	font-size: var(--ol-lg);
	color: color-mix(in srgb, #fff 78%, transparent);
	max-width: 52ch;
	margin-top: var(--bo-4);
}
.u-hero__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3);
	margin-top: var(--bo-6);
}
.u-hero__eylem .saha-eylem--telefon {
	background: transparent;
	border-color: color-mix(in srgb, #fff 30%, transparent);
	color: #fff;
}
.u-hero__eylem .saha-eylem--telefon:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.u-hero__eylem .saha-eylem--whatsapp { color: #fff; border-color: color-mix(in srgb, #fff 30%, transparent); }

.u-hero__sinyal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3) var(--bo-5);
	list-style: none;
	padding: 0;
	margin-top: var(--bo-6);
	font-size: var(--ol-sm);
	color: color-mix(in srgb, #fff 72%, transparent);
}
.u-hero__sinyal li { display: flex; align-items: center; gap: var(--bo-2); }
.u-hero__sinyal svg { color: var(--renk-vurgu); }

.u-hero__gorsel img { border-radius: var(--yaricap); }

/* 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;
	aspect-ratio: 4 / 3;
	padding: var(--bo-6);
	border: 1px dashed color-mix(in srgb, #fff 26%, transparent);
	border-radius: var(--yaricap);
	color: color-mix(in srgb, #fff 40%, transparent);
}
.u-hero__yer-tutucu .saha-akis { width: 100%; }

/* --- 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); }

/* --- Süreç adımı ikonu --------------------------------------------------- */

.u-surec__ikon {
	display: inline-flex;
	vertical-align: -0.15em;
	margin-right: 0.4em;
	color: var(--renk-vurgu);
}

/* --- 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); }
.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-metal); 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; }
}

/* --- 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;
}