/*
 * SOGA Spaces — temel stiller (@layer reset + base + layout)
 *
 * KURAL: Burada hardcoded değer YOKTUR. Her renk/boşluk/tipografi
 * theme.json'dan gelen var(--wp--preset--*) veya var(--wp--custom--*).
 * Bileşen stilleri bu dosyaya GİRMEZ → assets/css/blocks/{bileşen}.css
 */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	img, svg, video { display: block; max-width: 100%; height: auto; }

	/* `hidden` özniteliği yalnızca TARAYICI VARSAYILANINDA `display:none`'dır;
	   üstteki satır gibi bir `display` kuralı onu SESSİZCE ezer. Bu projede iki
	   kez ısırdı: varyasyon filtresi "6/95" derken chip'ler ekranda duruyordu
	   (2026-08-01) ve mini sepette ürün görseli İKİ KEZ göründü (2026-08-02) —
	   WooCommerce oraya biri `hidden` iki `<img>` basıyor (Interactivity API,
	   `data-wp-bind--hidden`). Öznitelik seçici (0,1,0) eleman seçicisini (0,0,1)
	   yendiği için tek satır yeter; `!important` gerekmez. */
	[hidden] { display: none; }

	/* Form kontrolleri tipografiyi GÖVDEDEN devralır — tarayıcı onlara kendi
	   varsayılanını (Arial/monospace, 13.33px) verir ve tema fontu uygulanmaz.

	   ⚠️ Bu kural 2026-08-02'de bir tur boyunca KAYIPTI: hemen üstündeki ikon
	   bloğu eklenirken `.soga-ikon-sprite` kuralının kapanış `}`'ı düşmüş, bu
	   satır da onun İÇİNE yuvalanmıştı (`.soga-ikon-sprite button` olmuştu).
	   Sonuç sessizdi — CSS hata vermez. Ölçümle yakalandı: gövde Manrope 14px
	   iken `button`/`input`/`select` **Arial 13.33px**, `textarea` monospace;
	   altbilgideki bülten alanı ve düğmesi ekranda Arial basıyordu. Sepet/ödeme
	   formları kusuru maskeliyordu, çünkü `woocommerce.css §2.1` orada ayrıca
	   `font-family: inherit` veriyor — yani kusur yalnız Woo DIŞI yüzeylerde
	   görünüyordu.
	   Aynı eksik parantez `@layer base`'i de kapatmamış ve `layout`/`components`
	   katmanlarını `base`'in ALT katmanına düşürmüştü (CSSOM ile doğrulandı). */
	button, input, select, textarea { font: inherit; color: inherit; }
}

/* ---------------------------------------------------------------------------
   İKON SÖZLEŞMESİ — tek kaynak `inc/ikonlar.php` (SVG sprite).

   Her ikon aynı dili konuşur: ÇİZGİ tabanlı, `currentColor`, 1.4 kalınlık,
   yuvarlak uçlar. Ölçü metin boyutundan gelir (`1em`) — ikon bulunduğu bağlamın
   tipografisiyle birlikte büyür/küçülür; gerekiyorsa kullanım yerinde `width`
   ile ezilir. Bu kural, aynı ikonun sayfadan sayfaya farklı görünmesini
   (Osman 2026-08-02) tek noktadan engeller.
   --------------------------------------------------------------------------- */
@layer base {
	.soga-ikon {
		width: 1em;
		height: 1em;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.4;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex: none;
	}

	/* Sprite akıştan çıkar ama GİZLENMEZ — bkz. inc/ikonlar.php notu. */
	.soga-ikon-sprite {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}
}

@layer base {
	html { scroll-behavior: smooth; }

	body {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}

	/* Ekran okuyucu metni (WP .screen-reader-text ile uyumlu) */
	.soga-gizli,
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* İçeriğe geç bağlantısı — WCAG 2.4.1 */
	.skip-link:focus {
		position: fixed;
		inset-block-start: var(--wp--preset--spacing--30);
		inset-inline-start: var(--wp--preset--spacing--30);
		z-index: 999;
		width: auto;
		height: auto;
		clip-path: none;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--inverse);
	}
}

@layer layout {
	/* Tam genişlik: WordPress'in kendi `alignfull` mekanizması kullanılır.
	   Kendi sınıfımızla (.soga-tam) denendi ve ÇALIŞMADI — WP'nin layout CSS'i
	   katmansız (unlayered) olduğu için @layer içindeki her kuralımızı yener.
	   Ders: WP ile specificity savaşına girme, kaçış kapısını kullan. */
	.alignfull > img { width: 100%; }

	.soga-bolum { padding-block: var(--wp--preset--spacing--80); }
	/* `.soga-bolum--sik` KALDIRILDI 2026-08-17: hiçbir şablon, desen, PHP ve
	   DB içeriğinde kullanılmıyordu (ölçüldü, 0 kayıt). */

	/* 🔑 ARDIŞIK BÖLÜMDE BOŞLUK TEK KAYNAKTAN (Osman 2026-08-06: *"global
	   spacing-system haricinde rastgele boşluklar olmasın"*).
	   Ölçüldü: iki bölüm yan yana geldiğinde 96 (üsttekinin altı) + 96
	   (alttakinin üstü) = **192px** düşüyordu; /hakkimizda/ ve /wood/ ölçümünde
	   192 ve 197px çıktı ve sayfa ikiye bölünmüş görünüyordu. Bölüm ritmi artık
	   her yerde tek dolgu genişliğinde: 96px (mobilde 48px).
	   Not: bölümün KENDİ alt dolgusu korunur — sayfanın son bölümü altbilgiye
	   yapışmasın diye. */
	.soga-bolum + .soga-bolum,
	.soga-bolum + .soga-bolum--sik,
	.soga-bolum--sik + .soga-bolum {
		padding-block-start: 0;
	}

	/* 🔑 SAYFA BAŞI BANDINDAN SONRAKİ İLK BÖLÜM (Osman 2026-08-06: *"sayfa
	   başından sonra aşırı fazla boşluk var, tüm site genelinde global
	   standartta çöz, net ve hiyerarşik olsun"*).

	   Ölçüldü (6 sayfa): bant kendi 48px alt dolgusunu veriyor, ardından gelen
	   ilk bölüm ÜSTÜNE 96px daha ekliyordu → araya 144px giriyordu; /iletisim/'de
	   başlık ile harita arasındaki boşluk buydu.

	   Hiyerarşi tek cümlede: bölümler arası 96px · bant→ilk bölüm 48+48=96px ·
	   yani sayfanın her yerinde bölüm ritmi AYNI genişlikte kalır, bandın kendi
	   dolgusu ikinci kez sayılmaz.

	   İki seçici, çünkü bant iki farklı yerde durabiliyor: şablonda doğrudan
	   `<main>`in çocuğu (arşiv/arama) veya `template-part` sarmalayıcısı içinde
	   (sayfa/vitrin/sepet) — ikinci durumda bant, içerikle KARDEŞ değildir. */
	.soga-sayfa-basi + .soga-bolum,
	.soga-icerik > .wp-block-post-content > .soga-bolum:first-child {
		padding-block-start: var(--wp--preset--spacing--60);
	}

	@media (max-width: 620px) {
		.soga-sayfa-basi + .soga-bolum,
		.soga-icerik > .wp-block-post-content > .soga-bolum:first-child {
			padding-block-start: var(--wp--preset--spacing--40);
		}
	}

	@media (max-width: 620px) {
		.soga-bolum { padding-block: var(--wp--preset--spacing--60); }
	}
}

@layer components {
	/*
	 * Görsel yakınlaşma — TEK KANONİK TANIM.
	 * Site genelindeki tüm medya hover davranışı burada yaşar; bileşen
	 * başına tekrar yazılmaz. Yeni bir medya kapsayıcısı eklenirken
	 * aşağıdaki iki listeye birer satır eklenir.
	 */
	/* Kapsayıcı listesi — yeni medya alanı eklenince YALNIZ buraya satır eklenir.
	   `.soga-urun__gorsel` kaldırıldı: hiçbir şablonda kullanılmıyordu (ölü seçici,
	   mockup'tan kalmış). Yerine gerçek WooCommerce kapsayıcıları yazıldı. */
	.soga-hero__panel img,
	.soga-kategori img,
	.soga-mega__kart img,
	.soga-urunler .wc-block-components-product-image img,
	.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper img {
		transition:
			transform var(--wp--custom--zoom-duration) var(--wp--custom--zoom-easing),
			filter    var(--wp--custom--zoom-duration) var(--wp--custom--zoom-easing);
		transform-origin: center;
	}

	.soga-medya:hover img,
	.soga-hero__panel:hover img,
	.soga-kategori:hover img,
	.soga-mega__kart:hover img,
	.soga-mega__kart:focus-visible img,
	.soga-urunler .wc-block-product:hover .wc-block-components-product-image img,
	.soga-urunler .wc-block-product:focus-within .wc-block-components-product-image img,
	.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper:hover img {
		transform: scale(var(--wp--custom--zoom-scale));
	}

	.soga-hero__panel:hover img { filter: brightness(var(--wp--custom--zoom-brightness)); }

	/* Hareket azaltma tercihi — WCAG 2.3.3 */
	@media (prefers-reduced-motion: reduce) {
		.soga-medya img, .soga-hero__panel img, .soga-kategori img,
		.soga-mega__kart img,
		.soga-urunler .wc-block-components-product-image img,
		.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper img {
			transition: none;
		}
		.soga-medya:hover img, .soga-hero__panel:hover img, .soga-kategori:hover img,
		.soga-mega__kart:hover img, .soga-mega__kart:focus-visible img,
		.soga-urunler .wc-block-product:hover .wc-block-components-product-image img,
		.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper:hover img {
			transform: none;
		}
	}
}

/*
 * ============================================================
 * MEDYA ÇERÇEVESİ — TEK KANONİK ORAN/DOLDURMA TANIMI
 * ============================================================
 * Bu blok bilerek @layer DIŞINDA. WooCommerce görsellere katmansız
 * `object-fit: contain` yazıyor; katmansız stiller katmanlıları her zaman
 * yendiği için @layer içinde kalsaydı sessizce kaybederdi (ölçüldü: contain).
 *
 * Ne yapar: kapsayıcı oranı dayatır, görsel MERKEZDEN kırpılarak oranını
 * koruyup alanı tamamen doldurur. Ürün görselleri farklı oranlarda yükleniyor
 * (ölçüldü: 512×396, 512×704, 512×512) — bu kural olmadan ızgarada yamukluk
 * ve boşluk oluşur.
 *
 * Yeni bir medya alanı eklenirken YALNIZ aşağıdaki iki listeye satır eklenir;
 * bileşen dosyalarında object-fit/width/height TEKRAR YAZILMAZ.
 */
/* `.soga-medya` iki listeden de KALDIRILDI 2026-08-17: genel amaçlı bir medya
   sınıfı olarak tasarlanmıştı ama hiçbir şablon/desen/PHP ve DB kaydı onu
   kullanmıyordu (ölçüldü, 0). Yeni bir medya alanı gerekirse gerçek kapsayıcı
   seçicisi bu iki listeye eklenir — kullanılmayan bir ara sınıf üzerinden değil. */
.soga-kategori,
.soga-urunler .wc-block-components-product-image,
.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper {
	overflow: hidden;
	background: var(--wp--preset--color--image-bg);
}

.soga-medya img,
.soga-urunler .wc-block-components-product-image img,
.soga-urun__galeri .wc-block-product-gallery-large-image__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/*
 * ============================================================
 * ARAYÜZ BAĞLANTISI — TEK KANONİK HOVER ÇİZGİSİ
 * ============================================================
 * Osman 2026-08-05: *"hoverlar, İncele yazısı vs, hover olduğunda soldan sağa
 * gelen underline efektli olsun; tek tip, bu sayede her yerde farklı hover
 * efekti sorunu çözülmüş olur."*
 *
 * Öncesi ölçüldü: aynı işi yapan ÜÇ ayrı dil vardı — altbilgi 4px offset'li
 * `underline`, hero 5px offset'li `underline`, megamenü offset'siz `underline`;
 * hepsi anında beliriyordu. Buradaki tek tanım üçünü de değiştirir.
 *
 * `text-decoration` ANİME EDİLEMEZ (soldan sağa büyüyen bir alt çizgi
 * üretemez) — bu yüzden çizgi `::after` ile çiziliyor ve `scaleX` ile açılıyor.
 *
 * ⚠️ Blok @layer DIŞINDA: hedeflerin bir kısmı WordPress navigasyon bloğunun
 * öğeleri ve WP onlara katmansız CSS yazıyor; katmanlı bir kural sessizce
 * kaybederdi (bu projede dört kez yaşandı).
 *
 * ⚠️ Kapsam ARAYÜZ bağlantılarıdır: menü, megamenü, altbilgi, hero eylemi.
 * İçerik metnindeki bağlantılar `theme.json > elements.link` ile sabit alt
 * çizgide kalır — orada çizginin yalnız hover'da belirmesi bağlantıyı okurken
 * görünmez yapar (WCAG 1.4.1: renk tek ayırt edici sinyal olamaz).
 *
 * Yeni bir arayüz bağlantısı eklenirken YALNIZ aşağıdaki iki listeye satır
 * eklenir; bileşen dosyasında `text-decoration: underline` TEKRAR YAZILMAZ.
 */
/* `.soga-mega__cta` bu listede YOK: kendi dosyasında zaten `position: absolute`
   ve `::after` mutlak konumlu bir ataya da göre konumlanır. Buraya yazılsaydı
   `position: relative` onu ezmeye çalışır, yükleme sırası (megamenu.css sonra)
   sayesinde etkisiz kalır ve dosyada "yazılı ama işlemeyen kural" bırakırdı. */
.soga-ust__menu .wp-block-navigation-item__content,
.soga-topbar__menu a,
.soga-mega__kategoriler a,
.soga-alt a,
.soga-hero__link {
	position: relative;
	text-decoration: none;
}

.soga-ust__menu .wp-block-navigation-item__content::after,
.soga-topbar__menu a::after,
.soga-mega__kategoriler a::after,
.soga-mega__cta::after,
.soga-alt a::after,
.soga-hero__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.28em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--transition-cizgi);
}

/* Tetikleyiciler. Bir kısmı ÖĞENİN KENDİSİ değil, kapsayıcısının hover'ı:
   hero'da metin bloğunun tamamı düğmeye gider, megamenüde "İncele" kartın parçası.
   ⚠️ Hero tetikleyicisi `.soga-hero__panel` DEĞİL `.soga-hero__ic` (2026-08-18):
   tıklanabilir alan metin bloğuyla sınırlı, panel hover'ı çizgiyi görselin
   üstünde de yakıyordu — tıklanamayan yerde tıklanabilir sinyali vermek yanıltıcı. */
.soga-ust__menu .wp-block-navigation-item__content:hover::after,
.soga-ust__menu .wp-block-navigation-item__content:focus-visible::after,
.soga-topbar__menu a:hover::after,
.soga-topbar__menu a:focus-visible::after,
.soga-mega__kategoriler a:hover::after,
.soga-mega__kategoriler a:focus-visible::after,
.soga-mega__kart:hover .soga-mega__cta::after,
.soga-mega__kart:focus-visible .soga-mega__cta::after,
.soga-alt a:hover::after,
.soga-alt a:focus-visible::after,
.soga-hero__ic:hover .soga-hero__link::after,
.soga-hero__link:hover::after,
.soga-hero__link:focus-visible::after {
	transform: scaleX(1);
}

/* Hareket azaltma — WCAG 2.3.3. Çizgi kaybolmaz, animasyonsuz belirir. */
@media (prefers-reduced-motion: reduce) {
	.soga-ust__menu .wp-block-navigation-item__content::after,
	.soga-topbar__menu a::after,
	.soga-mega__kategoriler a::after,
	.soga-mega__cta::after,
	.soga-alt a::after,
	.soga-hero__link::after {
		transition: none;
	}
}