/* ============================================================================
   FORM DİLİ — tek kanonik tanım
   ----------------------------------------------------------------------------
   NEDEN AYRI DOSYA (2026-08-06): bu kurallar `urun-tekil.css` içinde yaşıyordu,
   yani YALNIZ ürün sayfasında yükleniyordu. `/iletisim/` sayfasına çalışan bir
   form eklenince aynı ızgara dili ikinci bir yüzeyde gerekti. Kural: bir
   bileşenin CSS'i TEK dosyada yaşar, kopyalanmaz → dosya taşındı, `urun-tekil.css`
   içindeki kopyası SİLİNDİ (işaretçi yorumu orada duruyor).

   `buton.css` ile aynı gerekçeyle GLOBAL kuyruğa alınır: form yüzeyi ürün,
   iletişim, hesap ve ödeme akışlarının hepsinde var — blok koşullu yüklemek
   dört ayrı tetikleyici bakımı demek olurdu.

   KATMANSIZ yazılır: WooCommerce ve WordPress kendi form stillerini katmansız
   yazar, katmansızlar katmanlıları her zaman yener (CLAUDE.md §4 `@layer` kuralı).
   ============================================================================ */

/* Fiyatsız ürünün kalıcı teklif akışı. */
.soga-teklif-formu {
	/* Izgara kararı KONTEYNERİN genişliğine bağlı, ekranınkine değil: bu form
	   dar bilgi kolonunun içinde yaşıyor ve kolon genişliği kırılma noktasıyla
	   bire bir örtüşmüyor. Ölçüm (2026-08-05): masaüstü 1440px'te kolon içi form
	   yalnız **344px** — `@media` "geniş ekran" derken form fiilen dardı. */
	container-type: inline-size;
	/* 🔴 KENDİ İÇERİĞİ KADAR YÜKSEL — bilgi kolonu galeri boyuna uzuyor (ölçüldü
	   2026-08-05: kolon **2368px**) ve varsayılan `stretch` bu kutuyu da onunla
	   birlikte **1733px**'e çekiyordu. */
	align-self: start;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border-light);
}
.soga-teklif-formu__etiket {
	/* `spacing--10` TANIMSIZ (tema ölçeği 20'den başlar) → geçersiz değer
	   `margin` kısayolunun TAMAMINI düşürüyordu, etiket alt boşluksuz kalıyordu.
	   Sessiz hata; ekranda "eksik boşluk" olarak görünür. (2026-08-05) */
	margin: 0 0 var(--wp--preset--spacing--20);
	/* 🔴 `font-size--eyebrow` TANIMSIZDI (2026-08-05 ölçüldü). Tema ölçeğinde öyle
	   bir ad yok — geçersiz değer, bildirimin tamamını düşürür. Sonuç: bu etiket
	   ve aşağıdaki h2 kalıtımla 14px'e iniyor, ikisi de aynı boyutta görünüyordu.
	   `spacing--10` ile aynı sınıf hata; tanımsız token SESSİZ başarısızlıktır. */
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--track-wide);
}
.soga-teklif-formu h2 {
	/* `font-size--heading-4` de TANIMSIZDI → başlık etiketle aynı boyuta düşüyordu.
	   `category` (16) bilgi kolonunun kendi ölçeğine oturur, H1'i (30) gölgelemez. */
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--category);
	font-weight: 700;
}
.soga-teklif-formu__form {
	/* 🔴 VARSAYILAN TEK SÜTUN (2026-08-05). Eskiden koşulsuz 2 sütundu; ölçümde
	   form 344px olduğu için her alan **164px**'e düşüyordu — "Ad Soyad" bile
	   sığmıyordu. Osman'ın "teklif formu patlamış" dediği görüntünün kaynağı bu.
	   İki sütuna ancak konteyner gerçekten genişse çıkılır. */
	display: grid;
	grid-template-columns: 1fr;
	/* 🔴 SATIRLAR İÇERİK KADAR (2026-08-05). Kutu stretch ile uzayınca ızgaranın
	   varsayılan `normal` hizası artan boşluğu SATIRLARA dağıtıyordu: ölçümde her
	   alan satırı **202px**'e şişmiş, etiket ile kendi girdisi arasında ~150px
	   boşluk oluşmuştu. `start` boşluğu kutunun altında bırakır. */
	align-content: start;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}
@container (min-width: 30rem) {
	.soga-teklif-formu__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── BAŞVURU FORMLARI (İK · distribütör) — EKRANA GÖRE 1 / 2 / 3 SÜTUN ─────
   Osman 2026-08-06: *"adınız soyadınız tek satır ama büyük ekranda gerek yok,
   yanına e-posta hatta 3. label bile sığar — otomatik ayarlayabilir misin"*.

   🔑 KÖK NEDEN: ızgara zaten container query ile 2 sütuna çıkıyordu ama
   `.soga-basvuru-formu` **container-type taşımıyordu** (ölçüldü: ata zincirinin
   tamamı `normal`) → sorgu hiç tetiklenmiyor, form 1068px'lik kapta bile TEK
   sütun kalıyordu. İletişim formunda çalışmasının sebebi `.soga-iletisim-formu`
   üzerindeki `inline-size`. Eksik olan kural buydu; yeni bir düzen dili değil.

   Eşikler konteynerin kendi genişliğine bakar, ekrana değil — form dar bir
   sütunun içindeyse (yasal şablonun sağ kolonu) doğru davranır. `__genis`
   taşıyan alanlar (textarea · dosya · onay · gönder) satırın tamamını kaplamaya
   devam eder, o kural aşağıda. */
.soga-basvuru-formu {
	container-type: inline-size;
}

@container (min-width: 60rem) {
	.soga-basvuru-formu__form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Izgara çocuğu ARTIK `div.__alan` — `label` değil. Gerekçe `inc/teklif-modu.php`
   içinde: `wpautop` blok listesinde olmayan her inline içeriği tek `<p>`ye topluyor,
   dolayısıyla label'a yazılan kurallar (bu blok dahil) sessizce ıskalıyordu. */
.soga-teklif-formu__gizli {
	display: none;
}
.soga-teklif-formu__alan > label {
	display: grid;
	gap: var(--wp--preset--spacing--20); /* `--10` tanımsızdı → gap hiç uygulanmıyordu */
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
/* `select` de buraya dahil: adet alanı 2026-08-05'te serbest sayıdan aralık
   seçimine döndü, aynı görsel dili almalı (yoksa tarayıcı varsayılanıyla
   diğer alanlardan farklı yükseklik ve çerçeve alır). */
.soga-teklif-formu__form :where(input, textarea, select) {
	width: 100%;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 0;
	background: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--ink);
	font: inherit;
}
.soga-teklif-formu__form select {
	/* Yerel ok yerine tema oku — `appearance:none` olmadan yükseklik platforma
	   göre kayıyor. Ok, ikon setine bağımlılık kurmamak için data-URI. */
	appearance: none;
	padding-inline-end: calc(var(--wp--preset--spacing--20) * 3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23322c2c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--20) center;
	background-size: 16px 16px;
}
.soga-teklif-formu__form :where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}
.soga-teklif-formu__genis {
	grid-column: 1 / -1;
}
/* `!important` KALDIRILDI — çakışma özgüllükle çözüldü: bu seçici (0,2,1),
   `.soga-teklif-formu__alan > label` (0,1,1) kuralını zaten yener. */
.soga-teklif-formu__alan > label.soga-teklif-formu__onay {
	grid-template-columns: auto 1fr;
	align-items: start;
	font-weight: 500;
}
.soga-teklif-formu__onay input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}
.soga-teklif-formu__tuzak {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.soga-teklif-formu__mesaj {
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid currentColor;
}
.soga-teklif-formu__mesaj--basarili {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--faint);
}
.soga-teklif-formu__mesaj--hata {
	color: var(--wp--preset--color--danger);
}

/* ============ İLETİŞİM SAYFASI FORMU ============
   Ürün formuyla AYNI ızgara ve alan dilini kullanır; farkı bağlamı: burada form
   dar bir bilgi kolonunun içinde değil, sayfanın kendi sütununda yaşıyor.
   Bu yüzden çerçeve ve iç dolgu YOK — sayfa bölümü zaten onu veriyor. */
.soga-iletisim-formu {
	/* Izgara kararı yine konteynerden: iletişim sayfası iki kolonlu ve form
	   sütunu 1440px'te ~700px, 980px'te tek sütuna düşüyor. `@media` bu geçişi
	   göremez çünkü kırılma noktası sütunun kendi genişliği. */
	container-type: inline-size;
}
/* Form başlığı `section` kademesinde. Ölçüldü 2026-08-06: h2 varsayılanla 36px
   basıyordu ve sayfanın en üstündeki "İLETİŞİM" h1'iyle yarışıyor, ikinci bir
   sayfa başlığı gibi okunuyordu. Kapsam DAR tutuldu (`.soga-iletisim-formu`
   altında): aynı `.soga-baslik` sınıfını vitrinin "Öne Çıkan Ürünler" başlığı
   da taşıyor, oraya dokunulmamalı. */
.soga-iletisim-formu .soga-baslik {
	font-size: var(--wp--preset--font-size--section);
}
.soga-iletisim-formu__giris {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--body);
}
.soga-iletisim-formu .soga-teklif-formu__mesaj {
	margin-block-start: var(--wp--preset--spacing--30);
}