/* ==========================================================================
   BakırBul — özel stil dosyası
   Bu dosya tools/deploy.py ile canlıya dağıtılır (stil-<timestamp>.css adıyla).
   Customizer "Ek CSS" alanına YAZMA — oradaki metin bu dosyayı sessizce ezer.
   Marka paleti:
     aksiyon #cf3700 | koyu aksiyon #932700 | espresso #2B1D16
     krem  #F7F1E8 | kum        #D9C3A5 | kızıl vurgu #8C2F1B
     footer zemini #1C1512 | çizgi #e5e5e5 / #f1ece4
   2026-08-07: bakır #B87333 / #A05F28 arayüzden tamamen kaldırıldı, yerini
   aksiyon rengi aldı. Bakır artık sadece logo/görsellerde geçerli.
   ========================================================================== */

:root {
	/* Adları geriye dönük uyumluluk için duruyor, değerleri aksiyon rengi. */
	--zbx-bakir: #cf3700;
	--zbx-bakir-koyu: #932700;
	--zbx-espresso: #2b1d16;
	--zbx-krem: #f7f1e8;
	--zbx-kum: #d9c3a5;
	--zbx-kizil: #8c2f1b;
	--zbx-footer: #1c1512;
	--zbx-cizgi: #e5e5e5;

	/* Aksiyon renkleri (2026-08-07) — sepete ekle butonları ve fiyatlar. */
	--zbx-aksiyon: #cf3700;
	--zbx-aksiyon-koyu: #932700;
	/* Dekoratif vurgu — bölüm çizgileri, "Tümünü Gör →", koyu zeminde ok işareti.
	   CLAUDE.md paletinde vardı ama değişken olarak tanımlı değildi. */
	--zbx-vurgu: #de5d31;
	/* Kart merdiveni — 2026-08-11 kullanıcı kararı. Toptan hub'ında dört kart
	   grubunun zemini; tek turuncunun dört basamağı, koyudan açığa.
	   Yasaklı bakır tonu (#B87333) DEĞİL. CLAUDE.md paletine de işlendi. */
	--zbx-kart-1: #ffaa66;
	--zbx-kart-2: #ffbf8b;
	--zbx-kart-3: #ffd4b1;
	--zbx-kart-4: #ffead8;
	--zbx-kargo: #007CAA;
	--zbx-kargo-koyu: #005f93;

	/* Tekil ürün aksiyonları.
	   2026-08-09: "Şimdi Al" LACİVERT ZEMİNDEN ÇIKARILDI (Osman kararı —
	   "mavi background'u kaldır"). Artık kenarlıklı (outline): zemin şeffaf,
	   çerçeve ve yazı aksiyon renginde; üzerine gelince içi doluyor.
	   Böylece "Sepete Ekle" (dolu, ana renk) tek baskın buton kalıyor ve
	   sayfada mavi hiç kullanılmıyor.
	   Eski --zbx-hemenal / -koyu / -yazi değişkenleri kaldırıldı; artık
	   --zbx-aksiyon kullanılıyor. */
	--zbx-wa: #0a7c2f;
	--zbx-wa-koyu: #06601f;
	--zbx-kart-cizgi: #c7c8c9;
}

/* --------------------------------------------------------------------------
   BLOCKSY BUTON DEĞİŞKENLERİ — CDN'e karşı sigorta (2026-08-08)

   Blocksy genel buton rengini `--theme-button-*` değişkenlerinden okuyor ve
   bunları `uploads/blocksy/css/global.css` üretiyor. Orada değer artık doğru
   (#cf3700), ama LiteSpeed'in birleştirdiği CSS dosyasının URL'i içerik
   değişse de AYNI kalıyor; Hostinger CDN o URL'i 1 yıllık TTL ile önbelleğe
   almış ve bakırlı eski kopyayı servis etmeye devam ediyor. CDN önbelleği
   elle boşaltılana kadar (ve ileride tekrar olursa) bu blok değeri sabitler.

   `:root:root` bilerek: Blocksy'nin düz `:root` kuralını spesifiklikle ezer,
   kaynak sırasına bağlı kalmaz.
   -------------------------------------------------------------------------- */
:root:root {
	--theme-button-background-initial-color: var(--zbx-aksiyon);
	--theme-button-background-hover-color: var(--zbx-aksiyon-koyu);
}

/* --------------------------------------------------------------------------
   FİLTRE (HUSKY/WOOF) — o kategoride ürünü olmayan seçenekleri gizle
   HUSKY sıfır seçenekleri silmiyor, `disabled` yapıp ekranda bırakıyor.
   Müşteri tıklayamadığı 25+ ölü seçenek görüyor. Gizliyoruz; hepsi ölü olan
   blok da başlığıyla birlikte kalkıyor. JS yedeği betik.js'te (AJAX sonrası).
   -------------------------------------------------------------------------- */
.woof_list li:has(input[disabled]) { display: none !important; }
/* ⚠ `:has(.woof_list)` ön koşulu ŞART: fiyat kaydıracı ve hacim gibi bloklar
   checkbox listesi içermez; o koşul olmadan `:not(:has(…))` onları da "tüm
   seçenekleri ölü" sayıp gizler (2026-08-08'de fiyat filtresi bu yüzden
   kaybolmuştu). */
.woof_container:has(.woof_list):not(:has(.woof_list li:not(:has(input[disabled])))) { display: none !important; }
.zbx-woof-bos { display: none !important; }

/* --------------------------------------------------------------------------
   ÜRÜN KART GÖRSELİ — kırpma yok, ürün tam görünsün
   Katalog karışık oranda geliyor: 600x900 (2:3), 1000x1000 (1:1), 600x400 (3:2)…
   Eskiden kart 3:4 kutuya `object-fit: cover` ile basıyordu; kare görseller
   yanlardan kesiliyor, ürünün bir kısmı ve sağ alt köşe ekrandan taşıyordu.
   Artık `contain`: görsel kutuya tam sığıyor. Kart yüksekliği `aspect-ratio`
   ile sabit kaldığı için grid hizası bozulmuyor.
   WooCommerce tarafında da kırpma kapalı (`woocommerce_thumbnail_cropping =
   uncropped`) — snippet 417 bunu koruyor.
   Bu kural WPCode snippet 416'dan buraya taşındı: WPCode kendi önbelleğinden
   eski sürümü servis ediyordu ve düzeltme canlıya hiç çıkmıyordu.
   -------------------------------------------------------------------------- */
ul.products li.product figure .ct-media-container,
body.home ul.products li.product figure .ct-media-container,
.woocommerce ul.products li.product figure .ct-media-container,
ul.products li.product .ct-media-container {
	aspect-ratio: 3 / 4 !important;
	background: #fff !important;
}
ul.products li.product .ct-media-container img,
ul.products li.product img.wp-post-image {
	object-fit: contain !important;
	object-position: center !important;
	width: 100% !important;
	height: 100% !important;
}

/* --------------------------------------------------------------------------
   ÜRÜN SAYFASI GALERİSİ — ekrana sığsın
   Tedarikçi görselleri 2:3 dikey (600x900). Blocksy galeriyi tam genişlikte
   basınca ~960px yüksekliğe çıkıyor, ürün adı/fiyat/Sepete Ekle ekranın
   altında kalıyordu. Görseli görünür alanla sınırlıyoruz; oran korunuyor
   (object-fit: contain), kırpma yok.
   -------------------------------------------------------------------------- */
.single-product .woocommerce-product-gallery,
.single-product .ct-product-gallery-container { max-height: 74vh; }
.single-product .woocommerce-product-gallery .flexy-item img,
.single-product .ct-product-gallery-container .flexy-item img {
	max-height: 74vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}
.single-product .woocommerce-product-gallery .ct-media-container {
	display: flex; align-items: center; justify-content: center;
}
/* küçük resim şeridi de daralsın */
.single-product .flexy-pills img, .single-product [data-flexy-pills] img { max-height: 84px; width: auto; }

@media (max-width: 999px) {
	.single-product .woocommerce-product-gallery,
	.single-product .ct-product-gallery-container { max-height: 58vh; }
	.single-product .woocommerce-product-gallery .flexy-item img,
	.single-product .ct-product-gallery-container .flexy-item img { max-height: 58vh; }
}

/* --------------------------------------------------------------------------
   HEADER ARAMA ÇUBUĞU (2026-08-06)

   Masaüstü: logo solda, arama çubuğu ortada — beyaz kutu, sağ ucunda submit
   butonu. Çerçeve 2026-08-11'de kum (--zbx-kum); öncesinde kargo mavisiydi
   (--zbx-kargo) ve turuncu butonun yanında sırıtıyordu.
   Formu WPCode 387 basıyor, butonu betik.js ekliyor; buradaki
   kurallar 387'nin (gri hap görünüm), 399'un (`background:#EEEEF0 !important`)
   ve 410'un (`height:40px !important`) kurallarını eziyor — bu yüzden seçiciler
   bilerek daha spesifik ve `!important`. O üç snippet'e dokunulmadı: WPCode
   yazımları WP-CLI'dan `wpcode_edit_snippets` yetkisi olmadan reddediyor ve
   WPCode kendi önbelleğinden eski kodu servis edebiliyor (bilinen tuzak).

   Mobil: hamburger sol / logo orta / sepet sağ + ikinci satırda ortalanmış,
   dar arama çubuğu. Sticky durumda (body.zbx-scrolled, snippet 375) arama
   satırı gizlenir ki sabitlenen header ince kalsın.
   -------------------------------------------------------------------------- */

/* --- masaüstü DÜZEN (2026-08-10 hız turu, WPCode 387'den taşındı) ---

   ⚠ Bu kurallar önce WPCode 387'nin `wp_footer` (öncelik 98) ile bastığı
   `<style id="zbk-karaca-header-css">` bloğundaydı. `</body>`'ye yakın basıldığı
   için tarayıcı ilk boyamayı Blocksy varsayılanıyla yapıyordu: menü BÜYÜK HARF,
   arama çubuğu yok (yerine native arama ikonu), hesap linkleri yok. Stil ancak
   parser oraya ulaşınca uygulanıyor, header gözle görülür biçimde yeniden
   kuruluyordu. Kurallar buraya (head'de yüklenen stil.css) alındı — sıçramanın
   CSS ayağı böylece kapandı. Markup ayağı için bkz. `zbx_masaustu_header_kur()`.

   Sütun sırası DOM sırasıdır: start(logo) → middle(arama) → end(linkler). */
.ct-header [data-device="desktop"] [data-row="middle"] .ct-container {
	grid-template-columns: auto 1fr auto !important;
	align-items: center !important;
	column-gap: 24px;
}
.zbk-middle-col {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0 24px;
}
/* Blocksy'nin native arama/sepet ikonları gizli — yerlerini .zbk-links alıyor.
   Seçici `[data-device="desktop"] [data-row="middle"]` ile daraltıldı ki
   mobil kopyaya (aynı data-id'ler orada da var) sızmasın. */
.ct-header [data-device="desktop"] [data-row="middle"] [data-id="search"],
.ct-header [data-device="desktop"] [data-row="middle"] [data-id="cart"] {
	display: none !important;
}
.ct-header [data-device="desktop"] [data-row="middle"] [data-column="end"] > [data-items="primary"] {
	display: flex !important;
	align-items: center;
	gap: 0;
}
.zbk-links {
	display: flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
	margin-left: 4px;
}
.zbk-links a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #2B1D16;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease;
}
.zbk-links a:hover { color: var(--zbx-aksiyon); }
.zbk-links a svg { width: 20px; height: 20px; flex: 0 0 auto; }
.zbk-sep { width: 1px; height: 18px; background: #e5e5e5; margin: 0 2px; }
@media (max-width: 1300px) {
	.zbk-links a span { display: none; }
	.zbk-links a svg { width: 22px; height: 22px; }
}

/* Alt satır: menü tipografisi + tam genişlik yayılma + çizgiler.
   Bunlar hiçbir DOM değişikliğine bağlı değil; geç geldikleri için menü
   ilk boyamada BÜYÜK HARF görünüp sonra Title Case'e dönüyordu. */
.ct-header [data-device="desktop"] [data-row="bottom"] .ct-menu-link {
	text-transform: none !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	letter-spacing: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.ct-header [data-device="desktop"] [data-row="bottom"] #menu-ana-menu.menu {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
}
.ct-header [data-device="desktop"] [data-row="bottom"] #menu-ana-menu.menu > .menu-item { margin: 0 !important; }
.ct-header [data-device="desktop"] [data-row="bottom"] {
	border-top: 1px solid #e5e5e5 !important;
	border-bottom: 1px solid #e5e5e5 !important;
}

/* --- masaüstü --- */
.ct-header [data-device="desktop"] form.zbk-search {
	display: flex !important;
	align-items: stretch !important;
	max-width: 620px;
	background: #fff !important;
	/* 2026-08-11: Çerçeve kargo mavisinden (--zbx-kargo #005f93) KUM'a alındı.
	   Buton aksiyon turuncusu olduğu için mavi çerçeve yanında sırıtıyordu
	   (kullanıcı geri bildirimi). Kum, CLAUDE.md paletinde zaten "kart/arama
	   çerçeveleri" için tanımlı renk. Odakta aksiyon rengine geçiyor. */
	border: 1px solid var(--zbx-kum) !important;
	border-radius: 10px !important;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-header [data-device="desktop"] form.zbk-search:focus-within {
	border-color: var(--zbx-aksiyon) !important;
	box-shadow: 0 0 0 3px rgba(207, 55, 0, .14);
}
.ct-header [data-device="desktop"] form.zbk-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 16px !important;
	font-size: 14.5px;
	color: #2B1D16;
	background: #fff !important;
	outline: none;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.ct-header [data-device="desktop"] form.zbk-search input[type="search"]::placeholder { color: #9c8770; }
/* 387'nin kendi `@media(max-width:1300px)` daraltması artık bu seçiciye
   yetişemiyor (spesifiklik), daraltmayı burada tekrarlıyoruz. */
@media (max-width: 1300px) {
	.ct-header [data-device="desktop"] form.zbk-search { max-width: 460px; }
}

/* --- ortak buton (masaüstü + mobil) --- */
.ct-header form.zbk-search .zbk-search-btn,
.ct-header form.zbx-msearch .zbx-msearch-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* 2026-08-09: kargo mavisiydi (#005f93). O renk paletde YALNIZ ücretsiz
	   kargo rozetine ait; buton rengi her yerde aksiyon rengi olmalı. */
	background: var(--zbx-aksiyon);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
/* Yükseklik forma göre esnesin — 1-2px'lik kenar boşluğu kalmasın. */
.ct-header form.zbk-search .zbk-search-btn,
.ct-header form.zbx-msearch .zbx-msearch-btn { align-self: stretch; height: auto; }
.ct-header form.zbk-search .zbk-search-btn { width: 58px; }
.ct-header form.zbx-msearch .zbx-msearch-btn { width: 46px; }
.ct-header form.zbk-search .zbk-search-btn:hover,
.ct-header form.zbx-msearch .zbx-msearch-btn:hover { background: var(--zbx-aksiyon-koyu); }
.ct-header form.zbk-search .zbk-search-btn svg { width: 19px; height: 19px; display: block; }
.ct-header form.zbx-msearch .zbx-msearch-btn svg { width: 17px; height: 17px; display: block; }

/* --- mobil ---

   2026-08-10 (hız turu): bu düzen eskiden JS ile kuruluyordu — WPCode 405
   hamburgeri sağdan sola TAŞIYOR, betik.js logonun KLONUNU ortaya koyuyordu.
   Tarayıcı önce Blocksy'nin varsayılan düzenini boyayıp sonra JS'in kurduğu
   düzene atlıyordu (kullanıcının bildirdiği "hamburger önce sağda, sonra solda").

   Artık hiçbir düğüm taşınmıyor: sütun ve `[data-items]` sarmalayıcıları
   `display:contents` ile düzleştiriliyor, sıra `order` ile veriliyor. CSS ilk
   boyamadan önce uygulandığı için atlama fiziksel olarak imkânsız.
   Arama satırını `bakirbul-custom.php` (zbx_mobil_header_kur) basıyor. */
@media (max-width: 999px) {
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-container {
		display: flex !important;
		align-items: center !important;
		column-gap: 8px;
	}
	/* Sütun/öğe sarmalayıcılarını düzleştir ki hamburger, logo ve sepet aynı
	   flex kabında kardeş olsun — `order` ancak o zaman iş görür. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-container > [data-column],
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-container > [data-column] > [data-items] {
		display: contents !important;
	}
	/* ⚠ 3. turda `.ct-container`a `padding:0 14px` verilip yer açılmaya çalışıldı;
	   TERS TEPTİ. Blocksy kabın kenar payını padding'le değil `max-width` +
	   otomatik yan boşlukla kuruyor: padding yer açmıyor, kabın İÇİNDEN yiyor ve
	   ikon grubu sağ kenardan 14px içeri kaçıyor (ölçüldü). Kap payına dokunma. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger {
		order: 1;
		/* 2026-08-11: logo artık ortada değil, hamburgerin hemen sağında —
		   aralarındaki nefes payı buradan veriliyor (kapta `column-gap: 0`).
		   ⚠ 2026-08-21: kutu 40 → 44px. Eskiden 40px'ti ve "dokunma hedefi görünmez
		   `::after` ile 44'e tamamlanıyor" deniyordu; MENÜ alta inince `::after`
		   GÖRÜNÜR bir sütun ögesi oldu ve kutuyu artık yatayda genişletmiyor.
		   Düğme 40×44'e düştü, `denetim.mjs` bunu 22 sayfa × 3 genişlikte
		   **66 HATA** olarak bildirdi (ölçüldü). Artık gerçek 44×44 — hile yok.
		   Sağdaki boşluk 26 → 22'ye indirildi ki logonun yeri aynı kalsın
		   (44+22 = 40+26 = 66). */
		min-width: 44px !important;
		/* 2026-08-21 (Osman): "logoyu biraz sağa al, kullanıcı direkt menüyü
		   görsün yoksa solda kayboluyor." Sağ boşluk 6 → 26px. Bunun ~9px'i
		   MENÜ'nün alta inmesiyle düğmeden kazanıldı, kalanı logonun payından.
		   ⚠ 320px'te satırda boşluk payı YOK (ölçüldü: logo sağ kenarı 213, ikon
		   grubu 213'te başlıyor) — orada logo bir tık küçülerek yer açar,
		   `object-fit:contain` sayesinde kırpılmaz. 360/390px'te logo ile ikonlar
		   arasında zaten 16/30px pay vardı, oralarda logo hiç küçülmüyor. */
		margin: 0 22px 0 0 !important;
	}
	/* 2026-08-11 (2. tur): Logo ORTADA değil, hamburgerin yanında SOLDA.
	   `margin-right:auto` kalan boşluğu yutuyor, böylece ikon grubu sağ uca
	   yapışıyor. Referans düzen: hamburger + logo solda, ikonlar sağda. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-branding {
		order: 2;
		flex: 0 1 auto;
		min-width: 0;
		/* ⚠ `!important` şart: tema `.site-branding`e 10px sağ boşluk veriyor ve
		   daha özgül olduğu için `auto`yu eziyordu — kalan pay logo ile ikonların
		   arasına gitmiyor, ikonlar sağ kenara yaslanmıyordu. */
		margin-right: auto !important;
		/* Logo kutusu ikonlarla AYNI yükseklikte olsun ki hepsi tek çizgide otursun */
		height: 44px;
		overflow: hidden;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container {
		min-width: 0;
		max-width: 100%;
		height: 44px;
		display: flex;
		align-items: center;
	}
	/* Logo metni zaten `display:none`; kabı da boş yer kaplamasın. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-title-container {
		display: none !important;
	}
	/* Snippet 410 `.ct-header .site-branding img{height:50px}` diyor ve WPCode
	   bu dosyadan SONRA basılıyor — bu seçici daha özgül olduğu için kazanır. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-branding img {
		/* Logo yüksekliği = genişliği belirliyor: marka yatay bir yazı, oran 4,72:1.
		   Bu yüzden 1px yükseklik ≈ 4,7px genişlik demek ve satır zaten dar.

		   3. tur (2026-08-11): sabit 26px yerine akışkan ölçek. 4. turda ikon
		   kutuları 44'ten 32'ye inince 36px yer açıldı ve ölçek yükseltildi:
		     320px → 28 (yere göre)   ·   360px → 34   ·   390px → 37   ·   ≥426px → 40
		   ⚠ `height:auto` bir tuzaktı: Blocksy logoya `sizes="(max-width:999px) 170px"`
		   basıyor ve tarayıcı yoğunluğa göre düzeltilmiş doğal boyutu 170×36 olarak
		   raporluyor. `height:auto` bu 36px'e yapışıyor, `max-height` yalnız tavan
		   koyduğu için logo 37px'te takılı kalıyordu. Yükseklik AÇIKÇA verilmeli;
		   `object-fit:contain` + `max-width:100%` dar ekranda oranı bozmadan
		   küçültür (kırpma yok). Kaynak 1200×259, 768w varyantı servis ediliyor —
		   42px'te 3x ekranda bile keskin.
		   4. tur sonu: kullanıcı "bir tık küçült" dedi (16 ise 14 olsun ≈ %12),
		   ölçek 28/10,5vw/42'den 26/9,2vw/37'ye indi → 390px'te 41 yerine 36px.

		   ⛔ 5. tur (2026-09-13): dil hapı için ölçek bir ara 21/8vw/34'e
		   indirilmişti; Osman **geri aldırdı** ("logoyu küçültme"). Hapın yeri
		   logodan DEĞİL, ikon kutularından açıldı (32 → 26px). Logo ölçeğini
		   yeniden düşürme — satıra bir şey eklemek gerekiyorsa önce ikon
		   kutularını ve kenar paylarını ölç. */
		height: clamp(26px, 9.2vw, 37px) !important;
		width: auto !important;
		max-width: 100%;
		object-fit: contain;
		display: block;
	}
	/* Logo kabı da akışkan yüksekliğe uymalı, yoksa 44px'lik kutuda kırpılır */
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-branding,
	header.ct-header [data-device="mobile"] [data-row="middle"] .site-logo-container {
		height: auto !important;
		min-height: 44px;
	}

	/* "Menü" etiketi — 3 çizginin sağında (2026-08-11 kullanıcı isteği).
	   Tema düğümüne dokunmadan `::after` ile basılıyor; JS yok, düzen ilk
	   boyamada kuruluyor (kural 6). Düğmenin `aria-label`ı zaten "Menü". */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger {
		width: auto !important;
		padding: 0 !important;
		/* 2026-08-21 (Osman): "MENÜ" artık 3 çizginin YANINDA değil ALTINDA.
		   Dikey diziliş menüyü bir blok hâline getiriyor ve düğmeyi daraltıyor
		   (54 → ~45px); kazanılan yer aşağıdaki `margin-right` ile logoyu sağa
		   itmekte kullanılıyor. Düğme içindeki DOM sırası: gizli `.ct-label`,
		   `svg.ct-icon`, sonra `::after` — yani sütunda çizgiler üstte, yazı altta.
		   ⚠ Yükseklik `min-height:44px` ile korunuyor (bölüm 2 dokunma kuralı):
		   dikey dizilişte içerik ~32px, o kural olmadan hedef 44'ün altına düşer. */
		flex-direction: column !important;
		justify-content: center;
		align-items: center;
		gap: 3px;
		min-height: 44px;
		/* ⚠ `flex:0 0 auto` şart: 320px'te düğme sıkışıp 44px'e iniyor, "MENÜ"
		   yazısı kutusunun dışına taşıp logonun üstüne biniyordu. Daralan taraf
		   logo olmalı — o zaten oranını koruyarak küçülüyor. */
		flex: 0 0 auto !important;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger::after {
		/* Büyük harf `content` ile yazılıyor, `text-transform` ile DEĞİL:
		   Türkçe'de otomatik büyütme noktasız ı/İ tuzağı taşır, burada sabit metin
		   olduğu için doğrudan yazmak güvenli. */
		content: "MENÜ";
		font-size: 12.5px;
		font-weight: 800;
		letter-spacing: .03em;
		line-height: 1;
		color: var(--zbx-espresso);
		white-space: nowrap;
	}
	/* 3 ÇİZGİ KALINLIĞI (2026-08-21 Osman isteği).
	   Blocksy hamburgeri SVG `<rect>` ile basıyor: viewBox `0 0 18 14`, üç çubuk
	   `height="1.7"`, y = 0 / 6,15 / 12,3. İki kat birlikte kalınlaştırıyor:
	     (a) SVG'nin kendisi 18×14 → 21×16,33 (oran korunuyor),
	     (b) çubuk kalınlığı CSS geometri özellikleriyle 1,7 → 2,5 kullanıcı birimi.
	   Sonuç: 2,5 × (16,33/14) ≈ 2,9px çubuk (öncesi 1,70px — ölçüldü).
	   ⚠ `height`/`y` SVG2 geometri özellikleridir; Chrome/Firefox/Safari destekler.
	   Desteklenmese bile (a) yürürlükte kalır ve çubuk 1,7 × 1,167 ≈ 2,0px olur —
	   yani en kötü durumda bile incelmiyor, sessizce bozulmuyor. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger svg.ct-icon {
		width: 21px !important;
		height: 16.33px !important;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger svg.ct-icon rect {
		height: 2.5px;
	}
	/* Çubuklar kalınlaşınca eşit aralık için y yeniden dağıtılıyor:
	   alt çubuğun alt kenarı yine tam 14 (viewBox tabanı) → 11,5 + 2,5 = 14. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger svg.ct-icon rect:nth-of-type(1) { y: 0; }
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger svg.ct-icon rect:nth-of-type(2) { y: 5.75px; }
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger svg.ct-icon rect:nth-of-type(3) { y: 11.5px; }
	/* 2026-08-11: Favorilerim + Hesabım ikonları eklendi (PHP `zbx_mobil_header_kur`).
	   Sıra: hamburger(1) · logo(2) · favori+hesap(3) · sepet(4).

	   ⚠ Aralıklar tek yerden yönetiliyor. Önce kabın `column-gap:8px`'i yalnız
	   sepetten önce devreye giriyordu (favori-hesap bitişik, sepet 18px uzakta —
	   gözle görülür bozukluk). Kap boşluğu sıfırlandı, üç ikon kutusu da 44×44 ve
	   aralarında eşit 8px var; hamburger ve sepet de aynı ritme bağlandı.

	   2026-08-11 (2. tur) ölçümü — 360px'te satır TAM DOLU, boşluk payı yok:
	   hamburger 44 + 10 + logo 117 + ikonlar 90 + 2 + sepet 44 + 10 = 317 = kap eni.
	   İkon aralığını 2'den 8'e çıkarmak +12px ister; bu pay iki yerden alındı:
	   sepetin sağındaki 10px kaldırıldı (ikonlar kabın sağ kenarına yaslandı) ve
	   hamburger sağ boşluğu 10'dan 6'ya indi. Yeni toplam 315px — logo kırpılmıyor. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-container {
		column-gap: 0 !important;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-ikonlar {
		order: 3;
		display: flex;
		align-items: center;
		/* 3. tur: kutular bitişik (gap 0). Dokunma kutusu 44×44 kalıyor, glifler
		   arası görünür boşluk 30px'ten 22px'e iniyor — kullanıcı "yok denecek
		   kadar az" istedi, kutuyu 44'ün altına indirmeden verilebilecek en sıkı
		   diziliş bu. Kutuları küçültüp `::after` ile büyütmek burada işe yaramaz:
		   komşu kutuların görünmez alanları üst üste biner. */
		gap: 0;
		margin-left: auto;   /* logo kısalırsa bile grup sağa yaslı kalır */
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-ikon {
		/* ⚠ 4. tur (2026-08-11 kullanıcı kararı, dördüncü kez istendi):
		   kutu eni 44 → 32. Kutular zaten bitişikti ama glif 22px olduğu için
		   44'lük kutuda her iki yanda 11px iç boşluk kalıyor ve semboller
		   30px aralıklı görünüyordu. 32px'te görünen aralık 10px.
		   Dokunma YÜKSEKLİĞİ 44px korunuyor; genişlik 32px, WCAG 2.5.8 AA
		   asgarisi olan 24px'in üzerinde. Denetim kuralı "her iki boyut da
		   44'ün altındaysa hata" olduğu için tarama temiz kalıyor.
		   Kazanılan 36px logoya gidiyor — kullanıcının ikinci isteği.

		   ⛔ 5. tur (2026-09-13): 32 → 26px. Osman: "kalp kişi sepet arasındaki
		   mesafeyi biraz kısalt, tr sepetten biraz uzaklaşsın, logoyu küçültme".
		   Dil hapının 35px'i ve sepetle arasındaki 8px boşluk TAM BURADAN
		   geliyor: üç kutu × 6px = 18px. Yükseklik 44 KALIYOR; genişlik 26,
		   WCAG 2.5.8 AA asgarisi 24px'in üzerinde. Glif 22px olduğu için
		   görünen aralık 10 → 4px.
		   ⚠ `denetim.mjs` `darMuaf` eşiği de 32 → 26 indirildi; ikisi birlikte
		   değişir, yoksa tarama her sayfada HATA verir. */
		width: 26px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--zbx-espresso);
		border-radius: 12px;
		text-decoration: none;
		transition: background .18s ease, color .18s ease;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-ikon:hover,
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-ikon:focus-visible {
		background: var(--zbx-krem);
		color: var(--zbx-aksiyon);
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-ikon svg {
		width: 22px;
		height: 22px;
		display: block;
	}
	/* ---- MOBİL DİL HAPI (2026-09-13, Osman: "sepetin sağına sadece TR/EN
	   yani kısalma olacak şekilde dropdownlu koy … bu işlemi sadece mobilde
	   yap") ----
	   Markup `zbx_mobil_header_kur()` içinde sunucu tarafında basılıyor ve
	   `zbx_dil_secici_html()`in ta kendisi — ikinci bir bileşen YAZILMADI,
	   yoksa iki ayrı dil listesi ayrı düşerdi (kural 35'in dersi).

	   ⛔ `position: static` ŞART. Taban kural `.zbx-dil-secici{position:absolute;
	      top:50%;transform:translateY(-50%)}` — üst şeride göre yazılmış. Orta
	      satıra o hâliyle konunca öge akıştan çıkıyor, sarmalayıcı **0 px**
	      kalıyor ve hap GÖRÜNMÜYOR (canlıda ölçüldü: nav 129px, kabı 0px).
	   ⛔ Kapalı hapta yalnız KOD görünür (küre ikonu ve dil adı gizli): "TR"
	      35px, "Türkçe" yazılsaydı 129px eder ve satıra sığmazdı.
	   ⛔ Dokunma hedefi `::after` ile 45px'e tamamlanır (mobil kural 2).
	      Kutuyu 44px yapmak logodan 9px daha ister; ::after düzeni değiştirmez.
	   ⛔ ŞERİT RENGİ MİRAS ALINMAZ: taban `.zbx-dil-btn` KOYU zemine göre
	      yazılmış (beyaz metin + cam çerçeve). Orta satır BEYAZ — renk ve
	      çerçeve burada açıkça sıfırlanır, yoksa beyaz-üstüne-beyaz olur. */
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil {
		order: 5;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		/* ⛔ 16px YAZILIR, 8 DEĞİL — sepetin kendi `margin-right: -8px`i 8'ini
		   yutuyor; ilk sürümde 8 yazıldı ve canlıda ölçülen boşluk **0**
		   çıktı (hap.l = sepet.r). Görünen boşluk = 16 + (-8) = 8px. */
		margin-left: 16px;    /* ⛔ Osman: "tr sepetten biraz uzaklaşsın" */
		margin-right: -8px;   /* sepetin eski sağ hizasıyla aynı kenar */
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-secici {
		position: static;
		transform: none;
		display: flex;
		gap: 0;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-btn {
		gap: 0;
		min-height: 44px;
		padding: 0 1px 0 2px;
		border: 0;
		background: none;
		color: var(--zbx-espresso);
		border-radius: 12px;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-btn::after {
		inset: 0 -5px;        /* 35 + 10 = 45px etkin dokunma eni */
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-ac[open] > .zbx-dil-btn,
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-btn:hover {
		background: var(--zbx-krem);
		border-color: transparent;
		color: var(--zbx-aksiyon);
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-ikon,
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-simdiki {
		display: none;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-kod {
		/* ⛔ KALIN YAZILMAZ (2026-09-13 Osman: "tr yazısını kalın yapma ince
		   olsun"). 500 ağırlık, komşu ikon gliflerinin çizgi kalınlığıyla
		   aynı ağırlıkta durur. */
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0;
		opacity: 1;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .zbx-mob-dil .zbx-dil-ok {
		width: 9px;
		height: 9px;
		opacity: .55;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-cart {
		order: 4;
		/* Sol: favori/hesap ile bitişik (gap 0 ritmi).
		   Sağ: Blocksy'nin verdiği 10px kaldırıldı; üstelik -8px ile grup kabın
		   sağ kenarının biraz DIŞINA taşınıyor (kullanıcı "biraz daha sağa" dedi).
		   Sayfa payı 22px, ikonlar artık ekran kenarına 14px kalıyor — sepet
		   simgesi hâlâ kenardan uzak, kaydırma jestiyle çakışmıyor. */
		margin: 0 -8px 0 0 !important;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-cart .ct-cart-item {
		/* Favori/hesap kutularıyla aynı ölçü — bölüm 2'deki genel `min-width:44px`
		   kuralı burada bilerek eziliyor (yükseklik 44 kalıyor).
		   ⛔ 2026-09-13: 32 → 26 (favori/hesapla birlikte, bkz. yukarıdaki not). */
		width: 26px !important;
		min-width: 26px !important;
		height: 44px;
		border-radius: 12px;
		color: var(--zbx-espresso);
		transition: background .18s ease, color .18s ease;
	}
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-cart .ct-cart-item:hover,
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-cart .ct-cart-item:focus-visible {
		background: var(--zbx-krem);
		color: var(--zbx-aksiyon);
	}
	/* Hamburger de aynı kutu ölçüsünde olsun ki sol ve sağ uç dengeli dursun */
	header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger {
		border-radius: 12px;
	}
	/* Eski JS yedeği bir şekilde çalışırsa çift logo çıkmasın. */
	.zbx-mob-logo { display: none !important; }

	/* Blocksy `[data-row] > *` düğümlerine grid veriyor — arama satırı iki
	   sütuna bölünüp form 63px'e uzuyordu. Blok olmaya zorluyoruz. */
	.ct-header .zbx-mob-search {
		display: block !important;
		grid-template-columns: none !important;
		padding: 0 18px 10px;
		/* ⚠ Blocksy satır yüksekliği ayarını `[data-row] > *` üzerinden `min-height`
		   olarak basıyor — ölçümde 74px çıkıyordu, oysa içerik 56px. Aradaki 17px'lik
		   ölü boşluk sabit başlığı şişiriyordu (148px). Sıfırlanınca 130px'e iniyor. */
		min-height: 0 !important;
	}
	.ct-header form.zbx-msearch {
		display: flex !important;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		background: #fff;
		/* 2026-08-11 (3. tur): çerçeve MASAÜSTÜYLE BİREBİR aynı olsun diye
		   `inset box-shadow` bırakılıp gerçek `border`a dönüldü — kum, 1px, 10px
		   yarıçap, odakta aksiyon rengi + 3px halka (`.zbk-search` ile aynı).
		   Bedeli: çubuk 44 yerine 46px (input 44 + 2px çerçeve). Kullanıcının
		   verdiği 44-46px aralığının içinde. */
		/* 2026-08-21 (Osman): çerçeve kum (#d9c3a5) idi ve bakır gibi okunuyordu.
		   Arama BUTONUNUN zemini ile aynı renge alındı: `--zbx-aksiyon` (#cf3700).
		   ⚠ Bakır (#B87333) DEĞİL — o renk arayüzde yasak; buradaki eski değer de
		   bakır değil kum paletiydi, yalnız gözde bakıra yakın duruyordu. */
		border: 1px solid var(--zbx-aksiyon);
		border-radius: 10px;
		overflow: hidden;
		transition: border-color .15s ease, box-shadow .15s ease;
	}
	.ct-header form.zbx-msearch:focus-within {
		border-color: var(--zbx-aksiyon);
		box-shadow: 0 0 0 3px rgba(207, 55, 0, .14);
	}
	.ct-header form.zbx-msearch input[type="search"] {
		flex: 1 1 auto;
		min-width: 0;
		/* 44px = dokunma kuralı; çerçeve gölge olduğu için çubuğun tamamı da 44px */
		height: 44px !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 12px !important;
		font-size: 14px;
		color: #2B1D16;
		background: #fff !important;
		outline: none;
		box-shadow: none !important;
		-webkit-appearance: none;
		appearance: none;
	}
	.ct-header form.zbx-msearch input[type="search"]::placeholder { color: #9c8770; }

	/* 2026-08-11: Arama çubuğu kaydırınca ARTIK GİZLENMİYOR (kullanıcı kararı).
	   Önceden `body.zbx-scrolled .ct-header .zbx-mob-search{display:none}` vardı;
	   kategori/ürün listesinde aşağı inerken arama erişilemez oluyordu. Sabit
	   başlıkta kalıyor, yalnız dikey boşluk biraz kısaltılıyor ki başlık şişmesin. */
	body.zbx-scrolled .ct-header .zbx-mob-search {
		display: block !important;
		/* ⚠ 2026-08-21: eskiden 8px'ti ve başlığı 130 → 128px'e indiriyordu.
		   Başlık artık HER ZAMAN sabit (aşağıdaki sticky bloğu); o 2px'lik fark
		   kaydırma 250px'i geçtiği anda başlığın 2px oynamasına yol açıyordu.
		   Üstteki kuralla aynı değere sabitlendi → sıfır hareket. */
		padding: 0 18px 10px;
		min-height: 0 !important;
	}
	/* ⚠ Burada eskiden `height:36px` vardı ama etkisizdi — dokunma kuralının
	   `min-height:44px`'i (bkz. bölüm 2) her zaman kazanıyor. Çubuk kaydırıldığında
	   da 44px kalır; kısalan tek şey satırın alt boşluğu. */

	/* Sabit başlık artık iki satır — sayfa içeriği altına girmesin diye
	   kaydırma hedefleri bu yüksekliği hesaba katar.
	   Ölçüm (360px): logo satırı 74 + arama satırı 54 = 128. */
	:root { --zbx-sabit-header: 130px; }
	body { scroll-padding-top: var(--zbx-sabit-header); }

	/* ==========================================================================
	   SABİT BAŞLIK — `position: sticky`, SINIF YOK          (2026-08-21, Osman)
	   ==========================================================================
	   Osman: *"aşağı doğru kaydırıyorum hop zıplayıp birden geliyor"*.

	   ESKİ MEKANİZMA VE NEDEN ZIPLIYORDU (canlıda ölçüldü, 390px):
	     scrollY   0 → middle.top =   38  (akışta, normal)
	     scrollY 120 → middle.top =  -82  (ekranın YUKARISINDA, başlık yok)
	     scrollY 240 → middle.top = -202  (tamamen kayıp)
	     scrollY 260 → middle.top =    0  ve position:fixed  ← ZIPLAMA
	   Snippet 375 `scrollY>250` olunca `body.zbx-scrolled` ekliyordu; başlık o anda
	   akıştan çıkıp `fixed` oluyor (içerik 168px yukarı kayıyor) ve üstüne
	   `@keyframes zbxSlide` ile yukarıdan aşağı süzülüyordu. Üstelik JS
	   `setTimeout(...,50)` + `clearTimeout` ile yazıldığı için sınıf ancak kaydırma
	   DURUNCA ekleniyordu — "hop" hissinin asıl kaynağı buydu.

	   YENİ: başlık ilk boyamadan itibaren `sticky`. Akıştan hiç çıkmıyor, dolayısıyla
	   içerik kayması da yok; JS'e, sınıfa ve eşiğe hiç bağlı değil (CLAUDE.md kural
	   4b: düzen CSS ile kurulur). Ölçüm: scrollY 60'tan 1600'e kadar middle.top = 0.

	   `top: -46px` NEDEN (2026-09-10 güncellemesi): şerit artık toptan CTA'sını
	   taşıyor, dikey nefes payıyla birlikte 46px ölçüldü (360/390/1440). Eskiden
	   38px'ti (kargo şeridi). Negatif offset
	   şeridin kaydırılıp gitmesine izin veriyor, orta satır tam 0'a oturuyor.
	   38 tahmin değil, ölçüm: 7 sayfa tipi × 3 genişlikte (320/360/414) hepsinde 38px.
	   ⚠ Şerit ileride kaldırılır ya da iki satıra çıkarsa bu değer bayatlar. `:has()`
	   emniyeti bunun için var: şerit YOKSA offset 0 olur ve başlık yine doğru yere
	   oturur, sessizce 38px kırpılmaz.
	   ⚠ `position:sticky` en yakın kaydırma atasına göre çalışır; başlığın
	   atalarında `overflow:clip` (sarmalayıcı div) ve `overflow-x:hidden` (body) var.
	   Bunlar sticky'yi kırabilirdi — kırmadıkları CANLIDA DENENEREK doğrulandı,
	   varsayılmadı.
	   ⛔ Snippet 375'teki mobil `position:fixed` kuralı bu yüzden kaldırıldı. Geri
	   gelirse `!important` ile sticky'yi ezer ve zıplama aynen döner. */
	header.ct-header {
		position: sticky !important;
		top: 0;
		z-index: 9990;
		background: #fff;
	}
	/* ⛔ 2026-09-10 (Osman kararı): TÜRKÇE SAYFALARDA ŞERİT DE SABİT — offset 0.
	   Şerit artık toptan CTA'sını taşıyor ("Toptan Alımda Minimum Sipariş Yok —
	   Teklif Alın") ve Osman: *"bu alan toptan alıcıların dikkatini çekmek için
	   çok önemli"*. Kaydırınca gizlenen bir CTA dikkat çekemez; bu yüzden
	   şeridin kaydırılıp gitmesine izin veren negatif offset KALDIRILDI.
	   ⚠ BEDELİ ÖLÇÜLDÜ VE BİLEREK KABUL EDİLDİ: mobilde sabit alan 130 → 176px
	   (800px ekranda içerik 670 → 624px), masaüstünde 122 → 168px.
	   ⛔ DİL SAYFALARI HARİÇ: oradaki şerit toptan CTA'sı değil, marka sloganı +
	   dil seçici taşıyor; 72px'i sabit tutmak karşılığı olmayan bir bedel olurdu.
	   Onların offseti aşağıdaki `body.zbx-dil` kurallarında. */
	body:not(.zbx-dil) header.ct-header:has([data-device="mobile"] [data-row="top"]) { top: 0; }
	body.admin-bar header.ct-header { top: 32px; }
	body.admin-bar header.ct-header:has([data-device="mobile"] [data-row="top"]) { top: -6px; }

	/* Başlık artık her zaman içeriğin üstünde duruyor: altından geçen ürün adları
	   ve butonlar okunmasın diye zemin OPAK beyaz (blur yok — snippet 375'in eski
	   `rgba(255,255,255,.96)` + `backdrop-filter` kombinasyonu hayalet metin
	   üretiyordu). Yumuşak gölge katmanı ayırıyor; kırmızı 2px çizgi bilerek
	   EKLENMEDİ, dinlenme hâlindeki görünüm değişmesin diye. */
	header.ct-header [data-device="mobile"] [data-row="middle"] {
		background: #fff !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	header.ct-header { box-shadow: 0 2px 14px rgba(43, 29, 22, .10); }
}
@media (min-width: 1000px) {
	.zbx-mob-search { display: none !important; }
}

/* --------------------------------------------------------------------------
   KATEGORİ ŞERİDİ — mağaza ve kategori sayfalarının üstünde
   -------------------------------------------------------------------------- */
.zbx-katstrip { margin: 0 0 26px; }
.zbx-katstrip-baslik {
	margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #2B1D16;
	letter-spacing: .2px;
}
.zbx-katstrip-list {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.zbx-katstrip-list a {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 8px 14px; border: 1px solid #e5e5e5; border-radius: 999px;
	background: #fff; color: #2B1D16; font-size: 14px; text-decoration: none;
	transition: border-color .18s, background .18s, color .18s;
}
.zbx-katstrip-list a:hover { border-color: var(--zbx-aksiyon); background: #F7F1E8; color: var(--zbx-aksiyon-koyu); }
.zbx-katstrip-list .zbx-kat-aktif a { border-color: var(--zbx-aksiyon); background: var(--zbx-aksiyon); color: #fff; }
.zbx-katstrip-list .zbx-kat-sayi { font-size: 12px; opacity: .6; }
@media (max-width: 767px) {
	.zbx-katstrip-list {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		padding-bottom: 6px; scrollbar-width: none;
	}
	.zbx-katstrip-list::-webkit-scrollbar { display: none; }
	.zbx-katstrip-list li { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   ÜRÜN GÖRSELİ — hafif yuvarlatılmış köşe (2026-08-06)
   Kart görselleri keskin dikdörtgendi; marka dili yumuşak (buton/hap
   yarıçapları zaten yuvarlak). 8px belirgin olmayan ama köşeyi kıran değer.
   Kapsayıcıya `overflow:hidden` şart: hover'daki `transform:scale` görseli
   köşelerden taşırıyordu.
   -------------------------------------------------------------------------- */
ul.products li.product .ct-media-container,
ul.products li.product figure .ct-media-container {
	border-radius: 8px !important;
	overflow: hidden !important;
}
ul.products li.product .ct-media-container img,
ul.products li.product img.wp-post-image {
	border-radius: 8px !important;
}
.single-product .woocommerce-product-gallery .flexy-item img,
.single-product .ct-product-gallery-container .flexy-item img {
	border-radius: 10px;
}
.single-product .flexy-pills img,
.single-product [data-flexy-pills] img {
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   FOOTER — mobil/tablette iki sütun (2026-08-06)

   Blocksy footer sütunlarını `--grid-template-columns` ile kuruyor:
   masaüstü `repeat(4, 1fr)`, ≤999.98px'te `initial` → tek sütun, dört blok
   alt alta uzayıp gidiyordu. Değişkeni 2 sütuna çeviriyoruz.

   `!important` şart: Blocksy aynı özgüllükte iki kural yazıyor (≤999.98px ve
   ≤689.98px) ve ikisi de `initial` diyor; kaynak sırasına güvenilemez.

   Marka/iletişim bloğu (widget-area-1) adres + telefon + e-posta taşıdığı için
   yarım sütuna sığmıyor — tam genişlikte kalıyor. Altındaki üç blok ikili
   diziliyor: Kurumsal | Popüler Kategoriler, sonra KVKK.
   -------------------------------------------------------------------------- */

/* Widget başlıkları (BakırBul, Kurumsal, Popüler Kategoriler, Kişisel Verilerin
   Korunması) `h3.widget-title`; alt başlıklar (Yardım, En Sevilen Kategoriler)
   ise snippet'ten gelen `h3.zb-foot-h` ve zaten `#cf3700` idi. İkisi aynı
   sütunda yan yana durduğu için renk farkı göze çarpıyordu — 2026-08-08'de
   eşitlendi. YALNIZ renk: punto, kalınlık, boşluk Blocksy'den geldiği gibi.
   `!important` şart, Blocksy başlık rengini kendi değişkeninden dayatıyor. */
.ct-footer [data-row*="middle"] .widget-title {
	color: var(--zbx-aksiyon) !important;
}

@media (max-width: 999.98px) {
	[data-footer*="type-1"] .ct-footer [data-row*="middle"] > div {
		--grid-template-columns: 1fr 1fr !important;
		--columns-gap: 28px !important;
	}
	.ct-footer [data-row*="middle"] > div > [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}
}
@media (max-width: 480px) {
	[data-footer*="type-1"] .ct-footer [data-row*="middle"] > div {
		--columns-gap: 18px !important;
	}
	/* dar ekranda uzun link metinleri sığsın */
	.ct-footer [data-row*="middle"] .widget-title,
	.ct-footer [data-row*="middle"] .zb-foot-h { font-size: 14px; }
	.ct-footer [data-row*="middle"] li,
	.ct-footer [data-row*="middle"] li a { font-size: 13.5px; line-height: 1.5; }
}

/* ==========================================================================
   Kategori SEO metni mobilde kaybolmasın                        (2026-08-06)

   Blocksy'nin arşiv "custom_description" öğesi varsayılan olarak
   `.page-description` kabına `ct-hidden-sm` sınıfı basıyor — yani kategori
   metni dar ekranda gizli. Google mobil-öncelikli indeksleme yaptığı için
   bu, 35 kategorinin SEO metninin değerini düşürür.

   Snippet 407 metni `.zb-cat-seo` kabına TAŞIYIP kaynağı `data-zb-moved` ile
   işaretliyor ve inline `display:none` veriyor — taşınmış hali bu kuraldan
   etkilenmez (`:not([data-zb-moved])`). Bu kural yalnız JS henüz çalışmadığı
   ya da hiç çalışmadığı durumda metnin mobilde görünür kalmasını garanti eder.
   ========================================================================== */
@media (max-width: 689.98px) {
	.tax-product_cat .page-description.ct-hidden-sm:not([data-zb-moved]),
	.post-type-archive-product .page-description.ct-hidden-sm:not([data-zb-moved]) {
		display: block !important;
	}
}

/* ==========================================================================
   ÜRÜN KARTI TASARIMI + KIRMIZI AKSİYON RENGİ                    (2026-08-07)

   Kart düzeni:  görsel → başlık → ─── çizgi ─── → fiyat → ─── çizgi ───
                 → tam genişlik "Sepete Ekle"; kart çerçevesi de aynı çizgi.
   Renkler: buton #cf3700 / hover #932700 · fiyat #cf3700 · çizgi #C7C8C9
            · ücretsiz kargo rozeti #005f93 zemin + beyaz yazı.

   Bu blok WPCode snippet 394 (ana sayfa kartı) ve 411 (site geneli bakır
   buton) yerine geçiyor; ikisi de taslağa çekildi. Sebep: WPCode'un inline
   <style>'ları bu dosyadan SONRA basılıyor, iki taraf da !important
   kullanınca WPCode kazanıyordu (snippet 416/417 vakası).

   Kart artık ana sayfa dahil her yerde aynı: kategori, mağaza, arama,
   ilgili ürünler. `body.home` kısıtı bilerek kullanılmadı.
   ========================================================================== */

/* ---- Kart kabı: 1px #C7C8C9 çerçeve ----
   `.woocommerce` öneki ZORUNLU: Ana Sayfa'nın (sayfa 11) içeriğine gömülü
   <style> bloğu `.woocommerce ul.products li.product{border:1px solid #ececec;
   border-radius:14px;padding:14px}` diyor ve hem daha özgül hem daha sonra
   basılıyor. Öneksiz yazılırsa ana sayfada kart çerçevesi #ececec kalır. */
ul.products li.product,
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--zbx-kart-cizgi) !important;
	border-radius: 12px !important;
	padding: 10px 10px 12px !important;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(43, 29, 22, .10);
}

/* Görsel kabı — snippet 400'ün hover ikonları bu `position:relative`e bağımlı
   (kural eskiden snippet 394'teydi, oradan buraya taşındı). */
ul.products li.product figure {
	position: relative;
	margin: 0 0 10px;
}

/* İndirim rozeti (394'ten taşındı) — yüzdeyi betik.js yazıyor.
   `.woocommerce` öneki yine ana sayfa gömülü stilini ezmek için
   (`.onsale{background:#8c2f1b;border-radius:6px}`). */
ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 3;
	margin: 0;
	background: var(--zbx-kizil);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .2px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 20px;
	min-width: 0;
	min-height: 0;
	box-shadow: 0 3px 8px rgba(140, 47, 27, .28);
}

/* ---- Başlık: iki satırda kırpılır, kart yükseklikleri hizalı kalsın ---- */
ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--zbx-espresso);
	margin: 2px 0 4px;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Fiyat: üstünde ayraç çizgisi ---- */
ul.products li.product .price {
	display: block;
	width: 100%;
	border-top: 1px solid var(--zbx-kart-cizgi);
	padding-top: 10px;
	margin-bottom: 8px;
	color: var(--zbx-aksiyon) !important;
	font-weight: 700;
}

/* ---- Sepete Ekle: üstünde ayraç çizgisi, tam genişlik ---- */
ul.products li.product .ct-woo-card-actions {
	width: 100%;
	border-top: 1px solid var(--zbx-kart-cizgi);
	padding-top: 10px;
}
ul.products li.product .ct-woo-card-actions .button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button {
	display: flex !important;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--zbx-aksiyon) !important;
	border-color: var(--zbx-aksiyon) !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 10px 12px;
	font-weight: 600;
	font-size: 13px;
	box-shadow: none;
	transition: background .2s ease, transform .12s ease;
}
ul.products li.product .ct-woo-card-actions .button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover {
	background: var(--zbx-aksiyon-koyu) !important;
	border-color: var(--zbx-aksiyon-koyu) !important;
	color: #fff !important;
}
ul.products li.product .button:active { transform: scale(.97); }
ul.products li.product .button.added {
	background: var(--zbx-espresso) !important;
	border-color: var(--zbx-espresso) !important;
}

/* ---- Tekil ürün + sepet + ödeme ana butonları ---- */
.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.woocommerce .checkout-button,
#place_order {
	background-color: var(--zbx-aksiyon) !important;
	border-color: var(--zbx-aksiyon) !important;
	color: #fff !important;
}
.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.woocommerce .checkout-button:hover,
#place_order:hover {
	background-color: var(--zbx-aksiyon-koyu) !important;
	border-color: var(--zbx-aksiyon-koyu) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   TEKİL ÜRÜN — "Hemen Al" + "WhatsApp ile Sipariş Ver" (2026-08-08)

   HTML'i bakirbul-custom.php basıyor; ikisi de `.ct-cart-actions` flex
   kutusunun İÇİNDE, Sepete Ekle'nin sağında (Blocksy kutuyu öncelik 100'de
   kapatıyor, biz 20'de basıyoruz).

   Ölçüler Sepete Ekle ile eşleşsin diye `align-self: stretch` — Blocksy'nin
   buton yüksekliği tema ayarından geliyor, sabit px vermek hizayı bozardı.

   ⚠ Taban kurallar media query'den ÖNCE. Snippet 393 tam tersini yaptığı için
   mobil tab bar bugüne kadar hiç görünmedi (site-envanteri.md:242).
   -------------------------------------------------------------------------- */
.zbx-hemenal,
.zbx-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
	padding: 0 18px;
	border: 0;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease;
}
/* Hemen Al'ın şimşek ikonu 2026-08-08'de kaldırıldı — kural yalnız WhatsApp'ta. */
.zbx-wa-btn svg { flex: 0 0 auto; }

/* Blocksy `.ct-cart-actions > * { width: var(--item-width, 100%) }` diyor —
   yani kutuya giren HER çocuk varsayılan olarak tam satır kaplıyor. Sepete Ekle
   bundan `flex:1` ile kurtuluyor. Bizim butonlar için de aynısını yapmazsak
   masaüstünde de alt alta düşerler. Seçici bilerek iki sınıflı: Blocksy'nin
   kuralı (0,1,1) spesifikliğinde, tek sınıf onu ezemez.
   Sığmazsa doğal olarak alt satıra sarar (kutuda zaten flex-wrap:wrap var). */
.ct-cart-actions .zbx-hemenal,
.ct-cart-actions .zbx-wa-btn {
	flex: 0 1 auto;
	width: auto;
}
/* Sepete Ekle `flex:1` ile büyüyor ama satır darken metni iki satıra kırılıyordu
   ("Sepete / Ekle"). `nowrap` bunu engelliyor; flex öğesinin varsayılan
   `min-width:auto`'su zaten min-content'e eşit olduğu için tek satırlık
   genişliğinin altına inemez — ayrıca min-width vermeye gerek yok (verilince
   fazla yer kaplayıp WhatsApp'ı alt satıra itiyordu). */
.ct-cart-actions .single_add_to_cart_button { white-space: nowrap; }

/* Sepete Ekle ile Hemen Al MASAÜSTÜNDE eşit genişlikte (2026-08-08).
   Sebep: Blocksy Sepete Ekle'ye `flex:1`, biz Hemen Al'a `flex:0 1 auto`
   veriyorduk — biri artan boşluğu yutuyor, diğeri içeriği kadar kalıyordu.
   `flex:1 1 0` ikisini de SIFIR tabandan eşit büyütür; nihai genişlik iç
   boşluk/yazı farkından bağımsız olarak birebir aynı çıkar.
   Yalnız genişlik — renk, yazı tipi, padding, mobil davranış değişmedi
   (kural 768px eşiğinin üstünde, 767px'lik mobil blok aynen duruyor).

   ⚠ Miktar kutusu (`--quantity-width`) burada BİLEREK yok: 50px ve 65px
   denendi, ikisi de tutmadı — kutu Blocksy varsayılanı 100px'te kalıyor. */
@media (min-width: 768px) {
	.single-product .ct-cart-actions .single_add_to_cart_button,
	.single-product .ct-cart-actions .zbx-hemenal {
		flex: 1 1 0;
	}
}

/* Dördü tek satıra ancak sığıyor (özet sütunu ~610px). Yazı ve iç boşluklar
   Sepete Ekle'den bir tık dar tutuldu ki WhatsApp alt satıra düşmesin. */
.ct-cart-actions .zbx-hemenal { padding: 0 14px; font-size: 13.5px; }
.ct-cart-actions .zbx-wa-btn { padding: 0 12px; font-size: 12.5px; letter-spacing: 0; gap: 6px; }
.ct-cart-actions .zbx-wa-btn svg { width: 17px; height: 17px; }

/* TEKİL ÜRÜN BUTON SIRASI (2026-08-09)
   İstenen dizilim: [adet] → Şimdi Al → Sepete Ekle → WhatsApp.
   DOM sırası farklı (adet, Sepete Ekle, Şimdi Al, WhatsApp) ama
   `.ct-cart-actions` flex olduğu için `order` ile diziyoruz — PHP hook'una
   dokunmadan. (Hook önceliği 20; Blocksy kutuyu 100'de kapatıyor, bu yüzden
   `before_add_to_cart_button`a taşımak kutunun dışına düşme riski taşırdı.) */
.ct-cart-actions .quantity { order: 1; }
.ct-cart-actions .zbx-hemenal { order: 2; }
.ct-cart-actions .single_add_to_cart_button { order: 3; }
.ct-cart-actions .zbx-wa-btn { order: 4; }

/* ŞİMDİ AL — kenarlıklı (outline), üzerine gelince içi dolar.
   `border` taban kuralda `0` olduğu için burada açıkça yeniden veriliyor;
   `box-sizing` Blocksy'den border-box geliyor, yükseklik kaymıyor. */
.zbx-hemenal {
	background-color: transparent;
	border: 2px solid var(--zbx-aksiyon);
	color: var(--zbx-aksiyon) !important;
	transition: background-color .15s ease, color .15s ease;
}
.zbx-hemenal:hover,
.zbx-hemenal:focus-visible {
	background-color: var(--zbx-aksiyon);
	color: #fff !important;
}

.zbx-wa-btn { background-color: var(--zbx-wa); color: #fff !important; letter-spacing: .2px; }
.zbx-wa-btn:hover,
.zbx-wa-btn:focus-visible { background-color: var(--zbx-wa-koyu); color: #fff !important; }

/* Stoksuz üründe buton tek başına — form yok, kendi satırında durur. */
.zbx-aksiyon-stoksuz { margin: 14px 0 4px; }
.zbx-aksiyon-stoksuz .zbx-wa-btn { width: 100%; padding: 13px 18px; }

/* Mobil: [miktar][Sepete Ekle] / [Hemen Al] / [WhatsApp] — üç satır.
   767px bilerek: kart tipografisi ve kargo rozeti zaten bu eşiği kullanıyor. */
@media (max-width: 767px) {
	.single-product .ct-cart-actions { flex-wrap: wrap; }
	.single-product .ct-cart-actions .zbx-hemenal,
	.single-product .ct-cart-actions .zbx-wa-btn {
		flex: 1 0 100%;
		width: 100%;
		min-height: 46px;
		white-space: normal;
	}
}

/* ---- ÜCRETSİZ KARGO ROZETİ (şu an yalnız tekil ürün sayfasında) ----
   HTML'i bakirbul-custom.php'deki zbx_kargo_rozeti_html() basıyor.

   ⚠ ZEMİN #007CAA (2026-08-21 Osman kararı — "En Çok Satan" rozetiyle
   RENKLER TAKAS EDİLDİ: kargo yeşilden #007CAA maviye, rozet maviden
   #298200 yeşile geçti). Öncesinde #298200 yeşildi, ondan önce #005f93.
   Renk `--zbx-kargo` değişkeninde, sitede BAŞKA HİÇBİR YERDE ham hex
   olarak geçmiyor (canlı DB de tarandı: posts/postmeta/options/termmeta
   0 eşleşme) — yani rengi değiştirmek için tek yer o değişken.
   Beyaz yazıyla kontrast 4,9:1 (WCAG AA). Daha açık bir yeşile geçersen
   yazı rengini yeniden ölç.
   ⛔ Bakır fiyat tahtasındaki `--dusus` mavisi (stil-sayfa.css) BU DEĞİL —
   o fiyat düşüşü göstergesi, kargoyla ilgisi yok, kendi hex'i var. */
.zbx-kargo-satiri { width: 100%; }
.zbx-kargo-rozet {
	display: inline-flex;
	align-items: center;
	background: var(--zbx-kargo);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2px;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
}
.single-product .zbx-kargo-satiri { margin: 0 0 12px; }
.single-product .zbx-kargo-rozet { font-size: 12px; padding: 6px 11px; }

/* ---- Fiyatlar site genelinde kırmızı ---- */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.entry-summary .price,
.entry-summary .price .woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value {
	color: var(--zbx-aksiyon) !important;
}

/* İstisna 1 — üstü çizili eski fiyat kırmızı olmasın, indirim okunmaz olur. */
.price del,
.price del bdi,
.price del .woocommerce-Price-amount,
.wc-block-components-product-price__regular {
	color: #9a9a9a !important;
	font-weight: 400;
}
.price ins { text-decoration: none; }

/* İstisna 2 — header mini-sepeti koyu zeminli (Blocksy
   --mini-cart-background-color: #29333C). Kırmızı orada okunmaz. */
.ct-cart-content .woocommerce-Price-amount,
.ct-cart-content .woocommerce-Price-amount bdi,
.ct-cart-content .total .woocommerce-Price-amount {
	color: #fff !important;
}

@media (max-width: 767px) {
	ul.products li.product { border-radius: 10px; padding: 8px 8px 10px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 12.5px; }
	.zbx-kargo-rozet { font-size: 13px; padding: 4px 8px; } /* 10px idi — mobil kural 3 (2026-09-02 denetim H9) */
}

/* ==========================================================================
   SEPETE EKLE GERİ BİLDİRİMİ + NAVBAR ADET ROZETİ  (2026-08-08)

   Sorun 1: WooCommerce çekirdeği (add-to-cart.js:205-208) AJAX başarılı olunca
   butonun YANINA ikinci bir <a class="added_to_cart wc-forward"> enjekte ediyor.
   Blocksy bu linki yalnız `[data-products=type-2]` düzeninde stilliyor; site
   `type-1` kullandığı için link tamamen stilsiz kalıyor ve kartın yüksekliğini
   değiştiriyor (layout shift / CLS).

   Sorun 2: Blocksy `[data-products] [data-add-to-cart=auto-hide] .added{display:none}`
   ile orijinal butonu KALICI gizliyor (WooCommerce `.added` sınıfını geri almıyor).

   Çözüm: enjekte edilen linki gizle, orijinal butonu yerinde tut, durumunu
   geçici olarak değiştir. DOM'a eleman eklenip çıkmadığı için kart yüksekliği
   sabit kalır. Kalıcı geri bildirim navbar'daki adet rozetinde yaşar.
   ========================================================================== */

/* 1) İkinci "Sepetim" linki hiç görünmesin — sepete erişim navbar'da ve mobil
      alt çubukta zaten var, karta ikinci CTA gereksiz. */
.ct-woo-card-actions .added_to_cart,
ul.products li.product .added_to_cart { display: none !important; }

/* 2) Orijinal buton `.added` alsa da yerinde kalsın. Seçici bilinçli olarak
      `[data-products]` bağlamından bağımsız — WOOF AJAX'ı loop'u yeniden
      çizdiğinde o attribute kaybolabiliyor, iki senaryoda da aynı sonuç. */
ul.products li.product a.add_to_cart_button.added,
.ct-woo-card-actions .add_to_cart_button.added { display: flex !important; }

/* 3) Geçici "eklendi" durumu — ters çevrilmiş (outline) görünüm. Dolgulu
      turuncu dinlenme halinden de koyu varyanttan da net ayrışır; palet dışı
      renk (yeşil vb.) kullanılmıyor. Boyut/padding değişmiyor → CLS yok. */
ul.products li.product a.add_to_cart_button.zbx-eklendi,
ul.products li.product .ct-woo-card-actions .button.zbx-eklendi {
	background: var(--zbx-krem) !important;
	border-color: var(--zbx-aksiyon) !important;
	color: var(--zbx-aksiyon) !important;
	box-shadow: inset 0 0 0 1px var(--zbx-aksiyon);
}

/* 4) Navbar adet rozeti. Blocksy `.ct-dynamic-count-cart`'ı markup'a basıyor ve
      `woocommerce_add_to_cart_fragments` ile AJAX'ta tazeliyor, ama hiçbir CSS
      kuralı yok — bu yüzden görünmüyordu. */
.ct-header-cart .ct-icon-container,
[data-id="cart"] .ct-icon-container { position: relative; display: inline-flex; }

[data-id="cart"] .ct-dynamic-count-cart {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	background: var(--zbx-aksiyon);
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 10px;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}
[data-id="cart"] .ct-dynamic-count-cart[data-count="0"] { display: none; }

/* 5) Sepet tutarı navbar'dan kalksın — gösterge adet olacak. */
[data-id="cart"] .ct-cart-item > .ct-label[data-price="yes"] { display: none !important; }

/* 6) Masaüstünde snippet 387 native sepeti gizleyip kendi `.zbk-cart` linkini
      basıyor; rozeti oraya betik.js kopyalıyor. */
.zbk-links a.zbk-cart { position: relative; }
.zbk-links a.zbk-cart .zbx-sepet-rozet {
	position: absolute;
	top: -6px;
	left: 11px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	background: var(--zbx-aksiyon);
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 10px;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Favorilerim (TI WooCommerce Wishlist) — 2026-08-09
   ------------------------------------------------------------------
   Ürün kartlarında iki kalp oluşuyordu:
     1) WPCode 400'ün JS ile bastığı `.zb-fav` — SAHTE, hiçbir yere kayıt
        yapmıyordu (yalnız bir sınıf açıp kapatıyordu).
     2) Eklentinin gerçek `.tinvwl_add_to_wishlist_button` butonu.
   İşlevsiz olan gizlendi; müşteriye çalışan tek kalp gösteriliyor.
   ⚠ WPCode 400'ün kodu değiştirilmedi (kritik olmayan ama paylaşılan snippet);
   ileride o snippet elden geçirilirse `.zb-fav` üretimi tamamen kaldırılabilir.
------------------------------------------------------------------ */
.woocommerce ul.products li.product .zb-fav,
.zb-cardacts .zb-fav {
	display: none !important;
}

/* KART BEĞENİ TUŞU — görselin sağ üstünde, daire içinde siyah kalp
   (2026-08-09, pazaryeri düzeni isteği).

   Eklenti butonu `woocommerce_after_shop_loop_item` ile kartın EN ALTINA,
   "Sepete Ekle"nin altına basılıyor. HTML'e dokunmadan konumu CSS ile
   değiştiriyoruz: kart `position:relative`, buton kabı `absolute`.

   Neden eklenti ayarından değil: TI Wishlist'in `position` seçeneği yalnız
   before/after add-to-cart sunuyor; görselin üstü seçeneklerde yok. */
.woocommerce ul.products li.product {
	position: relative;
}
.woocommerce ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	margin: 0;
	width: auto;
}
/* Eklenti kabın içine boş bir `.tinv-wishlist-clear` div'i koyuyor; absolute
   kutuda o div satır açıp kalbi aşağı itiyordu. */
.woocommerce ul.products li.product .tinvwl-loop-button-wrapper .tinv-wishlist-clear {
	display: none;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	/* Çok hafif gri gölge — daire zeminden ayrılsın ama öne çıkmasın. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
	color: #1a1a1a;
	font-size: 0;
	/* line-height: 0 kalp ikonunu dairenin içinde yukarı kaydırıyordu —
	   ::before satır kutusu sıfır yükseklikte hizalanıyordu. */
	line-height: 1;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
/* İkon font glifi kendi yan boşluğunu taşıdığı için flex ortalama yetmiyordu
   (kalp sola kayık duruyordu). ::before'u tam genişlikte blok yapıp metin
   olarak ortalıyoruz; `text-stroke` çizgi kalınlığını artırıyor. */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button::before {
	display: block;
	width: 100%;
	margin: 0;
	font-size: 18px;
	line-height: 34px;
	text-align: center;
	-webkit-text-stroke: 0.6px currentColor;
}
/* Üzerine gelince kalp kırmızıya döner (Osman isteği, 2026-08-09). */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .26);
	color: var(--zbx-aksiyon, #cf3700);
}
/* Favorilere eklenmiş hali: dolu kalp, "Sepete Ekle" ile aynı ana renk.
   ⚠ `tinvwl-product-in-list` sınıfı BUTONUN KENDİSİNDE duruyor, sarmalayıcıda
   değil — ilk yazımda alt-eleman seçicisi kullanıldığı için kural hiç tutmadı
   ve dolu kalp siyah kalmıştı. */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	color: var(--zbx-aksiyon, #cf3700);
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list:hover {
	color: var(--zbx-aksiyon-koyu, #932700);
}

/* KARGO BEDAVA rozeti kartta fiyatın üstünde (2026-08-09).
   Konumu PHP hook'u veriyor (`product-card:price:before`), CSS yalnız aralığı
   ayarlıyor. Kart rozeti tekil üründekinden bir tık küçük — kartta yer dar. */
.woocommerce ul.products li.product .zbx-kargo-satiri {
	margin: 0 0 6px;
	/* ⛔ `display:flex` ŞART — satırın yüksekliği rozete KİLİTLENSİN (2026-09-19).
	   Blok div olarak bırakılınca yükseklik kalıtılan `line-height`tan geliyordu
	   ve kırılıma göre değişiyordu (canlıda ölçüldü: 390px'te 19,8px ·
	   768/1440'ta 26,4px), oysa rozetin kendi kutusu her yerde 17px. Aşağıdaki
	   rezerve sabit bir sayı olduğu için satırın da sabit olması gerekiyor. */
	display: flex;
	align-items: center;
}
.woocommerce ul.products li.product .zbx-kargo-rozet {
	font-size: 11px;
	padding: 3px 8px;
}

/* ⛔ ROZETSİZ KARTTA FİYATIN ÜSTÜNE ROZET KADAR BOŞLUK BIRAKILIR (2026-09-19,
   Osman: "kargo bedava olmadığında aynı hizada gelmiyor ve çok düzensiz
   duruyor, fiyatlar aynı hizada dursun").
   Kartta akışta olan TEK koşullu öge bu satır: rozet yoksa PHP hiç basmıyor
   (`zbx_kart_kargo_rozeti()`, hook `product-card:price:before`) ve fiyat
   yukarı kayıyordu. Başlık zaten `min-height: 2.7em` ile hizalı, "En Çok
   Satan" rozeti `position:absolute` — ikisi de suçsuz.
   ⛔ GİZLİ ("Kargo Bedava" metnini `visibility:hidden` ile basma) ÇÖZÜM
   KULLANILMAZ: kargosu bedava OLMAYAN ürünün DOM'unda o metin, sayfayı
   okuyan ajana yanlış beyandır (kural 24).
   ⚠ 23px = rozet kutusu 17px (font 11px · line-height 1 · padding 3px×2) +
   satırın 6px alt boşluğu. Rozetin font/padding'ini değiştirirsen BU SAYIYI
   DA değiştir — ayrı düşerlerse hiçbir tarayıcı yakalamaz.
   ⚠ `:has()` desteklemeyen eski tarayıcıda kural hiç uygulanmaz; görünüm
   bugünküne düşer, kırılma olmaz. */
.woocommerce ul.products li.product:not(:has(.zbx-kargo-satiri)) .price {
	margin-top: 23px;
}

/* Favorilerim sayfası: eklentinin kendi <h2> başlığı sayfa H1'iyle birebir aynı
   ("Favorilerim" iki kez alt alta görünüyordu) — ikincisi gizlendi. */
.page .tinv-wishlist .tinv-header {
	display: none;
}

/* ------------------------------------------------------------------
   HUSKY (WOOF) filtre — "Loading ..." katmanını kaldır (2026-08-09)
   ------------------------------------------------------------------
   Kullanıcı bildirdi: bir nitelik işaretlenince veya "Sıfırla" basılınca
   ürünlerin üstüne gri "Loading ..." kutusu biniyordu. HUSKY bunu
   `overlay_skin = default` ayarında `#woof_html_buffer` katmanıyla basıyor
   (js/front.js → woof_show_info_popup). Sonuçlar zaten AJAX ile birkaç yüz
   milisaniyede geliyor; kutu bilgi vermeden görüntüyü kapatıyordu.
   Katman gizlendi — filtreleme aynen çalışır, sadece "Loading" kutusu çıkmaz.
------------------------------------------------------------------ */
#woof_html_buffer,
.woof_info_popup {
	display: none !important;
}

/* ------------------------------------------------------------------
   SONSUZ KAYDIRMA — sayfalama görünümü (2026-08-09)
   ------------------------------------------------------------------
   Ürünler `betik.js` tarafından kaydırdıkça ekleniyor. Sayfa numaraları
   ekranda GÖSTERİLMİYOR ama DOM'da KALIYOR: bir sonraki sayfanın adresi
   (`a.next`) oradan okunuyor ve Google da linkleri görmeye devam ediyor
   (sonsuz kaydırmanın klasik SEO kaybı böylece oluşmuyor).
   ⚠ `display:none` KULLANMA — gözlemci görünürlüğü izliyor, gizlenen
   eleman kesişim üretmez ve yükleme hiç tetiklenmez.

   ⚠ `body.zbx-ss-kapali` — HUSKY filtresi açıkken sayfalama `admin-ajax.php`
   adresine dönüyor ve sonsuz kaydırma çalışamıyor (betik.js açıklamasına bak).
   O durumda sayfa numaraları geri gösterilir, kullanıcı listede mahsur kalmaz.
------------------------------------------------------------------ */
body:not(.zbx-ss-kapali).tax-product_cat .ct-pagination > *:not(.zbx-liste-bitti),
body:not(.zbx-ss-kapali).post-type-archive-product .ct-pagination > *:not(.zbx-liste-bitti) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tax-product_cat .ct-pagination,
.post-type-archive-product .ct-pagination {
	position: relative;
	min-height: 24px;
	border: 0;
	justify-content: center;
}
/* Yükleme sırasında ince bir nabız — buton yok, sadece "çalışıyor" işareti. */
.ct-pagination.zbx-yukleniyor::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 8px auto;
	border: 2px solid var(--zbx-kum, #d9c3a5);
	border-top-color: var(--zbx-aksiyon, #cf3700);
	border-radius: 50%;
	animation: zbxDon .7s linear infinite;
}
@keyframes zbxDon { to { transform: rotate(360deg); } }

.zbx-liste-bitti {
	width: 100%;
	padding: 10px 0 2px;
	color: #6b5a4a;
	font-size: 13.5px;
	text-align: center;
}

/* TEKİL ÜRÜN — "Favorilere ekle" bağlantısı (2026-08-09).
   Eklenti varsayılanı mavi (#2872fa) basıyordu; sayfadan mavi tamamen
   kaldırıldığı için marka rengine çekildi. Ekli haldeki dolu kalp de aynı
   renkte — kartlarla tutarlı. */
.single-product .tinvwl_add_to_wishlist_button {
	color: var(--zbx-aksiyon, #cf3700) !important;
}
.single-product .tinvwl_add_to_wishlist_button:hover {
	color: var(--zbx-aksiyon-koyu, #932700) !important;
}

/* KART SAĞ ÜST KÖŞE — WPCode 400'ün ikon kutusu tamamen kaldırıldı (2026-08-09)
   `.zb-cardacts` kutusu favori kalbiyle birebir aynı noktayı (`top:10px;
   right:10px`) kullanıyordu ve ana sayfada sepet ikonu kalbin üstüne biniyordu.
   Kutuyu aşağı kaydırmak yerine tamamı gizlendi: içindeki iki düğme de gereksiz —
   `.zb-fav` sahteydi (hiçbir yere kayıt yapmıyordu), `.zb-qadd` ise kartta zaten
   duran "Sepete Ekle" düğmesinin kopyasıydı. Kartın sağ üstünde artık yalnız
   gerçek favori kalbi var.
   ⚠ Snippet 400'ün JS'i kutuyu üretmeye devam ediyor (kod değiştirilmedi);
   o snippet elden geçirilirse `.zb-cardacts` üretimi tamamen silinebilir. */
.woocommerce ul.products li.product .zb-cardacts,
body.home ul.products li.product .zb-cardacts {
	display: none !important;
}

/* ANA SAYFA BÖLÜM ROZETİ — daire (2026-08-09, 2026-08-20'de küçültüldü)
   ------------------------------------------------------------------
   Snippet 400 kartın altına "ÇOK SATAN" / "YENİ" hapı basıyordu: siyah,
   geniş ve ürün adının hemen üstünde durduğu için başlıkla yarışıyordu.
   2026-08-09'da pazaryeri düzenine geçildi: görselin sol ÜSTÜNDE daire,
   zemin "Sepete Ekle" ile aynı aksiyon rengi.

   2026-08-20 (Osman): daire 52×52 idi ve yazının etrafında geniş boş
   turuncu alan bırakıyordu — "yine yuvarlak olsun ama çok büyük olmasın,
   kalp ikonu ile aynı hizada olsun". Çap 40px'e indirildi (kalp 34px;
   40, "SATAN" satırının 9,5px'te ~29px'lik genişliğini alan en küçük
   makul çap — 34'te yazı sığmıyor).

   ⚠ DİKEY HİZA — ölçülmüş, tahmin edilmemiş (2026-08-20):
   rozet `figure`ın içinde, favori kalbi ise `li.product`ın içinde duruyor.
   `figure` karttan **11px** aşağıda başlıyor; kalp sarmalayıcısı da 11px'te
   ve kalp 34px, yani kalbin merkezi karta göre 28px. Rozetin merkezi de
   28'e denk gelsin diye figure içindeki çapa 28 − 11 = **17px**, üstüne
   `translateY(-50%)`. Böylece hiza rozetin çapından bağımsız: çap
   değişirse `top`a dokunmaya gerek kalmaz.
   (Doğrudan `top:8px` yazıldığında rozet kalbin 8-10px altında kalıyordu.)

   ⚠ Snippet 400'ün kendi kuralları eklenti CSS'inden SONRA basılıyor
   (WPCode inline <style>), o yüzden burada `!important` şart. Metin JS'ten
   geldiği için buradan değiştirilmez (metin notu aşağıda).

   ⚠ ZEMİN #298200 — KENDİ RENGİ, DEĞİŞKENE BAĞLI DEĞİL (2026-08-21
   Osman kararı: kargo rozetiyle RENKLER TAKAS EDİLDİ — bu rozet #007CAA
   maviden #298200 yeşile, kargo rozeti yeşilden maviye geçti). Aynı gün
   sırayla #FCE61E → `--zbx-kargo` → #007CAA → #298200 denendi. Bir ara
   kargo rozetiyle ORTAK değişkeni paylaşıyordu; artık paylaşmıyor.
   ⛔ Bu yüzden buraya `var(--zbx-kargo)` YAZMA: kargo rengi değişince
   (ki 2026-08-21'de iki kez değişti) bu rozet de sessizce peşinden gider.
   Zemin koyu olduğu için yazı beyaz (kontrast 4,7:1, WCAG AA). Daha açık
   bir renk yazarsan yazı rengini birlikte ölç: sarı gibi açık bir zeminde
   beyaz okunmaz — o hata bugün bir kez yapıldı.

   ⚠ METİN "En Çok Satan" (2026-08-21 Osman kararı) — JS'ten geliyor,
   snippet 400 (`tools/apply_snippet_400_rozet_metin.php`). CSS'te
   `text-transform` YOK; yazıldığı gibi basılır, büyük harfe çevirme. */
body.home ul.products li.product .zb-secbadge {
	display: flex !important;
	position: absolute !important;
	top: 17px !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 3px !important;
	border-radius: 50% !important;
	background: #298200 !important;
	box-shadow: 0 2px 6px rgba(43, 29, 22, .18) !important;
	color: #fff !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-align: center;
}

/* ADET KUTUSU — kutunun içine "Adet" etiketi (2026-08-09).
   Kutu yalnız "− 1 +" gösteriyordu; ne olduğu ilk bakışta anlaşılmıyordu.
   Etiket CSS ::before ile basılıyor (WooCommerce şablonuna dokunulmadan);
   ekran okuyucular zaten input'un kendi `aria-label`ını okuyor, o yüzden
   içerik görsel amaçlı.

   ⚠ İlk denemede `.quantity`ye `display:inline-flex` verilip etiket normal akışa
   sokulmuştu: çerçeve `.quantity`de DEĞİL `input.qty` üzerinde olduğu için yazı
   kutunun dışında kaldı, üstelik Blocksy'nin `.ct-increase`/`.ct-decrease`
   span'ları konumunu kaybedip eksi düğmesi kayboldu. Doğrusu: çerçeveyi kutuya
   taşı, input'unkini kaldır, etiketi `absolute` bas — flex düzeni bozulmaz.

   Son biçim (Osman'ın gönderdiği örnek): etiket kutunun ÜSTÜNDE, marka
   renginde ve küçük. Kutunun İÇİNE alınınca eksi düğmesinin üstüne biniyordu
   (`.ct-decrease` absolute ve kutunun sol ucunda duruyor) — bu yüzden yazı
   dışarı, üste taşındı; `.ct-cart-actions`a da o kadar üst boşluk verildi. */
.ct-cart-actions {
	margin-top: 24px;
}
.ct-cart-actions .quantity {
	position: relative;
	border: 1px solid var(--zbx-aksiyon);
	border-radius: 5px;
}
.ct-cart-actions .quantity::before {
	content: "Adet";
	position: absolute;
	left: 2px;
	top: -20px;
	color: var(--zbx-aksiyon);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}
.ct-cart-actions .quantity .qty {
	border: 0 !important;
	background: transparent;
}

/* ------------------------------------------------------------------
   SEPET — mobilde çift fiyat (2026-08-09)
   ------------------------------------------------------------------
   Sepet sayfası WooCommerce **blok** sepetiyle çalışıyor (klasik
   `table.shop_table` değil). Her satırda fiyat İKİ yerde basılıyor:
     · `.wc-block-cart-item__prices` — birim fiyat, ürün adının altında
     · `.wc-block-cart-item__total`  — satır toplamı, sağ sütunda
   Adet 1 iken ikisi birebir aynı rakam; masaüstünde sütun başlıkları
   ("Ürün" / "Toplam") ayrımı anlatıyor ama mobilde o başlık satırı
   gizleniyor ve yan yana iki aynı fiyat kafa karıştırıyor.
   Mobilde birim fiyat gizlendi; kalan tek rakam adet değişince güncellenen
   satır toplamı. (Masaüstü olduğu gibi bırakıldı — orada başlıklar var.)
------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* WooCommerce blok CSS'i `.wc-block-cart-items .wc-block-cart-item__prices`
	   ile geliyor — tek sınıflı kural yeniliyordu, seçici güçlendirildi. */
	.wc-block-cart .wc-block-cart-item__prices,
	.wc-block-cart-items .wc-block-cart-item__prices {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   YÜZEN İKONLAR — sepet/ödeme sayfasında mobilde kapatıldı (2026-08-09)
   ------------------------------------------------------------------
   `.zbx-float` (WhatsApp/Instagram/Facebook/yukarı) sağ kenarda sabit
   duruyor ve 390px genişlikte sepet toplamının rakamını örtüyordu
   (ölçüldü: ikon kutusu 311-359px, "Tahmini toplam" değeri 289-359px).
   Ödeme akışında para rakamının üstünü kapatan bir süs kabul edilemez.
   Masaüstünde çakışma yok, orada duruyor.
------------------------------------------------------------------ */
@media (max-width: 767px) {
	.woocommerce-cart .zbx-float,
	.woocommerce-checkout .zbx-float {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   HERO SLIDER OKLARI (2026-08-09)
   ------------------------------------------------------------------
   `betik.js` noktaları `.zbx-slider-nav` kutusuna taşıyıp iki yanına ok
   düğmesi koyuyor. Noktaların kendi mutlak konumu sayfa 11'in gömülü
   `<style>` bloğundan geliyor ve o blok eklenti CSS'inden SONRA basılıyor —
   bu yüzden burada `!important` şart.
------------------------------------------------------------------ */
.zbx-slider-nav {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 6;
}
.zbx-slider-nav .zb-dots {
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
}
.zbx-slider-ok {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	color: #2b1d16;
	line-height: 0;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.zbx-slider-ok svg {
	display: block;
}
.zbx-slider-ok:hover,
.zbx-slider-ok:focus-visible {
	background: #fff;
	transform: scale(1.06);
}
@media (max-width: 767px) {
	.zbx-slider-nav { gap: 10px; }
	.zbx-slider-ok { width: 30px; height: 30px; }
	.zbx-slider-ok svg { width: 14px; height: 14px; }
}

/* ------------------------------------------------------------------
   BLOK SEPET/ÖDEME TİPOGRAFİSİ — marka renklerine hizalama (2026-08-09)
   ------------------------------------------------------------------
   Sepet ve ödeme sayfaları WooCommerce blok bileşenleriyle geliyor ve
   kendi varsayılan renklerini basıyor: ürün adı bağlantısı #2874fa (mavi),
   başlık #192a3d, ara toplam etiketleri #3a4f66 (lacivert tonları).
   Sitenin geri kalanı espresso (#2B1D16) + aksiyon (#cf3700) kullanıyor;
   ödeme akışının başka bir sitedenmiş gibi görünmesi güveni zedeliyor.
------------------------------------------------------------------ */
.wc-block-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
	color: var(--zbx-espresso, #2b1d16) !important;
	font-weight: 600;
}
.wc-block-cart .wc-block-components-product-name:hover,
.wc-block-checkout .wc-block-components-product-name:hover {
	color: var(--zbx-aksiyon, #cf3700) !important;
}
.wc-block-cart .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-title,
.wc-block-checkout .wc-block-components-title,
.wc-block-cart h1, .wc-block-cart h2, .wc-block-cart h3,
.wc-block-checkout h1, .wc-block-checkout h2, .wc-block-checkout h3 {
	color: var(--zbx-espresso, #2b1d16);
}

/* --- OKUNAKLILIK (2026-08-11) -------------------------------------------
   Blok sepet/ödeme bileşenlerinin TAMAMI 13px/18,2px ile geliyordu: ürün adı,
   birim fiyat, satır toplamı, kısa açıklama, ara toplam satırları — hepsi.
   Sitenin geri kalanında gövde metni 15-16px; alışverişin son adımının en
   küçük yazıya sahip olması hem okunaklılık hem güven sorunu.
   Mobil ve masaüstü ayrı ayarlanıyor (Osman'ın isteği): mobilde sütun 159px
   olduğu için ölçek daha ölçülü, masaüstünde tam boy.

   ⚠ Seçiciler NEDEN bu kadar uzun: WooCommerce blok CSS'i satır içi metinleri
   `table.wc-block-cart-items .wc-block-cart-items__row .<bileşen>` (0,3,3)
   özgüllüğüyle `var(--wp--preset--font-size--small, 14px)`e bağlıyor. Kısa
   `.wc-block-cart .<bileşen>` (0,2,0) yazımı CDP'de "eşleşti" görünüp yine de
   kaybediyordu — ölçümde ürün adı 13px'te kaldı. Aynı yapı tekrarlanıyor. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
	font-size: 14.5px;
	line-height: 1.35;
}
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	font-size: 14px;
}
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: 600;
}
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata,
.wc-block-checkout .wc-block-components-product-metadata {
	font-size: 13px;
	line-height: 1.45;
}
.wc-block-cart .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-item__value {
	font-size: 14px;
}
/* Sepet tablosunun sütun başlıkları (Ürün / Ayrıntılar / Toplam) — mobilde
   zaten gizli, masaüstünde 13px'ti */
.wc-block-cart .wc-block-cart-items__header th {
	font-size: 13.5px;
}
@media (min-width: 768px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
	.wc-block-checkout .wc-block-components-product-name {
		font-size: 16px;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price,
	.wc-block-checkout .wc-block-components-order-summary-item__total-price {
		font-size: 15px;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata,
	.wc-block-checkout .wc-block-components-product-metadata {
		font-size: 13.5px;
	}
	.wc-block-cart .wc-block-components-totals-item__label,
	.wc-block-cart .wc-block-components-totals-item__value,
	.wc-block-checkout .wc-block-components-totals-item__label,
	.wc-block-checkout .wc-block-components-totals-item__value {
		font-size: 14.5px;
	}
}

/* ==================================================================
   TEMA PALETİ — Blocksy varsayılanlarının marka renkleriyle değişimi
   (2026-08-09)
   ==================================================================
   KÖK SEBEP: Blocksy'nin renk paleti hiç ayarlanmamıştı; tema hâlâ
   fabrika değerlerini kullanıyordu:
     color-1 #2872fa (mavi bağlantı) · color-2 #1559ed (hover)
     color-3 #3A4F66 (gövde metni)   · color-4 #192a3d (başlık)
   Bugüne kadarki "kalan mavi" şikâyetlerinin hepsi buradan geliyordu:
   biz yalnız tek tek gördüğümüz yerleri (buton, rozet, kart) elle
   boyamışız; dokunmadığımız her bileşen — sayfa başlıkları, içerik
   bağlantıları, blok sepet/ödeme metinleri, blog yazıları — temanın
   mavisini basmaya devam etmiş.

   Tek yerden düzeltiliyor: değişkenler marka paletine çekildi. Böylece
   ileride eklenecek her yeni blok da otomatik uyumlu gelir.

   ⚠ `html:root` kullanıldı (`:root` değil): temanın kendi değişkenleri
   `<head>` içinde inline basılıyor ve eşit spesifiklikte sonra gelirse
   bizimkini yenerdi. `html:root` bir seviye daha spesifik.
================================================================== */
html:root {
	--theme-palette-color-1: #cf3700;   /* bağlantı / vurgu */
	--theme-palette-color-2: #932700;   /* bağlantı hover */
	--theme-palette-color-3: #4a4038;   /* gövde metni — sıcak nötr */
	--theme-palette-color-4: #2b1d16;   /* başlıklar — espresso */
	--theme-text-color: #4a4038;
	--theme-headings-color: #2b1d16;
	--theme-link-initial-color: #cf3700;
	--theme-link-hover-color: #932700;
}

/* KDV ibaresi — fiyatın hemen altında, sessiz ton (2026-08-09) */
.zbx-kdv-not {
	margin: -6px 0 14px;
	color: #6b5a4a;
	font-size: 12.5px;
}

/* Hero "İncele" düğmesi mobilde biraz yukarı (2026-08-09 kullanıcı isteği).
   Metin bloğunun alt dolgusuyla oynamak başlığı da kaydırırdı; yalnız
   düğmeye alt boşluk verildi. */
@media (max-width: 767px) {
	.zb-slide .zb-btn {
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------------
   SİPARİŞ ADIM GÖSTERGESİ (2026-08-09)
   ------------------------------------------------------------------
   Sepet → Teslimat & Ödeme → Sipariş Onayı. Yalnız görsel bir yol
   haritası; akış tek sayfalık klasik WooCommerce formunda kalıyor.
   Bağlayıcı çizgi `::before` ile numaraların arasından geçer; mobilde
   yazılar küçülür ama üç adım da tek satırda kalır.
------------------------------------------------------------------ */
.zbx-adimlar {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.zbx-adim {
	position: relative;
	flex: 1 1 0;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #9b8e85;
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}
/* Bağlayıcı çizgi — ilk adım hariç her adımın soluna. */
.zbx-adim + .zbx-adim::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: #e3ddd6;
	z-index: 0;
}
.zbx-adim--aktif::before,
.zbx-adim--tamam::before {
	background: var(--zbx-aksiyon, #cf3700) !important;
}
.zbx-adim-no {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 2px #e3ddd6;
	color: #9b8e85;
	font-size: 14px;
	line-height: 1;
}
.zbx-adim--aktif .zbx-adim-no,
.zbx-adim--tamam .zbx-adim-no {
	background: var(--zbx-aksiyon, #cf3700);
	box-shadow: none;
	color: #fff;
}
.zbx-adim--aktif,
.zbx-adim--tamam {
	color: var(--zbx-espresso, #2b1d16);
}
@media (max-width: 600px) {
	.zbx-adimlar { margin-bottom: 20px; }
	.zbx-adim { font-size: 11.5px; gap: 6px; }
	.zbx-adim-no { width: 28px; height: 28px; font-size: 13px; }
	.zbx-adim + .zbx-adim::before { top: 13px; }
}

/* ------------------------------------------------------------------
   ÖDEME FORMU (2026-08-10)
   ------------------------------------------------------------------
   Alan sırası ve etiketler `bakirbul-custom.php` → zbx_odeme_alanlari().
   Buradaki kurallar yalnız görünüm: gizli ülke alanı, adres uyarısı,
   ikili satırların mobilde alt alta düşmesi.
------------------------------------------------------------------ */
.zbx-gizli-alan {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.zbx-adres-notu {
	display: flex;
	gap: 8px;
	margin: 4px 0 12px;
	padding: 10px 12px;
	border: 1px solid #f0d9c9;
	border-left: 3px solid var(--zbx-aksiyon, #cf3700);
	border-radius: 6px;
	background: #fdf6f1;
	color: #6b4b3a;
	font-size: 12.5px;
	line-height: 1.5;
}
.woocommerce-checkout .form-row label {
	font-weight: 600;
	font-size: 13.5px;
}
.woocommerce-checkout #billing_tckn_field .optional {
	display: none;
}
@media (max-width: 600px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		width: 100%;
		float: none;
	}
}

/* ------------------------------------------------------------------
   SCROLL-REVEAL KAYMASINI KAPAT (2026-08-10 hız turu 2)

   WPCode 396 bölümleri `opacity:0` + `transform:translateY(26px)` ile
   başlatıp görünür olunca geri alıyor. Layout Instability API elemanın
   EKRANDAKİ konumuna bakar; transform ile yapılan hareket de kaymadır ve
   CLS'e sayılır. Üstelik IntersectionObserver her bölüm için tekrar
   tetiklendiğinden kullanıcı sayfayı kaydırdıkça CLS birikmeye devam eder
   ("scroll" CLS istisnası değildir — istisna yalnız tık/dokunma içindir).

   Çözüm: yalnız opacity geçişi kalsın. Opacity elemanın konum/boyutunu
   değiştirmediği için CLS'e sayılmaz; "belirme" efekti korunur, "kayma" gider.
   `!important` şart: snippet CSS'i stil.css'ten SONRA basılıyor.
------------------------------------------------------------------ */
body.home .zb-reveal {
	transform: none !important;
	will-change: opacity !important;
	transition: opacity .5s ease !important;
}

/* --------------------------------------------------------------------------
   TOPTAN AÇILIŞ SAYFALARI (pSEO) — /toptan-satis/ altındaki sayfalar
   Bloklar: bakır kuru özeti, teknik tablo, kullanım senaryosu, özel üretim,
   teklif kutusu, SSS. Ürün ızgarası ayrı stil ALMAZ — [toptan_urunler]
   WooCommerce'in kendi işaretlemesini bastığı için mevcut kart tasarımı
   (ÜRÜN KARTI TASARIMI bölümü) kendiliğinden geçerli olur.
   Düzen tamamen CSS; hiçbir blok JS ile taşınmaz (CLS).
   -------------------------------------------------------------------------- */
.zbx-kur-ozet {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 28px 0;
	padding: 16px 18px;
	background: var(--zbx-footer);
	border-radius: 12px;
	color: var(--zbx-kum);
}
.zbx-kur-ozet-ana {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.zbx-kur-ozet-etiket {
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(217, 195, 165, 0.65);
}
.zbx-kur-ozet-fiyat {
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	color: var(--zbx-krem);
}
.zbx-kur-ozet-not {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: rgba(217, 195, 165, 0.7);
}
.zbx-kur-ozet-not a {
	color: var(--zbx-kum);
	text-decoration: underline;
}

/* Teknik tablo — kalınlık/hacim/ağırlık dağılımı */
.zbx-lp-teknik {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 15px;
}
.zbx-lp-teknik th,
.zbx-lp-teknik td {
	padding: 10px 12px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	text-align: left;
	vertical-align: top;
}
.zbx-lp-teknik th {
	background: #f1ece4;
	color: var(--zbx-espresso);
	font-weight: 600;
}
.zbx-lp-teknik caption {
	margin-bottom: 8px;
	color: #6b5b50;
	font-size: 13px;
	text-align: left;
}

/* Öne çıkan not kutusu — özel üretim, teslimat, uyarı */
.zbx-lp-kutu {
	margin: 24px 0;
	padding: 16px 18px;
	background: #f7f1e8;
	border-left: 3px solid var(--zbx-aksiyon);
	border-radius: 0 10px 10px 0;
}
.zbx-lp-kutu > :first-child {
	margin-top: 0;
}
.zbx-lp-kutu > :last-child {
	margin-bottom: 0;
}

/* Teklif kutusu — formun üstündeki çağrı bloğu */
.zbx-lp-teklif {
	margin: 32px 0;
	padding: 22px 20px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 14px;
	background: #fff;
}
.zbx-lp-teklif h2,
.zbx-lp-teklif h3 {
	margin-top: 0;
}
.zbx-lp-teklif-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.zbx-lp-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--zbx-aksiyon);
	border-radius: 8px;
	color: var(--zbx-aksiyon);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.zbx-lp-wa:hover,
.zbx-lp-wa:focus {
	background: var(--zbx-aksiyon);
	color: #fff;
}

/* Kardeş sayfa bağlantıları */
/* Ürün ızgarasının altındaki "Tüm … modellerini görün →" bağlantısı (2026-09-20).
   Osman kararı: ızgarada DÖRT ürün, gerisi için kategori arşivine tıklanır.

   ⛔ ÇİP YA DA DOLU BUTON DEĞİL. Dolu buton sayfada bir kez, teklif kutusunda
      (kural 52). Çip yapılsaydı mobil kural 2 gereği 44×44 gerekirdi.
   ⛔ DOKUNMA HEDEFİ GÖRÜNMEZ ::after İLE TAMAMLANIR — `min-height` + `inline-flex`
      YAZILMAZ (kural 39): bağlantı uzun, atomik satır içi kutuya dönerse satır
      kırılması bozulur ve dar ekranda yatay taşma üretir.
   ⚠ Ölçüldü: ::after olmadan bağlantı 21px kalıyordu ve `denetim.mjs` üç sayfada
     birden HATA verdi (2026-09-20, 360/390/768'de sekiz kez). */
.zbx-lp-devam {
	margin: 14px 0 26px;
	font-size: 15px;
}
.zbx-lp-devam a {
	position: relative;
	color: var(--zbx-aksiyon);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.zbx-lp-devam a::after {
	content: "";
	position: absolute;
	inset: -6px -4px;
}
/* ⚠ `--zbx-aksiyon-hover` bu dosyada TANIMLI DEĞİL; yedekle yazılır
   (aynı kalıp satır ~2990'da da kullanılıyor). Yedeksiz yazarsan hover rengi
   miras alınana düşer ve etkileşim sinyali kaybolur. */
.zbx-lp-devam a:hover,
.zbx-lp-devam a:focus {
	color: var(--zbx-aksiyon-hover, #932700);
}

.zbx-lp-baglar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}
.zbx-lp-baglar li {
	margin: 0;
}
.zbx-lp-baglar a {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--zbx-kum);
	border-radius: 999px;
	color: var(--zbx-espresso);
	font-size: 14px;
	text-decoration: none;
}
.zbx-lp-baglar a:hover,
.zbx-lp-baglar a:focus {
	border-color: var(--zbx-aksiyon);
	color: var(--zbx-aksiyon);
}

/* Hub sayfasındaki (Toptan Satış, ID 43) alt sayfa bağlantı bölümü.
   Gruplu liste: düz 14 linklik yığın yerine yapı gösterir. */
.zbx-lp-hub {
	margin: 32px 0 8px;
	padding: 22px 20px 8px;
	background: #f7f1e8;
	border-radius: 14px;
}
.zbx-lp-hub > h2 {
	margin-top: 0;
}
.zbx-lp-hub h3 {
	margin: 18px 0 8px;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #6b5b50;
}
.zbx-lp-hub .zbx-lp-baglar {
	margin: 0 0 12px;
}
.zbx-lp-hub .zbx-lp-baglar a {
	background: #fff;
}

/* Canlı katalog özeti — [katalog_ozet]. Rakamlar sayfa açılışında DB'den okunur,
   metne gömülmez; katalog büyüdükçe/değiştikçe kendini günceller. */
.zbx-katalog-ozet {
	margin: 24px 0;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.zbx-katalog-ozet-ust {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 16px;
	background: #f1ece4;
	border-bottom: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
}
.zbx-katalog-ozet-baslik {
	font-weight: 600;
	color: var(--zbx-espresso);
}
.zbx-katalog-ozet-zaman {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b5b50;
}
.zbx-katalog-ozet-satir {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
	.zbx-katalog-ozet-satir {
		grid-template-columns: repeat(4, 1fr);
	}
	.zbx-katalog-ozet-hucre--genis {
		grid-column: span 2;
	}
}
.zbx-katalog-ozet-hucre {
	padding: 12px 16px;
	border-top: 1px solid #f1ece4;
	border-right: 1px solid #f1ece4;
}
.zbx-katalog-ozet-hucre:nth-child(-n + 2) {
	border-top: 0;
}
@media (min-width: 640px) {
	.zbx-katalog-ozet-hucre {
		border-top: 0;
	}
	.zbx-katalog-ozet-hucre:last-child {
		border-right: 0;
	}
}
.zbx-katalog-ozet-etiket {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b5b50;
}
.zbx-katalog-ozet-deger {
	display: block;
	margin-top: 3px;
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--zbx-espresso);
}
.zbx-katalog-ozet-not {
	margin: 0;
	padding: 10px 16px 13px;
	border-top: 1px solid #f1ece4;
	font-size: 12px;
	line-height: 1.55;
	color: #6b5b50;
}

/* ==========================================================================
   MOBİL UX TURU (2026-08-11)
   --------------------------------------------------------------------------
   Ölçüm: `node tools/mobil-denetim/denetim.mjs` — gerçek Chrome, 360/390/768px.
   Turun bulguları: başlıklarda mobil ölçek yoktu (tema h1/h2/h3'ü 30/35/30px'e
   SABİTLİYOR, her genişlikte aynı), dokunma hedeflerinin çoğu 44px altındaydı.
   Yatay taşma, İngilizce sızıntı ve viewport meta sorunu ÇIKMADI.

   İki kural bu blokta yaşıyor, ikisi de CLAUDE.md "Mobil UX kuralları"nda:
     1) Başlık boyutu sabit px yazılmaz — clamp() ölçeği kullanılır.
        Üst sınırlar mevcut masaüstü değerine eşit, alt sınır 360px için.
        vw katsayısı üst sınıra tam 768px'te ulaşacak şekilde seçildi, böylece
        tablet ve masaüstü görünümü DEĞİŞMEZ.
     2) Dokunma hedefi iki katmanlı: birincil kontrol 44×44, düz metin
        bağlantısı en az 32px yükseklik.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) AKIŞKAN BAŞLIK ÖLÇEĞİ
   Blocksy başlık boyutunu `--theme-font-size` değişkeniyle kuruyor
   (`h2 { --theme-font-size: 35px }` + `body,h1..h6 { font-size: var(...) }`).
   Bu yüzden font-size'ı doğrudan yazmak yerine DEĞİŞKENİ eziyoruz — tema
   kuralı olduğu gibi çalışmaya devam ediyor.
   `body h2` (0,0,2) tema `h2` kuralından (0,0,1) daha özgül, yükleme
   sırasından bağımsız kazanır.
   -------------------------------------------------------------------------- */
body h1 { --theme-font-size: clamp(24px, 3.9vw, 30px); }
body h2 { --theme-font-size: clamp(22px, 4.56vw, 35px); }
body h3 { --theme-font-size: clamp(19px, 3.9vw, 30px); }

/* Tema bu üç başlığı daha yüksek özgüllükle 30px'e sabitliyor
   (`[data-prefix="single_page"] .entry-header .page-title` vb.) */
.page-title,
.product_title,
.entry-summary .entry-title,
.woocommerce-products-header__title {
	--theme-font-size: clamp(23px, 3.9vw, 30px) !important;
}
/* 404 başlığı tek istisna: tema onu 40px'te bırakıyor */
.error404 .page-title { --theme-font-size: clamp(26px, 5.2vw, 40px) !important; }

/* Ana sayfa bölüm başlıkları — kural sayfanın kendi gömülü <style>'ında
   (bkz. TUZAK 15), bu yüzden !important şart.

   ⚠ Mobil taban 2026-08-20'de 21px → 20px indirildi. Sebep ölçüm: 360px'te
   başlık kutusu yalnız 214px (kalanını "Tümünü Gör →" alıyor) ve
   "En Çok Tercih Edilenler" 21px'te 219px sürüyor, yani iki satıra kırılıyor.
   20px'te ~209px olup tek satıra iniyor. Üst sınır (26px) ve vw katsayısı
   değişmedi — tablet/masaüstü görünümü aynı. */
.zn-sechead h2 { font-size: clamp(20px, 3.39vw, 26px) !important; }

/* --------------------------------------------------------------------------
   2) DOKUNMA HEDEFLERİ — birincil kontroller: 44×44
   -------------------------------------------------------------------------- */

/* Header: sepet ikonu 15×15, hamburger 18×18 idi — ikisi de sitenin
   en çok dokunulan iki kontrolü */
header.ct-header .ct-header-cart > .ct-cart-item,
header.ct-header [data-device="mobile"] [data-row="middle"] .ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ct-header .zbx-msearch-btn,
.ct-header form.zbx-msearch input[type="search"] { min-height: 44px; }

/* Hero slider: CTA, oklar ve noktalar */
.zb-slide .zb-btn { min-height: 44px; display: inline-flex; align-items: center; }
/* Slider gezinme çubuğu (`.zbx-slider-nav`, z-index 6) metin bloğunun (z-index 3)
   ÜSTÜNDE duruyor; 768px'te "İncele" butonunun alt yarısını kapatıp dokunuşu
   çalıyordu. Metin bloğuna alt boşluk verilerek buton çubuğun üstüne alındı. */
@media (min-width: 768px) {
	.zb-slider .zb-slide .zb-txt { padding-bottom: 66px; }
}
/* Parmakla yatay kaydırma (betik.js `kaydirmaKur`) — dikey sayfa kaydırması
   tarayıcıya bırakılıyor, yatay hareketi biz yorumluyoruz. */
.zb-slider {
	touch-action: pan-y;
}
/* Mobilde ok düğmeleri kaldırıldı (2026-08-11 kullanıcı kararı): slaytlar zaten
   parmakla kaydırılıyor, noktalar da duruyor. Masaüstünde oklar KALIYOR — orada
   kaydırma jesti yok, tek geçiş yolu onlar. */
@media (max-width: 767px) {
	.zbx-slider-ok { display: none !important; }
}
.zbx-slider-ok { width: 44px !important; height: 44px !important; }

/* Noktalar görsel olarak küçük kalmalı (10px) ama hedef 44px olmalı:
   görünür daire ::before'a taşındı, buton kendisi şeffaf 44×44 oldu */
.zbx-slider-nav .zb-dots button {
	position: relative;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 50%;
}
.zbx-slider-nav .zb-dots button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(43, 29, 22, .18);
	transition: background .18s;
}
.zbx-slider-nav .zb-dots button.act::before { background: var(--zbx-aksiyon); }

/* Ana sayfa "Tümünü Gör →" bağlantıları 102×25 idi.
   Renk: dekoratif `#de5d31` beyazda 3,67:1 (AA altı) ölçüldü — metin için aksiyon
   rengi (5,0:1); `#de5d31` yalnız çizgi/dekorda kalır (2026-09-02 denetim M13). */
.zn-sechead a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #cf3700;
}

/* Ürün kartı: sepete ekle butonu 40px, favori kalbi 34×34.
   Kalbin GÖRSEL boyutu 34 kalıyor — hedef görünmez ::after ile büyütülüyor,
   yoksa kart düzeni bozulur. */
.woocommerce ul.products li.product .ct-woo-card-actions .button,
.woocommerce ul.products li.product .button.product_type_simple { min-height: 44px !important; }
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button { position: relative; }
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
}

/* Ürün kartı başlığı: 2 satırlık yer `h2`'de rezerve ediliyordu ama tıklanabilir
   olan `<a>` tek satırlık başlıkta 17px'de kalıyordu — rezerve alanın yarısı ölü
   dokunma alanıydı. Satır kırpma (`-webkit-line-clamp`) bağlantıya taşındı; hem
   kırpma korunuyor hem hedef rezerve yüksekliğin tamamını kaplıyor. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: block;
	-webkit-line-clamp: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

/* Ürün tekil: sepete ekle, favori, sekmeler */
.ct-cart-actions .single_add_to_cart_button { min-height: 44px !important; }
.ct-cart-actions .tinvwl_add_to_wishlist_button { min-height: 44px; display: inline-flex; align-items: center; }
.woocommerce-tabs ul.tabs li a { min-height: 44px; display: flex; align-items: center; }

/* Kategori/mağaza: şerit çipleri, sıralama, "Devamını Oku", sayfalama.
   Sayfalama okları 38×4 ölçülmüştü — yükseklik neredeyse sıfırdı. */
.zbx-katstrip-list a { min-height: 44px; align-items: center; }
.woocommerce-ordering select.orderby { min-height: 44px; }
.zb-cat-seo-toggle { min-height: 44px !important; }
.ct-pagination a.page-numbers,
.ct-pagination span.page-numbers,
.ct-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* Blog: çipler, "Devamını Oku", arama butonu */
.bb-chip { min-height: 44px; display: inline-flex; align-items: center; }
/* `.bb-devam` arama sonuç sayfasında da çıkıyor — orada `.bb-blog-arsiv` sarmalayıcısı
   olmadığı için seçici öneksiz yazıldı */
.bb-devam { min-height: 44px; display: inline-flex; align-items: center; }
.bb-blog-arama button { min-height: 44px; }

/* Sepet/ödeme — YALNIZ görsel dokunma alanı; kargo mantığı, iyzico overlay
   ve form alan yapısı bu turda ELLENMEDİ.

   ⚠ 2026-08-11 (2. tur) — ARTI DÜĞMESİ ÇERÇEVENİN DIŞINA TAŞIYORDU.
   WooCommerce blok CSS'i miktar kutusuna sabit `width:107px` veriyor ve içine
   40px input + iki düğme sığdırıyor. Dokunma kuralı için düğmelere 44px
   verilince toplam 132px'e çıktı, kutu 107px'te kaldı: artı düğmesi kutunun
   22px dışına taştı ve mobilde ÇÖP KUTUSU İKONUNUN ÜSTÜNE bindi (ölçüldü:
   düğme 203-247, çöp kutusu 237-261). Çözüm, düğmeyi küçültmek değil kutuyu
   düğmelere göre genişletmek — genişlik masaüstünde 132px (44×3), mobilde
   124px (44 + 36 input + 44; input yüksekliği 44 kalıyor, dokunma kuralı
   "her iki boyut" üzerinden okunur ve satır 159px'lik sütuna sığar). */
.wc-block-components-quantity-selector {
	width: 132px !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
.wc-block-components-quantity-selector__button {
	min-width: 44px !important;
	min-height: 44px !important;
	flex: 0 0 44px !important;
}
.wc-block-components-quantity-selector__input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 44px !important;
}
@media (max-width: 767px) {
	/* Kutu genişleyince çöp kutusuyla arasındaki 12px'lik pay sütunu taşırıyordu */
	.wc-block-cart-item__quantity { gap: 8px !important; }

	/* ⚠ SEPET SATIRI SAĞDAN TAŞIYORDU (ölçüldü: satır sağ kenarı 369px, yani
	   360px'lik ekranın DIŞINDA — satır toplamı "1.299,00 ₺" görsel olarak
	   kırpılıyordu). Gövde yatay kaydırma üretmediği için sayfa taraması bunu
	   yakalamıyor; yalnız yazı kesiliyor.
	   Sebep: satır `table` değil GRID — WooCommerce `grid-template-columns`u
	   `80px 132px 24px 68px` + 16px sütun boşluğu olarak çözüyor; toplam 352px,
	   oysa kap 317px. `table-layout:fixed` bu yüzden işe yaramadı (satır tablo
	   hücresi değil, grid ögesi).
	   Yeni düzen (360px): 72 + 12 + 149 + 12 + 72 = 317. Ürün sütunundaki miktar
	   satırı 116 + 8 + 24 = 148px, sütuna sığıyor. */
	.wc-block-cart .wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr) 72px !important;
		column-gap: 12px !important;
	}
	.wc-block-cart .wc-block-cart-item__image img { width: 64px !important; height: auto; }
	.wc-block-cart .wc-block-cart-item__total { overflow-wrap: anywhere; }
	/* Sütun 149px'e inince miktar kutusu da 124'ten 116'ya çekiliyor (44+28+44).
	   Blok CSS'i input'a `padding:0 15px` veriyor — 28px'lik kutuda rakam
	   görünmez oluyordu, bu yüzden yatay boşluk sıfırlanıp ortalanıyor. */
	.wc-block-components-quantity-selector { width: 116px !important; }
	.wc-block-components-quantity-selector__input {
		padding-left: 2px !important;
		padding-right: 2px !important;
		text-align: center;
	}
}
.wc-block-cart-item__remove-link { position: relative; }
.wc-block-cart-item__remove-link::after { content: ""; position: absolute; inset: -10px; }
.wc-block-components-panel__button { min-height: 44px !important; }
.wc-block-components-button,
.woocommerce .button.wc-backward,
#place_order,
.woocommerce-form-login button,
.woocommerce-form-register button { min-height: 44px !important; }
/* ⚠ `.select2-hidden-accessible` HARİÇ — select2 orijinal <select>'i 1px'e
   küçültüp gizliyor; ona min-height vermek görünmez ama 44px yüksekliğinde
   bir hayalet kontrol üretiyor. */
.woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce-ordering select.orderby {
	min-height: 44px;
	min-width: 44px;
}
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"] { min-height: 44px; }

/* Onay kutuları: `<input>` DEĞİŞTİRİLMİŞ (replaced) öge — `::after` üzerinde
   RENDER EDİLMEZ, o yüzden görünmez büyütme tekniği burada işe yaramaz.
   Kutunun kendisi büyütülür (16→20px) ve asıl hedef, tıklanınca kutuyu
   değiştiren <label> satırı 44px'e çıkarılır. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.ff-el-form-check input[type="checkbox"],
#rememberme,
#ship-to-different-address-checkbox {
	width: 20px;
	height: 20px;
	margin-right: 8px;
}
.woocommerce-form__label-for-checkbox,
.in-sozlesme-onay-checkbox label,
.ff-el-form-check-label,
.woocommerce-form-login label.woocommerce-form__label-for-checkbox,
label[for="ship-to-different-address-checkbox"] {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* Parola göster/gizle gözü 14×14 idi */
.woocommerce .show-password-input,
span.password-input .show-password-input {
	position: relative;
	width: 44px !important;
	height: 44px !important;
	background-position: center;
}

/* Formlar (Fluent Forms: iletişim + toptan teklif) */
.ff-btn.ff-btn-submit { min-height: 44px !important; }
.frm-fluent-form select,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form textarea { min-height: 44px; }

/* Toptan açılış sayfaları: kardeş sayfa bağlantıları 39px idi */
.zbx-lp-baglar a { min-height: 44px; align-items: center; }

/* Footer sosyal ikonları 40×40 idi */
.zb-foot-social a {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ⛔ ŞERİT SARMALI — YOKSA YAN SÜTUNUN ÜSTÜNE TAŞAR (2026-08-27, Osman bildirdi).
   Snippet 412 kabı `display:flex; gap:12px` ile kuruyor ve `flex-wrap`
   vermiyor; varsayılan `nowrap`. İkonlar 40px iken 6'sı sığıyordu, biz onları
   dokunma hedefi kuralı gereği 44px'e çıkarınca (min-width, snippet'in
   width:40px'ini yeniyor) satır 6×44 + 5×12 = 324px oldu — sütun 253px.
   Ölçüldü: YouTube ikonu "İptal ve İade / Hesabım" bağlantılarının üstüne bindi.
   ⚠ Seçici `footer.ct-footer …` (0,2,1) — snippet'in `.ct-footer .zb-foot-social`
   kuralı (0,2,0) ve WPCode stilleri eklenti CSS'inden SONRA basılıyor
   (CLAUDE.md kural 3); eşit özgüllükte snippet kazanırdı.
   ⛔ İkonu 40px'e geri düşürerek çözme — `denetim.mjs` onu birincil kontrol
   sayıyor ve 44×44 istiyor (mobil kural 2). */
footer.ct-footer .zb-foot-social {
	flex-wrap: wrap;
	row-gap: 10px;
}

/* Arama sayfası ve 404 arama kutusu butonu */
.ct-search-form button[type="submit"] { min-width: 44px; min-height: 44px; }

/* --------------------------------------------------------------------------
   3) DOKUNMA HEDEFLERİ — metin bağlantı listeleri: en az 32px yükseklik
   Bunlara 44px vermek footer'ı ve meta satırlarını gereksiz şişirirdi.
   32px, WCAG 2.5.8 AA asgarisi olan 24px'in üzerinde.
   -------------------------------------------------------------------------- */
.zb-foot-links li > a,
.textwidget.custom-html-widget ul > li > a,
.woocommerce-breadcrumb a,
.zb-breadcrumb a,
.entry-meta a,
.bb-yazar-ad a,
.woocommerce-LostPassword a,
.entry-card .entry-title a,
.entry-content table a,
.ff_t_c a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* --------------------------------------------------------------------------
   4) TOPTAN HUB BAŞLIĞI — clamp alt sınırı 28px, 360px'te hâlâ büyüktü
   -------------------------------------------------------------------------- */
.zbx-hub-baslik { font-size: clamp(24px, 4.4vw, 44px); }

/* ==========================================================================
   FAVORİLER SAYFASI — boş durum kutusu (2026-08-11)
   Ürün kartları için AYRI CSS YOK: sayfa `[bb_favori_izgara]` ile mağazadaki
   kart şablonunun aynısını basıyor, mevcut kart kuralları olduğu gibi geçerli.
   ========================================================================== */
.zbx-favori-bos {
	max-width: 520px;
	margin: 30px auto 40px;
	padding: 34px 24px;
	text-align: center;
	background: var(--zbx-krem);
	border: 1px solid var(--zbx-kum);
	border-radius: 14px;
}
.zbx-favori-bos-metin {
	margin: 0 0 6px;
	font-size: clamp(17px, 2.6vw, 20px);
	font-weight: 700;
	color: var(--zbx-espresso);
}
.zbx-favori-bos-alt {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #6b5b50;
}
.zbx-favori-bos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 22px;
	border-radius: 10px;
	background: var(--zbx-aksiyon);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease;
}
.zbx-favori-bos-btn:hover { background: var(--zbx-aksiyon-koyu); }
.zbx-favori-izgara { margin-top: 6px; }

/* ==========================================================================
   FAVORİ KALBİ — boş/dolu durum + ipucu (2026-08-11)
   --------------------------------------------------------------------------
   Eklenti (TI WooCommerce Wishlist) kalbi `tinvwl-webfont` glifiyle basıyor ve
   o glif SADECE çizgi (outline) hâlinde — "eklendi" durumunda içi dolu kalp
   yapmanın font tarafında bir yolu yok, `-webkit-text-stroke` sadece çizgiyi
   kalınlaştırıyordu. Bu yüzden glif gizlenip yerine CSS maskesi konuyor:
   şekil `currentColor` ile boyanıyor, boş/dolu iki ayrı maske.

   Durumlar:
     dinlenme            → boş kalp, espresso
     üzerine gelince     → DOLU kalp, aksiyon rengi
     favorilerdeyken     → DOLU kalp, aksiyon rengi (kalıcı)

   `tinvwl-product-in-list` sınıfı ve "zaten listede" durumu 2026-08-11'de
   eklenti ayarından açıldı (`already_on: true`, `simple_flow: true`);
   öncesinde buton eklendikten sonra hiçbir durum göstermiyordu.
   ========================================================================== */
/* ⛔ İKON FONTU HER BAĞLAMDA NÖTRLENİR — kapsamsız, bilerek (2026-09-15).
   Eklentinin `.tinvwl-icon-heart:before` kuralı `font-family:"tinvwl-webfont"`
   yazıyor. Kalbi biz CSS mask ile çiziyoruz ve `content` bu butonun `::before`ünde
   SİTENİN HER YERİNDE boş — ölçüldü: ana sayfa 32, ürün 1, sepet 4 öge, hepsinde
   hesaplanmış `content` boş, yani glif hiçbir yerde çizilmiyor. Buna rağmen Chrome
   kural eşleştiği için `tinvwl-webfont.woff2`yi indiriyordu.
   ⚠ Kapsamlı (`.woocommerce ul.products…`, `.single-product…`) sürüm YETMEDİ:
   ürün sayfasında 1, sepette 4 öge kuralın dışında kaldı. Buton eklentinin
   koyduğu her yerde çıkabiliyor, bu yüzden ölçüt seçici kapsamı değil BUTONUN
   KENDİSİ. Preload tarafı ayrıca `zbx_tinvwl_font_preload_kaldir()` ile kapatıldı;
   ikisi birlikte gerekli — biri CSS'in isteğini, öteki `<link rel=preload>`u keser. */
/* ⚠ SINIF BİLEREK DÖRT KEZ YAZILI — özgüllük hilesi, yazım hatası değil.
   Rakip kural CANLIDAN OKUNDU (`public.min.css`, 2026-09-15):
       .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before
       { font-family:"tinvwl-webfont" !important }
   Özgüllüğü (0,3,1). İki taraf da `!important` taşıdığı için kazananı özgüllük
   belirliyor; dört tekrar bizi (0,4,1)'e çıkarıp sonucu kaynak sırasından da
   bağımsız kılıyor.
   ⚠ İki yanlış deneme kayda geçsin: tek sınıf (0,1,1) ve çift sınıf (0,2,1)
   ana sayfa ile mağazada kazandı, ÜRÜN (1 öge) ve SEPETTE (4 öge) kaybetti —
   sebebin "kaynak sırası" olduğu sanıldı, ölçünce özgüllük çıktı.
   🔎 Tahmin etme: `CSS.getMatchedStyles` yerine sayfadaki `document.styleSheets`
   taranıp `font-family` yazan tinvwl `::before` kuralları listelenerek bulundu. */
.tinvwl_add_to_wishlist_button.tinvwl_add_to_wishlist_button.tinvwl_add_to_wishlist_button.tinvwl_add_to_wishlist_button::before {
	font-family: inherit !important;
}

:root {
	--zbx-kalp-bos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E");
	--zbx-kalp-dolu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l8.8 8.8 8.8-8.8a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E");
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button::before,
.single-product .tinvwl_add_to_wishlist_button::before {
	content: "" !important;
	display: block;
	width: 19px;
	height: 19px;
	margin: 0 auto;
	line-height: 1 !important;
	background-color: currentColor;
	-webkit-text-stroke: 0 !important;
	/* ⛔ `font-family` BURADA SIFIRLANMALI — 2026-09-15 hız turunda ölçüldü.
	   Eklentinin `.tinvwl-icon-heart:before` kuralı `font-family:"tinvwl-webfont"`
	   yazıyor. Yukarıdaki `content:""` glifi zaten siliyor ve kalbi mask çiziyor,
	   AMA Chrome kuralı eşleşen bir kutuda gördüğü için `tinvwl-webfont.woff2`
	   dosyasını yine de indiriyordu — ana sayfada ve mağazada **FCP'den ÖNCE**,
	   ~871 ms'de, tek bir piksel üretmeden.
	   Ölçüm: 32 kartın 32'sinde `::before` hesaplanmış font ailesi
	   `tinvwl-webfont`, hesaplanmış `content` ise boş.
	   ⚠ Eklentinin stil dosyasını komple dequeue etmek YETMEZ ve risklidir:
	   aynı dosya butonun kendi kutu/konum kurallarını da taşıyor. Doğru çözüm
	   fontu talep eden tek özelliği nötrlemek. */
	font-family: inherit !important;
	-webkit-mask: var(--zbx-kalp-bos) center / contain no-repeat;
	mask: var(--zbx-kalp-bos) center / contain no-repeat;
	transition: background-color .16s ease;
}
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover::before,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:focus-visible::before,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before,
.single-product .tinvwl_add_to_wishlist_button:hover::before,
.single-product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	-webkit-mask-image: var(--zbx-kalp-dolu);
	mask-image: var(--zbx-kalp-dolu);
}

/* İpucu balonu — yalnız gerçek imleçli cihazlarda. Dokunmatikte "hover" yapışıp
   balon açık kalıyor, o yüzden `hover: hover` şart. */
@media (hover: hover) {
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button > span {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		white-space: nowrap;
		/* Buton `font-size: 0` — balon için açıkça geri veriliyor */
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
		color: var(--zbx-espresso);
		background: #fff;
		border: 1px solid var(--zbx-kum);
		border-radius: 7px;
		padding: 6px 9px;
		box-shadow: 0 4px 14px rgba(43, 29, 22, .16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-3px);
		transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
		pointer-events: none;
		z-index: 6;
	}
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover > span,
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:focus-visible > span {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Ürün favorilerdeyken balon "Favorilere ekle" değil "Favorilerden çıkar"
	   demeli — eklenti iki metni de basıyor ama hangisinin görüneceğini
	   değiştirmiyor. Tekrar tıklama zaten çıkarıyor (`simple_flow`). */
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list .tinvwl_add_to_wishlist-text {
		display: none !important;
	}
	.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-product-in-list .tinvwl_remove_from_wishlist-text {
		display: block !important;
	}
}

/* ==========================================================================
   GÜVEN ŞERİDİ — KOMPAKT (ürün + kategori sayfaları, 2026-08-13)

   Ana sayfadaki geniş şeridin stili WPCode 397'de ve `body.home` ile
   kapsamlı; buradaki kompakt varyant ondan bağımsız. Ürün sayfasında sepet
   formunun altına, kategoride ızgaranın üstüne giriyor — ikisinde de dar bir
   şerit olarak, satın alma akışını bölmeden.
   ========================================================================== */
.zb-trust--kompakt {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 18px 0 4px;
	padding: 0;
	max-width: none;
}
@media (min-width: 768px) {
	.zb-trust--kompakt { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
.zb-trust--kompakt .zb-trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 10px;
	background: #fff;
	box-shadow: none; /* ana sayfadaki gölge burada gereksiz ağırlık yapıyor */
}
.zb-trust--kompakt .zb-trust-item svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	stroke: var(--zbx-aksiyon, #cf3700);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.zb-trust--kompakt .zb-trust-item b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--zbx-espresso, #2b1d16);
}
/* ⚠ 13px alt sınır: mobil denetimi bunun altını "küçük yazı" diye uyarıyor. */
.zb-trust--kompakt .zb-trust-item span {
	display: block;
	margin-top: 1px;
	font-size: 13px;
	line-height: 1.25;
	color: #6b5b50;
}
/* Kategori sayfasında ızgaradan bir nefeslik ayrılsın. */
.woocommerce-products-header + .zb-trust--kompakt,
.term-description + .zb-trust--kompakt { margin-top: 14px; }

/* ==========================================================================
   MOBİL KAYAN "SEPETE EKLE" ÇUBUĞU (2026-08-13)

   Sunucuda basılıyor, ilk boyamada ekran dışında. Görünürlüğü yalnız
   `.zbx-mobil-sepet--acik` sınıfı belirliyor (betik.js, IntersectionObserver).
   Düğüm taşınmadığı için kayma üretmiyor.
   ========================================================================== */
.zbx-mobil-sepet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998; /* yüzen ikonların (999) altında, geri kalan her şeyin üstünde */
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	box-shadow: 0 -4px 16px rgba(43, 29, 22, .08);
	transform: translateY(110%);
	transition: transform .22s ease;
}
@media (max-width: 767px) {
	.single-product .zbx-mobil-sepet { display: flex; }
}
.zbx-mobil-sepet--acik { transform: translateY(0); }
.zbx-mobil-sepet-bilgi {
	flex: 1 1 auto;
	min-width: 0; /* ⚠ olmazsa uzun ürün adı flex kutusunu şişirip butonu ezer */
}
.zbx-mobil-sepet-ad {
	display: block;
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--zbx-espresso, #2b1d16);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zbx-mobil-sepet-fiyat {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--zbx-aksiyon, #cf3700);
}
.zbx-mobil-sepet-fiyat del { font-weight: 400; font-size: 13px; opacity: .6; }
.zbx-mobil-sepet-fiyat ins { text-decoration: none; }
.zbx-mobil-sepet-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;      /* dokunma hedefi (CLAUDE.md mobil kuralı 2) */
	padding: 0 20px;
	border-radius: 10px;
	background: var(--zbx-aksiyon, #cf3700);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.zbx-mobil-sepet-btn:hover,
.zbx-mobil-sepet-btn:focus-visible {
	background: var(--zbx-aksiyon-hover, #932700);
	color: #fff !important;
}
/* ⚠ ÇEREZ BANDI ÇAKIŞMASI (2026-08-14'te 360/390px'te ölçüldü).
   Bant `z-index:99998` ile çubuğun (998) üstünde ve ekranın alt ~163px'ini kaplıyor;
   bant görünürken çubuk açılıyor ama TAMAMEN örtülü kalıyordu. Koordinat ölçümü bunu
   yakalamaz (dikdörtgen "ekran içinde" görünür), ekran görüntüsü yakaladı.
   ⛔ Bandı çubuğun altına almak seçenek DEĞİL: onay bandı yasal bir kapı, örtülemez.
   ⛔ Çubuğu bandın üstüne kaydırmak da seçenek değil: 780px ekranda bant 155 + çubuk 65
   = alt %28'i iki katman kaplardı.
   Çözüm: bant görünürken çubuk hiç açılmıyor. Ziyaretçi onay kararını verir vermez
   çubuk normal davranışına dönüyor (bant `hidden` alır, kural düşer).

   ⚠ 2026-08-14 hız turu: bant artık `hidden` OLMADAN basılıyor (LCP'yi geciktirmesin
   diye — bkz. `zbx_cerez_erken_karar()`), onay verilmiş ziyaretçide gizlemeyi
   `<html data-zbx-onay>` + CSS yapıyor. Bu yüzden `html:not([data-zbx-onay])` ön
   koşulu ŞART: olmadan kural, görünmeyen bandı "açık" sayar ve onay vermiş
   ziyaretçide kayan sepet çubuğu HİÇ açılmaz. */
html:not([data-zbx-onay]) body:has(#zbx-cerez:not([hidden])) .zbx-mobil-sepet--acik { transform: translateY(110%); }

/* Çubuk açıkken yüzen ikonlar yukarı — çerez bandı için kurulan yöntemin aynısı. */
@media (max-width: 767px) {
	body:has(.zbx-mobil-sepet--acik) .zbx-float { bottom: 96px; }
}

/* -------- logo/gravür koşullu alanı (2026-08-13) -------- */
.zbx-gravur {
	margin: 14px 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 10px;
	background: var(--zbx-krem, #f7f1e8);
}
/* ⚠ Dokunma hedefi ETİKETTEN geliyor, kutudan değil: `input` replaced
   element olduğu için `::after` ile büyütme çalışmıyor (2026-08-13'te
   denetimde 18x18 ölçüldü). Satırın kendisi 44px yüksekliğinde. */
.zbx-gravur-onay {
	min-height: 44px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--zbx-espresso, #2b1d16);
	cursor: pointer;
}
.zbx-gravur-onay input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--zbx-aksiyon, #cf3700);
}
.zbx-gravur-alan { margin-top: 10px; }
.zbx-gravur-alan label {
	display: block;
	margin-bottom: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zbx-espresso, #2b1d16);
}
.zbx-gravur-alan textarea {
	width: 100%;
	min-height: 72px;
	padding: 10px 12px;
	border: 1px solid var(--zbx-kum, #d9c3a5);
	border-radius: 8px;
	font-size: 14.5px;
	line-height: 1.45;
	resize: vertical;
}
.zbx-gravur-alan textarea:focus {
	outline: none;
	border-color: var(--zbx-aksiyon, #cf3700);
	box-shadow: 0 0 0 3px rgba(207, 55, 0, .15);
}
.zbx-gravur-not {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b5b50;
}

/* -------- İYS açık rıza kutusu (2026-08-13) --------
   Ödeme sayfasında sözleşme onayından görsel olarak ayrı dursun diye kendi
   çerçevesi var: iki kutu bitişik göründüğünde "ayrı rıza" ayrımı zayıflıyor. */
.zbx-iys {
	margin: 14px 0 4px !important;
	padding: 12px 14px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 10px;
	background: #fff;
}
/* ⚠ Dokunma hedefi ETİKETTEN geliyor, kutudan değil: `input` replaced
   element olduğu için `::after` ile büyütme çalışmıyor (2026-08-13'te
   denetimde 18x18 ölçüldü). Satırın kendisi 44px yüksekliğinde. */
.zbx-iys-etiket {
	min-height: 44px;
	display: flex !important;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--zbx-espresso, #2b1d16);
	cursor: pointer;
}
.zbx-iys-etiket input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--zbx-aksiyon, #cf3700);
}
.zbx-iys-not {
	display: block;
	margin-top: 6px;
	padding-left: 27px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b5b50;
}

/* -------- kurumsal fatura koşullu bloğu (2026-08-13) -------- */
.zbx-kurumsal {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 10px;
	background: #fff;
}
/* ⚠ Dokunma hedefi ETİKETTEN geliyor, kutudan değil: `input` replaced
   element olduğu için `::after` ile büyütme çalışmıyor (2026-08-13'te
   denetimde 18x18 ölçüldü). Satırın kendisi 44px yüksekliğinde. */
.zbx-kurumsal-onay {
	min-height: 44px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--zbx-espresso, #2b1d16);
	cursor: pointer;
}
.zbx-kurumsal-onay input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--zbx-aksiyon, #cf3700);
}
.zbx-kurumsal-alan { margin-top: 12px; }
.zbx-kurumsal-alan .form-row { padding: 0 0 10px; }

/* --------------------------------------------------------------------------
   HUSKY FİLTRE — YERLİ ONAY KUTULARI (2026-08-14 mobil hız turu)

   `woof_settings.icheck_skin` `square_blue` → `none` yapıldı. Gerekçe ölçüm:
   kategori sayfasının CPU profilinde çağrı zinciri
     woof_init_search_form → woof_init_checkboxes → $.fn.iCheck → jQuery.css
   tek başına **7.434 ms** yakıyordu (toplam örneklenen CPU'nun %40'ı, TBT
   11,6 sn). iCheck her onay kutusunu ayrı ayrı sarmalayıp `.css()` ile
   ölçüyor; 33 kutuda bu, zorlanmış yerleşim hesabı zinciri demek.
   ⚠ Üstelik bu iş mobilde TAMAMEN boşaydı: filtre paneli `@media
   (max-width:999px)` altında `display:none`, ancak "Filtrele" düğmesi
   `body.zb-filters-open` sınıfını ekleyince görünüyor (WPCode 409).
   Ölçüm sonucu: mağaza TBT 10.658 → 3.612 ms, kategori 11.624 → 5.789 ms.

   Filtre yerli `change` olayıyla çalışmaya devam ediyor (checkbox.js'in
   `else` dalı) — `tools/mobil-denetim/olc-filtre.mjs` ile doğrulandı:
   16 ürün → 12 ürün.

   Aşağısı yalnız görünüm işi: iCheck'in bıraktığı boşluğu kapatır ve satırı
   44px dokunma hedefine çıkarır (CLAUDE.md mobil kural 2).
   ⚠ Seçici `li:has(> input.woof_checkbox_term)` ile daraltıldı — `.woof_list`
   altındaki fiyat kaydıracı ve diğer html tipleri bu düzenden etkilenmemeli.
   -------------------------------------------------------------------------- */
.woof_list li:has(> input.woof_checkbox_term) {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
}
.woof_list input.woof_checkbox_term {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--zbx-aksiyon, #cf3700);
	cursor: pointer;
}
.woof_list li:has(> input.woof_checkbox_term) > label.woof_checkbox_label {
	flex: 1 1 auto;
	margin: 0;
	padding: 11px 0;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   MAĞAZA/KATEGORİ IZGARASI İLK BOYAMADA — masaüstü CLS düzeltmesi (2026-08-14)

   ÖLÇÜM: masaüstü 1440px'te `/magaza/` CLS **0,666**, kategori 0,343
   (Google'ın "kötü" bandı; eşik 0,1). Tek kayma, 1.352 ms'de, kaynağı
   `.zb-filter-wrap` + `ul.products` + `nav.zbx-katstrip`.

   SEBEP: WPCode 409 filtre sütununu ızgaraya JS ile yerleştiriyor —
   `wrap.parentElement.classList.add("zb-shop-grid")` ve bu `window.load`
   sonrasında çalışıyor. Yani sayfa önce tek sütun boyanıyor, sonra iki sütuna
   geçiyor: ders kitabı düzen kayması. CLAUDE.md kural 4b'nin ihlali
   ("düzen JS ile değil CSS ile kurulur").
   ⚠ Mobilde görünmüyordu çünkü panel `@media (max-width:999px)` altında
   `display:none` — bu yüzden mobil turlarında hiç yakalanmadı.

   ÇÖZÜM: aynı ızgara `:has(> .zb-filter-wrap)` ile, JS beklemeden kuruluyor.
   Ebeveyn HUSKY'nin `#woof_results_by_ajax` kabı; kimliğe değil YAPIYA
   bağlanıyoruz ki eklenti kimliği değiştirirse kural yaşasın.
   `div:has(> .zb-filter-wrap)` yalnız o kabı seçer (doğrudan çocuk şartı).

   ⚠ Snippet 409'un `.zb-shop-grid` kuralları DURUYOR; JS sınıfı eklediğinde
   aynı değerleri yazıyor, çakışma yok. Snippet kaldırılırsa bu kural tek
   başına işi görür.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	body.tax-product_cat div:has(> .zb-filter-wrap),
	body.post-type-archive-product div:has(> .zb-filter-wrap) {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		column-gap: 30px;
		align-items: start;
	}
	body.tax-product_cat div:has(> .zb-filter-wrap) > .zb-filter-wrap,
	body.post-type-archive-product div:has(> .zb-filter-wrap) > .zb-filter-wrap {
		grid-column: 1;
		grid-row: 1 / 999;
	}
	body.tax-product_cat div:has(> .zb-filter-wrap) > *:not(.zb-filter-wrap),
	body.post-type-archive-product div:has(> .zb-filter-wrap) > *:not(.zb-filter-wrap) {
		grid-column: 2;
	}
}

/* --------------------------------------------------------------------------
   BOŞ SEPET — hidrasyon takasını ilk boyamaya al (2026-08-14 CLS düzeltmesi)

   WooCommerce sepet sayfasına iki bloğu da basıyor ve `is-loading` sırasında
   DOLU iskeleti gösteriyor; hidrasyon bitince boş sepet bloğuna takas ediyor.
   Ölçüm: masaüstü boş sepette blok 424 → 314 → 913 px, footer iki kez kayıyor,
   **CLS 0,163**. (Mobilde 0 — orada blok yüksekliği zaten benzer.)

   `zbx-sepet-bos` gövde sınıfını PHP basıyor (sepet önbelleklenmediği için
   sunucu sepetin boş olduğunu kesin biliyor). Aşağısı yalnız o sınıf varken
   çalışır; sepet doluyken WooCommerce'in davranışına dokunulmaz.

   ⚠ Özgüllük: `body.zbx-sepet-bos` öneki WooCommerce'in kendi
   `.wp-block-woocommerce-cart.is-loading …` kuralından daha özgül, bu yüzden
   yükleme sırasından bağımsız kazanır — `!important` gerekmiyor.
   -------------------------------------------------------------------------- */
body.zbx-sepet-bos .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart-block {
	display: block;
}
body.zbx-sepet-bos .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block {
	display: none;
}
/* Yükleme iskeletinin kardeş katmanı da boş sepette gereksiz. */
body.zbx-sepet-bos .is-loading + .wc-block-components-sidebar-layout.wc-block-cart--skeleton {
	display: none;
}

/* --------------------------------------------------------------------------
   BOŞ SEPET — hidrasyon ara durumu için YER AYIR (2026-08-14, 2. deneme)

   1. deneme (yukarıdaki display takası) YETMEDİ, hatta CLS'i 0,163 → 0,223
   yaptı. Sebep ölçümle görüldü: WooCommerce hidrasyon sırasında boş sepet
   bloğunu **DOM'dan tamamen kaldırıyor** ve ~200 ms dolu düzeni basıyor:
     1283 ms  is-loading=true   blok=913  footer=1278   (takas çalışıyor)
     3173 ms  is-loading=false  blok=314  footer= 679   ← footer ekrana girdi
     3377 ms  is-loading=false  blok=913  footer=1278   ← geri gitti
   CSS ile görünürlük ayarlamak DOM'dan silinen düğümü kurtarmıyor; tek çare
   sarmalayıcıda YER AYIRMAK.

   Ölçülen boş sepet yükseklikleri: 1000px→779, 1200px→832, 1440px→913,
   1920px→1008. Değerler ölçümün hemen ALTINDA seçildi: fazla verilirse
   sayfanın altında kalıcı boşluk oluşur, az verilirse küçük bir kayma kalır.

   ⚠ Yalnız `body.zbx-sepet-bos` (PHP sepetin boş olduğunu biliyor). Sepet
   doluyken yer ayrılmaz — dolu sepet zaten farklı yükseklikte.
   ⚠ Mobilde kural YOK: orada boş sepet 2875-3033 px (öneriler alt alta), footer
   zaten ekranın çok altında ve ölçülen CLS 0.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	body.zbx-sepet-bos .wp-block-woocommerce-cart { min-height: 770px; }
}
@media (min-width: 1200px) {
	body.zbx-sepet-bos .wp-block-woocommerce-cart { min-height: 820px; }
}
@media (min-width: 1440px) {
	body.zbx-sepet-bos .wp-block-woocommerce-cart { min-height: 900px; }
}
@media (min-width: 1800px) {
	body.zbx-sepet-bos .wp-block-woocommerce-cart { min-height: 990px; }
}

/* ==========================================================================
   AJAN DOSTU DOKUNMA HEDEFİ — ürün galerisi okları (2026-08-17)

   Oklara `role="button"` + `aria-label` verildi (AI ajanı ve klavye galeriyi
   çevirebilsin diye — bakirbul-custom.php `zbx_ajan_isaretleme`). Rol alınca
   `denetim.mjs` onları BİRİNCİL KONTROL sayıyor ve 44×44 kuralı devreye
   giriyor; ögeler 40×40 (ölçüldü, 3 genişlikte de HATA verdi).

   CLAUDE.md Mobil UX kural 2'nin öngördüğü çözüm: kutuyu büyütme, görünmez
   `::after` ile büyüt. Oklar birbirinden ~266 px uzakta, çakışma yok.
   ========================================================================== */
.flexy-arrow-prev,
.flexy-arrow-next { position: relative; }
.flexy-arrow-prev::after,
.flexy-arrow-next::after {
	content: "";
	position: absolute;
	inset: -2px;
}

/* ==========================================================================
   ANA SAYFA KATEGORİ ŞERİTLERİ — masaüstünde tek satır + ok navigasyonu
   (2026-08-20 Osman isteği)

   "Mutfak & Pişirme" ve "Servis & Sunum" 4'ten 8 ürüne çıkarıldı. Masaüstünde
   8 kart iki satır olacaktı; istenen tek satır + sağa ok. Mobilde ikisi de
   zaten parmakla kaydırılıyor (kurallar sayfa 11'in kendi <style> bloğunda,
   `max-width:781px` içinde).

   ⛔ Düzen JS ile kurulmaz (CLAUDE.md kural 4b/21): kaydırma kabı ve kart
   genişliği tamamen CSS. JS yalnız ok DÜĞMELERİNİ ekler ve `scrollBy` çağırır —
   düğmeler `position:absolute`, yani geldiklerinde düzen kaymaz (CLS 0).

   Kart genişliği tam 4 kart görünecek şekilde hesaplanıyor: dört kart + üç
   boşluk = %100.
   ========================================================================== */
@media (min-width: 1000px) {
	.zn-sec-kitchen + .woocommerce.columns-4,
	.zn-sec-servis + .woocommerce.columns-4 {
		position: relative;
	}
	.zn-sec-kitchen + .woocommerce.columns-4 ul.products,
	.zn-sec-servis + .woocommerce.columns-4 ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding-bottom: 6px;
		/* Kaydırma çubuğu gizli — gezinme oklarla yapılıyor. Klavye ve
		   dokunmatik yüzey kaydırması etkilenmez. */
		scrollbar-width: none;
	}
	.zn-sec-kitchen + .woocommerce.columns-4 ul.products::-webkit-scrollbar,
	.zn-sec-servis + .woocommerce.columns-4 ul.products::-webkit-scrollbar {
		display: none;
	}
	.zn-sec-kitchen + .woocommerce.columns-4 ul.products li.product,
	.zn-sec-servis + .woocommerce.columns-4 ul.products li.product {
		flex: 0 0 calc((100% - 60px) / 4) !important;
		width: calc((100% - 60px) / 4) !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}
}

/* Ok düğmeleri — betik.js `zbxSeritOklariKur` basıyor, yalnız taşma varsa. */
.zbx-serit-ok {
	position: absolute;
	top: 40%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--zbx-kum, #d9c3a5);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(43, 29, 22, .16);
	color: var(--zbx-espresso, #2b1d16);
	font-size: 0;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.zbx-serit-ok::before {
	content: "";
	width: 11px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.zbx-serit-ok-onceki { left: -14px; }
.zbx-serit-ok-onceki::before { transform: rotate(-135deg); margin-left: 3px; }
.zbx-serit-ok-sonraki { right: -14px; }
.zbx-serit-ok-sonraki::before { transform: rotate(45deg); margin-right: 3px; }
.zbx-serit-ok:hover {
	background: var(--zbx-aksiyon, #cf3700);
	border-color: var(--zbx-aksiyon, #cf3700);
	color: #fff;
}
/* Uçtayken düğme soluk ve tıklanamaz — ama DOM'dan kalkmıyor ki düzen kaymasın. */
.zbx-serit-ok[disabled] {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}
/* Mobilde ok yok: şerit parmakla kaydırılıyor (hero slaytlarıyla aynı mantık). */
@media (max-width: 999px) {
	.zbx-serit-ok { display: none; }
}

/* ==========================================================================
   ÜRÜN GALERİSİ — TAM EKRAN GÖRÜNTÜLEME (lightbox)          (2026-08-21)
   Mantık `betik.js` sonundaki IIFE'de; oradaki gerekçeyi de oku.
   ⛔ Katman `position:fixed` — akışa girmez, CLS üretmez (kural 4b).
   ⚠ Kontroller 44×44 ve aria-label'lı olmak zorunda (denetim.mjs + ajan-denetim.mjs).
   ========================================================================== */

/* Galerideki kare artık tıklanabilir — imleç bunu söylesin. */
.woocommerce-product-gallery .ct-media-container[data-zbx-buyut] { cursor: zoom-in; }
.woocommerce-product-gallery .ct-media-container[data-zbx-buyut]:focus-visible {
	outline: 3px solid var(--zbx-aksiyon);
	outline-offset: 2px;
}

.zbx-buyut {
	position: fixed;
	inset: 0;
	/* ⛔ 99998'in ALTINDA kalmak ZORUNDA — çerez onay bandı yasal kapıdır ve
	   hiçbir şeyin altına alınmaz (CLAUDE.md mobil kural 7: "çakışan katman
	   geri çekilir"). İlk sürümde 100000 verilmişti; bant açıkken büyütme
	   onu örtüyordu. Geri çekildi. */
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 8px 56px;
	background: rgba(28, 21, 18, .93);
	overscroll-behavior: contain;
}
.zbx-buyut[hidden] { display: none; }

/* Arkadaki sayfa kaymasın. */
body.zbx-buyut-acik { overflow: hidden; }

.zbx-buyut-ic {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zbx-buyut-ic img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	width: auto;
	height: auto;
	display: block;
	border-radius: 4px;
	background: #fff;
}

.zbx-buyut-kapat,
.zbx-buyut-ok {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	line-height: 1;
	transition: background .15s ease;
}
.zbx-buyut-kapat:hover, .zbx-buyut-ok:hover,
.zbx-buyut-kapat:focus-visible, .zbx-buyut-ok:focus-visible {
	background: var(--zbx-aksiyon);
}
.zbx-buyut-kapat:focus-visible, .zbx-buyut-ok:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}
.zbx-buyut-kapat {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 26px;
}
/* ⚠ Oklar görselin YANINDA değil ÜSTÜNDE duruyor.
   İlk sürümde flex kardeşiydiler ve 390px'te iki ok + boşluklar genişliğin
   132px'ini yiyordu: görsel yalnız 266px açılıyordu — sayfadaki hâlinden (≈358px)
   DAHA KÜÇÜK, yani büyütme amacı tersine dönüyordu (canlıda ölçüldü).
   Mutlak konumda artık görsel tam genişliği alıyor. */
.zbx-buyut-ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 30px;
	background: rgba(28, 21, 18, .55);
}
.zbx-buyut-onceki { left: 8px; }
.zbx-buyut-sonraki { right: 8px; }
.zbx-buyut-ok[hidden] { display: none; }

.zbx-buyut-sayac {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

/* Çerez bandı görünürken (onay henüz verilmemişken) büyütme katmanı alt
   payını açar — görsel ve sayaç bandın altında kalmasın. Bant 155px ölçüldü
   (390px, canlı); pay biraz fazlasıyla veriliyor. Aynı kalıp `.zbx-float` ve
   kayan sepet çubuğunda da kullanılıyor. */
html:not([data-zbx-onay]) body:has(#zbx-cerez:not([hidden])) .zbx-buyut {
	padding-bottom: 214px;
}
html:not([data-zbx-onay]) body:has(#zbx-cerez:not([hidden])) .zbx-buyut-sayac {
	bottom: 174px;
}
html:not([data-zbx-onay]) body:has(#zbx-cerez:not([hidden])) .zbx-buyut-ic img {
	max-height: calc(100vh - 278px);
}

@media (prefers-reduced-motion: reduce) {
	.zbx-buyut-kapat, .zbx-buyut-ok { transition: none; }
}

/* ==========================================================================
   ÖLÇEK ÇİZİMİ (ürün sayfası)                               (2026-08-21)
   Üreten: `zbx_olcek_cizimi()` — satır içi SVG, veri yoksa hiç basılmaz.
   ⚠ SVG'ye `width`/`height` verildiği için yer önceden ayrılır → CLS yok.
   ========================================================================== */
.zbx-olcek-kap { margin: 0 auto; }   /* sekme/ilgili ürünler hizası (2026-09-12) */
.zbx-olcek {
	margin: 22px 0 0;
	padding: 16px 18px 12px;
	border: 1px solid var(--zbx-cerceve, #C7C8C9);
	border-radius: 10px;
	background: #fff;
	max-width: 340px;
}
.zbx-olcek figcaption {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--zbx-espresso, #2B1D16);
	margin: 0 0 6px;
}
.zbx-olcek svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 300px;
}
.zbx-olcek-govde {
	fill: rgba(207, 55, 0, .06);
	stroke: var(--zbx-aksiyon, #cf3700);
	stroke-width: 1.5;
}
.zbx-olcek-ol {
	stroke: #6b5949;
	stroke-width: 1;
}
.zbx-olcek-g line:not(.zbx-olcek-ol) {
	stroke: #6b5949;
	stroke-width: 1;
}
.zbx-olcek-yazi {
	fill: var(--zbx-espresso, #2B1D16);
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
}
.zbx-olcek-kucuk {
	fill: #8a7a68;
	font-size: 9.5px;
	font-family: inherit;
	letter-spacing: .03em;
}
.zbx-olcek-not {
	margin: 4px 0 0;
	font-size: 11.5px;
	color: #6b5949;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.zbx-olcek { max-width: 100%; padding: 14px 14px 10px; }
}

/* Yasal hak satırı — ürün sayfası, güven şeridinin altında (2026-08-22).
   Mantık: `zbx_yasal_hak_satiri()`. Sayfa mobilyasıdır, ürün metni değildir. */
.zbx-yasal-hak {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #6b5949;
}
.zbx-yasal-hak strong { color: var(--zbx-espresso, #2B1D16); font-weight: 600; }
@media (max-width: 767px) { .zbx-yasal-hak { font-size: 12px; } }

/* --------------------------------------------------------------------------
   KULLANIM ADI NOTU — arama terimi kanonik ada çevrildiğinde çıkar.
   Sessizce başka bir şey aratmak "aradığım bu değil" hissi bırakıyor;
   bu satır onu ortadan kaldırıyor. Ölçüm: tools/icerik/kullanim-adlari.json
   -------------------------------------------------------------------------- */
.zbx-arama-notu {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--zbx-aksiyon, #cf3700);
	background: #f7f1e8;              /* krem */
	color: #2b1d16;                   /* espresso */
	font-size: 15px;
	line-height: 1.5;
	border-radius: 0 8px 8px 0;
}
.zbx-arama-notu strong { color: #932700; }
@media (max-width: 767px) { .zbx-arama-notu { font-size: 14px; padding: 10px 13px; } }

/* --------------------------------------------------------------------------
   ÖLÇÜ SEÇİCİ — [bb_secici] (2026-08-25). Karar tablosu; JS yok, CLS yok.
   -------------------------------------------------------------------------- */
.zbx-secici { margin: 28px 0; }
.zbx-secici-baslik { margin: 0 0 12px; }
.zbx-secici-tablo { width: 100%; border-collapse: collapse; }
.zbx-secici-tablo th,
.zbx-secici-tablo td { padding: 11px 10px; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: middle; }
.zbx-secici-tablo thead th { background: #f7f1e8; color: #2b1d16; font-size: 14px; }
.zbx-secici-cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 16px;      /* mobil UX kuralı 2: birincil kontrol 44px */
	border-radius: 8px; background: #cf3700; color: #fff;
	font-weight: 600; text-decoration: none; white-space: nowrap;
}
.zbx-secici-cta:hover { background: #932700; color: #fff; }
.zbx-secici-yok { color: #6b5b50; font-size: 14px; }
.zbx-secici-kaynak { margin: 10px 0 0; font-size: 14px; color: #4a3b2f; }
@media (max-width: 767px) {
	.zbx-secici-tablo { display: block; overflow-x: auto; }
	.zbx-secici-tablo th, .zbx-secici-tablo td { padding: 9px 8px; font-size: 14px; }
}

/* ==========================================================================
   DİL SEÇİCİ VE YABANCI DİL SAYFASI DONANIMI (2026-08-26)
   --------------------------------------------------------------------------
   ⛔ ÇEKİRDEKTE, `stil-sayfa.css`te DEĞİL. Seçici Türkçe sayfaların da üst
   şeridinde duruyor; parça dosyası yalnız blog/hub/dil sayfalarında yükleniyor
   (bkz. `zbx_sayfa_ozel_css_gerekli_mi`). Orada bırakılsaydı sıradan bir ürün
   sayfasında seçici STİLSİZ görünür ve şerit düzenini bozardı.
   ========================================================================== */
/* -------- dil seçici: BAŞLIĞIN ÜST ŞERİDİNDE, sağ uçta --------
   ⛔ İÇERİĞİN BAŞINDA DEĞİL. İlk sürüm gövdenin tepesine kutu koyuyordu;
      2026-08-26'da Osman: *"yeri hiç hoş olmamış"*. Türkçe ziyaretçilerin
      %99'u için gereksiz bir kutuydu.
   ⚠ Mobilde üst şeritte yer YOK — ölçüldü: 360px'te sağda kalan 21px,
      390px'te 34px (768px'te 208px). Bu yüzden Türkçe sayfalarda seçici
      ≥768px'te görünüyor; dil sayfalarında kargo metni gizli olduğu için
      şerit boş ve seçici her genişlikte görünüyor.                       */
[data-row="top"] .ct-container { position: relative; }
.zbx-dil-secici,
.zbx-dil-menu {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	line-height: 1;
}
/* ⛔ MANTIKSAL ÖZELLİK — fiziksel `right`/`left` DEĞİL (2026-08-26, Arapça turu).
   Arapça sayfada `<html dir="rtl">` basılıyor; fiziksel yazılırsa seçici sayfanın
   geri kalanı aynalanırken kendi köşesinde kalır. `inset-inline-*` LTR davranışını
   birebir korur — Türkçe/İngilizce/Rusça sayfalarda konum DEĞİŞMEZ. */
.zbx-dil-secici { inset-inline-end: 0; }
.zbx-dil-menu   { inset-inline-start: 0; }

/* Yüzen ikonlar (`.zbx-float`) WPCode 375'te `right` ile konumlanıyor; o snippet
   site genelinde sticky nav'ı da taşıyor ve `wp_slash` tuzağı var (TUZAK 21/30),
   bu yüzden oraya dokunmak yerine YALNIZ RTL'de eziliyor. 16px canlıdan ölçüldü
   (1440px görünümde sağ kenar 1424). LTR tarafta hiçbir kural değişmiyor. */
html[dir="rtl"] .zbx-float {
	right: auto;
	left: 16px;
}

.zbx-dil-menu a {
	display: inline-flex;      /* dokunma hedefi — mobil kural 2 (metin bağlantısı ≥32px) */
	align-items: center;
	min-height: 32px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.zbx-dil-menu a:hover { text-decoration: underline; }
/* ⚠ ÖZGÜLLÜK: yukarıdaki (0,1,1) kural tema başlığının kendi bağlantı stiline
   yeniliyordu — `denetim.mjs` üst şeritteki bağlantıları 37×18 px ölçtü
   (metin bağlantısı için alt sınır 32px, mobil kural 2). Şerit bağlamıyla
   yazılan aşağıdaki (0,2,2) kural kazanıyor. */
[data-row="top"] nav.zbx-dil-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* ==========================================================================
   DİL SEÇİCİ — AÇILIR KUTU (2026-09-04, Osman'ın referans görseli)

   ⛔ DÜZ LİSTEYE DÖNÜLMEZ. Ölçüldü (`tools/mobil-denetim/olc-dil-secici.mjs`):
      dil sayısı 4 → 6 olunca düz liste 332px oldu; 360px'te kap 317px ve
      `/fr/` sayfasında seçici kabı **8px TAŞIYORDU** (secSag 346 · kapSag 338).
      Gövde yatay kaydırma üretmediği için `denetim.mjs` YAKALAMADI — sepet
      satırı tuzağıyla (kural 8b) aynı sınıf. Kapalı kutu ~110px ve yedinci
      dil eklense bile genişlemez.
   ⛔ `z-index` çerez bandının (99998) ALTINDA kalır — bant yasal kapıdır
      (mobil kural 7). Aynı ders galeri lightbox'ında yaşandı (kural 30b).
   ⚠ Açılış/kapanış `<details>` ile; JS yok (kural 4b). `betik.js`'teki
      dışarı-tıkla/Escape yalnız kolaylık.
   ========================================================================== */
.zbx-dil-ac { position: relative; }

/* -- KAPALI DÜĞME --
   ⛔ BEYAZ PILL YAZILMAZ. İlk sürüm `background:#fff` + koyu metin yazdı; üst
      şerit **koyu espresso** olduğu için düğme okunmaz bir beyaz lekeye döndü
      (2026-09-04, ekran görüntüsüyle görüldü). Şerit koyu — kontrol de koyu
      zemine göre kurulur: saydam cam + ince beyaz hairline. */
.zbx-dil-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	min-height: 30px;
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: background-color .18s ease, border-color .18s ease;
}
.zbx-dil-btn::-webkit-details-marker { display: none; }
/* Dokunma hedefi 44px'e görünmez katmanla tamamlanıyor — kutuyu büyütmek
   38px'lik şeridi taşırırdı (mobil kural 2). */
.zbx-dil-btn::after { content: ""; position: absolute; inset: -7px -4px; }
.zbx-dil-btn:hover,
.zbx-dil-ac[open] > .zbx-dil-btn {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .34);
}
.zbx-dil-btn:focus-visible { outline: 2px solid var(--zbx-kum); outline-offset: 2px; }
.zbx-dil-ikon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .7; }
/* Kod, adın yanında SESSİZ bir etiket — ikisi de aynı ağırlıkta olursa
   kapalı düğme kalabalık görünüyor. */
.zbx-dil-kod {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	opacity: .62;
}
.zbx-dil-simdiki { font-weight: 500; }
.zbx-dil-ok {
	width: 12px; height: 12px; flex: 0 0 auto; opacity: .5;
	transition: transform .18s ease;
}
.zbx-dil-ac[open] .zbx-dil-ok { transform: rotate(180deg); }

/* -- AÇILIR PANEL --
   Panel koyu şeritten AŞAĞI, açık gövdenin üstüne düşüyor; bu yüzden açık
   kart. ⛔ Metin rengi AÇIKÇA yazılır: başlığın kendi bağlantı kuralı beyaz
   dayatıyor ve miras alınırsa panel yazıları beyaz-üstüne-beyaz olup
   GÖRÜNMEZ oluyor (ilk sürümde tam bu oldu). */
.zbx-dil-kutu {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-end: 0;          /* ⛔ mantıksal — Arapça'da aynalanır */
	min-width: 214px;
	margin: 0;
	padding: 7px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(43, 29, 22, .09);
	border-radius: 16px;
	/* İki katmanlı gölge — tek katman "yapışık", iki katman havada durur. */
	box-shadow: 0 1px 2px rgba(43, 29, 22, .05), 0 16px 40px -12px rgba(43, 29, 22, .34);
	z-index: 9990;               /* ⛔ çerez bandı 99998'in ALTINDA */
	transform-origin: top var(--zbx-dil-kaynak, right);
	animation: zbxDilAc .16s ease-out;
}
/* ⛔ OPAKLIK ANİMASYONA BAĞLANMAZ. İlk sürüm `from { opacity: 0 }` yazdı ve
   ölçümde panel `opacity: 0` ile yakalandı (2026-09-04): animasyon
   ilerlemezse — arka plandaki sekme, kısıtlı ortam, throttling — panel
   KALICI OLARAK GÖRÜNMEZ kalıyor. Animasyon bir süstür; içeriği gizleyemez.
   Yalnız konum canlandırılıyor. */
@keyframes zbxDilAc {
	from { transform: translateY(-5px); }
	to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.zbx-dil-kutu { animation: none; }
	.zbx-dil-ok   { transition: none; }
}
.zbx-dil-kutu li { margin: 0; }

/* ⚠ ÖZGÜLLÜK: `[data-row="top"]` bağlamı (0,3,0) — şeridin kendi bağlantı
   rengini (beyaz) yenmek için. Bağlamsız kural tek başına kaybediyordu. */
.zbx-dil-kutu .zbx-dil-se,
[data-row="top"] .zbx-dil-kutu .zbx-dil-se {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 42px;            /* birincil kontrol — mobil kural 2 */
	padding: 7px 10px;
	border-radius: 11px;
	color: var(--zbx-espresso);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .14s ease;
}
.zbx-dil-kutu .zbx-dil-se:hover,
[data-row="top"] .zbx-dil-kutu .zbx-dil-se:hover {
	background: #faf6f0;
	text-decoration: none;
}
.zbx-dil-kutu .zbx-dil-se:focus-visible {
	outline: 2px solid var(--zbx-aksiyon);
	outline-offset: -2px;
}
.zbx-dil-rozet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 32px;
	height: 23px;
	padding: 0 6px;
	border-radius: 7px;
	background: #f3ede4;
	color: #8a7360;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
}
.zbx-dil-kutu .zbx-dil-ad { flex: 1 1 auto; }
.zbx-dil-tik { width: 16px; height: 16px; flex: 0 0 auto; color: var(--zbx-aksiyon); }

/* -- GEÇERLİ DİL --
   ⛔ Kart merdiveninin turuncusu (`--zbx-kart-*`) BURADA KULLANILMAZ: dolu
      turuncu zemin üstünde espresso metin ucuz duruyor ve seçiciyi sayfanın
      en gürültülü ögesi yapıyor (2026-09-04 ilk sürüm). Vurgu tek yerde
      toplanıyor — rozet aksiyon renginde, zemin onun çok açık tonu. */
.zbx-dil-kutu .zbx-dil-se--aktif,
[data-row="top"] .zbx-dil-kutu .zbx-dil-se--aktif {
	background: #fdf3ee;
	color: var(--zbx-espresso);
	font-weight: 600;
}
.zbx-dil-kutu .zbx-dil-se--aktif:hover { background: #fbebe3; }
.zbx-dil-se--aktif .zbx-dil-rozet { background: var(--zbx-aksiyon); color: #fff; }

/* -- ⛔ ŞERİDİN EVRENSEL `!important` KURALINI YENME --
   WPCode snippet'i şunu basıyor (canlı birleşik CSS'ten okundu):
     `.ct-header [data-row="top"], .ct-header [data-row="top"] *`
     `{ color:#f7f1e8!important; font-size:13.5px; font-weight:600 }`
   Yıldız seçici PANELİN İÇİNE de işliyor: metin krem, rozet krem, hepsi
   beyaz kartın üstünde GÖRÜNMEZ oluyordu (2026-09-04, ölçüldü:
   `se_color = rgb(247,241,232)`).
   ⛔ Snippet'e DOKUNULMAZ — 375 `wp_slash` tuzağı taşıyor (TUZAK 21/30) ve
      WPCode inline stilleri eklenti CSS'inden SONRA basılıyor (kritik uyarı 3).
   ✅ Çözüm özgüllük: onlarınki (0,2,0), aşağısı (0,4,0) — iki taraf da
      `!important` taşıdığında ÖZGÜLLÜK karar verir (kural 40'taki
      `zbk-search` dersinin aynısı). */
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-se,
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-ad {
	color: var(--zbx-espresso) !important;
	font-size: 14px !important;
	font-weight: 450 !important;
}
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-se--aktif,
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-se--aktif .zbx-dil-ad {
	color: var(--zbx-espresso) !important;
	font-weight: 600 !important;
}
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-rozet {
	color: #8a7360 !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
}
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-se--aktif .zbx-dil-rozet {
	color: #fff !important;
}
/* ⚠ `<path>`E DE YAZILIR. SVG `stroke="currentColor"` taşıyor; yıldız kuralı
   `path`in kendi `color`unu da krem yaptığı için `currentColor` krem çözülüyor
   ve tik beyaz kartın üstünde GÖRÜNMÜYORDU (ölçüldü: stroke rgb(247,241,232)).
   Yalnız sarmalayıcı SVG'ye renk yazmak yetmiyor. */
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-tik,
.ct-header [data-row="top"] .zbx-dil-kutu .zbx-dil-tik path {
	color: var(--zbx-aksiyon) !important;
	stroke: var(--zbx-aksiyon) !important;
}
/* Kapalı düğme: şerit `font-weight:600` dayatıyor; kod etiketi ile ad aynı
   ağırlıkta olunca kalabalık görünüyor. */
.ct-header [data-row="top"] .zbx-dil-btn .zbx-dil-kod {
	font-size: 11px !important;
	font-weight: 700 !important;
}
.ct-header [data-row="top"] .zbx-dil-btn .zbx-dil-simdiki {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* -------- yabancı dil sayfasının donanımı --------
   ⛔ Kargo şeridi metni GİZLİ: "500 TL Üzeri Kargo Ücretsiz" yalnız Türkiye
      içi geçerli bir vaat; yurt dışındaki ziyaretçiye göstermek
      karşılayamayacağımız bir söz vermek olur. Şeridin KENDİSİ kalıyor —
      dil seçicisi ve İngilizce gezinme orada duruyor.
   ⛔ Arama, sepet/hesap grubu ve Türkçe kategori menüsü de gizli: yabancı dil
      tarafı TEKLİF akışıdır, sepet/ödeme yoktur (kural 40) ve Türkçe bir menü
      İngilizce sayfanın güvenilirliğini düşürür. Yerine İngilizce mini
      gezinme basılıyor (`zbx_dil_header_kur`).                            */
/* ⚠ SEÇİCİLER CANLIDAN OKUNARAK YAZILDI, tahminle değil. İlk deneme Blocksy'nin
   `[data-id="search"]` / `[data-id="cart"]` niteliklerini hedefliyordu ve HİÇBİRİ
   TUTMADI: bu başlıkta görünür ögelerin hepsi `[data-id="type-1"]` altında ve
   asıl sınıflar WPCode 387'den geliyor (`zbk-search`, `zbk-fav`, `zbk-account`)
   ya da temadan (`ct-header-cart`, `ct-cart-item`). Ekran görüntüsünde arama
   kutusu ve "Favorilerim/Hesabım/Sepetim" hâlâ duruyordu. */
body.zbx-dil [data-row="top"] .ct-header-text,
body.zbx-dil .zbk-search,
body.zbx-dil .zbk-fav,
body.zbx-dil .zbk-account,
body.zbx-dil .ct-header-cart,
body.zbx-dil .ct-cart-item,
body.zbx-dil .zbk-cart,
body.zbx-dil .zbk-links,
body.zbx-dil [data-row="middle"] [data-id="trigger"],
body.zbx-dil .ct-header-trigger,
body.zbx-dil .zbx-mob-ikonlar,
body.zbx-dil .zbx-mob-search,
/* ⚠ Yalnız `[data-id="menu"]`yi gizlemek YETMEZ: sarmalayıcı
   `[data-column="middle"]` `min-height:46px` taşıyor ve menü gizliyken bile
   yer kaplıyor — alt satır 48 yerine 96px ölçüldü, başlık 208px oldu.
   Sütunun tamamı gizlenir; gezinme onun KARDEŞİ olarak basılıyor. */
body.zbx-dil header.ct-header [data-row="bottom"] [data-column="middle"] { display: none !important; }
body.zbx-dil header.ct-header [data-row="bottom"] .ct-container { min-height: 0; }
/* ⛔ ALT SATIRIN KENDİSİ GİZLENMEZ — 2026-09-08'den beri yabancı dil
   gezinmesinin evi orası (Osman: "header logo altında navbar").
   Gizlenen yalnız İÇİNDEKİ Türkçe kategori menüsü. ⚠ Alt bilgideki
   `[data-row="bottom"]` (telif satırı) zaten `footer.ct-footer` ile
   birlikte gizli — bu daraltma orayı görünür yapmaz.
   ⚠ Satır BOŞKEN de 48px yer kaplar: menü verisi olmayan bir dil
   eklenirse başlıkta boş bir bant kalır, aşağıdaki `:has()` onu kapatır. */
body.zbx-dil header.ct-header [data-row="bottom"]:not(:has(.zbx-dil-menu--ana)) { display: none !important; }
/* ⚠ Mobil açılır menü paneli (WPCode 404) EKRAN DIŞINDA duruyor (ölçüldü: x=-327),
   yani ziyaretçi görmüyor — ama Türkçe kategori adları İngilizce sayfanın DOM'unda
   kalıyordu. Hamburger tetikleyicisi zaten gizli olduğu için panel ulaşılamaz;
   tümden kapatmak risksiz ve HTML'i temizliyor. */
body.zbx-dil .zb-mm-panel { display: none !important; }
/* ⚠ Arama kutusu için AYRI ve DAHA ÖZGÜL bir satır gerekti. Yukarıdaki
   `body.zbx-dil .zbk-search` (0,2,1) `!important` ile bile yetmedi — rakip
   kural `.ct-header [data-device="desktop"] form.zbk-search` (0,2,2) ve o da
   `!important` taşıyor; iki `!important` çakışınca ÖZGÜLLÜK karar veriyor.
   Aşağıdaki (0,4,2) onu geçiyor. Ölçüldü: masaüstünde "Aradığın Her Şey"
   yer tutucusu üç denemede de görünür kalmıştı. */
body.zbx-dil .ct-header [data-device] form.zbk-search,
body.zbx-dil .ct-header [data-device] form.zbx-msearch { display: none !important; }

/* -------- yabancı dil sayfasının alt bilgisi --------
   ⛔ Türkçe alt bilgi `footer.ct-footer` ile gizlenir. `[data-footer]` seçicisi
      KULLANILMAZ — bu temada o nitelik `<body>`'ye uygulanıyor ve tüm sayfayı
      karartır (CLAUDE.md kritik uyarı 1). Ölçüldü: İngilizce sayfada görünür
      Türkçe'nin 33 dizesi bu alt bilgiden geliyordu.                        */
body.zbx-dil footer.ct-footer { display: none !important; }
.zbx-dil-footer {
	background: #1c1512;
	color: #f7f1e8;
	padding: 34px 20px 30px;
}
.zbx-dil-footer-ic {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}
.zbx-dil-footer-marka { margin: 0; font-size: 16px; font-weight: 600; }
.zbx-dil-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}
.zbx-dil-footer-nav a {
	display: inline-flex;      /* dokunma hedefi — mobil kural 2 (metin bağlantısı ≥32px) */
	align-items: center;
	min-height: 32px;
	color: #f7f1e8;
	font-size: 14.5px;
	text-decoration: none;
}
.zbx-dil-footer-nav a:hover { text-decoration: underline; }
.zbx-dil-footer-telif { margin: 0; font-size: 13.5px; color: #d9c3a5; }
@media (max-width: 767px) {
	.zbx-dil-footer { padding: 28px 16px 26px; }
	.zbx-dil-footer-nav { gap: 4px 18px; }
}
/* ⚠ `!important` ZORUNLU ve ölçülerek konuldu: WPCode 387 arama/hesap ögelerini
   `.ct-header [data-device="desktop"] form.zbk-search` gibi DAHA ÖZGÜL
   seçicilerle kuruyor (0,2,2) ve bizim `body.zbx-dil .zbk-search` (0,2,1)
   kuralımızı yeniyordu. Birleşik CSS'te iki kural da bulundu; ekranda arama
   kutusu ve "Sepetim" hâlâ görünüyordu. Bkz. CLAUDE.md kural 3. */
body.zbx-dil .zbx-dil-secici { display: flex; }

/* ==========================================================================
   DİL SEÇİCİ — MOBİL ÜST ŞERİT (2026-09-04, Osman: "masaüstü ve mobilde
   en üst header'da")

   ⚠ NEDEN İKİ SATIR: ölçüldü (`olc-dil-secici.mjs`, 360px ana sayfa) —
      kap 317px, kargo metni **275px**. Kapalı açılır kutu ~110px; yan yana
      385px eder, SIĞMAZ. Kargo metnini kısaltmak/kırpmak seçenek değil:
      "500 TL Üzeri Kargo Ücretsiz" bir VAAT ve yarım gösterilemez.
   ⚠ Bu, dil sayfalarında 2026-09-02'de zaten kurulmuş olan düzenin
      (H2, `body.zbx-dil`) Türkçe tarafa genişletilmesidir — yeni bir desen
      değil, ölçülmüş bir desenin tekrarı.
   ⛔ BEDELİ AÇIKÇA YAZILIYOR: mobil sabit başlık 38px → 68px büyüyor, yani
      her Türkçe mobil sayfada 30px daha az içerik görünüyor. Osman bunu geri
      almak isterse tek yapılacak bu bloğu ve aşağıdaki `top` kuralını silmek;
      seçici o zaman mobil menüde (WPCode 404) kalmaya devam eder.
   ⚠ Sticky `top` değeri TAHMİN DEĞİL — deploy sonrası `olc-header.mjs` ile
      ölçülüp doğrulandı (kural 8d: middle.top sabit 0 olmalı, zıplama yok).
   ⛔ `.ct-container`a yatay padding YOK (mobil kural 8: padding kabın içinden
      yer yer, ikon grubunu sağ kenardan içeri kaçırır).
   ========================================================================== */
@media (max-width: 767px) {
	[data-device="mobile"] [data-row="top"] .ct-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 68px;
	}
	[data-device="mobile"] [data-row="top"] .ct-container > .zbx-dil-secici {
		position: static;
		transform: none;
		order: 2;               /* kargo VAADİ üstte kalır, seçici altına iner */
	}
	/* ⛔ 2026-09-10: DEĞER 68 → 38'e DÖNDÜ. Şerit dil seçicisi mobilde menüye
	   taşındığı için yeniden TEK SATIR (ölçüldü: 360/390/768/999'da 38px).
	   -68 bırakılsaydı başlık 30px fazla kayardı ve LOGO SATIRININ ÜSTÜ
	   KIRPILIRDI — canlıda ölçüldü: `middle.top = -30`, Osman'ın "kaydırınca
	   sabit kalsın" şikâyetinin sebebi tam buydu.
	   ⚠ Bu satır şeridin yüksekliğine bağlı: şerit yeniden iki satıra çıkarsa
	   (uzun metin, yeni öge) değeri ölçüp güncelle, tahmin etme.
	   ⛔ Bu satır kural 8d'nin (`position: sticky`) parçasıdır — `position:fixed`
	      ve sınıf/JS ile zıplatma GERİ GETİRİLMEZ. */
	body:not(.zbx-dil) header.ct-header:has([data-device="mobile"] [data-row="top"]) { top: 0; }
}

/* ==========================================================================
   2026-09-02 TAM DENETİM DÜZELTMELERİ (docs/denetim-20260902/ozet.md)
   --------------------------------------------------------------------------
   H2 — Dil sayfasında MOBİL üst şerit: sayfa menüsü (Home/Wholesale/Contact) ile
   dil seçici aynı 38px satıra basılıyordu; 390px'te 40px üst üste biniyor,
   `elementFromPoint` "Wholesale"a dokununca "Türkçe"yi döndürüyordu (ölçüldü:
   en 1, de 4, ar 4 çakışma). Seçici 271px + menü 172-201px yan yana 390'a
   SIĞMAZ — küçültmekle çözülmez; şerit iki satıra kırılıyor.
   ⚠ Sticky: `header.ct-header` mobilde `top:-38px` ile şeridi kaydırıyor
      (stil.css ~679). Şerit 72px olunca dil sayfasında `top:-72px` gerekir —
      yoksa şeridin alt yarısı sabit başlıkta kalır ve içerik örter.
   ⚠ `.ct-container`a yatay padding YOK (mobil kural 8); yalnız min-height. */
@media (max-width: 767px) {
	body.zbx-dil [data-device="mobile"] [data-row="top"] .ct-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 72px;
	}
	body.zbx-dil [data-device="mobile"] [data-row="top"] .ct-container > .zbx-dil-menu,
	body.zbx-dil [data-device="mobile"] [data-row="top"] .ct-container > .zbx-dil-secici {
		position: static;
		transform: none;
		min-height: 34px;
	}
	/* Blocksy'nin sınıfsız iç <div>'i (gizli kargo metnini taşır) flex sütununda
	   36px yer alıyordu → şerit 104px ölçüldü. Sıfırlanınca 68-72px. */
	body.zbx-dil [data-device="mobile"] [data-row="top"] .ct-container > div {
		min-height: 0 !important;
		height: 0;
		overflow: hidden;
	}
	/* Ölçüldü (Playwright, en/de/ar): şerit 68px (2×34), `.ct-container`ın kendi
	   `min-height:36px !important`ı 72'yi geçersiz kılıyor; -72 yazılınca orta
	   satır 4px kırpılıyordu (middle.top = -4). */
	body.zbx-dil header.ct-header:has([data-device="mobile"] [data-row="top"]) { top: -72px; }
}

/* H9 — Kart düğmesi metni 13px altındaydı (mobil kural 3): "Sepete Ekle" 12px
   (snippet 406 `!important`). WPCode inline CSS eklenti CSS'inden SONRA basılır —
   özgüllük + `!important` ile eziliyor (kritik uyarı 3).

   ⛔ ROZET BU BLOKTAN ÇIKARILDI (2026-09-02, Osman canlıda gördü: "yazı yeşil
   dairenin dışına taşıyor"). H9 turu `.zb-secbadge`i 9,5 → 13px yaptı ama
   DAİRE ÇAPINA (40px) DOKUNMADI. "SATAN" satırı 9,5px'te ~29px; 13px'te ~40px
   + yatay padding 6px = 46px > 40px → yazı daireden taşıyor. Rozetin kendi
   yorumu (bkz. `.zb-secbadge` bloğu) zaten "40px, 9,5px'teki ~29px'i alan en
   küçük makul çap" diyordu — punto büyütülürken o ölçü okunmamış.
   ⚠ Bu, mobil kural 3 ile ÇÖZÜLMEMİŞ bir çatışmadır: rozet metni 9,5px'te
   kalıyor, yani 13px asgarisinin altında. Çözmek daireyi ~52px'e büyütmeyi
   gerektirir ve o, 2026-08-20'de Osman'ın "çok büyük olmasın, kalp ikonuyla
   aynı hizada" kararına dokunur — punto tek başına yeniden büyütülmez. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product .button { font-size: 14px !important; }
}

/* H10 — FluentForms hata metni: varsayılan `rgb(245,108,108)` 12px, beyazda 2,9:1
   (krem zeminde 2,58) ve palet dışı. Hover rengi 8,3:1. Gönderim sonrası ilk
   hatalı alan 168px sticky başlığın altında kalıyordu → scroll-margin. */
.frm-fluent-form .ff-el-is-error .text-danger,
.frm-fluent-form .error-text,
.frm-fluent-form .ff-errors-in-stack .error {
	color: #932700 !important;
	font-size: 14px !important;
}
.frm-fluent-form .ff-el-group { scroll-margin-top: 180px; }

/* H4 — Ödeme onay kutusu metni 3 link taşıyınca 390px'te 3 satıra sarıyor; metin
   `input#terms`in ALTINA aktığı için kutunun 44px dokunma alanı 2. satırdaki
   "Mesafeli Satış Sözleşmesi" bağlantısıyla %90 üst üste biniyordu
   (`denetim.mjs` ustuste HATA). Etiket iki sütun: kutu | metin. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	column-gap: 6px;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox > input[type="checkbox"] {
	grid-column: 1;
	justify-self: center;
	margin-top: 4px;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox > span {
	grid-column: 2;
	line-height: 1.45;
}

/* ==========================================================================
   BOŞ SEPETİN BLOK ÜRÜN IZGARASI — favori düğmesi           (2026-09-04)

   ⛔ NEDEN VAR: boş sepet şablonu ürünleri `ul.wc-block-grid__products >
   li.wc-block-grid__product` ile basıyor — kategori/mağaza kartlarının
   `.woocommerce ul.products li.product` işaretlemesinden BAŞKA bir yapı.
   Bu dosyadaki bütün favori kuralları ikinci yapıya bağlıydı; sonuç:
   /sepet/ ve /odeme/ sayfalarında favori düğmesi HİÇ stillenmiyordu ve
   eklentinin ham hâliyle **100×21 px düz metin ("Favorilere ekle")** olarak
   duruyordu. Canlıda ölçüldü (4 düğme, üç genişlikte de aynı).

   ⚠ BU BENİM TURUMUN GERİLEMESİ DEĞİL, İLK KEZ ÖLÇÜLEN ESKİ BİR KUSUR:
   `wc-block-grid` dizesi 2026-09-02 ve 09-03 raporlarının hiçbirinde
   geçmiyor (0 kez), 09-04 raporunda 94 kez. Yani ızgara daha önce ölçüm
   penceresinde hiç boyanmamış.

   ⛔ Kural 34: `tinvwl` ve `wc-add-to-cart` SEPETTEN KALDIRILMAZ — bu ızgara
   gerçekten favori ve sepete-ekle düğmesi taşıyor. Çözüm kaldırmak değil,
   stillemek.

   ⚠ DEVRALINAN DEĞERLER: kart kuralları (34px daire, 19px maske, ::after ile
   44px dokunma hedefi) bu dosyanın "ÜRÜN KARTI" ve "KALP MASKESİ"
   bloklarında yaşıyor. CSS'te seçici takma adı olmadığı için değerler burada
   TEKRARLANIYOR. ⛔ Oradaki bir değeri değiştirirsen burayı da değiştir —
   ayrı düşerlerse sepetteki kalp mağazadakinden farklı görünür ve hiçbir
   tarayıcı bunu yakalamaz (kural 47'nin CSS karşılığı).
   ========================================================================== */
.wc-block-grid__products .tinv-wraper .tinv-wishlist-clear { display: none; }

.wc-block-grid__products .tinvwl_add_to_wishlist_button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
	color: #1a1a1a;
	font-size: 0;
	line-height: 1;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Kalp maskesi — kart kuralıyla aynı glif ve aynı 19px ölçü. */
.wc-block-grid__products .tinvwl_add_to_wishlist_button::before {
	content: "" !important;
	display: block;
	width: 19px;
	height: 19px;
	margin: 0 auto;
	line-height: 1 !important;
	background-color: currentColor;
	-webkit-text-stroke: 0 !important;
	/* ⛔ Kart kuralındaki `font-family: inherit` gerekçesi burada da geçerli —
	   yoksa boş sepetin ürün ızgarasında `tinvwl-webfont` yine indirilir. */
	font-family: inherit !important;
	-webkit-mask: var(--zbx-kalp-bos) center / contain no-repeat;
	mask: var(--zbx-kalp-bos) center / contain no-repeat;
	transition: background-color .16s ease;
}
.wc-block-grid__products .tinvwl_add_to_wishlist_button:hover,
.wc-block-grid__products .tinvwl_add_to_wishlist_button:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .26);
	color: var(--zbx-aksiyon, #cf3700);
}
.wc-block-grid__products .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	color: var(--zbx-aksiyon, #cf3700);
}
.wc-block-grid__products .tinvwl_add_to_wishlist_button:hover::before,
.wc-block-grid__products .tinvwl_add_to_wishlist_button:focus-visible::before,
.wc-block-grid__products .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	-webkit-mask-image: var(--zbx-kalp-dolu);
	mask-image: var(--zbx-kalp-dolu);
}

/* Eklentinin ham metni ("Favorilere ekle") gizlenir — kartta olduğu gibi.
   ⚠ `display:none` DEĞİL: metin erişilebilirlik ağacında kalmalı, yoksa
   ajan ve ekran okuyucu düğmenin ne yaptığını bilemez (kural 24). */
.wc-block-grid__products .tinvwl_add_to_wishlist_button > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dokunma hedefi 34 → 44px. ⛔ Kutu BÜYÜTÜLMEZ, görünmez ::after ile
   genişletilir (mobil kural 2) — yoksa ızgara düzeni bozulur. */
.wc-block-grid__products .tinvwl_add_to_wishlist_button::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
}

/* ==========================================================================
   DİL NAVBAR'I + FOOTER DİZİNİ (2026-09-08)
   --------------------------------------------------------------------------
   NEDEN: Yabancı dil sayfalarında Türkçe kategori menüsü bilerek gizli
   (kural 40) ve geriye yalnız üç link kalıyordu; İngilizce tarafta 18 sayfa
   var. Osman canlıda gördü: "navbarı yok … nasıl ulaşılır göremiyorum".

   İKİ KOPYA, TEK GÖRÜNEN:
     `--ana`   → orta satır, MASAÜSTÜ. O satır dil sayfalarında neredeyse boş
                 ölçüldü (1440×74, içinde yalnız 231×50 logo).
     `--serit` → üst şerit, MOBİL. Şerit zaten iki satır (68-72px); menü
                 birinci satırda kalıyor, başlık yüksekliği DEĞİŞMİYOR.
   ⛔ Şeritteki `.zbx-dil-menu` `position:absolute` — o kural yalnız üst şerit
      içindir. `--ana` orta satırda akışta durmalı, yoksa konumlanmış ata
      arayıp logonun üstüne biner.
   ========================================================================== */
/* --------------------------------------------------------------------------
   MASAÜSTÜ GEZİNMESİ — ALT SATIR (Türkçe başlıkla aynı hiza)
   --------------------------------------------------------------------------
   Ölçüldü (2026-09-08, canlı 1440px): Türkçe başlık 38 / 74 / 48 px üç satır;
   yabancı dil başlığı 38 / 74 ve alt satır `display:none`. Gezinme önce orta
   satıra konmuştu; Osman: *"navbarı neden en üst header'a koydun … header logo
   altında navbar"*. Artık ikisi de aynı yapıda.
   ⛔ Alt satırın kendi `border-top/bottom: 1px #e5e5e5` kuralı TEMADAN DEĞİL
      bu dosyanın 238. satırından geliyor ve masaüstü Türkçe menü için yazıldı;
      dil sayfasında da aynı çizgiyi verdiği için ayrıca çizgi çizilmez.
   ========================================================================== */
.zbx-dil-menu--ana {
	position: static;
	transform: none;
	inset-inline-start: auto;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0 2px;
	min-height: 48px;
	font-size: 14.5px;
	color: var(--zbx-espresso, #2b1d16);
}
.zbx-dil-menu--ana a {
	position: relative;
	min-height: 44px;            /* alt satırda yer var — birincil kontrol ölçüsü */
	padding-inline: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: inherit;
	transition: color .18s ease;
}
/* Alt çizgi `::after` ile canlandırılıyor; `text-decoration` animasyona girmez
   ve satırı yeniden akıtır.
   ⚠ `transform-origin: center` — `left` yazılsaydı Arapça'da ters uçtan büyürdü. */
.zbx-dil-menu--ana a::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	bottom: 4px;
	height: 2px;
	background: #cf3700;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}
.zbx-dil-menu--ana a:hover { color: #cf3700; text-decoration: none; }
.zbx-dil-menu--ana a:hover::after,
.zbx-dil-menu--ana a[aria-current="page"]::after { transform: scaleX(1); }
.zbx-dil-menu--ana a[aria-current="page"] { color: #cf3700; }

/* --------------------------------------------------------------------------
   ORTA SATIRIN SAĞ UCU — katalog + CTA
   --------------------------------------------------------------------------
   Dil sayfalarında logo satırı bomboş ölçülmüştü: 1440x74, içinde yalnız
   231x50 logo. Arama kutusu ve sepet/hesap grubu kural 40 gereği gizli.
   ⛔ "Sepete ekle" TÜRÜNDEN BİR EYLEM KONMAZ — yabancı tarafta sepet/ödeme yok.
      Birincil eylem katalog ve iletişimdir.
   ========================================================================== */
.zbx-dil-eylem {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	order: 9;
}
.zbx-dil-eylem-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding-inline: 18px;
	border-radius: 999px;
	border: 1px solid #d9c3a5;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--zbx-espresso, #2b1d16);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease, background .18s ease,
		box-shadow .18s ease, transform .18s ease;
}
.zbx-dil-eylem-btn:hover {
	border-color: #cf3700;
	color: #cf3700;
	text-decoration: none;
}
.zbx-dil-eylem .zbx-dil-cta {
	background: #cf3700;
	border-color: #cf3700;
	color: #fff;
	box-shadow: 0 1px 2px rgba(43, 29, 22, .18);
}
.zbx-dil-eylem .zbx-dil-cta:hover {
	background: #932700;
	border-color: #932700;
	color: #fff;
	box-shadow: 0 3px 10px rgba(207, 55, 0, .28);
	transform: translateY(-1px);
}
/* ⛔ Orta satırın grid'i ÜÇ SÜTUNLU (ölçüldü: `auto 1fr auto`). Eylem grubu
   dördüncü çocuk olarak eklenince OTOMATİK YERLEŞİMLE 2. satıra düşer ve
   başlığa 74px hayalet satır ekler. Hücre AÇIKÇA verilir. */
@media (min-width: 1000px) {
	body.zbx-dil [data-device="desktop"] [data-row="middle"] .ct-container > .zbx-dil-eylem {
		grid-row: 1;
		grid-column: 2 / -1;
		justify-self: end;
		align-self: center;
	}
	/* İki boş sütun: `zbk-middle-col` içinde yalnız `display:none` arama formu,
	   `end` içinde `display:none` sepet/favori/hesap var (kural 40). */
	body.zbx-dil [data-device="desktop"] [data-row="middle"] .ct-container > .zbk-middle-col,
	body.zbx-dil [data-device="desktop"] [data-row="middle"] .ct-container > [data-column="end"] {
		display: none !important;
	}
}

/* ⛔ İkisi birden GÖRÜNMEZ. Kırılım standardı 999/1000 (mobil kural 5). */
@media (max-width: 999px) {
	.zbx-dil-menu--ana,
	.zbx-dil-eylem { display: none !important; }
}
@media (min-width: 1000px) {
	.zbx-dil-menu--serit,
	.zbx-dil-mobnav { display: none !important; }
}

/* --------------------------------------------------------------------------
   MOBİL GEZİNME — LOGONUN ALTINDA, TOGGLE MENÜ (2026-09-15)
   --------------------------------------------------------------------------
   ⛔⛔ HAP ŞERİDİ DEĞİL TOGGLE — Osman: "mobilde navbar'ı toggle menü yapsan
      olur mu … Türkçe sayfadaki gibi". Eski sürümde 8 hap tek satırda yatay
      kaydırılıyordu ve 390px'te yalnız 3'ü görünüyordu (scrollWidth 616,
      clientWidth 343). ⚠ Bu kusur hiçbir tarayıcıda HATA üretmiyordu: gövde
      yatay taşmıyor, taşan yalnız iç kap (kural 8b'nin sınıfı).
   ⛔ KATALOG HAPI PANELİN DIŞINDA — kapalıyken de görünür. İçine alınsaydı
      Osman'ın "kullanıcı anasayfada onu direkt görsün" kararı (kural 40)
      sessizce bozulurdu.
   ⛔ `<details>` İLE KURULUR, JS İLE DEĞİL (kural 4b + dil seçicinin deseni).
   ⛔ PANEL `position: absolute` — akışta olsaydı açılınca başlık yüksekliği
      değişir ve sticky offseti (kural 8d, dil sayfasında -72px) bozulurdu.
   ⛔ `z-index: 9985` — dil seçicinin (9990) ve çerez bandının (99998) ALTINDA.
      Bant yasal kapıdır (mobil kural 7).
   ⛔ ETİKET YAZISI YOK, İKON + `aria-label` — "Menü"nün RU/AR karşılığı yeni
      bir dizedir, anadil kontrolü yok (kural 40). Türkçe başlıktaki "MENÜ"
      yazısının karşılığı bilerek basılmıyor.
   ========================================================================== */
@media (max-width: 999px) {
	body.zbx-dil .ct-header [data-row="middle"] .ct-container {
		flex-wrap: wrap;
		row-gap: 6px;
		padding-bottom: 8px;
	}
	.zbx-dil-mobnav {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1 0 100%;
		order: 9;
		max-width: 100%;
	}
	/* ⛔ HAMBURGER SOLDA, KATALOG SAĞDA (2026-09-15 Osman). Sıra DOM'dan
	   geliyor; `order` ile çevrilmiyor — klavye/ekran okuyucu sırası da
	   görsel sırayla aynı kalmalı. Katalog kalan boşluğun sağ ucuna. */
	.zbx-dil-mobnav > .zbx-dil-serit-katalog { margin-inline-start: auto; }
	.zbx-dil-navtoggle > summary {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid #e0d6c8;
		border-radius: 10px;
		background: #fff;
		cursor: pointer;
		list-style: none;
	}
	.zbx-dil-navtoggle > summary::-webkit-details-marker { display: none; }
	.zbx-dil-burger,
	.zbx-dil-burger::before,
	.zbx-dil-burger::after {
		display: block;
		width: 20px;
		height: 2.5px;
		border-radius: 2px;
		background: var(--zbx-espresso, #2b1d16);
	}
	.zbx-dil-burger { position: relative; }
	.zbx-dil-burger::before,
	.zbx-dil-burger::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
	}
	.zbx-dil-burger::before { top: -6.5px; }
	.zbx-dil-burger::after { top: 6.5px; }
	.zbx-dil-navtoggle[open] > summary {
		border-color: #cf3700;
		background: #cf3700;
	}
	.zbx-dil-navtoggle[open] .zbx-dil-burger::before,
	.zbx-dil-navtoggle[open] .zbx-dil-burger::after { background: #fff; }
	/* ⛔ AÇIKKEN X — kapatma yolu görünür olmalı (2026-09-15 Osman: "tekrardan
	   x işareti gibi bir şeye basıp onu kapatabilsin"). Orta çizgi saydam,
	   alt/üst çizgiler çapraz. `summary` zaten aynı düğme: ikinci dokunuş
	   paneli kapatıyor. */
	.zbx-dil-navtoggle[open] .zbx-dil-burger { background: transparent; }
	.zbx-dil-navtoggle[open] .zbx-dil-burger::before { top: 0; transform: rotate(45deg); }
	.zbx-dil-navtoggle[open] .zbx-dil-burger::after { top: 0; transform: rotate(-45deg); }

	/* Panel */
	.zbx-dil-navtoggle > .zbx-dil-panel {
		position: absolute;
		inset-inline: 0;
		top: calc(100% + 8px);
		z-index: 9985;
		display: flex;
		flex-direction: column;
		/* ⛔ `stretch` ŞART — taban `.zbx-dil-menu` kuralı ögeleri ortalıyor;
		   `stretch` olmadan satırlar İÇERİK genişliğinde kalıyor, dokunma
		   alanı daralıyor ve ayraç çizgisi satırın ortasında asılı duruyor
		   (canlıda ölçüldü). */
		align-items: stretch;
		gap: 2px;
		max-height: 70vh;
		overflow-y: auto;
		padding: 6px;
		border: 1px solid #e0d6c8;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
	}
	.zbx-dil-panel > .zbx-dil-menu--serit {
		/* ⛔ `static` ŞART — taban kural bu menüyü `absolute` kuruyor; panelin
		   İÇİNDE absolute kalırsa akıştan çıkar, panel yalnız dil seçicisi
		   kadar yükselir (canlıda ölçüldü: panel 63px, menü 334px dışarıda). */
		position: static;
		/* ⛔ `transform`, `inset` ve `margin` DA SIFIRLANIR — taban kural bu
		   menüyü şerit için konumlandırıyor; yalnız `position: static`
		   yazmak yetmedi, nav panelin 160px YUKARISINA taştı (canlıda
		   ölçüldü: panel top 140, nav top -20). */
		transform: none;
		inset: auto;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: auto;
		max-width: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.zbx-dil-panel .zbx-dil-menu--serit a {
		display: flex;
		align-items: center;
		/* ⚠ Tema başlık bağlantılarını ortalıyor; liste satırı SOLA hizalanır
		   (RTL'de sağa — `flex-start` yazı yönünü izler, `left` yazılmaz). */
		justify-content: flex-start;
		text-align: start;
		min-height: 46px;
		padding-inline: 14px;
		border-radius: 8px;
		color: var(--zbx-espresso, #2b1d16);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}
	.zbx-dil-panel .zbx-dil-menu--serit a + a {
		border-top: 1px solid #f1ece4;
		border-radius: 0;
	}
	.zbx-dil-panel .zbx-dil-menu--serit a[aria-current="page"] {
		background: #fdece5;
		color: #cf3700;
	}

	/* ⛔ DİL SEÇİCİ PANELİN EN ALTINDA — üst şeritteki kopyası mobilde
	   gizlenir; ikisi aynı anda görünürse aynı kontrol iki kez sunulur.
	   ⚠ Masaüstünde (≥1000px) seçici ŞERİTTE kalır — kural 40 orada geçerli. */
	body.zbx-dil .ct-header [data-row="top"] .zbx-dil-secici { display: none !important; }
	.zbx-dil-panel-dil {
		margin-top: 8px;
		padding-top: 10px;
		border-top: 1px solid #e7e0d5;
	}
	.zbx-dil-panel-dil .zbx-dil-secici {
		position: static;
		width: 100%;
	}
	.zbx-dil-panel-dil .zbx-dil-ac { width: 100%; }
	/* ⛔⛔ RENK TEK TEK EZİLİR — seçici ÜST ŞERİT için beyaz metinli kuruldu
	   (koyu zemin). Panelin zemini BEYAZ; devralınan beyaz metin orada
	   görünmez kalır ve kutu boşmuş gibi durur (canlıda ölçüldü: summary
	   color = rgb(255,255,255) beyaz panelde). Kural 40'ın "şeridin evrensel
	   kuralı panelin içine işliyor" tuzağının aynı sınıfı.
	   ⚠ SVG'de renk `path`e DE yazılır — `stroke="currentColor"` yetmiyor. */
	.zbx-dil-panel-dil .zbx-dil-secici,
	.zbx-dil-panel-dil .zbx-dil-secici *,
	.zbx-dil-panel-dil .zbx-dil-secici svg path,
	.zbx-dil-panel-dil .zbx-dil-secici svg circle {
		color: var(--zbx-espresso, #2b1d16) !important;
	}
	.zbx-dil-panel-dil .zbx-dil-secici > .zbx-dil-ac > summary {
		display: flex;
		width: 100%;
		min-height: 46px;
		justify-content: flex-start;
		gap: 8px;
		padding-inline: 14px;
		border: 1px solid #e0d6c8;
		border-radius: 8px;
		background: #fff;
	}
	.zbx-dil-panel-dil .zbx-dil-ac[open] > summary { border-color: #cf3700; }
	/* Açılır liste panelin içinde akışta kalsın — absolute kalırsa panelin
	   dışına taşar ve alt kenarda kesilir. */
	.zbx-dil-panel-dil .zbx-dil-ac > div,
	.zbx-dil-panel-dil .zbx-dil-ac > ul {
		position: static;
		width: 100%;
		margin-top: 6px;
		box-shadow: none;
	}

	/* Katalog hapı — panelin DIŞINDA, kapalıyken de görünür. */
	.zbx-dil-mobnav > .zbx-dil-serit-katalog {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		padding-inline: 14px;
		border: 1px solid #cf3700;
		border-radius: 999px;
		background: #fff;
		color: #cf3700;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
	}
	.zbx-dil-mobnav > .zbx-dil-serit-katalog svg { opacity: .85; }
}

/* --------------------------------------------------------------------------
   ÜST ŞERİT — marka cümlesi + iletişim + dil seçici
   --------------------------------------------------------------------------
   ⛔ RU/AR cümlesi YENİ ÇEVİRİ DEĞİL, o dilin yayınlanmış sayfa başlığı
      (kural 40 anadil kontrolü). Kaynak: `tools/icerik/dil/<kod>.json`.
   ⛔ Türkçe kargo vaadi bu şeritte gizli (kural 40) — yerine gelen cümle bir
      VAAT DEĞİL, marka tanımı. "Ücretsiz kargo" türünden bir söz yazılmaz:
      yurt dışına kargo koşullarımız yok.
   ========================================================================== */
.zbx-dil-slogan {
	position: absolute;
	top: 50%;
	inset-inline-start: 0;
	transform: translateY(-50%);
	margin: 0;
	max-width: 62%;
	font-size: clamp(13.5px, 1.05vw, 16px);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
	color: #f7f1e8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zbx-dil-iletisim {
	position: absolute;
	top: 50%;
	inset-inline-end: 158px;     /* dil seçicisi 134px + 24px boşluk */
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .01em;
}
.zbx-dil-iletisim a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;            /* metin bağlantısı alt sınırı — mobil kural 2 */
	color: inherit;
	text-decoration: none;
	opacity: .82;
	transition: opacity .18s ease;
}
.zbx-dil-iletisim a:hover { opacity: 1; text-decoration: underline; }
.zbx-dil-iletisim svg { flex: 0 0 auto; opacity: .75; }
/* ⛔ İletişim satırı 1200px altında GİZLİ — ölçüldü: 1000px'te kap 900px ve
   cümle + iletişim + seçici yan yana sığmıyor. Bilgi alt bilgide duruyor. */
@media (max-width: 1199px) {
	.zbx-dil-iletisim { display: none !important; }
}
/* Mobilde şerit iki satır (kural 40): cümle üstte, seçici altta. */
@media (max-width: 767px) {
	body.zbx-dil [data-device="mobile"] [data-row="top"] .ct-container > .zbx-dil-slogan {
		position: static;
		transform: none;
		max-width: 100%;
		min-height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 13.5px;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	.zbx-dil-slogan { max-width: calc(100% - 160px); }
}

/* Footer dizini — menüye sığmayan sayfalara TEK ulaşma yolu (kural 36). */
.zbx-dil-dizin {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px 28px;
	width: 100%;
	margin: 4px 0 2px;
	text-align: start;
}
.zbx-dil-dizin-baslik {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: #f7f1e8;
	letter-spacing: .01em;
}
.zbx-dil-dizin ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.zbx-dil-dizin a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;            /* metin bağlantısı alt sınırı — mobil kural 2 */
	color: #d9c3a5;
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
}
.zbx-dil-dizin a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   ÜST ŞERİT — TOPTAN LİNKİ (2026-09-10)
   Şeritteki "İşletmenize Özel Toptan Bakır Çözümleri" metni artık
   `/toptan-satis/` hub'ına gidiyor (zbx_toptan_serit_link).
   ⚠ WPCode 375 `.ct-header [data-row="top"] *` seçicisiyle
     `color:#f7f1e8!important` basıyor; ok rengi bu yüzden ondan DAHA ÖZGÜL
     bir seçiciyle yazıldı (0,4,x > 0,2,0) — snippet'e dokunulmuyor.
   ⚠ Dokunma hedefi görünmez `::after` ile 32px'e tamamlanıyor (mobil kural 2);
     kutu büyümüyor, şerit 38px / mobilde 68px kalıyor.
   ========================================================================== */
.ct-header-text a.zbx-toptan-serit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 8px;
	color: inherit;
	text-decoration: none;
	text-align: center;
}
/* ⛔ "—" AYRACI BASILMAZ (2026-09-15 Osman: "Toptan Alım İçin ok sonra Teklif
   Alın"). Ayracın işini artık ok görüyor; ok CTA span'inin başında duruyor. */
.ct-header-text a.zbx-toptan-serit .zbx-toptan-cta {
	white-space: nowrap;      /* "Teklif Alın →" hiçbir genişlikte bölünmez */
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* ⛔ MOBİLDE SÜTUNA ZORLANMAZ (2026-09-15). Eski metin 46 karakterdi ve 360px'e
   sığmıyordu; "Toptan Alım İçin → Teklif Alın" 29 karakter ve tek satıra
   sığıyor. Sığmazsa `flex-wrap: wrap` kendiliğinden alta indirir — sütun
   dayatmak kısa metinde gereksiz ikinci satır açıyordu. */
.ct-header-text a.zbx-toptan-serit::after {
	content: "";
	position: absolute;
	inset: -7px;                 /* 18px metin + 14px = 32px dokunma hedefi */
}
/* ⛔ ALTI ÇİZİLMEZ — hover'da da (2026-09-15 Osman: "altında çizgi olmasın").
   Bağlantı olduğunu ok + nabız + imleç anlatıyor; klavye odağı `outline` ile
   ayrıca görünür kalıyor (erişilebilirlik kaybı yok). */
.ct-header-text a.zbx-toptan-serit:hover,
.ct-header-text a.zbx-toptan-serit:focus-visible {
	text-decoration: none;
}
.ct-header-text a.zbx-toptan-serit:focus-visible {
	outline: 2px solid #de5d31;
	outline-offset: 3px;
	border-radius: 2px;
}
.ct-header .ct-header-text a.zbx-toptan-serit .zbx-toptan-ok {
	color: #de5d31 !important;
	font-weight: 700;
	line-height: 1;
}

/* ==========================================================================
   MOBİLDE DİL SEÇİCİ ŞERİTTEN ÇIKTI, MENÜNÜN İÇİNE GİRDİ (2026-09-10)
   Osman: "mobilde header'daki dil seçeneğini toggle menü içine al".
   ⛔ KIRILIM 999 — TAHMİN DEĞİL, ÖLÇÜM: hamburger (`.ct-header-trigger`)
     360/390/768/999'da 44×44 görünür, 1000/1200'de 0×0. Seçiciyi 1000px'te
     de gizleseydik menü olmadığı için dil değiştirmenin HİÇBİR yolu kalmazdı.
   ⚠ Kaynak düğüm DOM'da kalır (`display:none`, kaldırılmaz) — snippet 404
     dil haplarını tam o düğümden okuyor. Silersen menüdeki liste boşalır.
   ⛔ `[data-row="top"]` ile sınırlı: dil sayfalarındaki gövde içi seçiciye
     ve dizin bloğuna dokunmaz.
   ========================================================================== */
@media (max-width: 999px) {
	/* ⛔ `body:not(.zbx-dil)` ŞART — DİL SAYFALARINDA SEÇİCİ MOBİLDE TEK GEÇİŞ
	   YOLU. İlk sürüm bu koşulsuz yazıldı ve `/en/` mobilde ölçümde yakalandı:
	   şerit 68 → 38px'e düştü, sticky offset (-68px) bayatladı ve orta satır
	   `top: -30` ile kırpıldı. Asıl tehlike o değildi: dil sayfasında Türkçe
	   kategori menüsü (dolayısıyla snippet 404'ün hamburger paneli) gizli, yani
	   seçici gizlenirse ziyaretçinin dil değiştirmesinin HİÇBİR yolu kalmıyor. */
	body:not(.zbx-dil) .ct-header [data-row="top"] .zbx-dil-secici {
		display: none !important;
	}
}

/* ==========================================================================
   MASAÜSTÜNDE DE SABİT BAŞLIK (2026-09-10, Osman: "aşağı doğru kaydırdığımda
   navbar ve header sabit kalsın")
   --------------------------------------------------------------------------
   ÖNCE NE VARDI: masaüstünde başlık `position: relative`; snippet 375
   `body.zbx-scrolled` sınıfıyla YALNIZ alt satırı (`[data-row="bottom"]`,
   kategori menüsü) `position:fixed` yapıyordu. Ölçüldü (1440px, y=600):
   header.top = -600, bottom satırı top = 0 → sayfada yalnız 48px'lik kategori
   çubuğu kalıyor, LOGO · ARAMA · SEPET · FAVORİ kayboluyor. Ziyaretçi
   kaydırdıktan sonra arama kutusuna ya da sepete ulaşamıyordu.

   ŞİMDİ: başlığın tamamı `position: sticky` — mobilde 2026-08-21'de kurulan
   mekanizmanın (kural 8d) masaüstü karşılığı. `top: -38px` üst şeridi (38px)
   yukarı kaydırıp gizliyor; logo satırı + navbar sabit kalıyor.
   Osman'ın seçimi buydu: şerit kaydırınca gizlensin, gerisi kalsın.

   ⛔ SNIPPET 375'in `bottom` FIXED KURALI NÖTRLENDİ — snippet'in KENDİSİNE
      DOKUNULMADI (TUZAK 21: `wp_slash` olmadan yazılırsa ters bölüler soyulur).
      Nötrleme şart: bottom satırı `fixed` iken akıştan çıkıyor ve başlık
      160 → 112px'e düşüyor; sticky ile birlikte çalışsaydı içerik 48px
      ZIPLARDI.
   ⚠ ÖZGÜLLÜK: snippet kuralı `body.zbx-scrolled .ct-header [data-device=
      "desktop"] [data-row="bottom"]` (0,4,2) ve `!important` taşıyor; LiteSpeed
      birleşiminde bizden SONRA geliyor. İki taraf da `!important` taşıyınca
      özgüllük karar verir — bu yüzden başa `html` eklendi (0,4,3).
   ⚠ `body.zbx-scrolled` kaydırma sınıfı DURUYOR: logo küçültme
      (`max-height:48px`) ve mobil arama kuralları ona bağlı. Sabitleme artık
      ondan bağımsız — sınıf gecikmeli eklense bile başlık ilk boyamadan
      itibaren sticky (kural 4b).
   ========================================================================== */
@media (min-width: 1000px) {
	/* ⚠ `!important` ŞART — TEMA KURALI ID İLE YAZILMIŞ. Blocksy başlığa
	   `id="header"` veriyor ve `#header` kuralı (1,0,0) bizim
	   `header.ct-header`ı (0,1,1) yener. `!important`siz ilk sürüm canlıda
	   ölçüldü: `top` uygulandı ama `position` **relative** kaldı ve başlık
	   1440px'te -2000'e kadar kaydı, yani sabitleme HİÇ çalışmadı.
	   Mobil blok (kural 8d) bunu 2026-08-21'den beri `!important` ile yazıyordu;
	   masaüstü kuralı onu kopyalamayınca fark ortaya çıktı. */
	header.ct-header {
		position: sticky !important;
		top: 0;
		z-index: 9990 !important;
		background: #fff;
	}
	body.admin-bar header.ct-header { top: 32px; }

	html body.zbx-scrolled .ct-header [data-device="desktop"] [data-row="bottom"],
	html body.admin-bar.zbx-scrolled .ct-header [data-device="desktop"] [data-row="bottom"] {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		box-shadow: none !important;
		/* ⛔⛔ ANİMASYON DA KAPATILIR — `position`ı nötrlemek YETMEZ (2026-09-10,
		   Osman: *"sabit kısım zıplıyor gibi, hep sabit değil"*).
		   Snippet 375 alt satıra `zbxSlide` veriyor ve sınıf kaydırmayla
		   eklendiği için navbar HER SEFERİNDE yukarıdan süzülüyordu.
		   Kare kare ölçüldü (1440px, requestAnimationFrame): `bottom` satırının
		   `top` değeri 72 → 73,8 → 77,4 → 82,6 → 88,6 → … → 120 boyunca
		   ilerliyor, yani 21 karede hareket. Başlık sabitken bu animasyonun
		   anlamı kalmadı; sabit bir şeyin süzülmesi "zıplama" olarak okunuyor. */
		animation: none !important;
		transform: none !important;
		transition: none !important;
	}
	/* Logo küçültmesi de kaldırıldı: başlık zaten sabit, küçülmesi gerekmiyor ve
	   50 → 48px değişimi kaydırma anında ikinci bir mikro sıçrama üretiyordu. */
	html body.zbx-scrolled .ct-header [data-id="logo"] img {
		max-height: none !important;
	}
}

/* ==========================================================================
   TOPTAN ŞERİDİ — DİKKAT ÇEKEN BİÇİM (2026-09-10, Osman: "arka plan rengi
   sitenin kırmızısı olsun, 'Teklif Alın' yanıp sönsün, yazı masaüstünde
   büyük mobilde uyumlu — bu alan toptan alıcıların dikkatini çekmek için
   çok önemli")
   --------------------------------------------------------------------------
   ⛔ METİN BEYAZ, KREM DEĞİL — KONTRAST HESAPLANDI, SEÇİLMEDİ.
      `#cf3700` üzerinde krem `#f7f1e8` = **4.45:1**, WCAG AA eşiği 4.5 —
      KALIYOR. Beyaz `#fff` = **5.00:1**, geçiyor. Şeridin eski espresso
      zemininde krem sorunsuzdu; zemin değişince o renk geçersiz oldu.
   ⚠ ÖZGÜLLÜK: WPCode 375 `.ct-header [data-row="top"] *` seçicisiyle
      `color:#f7f1e8!important` basıyor (0,2,0). Buradaki kurallar daha özgül
      yazıldı; snippet'e DOKUNULMUYOR (TUZAK 21).
   ⛔ NABIZ OPAKLIĞI 0'A İNMEZ (0.55 tabanı). Kural 40'ın dersi: animasyon
      ilerlemezse (arka plan sekmesi, throttling) öge kalıcı olarak görünmez
      kalır. Animasyon süstür, içeriği gizleyemez.
   ⛔ SANİYEDE 3'TEN FAZLA YANIP SÖNME YOK — WCAG 2.3.1 (nöbet riski).
      Döngü 1.8s, yani ~0,55 Hz.
   ⛔ `prefers-reduced-motion: reduce` altında animasyon KAPALI, metin tam
      opak kalır.
   ⚠ Font büyüdüğü için şerit yüksekliği değişir; sabit başlığın `top` değeri
      ona bağlı (kural 8d) — ikisi birlikte ÖLÇÜLÜR.
   ========================================================================== */
/* ⛔ TR SAYFALARLA SINIRLI. Dil sayfasının üst şeridi başka bir şey taşıyor
   (marka sloganı + iletişim + dil seçici), toptan CTA'sı YOK — orayı kırmızıya
   boyamak dikkat çekecek bir şey olmadan alarm rengi kullanmak olurdu.
   ⚠ Ayrıca ölçüldü: font büyütmesi dil şeridini 68 → 72px yapıp sabit başlığın
   `top: -68px` offsetini bayatlattı (mid.top = 4). Sınırlama iki sorunu birden
   kapatıyor. */
body:not(.zbx-dil) .ct-header [data-row="top"] {
	background: #cf3700 !important;
}
/* ⚠ FONT BOYUTU BAĞLANTININ KENDİSİNE YAZILIR — miras YETMEDİ. Snippet 375
   `[data-row="top"] *` ile font boyutunu da dayatıyor (0,2,0) ve sarmalayıcıya
   yazılan `font-size` mirasla geçmiyor: ölçüldü, 1440px'te clamp 15,1px
   vermesi gerekirken canlıda **13,5px** kaldı. Kural doğrudan `a`ya ve
   `span`lere yazıldı, özgüllük (0,4,1).
   ⚠ Mobilde metin İKİ SATIR — 46 karakter 360px'lik kaba tek satır sığmıyor
   (ölçüldü: link 297px, kap 317px, iki satır 35px). Şeride bu yüzden dikey
   nefes payı verildi; sabit başlığın `top` değeri buna göre ölçülüp yazıldı. */
body:not(.zbx-dil) .ct-header [data-row="top"] .ct-header-text,
body:not(.zbx-dil) .ct-header [data-row="top"] .ct-header-text .entry-content,
body:not(.zbx-dil) .ct-header [data-row="top"] a.zbx-toptan-serit,
body:not(.zbx-dil) .ct-header [data-row="top"] a.zbx-toptan-serit span {
	font-size: clamp(13.5px, 1.05vw, 17px) !important;
	line-height: 1.3 !important;
	letter-spacing: .005em;
}
body:not(.zbx-dil) .ct-header [data-row="top"] .ct-container {
	padding-block: 5px;
}
.ct-header [data-row="top"] a.zbx-toptan-serit {
	color: #fff !important;
	font-weight: 600;
}
.ct-header [data-row="top"] a.zbx-toptan-serit .zbx-toptan-ayrac {
	opacity: .75;
}
/* ⛔ CTA'nın ALTI ÇİZİLMEZ (2026-09-15 Osman). Vurguyu kalınlık + nabız
   taşıyor; çizgi kaldırıldı. */
.ct-header [data-row="top"] a.zbx-toptan-serit .zbx-toptan-cta {
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
	animation: zbxNabiz 1.8s ease-in-out infinite;
}
.ct-header [data-row="top"] a.zbx-toptan-serit .zbx-toptan-ok {
	color: #fff !important;
}
@keyframes zbxNabiz {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	.ct-header [data-row="top"] a.zbx-toptan-serit .zbx-toptan-cta {
		animation: none;
		opacity: 1;
	}
}

/* ==========================================================================
   DİL SAYFASINDA KAYDIRINCA TÜRKÇE ARAMA KUTUSU AÇILIYORDU (2026-09-10)
   --------------------------------------------------------------------------
   Snippet 375: `body.zbx-scrolled .ct-header .zbx-mob-search{display:block
   !important}`. Sınıf kaydırmayla ekleniyor, yani dil sayfasında ilk boyamada
   gizli olan Türkçe arama kutusu KAYDIRINCA ortaya çıkıyordu — kural 40'ın
   "yabancı dil sayfasında Türkçe mağaza donanımı gizlenir" maddesinin ihlali.
   Ölçüldü (4 dil × 2 genişlik): başlık 164 → 174px, yani sabit başlık
   kaydırma sırasında 10px büyüyordu.
   ⚠ Bu, sabit başlık turunda YAN ÜRÜN olarak bulundu: "yükseklik sabit mi"
   kontrolü düşünce sebebi arandı. Kuralın kendisi 2026-08-26'dan beri
   yazılıydı, ihlal ise yalnız KAYDIRILMIŞ durumda ortaya çıktığı için hiçbir
   denetim yakalamamıştı — sayfa açılışını ölçen kontrol bunu göremez.
   ⚠ Özgüllük: snippet (0,3,1) + `!important`; buradaki (0,4,1) + `!important`.
   ========================================================================== */
body.zbx-dil.zbx-scrolled .ct-header .zbx-mob-search,
body.zbx-dil .ct-header .zbx-mob-search {
	display: none !important;
}

/* ==========================================================================
   DİL SAYFASI ŞERİDİ TR'DEN FARKLI — SABİT BAŞLIK OFFSETİ AYRI (2026-09-10)
   --------------------------------------------------------------------------
   TR şeridi toptan CTA'sını taşıyor ve 46px; dil şeridi marka sloganı +
   iletişim + dil seçici taşıyor: **360/390'da 72px, ≥768'de 38px** (Playwright,
   en/de/fr/ar × 2 genişlik — dördü de aynı).
   ⛔ TEK OFFSET YETMEZ. TR için yazılan -46px dil sayfasında 768 ve 1440'ta
   `middle.top = -8` üretti, yani LOGO SATIRI 8px KIRPILDI (ölçüldü).
   ⚠ Bu, aynı turda İKİNCİ kez yaşandı: şeridin yüksekliği değiştiğinde
   offseti güncellemek YETMİYOR — şeridin KAÇ FARKLI hâli olduğunu da saymak
   gerekiyor. Şeride öge ekleyen her değişiklik iki bağlamı birden ölçmeli.
   ========================================================================== */
@media (min-width: 768px) {
	body.zbx-dil header.ct-header { top: -38px !important; }
	body.admin-bar.zbx-dil header.ct-header { top: -6px !important; }
}

/* ==========================================================================
   ANA SAYFA TOPTAN BANNER'I (2026-09-10) — [bb_toptan_banner]
   --------------------------------------------------------------------------
   ⛔ `aspect-ratio` + `object-fit: cover` ŞART: yükseklik ilk boyamada belli
      olur, görsel geç gelse bile içerik kaymaz (CLS 0). Mobilde oran daha
      dik (16/10) — 21:9'un mobil karşılığı 42px'lik bir şerit olurdu ve
      fotoğraf okunmazdı; `cover` ortadan kırpıyor.
   ⛔ METİN GÖRSELİN İÇİNDE DEĞİL, ÜSTÜNDE — okunurluk için koyu degrade
      (`::after`). Degrade soldan sağa: metin solda, fotoğrafın derinliği
      sağda görünür kalıyor.
   ⚠ Degrade `::after` ile basılıyor ve metin sarmalayıcısı ondan SONRA
      geldiği için üstte kalıyor; `z-index` gerekmiyor.
   ========================================================================== */
.zbx-toptan-banner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	margin: 30px 0;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}
/* ⚠ `max-height` ŞART: 21:9 oran 1440px genişlikte **622px** eder ve banner
   ekranın yarısını yiyordu (canlıda ölçüldü). Kırpma `object-fit: cover` ile;
   `aspect-ratio` duruyor, çünkü yüksekliği ilk boyamada o belirliyor (CLS 0). */
.zbx-toptan-banner .zbx-toptan-banner-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1800 / 777;
	max-height: 210px;
	object-fit: cover;
}
/* ⛔ `::before`, `::after` DEĞİL — ölçülerek bulundu. `::after` içeriğin
   SONUNA basılıyor, yani metin sarmalayıcısının ÜSTÜNE geliyordu ve başlık
   overlay'in altında kalıp puslu görünüyordu (canlı ekran görüntüsüyle
   yakalandı). `::before` içerikten önce gelir; metin üstte kalır. */
.zbx-toptan-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(24,17,14,.94) 0%, rgba(24,17,14,.86) 34%, rgba(24,17,14,.55) 62%, rgba(24,17,14,.22) 100%);
}
.zbx-toptan-banner-ic {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 0 clamp(18px, 4.5vw, 64px);
	max-width: min(92%, 900px);
}
.zbx-toptan-banner-baslik {
	text-shadow: 0 1px 12px rgba(0,0,0,.55);
	font-size: clamp(18px, 1.75vw, 27px);
	font-weight: 800;
	line-height: 1.14;
	text-wrap: balance;
	letter-spacing: -.01em;
	color: #fff;
}
.zbx-toptan-banner-alt {
	text-shadow: 0 1px 10px rgba(0,0,0,.5);
	font-size: clamp(13.5px, 1.1vw, 16px);
	line-height: 1.45;
	color: #f0e6dc;
	text-wrap: pretty;
	max-width: 48ch;
}
.zbx-toptan-banner-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	min-height: 44px;          /* birincil kontrol — mobil kural 2 */
	padding: 0 20px;
	border-radius: 9px;
	background: #cf3700;
	color: #fff;
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 700;
}
.zbx-toptan-banner:hover .zbx-toptan-banner-cta,
.zbx-toptan-banner:focus-visible .zbx-toptan-banner-cta {
	background: #932700;
}
.zbx-toptan-banner:focus-visible {
	outline: 3px solid #cf3700;
	outline-offset: 3px;
}
@media (max-width: 767px) {
	.zbx-toptan-banner {
		border-radius: 12px;
		margin: 22px 0;
	}
	.zbx-toptan-banner .zbx-toptan-banner-img {
		aspect-ratio: 16 / 10;
		max-height: 176px;   /* Osman: mobilde banner çok yüksekti */
	}
	.zbx-toptan-banner::after {
		background: linear-gradient(180deg, rgba(28,21,18,.35) 0%, rgba(28,21,18,.72) 55%, rgba(28,21,18,.9) 100%);
	}
	.zbx-toptan-banner-ic {
		justify-content: center;
		gap: 6px;
	}
	.zbx-toptan-banner-cta { min-height: 44px; padding: 0 16px; }
	.zbx-toptan-banner-baslik { max-width: none; }
	.zbx-toptan-banner-alt { max-width: none; }
}

/* --------------------------------------------------------------------------
   VARYANT SEÇİCİ — ürün sayfası, kısa açıklamanın altı (2026-09-11)
   Mantık: `zbx_varyant_secici()` (bakirbul-custom.php). Yüzey satırı gerçek
   ürün karesi + kısa ad, Adet satırı metin hapı. Hepsi düz bağlantı.
   ⛔ Dokunma hedefi 44px (mobil kural 2) — görsel seçenek 72×~84, hap min 44.
   ⛔ Stoksuz seçenek yalnız SOLUK; ayrı "Tükendi" rozeti YOK (KURAL 0 notu).
   ⛔ Seçili çerçeve aksiyon turuncusu #cf3700 — bakır tonu arayüzde yasak.
   -------------------------------------------------------------------------- */
.zbx-varyant {
	margin: 14px 0 6px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.zbx-varyant-baslik {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
	color: #4a3b2f;
}
.zbx-varyant-baslik strong { color: var(--zbx-espresso, #2B1D16); font-weight: 600; }
.zbx-varyant-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.zbx-varyant-liste li { margin: 0; padding: 0; display: flex; } /* satırdaki kartlar eşit boy */
.zbx-varyant-secenek {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #C7C8C9;
	border-radius: 8px;
	background: #fff;
	color: var(--zbx-espresso, #2B1D16);
	text-decoration: none;
	transition: border-color .15s ease;
}
.zbx-varyant-secenek:hover { border-color: #932700; }
.zbx-varyant-secenek:focus-visible { outline: 3px solid #cf3700; outline-offset: 2px; }
.zbx-varyant-secenek.is-secili {
	border: 2px solid #cf3700;
	cursor: default;
}
.zbx-varyant-secenek--gorsel {
	flex-direction: column;
	width: 72px;   /* 360px kabı (317) 4 kart + 3 boşluk = 312 — tek satır */
	justify-content: flex-start;
	padding: 6px 4px 6px;
	gap: 4px;
}
.zbx-varyant-secenek--gorsel.is-secili { padding: 5px 3px 5px; }
.zbx-varyant-gorsel {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
}
.zbx-varyant-secenek--gorsel .zbx-varyant-ad {
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}
.zbx-varyant-secenek--metin {
	min-height: 44px;
	min-width: 44px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 500;
}
.zbx-varyant-secenek--metin.is-secili { padding: 0 13px; }
.zbx-varyant-secenek.is-stoksuz { color: #8a7a68; border-style: dashed; }
.zbx-varyant-secenek.is-stoksuz .zbx-varyant-gorsel { opacity: .5; }

/* --------------------------------------------------------------------------
   SATIN ALMA KUTUSU — FAZ 3 (2026-09-11). Mantık: bakirbul-custom.php
   `zbx_teslimat_suresi_satiri` · `zbx_adet_basi_fiyat` · `zbx_toptan_urun_cta`.
   ⛔ Mobilde gövde metni ≥14px, ikincil ≥13px (mobil kural 3).
   -------------------------------------------------------------------------- */
.zbx-teslimat-suresi {
	margin: 6px 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #4a3b2f;
}
.zbx-teslimat-suresi strong { color: var(--zbx-espresso, #2B1D16); font-weight: 600; }
.zbx-teslimat-suresi a { color: #cf3700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.zbx-teslimat-suresi a:hover { color: #932700; }
.zbx-adet-basi {
	margin: 2px 0 8px;
	font-size: 14px;
	color: #4a3b2f;
}
.zbx-adet-basi strong { color: var(--zbx-espresso, #2B1D16); font-weight: 600; }
.zbx-toptan-urun-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	margin: 14px 0 4px;
	padding: 10px 14px;
	border: 1px solid #C7C8C9;
	border-left: 3px solid #cf3700;
	border-radius: 8px;
	background: #F7F1E8;
	color: var(--zbx-espresso, #2B1D16);
	text-decoration: none;
}
.zbx-toptan-urun-cta:hover { border-color: #932700; }
.zbx-toptan-urun-cta:focus-visible { outline: 3px solid #cf3700; outline-offset: 2px; }
.zbx-toptan-urun-cta-ust { font-size: 13px; color: #4a3b2f; }
.zbx-toptan-urun-cta-alt { font-size: 15px; font-weight: 600; color: #cf3700; }
.zbx-toptan-urun-cta:hover .zbx-toptan-urun-cta-alt { color: #932700; }

/* --------------------------------------------------------------------------
   BAKIM + KAYNAKLAR · BİRLİKTE KULLANILIR — FAZ 4 (2026-09-12)
   Mantık: `zbx_urun_bakim_ve_kaynaklar()` · `zbx_birlikte_kullanilir()`.
   ⛔ Başlıklara font-size YAZILMAZ — `body h2` clamp ölçeği geçerli (kural 1).
   ⛔ Kart bağlantısı 44px'in altına düşmez; üç sütun mobilde ikiye iner.
   -------------------------------------------------------------------------- */
.zbx-bakim {
	/* Hiza: sekmeler ve "İlgili ürünler" ile aynı kap (2026-09-12 Osman geri
	   bildirimi: "başlıklar sola çok yaslı"). Genişliği Blocksy'nin
	   `is-width-constrained` sınıfı veriyor (317/691/1152); ortalama burada.
	   ⛔ Sabit px kap yazma — tema kırılımı değişirse hiza sessizce kayar. */
	margin: 26px auto 0;
}
.zbx-bakim-kutu {
	padding: 16px 18px;
	border: 1px solid var(--zbx-cizgi, #e5e5e5);
	border-radius: 10px;
	background: #FBF8F3;
}
.zbx-bakim-satiri {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.6;
	color: #4a3b2f;
}
.zbx-bakim-satiri strong { color: var(--zbx-espresso, #2B1D16); font-weight: 600; }
.zbx-bakim-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.zbx-bakim-liste li { margin: 0; }
.zbx-bakim-liste a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;          /* düz metin bağlantısı eşiği (mobil kural 2) */
	font-size: 14px;
	color: #cf3700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.zbx-bakim-liste a:hover { color: #932700; }
.zbx-birlikte { margin: 30px auto 0; }
.zbx-birlikte-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));  /* 3 kart sayfayı kaplamasın */
	gap: 16px;
}
.zbx-birlikte-kart a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--zbx-kart-cerceve, #C7C8C9);
	border-radius: 10px;
	background: #fff;
	color: var(--zbx-espresso, #2B1D16);
	text-decoration: none;
}
.zbx-birlikte-kart a:hover { border-color: #932700; }
.zbx-birlikte-kart a:focus-visible { outline: 3px solid #cf3700; outline-offset: 2px; }
.zbx-birlikte-gorsel {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}
.zbx-birlikte-ad {
	font-size: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.zbx-birlikte-fiyat { font-size: 15px; font-weight: 600; color: #cf3700; margin-top: auto; }
.zbx-birlikte-fiyat del { color: #8a7a68; font-weight: 400; }
@media (max-width: 767px) {
	.zbx-birlikte-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.zbx-bakim-kutu { padding: 14px; }
}

/* --------------------------------------------------------------------------
   KARGO SATIRI + FAVORİ YAN YANA — tekil ürün (2026-09-12)
   Osman: "Favorilere ekle'yi kargo bedavanın hemen sağına al."
   Mantık: `zbx_tekil_kargo_rozeti()`; eklentinin kendi kancaları sökülü
   (`zbx_favori_kancasini_sok`).
   ⛔ Seçici `.single-product` ile sınırlı — aynı sınıf ürün KARTINDA da var
      (kart rozeti satırı, stil.css:1358) ve orada flex düzeni bozardı.
   ⛔ Favori `role="button"` taşıyor → 44px birincil kontrol kuralı geçerli.
   -------------------------------------------------------------------------- */
.single-product .zbx-kargo-satiri {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.single-product .zbx-kargo-satiri .tinv-wraper { margin: 0; }
.single-product .zbx-kargo-satiri .tinv-wishlist-clear { display: none; }   /* flex'i kıran temizleyici */
.single-product .zbx-kargo-satiri .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   ÜRÜN VİDEOSU — FAZ 6 (2026-09-12). Mantık: `zbx_urun_videosu()` + betik.js.
   ⛔ Kart bir <button>: 44px kuralı geçerli (mobil kural 2) — kapak zaten büyük.
   ⛔ Başlığa font-size yazılmaz, `body h2` clamp ölçeği geçerli (kural 1).
   -------------------------------------------------------------------------- */
.zbx-video { margin: 30px auto 0; }
.zbx-video-kart {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px;
	border: 1px solid var(--zbx-kart-cerceve, #C7C8C9);
	border-radius: 10px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	position: relative;
}
.zbx-video-kart:hover { border-color: #932700; }
.zbx-video-kart:focus-visible { outline: 3px solid #cf3700; outline-offset: 2px; }
.zbx-video-kapak {
	width: 160px;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}
.zbx-video-oynat {
	position: absolute;
	left: 70px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #cf3700;
	transform: translateX(-50%);
}
.zbx-video-oynat::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}
.zbx-video-metin { display: flex; flex-direction: column; gap: 4px; }
.zbx-video-ad { font-size: 15px; font-weight: 600; color: var(--zbx-espresso, #2B1D16); }
.zbx-video-alt { font-size: 14px; line-height: 1.5; color: #4a3b2f; }
.zbx-video-cerceve {
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
}
.zbx-video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zbx-video-cerceve video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ⛔ KENDİ SUNUCUMUZDAKİ KLİPLER DİKEY (9:16) — KAPAK KUTUSU DA DİKEY OLMALI.
   YouTube kapakları 4:3 (480x360) geliyor ve yatay kutuya sorunsuz oturuyor;
   bizim mp4 kapağımız 720x1280. Yatay kutuda `object-fit: cover` ile
   2026-09-12'de ölçüldü: karenin yalnız **%32'si** görünüyor ve ürün kadrajın
   dışında kalıyordu (Osman: *"videolar hiç görünmüyor en boy yükseklik
   ayarlanmalı"*). Ölçüt kaynağın en-boyu; kutuyu ona uydur. */
.zbx-video-kart[data-mp4] .zbx-video-kapak { width: 120px; aspect-ratio: 9 / 16; }
.zbx-video-cerceve.zbx-video-dikey { aspect-ratio: 9 / 16; max-width: 340px; }
@media (max-width: 767px) {
	.zbx-video-kart { flex-direction: column; align-items: flex-start; gap: 10px; }
	.zbx-video-kapak { width: 100%; aspect-ratio: 16 / 9; }
	.zbx-video-oynat { left: 50%; top: 28%; }
	.zbx-video-cerceve { aspect-ratio: 9 / 16; max-width: 100%; }
	/* Dikey kapak mobilde de dikey kalır; kart bu yüzden SATIR düzenine döner —
	   tam genişlikte 9:16 kapak 570px boyunda bir blok olurdu. */
	.zbx-video-kart[data-mp4] { flex-direction: row; align-items: center; gap: 14px; }
	.zbx-video-kart[data-mp4] .zbx-video-kapak { width: 132px; aspect-ratio: 9 / 16; }
	.zbx-video-kart[data-mp4] .zbx-video-oynat { left: 76px; top: 50%; transform: translate(-50%, -50%); }
}

/* ==========================================================================
   ATÖLYE VİDEOLARI (2026-09-13) — `[bb_atolye_videolari]`, ana sayfa + tekil sayfa.

   ⛔ ÇEKİRDEK DOSYADA, `stil-sayfa.css`te DEĞİL (kural 20): bölüm ANA SAYFADA
      duruyor, ana sayfa ise parça dosyayı hiç yüklemiyor. Parçaya konursa
      kartlar ana sayfada stilsiz basılır.
   ⛔ `<img>`e `height: 100%` YAZILMAZ (kural 52): oran ögenin kendisine verilir,
      yoksa tarayıcı oranı width/height niteliklerinden hesaplayıp `object-fit`i
      devre dışı bırakıyor ve kare kırpılıyor.
   ⚠ Kart, ürün videosunun `.zbx-video-kart` kuralını miras alıyor (aynı JS'i
     kullanabilmek için); buradaki kurallar o satır düzenini ızgaraya çeviriyor.
   ========================================================================== */
.zbx-atolye { margin: 46px auto 10px; }
.zbx-atolye-baslik { margin: 0 0 10px; --theme-font-size: clamp(22px, 3.6vw, 30px); }
.zbx-atolye-giris {
	margin: 0 0 22px;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.65;
	color: #4a3b2f;
}
.zbx-atolye-izgara {
	display: grid;
	/* ⛔ SÜTUN SAYISI SABİT 4 — `minmax(168px, 236px)` tavanı kabı doldurmuyordu:
	   1440'ta 4 kart 1073'te bitiyor, sağda 292px boşluk kalıyordu (768'de 202px).
	   Osman (2026-09-14): "kartların sağında boşluk var, ekrana tam oturmadı,
	   koleksiyon katları gibi olsun."
	   ⛔ TAVAN YERİNE POSTER ORANI TUTUYOR — eski tavanın sebebi yükseklikti
	   (Osman: "video kartının yüksekliği çok olmasın"); 1fr sütun 312px olunca
	   4/5 poster kartı 496px'e çıkarıyor, koleksiyon kartı ise 416px. ≥1200px'te
	   poster 1/1'e geçiyor: kart 418px, koleksiyonla aynı hizada ve aynı boyda.
	   ⚠ `auto-fit` KULLANILMAZ — atölye sayfasında 7 kart var, auto-fit orada
	   sütunu 168px'e indirip iki satırı dengesiz bölüyordu. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.zbx-video-kart.zbx-atolye-kart {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 12px;
	width: 100%;
	text-align: start;
}
/* Ürün videosu kuralı kapağı 120px'e sabitliyor; ızgarada kapak hücreyi doldurur. */
/* ⛔ POSTER 9/16 DEĞİL 4/5 — kaynak dikey ama kart teaser'ı; 9/16 kartı
   ekranın tamamına yayıyor. Kırpma merkezden, hareket kadrajın ortasında. */
.zbx-video-kart.zbx-atolye-kart .zbx-video-kapak {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
	background: #f1ece4;
}
@media (min-width: 1200px) {
	/* Sütun 312px'e çıkınca 4/5 poster kartı koleksiyon kartından 80px uzun
	   yapıyor; kare kırpma ikisini eşitliyor (418px ↔ 416px). */
	.zbx-video-kart.zbx-atolye-kart .zbx-video-kapak { aspect-ratio: 1 / 1; }
}
.zbx-video-kart.zbx-atolye-kart .zbx-video-oynat { left: 50%; top: 42%; }
.zbx-video-kart.zbx-atolye-kart .zbx-video-ad { font-size: 15px; }
/* Açıklama iki satırla sınırlı: kartlar ızgarada eşit yükseklikte uzuyor,
   uzun açıklama hepsini birden büyütüyordu. */
.zbx-video-kart.zbx-atolye-kart .zbx-video-alt {
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.zbx-atolye-hepsi { margin: 20px 0 0; }
.zbx-atolye-hepsi a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: #cf3700;
	text-decoration: none;
}
.zbx-atolye-hepsi a:hover { color: #932700; text-decoration: underline; }
.zbx-atolye-hepsi a::after { content: "→"; margin-inline-start: 7px; }

@media (max-width: 767px) {
	.zbx-atolye { margin-top: 34px; }
	.zbx-atolye-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.zbx-video-kart.zbx-atolye-kart { padding: 8px; gap: 9px; }
	.zbx-video-kart.zbx-atolye-kart .zbx-video-alt { display: none; }
}

/* ==========================================================================
   ANA SAYFA YAN HİZASI (2026-09-14, Osman: "hepsi soldan sağdan boşluksuz
   başlıyor, Popüler Kategoriler gibi aynı hizadan başlat")

   Ölçüldü (canlı): referans `.zn-sechead` sol kenarı 390px'te 23 · 768'de 38 ·
   1440'ta 75. Bu üç sayı temanın `.is-width-constrained` kuralından geliyor
   (`width: var(--theme-container-width)` + `max-width: var(--theme-block-max-width)`).
   Hizasız bloklar sayfa içeriğine doğrudan çocuk olduğu için tam genişlikteydi:
   Koleksiyonlar başlığı · `.zb-quad` · `.zn-trust` · `.zbx-atolye` · `.zn-seo` ·
   `.zbx-toptan-banner` — hepsi sol=0.

   ⛔ SABİT px GUTTER YAZILMAZ — üç kırılımda üç farklı değer (23/38/75) ve
      hiçbiri sabit değil (390'da %6, 768'de %5, sonra 1290 tavanına çarpıyor).
      Temanın değişkenini kullanmak tek doğru yol; sabit değer bir kırılımda tutar,
      ötekinde tutmaz.
   ⛔ `.zn-seo`nun KENDİ 36px İÇ PAYI SIFIRLANIR — yoksa metin 75+36 = 111'den
      başlar ve bu kez fazla içeride kalır.
   ⚠ Yalnız `body.home` — `.zbx-atolye` `/atolye-videolari/` sayfasında da var,
     orada tema içeriği zaten kısıtlıyor; ikinci kısıt iki kat boşluk yapardı.
   ========================================================================== */
body.home .zb-quad,
body.home .zn-trust,
body.home .zbx-atolye,
body.home .zn-seo,
body.home .zbx-toptan-banner,
body.home .zn-sec,
body.home .zbx-vitrin,
body.home .hentry > h2.wp-block-heading {
	margin-inline: auto;
	width: var(--theme-container-width);
	max-width: var(--theme-block-max-width);
}
/* ⛔ İÇ PAY SIFIRLANIR, AMA TEMA KISITIYLA BİRLİKTE — tek başına sıfırlamak
   içeriği 390px'te ekranın kenarına yapıştırır; mobilde o pay kenar payı
   görevi görüyor. `.zn-seo` 36px taşıyordu; vitrin şeridi ise İKİ sarmalayıcı
   ve İKİSİ DE 22px: başlığı taşıyan `.zn-sec` ve ızgarayı taşıyan
   `.woocommerce.zbx-vitrin`. `ul.products`ın kendi payı 0 — yalnız `.zn-sec`i
   sıfırlamak başlığı hizalar, ürün ızgarasını 97'de bırakır (canlıda ölçüldü). */
body.home .zn-seo,
body.home .zn-sec,
body.home .zbx-vitrin { padding-inline: 0; }

/* ==========================================================================
   KESİN CEVAP KUTUSU — KATEGORİ ARŞİVİ (2026-09-16)

   ⛔ `stil-sayfa.css` KATEGORİ SAYFALARINDA YÜKLENMİYOR (kural 20). `.bb-answer`
   kuralı orada tanımlı; kategori açıklamasına kutu yazılsa bile STİLSİZ
   kalırdı — 2026-09-10'da `.single-post` sınırı yüzünden hub'da yaşanan
   sessiz kaybın aynısı. Her sayfada görünebilen bileşenin CSS'i ÇEKİRDEKTE
   durur (kural 40'ın dil seçici dersi).

   ⚠ Kutu kategori metninin İLK paragrafıdır; `zbx_kategori_metni_parcala()`
   ilk `</p>`'den böldüğü için ürün ızgarasının ÜSTÜNDE, `.zb-cat-giris`
   içinde basılır. İkinci bir yer yok — alt blokta da geçerli olsun diye
   `.zb-cat-seo` seçiciye dahil.
   ⚠ `--zbx-bakir` adı tarihseldir, DEĞERİ aksiyon turuncusudur (#cf3700);
   yasaklı bakır rengi (#B87333) değil.
   ========================================================================== */
.single-post .bb-answer,
.zbx-hub .bb-answer,
.zbx-dil .bb-answer,
.zn-seo .bb-answer,
.page .entry-content > .bb-answer,
.zb-cat-giris .bb-answer,
.zb-cat-seo .bb-answer {
	background: var(--zbx-krem);
	border-left: 3px solid var(--zbx-bakir);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 0 0 18px;
	font-size: clamp(15px, 1.4vw, 16.5px);
	line-height: 1.65;
	color: var(--zbx-espresso);
}

:root{--zbx-deploy:"20260920-135057"}