/*
 * Temel teknik taban stilleri + masaüstü header (Sprint 01 + Header Reset).
 *
 * Bu dosyanın üst kısmı yalnızca erişilebilirlik ve düzen güvenliği için
 * gereken teknik kuralları içerir. Alt kısımda YALNIZCA header/üst bilgi
 * şeridi için XD kaynaklı ölçü ve renkler uygulanmıştır (bkz.
 * references/qa/sprint-01-report.md). Hero/kart/footer/sidebar tasarımı ve
 * mobil/tablet breakpoint kuralları bu dosyada YOKTUR; bunlar ayrı
 * sprintlerde eklenecektir. Bu sprint yalnızca masaüstü genişlikleri
 * hedefler: 1920px'te (ve üzerinde) XD native geometri birebir uygulanır;
 * 1366-1600px aralığında ("medium desktop") aynı geometri, --abn-scale
 * değişkeni üzerinden 1920 tasarım oranlarından kontrollü biçimde
 * küçültülür (bkz. references/qa/sprint-01-header-reset-report.md).
 */

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

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Erişilebilirlik: yalnızca ekran okuyucular için görünür metin. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip link: yalnızca klavye odağı aldığında görünür olur. */
.skip-link {
	left: -9999px;
	position: absolute;
	top: 0;
	z-index: 100000;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	left: 6px;
	overflow: visible;
	top: 6px;
	width: auto;
}

/* ==========================================================================
   Masaüstü Header — Sprint 01
   XD kaynağı: references/qa/sprint-01-report.md (kanıt düzeyleri orada kayıtlı)
   ========================================================================== */

:root {
	--abn-color-primary: #0e3975;
	--abn-color-primary-dark: #08234b;
	--abn-color-text: #000000;
	--abn-color-icon: #333333;
	--abn-color-utility-bg: #fafafa;
	--abn-color-divider: #e3e3e3;
	--abn-color-white: #ffffff;

	/* Native masaüstü hedefi 1920px'tir (XD artboard genişliği). Medium
	   desktop alt sınırı 1366px'tir (bkz. header reset raporu, madde 8).
	   --abn-scale, 1366px'te 1366/1920=0.7115'e iner, 1920px ve üzerinde
	   tam 1'de kilitlenir (üstüne ÇIKMAZ — 1920 üzerinde büyüme yoktur,
	   bkz. sprint-01-revision-02.md madde 0). Bu, header'ın TAMAMINA
	   `transform:scale()` uygulamak yerine gerçek genişlik/yükseklik/
	   font-size değerlerini oranla küçültür; böylece layout, metin
	   satır kırılması ve hit-testing gerçek (transform olmayan) kutu
	   üzerinden hesaplanır. */
	--abn-scale: clamp(0.7115, calc(100vw / 1920px), 1);

	--abn-container-width: calc(1410px * var(--abn-scale));
	--abn-space-header-gap: calc(40px * var(--abn-scale));

	/* Font ailesi XD'de doğrulandı (Roboto); font dosyası kaynaklarda
	   bulunamadı, bu nedenle indirilmedi/kopyalanmadı. Sistemde Roboto
	   kuruluysa kullanılır, aksi hâlde güvenli fallback yığınına düşer
	   (bkz. sprint-01-report.md "Font sınırlaması"). */
	--abn-font-base: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-header {
	background-color: var(--abn-color-white);
	position: relative;
}

/* Anasayfa'da (is_front_page + is_home => body.home) XD'de bölücü çizgi
   yoktu; diğer üç sayfada 1px #E3E3E3 çizgi vardı (XD exact, bkz. rapor). */
body:not(.home) .site-header {
	border-bottom: 1px solid var(--abn-color-divider);
}

/* header.php'nin açtığı #site-content sarmalayıcısının kendi margin'i
   0'dır, ancak içindeki ilk elemanın (ör. boş içerik durumunda
   template-parts/content-none.php'deki <h1>) varsayılan tarayıcı üst
   margin'i, aralarında padding/border olmayan iç içe blok kutular
   üzerinden #site-content'in DIŞINA "collapse" eder ve header'ın hemen
   altında tasarımda olmayan ekstra bir boşluk oluşturur (ölçülen: ~21px).
   `display: flow-root`, #site-content'i yeni bir Block Formatting Context
   yaparak bu collapse'i teknik olarak engeller; header.php'ye veya
   main/hero içeriğine dokunulmaz, main içeriğin kendi görünümü değişmez. */
#site-content {
	display: flow-root;
}

.utility-bar {
	background-color: var(--abn-color-utility-bg);
	height: calc(50px * var(--abn-scale));
}

.utility-bar__inner {
	/* Blok seviyeli div zaten varsayılan olarak kullanılabilir genişliği
	   doldurur; ekstra `width:100%` teknik olarak gerekli değildir ve
	   görsel sonucu değiştirmez (bu satır Sprint 01 Revizyon 02'de eklenip
	   Revizyon 03'te, hiçbir görsel etkisi olmadığı için geri alınmıştır).
	   `max-width:1410px + margin-inline:auto`, yalnızca tam 1920px
	   viewport'ta 255px kenar üretir; bu XD graphicContent verisiyle ve
	   references/rendered/01-home-desktop-1920.png üzerindeki bağımsız
	   piksel analiziyle doğrulanmıştır (bkz. sprint-01-revision-02.md). */
	max-width: var(--abn-container-width);
	height: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24px * var(--abn-scale));
}

.utility-bar__item {
	display: inline-flex;
	align-items: center;
	gap: calc(5px * var(--abn-scale));
	color: var(--abn-color-icon);
	font-family: var(--abn-font-base);
	font-size: calc(16px * var(--abn-scale));
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/* Roboto sistemde kurulu değil; genel `--abn-font-base` fallback yığını
   (Helvetica Neue/Arial) aynı font-weight:400 değerinde Roboto Regular'dan
   gözle görülür biçimde daha kalın render ediliyor (bkz.
   sprint-01-topbar-weight-final.md). Bu, yalnızca utility bar/topbar
   kapsamıyla sınırlı, kasıtlı bir font-zinciri override'ıdır — nav, CTA,
   logo, ARKONLINE bundan etkilenmez. `font-synthesis:none`, tarayıcının
   font dosyasında olmayan bir "bold" varyantını yapay olarak
   kalınlaştırmasını engeller. `!important`, yalnızca bu topbar kapsamlı
   selector'da, daha üst/genel bir kuraldan sızabilecek kalınlığı
   engellemek için kullanılmıştır.
   Revizyon 01 (references/qa/sprint-02-revision-01.md): kullanıcı görsel
   QA'sında topbar hâlâ gereğinden kalın görünüyordu. `-apple-system`/
   `BlinkMacSystemFont` (macOS sistem fontu, indirilmedi/kopyalanmadı —
   yalnızca standart CSS font-family adı) "Helvetica Neue"'den önce
   önceliklendirildi ve `-webkit-font-smoothing`/`-moz-osx-font-smoothing`
   eklendi; bu, yalnızca render/antialiasing kalitesini etkiler, sayısal
   `font-weight` değerini (400) değiştirmez. */
.utility-bar,
.utility-bar__item,
.utility-bar__item span,
a.utility-bar__item,
.utility-bar__text {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400 !important;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.utility-bar__item--phone {
	gap: calc(3px * var(--abn-scale));
}

a.utility-bar__item:hover,
a.utility-bar__item:focus-visible {
	color: var(--abn-color-primary);
}

.utility-bar__icon {
	display: inline-flex;
	line-height: 0;
}

.utility-bar__icon svg {
	display: block;
	width: calc(17px * var(--abn-scale));
	height: calc(20px * var(--abn-scale));
	color: var(--abn-color-icon);
}

/* Revizyon 05 — kullanıcı kararı: masaüstü kabul edilen düzene dönüldü.
   Konum solda, e-posta+telefon SAĞ TARAFTA ortak bir iletişim grubu
   (`.utility-bar__contact`, gerçek `display:flex` kutusu) olarak kalır;
   `.utility-bar__inner`'ın `justify-content:space-between`'i (yukarıda)
   iki grubu (konum / iletişim grubu) satırın uçlarına yaslar. E-posta
   ARTIK merkezde değildir — grup içinde telefonun solunda. Revizyon
   03/04'teki grid/`1fr auto 1fr`/`justify-self` deseni ve görünmez
   "ayna" öğesi (header.php'den de kaldırıldı) tamamen terk edildi. */
.utility-bar__contact {
	display: flex;
	align-items: center;
	gap: var(--abn-space-header-gap);
}

.site-header__row {
	/* Aynı container deseni utility bar ile paylaşılır (bkz. yukarıdaki not). */
	max-width: var(--abn-container-width);
	height: calc(130px * var(--abn-scale));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24px * var(--abn-scale));
}

.site-header__branding {
	display: flex;
	align-items: center;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
}

.site-header__logo {
	display: block;
	width: auto;
	height: calc(25px * var(--abn-scale));
}

.site-header__site-title {
	font-family: var(--abn-font-base);
	font-weight: 700;
	font-size: calc(20px * var(--abn-scale));
	color: var(--abn-color-primary);
	text-decoration: none;
}

.site-header__nav-cluster {
	display: flex;
	align-items: center;
	gap: var(--abn-space-header-gap);
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--abn-space-header-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Revizyon 01: nav ağırlığı (600, XD "Roboto SemiBold" ile aynı — bkz.
   sprint-01-report.md) DEĞİŞMEDİ; yalnızca render kalitesi düzeltildi.
   Helvetica Neue'nin gerçek bir SemiBold ustası yok, bu da tarayıcının
   600'ü Regular (400) ile Bold (700) arasında sentetik biçimde
   kalınlaştırarak render etmesine (gereğinden kalın görünüme) yol
   açıyordu. `font-synthesis:none` bu sentetik kalınlaştırmayı engeller;
   `-apple-system`/`BlinkMacSystemFont`, Roboto'ya daha yakın gerçek ara
   ağırlık masterlarına sahip olduğu için önceliklendirildi. */
.primary-navigation a {
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, var(--abn-font-base);
	font-weight: 600;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: calc(16px * var(--abn-scale));
	line-height: 1;
	color: var(--abn-color-text);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
	color: var(--abn-color-primary);
}

/* current-menu-item: XD'de bir "active" görsel karşılığı doğrulanmadı
   (bkz. sprint-01-report.md). Onaylanan karar gereği (10-approved-decisions.md
   §4.7) marka rengi TEK BAŞINA yeterli sayılmadı; alt çizgi ikinci bir
   görsel işaret olarak eklendi. */
.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-ancestor > a {
	color: var(--abn-color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--abn-space-header-gap);
}

/* Revizyon 01: CTA ağırlığı (600, XD "Roboto SemiBold" ile aynı) DEĞİŞMEDİ;
   nav ile aynı gerekçeyle (yukarı bakınız) yalnızca render kalitesi
   düzeltildi. */
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(125px * var(--abn-scale));
	height: calc(50px * var(--abn-scale));
	border: 2px solid transparent;
	border-radius: calc(30px * var(--abn-scale));
	background-color: var(--abn-color-primary);
	color: var(--abn-color-white);
	font-family: -apple-system, BlinkMacSystemFont, var(--abn-font-base);
	font-weight: 600;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: calc(16px * var(--abn-scale));
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/* Header zemini beyaz olduğu için buton hoverda salt beyaz zemin görünmez
   olurdu; footer sosyal ikon hover deseniyle aynı mantık: beyaz zemin +
   birincil renk kenarlık/metin, geometri sabit (border her zaman 2px,
   yalnızca rengi değişiyor). */
.header-cta:hover,
.header-cta:focus-visible {
	background-color: var(--abn-color-white);
	border-color: var(--abn-color-primary);
	color: var(--abn-color-primary);
}

.site-header__badge-link {
	display: inline-flex;
	align-items: center;
}

.site-header__badge {
	display: block;
	width: auto;
	height: calc(40px * var(--abn-scale));
}

/* Erişilebilir, geometriyi kaydırmayan odak göstergesi. */
.primary-navigation a:focus-visible,
.header-cta:focus-visible,
.site-header__logo-link:focus-visible,
.site-header__badge-link:focus-visible,
.utility-bar__item:focus-visible {
	outline: 2px solid var(--abn-color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive — Sprint 08 (Tablet/Mobil)

   Kaynaklarda doğrulanmış tablet/mobil tasarım bulunmamaktadır (bkz.
   references/discovery/09-responsive-and-open-items.md). Yukarıdaki
   masaüstü (1366-1920, --abn-scale sistemi) kuralları bu bölümde
   YENİDEN YAZILMAZ; yalnızca dosyanın SONUNA açık @media blokları
   eklenir. --abn-scale bilerek burada KULLANILMAZ — 0.7115 tabanında
   kilitli olup mobil için tasarlanmadı (1024px altında sabit kalır,
   ekranla orantılı küçülmez); bu bölümdeki tüm ölçüler bağımsız sabit
   px/clamp() değerleridir (bkz. sprint-08-report.md, "Breakpoint
   yaklaşımı"). Kesin ayrıntılar için sprint-08-report.md.
   ========================================================================== */

:root {
	--abn-gutter: 32px;
}

/* Mobil menü butonu: varsayılan olarak HER ZAMAN gizli. Yalnızca aşağıdaki
   ≤1024px bloğunda, `<html>` üzerinde `abn-js-menu` sınıfı varken (JS
   çalışıyorken) görünür kılınır — bkz. header.php'deki senkron inline
   script notu. JS kapalıysa buton hiç görünmez ve `.site-header__nav-cluster`
   aşağıdaki "progressive baseline" kuralları sayesinde zaten her zaman
   açık/erişilebilir kalır. */
.mobile-menu-toggle {
	display: none;
}

@media (max-width: 1024px) {
	:root {
		--abn-gutter: 32px;
	}

	.utility-bar__inner,
	.site-header__row {
		max-width: 100%;
		padding-inline: var(--abn-gutter);
	}

	/* Revizyon 06 — kullanıcı kararı: üst satır (logo+kapatma butonu)
	   90px'ten kompaktlaştırıldı; hedef 72-84px bandı. */
	.site-header__row {
		position: relative;
		height: auto;
		min-height: 78px;
		padding-block: 12px;
		flex-wrap: wrap;
	}

	/* Revizyon 01 — kullanıcı kararı: Sprint 08'deki `height:20px` (yalnızca
	   ≤480'de) tanımı, bu logonun çok yassı en-boy oranı (411:25 ≈
	   16.44:1) yüzünden width'i 328px'e çıkarıyor ve 320-390px'te
	   `#mobile-menu-toggle` ile aynı satıra sığmayıp satır kaydırıyordu
	   (gerçek ölçümle doğrulandı). `width` üzerinden `clamp()` ile
	   kontrol edilerek hem 320px'de görünür biçimde büyük (min 180px, "170
	   -185px altına düşmemeli" hedefiyle uyumlu) hem de HİÇBİR mobil/
	   tablet genişlikte toggle ile çakışmayacak/satır kaydırmayacak kadar
	   sınırlı (max 250px) kalır. `height:auto` oranı korur. */
	.site-header__logo {
		width: clamp(180px, 55vw, 250px);
		height: auto;
	}

	html.abn-js-menu .mobile-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		background: none;
		flex-shrink: 0;
		cursor: pointer;
	}

	.mobile-menu-toggle__icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 16px;
	}

	.mobile-menu-toggle__bar {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 1px;
		background-color: var(--abn-color-primary);
		transition: transform 200ms ease, opacity 200ms ease;
	}

	.mobile-menu-toggle__bar + .mobile-menu-toggle__bar {
		margin-top: 5px;
	}

	/* Hamburger → X animasyonu, tek kaynak: butonun `aria-expanded`
	   özniteliği (bkz. header.php ve mobile-menu.js). */
	#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	#mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.mobile-menu-toggle:focus-visible {
		outline: 2px solid var(--abn-color-primary);
		outline-offset: 2px;
	}

	/* Progressive baseline: JS yok/henüz hazır değilken panel normal
	   akışta, HER ZAMAN görünür — menü hiçbir durumda tamamen erişilemez
	   olmaz (bkz. header.php notu). */
	/* Revizyon 09 (canlı QA kararı, iki adım) — kullanıcı Rev06'nın kabul
	   ettiği panel/menü ölçülerini bu turda yine "haddinden fazla büyük"
	   buldu. Rev06'nın kendi rakamları (18px/47px link, 49px CTA, 18/20px
	   panel iç boşluk, 128px ARKONLINE → toplam panel 393.95px, bkz.
	   sprint-08-revision-06.md §7) önce bir adım küçültüldü (link 16px/42px,
	   CTA 44px/16px, panel ~340px), ardından kullanıcı "biraz daha küçült"
	   dediği için İKİNCİ bir adımda tekrar küçültüldü — dokunma hedefleri
	   (link 39px, CTA 40px) WCAG 2.5.8 24×24px alt sınırının hâlâ rahatça
	   üzerinde, sadece Rev06'nın 44-49px "büyük dokunma alanı" hedefinden
	   vazgeçildi (kullanıcı bu turda açıkça daha kompaktı tercih etti).
	   Final: link `18px/47px`→`15px/39px`, cluster gap `14px`→`8px`,
	   actions padding `18/20px`→`12/14px`, actions gap `18px`→`12px`, CTA
	   `49px/17px`→`40px/15px`, ARKONLINE `128px`→`92px`, panel padding
	   `18/20px`→`14/16px` (bkz. sprint-08-revision-09.md). */
	.site-header__nav-cluster {
		flex-basis: 100%;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-top: 10px;
	}

	/* Menü linkleri: font-size 15px/700 ağırlık, satır başına ~39px
	   dokunma yüksekliği (dört link toplamı ~156-165px hedefte). */
	.primary-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.primary-navigation a {
		display: flex;
		align-items: center;
		min-height: 39px;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.25;
	}

	/* Menü linkleri → ince ayraç (`border-top`, ek markup gerekmez;
	   üstteki `.site-header__nav-cluster` gap'i ayracın üst boşluğu,
	   buradaki `padding-top` alt boşluğudur) → tam genişlik TEKLİF AL →
	   altında ortalanmış ARKONLINE. CTA/ARKONLINE AYNI satırda DEĞİL. */
	.site-header__actions {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding-top: 12px;
		padding-bottom: 14px;
		border-top: 1px solid var(--abn-color-divider);
	}

	.header-cta {
		width: 100%;
		height: 40px;
		border-radius: 20px;
		font-size: 15px;
	}

	.site-header__badge-link,
	.site-header__actions > .site-header__badge {
		align-self: center;
	}

	.site-header__badge {
		width: 92px;
		height: auto;
	}

	/* JS hazır: panel varsayılan KAPALI, header altından açılan tam
	   genişlikte bir dropdown paneline dönüşür (10-approved-decisions.md
	   §4.1). Görünürlük yalnızca toggle butonunun `aria-expanded`
	   özniteliğine bağlıdır — ayrı bir "is-open" sınıfı YOK. Modal
	   değildir (arka plan overlay/scroll-lock/focus-trap yok). */
	html.abn-js-menu .site-header__nav-cluster {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		margin-top: 0;
		max-height: 80vh;
		overflow-y: auto;
		background-color: var(--abn-color-white);
		border-top: 1px solid var(--abn-color-divider);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
		padding: 12px var(--abn-gutter) 14px;
	}

	html.abn-js-menu #mobile-menu-toggle[aria-expanded="true"] ~ .site-header__nav-cluster {
		display: flex;
	}
}

@media (max-width: 768px) {
	:root {
		--abn-gutter: 24px;
	}

	/* ==========================================================================
	   Mobil topbar — TEK kazanan kural seti (Revizyon 06 temizliği).
	   Konum her zaman kendi tam satırında solda. 431-768px: e-posta+
	   telefon ikinci satırda grid ile (e-posta merkez, telefon sağ).
	   ≤430px: üç bağımsız satır (konum/e-posta/telefon), her biri
	   ortalanır. Görünmez "ayna" öğesi hiçbir yerde kullanılmaz.
	   Yükseklik bütçesi: 431-768px için 86-104px, ≤430px için 116-132px
	   hedeflenir (item min-height 30px + padding/gap küçültülerek). */
	.utility-bar {
		height: auto;
		padding-block: 11px;
	}

	.utility-bar__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 7px;
	}

	.utility-bar__contact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		width: 100%;
	}

	.utility-bar__item--email {
		grid-column: 2;
		justify-self: center;
	}

	.utility-bar__item--phone {
		grid-column: 3;
		justify-self: end;
	}

	.utility-bar__item {
		min-height: 30px;
		gap: 5px;
		font-size: 12px;
		line-height: 1.4;
	}

	.utility-bar__icon svg {
		width: 14px;
		height: 16px;
	}
}

/* Canlı QA kararı — kullanıcı 431-768px kademesinde konum/e-posta/telefonun
   İKİ satıra bölünmesini istemedi; üçü TEK satırda (konum sol, e-posta
   TAM barın ortası, telefon sağ uç) olmalı. Yalnızca bu dar aralık
   hedeflendi — ≤430px'teki üç-ayrı-satır davranışı (yukarıdaki genel
   ≤768px bloğundan miras) kasıtlı olarak DOKUNULMADI, bu yüzden ayrı bir
   `min-width` aralığı kullanıldı (üstteki `max-width:768px` bloğunun
   ÜZERİNE gelir, onu değiştirmez). `.utility-bar__contact` (e-posta+
   telefonu saran DOM sarmalayıcı) `display:contents` ile layout'tan
   çıkarılır — böylece e-posta/telefon, konumla AYNI grid'in (`.utility-bar__inner`)
   doğrudan öğeleri olur ve merkez/sağ hizalama tüm bara göre hesaplanır
   (yalnızca kendi alt-grubuna göre değil). */
@media (min-width: 431px) and (max-width: 768px) {
	.utility-bar__inner {
		display: grid;
		/* Orta sütun `minmax(0, max-content)` — düz `auto` kullanılsaydı
		   e-posta hiçbir zaman kendi min-content'inin altına inemezdi.
		   Kenar sütunlar `minmax(0, 1fr)`: 0'a kadar küçülebilir. */
		grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
		align-items: center;
		column-gap: 8px;
		row-gap: 0;
	}

	.utility-bar__contact {
		display: contents;
	}

	/* BULUNAN HATA (canlı ölçüm): `justify-self:start/center/end`
	   kullanıldığında öğe kendi İÇERİK genişliğine `fit-content` olur —
	   sütun `minmax(0,...)` ile küçülse bile öğenin KENDİSİ küçülmüyor,
	   yalnızca konumu değişiyor; bu da 431px'te üç öğenin bir kısmının
	   komşu sütuna TAŞMASINA (konum sağ kenarı 136.8px, e-posta sol kenarı
	   126.1px — 10.7px çakışma) yol açtı, `min-width:0`/ellipsis güvenlik
	   ağı hiç TETİKLENMEDİ çünkü öğe zaten hiç küçültülmüyordu. Düzeltme:
	   öğeler `justify-self:stretch` (varsayılan) ile sütunu TAM doldurur —
	   böylece sütun küçüldüğünde öğe de gerçekten küçülür ve `min-width:0`
	   + `.utility-bar__text`'teki ellipsis nihayet aktif olur; konum/orta/
	   sağ görünümü artık öğenin kendi `justify-content`'i ile korunur. */
	.utility-bar__item {
		display: flex;
		min-width: 0;
		font-size: 13px;
		gap: 4px;
	}

	.utility-bar__item--phone {
		gap: 3px;
	}

	/* `justify-self: stretch` burada AÇIKÇA yazıldı — üstteki genel
	   ≤768px bloğunun `.utility-bar__item--email/--phone` için bıraktığı
	   `justify-self: center`/`end` (satır ~635/640, iki-satırlı `.utility-bar__contact`
	   alt-grid'i içindi) BAŞKA BİR ÖZELLİK (`justify-content`) yazarak
	   otomatik ezilmez — `justify-self` ayrı bir özelliktir, açıkça
	   `stretch` verilmezse eski `center`/`end` sızıp öğeyi sütuna
	   STRETCH etmek yerine kendi içerik genişliğine `fit-content` bırakır
	   (canlı ölçümle bulunan gerçek hata: `phone` genişliği sütunun
	   102px'i yerine kendi 128px içerik genişliğinde kalıyor, komşu
	   sütuna taşıyordu). */
	.utility-bar__item--location {
		justify-self: stretch;
		justify-content: flex-start;
	}

	.utility-bar__item--email {
		grid-column: auto;
		justify-self: stretch;
		justify-content: center;
	}

	.utility-bar__item--phone {
		grid-column: auto;
		justify-self: stretch;
		justify-content: flex-end;
	}

	.utility-bar__icon svg {
		width: 13px;
		height: 15px;
		flex-shrink: 0;
	}

	.utility-bar__text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	:root {
		--abn-gutter: 16px;
	}
}

@media (max-width: 430px) {
	/* ≤430px: e-posta+telefon grid'i (üstteki 768px tier'ından miras)
	   yerine üç bağımsız satır — konum/e-posta/telefon, her biri kendi
	   satırında ortalanır. Toplam yükseklik hedefi: 116-132px. */
	.utility-bar__contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 7px;
	}

	.utility-bar__item--email,
	.utility-bar__item--phone {
		justify-self: unset;
	}
}