/*
 * 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ı. */
.about {
	display: grid;
	grid-template-columns: minmax(0, 690fr) minmax(0, 605fr);
	align-items: start;
	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%;
	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: auto;
	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 #666666;
	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);
}

.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 #666666;
	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);
}

.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 #666666;
	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);
}

.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 #666666;
	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);
}

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