/*
 * Ana sayfa Hero — Sprint 02 + Revizyon 01.
 *
 * Yalnızca `is_front_page()` durumunda yüklenir (bkz. inc/enqueue.php).
 * WhatsApp butonu bu dosyada YOKTUR (tema kapsamı dışı, ayrı eklentiyle
 * yapılacak — bkz. CLAUDE.md).
 *
 * Taban ölçüler references/extracted/main-xd-package içindeki Anasayfa
 * artboard `graphicContent.agc` verisinden XD-exact olarak çıkarılmıştır
 * (sembol adı: "Component 16" — bkz. references/qa/sprint-02-report.md).
 * Hero container, sayfanın genel 255px kenar marjı grid'ini KULLANMAZ; XD
 * verisi hero'nun kendi 50px kenar marjıyla (x=50, genişlik=1820, 1920
 * tuval üzerinde) ayrı bir "geniş bölüm" olarak konumlandığını gösteriyor.
 *
 * Revizyon 01 (kullanıcı QA kararı, bkz. references/qa/sprint-02-revision-01.md):
 * XD-exact yükseklik (850px) kullanıcı görsel QA'sında "ekrana orantısız
 * oturuyor" olarak değerlendirildi; yükseklik kasıtlı olarak ~%9 azaltıldı
 * (850 → 775px). Genişlik (1820px) ve yatay grid ilişkisi DEĞİŞMEDİ.
 *
 * `--abn-scale`, main.css içinde tanımlıdır (1366px'te 0.7115 → 1920px'te
 * 1'de kilitlenir) ve header ile birebir aynı mekanizmadır; burada yeniden
 * tanımlanmaz, yalnızca kullanılır.
 */

:root {
	--hero-width: 1820px;
	--hero-height: 775px;
	--hero-radius: 30px;
	--hero-overlay-opacity: 0.9;
	--hero-content-inset-left: 101px;
	--hero-content-inset-right: 48px;
	--hero-content-max-width: 605px;
	--hero-card-width: 290px;
	--hero-card-height: 120px;
	--hero-card-radius: 15px;
	--hero-card-gap: 30px;
}

.hero {
	position: relative;
	display: flex;
	width: 100%;
	max-width: calc(var(--hero-width) * var(--abn-scale));
	aspect-ratio: 1820 / 775;
	margin: 0 auto;
	border-radius: calc(var(--hero-radius) * var(--abn-scale));
	overflow: hidden;
	background-color: var(--abn-color-primary);
}

.hero__media,
.hero__panel {
	position: relative;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

/* XD kaynak pattern-fill (WhatsApp Image shape) `offsetX:-0.109, offsetY:
   -0.018, scale:1.103` ile yerleştirilmiş — düz merkezi `cover` değil,
   hafif kaydırılmış bir kırpım. CSS `object-fit` bu XD pattern modelini
   birebir ifade edemediğinden, referans render üzerinde ölçülen
   (template-matching, revize edilmiş 775px yükseklik için yeniden
   hesaplandı — bkz. references/qa/sprint-02-revision-01.md) en yakın
   kompozisyon yalnızca `object-position` ile uygulanır.
   Revizyon 01: önceki turda kırpım için kullanılan ek `transform:
   scale(1.075)` kaldırıldı — hover efektinin "normal durum: scale(1)"
   gereksinimiyle çakışmaması için taban durumda görsele hiçbir transform
   uygulanmaz; tüm kırpım/kompozisyon ayarı yalnızca `object-position` ile
   yapılır. */
.hero__media-image,
.hero__panel-background {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 25% 50%;
}

/* Revizyon 01 — sol hero görseli hover efekti (yalnız `.hero__media-image`,
   sağ panel arka planı etkilenmez). `.hero__media`'nın `overflow:hidden`'ı
   (yukarıda) `scale(1.04)` sırasında görselin hero sınırları dışına
   taşmasını engeller; layout/konum değişmez, yalnızca `transform` değişir. */
.hero__media-image {
	transform: scale(1);
	transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__media:hover .hero__media-image {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.hero__media-image {
		transition: none;
	}

	.hero__media:hover .hero__media-image {
		transform: scale(1);
	}
}

/* XD exact: sağ panel, sol ile AYNI arka plan fotoğrafının üzerine
   %90 opaklıkta ana marka rengi (Rectangle 2, fill #0E3975, opacity 0.9)
   bindirilerek elde edilmiştir — ayrı bir düz renk panel değildir. */
.hero__panel-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--abn-color-primary);
	opacity: var(--hero-overlay-opacity);
}

/* `position: absolute; inset: 0;` — `.hero__panel-background`/`-overlay` ile
   aynı desen. `.hero` (flex + aspect-ratio) içinde `.hero__panel`'in
   `height:100%`'ü kendi normal-akış çocukları için "definite" sayılmıyor
   (aspect-ratio kaynaklı stretch zinciri, iç içe yüzde-yükseklik
   zincirlerinde bazı tarayıcılarda "auto" olarak çözülüyor); bu da
   `.hero__content`'in `height:100%` ile 0 yüksekliğe düşüp panelin ALTINA
   taşmasına yol açıyordu (Playwright DOM ölçümüyle doğrulandı). Absolute
   positioning, mutlak konumlandırılmış kardeşleriyle aynı, daha güvenilir
   "containing block" hesaplamasını kullanarak bu zinciri devre dışı bırakır. */
.hero__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(32px * var(--abn-scale)) calc(var(--hero-content-inset-right) * var(--abn-scale)) calc(32px * var(--abn-scale)) calc(var(--hero-content-inset-left) * var(--abn-scale));
	box-sizing: border-box;
}

/* Revizyon 01 — font ağırlığı/render düzeltmesi: Roboto kurulu değil,
   `--abn-font-base` (Roboto,"Helvetica Neue",Arial) fallback yığını her üç
   metin öğesinde de gözle görülür biçimde daha kalın render ediliyordu
   (kullanıcı görsel QA'sı). Yalnızca hero metinlerine özel, macOS sistem
   fontunu (`-apple-system`/`BlinkMacSystemFont`) önceliklendiren bir
   fallback zinciri + `font-synthesis:none` (tarayıcının sentetik kalınlık
   üretmesini engeller) + `-webkit-font-smoothing:antialiased` uygulanır.
   Bu kural yalnızca `.hero__eyebrow/.hero__title/.hero__description`
   selector'larıyla sınırlıdır; sitedeki başka hiçbir metne yayılmaz. */
.hero__eyebrow,
.hero__title,
.hero__description {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0;
	padding: calc(9px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border: 1px solid var(--abn-color-white);
	border-radius: calc(20px * var(--abn-scale));
	font-size: calc(14px * var(--abn-scale));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--abn-color-white);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Revizyon 01: 900 (Black) → 700 (Bold). XD kaynağı "Roboto Black" idi,
   ancak kullanıcı görsel QA kararı gereği kullanılmayan aşırı ağırlıklar
   (800/900) tema genelinde hedeflenmiyor; 700 hem okunur bir kalınlık hem
   de fallback yığınında daha temiz render veriyor (bkz. revizyon raporu). */
.hero__title {
	max-width: calc(var(--hero-content-max-width) * var(--abn-scale));
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(52px * var(--abn-scale));
	font-weight: 700;
	line-height: 1.17;
	color: var(--abn-color-white);
}

.hero__description {
	max-width: calc(var(--hero-content-max-width) * var(--abn-scale));
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.556;
	color: var(--abn-color-white);
}

.hero__brands {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: calc(var(--hero-card-gap) * var(--abn-scale));
	margin: calc(20px * var(--abn-scale)) 0 0;
}

.hero__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--hero-card-width) * var(--abn-scale));
	height: calc(var(--hero-card-height) * var(--abn-scale));
	padding: calc(16px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border-radius: calc(var(--hero-card-radius) * var(--abn-scale));
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-sizing: border-box;
	flex-shrink: 0;
	text-decoration: none;
}

.hero__brand-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hero__brand:focus-visible {
	outline: 2px solid var(--abn-color-white);
	outline-offset: 2px;
}

/* ==========================================================================
   Hakkımızda — Sprint 03
   XD kaynağı: Anasayfa artboard, "professional-factory-worker..." görsel
   sembolü (690×650, radius 30) + "HAKKIMIZDA" etiketi + "35 Yıllık Sektör
   Tecrübesi" başlığı + açıklama metni (references/qa/sprint-03-report.md).
   Hero'nun aksine, Hakkımızda sayfanın GENEL 255px kenar marjı grid'ini
   (header ile aynı `--abn-container-width`, main.css'te tanımlı) kullanır —
   XD verisinde görsel x=255 (container sol kenarı), açıklama sağ kenarı
   x=1665 (container sağ kenarı) ile birebir örtüşüyor.
   ========================================================================== */

/* Revizyon 08'de (aşağıda) `--about-gap` yeniden kullanılıyor; `--about-image-width`/
   `--about-content-width` referans/dokümantasyon amaçlı korunuyor (`.about`
   grid oranı bu değerlerle birebir aynı). `--about-image-height` ARTIK
   XD-exact 650 DEĞİL — Revizyon 08 devamında (aşağıda) canlı ölçümle
   güncellendi, bkz. o not. */
:root {
	--about-image-width: 690px;
	--about-image-height: 816px;
	--about-gap: 115px;
	--about-content-width: 605px;
}

/* Revizyon 06 — kullanıcı kararı: eski `flex` düzeni XD'nin kendi
   asimetrik ölçülerini (görsel 690px sabit / içerik 605px, flex:0 0 ile
   görsel büyümüyor/küçülmüyor) birebir koruyordu — bu, 1920'de iki
   kolonun görsel olarak eşit OLMADIĞI (85px fark) anlamına geliyordu.
   Kullanıcı bu turda kesin eşit iki kolon istedi; `display:grid` +
   `repeat(2, minmax(0,1fr))` ile her iki kolon da container'ın kalan
   genişliğini (gap çıkarıldıktan sonra) BİREBİR eşit paylaşır — hangi
   içerik daha az/çok yer kaplarsa kaplasın matematiksel olarak garanti.
   Gap 115px'ten 30px'e düşürüldü (kullanıcı hedefi). */
/* Revizyon 08 (canlı QA kararı) — kullanıcı, gerçek (uzun) Türkçe içerikle
   ekran görüntüsü karşılaştırdı: eşit `1fr 1fr` kolonlarda metin görseli
   boyca aşıyor, ayrıca metnin biraz sağa alınmasını istedi. Rev06'nın
   "kesin eşit kolon" kararı bu turda kullanıcı tarafından açıkça geri
   alındı — yerine XD kaynağının kendi ORİJİNAL asimetrik oranı
   (görsel 690px / içerik 605px / gap 115px, toplam 690+605=1295=1410-115,
   bkz. yukarıdaki `--about-image-width`/`--about-content-width`/
   `--about-gap` — bu değerler hiç silinmemişti) `fr` oranı olarak geri
   getirildi: `690fr 605fr` 1920'de tam olarak 690px/605px'e çözülür (XD
   birebir) ve `--abn-scale` gerektirmeden her genişlikte aynı oranı korur.
   Daha geniş 115px gap metni otomatik olarak sağa kaydırır; daha dar 605px
   içerik kolonu aynı metni daha fazla satıra sardığından metin bloğu
   boyca uzar.

   Devam — kullanıcı bu tek başına yeterli bulmadı ("hala eşit durmuyorlar").
   Playwright ile canlı `getBoundingClientRect()` ölçümü (1920px, gerçek
   Türkçe içerik): `.about__content` 815.65625px, `.about__media`/`.about__image`
   hâlâ XD-exact 650px — 165.65625px fark. Kullanıcının bu turda açıkça
   izin verdiği ("gerekirse görseli biraz büyütebilirsin") ikinci adım
   uygulandı: `.about__image` aspect-ratio `690/650`'den `690/816`'ya
   çıkarıldı (815.65625 → 816'ya yuvarlandı), `--about-image-height`
   değişkeni de aynı şekilde güncellendi. Bu, XD kaynağının kendi 650px
   değerinden bilinçli bir sapmadır — kaynak yerine gerçek (uzun) canlı
   metin uzunluğuna göre kalibre edilmiştir. Metin `_abn_about_description`
   panelden değişirse (bkz. front-page-meta.php) bu sabit yükseklik
   yeniden uyuşmayabilir — dinamik (JS ile) eşitleme bu turda İSTENMEDİ,
   yalnızca statik CSS düzeltmesi yapıldı. */
/* Revizyon 09 (klon) — Rev08'in `aspect-ratio: 690/816` çözümü, o günkü
   Türkçe metnin canlı ölçülen yüksekliğine (815.66px) STATİK olarak
   kalibre edilmişti ve kendi notunda da uyardığı gibi
   ("metin panelden değişirse bu sabit yükseklik yeniden uyuşmayabilir")
   bu klonun yeni Hakkımızda metniyle artık uyuşmuyor. İçerikten bağımsız
   sabit yükseklik yerine, kolonların gerçekten eşit yükseklikte
   bitmesini sağlayan grid davranışı kullanılıyor:
     - `.about` → `align-items: stretch` (kolonlar satır yüksekliğini alır)
     - `.about__media` → `height: 100%` (kolon yüksekliğini tamamen kaplar)
     - `.about__image` → `height: 100%` + `object-fit: cover` (oran bozulmaz)
   `aspect-ratio` yalnızca INTRINSIC katkı olarak kalır (tek kolonlu
   ≤768 yığılmasında ve metin görselden kısa olduğunda devreye girer);
   satır yüksekliği belirli olduğunda `height:100%` kazanır. Metin dikey
   ortalanmaz — kendi kolonunda üstten akar. */
.about {
	display: grid;
	grid-template-columns: minmax(0, 690fr) minmax(0, 605fr);
	align-items: stretch;
	gap: calc(var(--about-gap) * var(--abn-scale));
	max-width: var(--abn-container-width);
	margin: calc(100px * var(--abn-scale)) auto 0;
}

/* Revizyon 01 — hero'daki `.hero__media` ile aynı desen: kapsayıcının
   `overflow:hidden`'ı + kendi `border-radius`'u, hover sırasında
   `scale(1.04)`'e çıkan görselin köşeleri yuvarlatılmış sınırların
   dışına taşmasını engeller. */
.about__media {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: calc(30px * var(--abn-scale));
}

/* Hero görselindeki hover efektiyle birebir aynı karakter (bkz.
   `.hero__media-image`, yukarıda): normal durumda `scale(1)`, hover'da
   `scale(1.04)`, 650ms aynı cubic-bezier. Yalnızca bu `<img>` öğesine
   uygulanır — section/kolon hareket etmez, layout değişmez. */
.about__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 690 / 816;
	object-fit: cover;
	border-radius: calc(30px * var(--abn-scale));
	transform: scale(1);
	transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about__media:hover .about__image {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.about__image {
		transition: none;
	}

	.about__media:hover .about__image {
		transform: scale(1);
	}
}

.about__content {
	width: 100%;
	padding-top: calc(118px * var(--abn-scale));
}

/* Sprint 02 Revizyon 01'de öğrenilen font-render dersi (bkz. o rapor):
   Roboto kurulu değil, sistem fontu + font-synthesis:none + smoothing
   olmadan "Black"/"Bold" ağırlıklar fallback yığınında gereğinden kalın
   render ediliyor. Aynı önlem burada da önleyici olarak uygulanır. */
.about__eyebrow,
.about__title,
.about__description {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.about__eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0;
	padding: calc(9px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border: 1px solid var(--abn-color-brand-light);
	border-radius: calc(20px * var(--abn-scale));
	font-size: calc(14px * var(--abn-scale));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
}

.about__title {
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(52px * var(--abn-scale));
	font-weight: 900;
	line-height: 1.17;
	color: var(--abn-color-primary-dark);
}

.about__description {
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.556;
	color: #333333;
}

.about__description p {
	margin: 0;
}

.about__description p + p {
	margin-top: calc(20px * var(--abn-scale));
}

/* Revizyon 05 — kullanıcı kararı: zengin metin editörü (wp_editor)
   içeriği <ul>/<ol>/<li>/<a>/<strong>/<em> üretebilir. Yalnızca
   `.about__description` kapsamında stillendirilir — global `ul/li`
   stilleri DEĞİŞMEDİ (bkz. footer menü, FAQ vb. kendi scoped stillerini
   korur). */
.about__description ul,
.about__description ol {
	margin: calc(20px * var(--abn-scale)) 0 0;
	padding-left: calc(22px * var(--abn-scale));
}

.about__description ul {
	list-style: disc outside;
}

.about__description ol {
	list-style: decimal outside;
}

.about__description li {
	margin: 0;
}

.about__description li + li {
	margin-top: calc(10px * var(--abn-scale));
}

.about__description p + ul,
.about__description p + ol,
.about__description ul + p,
.about__description ol + p {
	margin-top: calc(20px * var(--abn-scale));
}

.about__description a {
	color: var(--abn-color-primary);
	text-decoration: underline;
}

.about__description a:hover,
.about__description a:focus-visible {
	text-decoration-thickness: 2px;
}

.about__description strong {
	font-weight: 700;
}

.about__description em {
	font-style: italic;
}

/* ==========================================================================
   İstatistikler — Sprint 03 + Revizyon 01
   XD kaynağı: Component 11–14 (x=304/664/1024/1384, ty=1835, gutter 128px).
   Revizyon 01 (kullanıcı QA kararı, bkz. references/qa/sprint-03-revision-01.md):
   Sprint 03'teki sabit-genişlikli (`232px`) + alt-hizalı mutlak konumlandırma,
   3 haneli değerlerde (`250`) komşu sütuna taşıyor, "hayalet" sayı ile etiket
   aynı merkezde buluşmuyordu ve içerik uzunluğuna göre ayrı bir `.stat--long-value`
   font-boyutu istisnası gerektiriyordu. Bunun yerine:
   - `grid-template-columns: repeat(4, minmax(0, 1fr))` — 4 sütun her zaman EŞİT
     genişlikte, içerik (uzun sayı) sütun genişliğini asla büyütemez/taşıramaz.
   - Tüm değerler TEK bir font-size kullanır (istisna/özel sınıf yok).
   - `.stat` kendisi `display:grid; place-items:center` — `.stat__value` ve
     `.stat__label` `grid-area:1/1` ile AYNI hücrede üst üste biner; bu, ikisinin
     yatay/dikey merkezinin CSS Grid tarafından matematiksel olarak birebir
     eşleşmesini garanti eder (`stat--long-value`'daki gibi ayrı `bottom`
     değerleriyle elle hizalama yapılmaz).
   Büyük "hayalet" sayı (Roboto Black, #F7F7F7) gerçek, erişilebilir metindir
   (aria-hidden DEĞİL) — yalnızca düşük kontrastla dekoratif görünür.
   ========================================================================== */

:root {
	--stats-row-width: 1312px;
	--stats-column-gap: 30px;
	/* Revizyon 02 (kullanıcı kararı, kesin): 1920px'te 190px. `--abn-scale`
	   ile ölçeklenir (1920'de scale=1 → tam 190px; daha dar masaüstü
	   genişliklerinde dört değer de AYNI oranda küçülür — görevde örnek
	   olarak verilen `clamp(130px, 9.9vw, 190px)` yerine, tema genelinde
	   zaten kanıtlanmış `--abn-scale` mekanizması kullanıldı; ikisi de aynı
	   sonucu verir: tüm `.stat__value` öğeleri her viewport'ta BİREBİR AYNI
	   computed font-size'a sahip olur, bkz. sprint-03-revision-02.md). */
	--stat-value-size: 190px;
}

/* Hakkımızda ile İstatistikler arası boşluk: XD-exact — Hakkımızda görseli
   `ty=1130,h=650` → alt kenar 1780; İstatistik kutuları `ty=1835` → fark 55px
   (kullanıcının hedeflediği 40–60px bandı içinde, bkz. revizyon raporu). */
.stats {
	max-width: var(--abn-container-width);
	margin: calc(55px * var(--abn-scale)) auto 0;
}

.stats__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: calc(var(--stats-column-gap) * var(--abn-scale));
	max-width: calc(var(--stats-row-width) * var(--abn-scale));
	margin-inline: auto;
}

.stat {
	display: grid;
	place-items: center;
	position: relative;
	padding: calc(24px * var(--abn-scale)) 0;
}

.stat__value,
.stat__label {
	grid-area: 1 / 1;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	white-space: nowrap;
}

/* Revizyon 02 (kullanıcı kararı): büyük "hayalet" rakam Roboto ile render
   edilmeli — XD kaynağı zaten Roboto Black'ti (bkz. Component 11–14 "35"/
   "20"/"65"/"90" text node'ları, `font.family:"Roboto", style:"Black",
   size:200`). Roboto kaynaklarda yok, indirilmedi/sistemden kopyalanmadı;
   `Arial` fallback'e düşülür (bilinen sınırlama, bkz. rapor). Yalnızca TEK
   bir `.stat__value` selector'ı tüm dört rakamı yönetir — değere/uzunluğa
   göre class, `nth-child` veya PHP karakter kontrolü YOK (bkz. stats.php).
   XD'de bu text node'ları için `textAttributes` (letterSpacing/lineHeight)
   veya `opacity` override'ı bulunmuyor — `letter-spacing` bilinçli olarak
   `normal` bırakıldı, opacity `1` (varsayılan). */
.stat__value {
	font-family: "Roboto", Arial, sans-serif;
	font-size: calc(var(--stat-value-size) * var(--abn-scale));
	font-weight: 900;
	letter-spacing: normal;
	color: #f7f7f7;
	opacity: 1;
	z-index: 0;
	transform: scale(1);
	transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: yalnız büyük rakam. `.stat` zaten `display:grid;place-items:center`
   ile merkezlenmiş olduğundan (bkz. yukarı), `transform-origin` varsayılanı
   (%50 %50) zaten kendi merkezine denk geliyor — ayrı bir `translate()`
   birleştirmesi gerekmez, yalnızca `scale()` yeterli (bkz. revizyon
   talimatı madde 4, "güvenli grid merkezleme" notu). Mavi etiket, komşu
   sütunlar ve `.stat` kutusunun kendisi bu kuraldan etkilenmez. */
.stat:hover .stat__value {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.stat__value {
		transition: none;
	}

	.stat:hover .stat__value {
		transform: scale(1);
	}
}

.stat__label {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: calc(36px * var(--abn-scale));
	font-weight: 900;
	color: var(--abn-color-primary);
	z-index: 1;
}

/* ==========================================================================
   Stok Noktalarımız — Sprint 04
   XD kaynağı: Anasayfa artboard — "ÜRÜN TEDARİK" etiketi (x=904,y=2148,
   Rectangle 10 pill x=884,y=2124,152×36,r=20,stroke #666666), "Stok
   Noktalarımız" başlığı (x=749,y=2228, Roboto Black 52, #0E3975), harita
   paneli ("Adsız tasarım (8)" arka plan şekli, x=255,y=2291, 1410×613.74,
   r≈18.06). İstatistiklerle bölüm arası boşluk XD-derived ~54-55px
   (Component 11-14 alt sınırı 2070 → etiket pilli üst sınırı 2124), Hero/
   Hakkımızda arasındaki aynı ritimle tutarlı (bkz. references/qa/
   sprint-04-report.md). Bu bölüm sayfanın GENEL 255px kenar marjı
   grid'ini (`--abn-container-width`, header/Hakkımızda ile aynı) kullanır.

   Harita GERÇEK bir statik görsel (`stock-locations-map-default.svg`,
   XD'nin kendi vektör path/metin/pin verisinden birebir çıkarılmıştır —
   bkz. sprint raporu) — ülke isimleri, şehir pinleri ve etiketler
   görselin İÇİNDEDİR; burada ayrıca HTML/CSS ile pin/metin/çizgi
   üretilmez, hover/zoom efekti yoktur, interaktif değildir.
   ========================================================================== */

.stock-locations {
	position: relative;
	max-width: var(--abn-container-width);
	margin: calc(55px * var(--abn-scale)) auto 0;
}

/* Revizyon 03 — kullanıcı kararı: harita altındaki dekoratif geçiş
   katmanı (`Rectangle 11` kaynaklı `::after`, Revizyon 01/02'de sırasıyla
   absolute/normal-akış gradient olarak denendi) tamamen kaldırıldı.
   Yerine başka bir pseudo-element, gradient, spacer veya sabit yükseklik
   eklenmedi — Stok Noktalarımız bölümü artık haritanın kendi doğal alt
   sınırında bitiyor, Blog bölümü kendi üst boşluğuyla doğal akışta
   başlıyor (bkz. references/qa/sprint-05-report.md, "Final kullanıcı
   kararı"). */

.stock-locations__header {
	position: relative;
	z-index: 1;
	text-align: center;
}

/* Revizyon derslerinden (Sprint 02/03) öğrenilen önlem: Roboto kurulu
   değil, sistem fontu + font-synthesis:none + smoothing olmadan "Black"
   ağırlık fallback yığınında gereğinden kalın render ediliyor. Yalnızca bu
   bölüm selector'larıyla sınırlı, siteye yayılmaz. */
.stock-locations__eyebrow,
.stock-locations__title {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.stock-locations__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	padding: calc(9px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border: 1px solid var(--abn-color-brand-light);
	border-radius: calc(20px * var(--abn-scale));
	font-size: calc(14px * var(--abn-scale));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Revizyon 01 (kullanıcı kararı, kesin): font-weight 900 — XD kaynağı da
   zaten "Roboto Black" (900) idi. Sprint 04'te Hero'nun 700 hassasiyeti
   önleyici olarak buraya da uygulanmıştı; bu revizyonda kullanıcı XD-exact
   900'ü açıkça istedi ve bunu kesin karar olarak belirtti — fallback
   fontta (Arial/Helvetica Neue) farklı render olsa bile computed
   font-weight değeri 900 olarak sabitlenir. font-family/font-size/
   line-height/letter-spacing/renk/X-Y konumu DEĞİŞMEDİ. */
.stock-locations__title {
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(52px * var(--abn-scale));
	font-weight: 900;
	line-height: 1.17;
	color: var(--abn-color-primary-dark);
}

.stock-locations__map {
	position: relative;
	z-index: 1;
	margin: calc(40px * var(--abn-scale)) 0 0;
	display: block;
	line-height: 0;
}

/* Harita kendi köşe radius'unu ve arka plan panelini SVG'nin içinde zaten
   taşıyor (bkz. yukarı XD kaynağı notu) — burada ekstra çerçeve/gölge/
   arka plan eklenmez; yalnızca dış görünüm için aynı radius tekrarlanır
   (görsel taşarsa köşeler yine de temiz kırpılsın diye), esnetme yok. */
.stock-locations__map-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(18.06px * var(--abn-scale));
}

/* ==========================================================================
   Blog — Sprint 05
   XD kaynağı: Anasayfa artboard — "HABERLER" etiketi (x=921,y=3129,
   Rectangle 12 pill x=901,y=3105,119×36,r=20,stroke #666666), "Blog"
   başlığı (x=907,y=3209, Roboto Black 52, #0E3975), kart grid (Component
   17/18/19, her biri x=255/735/1215,y=3272, 450×582, 30px gutter — grid
   toplam genişliği 1410 = --abn-container-width), buton (Component 20,
   x=837,y=3904, 246×60, r=30).

   Bölüm üst boşluğu: XD'de harita panelinin gerçek alt sınırı (y=2905) ile
   bu bölümün eyebrow pilinin üst sınırı (y=3105) arasında 200px boşluk
   var. Sprint 04 Revizyon 02'de performans nedeniyle harita altındaki
   geçiş katmanı normal akışta 150px'e indirildi (bkz.
   references/qa/sprint-04-revision-02-performance.md); bu 150px zaten
   XD'nin kendi 200px'lik boşluğunun bir kısmını dolduruyor. Toplam XD
   ritmini korumak için bu bölümün kendi üst boşluğu 200-150=50px olarak
   ayarlandı (aynı 150px'in üzerine tekrar tam 200px eklenmedi).

   Kart grid'i, kart içi tipografi ve buton, harita/istatistik/hakkımızda
   bölümlerinde zaten kurulmuş "eyebrow + H2" ve "hover'da scale(1.04)"
   desenlerini birebir yeniden kullanır (bkz. references/discovery/
   04-page-and-component-map.md, madde 2: "Başlık grubu deseni... tekrar
   tekrar kullanılıyor"). Kart görselleri gerçek native WordPress öne
   çıkan görselinden (featured image) gelir; kategori tasarımda YOK
   (Component 17/18/19 çocukları arasında hiçbir kategori text node'u
   bulunamadı), bu yüzden kartlarda kategori gösterilmez. ========================================================================== */

/* Revizyon 02 — QA bulgusu (Revizyon 01 reddedildi): section kutusu/
   wrapper sınırları yerine GERÇEK GÖRÜNÜR içerik piksel sınırları
   ölçüldü. İstatistiklerin görünür alt sınırı (`.stat__value` ghost
   sayısının gerçek piksel-mürekkep alt kenarı — DOM `getBoundingClientRect`
   kutusu font satır yüksekliği/descender payı yüzünden ~29px fazla alan
   kapsıyor, bu yüzden ekran görüntüsü piksel taramasıyla doğrulandı) ile
   "ÜRÜN TEDARİK" üst sınırı arası gerçek görünür boşluk ~108px. Harita
   `<img>` alt sınırı ile "HABERLER" arası bu değere eşitlendi (bkz.
   references/qa/sprint-05-revision-02.md). */
.home-blog {
	position: relative;
	max-width: var(--abn-container-width);
	margin: calc(108px * var(--abn-scale)) auto 0;
}

.home-blog__header {
	text-align: center;
}

.home-blog__eyebrow,
.home-blog__title {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.home-blog__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	padding: calc(9px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border: 1px solid var(--abn-color-brand-light);
	border-radius: calc(20px * var(--abn-scale));
	font-size: calc(14px * var(--abn-scale));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
}

.home-blog__title {
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(52px * var(--abn-scale));
	font-weight: 900;
	line-height: 1.17;
	color: var(--abn-color-primary-dark);
}

.home-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(30px * var(--abn-scale));
	margin: calc(40px * var(--abn-scale)) 0 0;
}

.home-blog__card {
	display: flex;
	flex-direction: column;
}

/* Hero/Hakkımızda görselleriyle birebir aynı hover deseni: kapsayıcının
   `overflow:hidden` + kendi `border-radius`'u, `scale(1)` → hover'da
   `scale(1.04)`, 650ms aynı cubic-bezier (bkz. `.about__media`/
   `.about__image`, yukarıda). Yalnızca görsel hareket eder; kart
   düzeni/metin konumu değişmez. */
.home-blog__image-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: calc(30px * var(--abn-scale));
}

.home-blog__image-wrap--placeholder {
	aspect-ratio: 450 / 350;
	background-color: #e5e5e5;
}

.home-blog__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 450 / 350;
	object-fit: cover;
	transform: scale(1);
	transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-blog__image-wrap:hover .home-blog__image {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.home-blog__image {
		transition: none;
	}

	.home-blog__image-wrap:hover .home-blog__image {
		transform: scale(1);
	}
}

.home-blog__body {
	display: flex;
	flex-direction: column;
	padding-top: calc(24px * var(--abn-scale));
}

.home-blog__card-title,
.home-blog__excerpt,
.home-blog__meta {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.home-blog__card-title {
	margin: 0;
	font-size: calc(26px * var(--abn-scale));
	font-weight: 700;
	line-height: 1.25;
	color: var(--abn-color-primary);
}

.home-blog__card-title a {
	color: inherit;
	text-decoration: none;
}

.home-blog__card-title a:hover,
.home-blog__card-title a:focus-visible {
	text-decoration: underline;
}

.home-blog__excerpt {
	margin: calc(16px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-blog__meta {
	display: flex;
	align-items: center;
	gap: calc(10px * var(--abn-scale));
	margin: calc(20px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1;
	color: #999999;
}

.home-blog__meta-sep {
	width: calc(4px * var(--abn-scale));
	height: calc(4px * var(--abn-scale));
	flex-shrink: 0;
	border-radius: 50%;
	background-color: #a7a7a7;
}

.home-blog__actions {
	display: flex;
	justify-content: center;
	margin: calc(50px * var(--abn-scale)) 0 0;
}

/* XD kaynağı: Component 20 — "Rectangle 650" (246×60,r=30,fill:none,
   stroke 1px #0E3975), metin "Tüm Blog Yazıları" (Roboto SemiBold 18,
   tx=30 → padding-left 30px), "Rectangle 660" dairesel rozet (50×50,
   tx=191/ty=5 → sağ/üst/alt 5px içeride), "Union 18" beyaz ok vektörü
   (gerçek XD path verisi, bkz. template-parts/home/blog.php). Hover
   durumu da XD'de ayrıca tanımlı (Hover State): pill dolgusu
   #0E3975'e döner, metin/ok beyaz kalır, rozet #08234B'ye koyulaşır —
   bu proje zaten `--abn-color-primary-dark` olarak tanımlı. */
.home-blog__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(12px * var(--abn-scale));
	box-sizing: border-box;
	height: calc(60px * var(--abn-scale));
	padding: calc(5px * var(--abn-scale)) calc(5px * var(--abn-scale)) calc(5px * var(--abn-scale)) calc(30px * var(--abn-scale));
	border: 1px solid var(--abn-color-primary);
	border-radius: calc(30px * var(--abn-scale));
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 600;
	color: var(--abn-color-primary);
	text-decoration: none;
	background-color: transparent;
	transition: background-color 200ms ease, color 200ms ease;
}

.home-blog__button:hover,
.home-blog__button:focus-visible {
	background-color: var(--abn-color-primary);
	color: #ffffff;
}

.home-blog__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(50px * var(--abn-scale));
	height: calc(50px * var(--abn-scale));
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--abn-color-primary);
	color: #ffffff;
	transition: background-color 200ms ease;
}

.home-blog__button:hover .home-blog__button-icon,
.home-blog__button:focus-visible .home-blog__button-icon {
	background-color: var(--abn-color-primary-dark);
}

.home-blog__button-icon svg {
	display: block;
	width: calc(20px * var(--abn-scale));
	height: calc(16px * var(--abn-scale));
}

/* ==========================================================================
   İletişim + SSS — Sprint 06
   XD kaynağı: Anasayfa artboard — sol mavi kart (`Rectangle 649`,
   x=255,y=4107, 570×720, r=30, fill #0E3975), sağ SSS alanı (eyebrow
   `Rectangle 651` x=975,y=4170, 68×36, r=20; başlık x=975,y=4274, Roboto
   Black 52). Kart-SSS arası kolon boşluğu 150px (975-825, 570 kart +
   150 boşluk + 690 SSS = 1410 = --abn-container-width). Form alanları
   (Rectangle 652/653/654/655/656) arasında tutarlı 20px dikey boşluk;
   kart iç boşluğu (padding) sol/sağ/alt kenarlarda tam 50px (üstte
   ölçülen fazladan ~39px, 42px Roboto Black başlığın satır-yüksekliği/
   ascent payından kaynaklanıyor — Sprint 05 Revizyon 02'de doğrulanan
   aynı font-metrik deseni; gerçek tasarım niyeti 4 kenarda da 50px). ========================================================================== */

.contact-faq {
	position: relative;
	max-width: var(--abn-container-width);
	margin: calc(143px * var(--abn-scale)) auto 0;
}

.contact-faq__container {
	display: grid;
	grid-template-columns: calc(570px * var(--abn-scale)) calc(690px * var(--abn-scale));
	column-gap: calc(150px * var(--abn-scale));
	align-items: stretch;
}

.contact-card {
	box-sizing: border-box;
	background-color: var(--abn-color-primary);
	border-radius: calc(30px * var(--abn-scale));
	padding: calc(50px * var(--abn-scale));
}

/* Revizyon 01 — kullanıcı kararı: SSS bloğunun tamamı (eyebrow+başlık+
   accordion listesi tek grup olarak) sol iletişim kartının dikey
   merkezine hizalanır. `.contact-faq__container`'ın `align-items:stretch`
   olması sayesinde `.faq` grid satırının tam yüksekliğini (kart
   yüksekliği) kaplar; `justify-content:center` bu yükseklik içinde
   çocukları tek blok hâlinde ortalar. Sabit `top`, `position:absolute`,
   negatif margin veya `transform:translateY` kullanılmadı — accordion
   açılıp kapandığında toplam yükseklik değiştikçe ortalama otomatik
   yeniden hesaplanır (JS gerekmez). */
.faq {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-card__header,
.contact-card__title,
.contact-card__description {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.contact-card__title {
	margin: 0;
	font-size: calc(42px * var(--abn-scale));
	font-weight: 900;
	line-height: 1.17;
	color: #ffffff;
}

.contact-card__description {
	margin: calc(16px * var(--abn-scale)) 0 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
}

.contact-card__form {
	margin: calc(24px * var(--abn-scale)) 0 0;
}

/* CF7 çıktısı yalnızca bu kart içinde stillendirilir — global `.wpcf7`
   kuralları veya başka formlar etkilenmez. CF7'nin kendi form/response/
   validasyon markup'ı korunur, yalnızca görsel override uygulanır. */
.contact-card .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: calc(20px * var(--abn-scale));
}

.contact-card .wpcf7-form p {
	margin: 0;
}

.contact-card .wpcf7-form-control-wrap {
	display: block;
}

.contact-card .wpcf7-form-control {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.contact-card .wpcf7-text,
.contact-card .wpcf7-tel,
.contact-card .wpcf7-email,
.contact-card .wpcf7-textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: calc(10px * var(--abn-scale));
	padding: 0 calc(20px * var(--abn-scale));
	font-size: calc(15px * var(--abn-scale));
	font-weight: 400;
	color: #333333;
}

.contact-card .wpcf7-text,
.contact-card .wpcf7-tel,
.contact-card .wpcf7-email {
	height: calc(50px * var(--abn-scale));
}

.contact-card .wpcf7-textarea {
	height: calc(150px * var(--abn-scale));
	padding-top: calc(14px * var(--abn-scale));
	padding-bottom: calc(14px * var(--abn-scale));
	resize: vertical;
	line-height: 1.5;
}

.contact-card .wpcf7-text::placeholder,
.contact-card .wpcf7-tel::placeholder,
.contact-card .wpcf7-email::placeholder,
.contact-card .wpcf7-textarea::placeholder {
	color: #666666;
	opacity: 1;
}

/* Erişilebilir klavye focus'u: kart koyu lacivert zeminde beyaz input
   üzerinde net görünür kalması için koyu vurgu rengiyle outline. Hiçbir
   yerde outline tamamen kaldırılmadı. */
.contact-card .wpcf7-form-control:focus-visible {
	outline: 2px solid var(--abn-color-primary-dark);
	outline-offset: 2px;
}

.contact-card .wpcf7-not-valid {
	border-color: #ffb4b4;
}

.contact-card .wpcf7-not-valid-tip {
	display: block;
	margin-top: calc(6px * var(--abn-scale));
	font-size: calc(13px * var(--abn-scale));
	font-weight: 400;
	color: #ffd7d7;
}

.contact-card .wpcf7-acceptance {
	display: block;
}

.contact-card .wpcf7-list-item {
	margin: 0;
}

.contact-card .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: calc(10px * var(--abn-scale));
	cursor: pointer;
}

.contact-card .wpcf7-list-item input[type="checkbox"] {
	box-sizing: border-box;
	flex-shrink: 0;
	width: calc(22px * var(--abn-scale));
	height: calc(22px * var(--abn-scale));
	margin: 0;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: calc(5px * var(--abn-scale));
	accent-color: var(--abn-color-primary-dark);
}

.contact-card .wpcf7-list-item-label {
	font-size: calc(14px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
}

/* Revizyon 01 — KVKK linki: yalnızca acceptance metnindeki "KVKK" kelimesi
   (CF7 form ID 24'ün kendi markup'ında `<a href="/kvkk-aydinlatma-metni/">`
   olarak eklendi, bkz. sprint-06-revision-01.md). Relative URL — domain
   sabit yazılmadı, hedef sayfa henüz yok (bu revizyonun kapsamı dışı). */
.contact-card .wpcf7-list-item-label a {
	color: inherit;
	text-decoration: underline;
}

.contact-card .wpcf7-list-item-label a:hover,
.contact-card .wpcf7-list-item-label a:focus-visible {
	color: #ffffff;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.contact-card .wpcf7-submit {
	box-sizing: border-box;
	width: 100%;
	height: calc(60px * var(--abn-scale));
	border: none;
	border-radius: calc(30px * var(--abn-scale));
	background-color: var(--abn-color-primary-dark);
	color: #ffffff;
	font-size: calc(22px * var(--abn-scale));
	font-weight: 700;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

/* Revizyon 01 — kullanıcının gönderdiği referansa göre hover: beyaz zemin
   + lacivert metin. Ölçü (width/height/radius/padding) hiçbir durumda
   değişmiyor; border eklenmedi (kart zemini zaten lacivert olduğu için
   beyaz buton kendiliğinden ayırt edilebiliyor), transform/translate/
   scale/gölge yok. `:not(:disabled)` sayesinde CF7'nin gönderim sırasında
   native olarak disabled bıraktığı buton hover almıyor. */
.contact-card .wpcf7-submit:not(:disabled):hover,
.contact-card .wpcf7-submit:not(:disabled):focus-visible {
	background-color: #ffffff;
	color: var(--abn-color-primary);
}

.contact-card .wpcf7-form[data-status="submitting"] .wpcf7-submit {
	opacity: 0.7;
	cursor: progress;
}

.contact-card .wpcf7-spinner {
	margin: calc(8px * var(--abn-scale)) auto 0;
}

.contact-card .wpcf7-response-output {
	box-sizing: border-box;
	margin: 0;
	padding: calc(14px * var(--abn-scale)) calc(18px * var(--abn-scale));
	border-radius: calc(10px * var(--abn-scale));
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-size: calc(14px * var(--abn-scale));
	line-height: 1.5;
	color: #ffffff;
}

.contact-card .wpcf7-form[data-status="mail-sent"] .wpcf7-response-output {
	background-color: rgba(80, 200, 130, 0.18);
	border-color: #7ee2a8;
	color: #eafff2;
}

.contact-card .wpcf7-form[data-status="validation-failed"] .wpcf7-response-output,
.contact-card .wpcf7-form[data-status="mail-failed"] .wpcf7-response-output,
.contact-card .wpcf7-form[data-status="aborted"] .wpcf7-response-output,
.contact-card .wpcf7-form[data-status="spam"] .wpcf7-response-output {
	background-color: rgba(220, 80, 80, 0.18);
	border-color: #ffb4b4;
	color: #fff0f0;
}

/* SSS eyebrow/başlık — projede zaten kurulu "eyebrow + H2" deseninin
   birebir aynısı (bkz. `.about__eyebrow`/`.about__title`), XD verisi de
   aynı ölçü/tipografiyi doğruluyor (Roboto Medium 14/letterSpacing 0.1em
   eyebrow, Roboto Black 52 başlık). */
.faq__header {
	text-align: left;
}

.faq__eyebrow,
.faq__title {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.faq__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0;
	padding: calc(9px * var(--abn-scale)) calc(24px * var(--abn-scale));
	border: 1px solid var(--abn-color-brand-light);
	border-radius: calc(20px * var(--abn-scale));
	font-size: calc(14px * var(--abn-scale));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
}

.faq__title {
	margin: calc(24px * var(--abn-scale)) 0 0;
	font-size: calc(52px * var(--abn-scale));
	font-weight: 900;
	line-height: 1.17;
	color: var(--abn-color-primary-dark);
}

.faq__list {
	margin: calc(40px * var(--abn-scale)) 0 0;
}

.faq__item {
	border-bottom: 1px solid #e3e3e3;
}

.faq__item:first-child {
	border-top: none;
}

.faq__question-heading {
	margin: 0;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(16px * var(--abn-scale));
	width: 100%;
	box-sizing: border-box;
	padding: calc(30px * var(--abn-scale)) 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: calc(24px * var(--abn-scale));
	font-weight: 700;
	line-height: 1.3;
	color: var(--abn-color-primary);
}

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

.faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(12px * var(--abn-scale));
	height: calc(19px * var(--abn-scale));
	color: var(--abn-color-primary);
}

/* XD kaynağı: chevron vektörü (Path 16090-16093) — kapalı öğelerde
   (`a=0,b=-1,c=1,d=0`) ve açık ilk öğede (`a=0,b=1,c=-1,d=0`) tam ters
   yönde döndürülmüş olarak bulundu (iki matris birbirinin 180° dönmüş
   hâli). Aynı 180° ilişki burada `transform:rotate()` ile birebir
   korunuyor. */
.faq__icon svg {
	display: block;
	transform: rotate(-90deg);
	transition: transform 200ms ease;
}

.faq__question[aria-expanded="true"] .faq__icon svg {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.faq__icon svg {
		transition: none;
	}
}

.faq__answer {
	padding: 0 0 calc(30px * var(--abn-scale));
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.faq__answer p {
	margin: 0;
	font-size: calc(18px * var(--abn-scale));
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
}

/* ==========================================================================
   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ü kurallar (1366-1920, --abn-scale sistemi) bu bölümde
   DEĞİŞTİRİLMEZ; yalnızca dosyanın SONUNA açık @media blokları eklenir.
   --abn-scale burada KASITLI OLARAK KULLANILMAZ — 0.7115 tabanında
   kilitli olup mobil için tasarlanmadı; bu blok bağımsız sabit px
   değerleri kullanır (bkz. sprint-08-report.md).

   Not: `--abn-gutter` (main.css'te tanımlı, 1024/768/480'de değer
   değiştirir) burada da kullanılır — tüm bölümlerin sol/sağ kenarı AYNI
   responsive grid'e oturur (`calc(100% - var(--abn-gutter) * 2)`).
   ========================================================================== */

@media (max-width: 1024px) {
	/* ---------- Paylaşılan: container hizalama + büyük başlıklar ---------- */
	.hero,
	.about,
	.stats,
	.stock-locations,
	.home-blog,
	.contact-faq {
		max-width: calc(100% - var(--abn-gutter) * 2);
	}

	.hero__title,
	.about__title,
	.stock-locations__title,
	.home-blog__title,
	.faq__title {
		font-size: 38px;
	}

	.contact-card__title {
		font-size: 34px;
	}

	.hero__eyebrow,
	.about__eyebrow,
	.stock-locations__eyebrow,
	.home-blog__eyebrow,
	.faq__eyebrow {
		font-size: 12px;
	}

	/* Gövde metinleri: --abn-scale kullanılmadığı için 14-16px bandı
	   sabit değerlerle garanti edilir (bkz. sprint raporu, "Tipografi"). */
	.hero__description,
	.about__description,
	.home-blog__excerpt,
	.contact-card__description,
	.faq__answer p {
		font-size: 16px;
	}

	/* Revizyon 02 — kullanıcı hedefi: gövde/açıklama metinleri en az
	   1.45 satır yüksekliği oranına sahip olmalı. `.contact-card__description`
	   masaüstünden `line-height:1.4` miras alıyordu (hedefin altında);
	   burada mobile özel 1.5'e çıkarıldı. Diğerleri (hero/about/excerpt/
	   faq) zaten ≥1.5 masaüstü line-height'a sahip, dokunulmadı. */
	.contact-card__description {
		line-height: 1.5;
	}

	/* Yardımcı/meta metin (tarih·yorum satırı): masaüstünden `line-height:1`
	   miras alıyordu (hedef ≥1.35). KVKK onay metni de masaüstü `1.4`
	   line-height'tan mobilde 1.5'e çıkarıldı (gövde bandıyla tutarlı). */
	.home-blog__meta {
		font-size: 14px;
		line-height: 1.4;
	}

	.contact-card .wpcf7-list-item-label {
		line-height: 1.5;
	}

	/* ---------- Hero: mobilde tek kolon, görsel üstte / panel altta ----------
	   Sprint 08 talimatı gereği (bu görevin kendi "Hero" bölümü):
	   1. Hero görseli, 2. Mavi içerik paneli. Mevcut DOM sırası zaten
	   `.hero__media` (görsel) → `.hero__panel` (panel) olduğundan markup
	   değiştirilmedi, yalnızca flex yönü column'a çevrildi. */
	.hero {
		flex-direction: column;
		aspect-ratio: unset;
		height: auto;
		border-radius: 20px;
	}

	.hero__media,
	.hero__panel {
		width: 100%;
		height: auto;
	}

	.hero__media {
		aspect-ratio: 16 / 10;
	}

	.hero__media-image {
		aspect-ratio: 16 / 10;
	}

	/* Footer panelinde zaten kurulu desen: `.hero__content` normal akışa
	   (static) alınır, `.hero__panel-background`/`-overlay` (absolute,
	   inset:0) panelin bu normal-akış içeriğinden doğan yüksekliğe
	   otomatik gerer (bkz. `.site-footer__panel`/`__content`, footer.css —
	   aynı çalışan mimari burada tekrar kullanıldı).
	   `.hero__panel-background` masaüstünde BİLEREK normal akışta
	   (static, `height:100%`) — çünkü panelin masaüstü yüksekliği
	   `aspect-ratio` üzerinden zaten SABİT/definite (bkz. yukarıdaki
	   `.hero__media, .hero__panel { height:100% }` masaüstü kuralı).
	   Panel yüksekliği burada `auto`'ya döndüğünde (yukarıda) o artık
	   definite değil; `height:100%` bu durumda `auto`'ya çözülür ve görsel
	   kendi doğal en-boy oranıyla GERÇEK akış yüksekliği kaplayıp
	   `.hero__content`'i aşağı iter. Bu nedenle yalnızca mobilde,
	   footer'daki gibi, arka plan görseli de absolute/inset:0 katmana
	   çevrilir — masaüstü kuralı (üstte, static/height:100%) değişmedi. */
	.hero__panel-background {
		position: absolute;
		inset: 0;
	}

	/* `position: static` DEĞİL, `relative` — statik (position:static)
	   elemanlar CSS yığın (stacking) kurallarına göre `z-index`'ten
	   bağımsız olarak HER ZAMAN absolute konumlu kardeşlerinin (arka
	   plan/overlay) ALTINDA boyanır; bu da beyaz metnin lacivert overlay
	   arkasında tamamen görünmez kalmasına yol açıyordu. `relative`,
	   elemanı normal akışta (yükseklik hâlâ hesaba katılır) tutarken
	   `z-index:1`'in (aşağıda, masaüstü kuralında zaten tanımlı) devreye
	   girmesini sağlayarak içeriği overlay'in üzerine çıkarır. */
	.hero__content {
		position: relative;
		padding: 28px var(--abn-gutter);
	}

	.hero__title,
	.hero__description {
		max-width: 100%;
	}

	/* Revizyon 01 — kullanıcı kararı: iki marka kartı (ARKONÇELİK/ARKONLINE)
	   `flex-wrap` ile Sprint 08'de alt alta düşüyordu; bunun yerine 2
	   sütunlu CSS Grid kullanılarak 1024'ten 320'ye kadar HER genişlikte
	   yan yana kalmaları garanti edilir (track genişliği `minmax(0,1fr)`
	   ile eşit ve taşmaya izin vermeyen). `.hero__brand`'ın masaüstü sabit
	   `width`/`height` değerleri (calc(...*scale)) grid hücresini
	   doldurmasını engellediği için burada `width:100%`/`height:auto` ile
	   geçersiz kılınır; grid'in varsayılan `align-items:stretch`'i iki
	   kartı aynı satırda otomatik eşit yüksekliğe getirir. */
	.hero__brands {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hero__brand {
		width: 100%;
		height: auto;
		min-height: 92px;
		padding: 11px;
	}

	/* Revizyon 04 — kullanıcı kararı: Revizyon 03'ün "ortak sabit height"
	   çözümü reddedildi (ARKONLINE'ın görsel ağırlığı hâlâ yetersizdi).
	   PNG'lerin gerçek piksel sınırları ölçüldü (Pillow `getbbox()`):
	   HER İKİ asset de kendi kanvasını UÇTAN UCA dolduruyor (şeffaf
	   boşluk YOK — ARKONÇELİK 236×52 = tam 4.538:1, ARKONLINE 1012×352 =
	   tam 2.875:1). Bu, "40-48px görünür yükseklik" hedefinin ARKONÇELİK
	   için "kartın %78-86'sı genişlik" hedefiyle AYNI ANDA sağlanamayacağı
	   anlamına gelir (44px yükseklikte ARKONÇELİK'in doğal oranı ~200px
	   genişlik gerektirir — kartın kendisinden geniş). Bu yüzden
	   GENİŞLİK öncelikli uygulanır (asıl talimat: "kartı dolduracak
	   kadar büyütülecek") — her iki logo kendi kartında `nth-child` ile
	   ayrı ayrı hedeflenir (template-part'a dokunulmadı, `.hero__brand`
	   DOM sırası zaten brand_1→brand_2 = ARKONÇELİK→ARKONLINE). Kart
	   yüksekliği 68→92px, padding 12→11px büyütüldü (madde 2 hedefi). */
	.hero__brand:nth-child(1) .hero__brand-image {
		width: 84%;
		height: auto;
		max-width: none;
	}

	.hero__brand:nth-child(2) .hero__brand-image {
		width: 86%;
		height: auto;
		max-width: none;
	}

	/* ---------- Hakkımızda: 1024'te oran (690fr/605fr) korunur ---------- */
	/* Revizyon 06 — kullanıcı kararı: `.about` artık grid (yukarıda,
	   base kural) — buradaki eski `flex-basis`/`width:42%` (flex'e özgü,
	   asimetrik kolon) kuralları grid bağlamında ya etkisiz kalıyor ya da
	   (width:42%) grid'in bölüşümünü BOZUYORDU. Temizlendi;
	   `grid-template-columns` üstteki base kuraldan miras alınır, burada
	   yeniden tanımlanmaz (Revizyon 08 — base kural artık `690fr 605fr`,
	   bkz. yukarı; bu tablet gap'i --abn-scale kullanmayan bağımsız bir
	   sabit değer olarak DEĞİŞTİRİLMEDİ). */
	.about {
		gap: 40px;
	}

	.about__content {
		padding-top: 0;
	}

	/* ---------- İstatistikler: 1024'te 4 sütun korunur, değer küçülür ---------- */
	.stats {
		margin-top: 40px;
	}

	.stats__row {
		max-width: 100%;
	}

	.stat__value {
		font-size: 110px;
	}

	.stat__label {
		font-size: 22px;
	}

	/* ---------- Stok Noktalarımız ---------- */
	.stock-locations {
		margin-top: 40px;
	}

	/* ---------- Blog: 1024'te 2 sütun, 3. kart alt satırda tam genişlik ---------- */
	.home-blog {
		margin-top: 72px;
	}

	.home-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-blog__card:nth-child(3) {
		grid-column: 1 / -1;
	}

	.home-blog__button {
		font-size: 16px;
	}

	/* ---------- İletişim + SSS: 1024'te tek kolon (kart 570/690px sabit
	   genişlikleri 1024px konteynerine sığmıyor — bkz. sprint raporu) ---------- */
	.contact-faq {
		margin-top: 88px;
	}

	.contact-faq__container {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.contact-card {
		padding: 32px;
	}

	.faq {
		justify-content: flex-start;
	}

	.faq__question {
		font-size: 20px;
	}

	/* iOS Safari, `font-size` 16px altındaki inputlara odaklanınca sayfayı
	   otomatik yakınlaştırır — tüm form alanları bu nedenle en az 16px. */
	.contact-card .wpcf7-text,
	.contact-card .wpcf7-tel,
	.contact-card .wpcf7-email,
	.contact-card .wpcf7-textarea {
		font-size: 16px;
	}

	.contact-card .wpcf7-list-item-label {
		font-size: 14px;
	}

	.contact-card .wpcf7-submit {
		font-size: 18px;
	}
}

@media (max-width: 768px) {
	.hero__title,
	.about__title,
	.stock-locations__title,
	.home-blog__title,
	.faq__title {
		font-size: 34px;
	}

	.contact-card__title {
		font-size: 30px;
	}

	/* ---------- Hakkımızda: 768'de tek kolon, görsel üstte / metin altta ---------- */
	/* Revizyon 06 — KRİTİK DÜZELTME: `.about` artık `display:grid` (flex
	   DEĞİL) — eski `flex-direction:column` grid bağlamında TAMAMEN
	   ETKİSİZ kalıyordu (grid, `flex-direction`'ı hiç tanımaz), bu da
	   768px altında görsel+içeriğin YANLIŞLIKLA 2 dar sütun hâlinde yan
	   yana kalmaya devam etmesi anlamına gelirdi (canlı ölçümle
	   doğrulanan gerçek regresyon riski). `grid-template-columns:1fr` ile
	   tek sütuna açıkça geçiliyor. */
	.about {
		grid-template-columns: 1fr;
		margin-top: 48px;
		gap: 24px;
	}

	.about__media,
	.about__content {
		width: 100%;
	}

	/* ---------- İstatistikler: kesin hedef 2×2 ---------- */
	.stats {
		margin-top: 32px;
	}

	.stats__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}

	/* Revizyon 02 — kullanıcı kararı: hayalet rakamların masaüstü rengi
	   (#f7f7f7) 390/320px'te "neredeyse görünmüyor" olarak değerlendirildi.
	   Yalnızca mobil/tablet'te (≤768) hafifçe koyulaştırıldı — hâlâ açık/
	   "hayalet" karakterini koruyor, koyu veya baskın hâle getirilmedi.
	   Etiket font-weight'i de (masaüstü 900) mobilde 700'e indirildi. */
	.stat__value {
		font-size: 90px;
		color: #dcdcdc;
	}

	.stat__label {
		font-size: 18px;
		font-weight: 700;
	}

	.stock-locations {
		margin-top: 32px;
	}

	/* ---------- Blog: tek kolon ---------- */
	.home-blog {
		margin-top: 56px;
	}

	.home-blog__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.home-blog__card:nth-child(3) {
		grid-column: auto;
	}

	.home-blog__card-title {
		font-size: 22px;
	}

	.contact-faq {
		margin-top: 64px;
	}

	.contact-card {
		padding: 24px;
	}

	.faq__question {
		font-size: 18px;
		padding-block: 22px;
	}

	.faq__answer {
		padding-bottom: 22px;
	}
}

@media (max-width: 480px) {
	.hero__title,
	.about__title,
	.stock-locations__title,
	.home-blog__title,
	.faq__title {
		font-size: 28px;
	}

	.contact-card__title {
		font-size: 26px;
	}

	.hero__content {
		padding: 24px var(--abn-gutter);
	}

	/* Revizyon 01 — kullanıcı kararı: 320px'e kadar iki kart YAN YANA
	   kalmaya devam eder (`width:100%` ile alt alta düşürülmez).
	   Revizyon 04 — kart yüksekliği/padding'i ≤1024 tier'ıyla AYNI
	   tutulur (92px/11px, "88-96px" hedefi 390px dahil tüm dar
	   genişliklerde korunmalı); yalnızca gap 10px'te sabit (kullanıcı
	   hedefi). */
	.hero__brands {
		gap: 10px;
	}

	.hero__brand {
		min-height: 92px;
		padding: 11px;
	}

	.about {
		margin-top: 40px;
	}

	.stats {
		margin-top: 28px;
	}

	/* Revizyon 02 — kullanıcı hedefi: 390px'te ~88-105px. 480px'in kendi
	   tier'ı (bu blok, 480'den 376'ya kadar — 390 dahil) 96px kullanır;
	   320/375 için ayrı, daha dar bir tier aşağıda tanımlanır (gerçek
	   içerik kırılma noktası: bu iki taraf farklı hedef bantlara sahip
	   olduğundan `clamp()` tek başına ikisini birden karşılayamıyordu). */
	.stat__value {
		font-size: 96px;
	}

	.stat__label {
		font-size: 16px;
	}

	.stock-locations {
		margin-top: 28px;
	}

	.home-blog {
		margin-top: 48px;
	}

	.home-blog__actions {
		margin-top: 32px;
	}

	.home-blog__button {
		width: 100%;
	}

	.contact-faq {
		margin-top: 48px;
	}

	.contact-card {
		padding: 20px;
	}

	.faq__question {
		font-size: 17px;
		gap: 12px;
	}
}

/* Revizyon 02 — kullanıcı hedefi: 320px'te büyük rakam ~76-90px bandında
   kalmalı (480 tier'ının 96px'i bu genişlikte hedefin üzerine çıkardı).
   Gerçek içerik kırılma noktası: 390 ve 320'nin farklı bantları
   `clamp()` ile tek kuralda karşılanamadığından ayrı, dar bir tier
   eklendi (yalnızca 375/320'i kapsar — 390/430/480 üstteki 96px'i
   kullanmaya devam eder). */
@media (max-width: 375px) {
	.stat__value {
		font-size: 82px;
	}

	.stat__label {
		font-size: 14px;
	}
}

/* ---------- Touch/coarse-pointer cihazlarda "sticky hover" önlemi ----------
   Masaüstü `:hover` kuralları (yukarıda) HİÇ değiştirilmedi/taşınmadı —
   gerçek fare/`hover:hover` cihazlarında davranış birebir aynı kalır. Bu
   blok yalnızca dokunmatik/kaba işaretçili cihazlarda (`hover:none` veya
   `pointer:coarse`) hover'ın tetiklediği transform'u geri alarak dokunma
   sonrası "takılı kalmış" zoom görünümünü önler. `prefers-reduced-motion`
   kuralları (yukarıda, her bölümde ayrı ayrı) bu bloktan etkilenmez. */
@media (hover: none), (pointer: coarse) {
	.hero__media:hover .hero__media-image,
	.about__media:hover .about__image,
	.stat:hover .stat__value,
	.home-blog__image-wrap:hover .home-blog__image {
		transform: scale(1);
	}
}