/*
 * BakırBul — SAYFAYA ÖZGÜ STİLLER (2026-08-14 hız turu, Faz 4)
 *
 * Bu dosya `stil.css`ten AYRILDI ve yalnız ilgili sayfalarda yükleniyor.
 * Gerekçe ölçüm: birleşik CSS her sayfada 361-486 KB ham; `stil.css` bunun
 * 150 KB'ı ve sayfa başına ancak %11-17'si kullanılıyor (Playwright CSS
 * kapsam ölçümü). Aşağıdaki dört blok ticaret sayfalarında (anasayfa, mağaza,
 * kategori, ürün, sepet, ödeme) HİÇ kullanılmıyordu.
 *
 * ⚠ TAŞIMA ÖLÇÜMLE SEÇİLDİ, göz kararıyla değil:
 *   - blog bloğunun 69 kuralının 69'u bağlama kilitli (`.single-post` vb.)
 *   - taşınan 107 sınıfın hiçbiri 11 ticaret/yasal sayfada geçmiyor (canlı tarama)
 * ⛔ TAŞINMAYANLAR ve sebebi:
 *   - `toptan-lp` bloğu: `.zbx-katalog-ozet*` kuralları KATEGORİ sayfalarında
 *     kullanılıyor (35 kategori açıklamasında `[katalog_ozet]` var)
 *   - `favoriler` bloğu: 4 kuralın hepsi `.woocommerce ul.products li.product`
 *     ile başlıyor, yani her ürün listesinde geçerli
 *
 * Yükleme koşulu `zbx_enqueue_assets()` içinde: blog (tekil/arşiv/kategori/etiket),
 * sayfa 7791 (bakır fiyatları), sayfa 43 + altları (toptan), sayfa 7937 (imalatçı LP).
 * Yeni bir sayfaya özgü blok eklersen HEM buraya yaz HEM koşula ekle.
 */

/* ==========================================================================
   BLOG / BAKIR REHBERİ (2026-08-07)
   Arşiv: kart grid + chip filtresi + arama + sayfalama.
   Tekil: tipografi + içindekiler + cevap kutusu + SSS + yazar + CTA + ilgili.
   PHP tarafı: WPCode "Blog şablon parçaları" + "Blog meta hesaplama".
   ========================================================================== */

/* ---- Arşiv üst bölümü ---- */
.bb-blog-ust { margin: 0 0 28px; }
/* Blog arşivinin H1'i (2026-08-17). Blocksy "yazılar sayfası"nda sayfa
   başlığını basmadığı için arşiv H1'siz kalıyordu. Boyut global h1
   ölçeğinden gelir — buraya font-size YAZMA (CLAUDE.md mobil kural 1). */
.bb-blog-baslik { margin: 0 0 14px; }
.bb-blog-giris {
	max-width: 720px;
	font-size: 16px;
	color: #5a5248;
	margin: 0 0 18px;
}
.bb-chipler {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: 14px;
	scrollbar-width: none;
}
.bb-chipler::-webkit-scrollbar { display: none; }
.bb-chip {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid var(--zbx-cizgi);
	border-radius: 999px;
	font-size: 13.5px;
	line-height: 1;
	color: var(--zbx-espresso);
	background: #fff;
	white-space: nowrap;
	transition: border-color .15s, background .15s;
}
.bb-chip:hover { border-color: var(--zbx-bakir); color: var(--zbx-bakir-koyu); }
.bb-chip-aktif,
.bb-chip-aktif:hover {
	background: var(--zbx-bakir);
	border-color: var(--zbx-bakir);
	color: #fff;
}
.bb-blog-arama { display: flex; gap: 8px; max-width: 420px; }
.bb-blog-arama input[type="search"] {
	flex: 1;
	border: 1px solid var(--zbx-cizgi);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
}
.bb-blog-arama input[type="search"]:focus {
	outline: none;
	border-color: var(--zbx-bakir);
	box-shadow: 0 0 0 3px rgba(207, 55, 0, .15);
}
.bb-blog-arama button {
	border: 0;
	border-radius: 999px;
	padding: 9px 20px;
	background: var(--zbx-bakir);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.bb-blog-arama button:hover { background: var(--zbx-bakir-koyu); }

/* ---- Arşiv kartları (Blocksy .entry-card üstüne rötuş) ---- */
.bb-blog-arsiv .entries .entry-card {
	border: 1px solid var(--zbx-cizgi);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.bb-blog-arsiv .entries .entry-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(43, 29, 22, .10);
}
.bb-blog-arsiv .entry-card .entry-title { font-size: 17px; font-weight: 600; }
.bb-blog-arsiv .entry-card .entry-title a { color: var(--zbx-espresso); }
.bb-blog-arsiv .entry-card .entry-excerpt { font-size: 14px; color: #6b6b6b; }
.bb-blog-arsiv .entry-card .entry-meta { font-size: 12.5px; }
/* Kart meta'sındaki e-posta görünümlü yazar satırı gizli */
.bb-blog-arsiv .entry-card .meta-author { display: none; }
.bb-blog-arsiv .entry-card .meta-categories a { color: var(--zbx-bakir-koyu); font-weight: 600; }

/* Görselsiz kart fallback'i: krem zemin + bakır baş harf (boş gri kutu yasak) */
.bb-kart-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--zbx-krem);
}
.bb-kart-fallback span {
	font-size: 56px;
	font-weight: 700;
	color: var(--zbx-bakir);
	opacity: .85;
}

/* ---- Kart görseli: çerçeveye SIĞAR, kesilmez ----
   Katalog görselleri karışık oranda (kare ürün çekimi, dikey, yatay ortam
   fotoğrafı). `cover` kullanınca kare/dikey görsellerin üstü-altı kırpılıyor
   ve ürün yarım görünüyordu. `contain` + krem zemin: her görsel tam görünür,
   kart yüksekliği `aspect-ratio` ile sabit kaldığı için grid hizası bozulmaz.
   (Ürün kartlarında da aynı yaklaşım kullanılıyor — bkz. yukarıdaki bölüm.) */
.bb-blog-arsiv .entry-card .ct-media-container {
	display: flex; /* ↓ aşağıdaki nota bak — görseller bu yüzden kaçıktı */
	align-items: center;
	justify-content: center;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 10px;
	/* ⚠ ASIL KAÇIKLIK SEBEBİ (2026-08-08): Blocksy kaba `.boundless-image`
	   sınıfı veriyor ve `width: calc(100% + var(--card-inner-spacing,30px)*2)`
	   + `margin-inline: calc(...*-1)` ile onu kart iç boşluğunun DIŞINA
	   taşırıyor. Bizim `margin: 0 0 12px` kuralı negatif marjı iptal ediyordu
	   ama width'e dokunmuyordu — kap kart içeriğinin solundan başlayıp sağa
	   60px taşıyor, kart kırpıyordu. Görsel bu şişmiş kutuya göre ortalanınca
	   sağa kaymış görünüyordu (solda fazla, sağda az krem boşluk).
	   `width: 100%` taşmayı sıfırlıyor; sol/sağ boşluk artık eşit. */
	width: 100%;
	margin: 0 0 12px;
	background: var(--zbx-krem);
}
/* ⚠ Blocksy KAPSAMSIZ bir kural yazıyor:
   `.ct-media-container img{position:absolute;width:100%;height:100%}`
   — ama kabın kendisine `position:relative` VERMİYOR (bundle'da yalnız
   display:inline-flex + overflow + isolation var). Mutlak konumlu görselin
   referansı kap değil, yukarıdaki ilk konumlu ata oluyor; görsel krem
   çerçevenin içinde sağa kayıyordu (solda fazla, sağda az boşluk).

   Çözüm mutlak konumu tamamen bırakmak: `position:static` + kabı flex ile
   ortalamak. Böylece görsel kutusu kabın TAM ölçüsünde oluyor ve hangi atanın
   konumlu olduğu hiç önemli olmuyor. `contain` + `center center` ancak ondan
   sonra gerçek ortalama yapıyor. Oran (3/2) ve `contain` davranışı aynı. */
.bb-blog-arsiv .entry-card .ct-media-container img {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: contain !important;
	object-position: center center !important;
	padding: 8px;
	transition: transform .4s ease;
}

/* ---- Kart sonundaki "Devamını Oku" (snippet 6841, blocksy:loop:card:end) ---- */
.bb-blog-arsiv .entry-card .bb-devam {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	color: var(--zbx-aksiyon);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.bb-blog-arsiv .entry-card .bb-devam:hover,
.bb-blog-arsiv .entry-card .bb-devam:focus-visible {
	color: var(--zbx-aksiyon-koyu);
	text-decoration: underline;
}
.bb-blog-arsiv .entry-card .bb-devam span { transition: transform .2s ease; }
.bb-blog-arsiv .entry-card:hover .bb-devam span { transform: translateX(3px); }
.bb-blog-arsiv .entry-card:hover .ct-media-container img { transform: scale(1.03); }

/* İlk sayfada ilk kart geniş: görsel solda tam yükseklik, metin sağda.
   ⚠ GRID KULLANILMIYOR. Blocksy kart çocukları düz bir dizi (meta → başlık →
   görsel → özet → meta) ve sarmalayıcıları yok; iki sütunlu grid'de her çocuk
   kendi satırına düşüyor, `grid-row: 1 / -1` de implicit grid'de beklendiği
   gibi çalışmıyor (görsel tek satırda kalıp metnin üstüne biniyordu).
   Mutlak konumlandırma bu dizilime bağımlı değildir. */
@media (min-width: 1000px) {
	.bb-blog-ilk-sayfa .entries[data-layout="grid"] > article:first-child {
		grid-column: 1 / -1;
		display: block;
		position: relative;
		min-height: 360px;
		padding: 28px 30px 28px calc(48% + 30px);
		overflow: hidden;
	}
	.bb-blog-ilk-sayfa .entries[data-layout="grid"] > article:first-child .ct-media-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 48%;
		height: auto;
		aspect-ratio: auto;
		margin: 0;
		border-radius: 12px 0 0 12px;
	}
	/* ⚠ 2026-08-18: burası `object-fit: cover` idi ve gerekçesi "geniş kartta alan
	   büyük — kırpma sorun değil" diye yazılmıştı. YANLIŞTI. Kutu 618x382 (1,62
	   yatay); katalog görsellerinin 21'i 2:3 DİKEY. Dikey bir görsel bu kutuda
	   `cover` ile ortadaki %41'i görünecek şekilde kırpılıyordu — Osman bunu
	   "yarı görünüyor, tam boyu görünmüyor" diye bildirdi (bardak seri adları
	   yazısı, görsel 7314, 1200x1800).
	   ⛔ İlk sıra HER YENİ YAZIDA değişiyor, yani bu tek bir yazının sorunu değil:
	   69 yazının 21'i dikey görselli, sıra onlardan birine geldiğinde tekrarlar.
	   Bu yüzden çözüm görseli değiştirmek değil, kuralı düzeltmek.
	   Artık ızgaradaki diğer kartlarla aynı: `contain` — hiçbir görsel kırpılmaz,
	   oranı ne olursa olsun tam görünür. Ölçüm: node tools/mobil-denetim/olc-blog-kart.mjs */
	.bb-blog-ilk-sayfa .entries[data-layout="grid"] > article:first-child .ct-media-container img {
		padding: 12px;
		object-fit: contain !important;
		object-position: center center !important;
	}
	.bb-blog-ilk-sayfa .entries[data-layout="grid"] > article:first-child .entry-title { font-size: 25px; margin-top: 8px; }
	.bb-blog-ilk-sayfa .entries[data-layout="grid"] > article:first-child .entry-excerpt { font-size: 15px; }
}

/* Sayfalama — bakır aktif durum */
.bb-blog-arsiv .ct-pagination .page-numbers.current {
	background: var(--zbx-bakir);
	color: #fff;
	border-color: var(--zbx-bakir);
}

/* ---- Tekil yazı: meta satırı ---- */
.bb-yazi-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 13.5px;
	color: #7a7268;
	margin: 0 0 18px;
}
.bb-nokta { color: var(--zbx-kum); }

/* ---- İçindekiler ---- */
.bb-toc {
	border: 1px solid var(--zbx-cizgi);
	border-radius: 10px;
	background: #fff;
	margin: 0 0 26px;
	overflow: hidden;
}
.bb-toc-baslik {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: var(--zbx-krem);
	color: var(--zbx-espresso);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 16px;
	cursor: pointer;
	position: relative;
}
.bb-toc-baslik::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--zbx-bakir);
	border-bottom: 2px solid var(--zbx-bakir);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s;
}
.bb-toc-baslik[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.bb-toc-liste { padding: 10px 16px 14px; }
.bb-toc-liste ol { margin: 0; padding-left: 18px; }
.bb-toc-liste li { margin: 6px 0; font-size: 14.5px; }
.bb-toc-liste a { color: var(--zbx-espresso); }
.bb-toc-liste a:hover { color: var(--zbx-bakir-koyu); }
/* Kapalı durum (JS aria-expanded yönetir) */
/* İçindekiler listesinin kapalı/açık hali (2026-08-10, hız turu).

   ÖNCEDEN: liste HTML'de AÇIK geliyordu, `tocKur()` DOMContentLoaded'da dar
   ekranda `data-kapali` ekleyip kapatıyordu. Tarayıcı önce açık listeyi
   boyuyor, sonra kapatıyordu — altındaki her şey (kesin cevap kutusu dahil)
   yukarı sıçrıyordu. Rehber yazısında ölçülen CLS 0,113'ün tamamı buydu
   (Lighthouse: `div.bb-answer`).

   ARTIK: dar ekranda kapalılık CSS'in VARSAYILANI, yani ilk boyamada geçerli.
   JS yalnız kullanıcı tıklamasında `data-acik` ekliyor (kullanıcı girdisiyle
   olan değişiklik CLS'e sayılmaz). Masaüstünde liste açık başlıyor ve kapanma
   `data-kapali` ile yönetiliyor. */
@media (max-width: 1199px) {
	.bb-toc:not([data-acik]) .bb-toc-liste { display: none; }
}
@media (min-width: 1200px) {
	.bb-toc[data-kapali] .bb-toc-liste { display: none; }
}
/* Masaüstü: sağa yaslı sticky kutu */
@media (min-width: 1200px) {
	.bb-toc {
		float: right;
		width: 300px;
		margin: 0 0 20px 24px;
		position: sticky;
		top: 110px;
	}
}

/* ---- İçerik tipografisi ---- */
.single-post .entry-content { font-size: 17px; line-height: 1.75; }
.single-post .entry-content > p { margin-bottom: 18px; color: #3a3a3a; }
.single-post .entry-content h2 {
	/* 2026-08-11 mobil turu: sabit 24px yerine akışkan — 768px'te yine 24px */
	font-size: clamp(19px, 3.13vw, 24px);
	color: var(--zbx-espresso);
	margin-top: 40px;
	scroll-margin-top: 110px;
}
.single-post .entry-content h3 { font-size: clamp(16.5px, 2.47vw, 19px); margin-top: 28px; }
.single-post .entry-content ul li::marker,
.single-post .entry-content ol li::marker { color: var(--zbx-bakir); }
.single-post .entry-content blockquote {
	border-left: 3px solid var(--zbx-bakir);
	font-style: normal;
	padding-left: 18px;
	color: #4a423a;
}
.single-post .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 18px 0;
	display: block;
	overflow-x: auto;
	/* ⛔ KAYDIRMA GÖSTERGESİ — ÇIPLAK `overflow-x:auto` YETMEZ (2026-08-24).
	   Tablo mobilde zaten kaydırılabiliyordu (ölçüldü: 5 sütunlu tabloda içerik
	   469px, kap 390px, `scrollWidth > clientWidth` doğru, sayfa taşması 0) ama
	   dokunmatikte kaydırma çubuğu görünmediği için son sütun sessizce kesik
	   duruyor — kullanıcı "sığmıyor" diye okuyor, kaydırılabileceğini anlamıyor.
	   Aşağıdaki dört katman klasik "gölge" tekniği: `local` katmanlar içerikle
	   birlikte kayar, `scroll` katmanlar kapta sabit kalır — gölge YALNIZ o yönde
	   görülmemiş içerik varken çıkar, tablo sığıyorsa hiç görünmez.
	   ⚠ `background-attachment` sırası dört katmanla birebir eşleşmeli. */
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(43, 29, 22, .30), rgba(43, 29, 22, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(43, 29, 22, .30), rgba(43, 29, 22, 0)) right center;
	background-repeat: no-repeat;
	/* ⚠ Opaklık ve genişlik EKRAN GÖRÜNTÜSÜYLE seçildi: .16/15px ölçüldüğünde
	   gölge 390px'te gözle fark edilmiyordu (özellikle krem zeminli başlık
	   satırında). Değiştirirsen yeniden bak — bu sayılar tahmin değil. */
	background-size: 34px 100%, 34px 100%, 22px 100%, 22px 100%;
	background-attachment: local, local, scroll, scroll;
}
.single-post .entry-content table thead th,
.single-post .entry-content table tr:first-child th {
	background: var(--zbx-krem);
	color: var(--zbx-espresso);
	text-align: left;
}
.single-post .entry-content table th,
.single-post .entry-content table td {
	border-bottom: 1px solid #f1ece4;
	padding: 10px 12px;
	white-space: normal;
}

/* Mobilde tabloyu SIĞDIRMAYA çalış — kaydırma son çare olsun (2026-08-24).
   Ölçüm (360/390px): 3 sütunlu tablolar zaten sığıyordu, taşanlar 4-5
   sütunlular (içerik 391-469px). Yazı 15 → 14px ve hücre payı 12 → 9px
   ile bu tabloların bir kısmı kaydırma gerektirmeden sığıyor.
   ⛔ 14px TABANDIR, altına inme — mobil UX kuralı 3: gövde metni en az 14px.
   Sığmayanlar için yukarıdaki gölge göstergesi devrede kalır. */
@media (max-width: 767px) {
	.single-post .entry-content table { font-size: 14px; }
	.single-post .entry-content table th,
	.single-post .entry-content table td { padding: 9px; }
}

/* Kesin cevap kutusu (AEO) — KURAL ÇEKİRDEĞE TAŞINDI (2026-09-16).
   Seçici ve bildirimlerin tamamı `stil.css` sonundaki "KESİN CEVAP KUTUSU"
   bloğunda. Sebep: kutu artık kategori arşivinde, ana sayfanın SEO bloğunda
   ve kurumsal sayfalarda da basılıyor; bu dosya oralarda YÜKLENMİYOR
   (kural 20) ve kural burada kalırsa kutu sessizce stilsiz kalıyor.
   ⛔ Buraya ikinci bir kopya YAZMA — iki dosya ayrı düşerse hiçbir tarayıcı
   yakalamaz (kural 47). */


/* ---- SSS akordeonu (JS h3'leri butonlaştırır) ----
   Tüm öğeler `.bb-sss` sarmalayıcısının içinde yaşar; sarmalayıcı blok olduğu
   için WordPress `is-layout-constrained` sütununu (h2/p ile aynı) alır.
   ⚠ Butonlar doğrudan `.entry-content` çocuğu yapılırsa inline-block oldukları
   için o sütunu ALMAZ, tam genişliğe yayılıp içindekiler kutusuna binerler. */
.bb-sss { border-bottom: 1px solid var(--zbx-cizgi); }
.bb-sss-soru {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-top: 1px solid var(--zbx-cizgi);
	padding: 14px 34px 14px 2px;
	font-size: 17px;
	font-weight: 600;
	color: var(--zbx-espresso);
	cursor: pointer;
	position: relative;
	margin: 0;
}
.bb-sss-soru::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--zbx-bakir);
	border-bottom: 2px solid var(--zbx-bakir);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s;
}
.bb-sss-soru[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.bb-sss-cevap[hidden] { display: none; }
.bb-sss-cevap { padding: 0 2px 14px; }

/* ---- Ürün CTA ---- */
/* ⛔ BLOG ALTI BLOKLARI YAZI GÖVDESİYLE AYNI KABA HİZALANIR (2026-08-24).
   `bb_blog_tekil_alt()` bu üç bloğu `blocksy:single:content:bottom` ile
   `.entry-content`'in DIŞINDA, `<article>` seviyesinde basıyor; oysa gövde
   `.entry-content.is-layout-constrained` içinde ve her çocuğu Blocksy'nin
   dar kap ölçüsünü alıyor. Sınır verilmediği için bloklar sayfanın tamamına
   yayılıyordu — ölçüldü: 1440px'te gövde 750px/sol 345, bloklar 1440px/sol 0;
   360px'te gövde 317px/sol 22, bloklar 360px/sol 0 (kenara tam yapışık).
   ⚠ Sabit `750px` YAZMA — ölçü temanın kendi değişkenlerinden okunuyor
   (`--theme-container-width` = min(100%, edge-spacing), `--theme-narrow-…`),
   böylece Blocksy ayarı değişirse gövdeyle birlikte kayar. `.ct-container-narrow`
   ile birebir aynı hesap. */
.bb-cta,
.bb-yazar,
.bb-ilgili {
	width: var(--theme-container-width, 100%);
	max-width: var(--theme-narrow-container-max-width, 750px);
	margin-inline: auto;
}
.bb-cta {
	background: var(--zbx-krem);
	border: 1px solid var(--zbx-kum);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 34px auto 0;
	clear: both;
}
.bb-cta-baslik {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--zbx-bakir-koyu);
	margin: 0 0 6px;
}
.bb-cta-metin { margin: 0 0 14px; color: #4a423a; }
.bb-cta-buton {
	display: inline-block;
	background: var(--zbx-bakir);
	color: #fff !important;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 14.5px;
	font-weight: 600;
}
.bb-cta-buton:hover { background: var(--zbx-bakir-koyu); }

/* ---- Yazar kutusu ---- */
.bb-yazar {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border: 1px solid var(--zbx-cizgi);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 22px auto 0;
}
.bb-yazar-monogram {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--zbx-espresso);
	color: var(--zbx-krem);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
}
/* Yazar avatarı: Next GEO Agency logosu (medya 6953, snippet 6841).
   Ölçüler monogramla birebir aynı — logo yüklenemezse monogram fallback'i
   devreye giriyor ve kutu düzeni kaymıyor. */
.bb-yazar-logo {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}
.bb-yazar-ad { margin: 0 0 4px; font-weight: 700; font-size: 15.5px; }
.bb-yazar-ad a { color: var(--zbx-espresso); }
.bb-yazar-bio { margin: 0; font-size: 14px; color: #6b6b6b; }

/* ---- İlgili yazılar ---- */
.bb-ilgili { margin: 30px auto 0; clear: both; }
.bb-ilgili-baslik { font-size: 20px; margin: 0 0 14px; color: var(--zbx-espresso); }
.bb-ilgili-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.bb-ilgili-kart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--zbx-cizgi);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
}
.bb-ilgili-kart:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(43, 29, 22, .10);
}
/* Arşiv kartlarıyla aynı davranış (2026-08-08): `cover` görseli çerçeveye
   sığdırmak yerine kırpıyordu — yatay mutfak fotoğraflarının üstü/altı,
   dikey ürün çekimlerinin kenarları gidiyordu. `contain` + krem zemin: görsel
   tam görünür, kart yüksekliği `aspect-ratio` ile sabit kaldığı için grid
   hizası bozulmaz. */
.bb-ilgili-kart img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	object-position: center center;
	background: var(--zbx-krem);
	padding: 8px;
}
.bb-kart-fallback-kucuk span { font-size: 34px; }
.bb-ilgili-ad {
	padding: 10px 12px 2px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zbx-espresso);
}
.bb-ilgili-dk { padding: 0 12px 12px; font-size: 12.5px; color: #8a8178; }
@media (max-width: 767px) {
	.bb-ilgili-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   BAKIR FİYATI PANOSU (2026-08-10)
   ------------------------------------------------------------------
   [bakir_fiyat_paneli] shortcode çıktısı — bkz. bakirbul-custom.php
   zbx_bakir_panel_shortcode() / zbx_bakir_svg().

   Tasarım kararı: sayfa gövdesi krem/açık, pano KOYU. Bu tonal kırılma
   bilinçli — panel yazının içindeki bir grafik gibi değil, ayrı bir veri
   tahtası gibi okunmalı. Rakamlar tabular monospace (borsa tape hissi).

   ⛔ Bakır rengi (#B87333 / #A05F28) burada KULLANILMAZ.
   Zemin #1C1512 footer zemini, artış #cf3700 aksiyon, düşüş #005f93.
------------------------------------------------------------------ */
.zbx-tahta {
	--tahta-krem: #F7F1E8;
	--tahta-kum: #D9C3A5;
	background: #1C1512;
	border-radius: 12px;
	margin: 28px 0;
	overflow: hidden;
	color: var(--tahta-krem);
}
.zbx-tahta-ust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 18px;
	background: #2B1D16;
	border-bottom: 1px solid rgba(217, 195, 165, 0.18);
}
.zbx-tahta-baslik {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tahta-kum);
}
.zbx-tahta-zaman {
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	color: rgba(217, 195, 165, 0.75);
	font-variant-numeric: tabular-nums;
}
.zbx-tahta-ana {
	padding: 22px 18px 14px;
}
.zbx-tahta-birim {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(217, 195, 165, 0.7);
}
.zbx-tahta-fiyat {
	margin: 4px 0 0;
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: clamp(2.6rem, 11vw, 4.1rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--tahta-krem);
	font-variant-numeric: tabular-nums;
}
.zbx-tahta-para {
	font-size: 0.42em;
	margin-left: 0.22em;
	color: var(--tahta-kum);
	letter-spacing: 0;
}
.zbx-tahta-degisim {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.zbx-tahta-degisim--artis {
	background: rgba(207, 55, 0, 0.16);
	color: #ff7a4d;
}
.zbx-tahta-degisim--dusus {
	background: rgba(0, 95, 147, 0.22);
	color: #7cc0e8;
}
.zbx-tahta-grafik {
	aspect-ratio: 720 / 220;
	width: 100%;
	padding: 0 6px;
}
.zbx-tahta-grafik svg {
	display: block;
	width: 100%;
	height: 100%;
}
.zbx-tahta-eksen {
	display: flex;
	justify-content: space-between;
	padding: 6px 18px 14px;
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	color: rgba(217, 195, 165, 0.65);
	font-variant-numeric: tabular-nums;
}
.zbx-tahta-satir {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid rgba(217, 195, 165, 0.18);
}
@media (min-width: 640px) {
	.zbx-tahta-satir {
		grid-template-columns: repeat(4, 1fr);
	}
}
.zbx-tahta-hucre {
	padding: 12px 18px;
	border-top: 1px solid rgba(217, 195, 165, 0.1);
	border-right: 1px solid rgba(217, 195, 165, 0.1);
}
.zbx-tahta-hucre:nth-child(-n + 2) {
	border-top: 0;
}
@media (min-width: 640px) {
	.zbx-tahta-hucre {
		border-top: 0;
	}
	.zbx-tahta-hucre:last-child {
		border-right: 0;
	}
}
.zbx-tahta-etiket {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(217, 195, 165, 0.65);
}
.zbx-tahta-deger {
	display: block;
	margin-top: 3px;
	font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 15px;
	color: var(--tahta-krem);
	font-variant-numeric: tabular-nums;
}
.zbx-tahta-uyari {
	margin: 0;
	padding: 10px 18px;
	background: rgba(140, 47, 27, 0.35);
	color: #f3d3c9;
	font-size: 13px;
	border-top: 1px solid rgba(217, 195, 165, 0.18);
}
.zbx-tahta-alt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 18px 16px;
	border-top: 1px solid rgba(217, 195, 165, 0.18);
	font-size: 11.5px;
	line-height: 1.55;
	color: rgba(217, 195, 165, 0.7);
}


/* ==========================================================================
   TOPTAN HUB (/toptan-satis/) — 2026-08-11 tasarım turu
   Sayfanın işi tek: ziyaretçiyi doğru alt sayfaya götürmek. O yüzden kahraman
   büyük bir rakam değil, yönlendirmenin kendisi.

   İMZA — ÇEKİÇ İZİ: dövme bakırın yüzeyi çekiç darbeleriyle çukurlanır. Kart
   zeminlerindeki döşeli çukur dokusu bunu taklit ediyor; iki farklı karo boyu
   kullanıldı ki düzenli bir ızgara gibi okunmasın (çekiç izi düzenli değildir).
   Marka kuralı arayüzde bakır rengini yasakladığı için malzemenin kimliğini
   renk değil DOKU taşıyor.

   GRADYAN AİLESİ = TAKSONOMİ, süs değil: her grup ayrı zemin alıyor, ziyaretçi
   hangi eksende gezindiğini renkten anlıyor. Kart biçimi/tipografisi/boşluğu
   dört grupta da aynı — çeşitlilik gürültü değil bilgi.

   Düzen tamamen CSS. Hiçbir blok JS ile taşınmıyor (CLS kuralı).
   ========================================================================== */
.zbx-hub {
	/* İMZA — YATIK IŞIK + seyrek çekiç izi.
	   İlk iki denemede doku döşeli nokta ızgarasıydı; canlıda hasır/kumaş gibi
	   okundu. Sebep alfa değil DÜZEN: iki düzenli ızgara üst üste binince moiré
	   yapıyor, oysa gerçek çekiç izi düzensizdir. Nokta tarlası söküldü.

	   Yerine metalin gerçekte yaptığı şey: dövülmüş bir yüzey ışığı tek noktadan
	   toplamaz, yatık bir parlama hâlinde dağıtır. Sol üstten düşen geniş elips
	   bunu veriyor. Çekiç izi olarak yalnız çok seyrek iki karo kaldı — karo
	   boyları aralarında asal (61/83px) olduğu için desen neredeyse hiç
	   tekrarlamıyor ve ızgara gibi okunmuyor. */
	--parlama-acik: radial-gradient(ellipse 130% 90% at 10% -25%, rgba(255, 255, 255, 0.72), transparent 62%);
	--parlama-koyu: radial-gradient(ellipse 130% 90% at 10% -25%, rgba(247, 241, 232, 0.11), transparent 60%);
	--cekic-acik:
		radial-gradient(circle at 24% 30%, rgba(43, 29, 22, 0.03) 0 6%, transparent 7%),
		radial-gradient(circle at 68% 74%, rgba(43, 29, 22, 0.022) 0 5%, transparent 6%);
	--cekic-koyu:
		radial-gradient(circle at 24% 30%, rgba(247, 241, 232, 0.05) 0 6%, transparent 7%),
		radial-gradient(circle at 68% 74%, rgba(247, 241, 232, 0.032) 0 5%, transparent 6%);
	--cekic-karo: 61px 61px, 83px 83px;
	margin: 0 0 8px;
}
.zbx-hub > * + * {
	margin-top: 44px;
}

/* -------- giriş -------- */
.zbx-hub-etiket,
.zbx-hub-eksen {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zbx-aksiyon);
}
.zbx-hub-baslik {
	margin: 0 0 14px;
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--zbx-espresso);
}
.zbx-hub-spot {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.62;
	color: #5b4a3f;
}
.zbx-hub-aksiyon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.zbx-hub-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	border: 1px solid var(--zbx-kum);
	border-radius: 8px;
	background: #fff;
	color: var(--zbx-espresso);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.16s ease, color 0.16s ease;
}
.zbx-hub-btn:hover,
.zbx-hub-btn:focus-visible {
	border-color: var(--zbx-aksiyon);
	color: var(--zbx-aksiyon);
	text-decoration: none;
}
.zbx-hub-btn--ana {
	border-color: var(--zbx-aksiyon);
	background: var(--zbx-aksiyon);
	color: #fff;
}
.zbx-hub-btn--ana:hover,
.zbx-hub-btn--ana:focus-visible {
	background: var(--zbx-aksiyon-koyu);
	border-color: var(--zbx-aksiyon-koyu);
	color: #fff;
}
.zbx-hub-not {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: #6b5b50;
}

/* -------- sözler şeridi: kart değil, düz sütunlar. Kartlar aşağıda başlasın. -------- */
.zbx-hub-sozler {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 28px;
	padding: 24px 0 0;
	border-top: 1px solid var(--zbx-kart-cizgi);
}
@media (min-width: 700px) {
	.zbx-hub-sozler {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1040px) {
	.zbx-hub-sozler {
		grid-template-columns: repeat(4, 1fr);
	}
}
.zbx-soz-baslik {
	margin: 0 0 5px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--zbx-espresso);
}
.zbx-soz-metin {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #6b5b50;
}

/* -------- hub gövde metni + SSS (2026-08-14) --------
   Hub, altındaki 15 açılış sayfasının hepsinden kısaydı. Gövde metni, teklif
   formu ve SSS eklendi; SSS aynı zamanda FAQPage şemasının kaynağı.

   ⚠ Başlık boyutu `--theme-font-size` DEĞİŞKENİ üzerinden veriliyor, `font-size`
   ile değil (CLAUDE.md mobil kural 1): Blocksy boyutu `body,h1..h6 { font-size:
   var(--theme-font-size) }` ile kuruyor, değişkeni ezmek yükleme sırasından
   bağımsız kazanıyor. Üst sınır = masaüstü değeri, vw katsayısı tam 768px'te
   üst sınıra ulaşıyor — tablet ve masaüstü görünümü değişmiyor. */
.zbx-hub-metin h2,
.zbx-hub-toptanci h2,
.zbx-hub-uretici h2,
.zbx-hub-teklif h2,
.zbx-hub-sss h2 {
	--theme-font-size: clamp(21px, 3.39vw, 26px);
	margin: 0 0 16px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--zbx-espresso);
}
/* ⚠ Toptancı bölümü 2026-09-10'da eklendi ama CSS'e HİÇ girmemişti: h2 tema
   varsayılanıyla, paragraflar 72ch sınırı ve gövde rengi olmadan basılıyordu.
   2026-09-16'da üretici bölümüyle birlikte gövde metniyle aynı ölçeğe alındı. */
.zbx-hub-metin p,
.zbx-hub-toptanci p,
.zbx-hub-uretici p {
	max-width: 72ch;
	margin: 0 0 14px;
	font-size: clamp(15px, 1.4vw, 16.5px);
	line-height: 1.7;
	color: #4a3b2f;
}
.zbx-hub-metin p:last-child,
.zbx-hub-toptanci p:last-child,
.zbx-hub-uretici p:last-child {
	margin-bottom: 0;
}

/* Bu iki bölümün h3'leri SSS'inkiyle aynı ritmi taşıyor; ayrı ölçek yazmak
   sayfada üçüncü bir başlık boyutu üretirdi. */
.zbx-hub-toptanci h3,
.zbx-hub-uretici h3 {
	--theme-font-size: clamp(16.5px, 2.47vw, 19px);
	margin: 22px 0 7px;
	line-height: 1.35;
	color: var(--zbx-espresso);
}

.zbx-hub-sss {
	padding-top: 24px;
	border-top: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
}
.zbx-hub-sss h3 {
	--theme-font-size: clamp(16.5px, 2.47vw, 19px);
	margin: 22px 0 7px;
	line-height: 1.35;
	color: var(--zbx-espresso);
}
.zbx-hub-sss h3:first-of-type {
	margin-top: 0;
}
.zbx-hub-sss p {
	max-width: 72ch;
	margin: 0;
	font-size: clamp(14.5px, 1.35vw, 16px);
	line-height: 1.68;
	color: #4a3b2f;
}

/* Teklif kutusu hub'da: `.zbx-lp-teklif` ile aynı çerçeveyi kullanıyor (ayrı kart
   CSS'i yazılmıyor). Tek fark, hub'ın kendi 44px dikey ritmi zaten boşluğu
   verdiği için kutunun kendi dış boşluğu sıfırlanıyor. */
.zbx-hub-teklif.zbx-lp-teklif {
	margin: 0;
}
.zbx-hub-teklif > p {
	max-width: 72ch;
	font-size: clamp(14.5px, 1.35vw, 16px);
	line-height: 1.68;
	color: #4a3b2f;
}


/* ===========================================================================
   BAKIR İMALATÇILARI AÇILIŞ SAYFASI (2026-08-13)
   Kapsam bilerek `.zbx-lp-imalat` ile sınırlı: aynı sınıf adları `/toptan-satis/`
   hub'ında da geçiyor ve hub'ın yapısı 2026-08-13 kullanıcı kararıyla sabitlendi.
   Buradaki hiçbir kural hub'a sızmamalı.
   =========================================================================== */

/* -------- taahhüt kartları --------
   Düz sütunlar yavan duruyordu ve altı madde 4'lü ızgarada 4+2 diye kırılıyordu.
   Üçlü ızgara altı maddeyi iki tam satıra oturtuyor. */
.zbx-lp-imalat .zbx-hub-sozler {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 24px 0 0;
	border-top: 1px solid var(--zbx-kart-cizgi);
}
@media (min-width: 620px) {
	.zbx-lp-imalat .zbx-hub-sozler { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.zbx-lp-imalat .zbx-hub-sozler { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.zbx-lp-imalat .zbx-soz {
	padding: 20px;
	border: 1px solid var(--zbx-kart-cizgi);
	border-radius: 14px;
	background: #fff;
	/* Sol kenar şeridi: kartı süslemek için değil, altı kartı tek aileye bağlamak
	   için. Renk aksiyon değil kum — burada tıklanacak bir şey yok. */
	border-left: 3px solid var(--zbx-kum);
}
.zbx-lp-imalat .zbx-soz-baslik {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--zbx-espresso);
}
.zbx-lp-imalat .zbx-soz-metin {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4a3b2f;
}

/* -------- süreç adımları: numaralı kartlar --------
   ⚠ Metin hizası açıkça `left`: tema `ol > li` içeriğini ortalıyor ve dört
   satırlık paragraflar ortalı halde okuma temposunu bozuyordu (canlıda görüldü).
   Numara rozeti kartın içinde, başlığın üstünde — sırayı okumadan önce görüyorsun.

   ⛔ KAPSAM 2026-09-15'te `.zbx-surec-serit` ile GENİŞLETİLDİ, `.zbx-lp-imalat`
   ÇIPLAK BIRAKILMADI. Sebep bu bölümün başlığında yazılı: aynı sınıf adları
   `/toptan-satis/` hub'ında da geçiyor ve hub'ın yapısı 2026-08-13 kullanıcı
   kararıyla sabitlendi. Bu yüzden şerit KENDİ sarmalayıcı sınıfını taşıyor ve
   seçici `:is()` ile iki kapsamı birden sayıyor — hub'da `.zbx-surec-serit`
   olmadığı için oraya hiçbir kural sızmaz. Yeni bir sayfaya şerit koyarken
   sarmalayıcıya `zbx-surec-serit` yaz; buradaki seçicileri gevşetme.
   Kullanan: `/bakir-imalatcilari/` · `/toptan-satis/ozel-uretim/` ·
   `/en/custom-copper-manufacturing/` · `/de/sonderanfertigung-kupfer/`

   ⚠ Izgara 1000px'te `repeat(4, 1fr)`; İngilizce ve Almanca sayfalarda beş adım
   var ve beşincisi ikinci satıra tek başına düşüyor. Bu bilinçli: beş sütun
   360px'te kartı okunmaz daraltırdı. Beş adımlı sayfalarda ızgara
   `repeat(auto-fit, …)` YAPILMAZ (kural 54: auto-fit kabı doldurmuyor). */
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-hub-surec {
	padding-top: 24px;
	border-top: 1px solid var(--zbx-kart-cizgi);
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adimlar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 620px) {
	:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adimlar { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adimlar { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
/* Beş adımlı şerit (İngilizce/Almanca özel üretim sayfaları): dörtlü ızgarada
   beşinci kart ikinci satırda tek başına kalıyor ve sağında üç boş hücre
   duruyordu — kural 54'ün "şerit ızgarası kabı doldurur" ölçütünün aynısı.
   Sütun sayısı yine SABİT yazılıyor (auto-fit kabı doldurmuyor), yalnız
   kart sayısına göre seçiliyor. 1200px altında beşe bölmek kartı okunmaz
   daraltır, orada dört + bir düzeni kalıyor. */
@media (min-width: 1200px) {
	:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adimlar:has(> :nth-child(5)) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	/* Altı ve üzeri adım olursa beşliye zorlanmaz; dörtlüye geri döner. */
	:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adimlar:has(> :nth-child(6)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim {
	display: block;
	margin: 0;
	padding: 20px;
	text-align: left;
	border: 1px solid var(--zbx-kart-cizgi);
	border-radius: 14px;
	background: var(--zbx-krem);
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim::marker { content: none; }
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--zbx-aksiyon);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim-ic {
	display: block;
	text-align: left;
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim-baslik {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--zbx-espresso);
}
:is(.zbx-lp-imalat, .zbx-surec-serit) .zbx-lp-adim-metin {
	display: block;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4a3b2f;
}

/* -------- açılış sayfası tipografisi: her cihazda okunur --------
   Mobil gövde alt sınırı 14px (CLAUDE.md mobil kuralı 3). Ölçek clamp ile
   kuruluyor, sabit px yazılmıyor (kural 1). */
.zbx-lp-imalat .zbx-hub-spot {
	max-width: 68ch;
	font-size: clamp(15.5px, 1.5vw, 17.5px);
	line-height: 1.65;
	color: #4a3b2f;
}
.zbx-lp-imalat .zbx-hub-grup-metin,
.zbx-lp-imalat .zbx-hub-not {
	font-size: clamp(14.5px, 1.3vw, 15.5px);
	line-height: 1.6;
}
.zbx-lp-imalat .zbx-kart-ozet {
	font-size: 14.5px;
	line-height: 1.55;
}
/* Bölüm etiketi ("SÜREÇ", "ÇALIŞMA KOŞULLARI") hub'da 11px. Bu sayfada 13px:
   ikincil metin alt sınırı (CLAUDE.md mobil kuralı 3). Harf aralığı korunuyor,
   büyük harf düzeni değişmiyor — yalnız okunur hale geliyor. */
.zbx-lp-imalat .zbx-hub-eksen {
	font-size: 13px;
}
/* ⚠ Taban 19px: bunlar <h3> ve mobil denetimi 360px'te h3 için 20px tavan
   uyguluyor (CLAUDE.md mobil kuralı 1). 21px taban 6 sayfa bölümünde birden
   HATA veriyordu. Üst sınır masaüstü görünümünü değiştirmiyor. */
.zbx-lp-imalat .zbx-hub-grup-baslik {
	font-size: clamp(19px, 2.4vw, 26px);
}
/* -------- çalışma koşulları: tek çerçeve içinde künye satırları --------
   Üstteki iki blok kart IZGARASI. Bunu da ızgara yapmak sayfayı monotonlaştırırdı;
   burada tek bir kap kartı var, satırlar içeride ince ayraçla bölünüyor — teknik
   künye hissi. Mobilde terim, değerin üstünde küçük etiket olarak duruyor. */
.zbx-lp-imalat .zbx-kosul-liste {
	border: 1px solid var(--zbx-kart-cizgi);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.zbx-lp-imalat .zbx-kosul-satir {
	gap: 6px 28px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--zbx-cizgi, #f1ece4);
}
@media (min-width: 768px) {
	.zbx-lp-imalat .zbx-kosul-satir {
		grid-template-columns: 210px 1fr;
		padding: 20px 24px;
	}
}
.zbx-lp-imalat .zbx-kosul-satir:last-child { border-bottom: 0; }
.zbx-lp-imalat .zbx-kosul-ad {
	font-size: 15.5px;
	line-height: 1.35;
	color: var(--zbx-espresso);
}
.zbx-lp-imalat .zbx-kosul-metin {
	font-size: 15px;
	line-height: 1.65;
	color: #4a3b2f;
}
/* Mobilde terim bir başlık değil, üstte duran KÜNYE ETİKETİ — büyük harf ve
   harf aralığı, değerden ayrışsın diye. Masaüstünde sütun zaten ayırıyor. */
@media (max-width: 767px) {
	.zbx-lp-imalat .zbx-kosul-ad {
		margin-bottom: 2px;
		font-size: 13px; /* ikincil metin alt sınırı — 12,5px denetimde uyarı veriyordu */
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--zbx-aksiyon);
	}
}
/* SSS gövdesi — tema varsayılanı mobilde 14px'in altına inebiliyor. */
.zbx-lp-imalat + h2,
.page .entry-content .zbx-lp-imalat ~ h3 { color: var(--zbx-espresso); }
.page .entry-content .zbx-lp-imalat ~ p {
	font-size: clamp(15px, 1.4vw, 16.5px);
	line-height: 1.7;
	color: #4a3b2f;
}

/* -------- çalışma koşulları: tanım listesi --------
   Soru-cevap değil tanım listesi; SSS aşağıda ayrıca var ve ikisi aynı görünürse
   sayfa kendini tekrar ediyormuş gibi okunuyor. Burada terim solda, karşılığı sağda. */
.zbx-hub-kosul {
	padding-top: 24px;
	border-top: 1px solid var(--zbx-kart-cizgi);
}
.zbx-kosul-liste { margin: 0; }
.zbx-kosul-satir {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--zbx-cizgi, #f1ece4);
}
.zbx-kosul-satir:last-child { border-bottom: 0; }
@media (min-width: 768px) {
	.zbx-kosul-satir { grid-template-columns: 220px 1fr; }
}
.zbx-kosul-ad {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zbx-espresso);
}
.zbx-kosul-metin {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4a3b2f;
}

/* -------- teklif formu bölümü -------- */
.zbx-hub-form {
	padding-top: 24px;
	border-top: 1px solid var(--zbx-kart-cizgi);
	scroll-margin-top: 90px; /* sabit başlık formu örtmesin */
}

/* -------- grup başlıkları -------- */
.zbx-hub-grup-ust {
	max-width: 60ch;
	margin-bottom: 18px;
}
.zbx-hub-grup-baslik {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--zbx-espresso);
}
.zbx-hub-grup-metin {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #6b5b50;
}

/* -------- ürün grubu alt başlığı (2026-09-20) --------
   Toptan × kategori turunda ürün kartı sayısı 7'den 32'ye çıktı; düz ızgarada
   ziyaretçi nerede olduğunu kaybediyordu. Kartlar ana kategoriye göre bölündü.
   ⚠ Başlık H4: grup başlığı zaten H3 ve atlama yapılmamalı (kural 23'ün
     "H1'den H4'e atlama" dersi). Görsel ağırlığı grup başlığının ALTINDA
     kalıyor — o hiyerarşiyi tersine çevirme.
   ⚠ İlk alt başlığın üst boşluğu yok: hemen üstünde grup açıklaması var. */
.zbx-hub-alt-baslik {
	margin: 26px 0 12px;
	font-size: clamp(15px, 1.5vw, 17px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: #6b5b50;
	text-transform: uppercase;
}
.zbx-hub-alt-baslik:first-of-type {
	margin-top: 0;
}

/* -------- kart ızgarası -------- */
.zbx-hub-izgara {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 620px) {
	.zbx-hub-izgara {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.zbx-hub-izgara {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------- kart -------- */
.zbx-hub .zbx-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 168px;
	padding: 20px;
	border: 1px solid var(--zbx-kart-cizgi);
	border-radius: 14px;
	background-size: var(--cekic-karo), cover, cover;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.zbx-hub .zbx-kart:hover,
.zbx-hub .zbx-kart:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(43, 29, 22, 0.14);
	text-decoration: none;
}
.zbx-hub .zbx-kart:focus-visible {
	outline: 2px solid var(--zbx-aksiyon);
	outline-offset: 3px;
}
.zbx-kart-baslik {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.005em;
}
.zbx-kart-ozet {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
}
/* Çağrı — GÖRSEL öge, gerçek buton değil. Kart zaten bağlantı; içine ikinci
   tıklanabilir öge koymak iç içe etkileşim yaratırdı. Tek başına ok işareti
   "devamı var" mesajını yeterince vermiyordu (kullanıcı geri bildirimi). */
.zbx-kart-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 14px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.zbx-kart-ok {
	flex: none;
	transition: transform 0.16s ease;
}
.zbx-hub .zbx-kart:hover .zbx-kart-ok,
.zbx-hub .zbx-kart:focus-visible .zbx-kart-ok {
	transform: translateX(3px);
}
.zbx-kart-ozet {
	margin-bottom: 16px;
}

/* -------- zemin merdiveni: hangi eksende gezindiğini DEĞER söylüyor --------

   2026-08-11 kullanıcı kararı: dört zemin tek bir turuncu üzerinde açılan
   dört basamak (#ffaa66 → #ffbf8b → #ffd4b1 → #ffead8). Önceki kurgu dört
   AYRI renk kullanıyordu (altın / espresso / aksiyon kırmızısı / taş);
   yerine kontrollü bir merdiven geldi.

   Dördü de açık zemin olduğu için metin rengi tek yerde tanımlanıyor —
   grup bloklarında yalnız zemin ve çağrı butonunun dolgu yazı rengi değişiyor.
   Espresso başlık en koyu basamakta bile 8.5:1, gövde metni 5.6:1 (WCAG AA). */
.zbx-hub .zbx-kart {
	border-color: rgba(43, 29, 22, 0.18);
	background-image: var(--cekic-acik), var(--parlama-acik), var(--zbx-kart-zemin);
}
.zbx-kart-baslik {
	color: var(--zbx-espresso);
}
.zbx-kart-ozet {
	/* #4a3b2f ilk denemeydi; merdivenin en koyu köşesinde (#f2913f) 4,54:1 ile
	   AA sınırına yapışıyordu. Bir basamak koyulaştırıldı → en kötü hâlde 5,3:1. */
	color: #3f3125;
}
.zbx-kart-cta {
	color: var(--zbx-espresso);
}
.zbx-hub .zbx-kart:hover .zbx-kart-cta,
.zbx-hub .zbx-kart:focus-visible .zbx-kart-cta {
	background: var(--zbx-espresso);
	color: var(--zbx-kart-cta-yazi);
}

/* Ürüne göre — merdivenin en koyu basamağı, en çok kart burada. */
.zbx-hub-grup--urun {
	--zbx-kart-zemin: linear-gradient(158deg, #ffc48f 0%, var(--zbx-kart-1) 52%, #f2913f 100%);
	--zbx-kart-cta-yazi: #ffd9b8;
}

/* İşletmeye göre */
.zbx-hub-grup--persona {
	--zbx-kart-zemin: linear-gradient(158deg, #ffd6b4 0%, var(--zbx-kart-2) 52%, #f5a465 100%);
	--zbx-kart-cta-yazi: #ffe3cc;
}

/* Üretime göre — tek kart, ızgara tam genişlik. */
.zbx-hub-grup--ozel {
	--zbx-kart-zemin: linear-gradient(122deg, #ffe6cf 0%, var(--zbx-kart-3) 52%, #f7bd91 100%);
	--zbx-kart-cta-yazi: #ffead8;
}
.zbx-hub-grup--ozel .zbx-hub-izgara {
	grid-template-columns: 1fr;
}
.zbx-hub-grup--ozel .zbx-kart {
	min-height: 0;
}
.zbx-hub-grup--ozel .zbx-kart-baslik {
	font-size: 20px;
}
.zbx-hub-grup--ozel .zbx-kart-ozet {
	max-width: 64ch;
}

/* Yöreye göre — merdivenin en açık basamağı. */
.zbx-hub-grup--yore {
	--zbx-kart-zemin: linear-gradient(158deg, #fff5ec 0%, var(--zbx-kart-4) 52%, #f8d6bc 100%);
	--zbx-kart-cta-yazi: #fff5ec;
}

@media (prefers-reduced-motion: reduce) {
	.zbx-hub .zbx-kart,
	.zbx-kart-ok,
	.zbx-kart-cta,
	.zbx-hub-btn {
		transition: none;
	}
	.zbx-hub .zbx-kart:hover,
	.zbx-hub .zbx-kart:focus-visible {
		transform: none;
	}
	.zbx-hub .zbx-kart:hover .zbx-kart-ok,
	.zbx-hub .zbx-kart:focus-visible .zbx-kart-ok {
		transform: none;
	}
}



/* ==========================================================================
   BLOG GÖVDESİ — liste maddesi içindeki bağlantının dokunma alanı (2026-08-26)
   --------------------------------------------------------------------------
   Gövde metnindeki satır içi bağlantılar 22px yüksekliğinde ölçülüyor ve
   `denetim.mjs` bunların çoğunu "paragraf içi metin linki" sayıp muaf tutuyor.
   Muafiyetin koşulu, bağlantının satır içi ebeveyninden en az 4 karakter KISA
   olmasıdır. Liste maddesi başındaki terim bu koşulu tutmaz:

       <li><strong><a>Bakır bileklik</a>:</strong> açıklama…</li>

   `<strong>` yalnız bağlantı + iki nokta taşır, muafiyet düşer ve 22px HATA olur.
   ⚠ Bu şekil ELLE YAZILMADI — iç linkleme motoru (snippet 6878) çalışma anında
   üretiyor. Motor 2026-08-25'te onarıldığı için 80 yazıda tekrar edebilir;
   tek bir yazıyı düzeltmek çözüm değildi.

   ⛔ Kutu BÜYÜTÜLMEZ, `min-height` + `inline-flex` YAZILMAZ: liste bağlantısı
   uzun olabilir ve atomik satır içi kutuya dönerse satır kırılması bozulur,
   dar ekranda yatay taşma üretir. Mobil UX kuralı 2'nin görünmez `::after`
   yöntemi kullanılır — düzen değişmez, dokunma alanı 22 → 32px olur.
   (`denetim.mjs::etkinKutu` mutlak konumlu `::after` payını okuyor.)
   ========================================================================== */
.single-post .entry-content li a { position: relative; }
.single-post .entry-content li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -5px;
	bottom: -5px;
}


/* ==========================================================================
   DİL KATMANI — dil geçiş satırı + yabancı dil sayfası düzeni (2026-08-26)
   --------------------------------------------------------------------------
   Amaç: yurt dışından toptan alıcı. Yabancı dil tarafında sepet/ödeme YOK,
   teklif akışı var — bu yüzden Türkçe mağaza donanımının BİR KISMI bilerek
   gizleniyor. Gizleme kararı gövde sınıfına bağlı: `body.zbx-dil`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Görselli kart — `.zbx-kart--gorsel`
   İngilizce sayfa Türkçe toptan hub'ının bileşen sözlüğünü kullanıyor
   (`.zbx-hub`, `.zbx-soz`, `.zbx-hub-izgara`, `.zbx-kart`); tek eksik kartın
   içine ürün fotoğrafı koyabilmekti. İlk sürüm düz paragraf yığınıydı ve
   "çok basit, çok sığ duruyor" geri bildirimini aldı — haklıydı.

   ⚠ `width`/`height` HTML'de veriliyor ve burada `aspect-ratio` ile sabitleniyor:
   ölçüsüz görsel `denetim.mjs`te `gorsel_olcusuz` uyarısı ve CLS riski demek.
   -------------------------------------------------------------------------- */
.zbx-hub .zbx-kart--gorsel { padding: 0; }
.zbx-kart-gorsel {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;          /* fotoğraflar beyaz fonlu — kart zemini sızmasın */
	border-bottom: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
}
.zbx-kart-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;       /* ⛔ `cover` DEĞİL: ürünün kenarını kırpar */
	display: block;
}
.zbx-hub .zbx-kart--gorsel .zbx-kart-baslik { margin: 16px 18px 7px; }
.zbx-hub .zbx-kart--gorsel .zbx-kart-ozet   { margin: 0 18px 16px; }
.zbx-hub .zbx-kart--gorsel .zbx-kart-cta    { margin: auto 18px 18px; }

/* ⚠ Dil sayfasındaki SINIFSIZ bölüm başlıkları. `.zbx-hub` içindeki düz `<h2>`
   mobil ölçeğe uymuyordu: `denetim.mjs` 360px'te **35px** ölçtü (sınır 24px).
   Ölçek CLAUDE.md mobil kural 1'deki h2 formülünün aynısı — üst sınır mevcut
   masaüstü değeri, `vw` katsayısı 768px'te tam ona ulaşıyor. */
.zbx-lp-en > h2 { font-size: clamp(22px, 4.56vw, 35px); line-height: 1.15; }
.zbx-lp-en > h3 { font-size: clamp(19px, 3.9vw, 30px); line-height: 1.2; }

/* -------- [bb_koleksiyon] — yabancı dil vitrini --------
   ⛔ Kartlar BAĞLANTI DEĞİL (`<figure>`): ürün sayfasına link vermek ziyaretçiyi
      Türkçe adı ve sepet düğmesi olan bir sayfaya düşürürdü. Bu yüzden burada
      hover/odak etkileşimi de yok — tıklanabilir görünmemeli.                */
.zbx-koleksiyon { margin: 26px 0; }
.zbx-koleksiyon-izgara {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 620px)  { .zbx-koleksiyon-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .zbx-koleksiyon-izgara { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.zbx-koleksiyon-kart {
	margin: 0;
	border: 1px solid var(--zbx-kart-cizgi, #c7c8c9);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.zbx-koleksiyon-gorsel {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
}
.zbx-koleksiyon-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;   /* ⛔ `cover` DEĞİL: ürünün kenarını kırpar */
	display: block;
}
.zbx-koleksiyon-kart figcaption {
	padding: 10px 12px 12px;
	font-size: 13.5px;     /* mobil kural 3: ikincil metin ≥13px */
	line-height: 1.4;
	color: #4a3b2f;
	border-top: 1px solid #f1ece4;
}
.zbx-koleksiyon-ozet {
	margin: 14px 0 0;
	font-size: 14.5px;
	color: #4a3b2f;
}


/* ==========================================================================
   SIRA DÜZELTMESİ — çekirdekteki EZME kurallarının kopyası (2026-08-14, Faz 4)

   Bu dosya `stil.css`ten SONRA yükleniyor. Tek dosya zamanında aşağıdaki
   kurallar taşınan blokların ARDINDAN geldiği için kazanıyordu; bölünce sıra
   tersine döndü ve blokların kendi değerleri öne geçti.

   ⚠ Bunu `denetim.mjs` yakaladı: `h2.zbx-hub-baslik` 360/390 px'te 28px
   ölçüldü (sınır 24px) — toptan hub ve imalatçı LP sayfalarında 4 HATA.
   Kural kural tarama yapıldı; taşınan bloklara ÖZGÜ sınıfları hedefleyen
   çekirdek kuralları bunlar. Çekirdekte de duruyorlar (zararsız: o sınıflar
   parça yüklenmeyen sayfalarda hiç geçmiyor), burada tekrar edilmelerinin
   tek sebebi SIRA.

   ⛔ Bu dosyaya yeni blok taşırsan aynı taramayı tekrarla:
      çekirdekte taşınan sınıfları hedefleyen kural kaldı mı?
   ========================================================================== */
/* 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; }
.zbx-hub-baslik { font-size: clamp(24px, 4.4vw, 44px); }
/* 3) DOKUNMA HEDEFLERİ listesindeki tek taşınan üye — çekirdekteki bileşik
   seçici footer/breadcrumb için orada kalmalı, blog üyesi burada tekrarlanıyor. */
.bb-yazar-ad a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* ==========================================================================
   YABANCI DİL TEKLİF FORMU (`[bb_dil_form]`, 2026-08-26)

   ⛔ ONAY KUTUSU DOKUNMA HEDEFİ. FluentForms'un onay satırı 400×36 px ölçülüyor;
      mobil kural 2 birincil kontrol için 44 px istiyor. `denetim.mjs` bunu
      **yalnız Arapça sayfada 768px'te** HATA verdi: İngilizce ve Rusça'da etiket
      metni iki satıra sarıp kutuyu zaten 44'ün üstüne çıkarıyor, Arapça metin
      kısa olduğu için tek satırda kalıyordu. Yani kusur dile değil METİN
      UZUNLUĞUNA bağlıydı ve bir sonraki çeviri değişikliğinde başka dilde de
      çıkabilirdi — bu yüzden dilden bağımsız olarak sabitleniyor.
   ⚠ Görünür kutucuk 20×20 kalıyor; büyüyen yalnız tıklanabilir satır.
   ========================================================================== */
.zbx-dil-form .ff-el-form-check,
.zbx-dil-form .ff-el-input--content .ff-el-form-check-label {
	display: flex;
	align-items: center;
	min-height: 44px;
}
.zbx-dil-form input[type="checkbox"] { min-height: 44px; }


/* ==========================================================================
   DİL SAYFASI TABLOLARI (2026-09-06)
   ⛔ `.zbx-hub` içinde tablo İLK KEZ /de/kupfer-pflege/ ile kullanıldı ve o ana
      kadar hiçbir kuralı yoktu (blog tabloları `.single-post .entry-content`
      altında, dil sayfaları oraya girmiyor).
   ⛔ Sarmalayıcı `overflow-x` ŞARTTIR: dar ekranda taşan tablo gövde yatay
      kaydırması ÜRETMEYEBİLİR, o yüzden `denetim.mjs` yakalamaz — kural 8b'deki
      sepet satırı tuzağının aynı sınıfı.
   ⚠ Renkler paletten: ayraç #C7C8C9, krem #F7F1E8, espresso #2B1D16.
      Bakır (#B87333) arayüzde KULLANILMAZ.
   ========================================================================== */
.zbx-tablo {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 16px 0;
}
.zbx-hub table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.zbx-hub th,
.zbx-hub td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #C7C8C9;
	overflow-wrap: anywhere;
}
.zbx-hub thead th {
	background: #F7F1E8;
	color: #2B1D16;
	font-weight: 600;
}
.zbx-hub tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
	.zbx-hub table { font-size: 14px; }
	.zbx-hub th,
	.zbx-hub td { padding: 8px 10px; }
}

/* ==========================================================================
   /kategoriler/ — KATEGORİ DİZİNİ (2026-09-13, UX revizyonu)

   MOD: Operate. Ziyaretçi burada okumaya değil BULMAYA geldi; tarama hızı ve
   kararlı yoğunluk ifadeden önce gelir.

   ⛔ KART DEĞİL, LİSTE SATIRI. İlk sürüm beş kategoriyi çerçeveli kart yaptı ve
      satır 686px'e çıktı — beş kategori 3.400px kaydırma demekti. Eşdeğer beş
      ögeyi çerçeveyle birbirinden koparmak bir dizinde bilgi taşımıyor; ayrım
      hairline ayraçla yapılıyor.

   ⛔ ÇAĞRI DOLU BUTON DEĞİL. Beş satırda beş dolu turuncu buton sayfanın en ağır
      görsel ögesiydi ve beşi de aynı şeyi söylüyordu. Dolu buton sayfada BİR kez,
      en sondaki toptan çağrısında.

   ⛔ GİRİŞTE H2 YOK — tema h1 "Bakır Ürün Kategorileri" basıyor, ikincisi aynı
      cümleydi.

   ⛔ GÖRSEL ORANI CSS ile eşitlenir (ölçüldü: 36 küçük resmin 35'i saf beyaz
      stüdyo fonunda; tutarsızlık fonda değil ORANDA).

   ⛔ Yeni kırılım eşiği yok — yalnız 768 ve 1000 (mobil kural 5).
   ========================================================================== */
.zbx-kat .zbx-hub-giris {
	max-width: 62ch;
	margin-bottom: 26px;
}
.zbx-kat .zbx-hub-spot {
	margin: 0 0 8px;
	font-size: clamp(15.5px, 1.9vw, 18px);
	line-height: 1.55;
	color: #4a3b2f;
}
.zbx-kat .zbx-hub-not {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b5b50;
}

/* -------- ana kategori satırları -------- */
.zbx-kat-bloklar {
	margin: 0 0 52px;
	border-top: 1px solid #e3e0dc;
}
/* Mobil: görsel + gövde üstte, çağrı altta tam satır.
   grid-template-areas kullanılıyor çünkü kaynak sırası (medya, gövde, çağrı) ile
   görsel sıra iki kırılımda da AYNI kalıyor; DOM ve odak sırası görsel sırayla
   çelişmiyor. */
.zbx-kat-blok {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-areas:
		"medya govde"
		"cta   cta";
	gap: 12px 16px;
	align-items: start;
	padding: 18px 12px;
	margin-inline: -12px;
	border-bottom: 1px solid #e3e0dc;
	transition: background-color 0.16s ease;
}
@media (min-width: 768px) {
	.zbx-kat-blok {
		grid-template-columns: 140px minmax(0, 1fr) auto;
		grid-template-areas: "medya govde cta";
		gap: 0 28px;
		align-items: center;
		padding: 22px 12px;
	}
}
.zbx-kat-blok:hover {
	background: #fbf8f4;
}

.zbx-kat-gorsel-kutu {
	grid-area: medya;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 6px;
	border: 1px solid #eceae7;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
/* ⛔⛔ `height: 100%` YAZILMAZ — kırpılmış görsel üretir. Yüzde yükseklik,
   ebeveynin yüksekliği `aspect-ratio`'dan geldiğinde ÇÖZÜLEMİYOR ve `auto`ya
   düşüyor; tarayıcı o an oranı `<img>`'nin width/height NİTELİKLERİNDEN
   hesaplıyor (1000x1500 → 133x199) ve `object-fit` hiç devreye girmiyor.
   Kutuda `overflow:hidden` olduğu için fazlası kesiliyor: görsel YARIM görünüyor.
   2026-09-13'te canlıda ölçüldü — 31 karenin 16'sı taşıyordu.
   Çözüm oranı ÖGENİN KENDİSİNE vermek: `aspect-ratio` nitelik oranını ezer. */
.zbx-kat-gorsel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.zbx-kat-blok:hover .zbx-kat-gorsel {
	transform: scale(1.045);
}

.zbx-kat-govde {
	grid-area: govde;
	min-width: 0;
}
.zbx-kat-baslik {
	margin: 0 0 5px;
	/* Blocksy başlık boyutunu --theme-font-size DEĞİŞKENİYLE kuruyor; font-size
	   yazmak yerine değişken eziliyor (mobil kural 1). */
	--theme-font-size: clamp(18px, 2.1vw, 23px);
	line-height: 1.22;
	letter-spacing: -0.01em;
}
.zbx-kat-baslik a {
	position: relative;
	color: #2B1D16;
	text-decoration: none;
}
/* Dokunma hedefi 32px'e görünmez kutuyla tamamlanıyor — satır aralığını
   büyütmek satırın ritmini bozar (mobil kural 2). */
.zbx-kat-baslik a::after {
	content: "";
	position: absolute;
	inset: -4px -4px;
}
.zbx-kat-blok:hover .zbx-kat-baslik a {
	color: #cf3700;
}

/* İki canlı rakam yan yana — dizinde en çok aranan bilgi bu. */
.zbx-kat-sayi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin: 0 0 8px;
	/* Mobil kural 3: rozet/meta gibi ikincil metin en az 13px. 12,5 denendi,
	   denetim UYARI verdi. */
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #7a6a5e;
}
.zbx-kat-sayi span + span::before {
	content: "·";
	margin-right: 10px;
	color: #C7C8C9;
}
.zbx-kat-metin {
	margin: 0 0 10px;
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.55;
	color: #4a3b2f;
}

/* -------- derin bağlantılar --------
   ⛔ ÇİP DEĞİL, düz metin bağlantısı: çip olsaydı mobil kural 2 gereği 44x44
      gerekirdi ve dört bağlantı satırın gövdesini başlıktan koparırdı. */
.zbx-kat-derin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	margin: 0;
}
.zbx-kat-derin a {
	position: relative;
	display: inline-block;
	padding: 5px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #cf3700;
	text-decoration: none;
	border-bottom: 1px solid rgba(207, 55, 0, 0.3);
}
.zbx-kat-derin a::after {
	content: "";
	position: absolute;
	inset: -6px -5px;
}
.zbx-kat-derin a:hover,
.zbx-kat-derin a:focus-visible {
	color: #932700;
	border-bottom-color: #932700;
}
.zbx-kat-derin a + a::before {
	content: "·";
	position: absolute;
	left: -9px;
	color: #C7C8C9;
	border: 0;
}

/* -------- satır çağrısı: çerçeveli sade bağlantı, dolu buton değil -------- */
.zbx-kat-cta-kutu {
	grid-area: cta;
}
@media (min-width: 768px) {
	.zbx-kat-cta-kutu {
		justify-self: end;
	}
}
.zbx-kat-cta {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid #e0d7cf;
	border-radius: 999px;
	color: #cf3700;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}
@media (min-width: 768px) {
	.zbx-kat-cta {
		width: auto;
	}
}
.zbx-kat-blok:hover .zbx-kat-cta,
.zbx-kat-cta:hover,
.zbx-kat-cta:focus-visible {
	border-color: #cf3700;
	background: #fff;
	color: #932700;
	text-decoration: none;
}
.zbx-kat-ok {
	flex: none;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.zbx-kat-blok:hover .zbx-kat-ok {
	transform: translateX(3px);
}

/* -------- tüm alt kategoriler (kare ızgarası) -------- */
.zbx-kat-tumu {
	margin: 0 0 48px;
}
.zbx-kat-tumu-baslik {
	margin: 0 0 5px;
	--theme-font-size: clamp(20px, 2.6vw, 25px);
	line-height: 1.22;
	color: #2B1D16;
}
.zbx-kat-tumu-metin {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: #6b5b50;
}
.zbx-kat-kareler {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
	gap: 10px;
}
@media (min-width: 1000px) {
	.zbx-kat-kareler {
		grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
	}
}
.zbx-kat-kare {
	display: flex;
	flex-direction: column;
	padding: 9px;
	border: 1px solid #eceae7;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.zbx-kat-kare:hover,
.zbx-kat-kare:focus-visible {
	transform: translateY(-2px);
	border-color: #d9d2cb;
	box-shadow: 0 8px 18px rgba(43, 29, 22, 0.10);
	text-decoration: none;
}
.zbx-kat-gorsel-kare-kutu {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
}
/* Aynı gerekçe — yukarıdaki `height: 100%` uyarısına bak. */
.zbx-kat-gorsel-kare {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.zbx-kat-kare:hover .zbx-kat-gorsel-kare {
	transform: scale(1.05);
}
.zbx-kat-kare-ad {
	display: block;
	margin-top: 7px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #2B1D16;
}
.zbx-kat-kare:hover .zbx-kat-kare-ad {
	color: #cf3700;
}

/* -------- kapanış -------- */
.zbx-kat-kapanis {
	max-width: 72ch;
}
.zbx-kat-kapanis-baslik {
	margin: 0 0 10px;
	--theme-font-size: clamp(19px, 2.4vw, 24px);
	line-height: 1.22;
	color: #2B1D16;
}
.zbx-kat-kapanis p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
	color: #4a3b2f;
}
/* Sayfadaki TEK dolu buton — kapanıştaki toptan çağrısı. */
.zbx-kat-toptan {
	margin-top: 20px;
}
.zbx-kat-toptan a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 22px;
	border-radius: 999px;
	background: #cf3700;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.16s ease;
}
.zbx-kat-toptan a:hover,
.zbx-kat-toptan a:focus-visible {
	background: #932700;
	color: #fff;
	text-decoration: none;
}

/* -------- tarayıcının çizdiği yüzeyler: seçim ve odak halkası --------
   Çizilmeyen ama yine de tasarıma ait parçalar; varsayılanları hiçbir tasarım
   sistemine ait değil. */
.zbx-kat ::selection {
	background: #ffd4b1;
	color: #2B1D16;
}
.zbx-kat a:focus-visible {
	outline: 2px solid #cf3700;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.zbx-kat-gorsel,
	.zbx-kat-gorsel-kare,
	.zbx-kat-ok,
	.zbx-kat-kare,
	.zbx-kat-blok {
		transition: none;
	}
	.zbx-kat-blok:hover .zbx-kat-gorsel,
	.zbx-kat-kare:hover .zbx-kat-gorsel-kare,
	.zbx-kat-blok:hover .zbx-kat-ok,
	.zbx-kat-kare:hover {
		transform: none;
	}
}

/* -------- hub kartı: canlı sayı + derin bağlantılar (2026-09-13) --------
   WSS/KaTom hub bloğunun eksik iki parçası. Kart zaten tümüyle bir <a>;
   ⛔ derin bağlantılar İÇİNE konamaz (iç içe <a> geçersiz HTML, ekran
   okuyucuda iç içe hedef). Bu yüzden kart ile derin satır bu sarmalayıcıda
   KARDEŞ duruyor ve sarmalayıcı ızgaranın çocuğu oluyor.
   ⚠ Kart `flex:1` almalı — yoksa aynı satırdaki kartlar derin satırın
   uzunluğuna göre farklı yükseklikte kalır. */
.zbx-kart-sarmal {
	display: flex;
	flex-direction: column;
}
.zbx-kart-sarmal > .zbx-kart {
	flex: 1;
}
.zbx-kart-sayi {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.78;
}
/* Derin bağlantılar — ÇİP DEĞİL, düz metin bağlantısı (mobil kural 2 eşiği
   32px). Çip olsalardı 44x44 gerekirdi ve dört bağlantı kart gövdesini
   başlıktan koparırdı. */
.zbx-kart-derin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	margin: 9px 2px 0;
}
.zbx-kart-derin a {
	position: relative;
	display: inline-block;
	padding: 5px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #cf3700;
	text-decoration: none;
	border-bottom: 1px solid rgba(207, 55, 0, 0.35);
}
.zbx-kart-derin a::after {
	content: "";
	position: absolute;
	inset: -6px -5px;
}
.zbx-kart-derin a:hover,
.zbx-kart-derin a:focus-visible {
	color: #932700;
	border-bottom-color: #932700;
}
.zbx-kart-derin a + a::before {
	content: "·";
	position: absolute;
	left: -9px;
	color: #C7C8C9;
	border: 0;
}

/* ==========================================================================
   HUB KARTI GÖRSELİ (2026-09-14, kural 52 Adım 2)

   ⛔ ORAN ÖGENİN KENDİSİNE VERİLİR, `height: 100%` YAZILMAZ (kural 52): yüzde
      yükseklik, ebeveynin yüksekliği `aspect-ratio`dan geldiğinde çözülemiyor
      ve `auto`ya düşüyor; tarayıcı oranı `<img>`'nin width/height
      niteliklerinden hesaplayıp `object-fit`i devre dışı bırakıyor.
   ⛔ `object-fit: cover` DEĞİL `contain` — kareler beyaz stüdyo fonunda ÜRÜN
      fotoğrafı; kırpmak ürünün kulpunu/kapağını kesiyor (kural 30'un dersi).
   ⛔ 16/9 BİLİNÇLİ KISA: kart yüksekliği Osman'ın 2026-09-14 geri bildiriminin
      konusuydu ("kartın yüksekliği çok olmasın"). Kare oran kartı ~%60 uzatıyor.
   ⚠ Beyaz zemin şart: kareler beyaz fonlu, renkli gradyan kartın üstüne fonsuz
      konunca ürünün etrafında kirli bir hale oluşuyor.
   ========================================================================== */
.zbx-hub .zbx-kart-gorsel {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-bottom: 13px;
	padding: 8px;
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
}

/* ==========================================================================
   /kategoriler/ — "İŞLETMENİZE GÖRE" SATIRI (2026-09-14, kural 52 Adım 2)

   Kategori ağacı ürünü anlatıyor; bu satır ikinci navigasyon eksenini
   (işletme türü) aynı yüzeye getiriyor.
   ⛔ ÇİP DEĞİL, düz metin bağlantısı — çip olsaydı mobil kural 2 gereği 44×44
      gerekirdi. Eşik 32px ve görünmez `::after` ile tamamlanıyor; kutuyu
      büyütmek satır kırılmasını bozardı.
   ========================================================================== */
.zbx-kat-isletme { margin-top: 34px; }
.zbx-kat-isletme-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 14px 0 0;
}
.zbx-kat-isletme-satir a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: 15px;
	font-weight: 600;
	color: #cf3700;
	text-decoration: none;
}
.zbx-kat-isletme-satir a::after { content: ""; position: absolute; inset: -6px; }
.zbx-kat-isletme-satir a:hover { color: #932700; text-decoration: underline; }

/* ==========================================================================
   DİL KÖK SAYFASI HERO (2026-09-15, Osman isteği)

   Beş yabancı dil kök sayfası görselsiz açılıyordu. Hero, ziyaretçiyi bir
   kareyle karşılar ve ilk ekranda tek iş sunar: toptan teklif.

   ⛔⛔ YÜKSEKLİK `aspect-ratio` İLE VERİLMEZ — `min-height` İLE VERİLİR.
      İlk sürüm 16/9 kullandı ve kutu 1440px'te **726px** oldu (Osman:
      "yüksekliği çok çok fazla"). Oran, kabın genişliğine kilitli olduğu için
      geniş ekranda kontrolsüz büyüyor; `min-height: clamp()` hem tavanı tutar
      hem metin taşarsa kutuyu büyütür (aspect-ratio taşırır, büyütmez).
   ⛔ GÖRSEL `position:absolute; inset:0` İLE SERİLİR — ancak o zaman
      `height:100%` çözülebilir ve `object-fit` devreye girer. Kural 52'nin
      tuzağı `aspect-ratio`dan yükseklik alan ebeveynle birlikte doğuyordu;
      burada yükseklik `min-height`ten geliyor, yüzde yükseklik çözülüyor.
   ⛔ İÇERİK ORTALI (2026-09-15 Osman: "heroda ortalı dursun") — `place-items:
      center` + `text-align: center`; alt banda yaslanmıyor.
   ⛔ OKUNURLUK TAM KARE ÖRTÜSÜYLE SAĞLANIR, degradeyle değil: metin artık
      ortada ve altındaki piksel her ekranda farklı. Örtü + gölge birlikte.
   ⛔ MANTIKSAL ÖZELLİK KULLANILIR (`inset-inline`, `padding-inline`): Arapça
      sayfası RTL (kural 40).
   ⛔ CTA ≥44×44 (mobil kural 2) ve metin ≥15px (mobil kural 3).
   ========================================================================== */
.zbx-dil-hero {
	position: relative;
	display: grid;
	place-items: center;
	/* 2026-09-15 Osman: "%20 artır". 390px → 240 · 768px → 240 · 1440px → 432 */
	min-height: clamp(240px, 31vw, 432px);
	padding: clamp(18px, 3.4vw, 34px);
	margin: 0 0 30px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--zbx-espresso, #2b1d16);
	isolation: isolate;
}
.zbx-dil-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 56%;
}
.zbx-dil-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		rgba(23, 15, 11, 0.42) 0%,
		rgba(23, 15, 11, 0.56) 55%,
		rgba(23, 15, 11, 0.68) 100%
	);
}
.zbx-dil-hero-ic {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* ⛔ `ch` BURAYA YAZILMAZ — `ch` bu kabın KENDİ font boyutuna (16px) göre
	   hesaplanıyor, başlığınkine (30px) göre değil: `34ch` 1440px'te 290px'e
	   denk geldi, başlığı 4 satıra bölüp CTA'yı ikiye sardırdı (ölçüldü:
	   293×70). Kapta piksel sınırı, satır uzunluğu sınırı BAŞLIKTA. */
	max-width: min(100%, 660px);
	text-align: center;
}
.zbx-dil-hero-kicker {
	margin: 0;
	color: #fff;
	max-width: 22ch;
	font-size: clamp(17px, 2.5vw, 30px);
	font-weight: 700;
	line-height: 1.26;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.zbx-dil-hero-cta {
	display: inline-block;
	min-height: 44px;
	padding: 12px 22px;
	border-radius: 8px;
	background: var(--zbx-aksiyon, #cf3700);
	color: #fff;
	font-size: clamp(15px, 1.9vw, 17px);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	transition: background-color 0.16s ease;
}
.zbx-dil-hero-cta:hover,
.zbx-dil-hero-cta:focus-visible {
	background: var(--zbx-aksiyon-koyu, #932700);
	color: #fff;
	text-decoration: none;
}
.zbx-dil-hero-ok { margin-inline-start: 8px; font-size: 1.1em; }

@media (max-width: 767px) {
	.zbx-dil-hero { margin-bottom: 24px; border-radius: 10px; }
	.zbx-dil-hero-ic { gap: 14px; }
	.zbx-dil-hero-kicker { max-width: 26ch; }
	.zbx-dil-hero-cta { padding: 12px 18px; }
}

/* ==========================================================================
   REHBER MERKEZ HUB'I — `/bakir-rehberi/` (2026-09-15)

   91 rehber yazısının konu ekseni. Yedi şerit; her şeridin altında
   `/toptan-satis/` ailesine bağlamsal köprü.

   ⛔ Yeni kırılım eşiği yok — yalnız 768 ve 1000 (mobil kural 5).
   ⛔ Bakır (#B87333 / #A05F28) kullanılmaz — arayüzde yasak.
   ⛔ Dolu buton sayfada BİR KEZ: `.zbx-rhb-cta`. Şerit köprüleri ve
      "Tümünü gör" düz metin bağlantısı (kural 52).
   ⚠ Kart ve köprü bağlantıları 32px dokunma eşiğini görünmez `::after` ile
     karşılıyor (mobil kural 2) — kutuyu büyütmek ızgarayı bozar.
   ========================================================================== */
.zbx-rhb .zbx-hub-giris {
	max-width: 62ch;
	margin-bottom: 28px;
}
.zbx-rhb .zbx-hub-spot {
	margin: 0 0 8px;
	font-size: clamp(15.5px, 1.9vw, 18px);
	line-height: 1.55;
	color: #4a3b2f;
}
.zbx-rhb .zbx-hub-not {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b5b50;
}

/* -------- şerit -------- */
.zbx-rhb-seritler {
	border-top: 1px solid #e3e0dc;
}
.zbx-rhb-serit {
	padding: 26px 0 22px;
	border-bottom: 1px solid #e3e0dc;
}
.zbx-rhb-serit-bas {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 4px;
}
.zbx-rhb-serit-baslik {
	margin: 0;
	--theme-font-size: clamp(19px, 2.5vw, 24px);
	line-height: 1.22;
	color: #2B1D16;
}
.zbx-rhb-sayi {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #6b5b50;
	white-space: nowrap;
}
.zbx-rhb-serit-metin {
	margin: 0 0 16px;
	max-width: 74ch;
	font-size: 14px;
	line-height: 1.55;
	color: #6b5b50;
}

/* -------- kartlar -------- */
/* ⛔ Sütun sayısı SABİT (kural 54): `auto-fit` kabı doldurmuyor ve dört kartlı
   şeritte sütun genişliğini diğerlerinden farklı yapıyor. */
.zbx-rhb-kartlar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
}
@media (min-width: 768px) {
	.zbx-rhb-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.zbx-rhb-kartlar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; }
}
.zbx-rhb-kart {
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-decoration: none;
	color: inherit;
}
/* ⛔ Zemin BEYAZ, krem değil — `contain` ile görselin kendi beyaz fonu kutunun
   zeminiyle birleşiyor; krem zemin her karenin çevresine görünür bir çerçeve
   çiziyordu (kural 52'nin kategori kartlarıyla aynı desen). */
.zbx-rhb-gorsel-kutu {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #eceae7;
}
/* ⛔ Oran ÖGENİN KENDİSİNE verilir, `height: 100%` YAZILMAZ — yüzde yükseklik
   `aspect-ratio`dan gelen ebeveyn yüksekliğinde çözülemiyor ve `object-fit`
   devreye girmiyor; görsel kırpılmış basılıyor (kural 52'de 31 karenin 16'sında
   ölçüldü, denetim yine de HATA 0 diyordu).
   ⛔⛔ `object-fit: cover` KULLANILMAZ — 2026-09-15'te canlıda ölçüldü: 34 karenin
   33'ü %15'ten fazla, 14'ü %25'ten fazla kırpılıyordu (ortalama %33,3). Sebep
   oran dağılımı: 19 kare 1:1, 12 kare 2:3 DİKEY, 3 kare yatay. 4/3 kutuda dikey
   bir yazı görseli %50 kırpılıyor — cezvenin sapı, kâsenin ağzı çerçeve dışında
   kalıyordu. `1/1 + contain` hiçbir kareyi kırpmaz. Kutu oranını çoğunluğa
   uydurmak çözüm DEĞİL: her oran kovasında kırpılan bir grup kalıyor. */
.zbx-rhb-gorsel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.zbx-rhb-kart:hover .zbx-rhb-gorsel,
.zbx-rhb-kart:focus-visible .zbx-rhb-gorsel {
	transform: scale(1.035);
}
.zbx-rhb-kart-ad {
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 600;
	color: #2B1D16;
}
@media (min-width: 768px) {
	.zbx-rhb-kart-ad { font-size: 14px; }
}
.zbx-rhb-kart:hover .zbx-rhb-kart-ad,
.zbx-rhb-kart:focus-visible .zbx-rhb-kart-ad {
	color: #cf3700;
}

/* -------- "tümünü gör" -------- */
.zbx-rhb-tumu-kutu {
	margin-top: 14px;
}
.zbx-rhb-tumu {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #cf3700;
	text-decoration: none;
}
.zbx-rhb-tumu::after {
	content: "";
	position: absolute;
	inset: -7px -6px;
}
.zbx-rhb-tumu:hover,
.zbx-rhb-tumu:focus-visible {
	color: #932700;
	text-decoration: underline;
}
.zbx-rhb-ok {
	flex: none;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.zbx-rhb-tumu:hover .zbx-rhb-ok,
.zbx-rhb-cta:hover .zbx-rhb-ok {
	transform: translateX(3px);
}

/* -------- toptan köprüsü -------- */
.zbx-rhb-kopru {
	margin-top: 16px;
	padding: 11px 13px;
	border-radius: 10px;
	background: #faf7f3;
	border: 1px solid #efeae3;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.zbx-rhb-kopru-metin {
	font-size: 13px;
	font-weight: 600;
	color: #4a3b2f;
}
.zbx-rhb-kopru-linkler {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
}
.zbx-rhb-kopru-linkler a {
	position: relative;
	font-size: 13px;
	line-height: 1.5;
	color: #cf3700;
	text-decoration: none;
}
.zbx-rhb-kopru-linkler a::after {
	content: "";
	position: absolute;
	inset: -9px -4px;
}
.zbx-rhb-kopru-linkler a:hover,
.zbx-rhb-kopru-linkler a:focus-visible {
	color: #932700;
	text-decoration: underline;
}
.zbx-rhb-kopru-linkler a + a::before {
	content: "·";
	margin: 0 7px;
	color: #C7C8C9;
	text-decoration: none;
}

/* -------- kronolojik arşiv bağlantısı -------- */
.zbx-rhb-arsiv {
	margin: 24px 0 44px;
	font-size: 14px;
}
.zbx-rhb-arsiv a {
	position: relative;
	color: #4a3b2f;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.zbx-rhb-arsiv a::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}
.zbx-rhb-arsiv a:hover,
.zbx-rhb-arsiv a:focus-visible {
	color: #cf3700;
}

/* -------- kapanış -------- */
.zbx-rhb-kapanis {
	padding: 24px 0 8px;
	border-top: 1px solid #e3e0dc;
	max-width: 74ch;
}
.zbx-rhb-kapanis-baslik {
	margin: 0 0 10px;
	--theme-font-size: clamp(20px, 2.6vw, 25px);
	line-height: 1.22;
	color: #2B1D16;
}
.zbx-rhb-kapanis p {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4a3b2f;
}
.zbx-rhb-toptan {
	margin: 18px 0 0;
}
.zbx-rhb-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 22px;
	border-radius: 8px;
	background: #cf3700;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.zbx-rhb-cta:hover,
.zbx-rhb-cta:focus-visible {
	background: #932700;
	color: #fff;
	text-decoration: none;
}

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

/* -------- `/en/resources/` liste biçimi (2026-09-15) --------
   Yabancı tarafta kart yok: sayfaların öne çıkan görseli yok ve kart ızgarası
   görselsiz boş kutular üretirdi. Başlık + tek satır özet, tarama hızı için.
   ⛔ Özet metni sayfanın kendi `rm_description`'ı — hub'da ayrıca yazılmaz. */
.zbx-rhb-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #efeae3;
}
.zbx-rhb-liste-oge {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid #efeae3;
}
.zbx-rhb-liste-oge > a {
	position: relative;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #cf3700;
	text-decoration: none;
}
.zbx-rhb-liste-oge > a::after {
	content: "";
	position: absolute;
	inset: -7px -4px;
}
.zbx-rhb-liste-oge > a:hover,
.zbx-rhb-liste-oge > a:focus-visible {
	color: #932700;
	text-decoration: underline;
}
.zbx-rhb-liste-ozet {
	display: block;
	margin-top: 3px;
	max-width: 74ch;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b5b50;
}
.zbx-rhb-dil .zbx-rhb-serit {
	padding: 22px 0 18px;
}

/* ⛔ GENIŞ EKRANDA LİSTE İKİ SÜTUN — 2026-09-20.
   Özet metninin okuma ölçüsü 74ch (≈538px) ve liste tek sütundu; kap
   1290px olunca sağda 750px boşluk kalıyordu. Osman: *"bu sayfanın yapısı
   tasarımı bozuk geldi bana"*. Grup başına öge sayısı 3-4'ten 8-9'a çıkınca
   (17 toptan sayfası) kusur görünür oldu.
   ⚠ `denetim.mjs` bunu YAKALAMAZ — gövde yatay kaydırma üretmiyor
     (kural 8b/52/55 ile aynı sınıf).
   ⛔ SÜTUN SAYISI SABİT YAZILIR, `auto-fit` KULLANILMAZ (kural 54): `auto-fit`
     kabı doldurmuyor ve tek ögeli grupta sütunu yarım bırakıyor.
   ⚠ Okuma ölçüsü korunuyor: 1290px kapta sütun ≈625px, 74ch sınırı hala
     bağlayıcı ve satır uzunluğu değişmiyor — değişen yalnız boşluk. */
@media (min-width: 1000px) {
	.zbx-rhb-liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 44px;
	}
}