/*
Theme Name: Çözüm Oto Market
Description: Çözüm Oto Market için özel geliştirilmiş, Storefront tabanlı WooCommerce alt teması.
Author: Çözüm Oto Market
Template: storefront
Version: 0.3.4
Text Domain: cozumoto-child
*/

:root {
	/* Marka renkleri */
	--cozumoto-navy: #111726;
	--cozumoto-navy-light: #31394c;
	--cozumoto-navy-dark: #0b0f19;
	--cozumoto-orange: #ffa104;
	--cozumoto-orange-dark: #d88700;
	--cozumoto-orange-tint: #ffa10421;
	--cozumoto-gray-bg: #f8f9fa;
	--cozumoto-red: #dc3545;
	--cozumoto-text: #212529;
	--cozumoto-text-muted: #6c7079; /* #70747d açık zeminde 4,26–4,44 idi (AA 4,5) */
	--cozumoto-border: #e2e2e2;

	/* Tipografi */
	--font-heading: 'Manrope', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
	/* Yazı boyu ölçeği — 6 basamak (24.10.2026 tasarım denetimi: sitede 30+ farklı
	   boy vardı). Yeni kural bu basamaklardan birini kullanır; ara değer yazılmaz.
	   Sayfa başlığı (H1) her zaman bölüm başlığından (H2) büyüktür. */
	--fs-1: 12px; /* rozet, meta, küçük etiket */
	--fs-2: 14px; /* kart metni, ikincil metin */
	--fs-3: 16px; /* gövde */
	--fs-4: 20px; /* bölüm başlığı (H2) · mobil ürün adı */
	--fs-5: 26px; /* sayfa başlığı (H1: ana sayfa, kategori) · ürün adı */
	--fs-6: 34px; /* ürün sayfası fiyatı, öne çıkan rakam */

	/* Boşluk ölçeği (4px taban) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;

	/* Köşe yuvarlaklığı.
	   --radius-lg 14 → 10: "Parça Bankosu" yönünde kartlar teknik fiş; yumuşak
	   app köşesi bu dille çelişiyordu (2026-08-07 tasarım yönü şartnamesi). */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	/* Teknik fiş dili — parça kodu / OEM numarası taşıyıcısı.
	   Yeni font İNDİRİLMİYOR, sistem yığını kullanılıyor (ek istek yok). */
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
	/* Kart içi veri satırları ve kod çipi zemini */
	--cozumoto-surface: #f4f4f4;
	/* Stok durumu — daha önce sabit değerle basılıyordu.
	   Issue #61: eski #1e8e3e beyaz zeminde 4,21:1 ile AA (4,5:1) altındaydı;
	   .stock.in-stock'ta zaten kullanılan #1e7a1e'ye koyulaştırıldı —
	   beyaz zeminde 5,44:1 (WCAG hesabıyla doğrulandı). */
	--cozumoto-green: #0f6b3e;

	/* Derinlik / gölge katmanları */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075);
	--shadow-md: 0 4px 12px rgba(17, 23, 38, 0.08);
	--shadow-lg: 0 12px 32px rgba(17, 23, 38, 0.12);

	/* Geçiş zamanlaması */
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Referans token'ları: onlineyedekparca.com (birebir giydirme) ---
	   Kaynak: referansın kendi site.bundle.min.css `:root` bloğu; canlıda
	   Playwright ile doğrulandı. Karar dokümanı:
	   guide/kararlar/tasarim-referansi-onlineyedekparca.md
	   Yukarıdaki --cozumoto-* token'ları bu palete eşlendi; iki ad da aynı
	   renkleri gösteriyor, mevcut 3900 satırlık kural gövdesi kırılmadan
	   yeni palete geçiyor. Yeni kurallarda --oyp-* tercih edilmeli. */
	--oyp-primary: #ffa104;
	--oyp-primary-dark: #d88700;
	--oyp-primary-light: #ffb63b;
	--oyp-primary-trans: #ffa10421;
	--oyp-dark: #111726;
	--oyp-dark-light: #31394c;
	--oyp-dark-gray: #181818;
	/* #70747d açık zeminlerde 4,26–4,44:1 veriyordu (AA eşiği 4,5) —
	   ton korunarak yalnızca luminansı düşürüldü, gözle fark edilmiyor. */
	--oyp-gray: #6c7079;
	--oyp-mid-gray: #e2e2e2;
	--oyp-mid-dark-gray: #505050;
	--oyp-light-gray: #f4f4f4;
	--oyp-green: #9cd861;
	--oyp-border-radius: 15px;
	/* Ölçümle bulunan, referansta değişken olarak tanımlı olmayan renkler */
	--oyp-success: #12a150;        /* "Kargo Bedava" rozeti zemini */
	--oyp-success-text: #0f6b3e;   /* stok / kargo bilgi metni */
	--oyp-body: #212529;           /* gövde metni */
	--oyp-surface: #f8f9fa;        /* arama kutusu / açık yüzey */
	--oyp-card-border: #eee;       /* ürün kartı kenarlığı (dekoratif) */

	/* --- Erişilebilirlik varyantları (WCAG 2.1 AA, 16.09.2026 denetimi) ---
	   Marka turuncusu ZEMİN olarak sorunsuz (#111726 yazı ile 8,81:1) ama
	   METİN olarak açık zeminde 2,03–2,84:1 veriyor. Zemin rengine
	   dokunulmadı; metin için ayrı token açıldı. Ölçülen oranlar yorumda. */
	--oyp-primary-text: #9e6300;    /* turuncu METİN, normal boy: beyaz 4,95 · f4f4f4 4,50 */
	--oyp-primary-text-lg: #c77c00; /* turuncu METİN, iri (>=24px veya >=18.66px kalın): 3,33 */
	--oyp-border-input: #8a8a8a;    /* form denetimi sınırı (1.4.11): beyaz 3,45 · f8f9fa 3,28 */
	--oyp-success-strong: #0f8844;  /* beyaz yazılı rozet zemini: 4,53 (eski #12a150 → 3,37) */
	--oyp-danger-text: #c53516;     /* zorunlu alan yıldızı: beyaz 5,39 (eski #e2401c → 4,21) */

	/* Referans tipografi ölçeği (ölçülen değerler) */
	--oyp-fs-section: var(--fs-6); /* referans: 34px/700 — ölçekte --fs-6 */
	--oyp-fs-price: var(--fs-4);   /* kart fiyatı; referans 22 px, ölçekte 20 */
	--oyp-fs-nav: var(--fs-2);     /* marka nav linki; referans 14,4 px, ölçekte 14 */
	--oyp-fs-badge: var(--fs-1);   /* rozet; referans 12,5 px, ölçekte 12 */
	--oyp-fs-body: var(--fs-3);    /* referans: 16px / lh 24px */

	/* Referans yerleşim ölçüleri */
	--oyp-container: 1290px;       /* .container iç genişliği */
	--oyp-bottom-nav: 72px;        /* mobil alt navigasyon */
}

/* Temel tipografi */
body {
	font-family: var(--font-body);
	color: var(--cozumoto-text);
	/* Referans: 16px gövde, 24px satır yüksekliği (1.5) */
	font-size: var(--oyp-fs-body);
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.site-title a {
	font-family: var(--font-heading);
	letter-spacing: -0.01em;
}

/* Erişilebilirlik: klavye kullanıcıları için görünür odak halkası.
   Issue #64: turuncu halka beyaz zeminde 2,61:1 ile WCAG 1.4.11 (3:1) altında
   kalıyordu. Çift halka kullanılıyor: içte 2px beyaz, dışta 3px lacivert —
   beyaz zeminde lacivert 15,63:1, lacivert header/footer üzerinde ise beyaz iç
   halka kontrastı sağlıyor. Turuncu, odak göstergesi olmaktan çıkarıldı. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--cozumoto-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
}

/* Üst bar ve site başlığı */
.site-header {
	background-color: #ffffff;
	border-bottom: 1px solid var(--cozumoto-border);
	box-shadow: 0 1px 0 rgba(17, 23, 38, 0.04), var(--shadow-sm);
	position: relative;
	z-index: 30;
}

.site-title a,
.site-description {
	color: var(--cozumoto-navy);
	font-weight: 700;
}

.main-navigation ul li a {
	color: var(--cozumoto-navy);
	transition: color var(--transition-base);
}

.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a {
	color: var(--cozumoto-orange);
}

/* Linkler */
a {
	color: var(--cozumoto-navy);
	transition: color var(--transition-base);
}
a:hover {
	color: var(--cozumoto-orange);
}

/* Birincil eylem butonları (Sepete Ekle, Ödeme, Gönder vb.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
.woocommerce a.checkout-button,
.woocommerce #payment #place_order,
.site-header-cart .widget_shopping_cart a.button.checkout,
button[type="submit"],
input[type="submit"] {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	/* Issue #59: beyaz metin turuncu (#ffa104) zeminde 2,61:1 ile AA altındaydı.
	   Turuncu marka zemini korunuyor, metin laciverte alındı: #111726 / #ffa104
	   = 5,98:1 (AA ✓). Bu kalıp hero ve "Neden" CTA'larında zaten kullanılıyordu;
	   artık tüm birincil butonlar aynı dili konuşuyor. */
	color: var(--cozumoto-navy);
	font-weight: 600;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--cozumoto-orange-dark);
	border-color: var(--cozumoto-orange-dark);
	color: var(--cozumoto-navy);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Buton hiyerarşisi (2026-08-07 yön şartnamesi, 24.10.2026 güncellemesi):
   BİRİNCİL turuncu dolgu — sayfanın asıl eylemi (ürün sayfası ve sepetteki
   Sepete Ekle / Ödemeye Geç, Uyumlu Parçaları Göster)
   İKİNCİL beyaz zemin + lacivert kenarlık (ürün kartı düğmesi, Filtrele, Devamını Oku)
   24.10.2026 denetimi: kategoride 27 dolu turuncu kart düğmesi eylem rengini
   sulandırıyordu → kart düğmesi ikincil; turuncu yalnız üzerine gelince. */
.woocommerce ul.products li.product a.button:not(.added_to_cart) {
	background-color: #ffffff;
	border-color: var(--cozumoto-navy);
	/* Kenarlık genişliği 0; çerçeve iç gölgeyle çiziliyor ki düğme ölçüsü
	   (ve kart yüksekliği) değişmesin. Lacivert beyazda 17,8:1. */
	box-shadow: inset 0 0 0 2px var(--cozumoto-navy);
	color: var(--cozumoto-navy);
	width: 100%;
	text-align: center;
}
.woocommerce ul.products li.product a.button:not(.added_to_cart):hover {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	box-shadow: inset 0 0 0 2px var(--cozumoto-orange);
	/* Issue #59: turuncu zeminde lacivert 5,98:1 (beyaz 2,61:1 idi). */
	color: var(--cozumoto-navy);
}
.woocommerce a.button.wc-forward {
	background-color: transparent;
	border: 2px solid var(--cozumoto-navy);
	color: var(--cozumoto-navy);
	box-shadow: none;
}
.woocommerce a.button.wc-forward:hover {
	background-color: var(--cozumoto-navy);
	color: #ffffff;
}

/* Fiyatlar */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cozumoto-navy);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Ürün kartları */
/* Ürün kartı. Kartlar flex sütun: başlık uzunluğu ne olursa olsun fiyat, stok
   rozeti ve buton her kartta aynı hizada dursun diye (ERP'den gelen adlar 1-5
   satır arasında değişiyor, hizasız kartlar grid'i dağınık gösteriyordu). */
.woocommerce ul.products li.product {
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > a.added_to_cart {
	margin-top: auto;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
	border-color: rgba(255, 161, 4, 0.35);
}
.woocommerce ul.products li.product img {
	border-radius: var(--radius-sm);
}
/* ERP'den gelen ürün adları çok uzun olabiliyor ("5Q0412249 Amortisör Rulmanı
   Golf 2013-2021, JETTA 2020-2021, Teramont…"). Üç satırda kes — tam ad
   başlık niteliğinde (title) ve ürün sayfasında zaten görünüyor. */
/* ERP'den gelen ürün adları çok uzun olabiliyor ("5Q0412249 Amortisör Rulmanı
   Golf 2013-2021, JETTA 2020-2021, Teramont…"). Üç satırda kes.

   DİKKAT: yalnızca -webkit-line-clamp'e güvenilmiyor. Tarayıcı `display`
   değerini `flow-root`a düşürdüğünde clamp devre dışı kalıyor, geriye sadece
   `overflow:hidden` kalıyor ve 4. satır ORTASINDAN yatay olarak dilimleniyordu
   (yarım harfler fiyatın üstünde asılı kalıyordu — 2026-08-06'da tarayıcıda
   ölçüldü). Bu yüzden line-height açıkça sabitlenip max-height tam 3 satıra
   eşitlendi: clamp çalışmasa bile kırpma satır sınırında oluyor, yarım harf
   kalmıyor. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--cozumoto-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	min-height: calc(1.3em * 3);
	max-height: calc(1.3em * 3);
}
.woocommerce ul.products li.product .stock {
	display: inline-block;
	margin: var(--space-1) 0 var(--space-2);
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: 0.78em;
	font-weight: 600;
}
.woocommerce ul.products li.product .stock.in-stock {
	background-color: rgba(34, 139, 34, 0.1);
	color: #1e7a1e;
}
.woocommerce ul.products li.product .stock.out-of-stock {
	background-color: rgba(208, 52, 44, 0.1);
	color: var(--cozumoto-red);
}

/* İndirim / kampanya rozetleri: kısıtlı, sadece gerçek aciliyet için kırmızı */
.woocommerce span.onsale,
.cozumoto-badge-sale {
	background-color: var(--cozumoto-red);
	color: #ffffff;
	border-radius: var(--radius-sm);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}

.cozumoto-badge-stock-low {
	color: var(--cozumoto-red);
	font-weight: bold;
}

/* Footer */
#colophon {
	background-color: var(--cozumoto-navy);
	color: #cfd8e3;
}
#colophon .footer-widgets a,
#colophon .site-info a {
	color: #ffffff;
	transition: color var(--transition-base);
}
#colophon .footer-widgets a:hover,
#colophon .site-info a:hover {
	color: var(--cozumoto-orange);
}

/* Yasal Bilgiler widget'ı tek başına dolu (footer-4), Storefront'un varsayılan
   4-kolon float düzeni onu %21,7 genişlikte sağa sıkıştırıp 3 kolonluk boş
   alan bırakıyordu — tam genişlik, ortalanmış tek satıra çeviriyoruz. */
/* Storefront widget alanına 4.235em (≈68px) üst dolgu veriyor; iletişim
   bloğunun kendi ayıracı + 24px boşluğuyla üst üste binince yasal bağlantılar
   footer'ın ortasında kopuk duruyordu (ölçüm: 92px boşluk). */
#colophon .footer-widgets {
	padding-top: var(--space-4);
}
#colophon .footer-widgets.col-4 .block.footer-widget-4 {
	float: none;
	width: 100%;
	margin-right: 0;
	text-align: center;
}
#colophon .widget-title {
	color: #ffffff;
	font-size: 0.95em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--space-4);
}
.cozumoto-footer-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Dikey aralık artık 44 px'lik link kutusundan geliyor (issue #60). */
	gap: 0 var(--space-6);
}
.cozumoto-footer-legal-links li {
	margin: 0;
}
.cozumoto-footer-legal-links a {
	font-size: 0.9em;
	text-decoration: none;
	/* Issue #60: linkler 17 px yükseklikte ve satırlar bitişikti (24 px
	   minimumun altı). 44 px'lik dokunma kutusu — görsel satır aralığı
	   inline-flex hizalamayla korunuyor. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-1);
}
.cozumoto-footer-legal-links a:hover {
	text-decoration: underline;
}

/* Storefront mobil alt navigasyonu DOM'da footer içinde olsa da ayrı bir
   yüzeydir. Sitenin en çok dokunulan mobil bileşeni olduğu için marka
   diline çekildi: lacivert zemin, beyaz ikon/etiket, turuncu sepet sayacı.
   Seçiciler #colophon ile başlıyor (ID özgüllüğü) — sınıf düzeyinde yazılan
   bir kural bu bloğu ezemiyor. */
#colophon .storefront-handheld-footer-bar,
#colophon .storefront-handheld-footer-bar ul li > a,
#colophon .storefront-handheld-footer-bar ul li.search .site-search {
	background-color: var(--cozumoto-navy);
}
#colophon .storefront-handheld-footer-bar {
	border-top: 0;
	box-shadow: 0 -2px 12px rgba(17, 23, 38, 0.18);
}
#colophon .storefront-handheld-footer-bar ul li > a {
	color: #ffffff;
	min-height: 56px;
	font-size: 0.72em;
	line-height: 1.2;
	transition: color var(--transition-base), background-color var(--transition-base);
}
#colophon .storefront-handheld-footer-bar ul li > a:hover,
#colophon .storefront-handheld-footer-bar ul li > a:focus-visible {
	background-color: var(--cozumoto-navy-light);
	color: var(--cozumoto-orange);
}
#colophon .storefront-handheld-footer-bar ul li.cart .count {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	/* Issue #59: sayaç da metindir — turuncu zeminde lacivert 5,98:1. */
	color: var(--cozumoto-navy);
	font-weight: 700;
}

/* Güven rozetleri şeridi */
.cozumoto-trust-strip {
	background-color: var(--cozumoto-gray-bg);
	padding: var(--space-8) var(--space-4);
	border-top: 1px solid var(--cozumoto-border);
	border-bottom: 1px solid var(--cozumoto-border);
}
.cozumoto-trust-strip .cozumoto-trust-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: var(--space-5);
	text-align: center;
}
.cozumoto-trust-strip .cozumoto-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	max-width: 160px;
	padding: var(--space-4);
	background-color: #ffffff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cozumoto-trust-strip .cozumoto-trust-item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.cozumoto-trust-strip img {
	width: 40px;
	height: 40px;
}
.cozumoto-trust-strip span {
	font-size: 0.85em;
	color: var(--cozumoto-navy);
	font-weight: 600;
}

/* 404 sayfası */
.cozumoto-404-wrap {
	max-width: 500px;
	margin: var(--space-12) auto;
	text-align: center;
}
.cozumoto-404-wrap img {
	max-width: 100%;
	height: auto;
}
.cozumoto-404-wrap p {
	color: var(--cozumoto-text-muted);
	font-size: 1.05em;
}
.cozumoto-404-wrap .button {
	margin-top: var(--space-4);
}

/* Ana sayfa: Hero */
.cozumoto-hero {
	position: relative;
	background: linear-gradient(135deg, var(--cozumoto-navy) 0%, var(--cozumoto-navy-light) 100%);
	padding: var(--space-12) var(--space-4);
	overflow: hidden;
}
.cozumoto-hero::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(255, 161, 4, 0.22) 0%, rgba(255, 161, 4, 0) 70%);
	pointer-events: none;
}
.cozumoto-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	flex-wrap: wrap-reverse;
	justify-content: center;
}
.cozumoto-hero-text {
	flex: 1 1 380px;
	max-width: 520px;
	text-align: left;
}
.cozumoto-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--cozumoto-orange);
	font-family: var(--font-heading);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}
.cozumoto-hero-eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--cozumoto-orange);
	display: inline-block;
}
.cozumoto-hero-image {
	flex: 1 1 320px;
	max-width: 460px;
	text-align: center;
}
.cozumoto-hero-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.cozumoto-hero h1 {
	color: #ffffff;
	font-size: 2.3em;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: var(--space-4);
}
.cozumoto-hero p {
	color: #d9e2ec;
	font-size: 1.1em;
	margin-bottom: var(--space-6);
}
.cozumoto-hero-cta.button {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	color: var(--cozumoto-navy);
	font-size: 1.1em;
	font-weight: 700;
	padding: 0.8em 2em;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}
.cozumoto-hero-cta.button:hover {
	background-color: var(--cozumoto-orange-dark);
	border-color: var(--cozumoto-orange-dark);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}
@media (max-width: 600px) {
	.cozumoto-hero-text {
		text-align: center;
	}
	.cozumoto-hero-eyebrow {
		justify-content: center;
	}
}

/* Ana sayfa: Kategoriler */
.cozumoto-categories {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-12) var(--space-4);
	text-align: center;
}
.cozumoto-categories h2 {
	color: var(--cozumoto-navy);
	font-size: var(--fs-4);
	font-weight: 700;
	margin-bottom: var(--space-8);
}
.cozumoto-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-4);
}
.cozumoto-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-4);
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.cozumoto-category-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(255, 161, 4, 0.4);
}
.cozumoto-category-card .cozumoto-category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-orange-tint);
	transition: background-color var(--transition-base);
}
.cozumoto-category-card:hover .cozumoto-category-icon {
	background-color: rgba(255, 161, 4, 0.16);
}
.cozumoto-category-card img {
	width: 32px;
	height: 32px;
}
.cozumoto-category-card span {
	color: var(--cozumoto-navy);
	font-weight: 600;
	font-size: 0.95em;
}

/* Ana sayfa: Hakkımızda tanıtımı */
.cozumoto-about-teaser {
	background-color: var(--cozumoto-gray-bg);
	padding: var(--space-12) var(--space-4);
}
.cozumoto-about-teaser-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	flex-wrap: wrap;
}
.cozumoto-about-teaser-inner img {
	flex: 1 1 320px;
	max-width: 380px;
	height: auto;
}
.cozumoto-about-teaser-text {
	flex: 1 1 320px;
}
.cozumoto-about-teaser-text h2 {
	color: var(--cozumoto-navy);
	font-size: 1.7em;
	font-weight: 700;
	margin-bottom: var(--space-3);
}
.cozumoto-about-teaser-text p {
	margin-bottom: var(--space-5);
	color: var(--cozumoto-text-muted);
	font-size: 1.05em;
}
.cozumoto-about-teaser-text .button {
	background-color: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #fff;
	border-radius: var(--radius-md);
}
.cozumoto-about-teaser-text .button:hover {
	background-color: var(--cozumoto-navy-light);
	border-color: var(--cozumoto-navy-light);
	transform: translateY(-1px);
}

/* İç sayfa ve arşiv başlıkları */
.entry-header .entry-title,
.woocommerce-products-header__title.page-title {
	color: var(--cozumoto-navy);
	font-weight: 700;
	margin-bottom: var(--space-6);
}
.woocommerce-products-header {
	padding-top: var(--space-8);
}

/* WooCommerce bilgi/mesaj kutuları — marka paleti.
   'body' öneki şart: storefront-woocommerce-style bu dosyadan SONRA yükleniyor
   ve aynı seçicilerle mavi arkaplan basıyor; öneksiz kurallar kaybediyor. */
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-noreviews,
body p.no-comments {
	background-color: var(--cozumoto-navy);
	color: #ffffff;
	border-left: 4px solid var(--cozumoto-orange);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
body .woocommerce-info a,
body .woocommerce-message a,
body .woocommerce-noreviews a {
	color: var(--cozumoto-orange);
}
body .woocommerce-info a:hover,
body .woocommerce-message a:hover,
body .woocommerce-noreviews a:hover {
	color: #ffffff;
}

/* Issue #58 — Bildirimdeki eylem butonu ("Sepetim") lacivert zeminde lacivert
   metin + saydam zeminle basılıyordu (1:1, fiilen görünmez). Butona birincil
   buton kimliği veriliyor: turuncu dolgu lacivert bildirime karşı 5,98:1
   (UI bileşeni için ≥3:1 ✓), üstündeki lacivert metin turuncuda 5,98:1 (AA ✓).
   Seçici, üstteki bağlantı rengi kurallarından SONRA ve daha özgül. */
body .woocommerce-info a.button,
body .woocommerce-message a.button,
body .woocommerce-info .button,
body .woocommerce-message .button {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	color: var(--cozumoto-navy);
	font-weight: 600;
	border-radius: var(--radius-md);
}
body .woocommerce-info a.button:hover,
body .woocommerce-message a.button:hover,
body .woocommerce-info .button:hover,
body .woocommerce-message .button:hover {
	background-color: var(--cozumoto-orange-dark);
	border-color: var(--cozumoto-orange-dark);
	color: var(--cozumoto-navy); /* #d88700 üstünde 4,70:1 */
}

/* Issue #91 — Siparişler/İndirmeler boş durum kutusunun sağında yalıtılmış
   "(" karakteri: sağa `position:absolute` ile konumlanan Font Awesome
   sözde-elemanı (content:"\f06a"), yazı tipi yüklenmediği için ham karakter
   olarak sızıyordu. Soldaki ikon WooCommerce'in kendi (yüklenen) ikon
   fontundan geliyor ve korunuyor; yalnızca sağdaki kayıp ikon kaldırılıyor.
   `content: ""` (none değil): WooCommerce bazı bağlamlarda ::after'ı clearfix
   olarak kullanıyor — sözde-eleman kalsın ama glif basmasın. */
body .woocommerce-info::after,
body .woocommerce-message::after,
body .woocommerce-error::after,
body .woocommerce-noreviews::after {
	content: "";
}

/* Form alanları — Storefront'un çıplak gri input'ları yerine marka görünümü */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.input-text {
	background-color: #ffffff;
	color: var(--cozumoto-text);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: 0.6em 0.9em;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
	border-color: var(--cozumoto-orange);
	box-shadow: 0 0 0 3px var(--cozumoto-orange-tint);
}

/* Hesabım: giriş ekranı — gerçek Trendyol /giris ekranı referans alındı
   (Playwright ile incelendi, 15.07.2026): büyük marka paneli değil, tek,
   ortalanmış, dar bir kart. */
/* Sayfa başlığı (H1) görsel gizli, ekran okuyucuya açık: display:none
   sayfayı H1'siz bırakıyordu (axe page-has-heading-one, #99). */
.cozumoto-account-guest .entry-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}
.cozumoto-account-card-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--space-8) 0 var(--space-12);
}
.woocommerce-form-login,
.woocommerce-form-register {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-8);
}
#customer_login.u-columns.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	width: 100%;
	max-width: 820px;
	align-items: start;
}
/* Storefront kolonlara yüzdelik genişlik + float veriyor; grid parçası
   olunca bu değerler grid izine göre yeniden hesaplanıp sütunları eziyor
   (bu depoda tekrar eden tuzak). */
#customer_login.u-columns.col2-set > .u-column1,
#customer_login.u-columns.col2-set > .u-column2 {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	min-width: 0;
}
#customer_login .u-column1,
#customer_login .u-column2 {
	width: 100%;
}
.cozumoto-account-card-wrap h2 {
	font-family: var(--font-heading);
	color: var(--cozumoto-navy);
	font-size: 1.4em;
	margin: 0 0 var(--space-5);
	text-align: center;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
	color: var(--cozumoto-navy);
	font-weight: 600;
}
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text {
	background-color: var(--cozumoto-gray-bg);
	border-color: var(--cozumoto-border);
}
.woocommerce-form-login .input-text:-webkit-autofill,
.woocommerce-form-register .input-text:-webkit-autofill {
	box-shadow: 0 0 0 1000px var(--cozumoto-gray-bg) inset;
	-webkit-text-fill-color: var(--cozumoto-text);
}
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
	width: 100%;
	margin-top: var(--space-2);
}
.woocommerce-form-login .lost_password {
	text-align: center;
	margin-bottom: 0;
	margin-top: var(--space-4);
}
@media (max-width: 767px) {
	#customer_login.u-columns.col2-set {
		grid-template-columns: 1fr;
	}
}

/* Hakkımızda sayfası */
.cozumoto-about-hero {
	padding: var(--space-12) var(--space-4);
}
.cozumoto-about-hero-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	flex-wrap: wrap;
}
.cozumoto-about-hero-text {
	flex: 1 1 380px;
}
.cozumoto-about-hero-text .entry-title {
	font-size: 2em;
	margin-bottom: var(--space-4);
}
.cozumoto-about-hero-text .entry-content p {
	color: var(--cozumoto-text-muted);
	font-size: 1.05em;
	margin-bottom: var(--space-4);
}
.cozumoto-about-hero-image {
	flex: 1 1 300px;
	max-width: 380px;
	text-align: center;
}
.cozumoto-about-hero-image img {
	max-width: 100%;
	height: auto;
}
.cozumoto-about-values {
	background-color: var(--cozumoto-gray-bg);
	border-top: 1px solid var(--cozumoto-border);
	border-bottom: 1px solid var(--cozumoto-border);
	padding: var(--space-12) var(--space-4);
}
.cozumoto-about-values-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.cozumoto-about-values h2 {
	color: var(--cozumoto-navy);
	font-size: 1.7em;
	font-weight: 700;
	margin-bottom: var(--space-8);
}
.cozumoto-about-values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
}
.cozumoto-about-value-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-4);
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cozumoto-about-value-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.cozumoto-about-value-card img {
	width: 40px;
	height: 40px;
}
.cozumoto-about-value-card h3 {
	color: var(--cozumoto-navy);
	font-size: 1.05em;
	margin: 0;
}
.cozumoto-about-value-card p {
	color: var(--cozumoto-text-muted);
	font-size: 0.92em;
	margin: 0;
}
.cozumoto-about-cta {
	max-width: 700px;
	margin: 0 auto;
	padding: var(--space-12) var(--space-4);
	text-align: center;
}
.cozumoto-about-cta h2 {
	color: var(--cozumoto-navy);
	font-size: 1.7em;
	font-weight: 700;
	margin-bottom: var(--space-3);
}
.cozumoto-about-cta p {
	color: var(--cozumoto-text-muted);
	margin-bottom: var(--space-6);
}

/* Boş sepet */
/* Boş sepet — gerçek Trendyol /sepetim referans alındı (Playwright ile
   incelendi, 15.07.2026): büyük dikey illüstrasyon değil, tek satırlık
   yatay kart (ikon + mesaj + CTA). */
.cozumoto-empty-cart {
	max-width: 720px;
	margin: var(--space-8) auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	box-shadow: var(--shadow-sm);
	text-align: left;
}
.cozumoto-empty-cart-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-orange-tint);
}
.cozumoto-empty-cart-icon svg {
	width: 28px;
	height: 28px;
	color: var(--cozumoto-orange);
}
.cozumoto-empty-cart .cart-empty {
	flex: 1 1 260px;
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
	color: var(--cozumoto-navy);
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}
.cozumoto-empty-cart .cart-empty::before {
	display: none;
}
.cozumoto-empty-cart .return-to-shop {
	margin: 0;
	flex-shrink: 0;
}

/* Kategori/taksonomi arşiv başlığı */
.woocommerce-products-header {
	margin-bottom: var(--space-6);
}
.woocommerce-products-header__title.page-title {
	font-family: var(--font-heading);
	color: var(--cozumoto-navy);
	/* --fs-6 başlığı 4px uzatıp altındaki geç beliren kategori şeridinin
	   (önceden var olan ~0,12 CLS) kaymasını büyütüyordu. */
	font-size: var(--fs-5);
	margin-bottom: var(--space-2);
}
.woocommerce-products-header .term-description {
	color: var(--cozumoto-text-muted);
	max-width: 70ch;
}

/* Alt kategori kart grid'i (kategori sayfasında) */
.cozumoto-subcategory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.cozumoto-subcategory-summary {
	display: none;
}
.cozumoto-subcategory-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	text-align: center;
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	color: var(--cozumoto-navy);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.cozumoto-subcategory-card span {
	color: var(--cozumoto-text-muted);
	font-weight: 400;
}
.cozumoto-subcategory-card:hover {
	color: var(--cozumoto-orange-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: rgba(255, 161, 4, 0.35);
}

/* Tekil ürün sayfası */
.single-product div.product .woocommerce-product-gallery {
	border-radius: var(--radius-md);
	overflow: hidden;
}
.single-product div.product .product_title {
	font-family: var(--font-heading);
	color: var(--cozumoto-navy);
}
.single-product div.product p.price,
.single-product div.product span.price {
	font-size: 1.5em;
}
.single-product div.product .woocommerce-product-rating {
	margin-bottom: var(--space-3);
}
.single-product div.product .stock {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: 0.9em;
}
.single-product div.product .stock.in-stock {
	background-color: rgba(34, 139, 34, 0.1);
	color: #1e7a1e;
}
.single-product div.product .stock.out-of-stock {
	background-color: rgba(208, 52, 44, 0.1);
	color: var(--cozumoto-red);
}
.single-product div.product .cart .button.single_add_to_cart_button {
	font-size: 1.05em;
	padding: var(--space-3) var(--space-6);
}

/* Ürün detay bölümleri — accordion */
.cozumoto-product-accordion {
	margin-top: var(--space-8);
	border-top: 1px solid var(--cozumoto-border);
}
.cozumoto-accordion-item {
	border-bottom: 1px solid var(--cozumoto-border);
}
.cozumoto-accordion-summary {
	cursor: pointer;
	list-style: none;
	padding: var(--space-4) var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--cozumoto-navy);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cozumoto-accordion-summary::-webkit-details-marker {
	display: none;
}
.cozumoto-accordion-summary::after {
	content: "+";
	font-size: 1.3em;
	color: var(--cozumoto-orange);
	transition: transform var(--transition-base);
}
/* Açık durumda "+" işareti 45° döndürülüyordu; Poppins'te bu tam bir "×"
   gibi görünüyor ve "kapat/sil" olarak okunuyordu (2026-08-06 denetimi).
   Döndürme yerine doğrudan eksi işareti kullanılıyor. */
.cozumoto-accordion-item[open] > .cozumoto-accordion-summary::after {
	content: "−";
}
.cozumoto-accordion-panel {
	padding: 0 var(--space-2) var(--space-5);
	color: var(--cozumoto-text);
}

/* İlgili ürünler başlığı */
.single-product .related.products > h2 {
	font-family: var(--font-heading);
	color: var(--cozumoto-navy);
	margin-top: var(--space-10);
}

/* Sepetim sayfası — Hepsiburada/Trendyol tarzı iki sütunlu düzen */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: var(--space-6);
	align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce-cart-form {
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2) var(--space-5);
	box-shadow: var(--shadow-sm);
}
.woocommerce-cart table.cart {
	border: none;
}
.woocommerce-cart table.cart thead th {
	border: none;
	border-bottom: 2px solid var(--cozumoto-border);
	color: var(--cozumoto-text-muted);
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.02em;
	padding: var(--space-4) var(--space-2);
}
.woocommerce-cart table.cart td {
	border: none;
	border-bottom: 1px solid var(--cozumoto-border);
	padding: var(--space-4) var(--space-2);
	vertical-align: middle;
}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item:last-of-type td {
	border-bottom: none;
}
.woocommerce-cart table.cart .product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--cozumoto-border);
}
.woocommerce-cart table.cart .product-name a {
	color: var(--cozumoto-navy);
	font-weight: 600;
}
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	color: var(--cozumoto-navy);
	font-weight: 700;
	white-space: nowrap;
}
.woocommerce-cart table.cart td.product-remove {
	text-align: center;
}
.woocommerce-cart table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-gray-bg);
	color: var(--cozumoto-red) !important;
	font-size: 1.1em;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--transition-base);
}
.woocommerce-cart table.cart td.product-remove a.remove:hover {
	background-color: rgba(208, 52, 44, 0.12);
}
.woocommerce-cart table.cart .quantity .qty {
	width: 64px;
	padding: var(--space-2);
	text-align: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--cozumoto-border);
	background-color: var(--cozumoto-gray-bg);
}
.woocommerce-cart table.cart tr.actions {
	background: none;
}
.woocommerce-cart table.cart tr.actions td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-2);
	border-bottom: none;
}
.woocommerce-cart table.cart tr.actions .coupon {
	display: flex;
	gap: var(--space-2);
	flex: 1 1 260px;
}
.woocommerce-cart table.cart tr.actions .coupon #coupon_code {
	flex: 1 1 auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--cozumoto-border);
	background-color: var(--cozumoto-gray-bg);
	padding: var(--space-2) var(--space-3);
}

/* Sağ sütun: sepet toplamları / özet kartı */
.woocommerce-cart .cart-collaterals {
	position: sticky;
	top: var(--space-6);
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	margin: 0;
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
}
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	font-family: var(--font-heading);
	color: var(--cozumoto-navy);
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: var(--space-4);
}
.woocommerce-cart .cart-collaterals table.shop_table {
	display: block;
	width: 100%;
	border: none;
}
.woocommerce-cart .cart-collaterals table.shop_table tbody {
	display: block;
	width: 100%;
}
.woocommerce-cart .cart-collaterals table.shop_table tr {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}
.woocommerce-cart .cart-collaterals table.shop_table th,
.woocommerce-cart .cart-collaterals table.shop_table td {
	display: block;
	border: none;
	border-bottom: 1px solid var(--cozumoto-border);
	padding: var(--space-3) 0;
	font-weight: 500;
}
.woocommerce-cart .cart-collaterals table.shop_table th {
	flex-shrink: 0;
	color: var(--cozumoto-text-muted);
	font-weight: 500;
}
.woocommerce-cart .cart-collaterals table.shop_table td {
	text-align: right;
}
.woocommerce-cart .cart-collaterals table.shop_table tr.order-total th,
.woocommerce-cart .cart-collaterals table.shop_table tr.order-total td {
	border-bottom: none;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--cozumoto-navy);
	padding-top: var(--space-4);
}
.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--space-4);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1em;
	padding: var(--space-3) var(--space-2);
}
.cozumoto-cart-trust-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	color: var(--cozumoto-text-muted);
	font-size: 0.85em;
}
.cozumoto-cart-trust-note img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* YMM (Araç Marka/Model/Yıl) filtre widget'ı */
.cozumoto-ymm-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-4);
	background-color: var(--cozumoto-gray-bg);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
}
.cozumoto-ymm-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1 1 160px;
}
.cozumoto-ymm-field label {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--cozumoto-text-muted);
}
.cozumoto-ymm-field select {
	background-color: #ffffff;
	color: var(--cozumoto-text);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: 0.6em 0.8em;
}
.cozumoto-ymm-submit {
	flex: 0 0 auto;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.cozumoto-ymm-filter {
		flex-direction: column;
		align-items: stretch;
	}
	/* Konteyner sütuna döndüğü için flex-basis artık ANA EKSENDE, yani
	   YÜKSEKLİKTE uygulanıyor: masaüstündeki `flex: 1 1 160px` mobilde her
	   alanı 160px yüksekliğe şişiriyor ve alanlar arasında ~140px ölü boşluk
	   bırakıyordu (2026-08-06'da ölçüldü). Mobilde basis sıfırlanıyor. */
	.cozumoto-ymm-field {
		flex: 0 0 auto;
	}
	.cozumoto-ymm-submit {
		width: 100%;
	}
}

/* Mağaza filtreleri (fiyat, marka, kalite derecesi, stok) */
.cozumoto-shop-filters-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-bottom: var(--space-6);
}
.cozumoto-shop-filters-row .widget {
	flex: 1 1 220px;
	background-color: var(--cozumoto-gray-bg);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.cozumoto-shop-filters-row .widget-title {
	margin-top: 0;
	margin-bottom: var(--space-3);
	font-size: 1em;
	color: var(--cozumoto-navy);
}
.cozumoto-stock-filter-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.cozumoto-stock-filter-widget a {
	color: var(--cozumoto-text);
}
.cozumoto-stock-filter-widget li.chosen a {
	color: var(--cozumoto-orange-dark);
	font-weight: 700;
}
.price_slider_wrapper .ui-slider .ui-slider-range {
	background-color: var(--cozumoto-orange);
}
.price_slider_wrapper .ui-slider .ui-slider-handle {
	border-color: var(--cozumoto-orange-dark);
	background-color: #ffffff;
}
.price_slider_wrapper .button {
	margin-top: var(--space-3);
}

/* Ürün sayfası "Uyumlu Araçlar" sekmesi */
.cozumoto-compatible-vehicles {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cozumoto-compatible-vehicles li {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--cozumoto-border);
}
.cozumoto-compatible-vehicles li:last-child {
	border-bottom: none;
}

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}
	.woocommerce-cart .cart-collaterals {
		position: static;
	}
}
/* WooCommerce'in woocommerce-smallscreen.css'i (data-title etiketlerini
   gösteren) tam olarak 768px'de devreye giriyor (bkz. wc_style_smallscreen_breakpoint) —
   thead'i bu eşikten daha geniş bir noktada gizlersek etiketsiz hücreler kalır,
   bu yüzden burada da temanın diğer yerlerinde kullandığı 767px eşiği kullanılıyor. */
@media (max-width: 767px) {
	.woocommerce-cart table.cart thead {
		display: none;
	}
	.woocommerce-cart table.cart td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}
	.woocommerce-cart table.cart td.product-thumbnail {
		justify-content: flex-start;
	}
	/* Issue #66/1 — data-title etiketi ("Ürün:") dar flex hücrede harf harf
	   kırılıyordu ("Ür ün :"). Etiket tek parça kalır, daralan taraf içerik
	   olur. */
	.woocommerce-cart table.cart td::before {
		flex: 0 0 auto;
		white-space: nowrap;
		word-break: normal;
		overflow-wrap: normal;
	}
	/* Issue #66/3 — kupon alanı + "Sepeti güncelle" 390px'te yan yana sıkışıp
	   36px'lik hedeflere düşüyordu. Alt alta, tam genişlik, 44 px dokunma
	   yüksekliği (issue #60 standardı). */
	.woocommerce-cart table.cart tr.actions td.actions {
		flex-direction: column;
		align-items: stretch;
	}
	.woocommerce-cart table.cart tr.actions .coupon {
		flex: 1 1 auto;
		width: 100%;
		flex-wrap: wrap;
	}
	.woocommerce-cart table.cart tr.actions .coupon #coupon_code {
		min-height: 44px;
	}
	.woocommerce-cart table.cart tr.actions .button {
		width: 100%;
		min-height: 44px;
	}
	.woocommerce-cart table.cart tr.actions .coupon .button {
		width: auto;
		flex: 0 0 auto;
	}
}

/* Issue #66/2 — Toplamlar kutusunda etiket ÇİFT basılıyordu: masaüstü kart
   düzenimiz th'yi her genişlikte görünür tutuyor, WooCommerce'in
   woocommerce-smallscreen.css'i ise ≤768px'te td::before ile data-title'ı
   AYRICA basıyor ("Ara Toplam | Ara Toplam:617,80 ₺"). th zaten görünür
   olduğundan sözde-eleman etiketi koşulsuz kapatılıyor. */
.woocommerce-cart .cart-collaterals table.shop_table td::before {
	display: none;
	content: none;
}

/* ============================================================
   2026-08-06 tasarım denetimi düzeltmeleri
   ============================================================ */

/* --- Ana sayfadaki araç seçici (YMM) ---
   Hero'nun hemen altında, huninin birincil girişi. Hero lacivert olduğu için
   seçici beyaz kart olarak ayrışıyor ve hero ile kategori grid'i arasındaki
   geçişi de dolduruyor. */
.cozumoto-ymm-hero {
	max-width: 1000px;
	margin: calc(-1 * var(--space-8)) auto var(--space-12);
	padding: 0 var(--space-4);
	position: relative;
	z-index: 2;
}
.cozumoto-ymm-hero-inner {
	background-color: #ffffff;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-6);
	text-align: center;
}
.cozumoto-ymm-hero h2 {
	font-size: 1.4em;
	margin-bottom: var(--space-1);
}
.cozumoto-ymm-hero p {
	color: var(--cozumoto-text-muted);
	margin-bottom: var(--space-5);
}
.cozumoto-ymm-hero .cozumoto-ymm-filter {
	margin: 0;
}

/* --- Ürün sayfası güvence satırları --- */
.cozumoto-urun-guvence {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: var(--space-4);
	background-color: var(--cozumoto-gray-bg);
	border-radius: var(--radius-md);
	border: 1px solid var(--cozumoto-border);
}
.cozumoto-urun-guvence li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-2) 0;
	font-size: 0.92em;
	color: var(--cozumoto-text);
}
.cozumoto-urun-guvence li + li {
	border-top: 1px solid var(--cozumoto-border);
}
.cozumoto-urun-guvence img {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* --- Ürün kartında marka etiketi --- */
.cozumoto-loop-marka {
	display: block;
	/* Ürünlerin bir kısmında marka verisi yok; etiket boşken başlık yukarı
	   kayıp fiyat hattı karttan karta zıplıyordu. Yükseklik her kartta
	   SABİT (min-height değil): dolu ve boş etiketin satır kutusu birebir
	   aynı olsun, aksi halde 5px'lik kayma kalıyor. */
	height: 1.2em;
	line-height: 1.2;
	overflow: hidden;
	font-family: var(--font-heading);
	font-size: 0.72em;
	font-weight: 700;
	color: var(--cozumoto-text-muted);
	margin-bottom: var(--space-1);
}

/* --- Mağaza sayfasındaki filtre/grid boşluğu ---
   YITH filtre bileşeni kendi alt boşluğunu bırakıyor, üstüne Storefront'un
   arşiv açıklaması boşluğu ekleniyordu; ikisi üst üste ~200px boş alan
   yaratıp "sayfa bitti" izlenimi veriyordu. */
.woocommerce .term-description,
.woocommerce-page .woocommerce-products-header {
	margin-bottom: var(--space-4);
}
.cozumoto-shop-filters-row {
	margin-bottom: var(--space-6);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--space-4);
}

/* --- Mobil: sabit alt çubuğun içeriği örtmesi ---
   Storefront'un handheld footer bar'ı position:fixed; sayfanın son bloğu
   (güven şeridi / hero CTA) çubuğun altında kalıyordu. */
@media (max-width: 767px) {
	body.woocommerce-active {
		padding-bottom: 60px;
	}
	.cozumoto-ymm-hero {
		margin-top: var(--space-6);
	}
}

/* --- Header iletişim şeridi ---
   Her sayfada, kaydırmadan görünen tek iletişim noktası. Lacivert zemin
   header'ın beyazından ayrışıyor ve sayfanın en üstünde duruyor. */
.cozumoto-header-iletisim {
	background-color: var(--cozumoto-navy);
	color: #d9e2ec;
	font-size: 0.85em;
}
.cozumoto-header-iletisim-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-2) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.cozumoto-header-iletisim-slogan {
	color: #aebdcd;
}
.cozumoto-header-telefon {
	color: #ffffff;
	font-weight: 700;
	font-family: var(--font-heading);
	letter-spacing: 0.02em;
}
a.cozumoto-header-telefon:hover {
	color: var(--cozumoto-orange);
}

/* --- Footer iletişim / satıcı bilgileri --- */
.cozumoto-footer-iletisim {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
}
.cozumoto-footer-iletisim-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
}
.cozumoto-footer-sutun {
	flex: 1 1 280px;
}
.cozumoto-footer-sutun h3 {
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: var(--space-3);
}
.cozumoto-footer-sutun ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cozumoto-footer-sutun li {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
	font-size: var(--fs-2);
	line-height: 1.5;
}
.cozumoto-footer-etiket {
	flex: 0 0 116px;
	color: #8fa3b8;
}
/* Seçici Storefront'un `.site-footer a` kuralını yenmek zorunda: aksi halde
   bağlantılar #333 koyu gri kalıyor ve lacivert zeminde kontrast ~1.4:1'e
   düşüp okunmaz oluyordu (2026-08-06'da ölçüldü). */
/* Storefront'un Customizer inline stili `.site-footer a:not(.button)
   :not(.components-button)` ile geliyor — özgüllüğü (0,3,1) ve child temanın
   stil dosyasından SONRA basıldığı için sıradan bir `.site-footer a` kuralı
   kaybediyordu; sonuç lacivert zeminde #333 bağlantı, ~1,4:1 kontrast
   (2026-08-06'da tarayıcıda ölçüldü). Bu yüzden özgüllük bilinçli olarak
   (0,4,1)'e çıkarıldı. */
.site-footer .cozumoto-footer-iletisim .cozumoto-footer-sutun a:not(.button) {
	color: #ffffff;
	text-decoration: none;
}
.site-footer .cozumoto-footer-iletisim .cozumoto-footer-sutun a:not(.button):hover {
	color: var(--cozumoto-orange);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.cozumoto-header-iletisim-inner {
		justify-content: center;
		text-align: center;
	}
	.cozumoto-header-iletisim-slogan {
		display: none; /* dar ekranda yalnızca numara kalsın */
	}
	.cozumoto-footer-sutun li {
		flex-direction: column;
		gap: 0;
	}
	.cozumoto-footer-etiket {
		flex: none;
	}
}

/* --- Fiyat aralığı kaydırıcısı ---
   jQuery UI slider'ın kendi görsel stilleri Storefront'ta sidebar bağlamında
   geliyor; widget'ı elle bastığımız için track ve tutamaçlar görünmüyordu ve
   kutu "kırık" duruyordu (yalnızca buton + metin görünüyordu). */
.cozumoto-price-filter-widget .price_slider_wrapper {
	margin-bottom: var(--space-4);
}
.cozumoto-price-filter-widget .price_slider {
	position: relative;
	height: 6px;
	margin: var(--space-5) var(--space-2) var(--space-6);
	background-color: var(--cozumoto-border);
	border-radius: var(--radius-full);
	border: 0;
}
.cozumoto-price-filter-widget .ui-slider-range {
	position: absolute;
	height: 100%;
	background-color: var(--cozumoto-orange);
	border-radius: var(--radius-full);
	border: 0;
}
.cozumoto-price-filter-widget .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY(-50%);
	background-color: #ffffff;
	border: 2px solid var(--cozumoto-navy);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	cursor: grab;
}
.cozumoto-price-filter-widget .ui-slider-handle:focus-visible {
	/* Issue #64: odak göstergesi turuncu (beyazda 2,61:1) yerine lacivert (15,63:1). */
	outline: 2px solid var(--cozumoto-navy);
	outline-offset: 2px;
}
.cozumoto-price-filter-widget .price_label {
	color: var(--cozumoto-text-muted);
	font-size: 0.9em;
}

/* Fiyat filtresindeki "Filtrele" ikincil bir eylem; YMM'nin turuncu birincil
   butonuyla yarışmasın diye lacivert çerçeveli ikincil stile alındı. */
.cozumoto-price-filter-widget .button,
.cozumoto-price-filter-widget button[type="submit"] {
	background-color: transparent;
	border: 2px solid var(--cozumoto-navy);
	color: var(--cozumoto-navy);
	box-shadow: none;
}
.cozumoto-price-filter-widget .button:hover,
.cozumoto-price-filter-widget button[type="submit"]:hover {
	background-color: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #ffffff;
}

/* --- Güven rozetleri şeridi: ortala, savrulmayı önle --- */
.cozumoto-trust-inner {
	justify-content: center;
	gap: var(--space-8);
}

/* --- Ana sayfa kategori grid'i: 7 kart 4+3 olarak otursun, yetim kart kalmasın --- */
@media (min-width: 901px) {
	.cozumoto-categories-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	/* Sabit alt çubuk 69px; önceki 60px'lik boşluk yetmiyor ve footer'ın son
	   satırı çubuğun altında kalıyordu (2026-08-06'da ölçüldü). */
	body.woocommerce-active {
		padding-bottom: 76px;
	}
}

@media (max-width: 600px) {
	/* Tek kolonlu grid'de 24 ürün ~18.000px'lik bir sayfa yapıyordu; Türk
	   kullanıcısı da mobilde 2 kolon bekliyor (Trendyol/Hepsiburada alışkanlığı). */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100%;
		margin: 0;
		padding: var(--space-3);
		float: none;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.85em;
	}
}

/* --- Sayfa giriş ritmi ---
   Ürün sayfasında H1 navigasyona 1px mesafede başlıyordu (ölçüldü); mağaza ve
   kategori sayfaları ise geniş üst boşluk kullanıyor. Üç şablonun girişi
   aynı ritme getiriliyor. */
.single-product div.product .product_title {
	margin-top: var(--space-6);
}
.woocommerce-products-header {
	margin-bottom: var(--space-5);
}

/* Mağazada filtre bloğu ile ürün listesi arasındaki ölü alan (ölçülen 136px +
   69px) daraltılıyor; "sayfa bitti" izlenimi veriyordu. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	margin: var(--space-4) 0 var(--space-2);
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	margin-bottom: var(--space-2);
}
.woocommerce ul.products,
.woocommerce-page ul.products {
	margin-top: var(--space-4);
	clear: both;
}

/* Kategori arşivinde başlık ile filtre arası nefes alsın (ölçülen 8px). */
.tax-product_cat .woocommerce-products-header,
.tax-product_cat .term-description {
	margin-bottom: var(--space-6);
}

/* Storefront widget'lara 3.7em (~59px) alt boşluk veriyor; filtre kutuları
   yan yana dizildiğinde bu boşluk üst üste binip filtre bloğu ile ürün
   listesi arasında büyük bir ölü alan bırakıyordu (ölçülen ~150px). Yalnızca
   bizim filtre kutularımızda daraltılıyor, sidebar widget'ları etkilenmiyor. */
.cozumoto-shop-filters-row .widget,
.cozumoto-attr-filter-widget {
	margin-bottom: var(--space-4);
}
.cozumoto-attr-filter-widget ul {
	margin-bottom: 0;
}

/* Filtre şeridi: dört filtre (marka, kalite, fiyat, stok) tek satırda eşit
   sütunlar halinde. Dar ekranda ikişerli, en dar ekranda alt alta. */
.cozumoto-shop-filters-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: flex-start;
}
.cozumoto-shop-filters-row > .widget {
	flex: 1 1 200px;
	background-color: var(--cozumoto-gray-bg);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: 0;
}
.cozumoto-shop-filters-row .widget-title {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cozumoto-text-muted);
	margin-bottom: var(--space-2);
}
.cozumoto-shop-filters-row select {
	width: 100%;
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	list-style: none;
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget li {
	margin: 0;
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget a {
	display: inline-block;
	padding: 2px var(--space-3);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-full);
	background-color: #ffffff;
	font-size: 0.88em;
	color: var(--cozumoto-text);
	text-decoration: none;
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget li.chosen a {
	background-color: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #ffffff;
}

/* Filtre kutularındaki "Uygula" butonları ikincil eylem; şeritte üç turuncu
   buton yan yana gelince (YMM + iki Uygula) vurgu değeri bölünüyordu. */
.cozumoto-shop-filters-row .widget .button,
.cozumoto-shop-filters-row .widget button[type="submit"] {
	background-color: transparent;
	border: 2px solid var(--cozumoto-navy);
	color: var(--cozumoto-navy);
	box-shadow: none;
	font-size: 0.88em;
	/* Issue #60: butonlar 36x12 px ölçülmüştü (WCAG 2.5.8 minimumu 24x24'ün
	   yarısı). Görünür oldukları her durumda en az 44 px dokunma yüksekliği. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
}
.cozumoto-shop-filters-row .widget .button:hover,
.cozumoto-shop-filters-row .widget button[type="submit"]:hover {
	background-color: var(--cozumoto-navy);
	color: #ffffff;
	transform: none;
}

/* Kutular eşit yükseklikte dursun; fiyat kutusu diğerlerinden taşıyordu. */
.cozumoto-shop-filters-row {
	align-items: stretch;
}
.cozumoto-shop-filters-row > .widget {
	display: flex;
	flex-direction: column;
}
.cozumoto-shop-filters-row .price_slider_wrapper {
	margin-bottom: var(--space-2);
}

/* GÖREV 2 — Mobil grid'de ilk kart tek başına sağ sütuna düşüyordu.
   Sebep: WooCommerce/Storefront listeye clearfix için ::before/::after
   sözde-elemanı basıyor; float düzeninde görünmez olan bu elemanlar CSS
   GRID'de gerçek birer hücre işgal edip ilk ürünü ikinci sütuna itiyor
   (2026-08-07'de ölçüldü: ilk kart x=201, ikinci kart x=23). */
@media (max-width: 600px) {
	.woocommerce ul.products::before,
	.woocommerce ul.products::after,
	.woocommerce-page ul.products::before,
	.woocommerce-page ul.products::after {
		display: none;
	}
}

/* GÖREV 4 — Geniş ekranda 4 sütun. 1440px'te 3 dev kart, görselsiz yer
   tutucuyu büyütüp sayfayı boş gösteriyordu. */
@media (min-width: 1280px) {
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
	.woocommerce ul.products.columns-3::before,
	.woocommerce ul.products.columns-3::after {
		display: none;
	}
	/* KRİTİK: Storefront kartlara `width: 30.7%` gibi YÜZDE genişlik + float
	   veriyor. Liste grid'e alınınca bu yüzde artık konteynerin değil GRID
	   TRACK'inin genişliğine göre hesaplanıyor: 251px'lik rayda kart 76px'e
	   çöküyor, "Sepete Ekle" harf harf alt alta iniyordu (2026-08-07'de
	   ölçüldü). Float ve yüzde genişlik grid bağlamında tamamen iptal
	   edilmek zorunda; seçici Storefront'unkini yenecek özgüllükte. */
	/* Seçici bilinçli olarak uzun: Storefront'un kart genişliğini
	   `.page-template-template-fullwidth-php .site-main ul.products li.product`
	   ve `.site-main ul.products.columns-3 li.product` ile veriyor — ikisi de
	   benim önceki kuralımla EŞİT özgüllükte olduğu ve sonra geldiği için
	   kazanıyordu. body.woocommerce + .site-main eklenerek aşılıyor. */
	body.woocommerce .site-main ul.products li.product,
	body.woocommerce .site-main ul.products.columns-3 li.product,
	body.woocommerce-page .site-main ul.products li.product,
	body.woocommerce-page .site-main ul.products.columns-3 li.product {
		width: auto;
		max-width: none;
		margin: 0;
		float: none;
		clear: none;
	}
}

/* GÖREV 3 — Storefront `.woocommerce-products-header`'a ~96px alt dolgu
   veriyor; filtre şeridiyle ürün araç çubuğu arasında 136px ölü alan
   bırakıyordu (2026-08-07'de ölçüldü). Filtreler bu başlığın içinde
   olduğu için dolgu burada daraltılıyor. */
/* Kazanan kural Storefront'un `body.storefront-full-width-content ...`
   zincirli seçicisi (özgüllük 0,3,1); sıradan bir `.woocommerce
   .woocommerce-products-header` kuralı kaybediyor. Body sınıfı seçiciye
   dahil edilerek aşılıyor. */
body.storefront-full-width-content .woocommerce-products-header,
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
	padding-bottom: 0;
	margin-bottom: var(--space-4);
}

/* GÖREV 1 — Mobil filtre akordeonu.
   Masaüstünde akordeon görünmez: başlık gizli, panel her zaman açık. */
.cozumoto-filtre-akordeon-baslik {
	display: none;
}
.cozumoto-filtre-akordeon > .cozumoto-shop-filters-row {
	display: flex;
}

@media (max-width: 767px) {
	.cozumoto-filtre-akordeon-baslik {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		cursor: pointer;
		list-style: none;
		padding: var(--space-3) var(--space-4);
		margin-bottom: var(--space-4);
		background-color: #ffffff;
		border: 2px solid var(--cozumoto-navy);
		border-radius: var(--radius-md);
		font-family: var(--font-heading);
		font-weight: 600;
		color: var(--cozumoto-navy);
	}
	.cozumoto-filtre-akordeon-baslik::-webkit-details-marker {
		display: none;
	}
	.cozumoto-filtre-akordeon-baslik::after {
		content: "+";
		font-size: 1.25em;
		color: var(--cozumoto-orange);
	}
	.cozumoto-filtre-akordeon[open] > .cozumoto-filtre-akordeon-baslik::after {
		content: "−";
	}
	.cozumoto-shop-filters-row > .widget {
		flex: 1 1 100%;
	}
}

/* GÖREV 6 — Katalog breadcrumb'ı: ince, muted, ana navigasyonla yarışmayan. */
/* Breadcrumb bir menü değil, konum bilgisi: küçük, soluk ve içeriğe yapışık.
   Ana navigasyonun hemen altında geniş/kontrastlı durunca ikinci menü gibi
   okunuyordu (issue #7'nin gerekçesi). */
/* Yol izi şeridi: kendi açık zemini + alt ayraç. Zeminsizken lacivert
   başlığın hemen altında havada duran bir bağlantı satırıydı ve "ikinci
   menü" gibi okunuyordu. İçi .col-full ile sayfa hizasında. */
.cozumoto-breadcrumb-serit {
	background-color: var(--cozumoto-gray-bg);
	border-bottom: 1px solid var(--cozumoto-border);
}
.cozumoto-breadcrumb-serit .col-full {
	padding-top: 10px;
	padding-bottom: 10px;
}
.cozumoto-breadcrumb {
	font-size: 0.78em;
	color: var(--cozumoto-text-muted);
	margin: 0;
	padding: 0;
	opacity: 1;
	line-height: 1.5;
}
/* Issue #64: canlıda linkler #727272 ölçüldü (gri şeritte 4,45:1 — AA'nın kıl
   payı altı). Sebep: storefront-woocommerce-style bu dosyadan SONRA yükleniyor
   ve `.woocommerce-breadcrumb a` (0,1,1) eşit özgüllükle kazanıyordu. Seçici
   (0,2,1)'e çıkarıldı; --cozumoto-text-muted (#5b6270) gri zeminde (#f5f6f8)
   5,67:1, beyazda 6,13:1 (AA ✓). */
.cozumoto-breadcrumb a,
.woocommerce-breadcrumb.cozumoto-breadcrumb a {
	color: var(--cozumoto-text-muted);
	text-decoration: none;
}
.cozumoto-breadcrumb a:hover,
.woocommerce-breadcrumb.cozumoto-breadcrumb a:hover {
	/* Turuncu metin açık zeminde 2,61:1 — hover'da bile okunur kalması için
	   koyu turuncu + alt çizgi (renkten bağımsız ipucu). */
	color: var(--cozumoto-orange-dark);
	text-decoration: underline;
}
.cozumoto-breadcrumb-ayrac {
	color: var(--cozumoto-border);
	margin: 0 2px;
}
/* 390px'te uzun ürün adı ikinci satıra sarkıp yol izini iki satırlık bir
   blok hâline getiriyordu ("Arka" tek başına alt satırda). Tek satıra
   kilitlenip taşan kısım üç noktaya iniyor — kırpılan parça zaten hemen
   altındaki H1'de tam hâliyle duruyor. */
@media (max-width: 767px) {
	.cozumoto-breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* GÖREV 8 — Boş sepette kargo eşiği */
.cozumoto-empty-cart-kargo {
	color: var(--cozumoto-text-muted);
	font-size: 0.95em;
	margin-top: calc(-1 * var(--space-2));
}

/* GÖREV 7 — Mobil alt çubuk markalanıyor. Sitenin en çok dokunulan mobil
   bileşeni jenerik beyaz Storefront çubuğu olarak duruyordu. */
@media (max-width: 767px) {
	.storefront-handheld-footer-bar {
		background-color: var(--cozumoto-navy);
		border-top: 0;
		box-shadow: 0 -2px 12px rgba(17, 23, 38, 0.18);
	}
	/* Etiketler PHP tarafında ("Hesabım/Ara/Sepetim") uzun süredir DOM'daydı
	   ama GÖRÜNMÜYORDU: Storefront `ul li > a` üzerine `text-indent:-9999px`
	   koyup metni ekran dışına atıyor, ikonu mutlak konumlu ::before ile
	   çiziyor. Metni geri getirmek için text-indent iptal ediliyor ve ikon
	   akışa alınıp üste, etiket altına yerleşiyor (Trendyol/Hepsiburada
	   kalıbı). Yalnızca PHP'ye etiket eklemek YETMİYOR — 6. tur denetimi bu
	   yüzden "etiket yok" dedi. */
	#colophon .storefront-handheld-footer-bar ul li > a {
		color: #ffffff;
		font-size: 0.66em;
		line-height: 1.15;
		text-indent: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: auto;
		min-height: 58px;
		padding: 7px 2px 7px;
		white-space: nowrap;
		overflow: hidden;
		text-decoration: none;
		letter-spacing: 0.01em;
	}
	#colophon .storefront-handheld-footer-bar ul li > a::before {
		color: #ffffff;
		position: static;
		display: block;
		font-size: 1.45em;
		line-height: 1;
		margin-bottom: 5px;
	}
	/* Sayaç ikona göre konumlanıyor; ikon artık akışta olduğu için
	   Storefront'un top:.875em/left:50% değerleri kaymış durumda. */
	#colophon .storefront-handheld-footer-bar ul li.cart .count {
		background-color: var(--cozumoto-orange);
		/* Issue #59: turuncu zeminde lacivert 5,98:1 (beyaz 2,61:1 idi). */
		color: var(--cozumoto-navy);
		border-color: var(--cozumoto-orange);
		font-weight: 700;
		top: 4px;
		left: 56%;
		font-size: 0.62em;
	}
	/* Issue #64: lacivert çubukta odak göstergesi beyaz — turuncu burada da
	   göstergelikten çıkarıldı (lacivert/beyaz 15,63:1). */
	.storefront-handheld-footer-bar ul li > a:focus-visible {
		outline: 2px solid #ffffff;
		outline-offset: -2px;
	}

	/* Güven rozetleri 2+1 kırılıyordu. Seçici `.cozumoto-trust-strip
	   .cozumoto-trust-inner` olmak ZORUNDA: tek sınıflı bir kural, dosyanın
	   üstündeki iki sınıflı flex kuralını ezemiyor ve display flex kalıyordu. */
	.cozumoto-trust-strip .cozumoto-trust-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-2);
		justify-content: initial;
	}
	.cozumoto-trust-strip .cozumoto-trust-item {
		min-width: 0;
	}
	.cozumoto-trust-item span {
		font-size: 0.72em;
		line-height: 1.25;
	}
}

/* Sepet sayfasında header araması diğer sayfalardaki tam kutu yerine 58px'lik
   bir parçaya düşüyordu (ölçüldü: 231px ↔ 58px). Storefront sepet şablonunda
   header düzeni farklı; arama kutusuna alt sınır verilerek tüm şablonlarda
   aynı bileşen görünümü sağlanıyor. */
.site-header .site-search .search-field,
.site-header .widget_product_search .search-field {
	min-width: 200px;
	width: 100%;
}
@media (max-width: 767px) {
	.site-header .site-search .search-field,
	.site-header .widget_product_search .search-field {
		min-width: 0;
	}
}

/* GÖREV 4 — Marka/Kalite filtrelerinde seçim otomatik uygulanıyor; "Uygula"
   butonu görsel gürültü. Gizleniyor ama DOM'dan kaldırılmıyor: JavaScript
   çalışmayan tarayıcıda filtre yine kullanılabilsin diye (kullanıcı Tab ile
   butona erişebilir). */
/* DÜZELTME (2026-08-07): önceki seçici tutmuyordu — butonun sınıfı
   `woocommerce-widget-layered-nav-dropdown__submit`, `.button` değil. Bu
   yüzden "Uygula" butonları ekranda görünmeye devam ediyordu (denetimde
   yakalandı). Fiyat kutusundaki "Filtrele" de aynı şekilde gizleniyor;
   seçim/kaydırma bitince otomatik uygulanıyor. */
.cozumoto-shop-filters-row .woocommerce-widget-layered-nav-dropdown__submit,
.cozumoto-shop-filters-row .price_slider_amount .button,
.cozumoto-attr-filter-widget .button,
.cozumoto-attr-filter-widget button[type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Klavye kullanıcısı için buton geri gelmeli — fiyat kutusundaki
   "Filtrele" de dahil (JS devre dışıysa tek uygulama yolu odur). */
.cozumoto-shop-filters-row .price_slider_amount .button:focus-visible,
.cozumoto-attr-filter-widget .button:focus-visible,
.cozumoto-attr-filter-widget button[type="submit"]:focus-visible {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* GÖREV 7 — "Tüm Ürünler" kartı diğer kategori kartlarıyla aynı gövdede ama
   hafif turuncu zeminle ayrışıyor (kategori değil, eylem). */
.cozumoto-category-card-tumu {
	background-color: var(--cozumoto-orange-tint);
	border-color: rgba(255, 161, 4, 0.35);
}
.cozumoto-category-card-tumu .cozumoto-category-icon {
	color: var(--cozumoto-orange-dark);
}
.cozumoto-category-card-tumu svg {
	width: 24px;
	height: 24px;
}

/* Hesabım — üyeliksiz alışveriş notu */
.cozumoto-account-misafir-notu {
	max-width: 420px;
	margin: var(--space-5) auto 0;
	text-align: center;
	font-size: 0.92em;
	color: var(--cozumoto-text-muted);
}

/* GÖREV 5 — Boş sepet kartı tek hizalama ekseninde: ikon, başlık, eşik metni
   ve buton dikey akışta ortalanmış. Önceden buton sağda yüzüyor, eşik metni
   solda kalıyordu (üç farklı eksen). */
.cozumoto-empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
}
.cozumoto-empty-cart .cart-empty,
.cozumoto-empty-cart .return-to-shop,
.cozumoto-empty-cart-kargo {
	margin: 0;
	width: 100%;
	text-align: center;
}
.cozumoto-empty-cart .return-to-shop {
	margin-top: var(--space-2);
}

/* ============================================================
   Marka imzası — 2026-08-07 karakter turu
   ============================================================ */

/* GÖREV 5 — Bölüm/sayfa başlığı imzası: başlığın altında kısa turuncu şerit.
   Marka kişiliği tekrarla kurulur; başlıklar bugüne kadar tamamen anonimdi.
   Tek sınıf, her yerde aynı ölçü. */
.cozumoto-baslik,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.cozumoto-neden-inner h2,
.related > h2,
.up-sells > h2 {
	position: relative;
	padding-bottom: var(--space-3);
}
.cozumoto-baslik::after,
.woocommerce-products-header__title::after,
.woocommerce div.product .product_title::after,
.related > h2::after,
.up-sells > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-orange);
}
/* Ortalanmış başlıklarda şerit de ortalanır. */
.cozumoto-baslik,
.woocommerce-products-header__title,
.related > h2,
.up-sells > h2 {
	text-align: center;
}
.cozumoto-baslik::after,
.woocommerce-products-header__title::after,
.related > h2::after,
.up-sells > h2::after {
	left: 50%;
	transform: translateX(-50%);
}
/* Ürün başlığı sola hizalı kalsın. */
.woocommerce div.product .product_title {
	text-align: left;
}
.woocommerce div.product .product_title::after {
	left: 0;
	transform: none;
}

/* GÖREV 2 — "Neden biz" paneli: lacivert zemin, soluk dişli deseni, rakamlı USP */
.cozumoto-neden {
	position: relative;
	background-color: var(--cozumoto-navy);
	border-radius: var(--radius-lg);
	margin: var(--space-12) auto;
	max-width: 1100px;
	overflow: hidden;
}
/* Arka plan motifi ayrı katmanda: ikon lacivert konturlu olduğu için lacivert
   zeminde doğrudan kullanılınca görünmüyordu. Beyaza çevrilip %7 opaklıkla
   basılıyor — metin kontrastını bozmayacak kadar soluk. */
.cozumoto-neden::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/sahne/blueprint.webp") no-repeat center / cover;
	opacity: 0.28;
	pointer-events: none;
}
.cozumoto-neden-inner {
	position: relative;
}
.cozumoto-neden-inner {
	padding: var(--space-10) var(--space-6);
	text-align: left;
	backdrop-filter: none;
}
.cozumoto-neden h2 {
	color: #ffffff;
}
.cozumoto-neden-giris {
	color: #c9d6e4;
	max-width: 620px;
	margin: 0 0 var(--space-6);
}
.cozumoto-neden-liste {
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
.cozumoto-neden-liste li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.cozumoto-neden-rakam {
	font-family: var(--font-heading);
	font-size: 1.7em;
	font-weight: 700;
	color: var(--cozumoto-orange);
	line-height: 1.1;
}
.cozumoto-neden-metin {
	color: #c9d6e4;
	font-size: 0.9em;
	line-height: 1.35;
}
.cozumoto-neden-cta.button {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	color: var(--cozumoto-navy);
}

@media (max-width: 767px) {
	.cozumoto-neden-liste {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
	.cozumoto-neden {
		background-size: 220px 220px;
	}
	.cozumoto-neden-inner {
		padding: var(--space-8) var(--space-4);
	}
}

/* Dört rozet: masaüstünde tek satır, mobilde 2×2. */
@media (max-width: 767px) {
	.cozumoto-trust-strip .cozumoto-trust-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* GÖREV 3 — Kart üst satırı: marka + parça türü rozeti aynı hizada.
   Yükseklik sabit (2. turdaki hizalama kararıyla aynı kalıp): rozetsiz/markasız
   kartlarda da fiyat hattı kaymasın. */
.cozumoto-loop-ust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	/* Sabit px: 12 px rozet (satır 1,5 + dolgu + kenarlık = 22 px) 1.5em'lik
	   masaüstü satırına (21 px) sığmayıp alttan kırpılıyordu. */
	height: 24px;
	margin-bottom: var(--space-1);
	overflow: hidden;
}
.cozumoto-loop-marka {
	display: inline-block;
	font-family: var(--font-heading);
	/* Issue #61: en az 12 px. 0.75em masaüstü kartta 10,5 px'e düşüyordu → ölçek. */
	font-size: var(--fs-1);
	font-weight: 700;
	/* Büyük harf yok: tr-TR'de CSS uppercase marka adını bozar (Bitapart →
	   BİTAPART) ve kartta "BİTAP…" diye kesiyordu (24.10.2026 denetimi). */
	color: var(--cozumoto-text-muted);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
	margin: 0;
	height: auto;
	min-height: 0;
}
.cozumoto-loop-rozet {
	flex: 0 0 auto;
	/* Issue #61: muadil/orijinal rozeti satın alma kararının kendisi — en az
	   12 px; 0.75em masaüstü kartta 10,5 px'e düşüyordu → ölçek. */
	font-size: var(--fs-1);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px var(--space-2);
	border-radius: var(--radius-full);
	line-height: 1.5;
}
.cozumoto-loop-rozet--muadil {
	border: 1px solid var(--cozumoto-border);
	color: var(--cozumoto-text-muted);
	background-color: #ffffff;
}
.cozumoto-loop-rozet--orijinal {
	background-color: var(--cozumoto-navy);
	color: #ffffff;
}

/* Kart fiyatındaki "KDV dahil" tek parça: fiyatın yanına sığmazsa bütün
   olarak alt satıra iner ("KDV" ⏎ "dahil" bölünmesi 24.10.2026 denetiminde). */
.woocommerce ul.products li.product .price .cozumoto-kdv-soneki {
	display: inline-block;
	white-space: nowrap;
	font-size: var(--fs-1);
	font-weight: 600;
	color: var(--cozumoto-text-muted);
}

/* Stok kodu — monospace mikro metin, fiyattan belirgin küçük. */
.cozumoto-loop-kod {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.68em;
	color: var(--cozumoto-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: var(--space-1);
}

/* GÖREV 4 — YMM şeridi "garaj" kimliği: sol turuncu vurgu + başlık. */
.cozumoto-ymm-filter {
	border-left: 4px solid var(--cozumoto-orange);
}
.cozumoto-ymm-hero .cozumoto-ymm-filter {
	border-left: 0;
}

/* GÖREV 8 — arama kutusu genişliği */
.site-header .site-search .search-field,
.site-header .widget_product_search .search-field {
	min-width: 320px;
}
@media (max-width: 900px) {
	.site-header .site-search .search-field,
	.site-header .widget_product_search .search-field {
		min-width: 0;
	}
}

/* GÖREV 4 — YMM şeridi başlığı */
/* Kategori kısayol şeridi — katalog sayfalarının en üstü.
   Masaüstünde SARAR: 9 çip tek satıra sığmıyor ve yatay kaydırma çubuğu
   çıkıyordu; kullanıcı "sağa sola kaydırmak lazım" diye işaretledi. İki
   satır, kaydırmasız. Dar ekranda tersi geçerli — orada sarma 4 satır
   yapıp filtreleri ekranın çok aşağısına ittiği için kaydırma kalıyor. */
.cozumoto-kategori-serit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	/* Başlıkla arası 8px kalıyordu — 30px'lik H1'e yapışıp tek bir blok
	   gibi okunuyordu. Şerit kendi bölümü olduğunu göstermeli. */
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
}
@media (max-width: 767px) {
	.cozumoto-kategori-serit {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--space-2);
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		/* Issue #64: şeridin devam ettiğine dair görsel ipucu yoktu. Kaydırma
		   gölgesi tekniği: kenarlarda lacivert tonlu gölge, uçlara gelince
		   beyaz örtüyle kendiliğinden kaybolur (background-attachment local
		   olan katman içerikle kayar, scroll olan sabit kalır). */
		background:
			linear-gradient(90deg, #ffffff 40%, rgba(255, 255, 255, 0)) left / 36px 100%,
			linear-gradient(270deg, #ffffff 40%, rgba(255, 255, 255, 0)) right / 36px 100%,
			radial-gradient(farthest-side at 0 50%, rgba(17, 23, 38, 0.22), transparent) left / 14px 100%,
			radial-gradient(farthest-side at 100% 50%, rgba(17, 23, 38, 0.22), transparent) right / 14px 100%;
		background-repeat: no-repeat;
		background-attachment: local, local, scroll, scroll;
	}
}
.cozumoto-kategori-cip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--cozumoto-border);
	border-radius: 999px;
	background-color: #ffffff;
	color: var(--cozumoto-navy);
	font-size: 0.79em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}
.cozumoto-kategori-cip:hover,
.cozumoto-kategori-cip:focus-visible {
	border-color: var(--cozumoto-orange);
	color: var(--cozumoto-orange);
}
.cozumoto-kategori-cip.is-aktif {
	background-color: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #ffffff;
}
.cozumoto-kategori-cip svg {
	flex: 0 0 auto;
	color: var(--cozumoto-orange);
	transition: color var(--transition-base);
}
.cozumoto-kategori-cip.is-aktif svg {
	color: #ffffff;
}
.cozumoto-kategori-adet {
	font-weight: 400;
	font-size: 0.9em;
	opacity: 0.7;
	/* Rakamlar sabit genişlikte olsun: çipler yan yana dizildiğinde
	   sayılar zıplamıyor. */
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	/* Dokunma hedefi standardı: Apple HIG 44pt, Material 48dp. Çip 37px'ti. */
	.cozumoto-kategori-cip {
		min-height: 44px;
		padding-top: 0;
		padding-bottom: 0;
	}
}
.cozumoto-kategori-cip.is-aktif .cozumoto-kategori-adet {
	opacity: 0.8;
}

/* Katalog içi arama — filtre şeridinin hemen üstünde, tam genişlik. */
.cozumoto-katalog-arama {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
	margin: var(--space-4) 0 var(--space-2);
}
.cozumoto-katalog-arama-ikon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cozumoto-text-muted);
	pointer-events: none;
	display: flex;
}
.cozumoto-katalog-arama input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px 12px 42px;
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	background-color: #ffffff;
	font-size: 0.95em;
	color: var(--cozumoto-navy);
}
.cozumoto-katalog-arama input[type="search"]:focus {
	border-color: var(--cozumoto-orange);
	/* Issue #64: yarı saydam turuncu halka WCAG 1.4.11 (3:1) altında kalıyordu;
	   odak göstergesi lacivert (beyazda 15,63:1). */
	outline: 2px solid var(--cozumoto-navy);
	outline-offset: 0;
}
.cozumoto-katalog-arama button {
	flex: 0 0 auto;
	padding: 0 24px;
	border-radius: var(--radius-md);
	background-color: var(--cozumoto-orange);
	/* Issue #59: "Ara" butonu — turuncu zeminde lacivert 5,98:1 (beyaz 2,61:1 idi). */
	color: var(--cozumoto-navy);
	font-weight: 700;
	border: 0;
	cursor: pointer;
}
.cozumoto-katalog-arama button:hover,
.cozumoto-katalog-arama button:focus-visible {
	background-color: var(--cozumoto-orange-dark, #d88700);
}
.cozumoto-katalog-arama-kapsam {
	margin: 0 0 var(--space-4);
	text-align: left;
	font-size: 0.82em;
	color: var(--cozumoto-text-muted);
}
.cozumoto-katalog-arama-kapsam a {
	color: var(--cozumoto-orange);
}
@media (max-width: 600px) {
	.cozumoto-katalog-arama button {
		padding: 0 16px;
	}
}

.cozumoto-ymm-serit-baslik {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cozumoto-navy);
	margin-bottom: var(--space-2);
}
.cozumoto-ymm-serit-baslik svg {
	color: var(--cozumoto-orange);
	flex: 0 0 auto;
}

/* Kategori arşivinde listeyi önce göster; araç ve alt kategori seçimi
   mobilde özet başlıklarından açılır. Mağaza indeksi kendi yerleşimini korur. */
@media (max-width: 767px) {
	.cozumoto-ymm-disclosure,
	.cozumoto-subcategory-disclosure {
		margin: 0 0 var(--space-3);
	}
	.cozumoto-ymm-disclosure > .cozumoto-ymm-serit-baslik,
	.cozumoto-subcategory-disclosure > .cozumoto-subcategory-summary {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 48px;
		box-sizing: border-box;
		margin: 0;
		padding: 10px 14px;
		border: 1px solid var(--cozumoto-border);
		border-radius: var(--radius-md);
		background: #ffffff;
		color: var(--cozumoto-navy);
		font-size: 13px;
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}
	.cozumoto-ymm-disclosure > summary::-webkit-details-marker,
	.cozumoto-subcategory-disclosure > summary::-webkit-details-marker {
		display: none;
	}
	.cozumoto-ymm-disclosure > summary::after,
	.cozumoto-subcategory-disclosure > summary::after {
		content: '+';
		margin-left: auto;
		font-size: 20px;
		line-height: 1;
		color: var(--cozumoto-orange);
	}
	.cozumoto-ymm-disclosure[open] > summary::after,
	.cozumoto-subcategory-disclosure[open] > summary::after {
		content: '−';
	}
	.cozumoto-subcategory-summary span {
		color: var(--cozumoto-text-muted);
		font-weight: 500;
	}
	.cozumoto-ymm-disclosure > .cozumoto-ymm-filter {
		margin-top: var(--space-2);
		margin-bottom: 0;
	}
	.cozumoto-subcategory-disclosure > .cozumoto-subcategory-grid {
		margin-top: var(--space-2);
	}
}
@media (min-width: 768px) {
	.cozumoto-filtre-kolonu .cozumoto-ymm-disclosure,
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure {
		margin-bottom: var(--space-3);
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-disclosure > summary,
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure > summary {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 46px;
		box-sizing: border-box;
		padding: 10px 12px;
		margin: 0;
		border: 1px solid var(--cozumoto-border);
		border-radius: var(--radius-md);
		background: #ffffff;
		color: var(--cozumoto-navy);
		font-size: 12px;
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure > summary span {
		font-weight: 500;
		color: var(--cozumoto-text-muted);
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-disclosure > summary::-webkit-details-marker,
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure > summary::-webkit-details-marker {
		display: none;
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-disclosure > summary::after,
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure > summary::after {
		content: '+';
		margin-left: auto;
		font-size: 18px;
		color: var(--cozumoto-orange);
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-disclosure[open] > summary::after,
	.cozumoto-filtre-kolonu .cozumoto-subcategory-disclosure[open] > summary::after {
		content: '−';
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-filter {
		margin-top: var(--space-2);
		margin-bottom: 0;
	}
	.cozumoto-filtre-kolonu .cozumoto-ymm-filter select,
	.cozumoto-filtre-kolonu .cozumoto-ymm-submit {
		width: 100%;
		min-width: 0;
		white-space: normal;
	}
}
/* Parça filtresi şeridinin başlığı — araç şeridiyle aynı dil, ama ikincil
   olduğu belli olsun diye rengi soluk. İki şerit birbirinin kopyası
   görünüyordu; kullanıcı iki "Marka" kutusunu mükerrer sandı. */
.cozumoto-filtre-serit-baslik {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cozumoto-text-muted);
	margin: var(--space-5) 0 var(--space-2);
}
.cozumoto-filtre-serit-baslik svg {
	color: var(--cozumoto-text-muted);
	flex: 0 0 auto;
}
@media (max-width: 767px) {
	/* Mobilde filtreler zaten "Filtrele" akordeonunun içinde; ikinci bir
	   başlık gürültü olur. */
	.cozumoto-filtre-serit-baslik {
		display: none;
	}
}

/* ============================================================
   "PARÇA BANKOSU" — teknik fiş ürün kartı (2026-08-07 yön şartnamesi)
   Referans: autodoc.de ürün kartı veri hiyerarşisi, rockauto.com tablo dili.
   Görsel taht'tan indirildi: kart yüksekliğinin ~%45'ini kaplayan placeholder
   dairesi yerine 28px'lik üst şerit + köşede soluk filigran.
   ============================================================ */
/* --- Kart görsel çapası --- */
/* Kartlarda görsel BÖLGESİ yoktu; 24 kart yan yana gelince salt metin
   duvarı oluyordu ve göz tarayacak çapa bulamıyordu. Kategoriye özel çizgi
   ikonu + kategoriye özel zemin tonu: fren kartı ile amortisör kartı bir
   bakışta ayrışıyor. Fotoğraf DEĞİL, öyle de görünmemeli — çizgi ikonu
   bilinçli tercih (ürün fotoğrafının yerine başka bir şeyin fotoğrafını
   koymak yanıltıcı olurdu). */
.cozumoto-kart-gorsel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
	border-bottom: 1px solid var(--cozumoto-border);
	background-color: #eef1f6;
	color: var(--cozumoto-navy);
	border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}
.cozumoto-kart-gorsel svg {
	width: 44px;
	height: 44px;
	opacity: 0.62;
	stroke-width: 1.4;
}
/* Kategoriye göre zemin tonu — tarama çapası bundan geliyor. */
.cozumoto-kart-gorsel--fren-sistemi        { background-color: #fdeceb; color: #a3352c; }
.cozumoto-kart-gorsel--amortisor-suspansiyon { background-color: #eaf1fb; color: #1f4f96; }
.cozumoto-kart-gorsel--motor               { background-color: #f3edfa; color: #5b3a8c; }
.cozumoto-kart-gorsel--filtreler           { background-color: #eaf6ee; color: #22683f; }
.cozumoto-kart-gorsel--aku-elektrik        { background-color: #fdf4e3; color: #8a5a10; }
.cozumoto-kart-gorsel--lastik-jant         { background-color: #eef0f2; color: #3c464f; }
.cozumoto-kart-gorsel--aydinlatma          { background-color: #fdf8e0; color: #8a6b0f; }
.cozumoto-kart-gorsel--motor-yaglari       { background-color: #fbf0e6; color: #8a4b14; }
.cozumoto-kart-gorsel--direksiyon-aks      { background-color: #e9f4f6; color: #1c5f6b; }
.cozumoto-kart-gorsel--sogutma-sistemi     { background-color: #e8f4fb; color: #14587f; }
.cozumoto-kart-gorsel--debriyaj-sanziman   { background-color: #f1eef7; color: #4a3c7a; }
.cozumoto-kart-gorsel--yakit-sistemi       { background-color: #f6f0e8; color: #6d4d1c; }
.cozumoto-kart-gorsel--egzoz-sistemi       { background-color: #eff0f1; color: #45505a; }
.cozumoto-kart-gorsel--diger               { background-color: #f1f2f4; color: #4a545e; }

@media (max-width: 600px) {
	/* Kart dolgusu bu kırılımda --space-3'e (12px) düşüyor; negatif marj
	   ona eşitlenmezse panel kartın dışına 4px taşar. */
	.cozumoto-kart-gorsel {
		height: 76px;
		margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
	}
	.cozumoto-kart-gorsel svg {
		width: 34px;
		height: 34px;
	}
}

.cozumoto-kart-serit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	height: 28px;
	margin: calc(-1 * var(--space-1)) 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cozumoto-border);
	overflow: hidden;
}
.cozumoto-kart-kategori {
	/* Issue #61: 0.66em (10,6 px) okunmuyordu — karar metinleri en az 12 px. */
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cozumoto-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cozumoto-kart-stok {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	/* Issue #61: 0.68em (10,9 px) → 12 px. Renk kontrastı için :root'taki
	   --cozumoto-green notuna bak (5,44:1). */
	font-size: 0.75em;
	font-weight: 600;
	white-space: nowrap;
}
.cozumoto-kart-stok--var { color: var(--cozumoto-green); }
.cozumoto-kart-stok--yok { color: var(--cozumoto-text-muted); }
.cozumoto-kart-nokta {
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background-color: currentColor;
	flex: 0 0 auto;
}
/* Filigran: kartın kimliğini belli eder ama bilgiyi bastırmaz.
   Üst şeritte dururken "Stokta" yazısının üstüne biniyordu; kartın SAĞ ALT
   köşesine alındı — orada metin yok, filigran da daha büyük durabiliyor. */
.woocommerce ul.products li.product {
	position: relative;
	overflow: hidden;
}
.cozumoto-kart-serit,
.woocommerce ul.products li.product > * {
	position: relative;
	z-index: 1;
}

/* Parça kodu — kimliğin kendisi, gizlenmez. */
.cozumoto-loop-kod {
	display: inline-block;
	font-family: var(--font-mono);
	/* Issue #61: 0.7em (11,2 px) → 12 px. */
	font-size: 0.75em;
	color: var(--cozumoto-text);
	background-color: var(--cozumoto-surface);
	border-radius: var(--radius-sm);
	padding: 2px var(--space-2);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: var(--space-2);
}

.cozumoto-kart-kdv {
	display: block;
	/* Issue #61: 0.68em (10,9 px) → 12 px. */
	font-size: 0.75em;
	color: var(--cozumoto-text-muted);
	margin: calc(-1 * var(--space-1)) 0 var(--space-3);
}

/* Fiş tezgâha oturur: hover'da yüzme/gölge yok, üst şerit turuncuya döner. */
.woocommerce ul.products li.product {
	border-top: 2px solid var(--cozumoto-navy);
	text-align: left;
}
.woocommerce ul.products li.product:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--cozumoto-border);
	border-top-color: var(--cozumoto-orange);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-align: left;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(1.3em * 2);
	max-height: calc(1.3em * 2);
	font-size: 0.95em;
}
.cozumoto-loop-ust {
	justify-content: flex-start;
}
.woocommerce ul.products li.product .price {
	display: block;
	font-size: 1.25em;
	font-weight: 700;
	margin-bottom: 0;
}

/* D5 — bölüm başlıkları sola dayalı, solunda turuncu dikey çubuk
   (banko/katalog dili; ortalanmış başlık vitrin dili). */
.cozumoto-baslik,
.woocommerce-products-header__title,
.related > h2,
.up-sells > h2 {
	text-align: left;
	padding-left: var(--space-4);
	padding-bottom: 0;
}
.cozumoto-baslik::after,
.woocommerce-products-header__title::after,
.related > h2::after,
.up-sells > h2::after,
.woocommerce-cart .entry-header .entry-title::after,
.woocommerce-account .entry-header .entry-title::after,
.woocommerce-checkout .entry-header .entry-title::after {
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	transform: none;
	width: 4px;
	height: auto;
}
/* Başlık deseni TÜM sayfa başlıklarına: "İlgili ürünler", "Sepetim",
   "Giriş Yap" ortalanmış kalıp çubuk sola kaçıyordu (denetimde "kopuk çubuk"
   olarak yakalandı). Hepsi sola dayalı + bitişik çubuk. */
.related > h2,
.up-sells > h2 {
	position: relative;
	text-align: left;
	padding-left: var(--space-4);
	padding-bottom: 0;
}

/* Sepet / Hesabım / Ödeme sayfalarında içerik ORTALANMIŞ tek bir kart.
   Sola dayalı başlık kalıbı burada kartla hizasız kalıp kopuk duruyordu
   (kart x=346, başlık x=188 ölçüldü). Bu sayfalarda başlık ortalanmış
   varyanta geçiyor: çubuk altta, ortada. */
.woocommerce-cart .entry-header .entry-title,
.woocommerce-account .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
	position: relative;
	text-align: center;
	font-size: 1.9em;
	padding-left: 0;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-6);
}
.woocommerce-cart .entry-header .entry-title::after,
.woocommerce-account .entry-header .entry-title::after,
.woocommerce-checkout .entry-header .entry-title::after {
	content: "";
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-orange);
}
/* Storefront tam genişlikli ödemede başlık altına yaklaşık 96px dolgu ekliyor. */
body.storefront-full-width-content.woocommerce-checkout .entry-header {
	padding-bottom: 0;
	margin-bottom: 24px;
}
/* Ana sayfadaki ortalanmış blok (YMM kartı) istisna. Neden paneli 24.10.2026'dan
   beri diğer bölümlerle aynı sola dayalı + çubuklu başlığı kullanır. */
.cozumoto-ymm-hero .cozumoto-baslik {
	text-align: center;
	padding-left: 0;
	padding-bottom: var(--space-3);
}
.cozumoto-ymm-hero .cozumoto-baslik::after {
	left: 50%;
	top: auto;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
}

/* ============================================================
   ADIM 3-4 — Lacivert header + Araç Seçici Bankosu
   ============================================================ */

/* Header lacivert tezgâh oluyor; logo açık renkli sürüme geçiyor (PHP filtresi). */
.site-header,
.storefront-primary-navigation,
.main-navigation ul.menu > li.menu-item > a,
.site-header .site-search {
	background-color: var(--cozumoto-navy);
}
.site-header {
	border-bottom: 3px solid var(--cozumoto-orange);
}
.main-navigation ul.menu > li.menu-item > a,
.site-header .site-branding a,
.site-header .site-header-cart a,
.site-header .site-header-cart .amount,
.site-header a {
	color: #ffffff;
}
.main-navigation ul.menu > li.menu-item > a:hover,
.site-header a:hover {
	color: var(--cozumoto-orange);
}
.site-header .site-search .search-field {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}
.site-header .site-search .search-field::placeholder {
	color: #a9bacb;
}
.site-header .site-search .search-field:focus {
	background-color: #ffffff;
	color: var(--cozumoto-text);
}
.site-header .site-header-cart .count,
.site-header .site-header-cart .amount {
	color: #ffffff;
}

/* "Aracını Seç" — header'da kalıcı, turuncu çerçeveli */
.cozumoto-header-arac {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 2px solid var(--cozumoto-orange);
	border-radius: var(--radius-md);
	color: #ffffff !important;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85em;
	text-decoration: none;
	white-space: nowrap;
}
.cozumoto-header-arac:hover {
	background-color: var(--cozumoto-orange);
	color: #ffffff !important;
}
.cozumoto-header-arac svg {
	flex: 0 0 auto;
}

/* --- Araç Seçici Bankosu (hero) --- */
.cozumoto-banko {
	background-color: var(--cozumoto-navy);
	background-image: linear-gradient(160deg, #14304f 0%, #111726 60%);
	padding: var(--space-12) var(--space-4);
	margin-bottom: var(--space-10);
}
.cozumoto-banko-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	gap: var(--space-10);
	align-items: center;
	flex-wrap: wrap;
}
.cozumoto-banko-secici {
	flex: 1 1 560px;
}
.cozumoto-banko h1 {
	color: #ffffff;
	font-size: 2.1em;
	line-height: 1.15;
	margin-bottom: var(--space-2);
}
.cozumoto-banko-secici > p {
	color: #c9d6e4;
	margin-bottom: var(--space-5);
}
/* Seçici kutuları lacivert zemin üstünde beyaz kart */
.cozumoto-banko .cozumoto-ymm-filter {
	background-color: #ffffff;
	border: 0;
	border-left: 0;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
}
.cozumoto-banko-kod {
	display: inline-block;
	color: var(--cozumoto-orange);
	font-size: 0.9em;
	text-decoration: none;
}
.cozumoto-banko-kod:hover {
	text-decoration: underline;
}
/* Rakamlı kanıt bloğu */
.cozumoto-banko-kanit {
	flex: 0 1 300px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
}
.cozumoto-banko-kanit li {
	margin: 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--cozumoto-orange);
	display: flex;
	flex-direction: column;
	color: #c9d6e4;
	font-size: 0.9em;
}
.cozumoto-banko-rakam {
	font-family: var(--font-heading);
	font-size: 1.7em;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.1;
}

/* Kategori kartında ürün sayısı */
.cozumoto-category-sayi {
	display: block;
	font-size: 0.78em;
	color: var(--cozumoto-text-muted);
	margin-top: 2px;
}

@media (max-width: 900px) {
	.cozumoto-banko-inner {
		gap: var(--space-6);
	}
	.cozumoto-banko-kanit {
		flex: 1 1 100%;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
	}
	.cozumoto-banko h1 {
		font-size: 1.6em;
	}
	.cozumoto-header-arac {
		display: none; /* dar ekranda header zaten sıkışık; seçici sayfada mevcut */
	}
}

/* Kategori kartı fotoğraflı sürüm: görsel üstte, ad ve ürün sayısı altta.
   Görseller KATEGORİYİ temsil eder (ürün iddiası yok) — bu yüzden ürün
   kartlarında değil yalnızca kategori kartı ve kategori sayfası başlığında
   kullanılıyor. */
.cozumoto-category-card--gorselli {
	padding: 0;
	overflow: hidden;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.cozumoto-category-gorsel {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--cozumoto-navy);
}
.cozumoto-category-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}
.cozumoto-category-card--gorselli:hover .cozumoto-category-gorsel img {
	transform: scale(1.04);
}
.cozumoto-category-card--gorselli > span:not(.cozumoto-category-gorsel) {
	padding: 0 var(--space-4);
}
.cozumoto-category-card--gorselli > span:nth-of-type(2) {
	padding-top: var(--space-3);
	font-weight: 600;
}
.cozumoto-category-card--gorselli .cozumoto-category-sayi {
	padding-bottom: var(--space-4);
}

/* Boş durum görselleri (boş sepet, 404, sonuç yok) */
.cozumoto-bos-durum-gorsel,
.cozumoto-404-wrap img {
	max-width: 320px;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
}

/* --- Ürün detayı teknik fiş panosu --- */
/* Fiş tablosu SOL sütunun devamı: galerinin hemen altında, onunla aynı
   genişlikte. Tam genişlikte bırakılınca iki sütunlu düzeni kırıp başlığı ve
   fiyatı aşağı itiyordu (2026-08-07'de ölçüldü: tablo 1064px, galeri 320px).
   float:left + clear:left ile sol kolona sabitleniyor; .summary sağda kalıyor. */
.cozumoto-teknik-fis {
	float: left;
	clear: left;
	width: 320px;
	max-width: 100%;
	margin: var(--space-4) 0 var(--space-8);
	border-collapse: collapse;
	font-size: 0.88em;
}
@media (max-width: 767px) {
	.cozumoto-teknik-fis {
		float: none;
		width: 100%;
	}
}
.cozumoto-teknik-fis th,
.cozumoto-teknik-fis td {
	padding: var(--space-2) var(--space-3);
	text-align: left;
	border-bottom: 1px solid var(--cozumoto-border);
	vertical-align: top;
}
.cozumoto-teknik-fis th {
	width: 42%;
	color: var(--cozumoto-text-muted);
	font-weight: 600;
	background-color: var(--cozumoto-surface);
}
.cozumoto-teknik-kod {
	font-family: var(--font-mono);
	font-size: 0.92em;
	/* break-all, OEM kodunu yer VARKEN bile ortadan kırıyordu ("5Q 0412249",
	   issue #69/1). overflow-wrap yalnızca kod hücreye sığmadığında böler. */
	word-break: normal;
	overflow-wrap: anywhere;
}

/* Ürün görseli/yer tutucusu küçülüyor: fiş dilinde görsel bilgi taşıyıcısı
   değil, kimlik işareti. Önce 720px'lik bir placeholder galerisiydi. */
.single-product div.product .woocommerce-product-gallery {
	max-width: 320px;
}
.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--radius-md);
}

/* Uyumlu Araçlar açık bölüm */
.cozumoto-uyumlu-bolum {
	margin: var(--space-8) 0;
	padding: var(--space-5);
	background-color: var(--cozumoto-surface);
	border-radius: var(--radius-md);
}
.cozumoto-uyumlu-bolum .cozumoto-baslik {
	font-size: 1.1em;
	margin-bottom: var(--space-3);
}

/* Filtre kutuları kompakt: içerik bitince kalan gri alan "yarım kalmış form"
   izlenimi veriyordu (denetim bulgusu). Yükseklik içeriğe göre. */
.cozumoto-shop-filters-row {
	align-items: stretch;
}
.cozumoto-shop-filters-row > .widget {
	padding: var(--space-3) var(--space-4);
	justify-content: flex-start;
}
.cozumoto-shop-filters-row .price_slider_wrapper {
	margin-bottom: 0;
}
.cozumoto-shop-filters-row .price_slider_amount {
	margin: 0;
}
.cozumoto-shop-filters-row .price_slider {
	margin: var(--space-4) var(--space-2) var(--space-3);
}

/* Kart filigranı %7'de görünmüyordu (denetimde "yok" sayıldı) — kimliği
   hissettirecek ama metni bastırmayacak seviyeye çıkarıldı. */
/* Mobilde parça kodu KIRPILMASIN: kartın satış argümanı bu. Kod tam genişlik
   satırda, gerekirse iki satıra sarar. */
@media (max-width: 600px) {
	.cozumoto-loop-kod {
		white-space: normal;
		word-break: break-word;
		/* Issue #61: mobil küçültme kaldırıldı — en az 12 px. */
		font-size: 0.75em;
		line-height: 1.3;
	}
	.cozumoto-kart-kategori {
		font-size: 0.75em;
	}
}

/* Boş sepet kartı ortalansın, iç boşluk sıkılaşsın. */
.cozumoto-empty-cart {
	max-width: 520px;
	margin: 0 auto;
	gap: var(--space-2);
}
.cozumoto-bos-durum-gorsel {
	max-width: 260px;
}

/* Geniş yatay filtre şeridinde stok çipleri yan yana kalır. Dar mağaza
   kenar sütunu ve küçük telefon için aşağıda tek sütun geçersiz kılması var. */
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget a {
	padding: 3px var(--space-3);
	font-size: 0.82em;
}
.cozumoto-shop-filters-row > .widget {
	justify-content: flex-start;
	align-self: start;
}
.cozumoto-shop-filters-row {
	align-items: start;
}

/* Boş sepet mesajı tek satırken 260px yer kaplıyordu: WooCommerce'in
   `.woocommerce-info::before` ikon sözde-elemanı elemanı şişiriyor. İkon
   kaldırıldı, yükseklik içeriğe döndü (kartın ortasında dev boşluk vardı). */
.cozumoto-empty-cart .cart-empty::before,
.cozumoto-empty-cart .woocommerce-info::before {
	display: none;
	content: none;
}
.cozumoto-empty-cart .cart-empty,
.cozumoto-empty-cart .woocommerce-info {
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	font-size: 1.02em;
	font-weight: 600;
	color: var(--cozumoto-text);
}

/* Geniş yatay filtre şeridinde stok çiplerini eşit genişlikte tut. */
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
}
.cozumoto-shop-filters-row .cozumoto-stock-filter-widget a {
	/* Issue #60: çipler ~22 px yüksekti; dokunma hedefi 44 px'e çıkarıldı. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	padding: 4px var(--space-1);
	font-size: 0.78em;
	white-space: nowrap;
}

/* Boş sepet: mesaj flex içinde esneyip 260px'e uzuyordu (kartın ortasındaki
   dev boşluğun sebebi). Çocuklar doğal yükseklikte kalıyor. */
.cozumoto-empty-cart > * {
	flex: 0 0 auto;
}

/* "Tüm Ürünler" kartı fotoğraflı sürümde turuncu zemin yerine sadece
   çerçeveyle ayrışsın; fotoğrafın üstünde turuncu dolgu kirli duruyordu. */
.cozumoto-category-card-tumu.cozumoto-category-card--gorselli {
	background-color: #ffffff;
	border-color: rgba(255, 161, 4, 0.5);
}

/* Boş sepetteki ürün önerisi bölümü */
.cozumoto-sepet-oneri {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--cozumoto-border);
}
.cozumoto-sepet-oneri .cozumoto-baslik {
	font-size: var(--fs-4);
	margin-bottom: var(--space-6);
}

/* Boş sepet mesajı 260px'e uzuyordu: Storefront `.woocommerce-info`'ya
   `flex: 1 1 260px` veriyor ve mesaj kartın içinde esniyordu. Sıradan bir
   `> *` kuralı eşit özgüllükte kalıp kaybediyordu; seçici üç sınıfa
   çıkarıldı. */
.cozumoto-empty-cart > p.woocommerce-info.cart-empty,
.cozumoto-empty-cart > p.cart-empty {
	flex: 0 0 auto;
	height: auto;
}

/* Ürün sayfasında yer tutucu kare kutu kartın büyük bölümünü boş gri alan
   olarak kaplıyordu. Fotoğrafı olmayan üründe galeri, kategori bandına
   indiriliyor — "burada fotoğraf olacak" boşluğu değil, kimlik işareti. */
body.cozumoto-urun-gorselsiz .woocommerce-product-gallery img {
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: auto;
	background-color: var(--cozumoto-surface);
}
.single-product div.product .woocommerce-product-gallery {
	max-width: 320px;
}

/* ============================================================
   REGRESYON ONARIMI — 2026-08-07 değerlendirme turu 2
   ============================================================ */

/* Sepet sayfasında `.woocommerce` kapsayıcısı flex; boş sepet kartı ile
   öneri bölümü YAN YANA diziliyordu ve öneri 360px'e sıkışıp ürün kartları
   ~34px'lik dikey şeritlere çöküyordu (ölçüldü). Kapsayıcı blok akışına
   alınıp iki bölüm alt alta getiriliyor. */
.woocommerce-cart .woocommerce {
	display: block;
}
.cozumoto-sepet-oneri {
	width: 100%;
	clear: both;
}
.cozumoto-sepet-oneri ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
/* AYNI TUZAK: Storefront kartlara yüzde genişlik + float veriyor ve bu yüzde
   grid track'i içinde yeniden hesaplanıp kartı 55px'e çökertiyor (mağaza
   grid'inde de yaşanmıştı). Seçici body.woocommerce + .site-main ile
   Storefront'unkini aşacak özgüllüğe çıkarıldı. */
body.woocommerce .site-main .cozumoto-sepet-oneri ul.products li.product,
body.woocommerce-page .site-main .cozumoto-sepet-oneri ul.products li.product,
.cozumoto-sepet-oneri ul.products li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	clear: none;
}
.cozumoto-sepet-oneri ul.products::before,
.cozumoto-sepet-oneri ul.products::after {
	display: none;
}
@media (max-width: 900px) {
	.cozumoto-sepet-oneri ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* "İlgili ürünler" başlığı: metin ortalı ama çubuk sol varyantta kalıyor ve
   sayfanın sol marjında YETİM duruyordu. Tek kural: ortalanmış başlık =
   altta ortalanmış çizgi. */
.related > h2,
.up-sells > h2,
.related.products > h2,
.up-sells.products > h2 {
	text-align: center;
	padding-left: 0;
	padding-bottom: var(--space-3);
}
.related > h2::after,
.up-sells > h2::after,
.related.products > h2::after,
.up-sells.products > h2::after {
	left: 50%;
	top: auto;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
}

/* Hesabım başlığı da ortalanmış varyantın alt çizgisini almalı
   (denetimde "Sepetim'de çizgi var, Giriş Yap'ta yok" tutarsızlığı). */
.woocommerce-account .entry-header .entry-title::after {
	content: "";
}

/* Mobil kartta başlık 2 tam satır göstersin, kategori etiketi yarım kalmasın. */
@media (max-width: 600px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(1.3em * 2);
		max-height: calc(1.3em * 2);
		font-size: 0.82em;
	}
	.cozumoto-kart-kategori {
		/* Issue #61: 0.56em (9 px) mobilde okunmuyordu — 12 px tabana çekildi. */
		font-size: 0.75em;
		letter-spacing: 0.04em;
	}
	.cozumoto-kart-serit {
		gap: var(--space-1);
	}
}

/* Boşluk artık şeridin kendi dolgusundan geliyor; nav'a ayrıca alt boşluk
   verilirse şeridin içi asimetrik oluyor. */
.single-product .cozumoto-breadcrumb {
	margin-bottom: 0;
}
/* Bulunulan sayfa (son öğe, bağlantısız metin) diğerlerinden ayrılsın. */
.cozumoto-breadcrumb {
	color: var(--cozumoto-text);
	font-weight: 600;
}
.cozumoto-breadcrumb a {
	font-weight: 400;
}

/* --- 404 sayfası: tek eksende ortalanmış kompozisyon --- */
.cozumoto-404-wrap {
	max-width: 560px;
	margin: var(--space-12) auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}
.cozumoto-404-wrap img {
	max-width: 280px;
	margin: 0;
}
.cozumoto-404-baslik {
	font-size: 1.8em;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}
.cozumoto-404-kod {
	color: var(--cozumoto-orange);
	font-weight: 700;
}
.cozumoto-404-wrap p {
	color: var(--cozumoto-text-muted);
	margin: 0;
}
.cozumoto-404-wrap form {
	width: 100%;
	max-width: 380px;
}
.cozumoto-404-wrap .search-field {
	width: 100%;
	min-width: 0;
}
.cozumoto-404-eylemler {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	flex-wrap: wrap;
	justify-content: center;
}
.cozumoto-404-ikincil {
	color: var(--cozumoto-navy);
	text-decoration: underline;
	font-size: 0.92em;
}

/* Hakkımızda değer kartları: 4 kart, 2×2 / 4×1 */
.cozumoto-about-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 900px) {
	.cozumoto-about-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 404'teki birincil CTA gri kalıyordu: birincil buton kuralları `.woocommerce`
   kapsamında yazılmış, bu şablon o kapsamın dışında. */
.cozumoto-404-wrap .button,
.cozumoto-404-wrap a.button {
	background-color: var(--cozumoto-orange);
	border-color: var(--cozumoto-orange);
	/* Issue #59: turuncu zeminde lacivert 5,98:1 (beyaz 2,61:1 idi). */
	color: var(--cozumoto-navy);
	font-weight: 600;
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-6);
}
.cozumoto-404-wrap .button:hover {
	background-color: var(--cozumoto-orange-dark);
	border-color: var(--cozumoto-orange-dark);
	color: var(--cozumoto-navy);
}

/* Hesabım sayfasında kullanıcının gördüğü başlık, sayfa H1'i ("Hesabım")
   değil form içindeki "Giriş Yap" H2'si. Başlık deseni ona da uygulanıyor —
   denetimde "çizgi yok" olarak yakalanan buydu. */
.cozumoto-account-card-wrap > h2,
.woocommerce-account .cozumoto-account-card-wrap h2 {
	position: relative;
	text-align: center;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-5);
}
.cozumoto-account-card-wrap > h2::after,
.woocommerce-account .cozumoto-account-card-wrap h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-orange);
}

/* Ürün detayında sağ kolon görselle AYNI üst hizadan başlasın. Storefront
   galeriye alt boşluk veriyor ve özet bloğu ~230px aşağıdan başlıyordu. */
.single-product div.product .summary {
	margin-top: 0;
}
.single-product div.product .woocommerce-product-gallery {
	margin-bottom: var(--space-4);
}
body.cozumoto-urun-gorselsiz .woocommerce-product-gallery {
	max-width: 320px;
}

/* Mobil kartta kategori etiketi üç noktayla kesiliyordu; iki satıra izin
   verilip yükseklik ona göre ayrıldı. */
@media (max-width: 600px) {
	.cozumoto-kart-serit {
		height: auto;
		min-height: 28px;
		align-items: flex-start;
	}
	.cozumoto-kart-kategori {
		white-space: normal;
		line-height: 1.2;
		max-width: 62%;
	}
}

/* Ana sayfada güven şeridi gizleniyor: aynı üçlü (parça sayısı / 300 TL /
   14 gün) hero yan rayında ve "Neden" panelinde zaten iki kez geçiyor,
   üçüncü tekrar mesajı ucuzlatıyordu. Diğer sayfalarda şerit kalıyor. */
.home .cozumoto-trust-strip {
	display: none;
}

/* Hakkımızda'da "Neden" kartları ile global güven şeridi aynı dört mesajı
   aynı ekranda iki kez veriyordu; şerit bu sayfada da gizlendi. */
/* Sayfa şablonu gövdeye özel sınıf basmıyor (page-template-default), bu
   yüzden şablonun kendi işaretleyicisi kullanılıyor: sayfada "Neden" değer
   kartları varsa global şerit gizleniyor. */
body:has(.cozumoto-about-values) .cozumoto-trust-strip {
	display: none;
}

/* Ana sayfada gizlenen şeridin bıraktığı boşluk: "Neden" panelinin alt
   marjı bölüm ritmine eşitlendi. */
.home .cozumoto-neden {
	margin-bottom: var(--space-8);
}

/* 404 arama: input ve buton tek bitişik grup. Buton alt satırda ortalanmış
   ve input'tan kopuk duruyordu. */
.cozumoto-404-wrap form.woocommerce-product-search {
	display: flex;
	gap: 0;
	width: 100%;
	max-width: 420px;
}
.cozumoto-404-wrap form.woocommerce-product-search .search-field {
	flex: 1 1 auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;
}
.cozumoto-404-wrap form.woocommerce-product-search button[type="submit"],
.cozumoto-404-wrap form.woocommerce-product-search input[type="submit"] {
	flex: 0 0 auto;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	background-color: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #ffffff;
}

/* Hesabım masaüstünde ~400px form 1440px sayfada tek başına duruyordu.
   İki kolon: solda giriş, sağda üyeliksiz alışveriş bilgi paneli. */
/* 2026-08-07: kayıt formu açılınca sarmalayıcının içine ÜÇ blok girdi
   (giriş + üye ol + misafir paneli). Eski `1fr 1fr` düzeni giriş/kayıt
   ikilisine 430px veriyordu, o da kendi içinde ikiye bölününce sütunlar
   ~200px'e düşüp form etiketleri harf harf alt alta kırılıyordu. Form
   ikilisine iki pay, bilgi paneline bir pay. */
@media (min-width: 900px) {
	.woocommerce-account:not(.logged-in) .cozumoto-account-card-wrap {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
		max-width: 1120px;
		margin-left: auto;
		margin-right: auto;
	}
	.woocommerce-account:not(.logged-in) .cozumoto-account-card-wrap > h2 {
		grid-column: 1 / -1;
	}
}
.cozumoto-account-yan {
	background-color: var(--cozumoto-surface);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.cozumoto-account-yan h3 {
	font-size: 1em;
	margin-bottom: var(--space-3);
}
.cozumoto-account-yan ul {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}
.cozumoto-account-yan li {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: 0.94em;
	color: var(--cozumoto-text);
}
.cozumoto-account-yan li::before {
	content: "✓";
	color: var(--cozumoto-green);
	font-weight: 700;
	flex: 0 0 auto;
}

/* Ana sayfa ürün vitrini */
.cozumoto-vitrin {
	max-width: 1180px;
	margin: 0 auto var(--space-12);
	padding: 0 var(--space-4);
}
.cozumoto-vitrin .cozumoto-baslik {
	margin-bottom: var(--space-6);
}
.cozumoto-vitrin ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
.cozumoto-vitrin ul.products::before,
.cozumoto-vitrin ul.products::after {
	display: none;
}
body.woocommerce .site-main .cozumoto-vitrin ul.products li.product,
body .cozumoto-vitrin ul.products li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	clear: none;
}
.cozumoto-vitrin-tumu {
	text-align: center;
	margin-top: var(--space-8);
}
@media (max-width: 900px) {
	.cozumoto-vitrin ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Hesabım: kart bitişi ile güven şeridi arasındaki ölü alan.
   İlk denemede yalnızca .site-main/.content-area dolgusu kısılmıştı, boşluk
   216px'ten 188px'e indi — çünkü asıl kaynak ÜST ÜSTE BİNEN dört değerdi:
   .hentry margin-bottom (Storefront 4.235em ≈ 68px) + kart margin 24 +
   .site-main 32 + .content-area 32 + #content 32. Hepsi sıfırlanıp tek bir
   açık değer veriliyor; ölçüm böylece tahmine bağlı kalmıyor. */
.woocommerce-account #content,
.woocommerce-account .content-area,
.woocommerce-account .site-main,
body.woocommerce-account .site-content {
	padding-bottom: 0;
	margin-bottom: 0;
}
.woocommerce-account .hentry,
.woocommerce-account .cozumoto-account-card-wrap,
.woocommerce-account .woocommerce {
	margin-bottom: 0;
}
.woocommerce-account .site-main {
	padding-bottom: 112px;
}
@media (max-width: 767px) {
	.woocommerce-account .site-main {
		padding-bottom: 72px;
	}
}

/* Kod çipi mobilde 3-4 satıra kırılıyordu; tek satır + üç nokta.
   Tam kod `title` niteliğinde ve ürün sayfasındaki fişte duruyor. */
@media (max-width: 600px) {
	.cozumoto-loop-kod {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		/* Issue #61: mobil kod çipi de 12 px tabanda. */
		font-size: 0.75em;
	}
}

/* #129: kısmi kod gerekçesi kırpılmaz; eşleşen kod müşterinin karar bilgisi.
   Yalnız kod aramasındaki kısmi adayda çıkar, normal kod çipi tek satır kalır.
   Ek koşul gerekçesi (--ek) aynı nedenle kırpılmaz. */
.cozumoto-loop-kod.cozumoto-loop-kod--kismi,
.cozumoto-loop-kod.cozumoto-loop-kod--ek {
	white-space: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
}

/* Issue #64 — Dar ekranda filtre kartı genişlikleri tutarsızdı (360 vs 345 px
   ölçüldü): YMM kartı ile akordeon içindeki filtre kutuları farklı kapsayıcı
   kenarlarına hizalanıyordu. Hepsi aynı içerik genişliğine sabitleniyor. */
@media (max-width: 767px) {
	.cozumoto-filtre-akordeon,
	.cozumoto-shop-filters-row,
	.cozumoto-ymm-filter,
	.cozumoto-shop-filters-row > .widget {
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
	}
}

/* --- Arama sonucu: vurgu ve ilgili öneriler --- */
mark.cozumoto-vurgu {
	background-color: rgba(255, 161, 4, 0.22);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
	font-weight: 700;
}
.cozumoto-arama-ilgili {
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--cozumoto-border);
}
.cozumoto-arama-ilgili-not {
	margin: calc(-1 * var(--space-3)) 0 var(--space-6);
	font-size: 0.88em;
	color: var(--cozumoto-text-muted);
}
.cozumoto-arama-ilgili-tumu {
	margin-top: var(--space-4);
}
.cozumoto-arama-ilgili-tumu a {
	color: var(--cozumoto-orange);
	font-weight: 600;
	text-decoration: none;
}
.cozumoto-arama-ilgili-tumu a:hover {
	text-decoration: underline;
}

/* --- Sepette ücretsiz kargo eşiği --- */
.cozumoto-kargo-esigi {
	background-color: var(--cozumoto-surface);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
	font-size: 0.92em;
}
.cozumoto-kargo-esigi p {
	margin: 0 0 var(--space-3);
}
.cozumoto-kargo-esigi--kazanildi {
	border-color: var(--cozumoto-green);
	background-color: rgba(34, 104, 63, 0.06);
	color: var(--cozumoto-navy);
}
.cozumoto-kargo-esigi--kazanildi strong {
	color: var(--cozumoto-green);
}
.cozumoto-kargo-cubuk {
	height: 8px;
	border-radius: var(--radius-full);
	background-color: #e3e7ee;
	overflow: hidden;
}
.cozumoto-kargo-cubuk span {
	display: block;
	height: 100%;
	background-color: var(--cozumoto-orange);
	border-radius: var(--radius-full);
	transition: width var(--transition-base);
}

/* Hesabım: giriş / üye ol kartları aynı yükseklikte bitsin. Formların
   alan sayısı farklı olduğu için kartlar farklı yerlerde bitiyor ve üç
   sütun hizasız duruyordu. Grid hücreleri esnetiliyor, kart içeriği de
   dikeyde yayılıyor. */
@media (min-width: 900px) {
	.woocommerce-account:not(.logged-in) .cozumoto-account-card-wrap {
		align-items: stretch;
	}
	#customer_login.u-columns.col2-set {
		align-items: stretch;
	}
	#customer_login .u-column1,
	#customer_login .u-column2 {
		display: flex;
	}
	.woocommerce-form-login,
	.woocommerce-form-register {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	/* Formun son öğesi (buton / gizlilik metni) alta yaslanır. */
	.woocommerce-form-login > *:last-child,
	.woocommerce-form-register > *:last-child {
		margin-top: auto;
	}
}

/* Alan altı canlı uyarı — hata girdinin YANINDA bildirilmeli, sayfanın
   tepesinde değil (WCAG 3.3.1/3.3.3). */
.cozumoto-alan-uyari {
	margin: 6px 0 0;
	font-size: 0.85em;
	line-height: 1.35;
}
.cozumoto-alan-uyari.is-hata {
	color: #a3352c;
}
.cozumoto-alan-uyari.is-tamam {
	color: var(--cozumoto-green);
}
.cozumoto-alan-uyari a {
	color: var(--cozumoto-orange);
	font-weight: 600;
}
.cozumoto-parola-ipucu {
	margin: 0 0 var(--space-4);
	font-size: 0.85em;
	color: var(--cozumoto-text-muted);
}

/* ============================================================
   İSTASYON 2 — Beyaz header + turuncu duyuru şeridi
   Referans: onlineyedekparca.com (birebir giydirme kararı, 16.09.2026)
   Harita: guide/kararlar/tasarim-referansi-onlineyedekparca.md §3
   Bu blok dosyanın SONUNDA duruyor: yukarıdaki "lacivert header" kuralları
   silinmedi, kaynak sırası gereği buradaki kurallar onları eziyor. Koyu
   header'a dönmek gerekirse bu bloğu kaldırmak yeterli.
   ============================================================ */

/* --- Turuncu duyuru şeridi (referans: B4B şeridi, ~46px) --- */
.cozumoto-duyuru-serit {
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	font-size: 14px;
	line-height: 1.4;
}
.cozumoto-duyuru-inner {
	max-width: var(--oyp-container);
	margin: 0 auto;
	padding: 9px var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 46px;
}
.cozumoto-duyuru-metin {
	color: var(--oyp-dark);
}
.cozumoto-duyuru-metin strong {
	font-weight: 800;
}
/* Sağdaki koyu pill — referanstaki "Başvuru yap" butonunun karşılığı */
.cozumoto-duyuru-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	background-color: var(--oyp-dark);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	padding: 8px 16px;
	border-radius: var(--radius-md);
	text-decoration: none;
	white-space: nowrap;
}
/* WhatsApp varyantı: ikon + numara yan yana */
.cozumoto-duyuru-cta--wa {
	gap: var(--space-2);
}
.cozumoto-duyuru-cta--wa svg {
	flex: 0 0 auto;
}
a.cozumoto-duyuru-cta:hover,
a.cozumoto-duyuru-cta:focus {
	background-color: var(--oyp-dark-light);
	color: #ffffff !important;
}

/* --- Header beyaza dönüyor --- */
.site-header,
.storefront-primary-navigation,
.main-navigation ul.menu > li.menu-item > a,
.site-header .site-search {
	background-color: #ffffff;
}
.site-header {
	/* Referansta turuncu kalın çizgi yok; ayrım ince gri kenarlıkla yapılıyor */
	border-bottom: 1px solid var(--oyp-mid-gray);
	padding-top: 0;
	padding-bottom: 0;
}
/* Üst sıra: logo | pill arama | (aksiyonlar sağda) */
.site-header > .col-full {
	max-width: var(--oyp-container);
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
	min-height: 104px;
}
.site-header .site-branding {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	width: auto;
}
.site-header .site-branding img.custom-logo {
	max-width: 200px;
	height: auto;
	display: block;
}
.site-header .secondary-navigation:empty {
	display: none;
}

/* Header metin/ikon renkleri: beyaz zemin için koyuya çevriliyor */
.main-navigation ul.menu > li.menu-item > a,
.site-header .site-branding a,
.site-header .site-header-cart a,
.site-header .site-header-cart .amount,
.site-header .site-header-cart .count,
.site-header a {
	color: var(--oyp-dark);
}
.main-navigation ul.menu > li.menu-item > a:hover,
.site-header a:hover {
	color: var(--oyp-primary);
}

/* --- Arama: referanstaki pill (r800, bg #f8f9fa, sol ikon) --- */
.site-header .site-search {
	flex: 1 1 auto;
	max-width: 480px;
	margin: 0;
	padding: 0;
	border: 0;
}
.site-header .site-search .widget {
	margin: 0;
	padding: 0;
}
.site-header .site-search form.woocommerce-product-search {
	position: relative;
	display: block;
}
.site-header .site-search .search-field,
.site-header .widget_product_search .search-field {
	width: 100%;
	height: 48px;
	background-color: var(--oyp-surface);
	border: 1px solid transparent;
	border-radius: 800px;
	color: var(--oyp-dark);
	font-size: var(--oyp-fs-body);
	line-height: 24px;
	/* Sol ikon için yer açılıyor (ikon aşağıda ::before ile basılıyor) */
	padding: 12px 20px 12px 48px;
	box-shadow: none;
}
.site-header .site-search .search-field::placeholder {
	color: var(--oyp-gray);
}
.site-header .site-search .search-field:focus {
	background-color: #ffffff;
	border-color: var(--oyp-mid-gray);
	color: var(--oyp-dark);
}
/* Sol taraftaki büyüteç — referansta input'un içinde, 20px soldan */
.site-header .site-search form.woocommerce-product-search::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--oyp-gray);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Storefront'un "Ara" gönder butonu referansta yok — gizleniyor
   (form Enter ile gönderiliyor, erişilebilirlik için DOM'da kalıyor) */
.site-header .site-search form.woocommerce-product-search button[type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Sağdaki aksiyon grubu: Aracını Seç + sepet --- */
.storefront-primary-navigation > .col-full {
	max-width: var(--oyp-container);
}
.cozumoto-header-arac {
	border: 1px solid var(--oyp-mid-gray);
	border-radius: 800px;
	color: var(--oyp-dark) !important;
	background-color: #ffffff;
	font-weight: 600;
	font-size: 14px;
	padding: var(--space-3) var(--space-5);
}
.cozumoto-header-arac:hover {
	background-color: var(--oyp-primary);
	border-color: var(--oyp-primary);
	color: var(--oyp-dark) !important;
}

/* Sepet tutarı/adedi beyaz zeminde okunur olsun */
.site-header .site-header-cart .amount {
	font-weight: 700;
}
.site-header .site-header-cart .count {
	color: var(--oyp-gray);
}

/* --- Mobil (390px) --- */
@media (max-width: 767px) {
	.cozumoto-duyuru-inner {
		padding: 8px var(--space-3);
		gap: var(--space-2);
		font-size: 12.5px;
	}
	.cozumoto-duyuru-metin strong {
		display: block;
	}
	.cozumoto-duyuru-cta {
		font-size: 12.5px;
		padding: 6px 12px;
	}
	.site-header > .col-full {
		flex-wrap: wrap;
		gap: var(--space-3);
		min-height: 0;
	}
	.site-header .site-branding img.custom-logo {
		max-width: 150px;
	}
	.site-header .site-search {
		flex: 1 1 100%;
		max-width: none;
		order: 3;
	}
}
@media (max-width: 359px) {
	/* Telefon daraldığında metin ve iletişim eylemi iki ayrı satıra geçer. */
	.cozumoto-duyuru-inner {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 4px var(--space-2);
		min-height: 0;
		padding: var(--space-2) var(--space-3);
	}
	.cozumoto-duyuru-metin,
	.cozumoto-duyuru-cta {
		grid-column: 1 / -1;
	}
	.cozumoto-duyuru-metin {
		line-height: 1.35;
	}
	.cozumoto-duyuru-metin strong {
		display: inline;
	}
	.cozumoto-duyuru-cta {
		justify-self: end;
		min-height: 36px;
	}
}

/* Storefront mobil araması alt çubuktan yukarı açılır. Relevanssi paneli
   varsayılan olarak input'un altına çizdiğinde tamamı ekran dışında kalıyor. */
@media (max-width: 767px) {
	#colophon .storefront-handheld-footer-bar [id^="rlvlive_"] .relevanssi-live-search-results {
		top: auto !important;
		bottom: 48px !important;
		max-height: min(300px, calc(100dvh - 160px));
	}
}

/* --- İstasyon 2b: header üst sırası tek satır (logo | arama | aksiyonlar) ---
   Storefront, .site-branding ve .site-search'e float + yüzdelik genişlik
   veriyor; flex satırında bu hem hizayı kaydırıyor hem logoyu sol kenardan
   uzaklaştırıyordu. Float'lar sıfırlanıyor. */
.site-header > .col-full > .site-branding,
.site-header > .col-full > .site-search,
.site-header > .col-full > .cozumoto-header-aksiyon {
	float: none;
	clear: none;
}
.site-header > .col-full > .site-branding {
	margin-right: 0;
}
/* Arama ortalanıyor: iki yandaki otomatik boşluk onu satırın ortasına iter */
.site-header > .col-full > .site-search {
	margin-left: auto;
	margin-right: auto;
}
.cozumoto-header-aksiyon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-left: auto;
}
/* Sepet: header satırında, yüzer değil */
.cozumoto-header-aksiyon .site-header-cart {
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	width: auto;
	position: relative;
}
.cozumoto-header-aksiyon .site-header-cart li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cozumoto-header-aksiyon .site-header-cart > li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: 800px;
	text-decoration: none;
	white-space: nowrap;
}
.cozumoto-header-aksiyon .site-header-cart > li > a:hover {
	background-color: var(--oyp-surface);
}

/* İkinci sıra artık yalnızca ana menüyü taşıyor (İstasyon 3'te marka şeridi
   olacak). Storefront'un "Aracını Seç" için ayırdığı boşluk kalktı. */
.storefront-primary-navigation > .col-full {
	display: block;
}

/* --- İstasyon 2c: üst sıra ölçüleri referansa çekiliyor ---
   Referansta (1440px viewport) ölçülen konumlar:
     logo   x=87  genişlik 180
     arama  x=428 genişlik 364 (yani ortalanmış DEĞİL, logodan sonra boşlukla)
     aksiyonlar sağ kenara yaslı
   Storefront `.col-full`'a ~42px yatay dolgu ve `.site-branding`'e yüzdelik
   sağ boşluk veriyor; ikisi de referanstaki 12px'lik kapsayıcı dolgusuna
   indiriliyor. */
.site-header > .col-full {
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}
.site-header > .col-full > .site-branding {
	margin-right: 0 !important;
}
.site-header > .col-full > .site-search {
	/* Ortalama değil: logodan sonra sabit boşluk, sağ tarafı esnek */
	margin-left: var(--space-10);
	margin-right: auto;
	max-width: 364px;
}

/* --- İstasyon 2d: flex satırındaki artıklar ---
   Storefront'un iki "içeriğe geç" atlama bağlantısı `.col-full`ın doğrudan
   çocuğu; flex satırında GÖRÜNMEZ ama yer kaplayan öğeler oluyor (her biri
   1px + iki `gap`), logoyu sol kenardan ~24px içeri itiyorlardı. Konumları
   mutlaklaştırılıyor: klavye odağında hâlâ görünür kalıyorlar. */
.site-header > .col-full > .skip-link {
	position: absolute;
}
/* Arama kutusu referanstaki sabit genişliğe sabitleniyor (esneyip
   daralmasın; `flex:1 1 auto` içerik genişliğinde 280px'e düşüyordu). */
.site-header > .col-full > .site-search {
	flex: 0 0 364px;
}
/* Logo referansla aynı genişlik */
.site-header .site-branding img.custom-logo {
	max-width: 180px;
}
.storefront-primary-navigation > .col-full {
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}

/* --- İstasyon 2e ---
   İkincil navigasyon bu sitede hiç kullanılmıyor (menü atanmamış) ama
   Storefront yine de boş <nav> basıyor; `:empty` HTML yorumu yüzünden
   eşleşmediğinden flex satırında 114px yer kaplıyor, logo ile aramayı
   birbirinden uzaklaştırıyordu. */
.site-header .secondary-navigation {
	display: none;
}
/* Üst sıra yüksekliği referanstaki 104px'e iniyor (logomuz 800×392 oranında,
   180px genişlikte 88px yükseliyor → 8px dikey dolgu ile 104px). */
.site-header > .col-full {
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
	min-height: 104px;
}

/* Dar masaüstünde sabit 364px arama alanı sepeti ekran dışına itiyordu. */
@media (min-width: 992px) and (max-width: 1199px) {
	.site-header > .col-full {
		gap: var(--space-4);
	}
	.site-header > .col-full > .site-search {
		flex: 1 1 220px;
		min-width: 0;
		margin-left: 0;
	}
	.cozumoto-header-aksiyon {
		gap: var(--space-2);
	}
}

/* Tablette arama ikinci satıra geçer; sepet ve hesap görünür kalır. */
@media (min-width: 768px) and (max-width: 991px) {
	.site-header > .col-full {
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-4);
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
	}
	.site-header > .col-full > .site-branding {
		order: 1;
	}
	.site-header > .col-full > .cozumoto-header-aksiyon {
		order: 2;
		margin-left: auto;
	}
	.site-header > .col-full > .site-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin: 0;
	}
	.cozumoto-header-aksiyon {
		gap: var(--space-2);
	}
	.cozumoto-marka-liste {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================================
   İSTASYON 3 — Marka nav şeridi + model mega menüsü
   Referans ölçüleri: şerit bg #f8f9fa / 63px yükseklik;
   link 14.4px/600, dolgu 20.8px 13.44px, köşe 6px 6px 0 0.
   ============================================================ */

.storefront-primary-navigation {
	background-color: var(--oyp-surface);
	border-bottom: 1px solid var(--oyp-mid-gray);
}
.cozumoto-marka-serit {
	position: relative;
}
.cozumoto-marka-liste {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 63px;
}
@media (max-width: 1499px) {
	/* Son markalar ve “•••” ekran dışına kırpılmasın; model paneli açık kalır. */
	.cozumoto-marka-liste {
		overflow-x: auto;
		overflow-y: visible;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cozumoto-marka-liste::-webkit-scrollbar {
		display: none;
	}
}
.cozumoto-marka-oge {
	position: static; /* mega panel şeridin tamamına yayılsın */
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}
.cozumoto-marka-link {
	display: inline-flex;
	align-items: center;
	padding: 20.8px 13.44px;
	font-size: var(--oyp-fs-nav);
	font-weight: 600;
	line-height: 21.6px;
	color: var(--oyp-dark-gray);
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	background: none;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	/* text-transform: uppercase KULLANILMIYOR — sayfa dili tr-TR olduğu için
	   tarayıcı "i → İ" Türkçe eşlemesini uyguluyor ve marka adlarını bozuyor
	   (Fiat→FİAT, Audi→AUDİ). Büyütme PHP'de mb_strtoupper ile yapılıyor:
	   bkz. cozumoto_child_marka_buyuk(). */
}
.cozumoto-marka-link:hover,
.cozumoto-marka-link:focus-visible,
.cozumoto-marka-oge--mega:hover > .cozumoto-marka-link {
	background-color: #ffffff;
	color: var(--oyp-primary-dark);
}
.cozumoto-marka-oge--tumu .cozumoto-marka-link {
	font-weight: 800;
	color: var(--oyp-primary-dark);
}

/* --- Mega panel: şeridin altında tam genişlik --- */
.cozumoto-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	background-color: #ffffff;
	border-top: 1px solid var(--oyp-mid-gray);
	box-shadow: var(--shadow-md);
	/* Kapalı durum: görünmez ama DOM'da; klavye odağıyla da açılıyor */
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.cozumoto-marka-oge--mega:hover > .cozumoto-mega,
.cozumoto-marka-oge--mega:not(.cozumoto-marka-oge--daha):focus-within > .cozumoto-mega,
.cozumoto-marka-oge--daha.is-open > .cozumoto-mega {
	visibility: visible;
	opacity: 1;
}
.cozumoto-marka-oge--daha.is-closed > .cozumoto-mega {
	visibility: hidden;
	opacity: 0;
}
.cozumoto-mega-inner {
	max-width: var(--oyp-container);
	margin: 0 auto;
	padding: var(--space-6) var(--space-3) var(--space-8);
}
.cozumoto-mega-baslik {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--oyp-mid-gray);
}
.cozumoto-mega-baslik a {
	font-size: 17px;
	font-weight: 700;
	color: var(--oyp-dark);
	text-decoration: none;
}
.cozumoto-mega-baslik a:hover {
	color: var(--oyp-primary-dark);
}
.cozumoto-mega-sayi {
	display: inline-block;
	margin-left: var(--space-2);
	font-size: var(--oyp-fs-badge);
	font-weight: 600;
	color: var(--oyp-gray);
}
/* Model listesi: referanstaki 12 sütunlu ızgaranın metin karşılığı */
.cozumoto-mega-modeller {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cozumoto-mega-modeller li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cozumoto-mega-modeller a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--oyp-body);
	text-decoration: none;
}
.cozumoto-mega-modeller a:hover {
	color: var(--oyp-primary-dark);
}

/* --- Header'daki hesap bağlantısı --- */
.cozumoto-header-hesap {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: 800px;
	font-size: 14px;
	font-weight: 600;
	color: var(--oyp-dark) !important;
	text-decoration: none;
	white-space: nowrap;
}
.cozumoto-header-hesap:hover {
	background-color: var(--oyp-surface);
}

/* --- Mobil: şerit yatay kaydırmalı (referanstaki davranış) --- */
@media (max-width: 767px) {
	.cozumoto-marka-liste {
		overflow-x: auto;
		overflow-y: hidden;
		min-height: 48px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cozumoto-marka-liste::-webkit-scrollbar {
		display: none;
	}
	.cozumoto-marka-link {
		padding: 13px 10px;
		font-size: 13px;
	}
	/* Dar ekranda tam genişlik açılan panel kullanışsız — kapatılıyor,
	   marka linki doğrudan marka arşivine gidiyor. */
	.cozumoto-mega {
		display: none;
	}
	.cozumoto-marka-oge--daha .cozumoto-mega {
		max-height: min(65vh, 480px);
		overflow-y: auto;
	}
	.cozumoto-marka-oge--daha.is-open > .cozumoto-mega {
		display: block;
	}
	/* Metin görsel olarak gizli ama ekran okuyucuya açık: display:none
	   bağlantıyı adsız bırakıyordu (Lighthouse link-name, #99). */
	.cozumoto-header-hesap span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		border: 0;
		white-space: nowrap;
	}
}

/* --- İstasyon 3b: mobil header ---
   Not: header'daki arama kutusu mobilde GÖRÜNMEZ ve bu bir hata değil —
   Storefront (woocommerce.css) `.site-search`i 768px altında `display:none`
   yapıp aramayı ekranın altındaki sabit çubuğa ("Ara") taşıyor. Referans da
   mobilde alt navigasyon kullanıyor, davranış örtüşüyor. Bu yüzden burada
   aramaya değil, yalnızca kalan öğelerin sırasına/ölçüsüne dokunuluyor. */
@media (max-width: 767px) {
	.site-header > .col-full > .site-branding {
		order: 1;
	}
	.site-header > .col-full > .cozumoto-header-aksiyon {
		order: 2;
	}
	/* Tek satır (24.10.2026): logo | araç · hesap · sepet ikonları. Önceden logo ve
	   aksiyonlar iki sıraya kırılıyordu (375px'te 108px); "0,00 ₺ 0 ürün" metni yer
	   kaplıyordu. Referans (onlineyedekparca) mobil header'ı da tek sıra ikon. */
	.site-header > .col-full {
		flex-wrap: nowrap;
		gap: var(--space-2);
		padding-top: var(--space-1); /* 44px ikon + 2×4px = 52px satır; üst alan ≤140px hedefi */
		padding-bottom: var(--space-1);
		min-height: 0; /* masaüstünün 104px'i */
	}
	.site-header > .col-full > .site-branding {
		flex: 0 1 auto;
		min-width: 0;
	}
	/* Dosya sonundaki logo kuralını (≤600px 170px) dar ekranda daraltabilmek için daha özgül */
	.site-header > .col-full > .site-branding img.custom-logo {
		max-width: min(170px, 100%);
	}
	.site-header > .col-full > .cozumoto-header-aksiyon {
		flex: 0 0 auto;
		gap: var(--space-1);
	}
	/* Üç ikon da 44x44 dokunma hedefi (≤900px'teki display:none burada geri alınır) */
	.cozumoto-header-arac,
	.cozumoto-header-hesap,
	.cozumoto-header-aksiyon .site-header-cart > li > a.cart-contents {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
	}
	.cozumoto-header-arac {
		border: 0;
		background-color: transparent;
	}
	/* Metinler görsel olarak gizli, erişilebilir adda kalır ("Aracını Seç",
	   "Sepetim: 0,00 ₺ 0 ürün"); display:none bağlantıyı adsız bırakırdı (#99). */
	.cozumoto-header-arac span,
	.site-header .site-header-cart .cart-contents .amount,
	.site-header .site-header-cart .cart-contents .count {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		border: 0;
		white-space: nowrap;
	}
	.site-header .site-header-cart .cart-contents {
		position: relative;
	}
	.site-header .cozumoto-sepet-ikon {
		display: block;
	}
	.site-header .cozumoto-sepet-rozet {
		display: block;
		position: absolute;
		top: 2px;
		right: 0;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: var(--radius-full);
		background-color: var(--oyp-primary);
		color: var(--oyp-dark);
		font-size: 11px;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
	}
	/* Duyuru şeridi tek satır (86px → ~36px): kısa metin + WhatsApp ikonu. Uzun metin ve
	   numara ekran okuyucuya kalır. Şerit 44px'ten alçak; bu yüzden bağlantının dokunma
	   alanı ::after ile tüm şeride yayılır (metne dokunmak da WhatsApp'ı açar).
	   ≤359px'teki iki satırlık ızgara da burada tek satıra döner. */
	.cozumoto-duyuru-serit {
		position: relative;
	}
	.cozumoto-duyuru-inner {
		display: flex;
		min-height: 36px;
		padding: 0 var(--space-3);
		gap: var(--space-2);
	}
	.cozumoto-duyuru-metin {
		display: none;
	}
	.cozumoto-duyuru-inner .cozumoto-duyuru-kisa {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 13px;
		font-weight: 700;
	}
	.cozumoto-duyuru-cta--wa {
		justify-content: center;
		width: 28px;
		height: 28px;
		min-height: 0;
		padding: 0;
		border-radius: var(--radius-full);
	}
	.cozumoto-duyuru-cta--wa > span:not(.screen-reader-text) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		border: 0;
		white-space: nowrap;
	}
	.cozumoto-duyuru-cta--wa::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}
/* Sepet ikonu ve rozeti yalnız mobil; masaüstünde tutar + "N ürün" metni kalır. */
.cozumoto-sepet-ikon,
.cozumoto-sepet-rozet {
	display: none;
}
/* Duyurunun kısa metni yalnız mobil; masaüstünde uzun metin kalır. */
.cozumoto-duyuru-kisa {
	display: none;
}

/* ============================================================
   İSTASYON 4 — Ana sayfa hero
   Referans düzeni (1440px): sol sütun koyu araç seçici kutusu
   (x=88, genişlik ~406, radius 16), sağ tarafta iki sütunluk
   tanıtım alanı (x=517→1353). Bizde tam genişlik lacivert blok
   vardı; kapsayıcıya alınıp iki sütuna bölünüyor.
   ============================================================ */

/* Storefront ana sayfada başlığa 4.235em alt boşluk veriyor; referansta
   marka şeridi ile hero arasında yalnızca 24px var. */
body.home .site-header {
	margin-bottom: 0 !important;
}
.cozumoto-banko {
	/* Artık kenardan kenara lacivert blok değil — sayfa zemini beyaz */
	background-color: transparent;
	background-image: none;
	padding: var(--space-6) var(--space-3);
}
.cozumoto-banko-inner {
	max-width: var(--oyp-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 406px 1fr;
	gap: var(--space-6);
	align-items: stretch;
}

/* Sol: koyu araç seçici kutusu (referanstaki #111726 kutu) */
.cozumoto-banko-secici {
	background-color: var(--oyp-dark);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	color: #ffffff;
}
.cozumoto-banko-secici h1 {
	color: #ffffff;
	/* --fs-6 (34) dar kutuda iki satıra kırılıp hero'yu 50px uzatıyordu; tek satıra sığan en büyük basamak. */
	font-size: var(--fs-5);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--space-2);
}
.cozumoto-banko-secici > p {
	color: #c7ccd6;
	font-size: 14px;
	margin: 0 0 var(--space-5);
}
/* Kutu içi form alanları: referansta beyaz, radius 10 */
.cozumoto-banko-secici select,
.cozumoto-banko-secici input[type="text"],
.cozumoto-banko-secici input[type="search"] {
	width: 100%;
	background-color: #ffffff;
	border: 1px solid var(--oyp-mid-gray);
	border-radius: var(--radius-md);
	color: var(--oyp-dark);
	height: 50px;
}
.cozumoto-banko-secici .button,
.cozumoto-banko-secici button[type="submit"] {
	width: 100%;
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	border-radius: var(--radius-md);
	font-weight: 700;
	height: 50px;
}
.cozumoto-banko-secici .button:hover,
.cozumoto-banko-secici button[type="submit"]:hover {
	background-color: var(--oyp-primary-dark);
}
.cozumoto-banko-kod {
	display: inline-block;
	margin-top: var(--space-4);
	color: var(--oyp-primary) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.cozumoto-banko-kod:hover {
	text-decoration: underline;
}

/* Sağ: referanstaki tanıtım alanının yerinde güven/kanıt paneli.
   Referansta burada kampanya görselli carousel var; bizde kampanya görseli
   yok, uydurulmuyor — alan gerçek verimizle (ürün adedi, kargo eşiği, iade
   süresi) referansla aynı ağırlıkta bir kartla dolduruluyor. */
.cozumoto-banko-kanit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-content: center;
	margin: 0;
	padding: var(--space-8);
	list-style: none;
	background-color: var(--oyp-surface);
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
}
.cozumoto-banko-kanit li {
	margin: 0;
	padding: 0 0 0 var(--space-4);
	list-style: none;
	border-left: 3px solid var(--oyp-primary);
}
.cozumoto-banko-kanit .cozumoto-banko-rakam {
	display: block;
	font-size: var(--fs-5);
	font-weight: 800;
	line-height: 1.15;
	color: var(--oyp-dark);
}
.cozumoto-banko-kanit li > span:last-child {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-2);
	color: var(--oyp-gray);
}

/* Bölüm başlığı (H2) sayfa başlığından (H1, --fs-5) küçük kalır. */
.cozumoto-baslik {
	font-size: var(--fs-4);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oyp-dark);
}

@media (max-width: 991px) {
	.cozumoto-banko-inner {
		grid-template-columns: 1fr;
	}
	.cozumoto-banko-kanit {
		grid-template-columns: repeat(3, 1fr);
		padding: var(--space-5);
	}
}
@media (max-width: 600px) {
	.cozumoto-banko-kanit {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
	/* Mobilde rakam ve etiket aynı satırda: üç alt alta blok 254 px'ti. */
	.cozumoto-banko-kanit li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 var(--space-2);
	}
	.cozumoto-banko-kanit .cozumoto-banko-rakam {
		font-size: var(--fs-4);
	}
	.cozumoto-banko-kanit li > span:last-child {
		margin-top: 0;
	}
	.cozumoto-banko-secici {
		padding: var(--space-5);
	}
}

/* --- İstasyon 4b: sayfa kapsayıcısı referans genişliğine ---
   Storefront `.col-full`a 66.5em (≈1064px) max-width veriyor; referansın
   `.container`ı 1440px görünümde 1290px iç genişlikte ve 12px yatay dolgulu.
   Kapsayıcı tüm sayfalarda ortak olduğu için tek yerden değiştiriliyor —
   header/footer/içerik aynı hizada kalsın. */
.col-full {
	max-width: var(--oyp-container);
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}
/* Mobil kenar boşluğu tüm sayfalarda 16 px (24.10.2026). Storefront mobilde
   .col-full'a ~23 px marj + 356 px max-width veriyor, dolguyla içerik her
   yanda 35 px (767'de 54 px) içeride kalıyordu; header 35, footer 23 px ile
   üç ayrı hizadaydı. Header ve footer da .col-full: aynı kuralla hizalanır. */
@media (max-width: 767px) {
	.col-full,
	.site-header > .col-full {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}

/* --- İstasyon 4c: hero sağ sütunu (tanıtım kartı + kanıt şeridi) --- */
.cozumoto-banko-yan {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--space-4);
	min-width: 0;
}
.cozumoto-banko-tanitim {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	overflow: hidden;
	padding: var(--space-8);
	background-color: var(--oyp-primary-trans);
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
}
.cozumoto-banko-tanitim-metin {
	flex: 1 1 auto;
	min-width: 0;
}
.cozumoto-banko-tanitim-ust {
	margin: 0 0 var(--space-2);
	font-size: var(--oyp-fs-badge);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--oyp-primary-dark);
	text-transform: uppercase;
}
.cozumoto-banko-tanitim h2 {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-4);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oyp-dark);
}
.cozumoto-banko-tanitim-btn {
	display: inline-flex;
	align-items: center;
	padding: var(--space-3) var(--space-6);
	background-color: var(--oyp-primary);
	border-radius: var(--radius-md);
	color: var(--oyp-dark) !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.cozumoto-banko-tanitim-btn:hover {
	background-color: var(--oyp-primary-dark);
	color: #ffffff !important;
}
.cozumoto-banko-tanitim-gorsel {
	flex: 0 0 auto;
	width: 260px;
	max-width: 45%;
	height: auto;
	object-fit: contain;
	/* Görselin zemini beyaz (saydam değil); turuncu tonlu kartın üstünde
	   kenarı görünüyordu. Beyaz alan kasıtlı bir "ürün fişi" gibi okunsun
	   diye köşeleri yuvarlatılıp kenarlık veriliyor. */
	background-color: #ffffff;
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
}
/* Kanıt şeridi artık sağ sütunun alt satırı — dikey esneme yok */
.cozumoto-banko-kanit {
	padding: var(--space-6) var(--space-8);
}

@media (max-width: 991px) {
	.cozumoto-banko-yan {
		grid-template-rows: auto auto;
	}
}
@media (max-width: 600px) {
	.cozumoto-banko-tanitim {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-5);
	}
	.cozumoto-banko-tanitim-gorsel {
		width: 100%;
		max-width: 240px;
		margin: 0 auto;
	}
}

/* ============================================================
   İSTASYON 5 — Ürün kartı ve liste ızgarası
   Referans ölçüleri (canlıda Playwright ile alındı):
     kart      genişlik 234, yükseklik ~560
     kutu      beyaz, radius 16, padding 20, 1px solid #eee, gölge yok
     fiyat     22px / 700, satır yüksekliği 33px
     başlık    15px / 700, 2 satırda kırpılıyor
     ayrım     gölgeyle değil kenarlıkla yapılıyor

   ⚠️ Seçici özgüllüğü: bu dosyadaki eski kurallar `.woocommerce ul.products
   li.product` (0,2,1) biçiminde. Sade `ul.products li.product` (0,1,1) onları
   EZEMEZ — dosyada sonra gelmesi yetmiyor. Aynı önek korunuyor.
   ============================================================ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: #ffffff;
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: none;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	border-color: var(--oyp-mid-gray);
	box-shadow: var(--shadow-sm);
}

/* Izgara: referansta 234px'lik kartlar. Eski kural 1280px üstünde sabit
   4 sütun veriyordu (kart 308px); auto-fill ile referans yoğunluğuna
   (1290px kapsayıcıda 5 sütun) geçiliyor. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
	gap: var(--space-5);
}
@media (min-width: 1280px) {
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
	}
}

/* Başlık: referansta 15px/700, en fazla 2 satır */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oyp-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Fiyat: referansta 22px/700 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce-page ul.products li.product .price .amount {
	font-size: var(--oyp-fs-price);
	font-weight: 700;
	line-height: 33px;
	color: var(--oyp-dark);
}

/* Kargo/stok rozeti — referanstaki yeşil pill (#12a150) */
.cozumoto-kargo-rozeti {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 800px;
	background-color: var(--oyp-success);
	color: #ffffff;
	font-size: var(--oyp-fs-badge);
	font-weight: 600;
	line-height: 1.4;
}

/* --- İstasyon 5b: liste sayfası iki kolon (referans düzeni) ---
   Sol 234px filtre sütunu + sağda ürün ızgarası. `.site-main` grid yapılıp
   öğeler açıkça sütunlara yerleştiriliyor: otomatik yerleşim bırakılırsa
   `ul.products` sol sütuna düşüyor. */
/* ⚠️ Yalnızca ARŞİV sayfaları (mağaza + kategori). `.woocommerce .site-main`
   demek ürün detayını, sepeti ve ödemeyi de yakalıyordu: ürün galerisi
   234px'lik boş sol sütunun sağına itiliyordu. Gövde sınıfıyla kapsam
   daraltıldı — `archive` hem `/shop/` hem `product_cat` arşivinde var,
   ürün/sepet/ödeme sayfalarında yok. */
body.archive.woocommerce .site-main {
	display: grid;
	grid-template-columns: 234px minmax(0, 1fr);
	column-gap: var(--space-6);
	align-items: start;
}
/* Başlık + katalog araması + araç seçici: tam genişlik üst blok */
body.archive.woocommerce .site-main > .woocommerce-products-header {
	grid-column: 1 / -1;
}
.cozumoto-filtre-kolonu {
	grid-column: 1;
	/* Satır YAYILMASI YOK.
	   Önce `grid-row: 2 / span 3` kullanılıyordu; CSS Grid birden çok satıra
	   yayılan öğenin yüksekliğini o satırlara DAĞITTIĞI için 2.637px'lik
	   panel, 56px'lik sıralama çubuğunun satırını 645px'e şişiriyor ve ürünler
	   ~600px aşağıda başlıyordu (17.09.2026 kullanıcı bildirimi).
	   Sağ sütunun tamamı artık tek sarmalayıcı (`.cozumoto-liste-kolonu`),
	   ızgara tek satır + iki öğe. */
	grid-row: 2;
	position: sticky;
	top: var(--space-4);
}
.cozumoto-liste-kolonu {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/* 234px filtre sütununda yatay widget satırının min-content genişliği
   (özellikle üç stok çipi) sütunu aşıp ürünlerin üstüne taşıyordu. */
@media (min-width: 992px) {
	.cozumoto-filtre-kolonu .cozumoto-shop-filters-row {
		flex-direction: column;
		align-items: stretch;
	}
	.cozumoto-filtre-kolonu .cozumoto-shop-filters-row > .widget {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		flex: none;
	}
}
/* Dar masaüstü sütunu ve küçük telefonlarda üçlü stok ızgarası sığmıyor. */
@media (max-width: 600px), (min-width: 992px) {
	.cozumoto-filtre-kolonu .cozumoto-stock-filter-widget ul {
		grid-template-columns: minmax(0, 1fr);
	}
	.cozumoto-filtre-kolonu .cozumoto-stock-filter-widget a {
		justify-content: space-between;
		padding: var(--space-2) var(--space-3);
		text-align: left;
		white-space: normal;
	}
}
/* Sağ sütun öğeleri artık doğrudan ızgarada değil, sarmalayıcının içinde
   normal blok akışında. Sarmalayıcı dışında kalan bir şey olursa (eklenti
   çıktısı vb.) yine 2. sütuna düşsün: */
body.archive.woocommerce .site-main > .storefront-sorting,
body.archive.woocommerce .site-main > ul.products,
body.archive.woocommerce .site-main > .woocommerce-pagination,
body.archive.woocommerce .site-main > .woocommerce-info,
body.archive.woocommerce .site-main > .woocommerce-no-products-found {
	grid-column: 2;
	grid-row: 2;
}

/* Sol sütundaki kategori listesi: yatay çip şeridinden dikey listeye
   (referanstaki "Kategoriler" paneli).
   Not: çipler `<nav>` altında doğrudan `<a>` olarak basılıyor — liste öğesi
   (`li`) yok, seçiciler `.cozumoto-kategori-cip` üzerinden yazılmalı. */
.cozumoto-filtre-baslik {
	margin: 0 0 var(--space-3);
	font-size: 17px;
	font-weight: 700;
	color: var(--oyp-primary-dark);
}
.cozumoto-filtre-kolonu .cozumoto-kategori-serit {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-cip {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	margin: 0;
	padding: 7px 10px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--oyp-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	white-space: normal;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-cip:hover {
	background-color: var(--oyp-surface);
	color: var(--oyp-primary-dark);
}
.cozumoto-filtre-kolonu .cozumoto-kategori-cip.is-aktif {
	background-color: var(--oyp-primary-trans);
	color: var(--oyp-primary-dark);
	font-weight: 700;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-ad {
	flex: 1 1 auto;
	min-width: 0;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-adet {
	flex: 0 0 auto;
	color: var(--oyp-gray);
	font-size: var(--oyp-fs-badge);
	font-weight: 600;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-cip svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Mobil/tablet: tek kolon, filtre paneli ürünlerin üstünde */
@media (max-width: 991px) {
	body.archive.woocommerce .site-main {
		display: block;
	}
	.cozumoto-filtre-kolonu {
		position: static;
		margin-bottom: var(--space-5);
	}
	.cozumoto-filtre-kolonu .cozumoto-kategori-serit {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-2);
	}
	.cozumoto-filtre-kolonu .cozumoto-kategori-cip {
		width: auto;
		border: 1px solid var(--oyp-mid-gray);
		border-radius: 800px;
	}
}

/* ============================================================
   İSTASYON 6 — Ürün detay: üç kolon
   Referans düzeni (1440px): sol görsel kutusu ~500px, orta başlık +
   özellik tablosu ~400px, sağda YAPIŞKAN satın alma kolonu ~285px
   (fiyat 34px/700 → taksit kutusu → adet → tam genişlik "Sepete Ekle").

   `.summary` bir sarmalayıcı div; içindeki başlık/fiyat/sepet formu farklı
   sütunlara dağılacağı için `display: contents` ile ızgaradan çıkarılıyor,
   çocukları doğrudan `div.product` ızgarasının öğesi oluyor. (Genel amaçlı
   bir div olduğu için erişilebilirlik ağacında kayıp yok.)
   ============================================================ */

@media (min-width: 1280px) {
	body.single-product div.product {
		display: grid;
		grid-template-columns: 460px minmax(0, 1fr) 300px;
		column-gap: var(--space-8);
		row-gap: var(--space-6);
		align-items: start;
	}
	body.single-product div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1 / span 3;
		/* Eski "teknik fiş" yönünden kalan `max-width: 320px` (iki ayrı yerde)
		   burada kaldırılıyor: referansta görsel sol sütunun tamamını
		   kaplayan ~500px'lik bir kutu. Storefront'un `float: left` +
		   `width: 41.1765%` kuralı da ızgarada anlamsız. */
		width: 100%;
		max-width: none;
		float: none;
		margin: 0;
		/* Referansta görsel beyaz, köşesi yuvarlak, ince kenarlıklı bir kutu */
		background-color: #ffffff;
		border: 1px solid var(--oyp-card-border);
		border-radius: var(--radius-lg);
		padding: var(--space-5);
	}
	body.single-product div.product > .summary {
		display: contents;
	}
	body.single-product div.product > .summary > .product_title {
		grid-column: 2;
		grid-row: 1;
	}
	body.single-product div.product > .cozumoto-teknik-fis {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		float: none;
		margin: 0;
	}
	body.single-product div.product > .summary > .product_meta {
		grid-column: 2;
		grid-row: 3;
	}
	/* Sağ sütun: tek yapışkan satın alma kartı (fiyat + adet + buton +
	   güvence satırları tek sarmalayıcıda — bkz. cozumoto_child_satin_alma_ac) */
	body.single-product div.product > .summary > .cozumoto-satin-alma {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: start;
		position: sticky;
		top: var(--space-4);
	}
	/* Akordeon ve ilgili ürünler tam genişlik */
	body.single-product div.product > .cozumoto-product-accordion,
	body.single-product div.product > .related {
		grid-column: 1 / -1;
		width: auto;
		float: none;
	}
}

/* 1024–1279 px'te üç sabit sütun orta başlığı 92 px'e kadar daraltıyordu. */
@media (min-width: 992px) and (max-width: 1279px) {
	body.single-product div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-6);
		align-items: start;
	}
	body.single-product div.product > .summary {
		display: contents;
	}
	body.woocommerce.single-product div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1 / span 5;
		width: 100%;
		max-width: none;
		float: none;
		margin: 0;
		padding: var(--space-5);
		border: 1px solid var(--oyp-card-border);
		border-radius: var(--radius-lg);
		background: #ffffff;
	}
	body.single-product div.product > .summary > .product_title {
		grid-column: 2;
		grid-row: 1;
	}
	body.single-product div.product > .cozumoto-teknik-fis {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		float: none;
		margin: 0;
	}
	body.single-product div.product > .summary > .cozumoto-satin-alma {
		grid-column: 2;
		grid-row: 3;
		position: static;
	}
	body.single-product div.product > .summary > .woocommerce-product-details__short-description {
		grid-column: 2;
		grid-row: 4;
	}
	body.single-product div.product > .summary > .product_meta {
		grid-column: 2;
		grid-row: 5;
	}
	body.single-product div.product > .cozumoto-product-accordion,
	body.single-product div.product > .related {
		grid-column: 1 / -1;
		width: auto;
		float: none;
	}
}

/* --- Sağ sütun bileşenleri (her ekran boyutunda) --- */
body.single-product div.product .product_title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oyp-dark);
}
/* Fiyat: referansta 34px/700 */
body.single-product div.product > .summary > .price,
body.single-product div.product > .summary > .price .amount {
	font-size: var(--oyp-fs-section);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oyp-dark);
}
/* Adet + Sepete Ekle: referansta adet kutusu üstte, buton tam genişlik */
body.single-product div.product form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
}
body.single-product div.product form.cart .quantity {
	float: none;
	margin: 0;
	display: flex;
}
body.single-product div.product form.cart .quantity input.qty {
	width: 100%;
	height: 48px;
	border: 1px solid var(--oyp-mid-gray);
	border-radius: var(--radius-md);
	text-align: center;
	font-weight: 600;
}
body.single-product div.product form.cart button.single_add_to_cart_button {
	float: none;
	width: 100%;
	min-height: 56px;
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 700;
}
body.single-product div.product form.cart button.single_add_to_cart_button:hover {
	background-color: var(--oyp-primary-dark);
	color: #ffffff;
}
/* Güvence satırları: referanstaki ayraçlı bilgi listesi */
body.single-product .cozumoto-urun-guvence {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
body.single-product .cozumoto-urun-guvence li {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	list-style: none;
	font-size: 14px;
	color: var(--oyp-body);
	border-bottom: 1px solid var(--oyp-card-border);
}
body.single-product .cozumoto-urun-guvence li:last-child {
	border-bottom: 0;
}
/* Garanti satırı (karar #39): politika bağlantısı metinden ayırt edilir. */
body.single-product .cozumoto-urun-garanti a {
	text-decoration: underline;
}

/* --- İstasyon 6b: galeri genişliği özgüllük düzeltmesi ---
   Storefront `woocommerce.css`te galeriye
   `.storefront-full-width-content.single-product div.product
    .woocommerce-product-gallery { width: 41.1765%; float: left }` veriyor —
   özgüllüğü (0,4,1). İstasyon 6'daki kuralımız
   `body.single-product div.product > .woocommerce-product-gallery` (0,3,2)
   olduğu için KAYBEDİYORDU: galeri 460px'lik ızgara sütununda 180px kalıyordu.
   Gövde sınıfı eklenerek (0,4,2)ye çıkarıldı — `!important` gerekmiyor. */
@media (min-width: 992px) {
	body.woocommerce.single-product div.product > .woocommerce-product-gallery {
		width: 100%;
		max-width: none;
		float: none;
	}
}

/* --- İstasyon 6c: satın alma kartı --- */
.cozumoto-satin-alma {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.cozumoto-satin-alma > .price,
.cozumoto-satin-alma > .price .amount {
	margin: 0;
	font-size: var(--oyp-fs-section);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oyp-dark);
}
.cozumoto-satin-alma > form.cart {
	margin: 0;
}
.cozumoto-satin-alma > .cozumoto-urun-guvence {
	margin: 0;
}

/* Satın alma kartı içindeki eski dış boşluklar sıfırlanıyor: Storefront
   `.price` ve `form.cart`a alt boşluk veriyor, flex `gap` ile toplanınca
   fiyat ile adet kutusu arasında ~90px boşluk kalıyordu. */
.cozumoto-satin-alma > * {
	margin-top: 0;
	margin-bottom: 0;
}
.cozumoto-satin-alma > form.cart,
.cozumoto-satin-alma > .price,
.cozumoto-satin-alma > .cozumoto-urun-guvence {
	margin: 0;
}
/* Fiyat + adet + buton görsel olarak tek blok; güvence satırları ayrı kart */
.cozumoto-satin-alma > .cozumoto-urun-guvence {
	margin-top: var(--space-2);
}

/* ============================================================
   İSTASYON 7 — Sepet
   ============================================================ */

/* Önceki onarım (2026-08-07) boş sepetteki yan yana dizilme hatasını
   `.woocommerce-cart .woocommerce { display: block }` ile çözmüştü; ama bu
   kural DOLU sepette de geçerli olduğu için sayfanın iki sütunlu düzeni
   (ürün tablosu | sepet özeti) de kapanmıştı — özet tablonun altına
   düşüyordu. Kural artık duruma göre ayrılıyor:
     boş sepet  → `.cozumoto-empty-cart` var  → blok akışı (eski onarım korunur)
     dolu sepet → `form.woocommerce-cart-form` var → iki sütun
   `:has()` desteklenmezse davranış bugünkü blok akışında kalır (bozulmaz). */
.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: var(--space-6);
	align-items: start;
}
.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
/* Sepet özeti sağda, yapışkan — referanstaki satın alma kolonuyla aynı dil */
.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals {
	position: sticky;
	top: var(--space-4);
	width: auto;
	float: none;
	margin: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: auto;
	float: none;
	background-color: #ffffff;
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-size: 17px;
	font-weight: 700;
	color: var(--oyp-dark);
	margin: 0 0 var(--space-4);
}
/* Ödemeye geç butonu: referanstaki tam genişlik turuncu CTA */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	min-height: 56px;
	line-height: 32px;
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--oyp-primary-dark);
	color: #ffffff;
}
/* Sepet tablosu kartı */
.woocommerce-cart .woocommerce-cart-form {
	border-radius: var(--radius-lg);
	border-color: var(--oyp-card-border);
}

@media (max-width: 991px) {
	.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) {
		display: block;
	}
	.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals {
		position: static;
		margin-top: var(--space-5);
	}
}

/* ============================================================
   İSTASYON 8 — Giriş / Üye Ol
   ============================================================

   İlk denemede sayfa tek kolona zorlandı ve DAHA KÖTÜ oldu: mevcut tasarımda
   kart zaten `.woocommerce-form-login` / `.woocommerce-form-register`
   üzerinde (max-width 400, ortalanmış) ve `#customer_login` 820px'lik iki
   sütunlu bir grid. Referansın 438px'lik tek kolonuna yakın olan bu yapı
   korunuyor; yalnızca gerçek hata düzeltiliyor.

   Gerçek hata: `.u-column1 > h2` başlıkları kartın SOLUNDA, dar bir şeritte
   kalıp "Giriş\nYap" diye dikey sıkışıyordu — sütun grid olduğu için başlık
   ile form yan yana diziliyor. Başlık formun ÜSTÜNE, tam genişliğe alınıyor.
   Ayrıca yan bilgi paneli grid'in üçüncü öğesi olarak sütunları daraltıyordu;
   kendi satırına indiriliyor. */

body.woocommerce-account #customer_login.u-columns.col2-set > .u-column1,
body.woocommerce-account #customer_login.u-columns.col2-set > .u-column2 {
	display: block;
}
body.woocommerce-account #customer_login .u-column1 > h2,
body.woocommerce-account #customer_login .u-column2 > h2 {
	display: block;
	width: 100%;
	max-width: none;
	float: none;
	margin: 0 auto var(--space-4);
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oyp-dark);
	text-align: center;
	white-space: normal;
}
/* Kartlar referans ölçüsüne (438px) ve kart diline çekiliyor */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	max-width: 438px;
	border-radius: var(--radius-lg);
	border-color: var(--oyp-card-border);
	box-shadow: none;
}
/* Birincil butonlar: tam genişlik turuncu */
body.woocommerce-account button.woocommerce-form-login__submit,
body.woocommerce-account button.woocommerce-form-register__submit {
	width: 100%;
	min-height: 52px;
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 700;
}
body.woocommerce-account button.woocommerce-form-login__submit:hover,
body.woocommerce-account button.woocommerce-form-register__submit:hover {
	background-color: var(--oyp-primary-dark);
	color: #ffffff;
}
/* Yan bilgi paneli: iki sütunlu giriş grid'ini daraltmasın, altına insin */
body.woocommerce-account .site-main .cozumoto-hesap-yan {
	width: 100%;
	max-width: 820px;
	margin: var(--space-6) auto 0;
	background-color: var(--oyp-surface);
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

/* ============================================================
   İSTASYON 9 — Footer
   Referans: koyu #111726 güven şeridi → BEYAZ 4 sütunlu footer →
   iletişim satırı → hukuki linkler → #f4f4f4 alt bant.
   Bizde footer tamamen koyu laciverttti.

   Not: güven şeridi ana sayfada ve Hakkımızda'da bilinçli olarak gizli
   (aynı üç vaat o sayfalarda zaten iki kez geçiyor — 2026-08 kararı).
   Referans onu her sayfada gösteriyor ama üç kez tekrar mesajı ucuzlatıyor;
   karar korunuyor.
   ============================================================ */

#colophon.site-footer {
	background-color: #ffffff;
	color: var(--oyp-body);
	border-top: 1px solid var(--oyp-mid-gray);
}
#colophon.site-footer a {
	color: var(--oyp-body);
}
#colophon.site-footer a:hover {
	color: var(--oyp-primary-dark);
}
#colophon .widget-title,
#colophon .cozumoto-footer-iletisim-baslik,
#colophon h2,
#colophon h3 {
	color: var(--oyp-dark);
	font-weight: 700;
}
#colophon .cozumoto-footer-iletisim {
	border-bottom-color: var(--oyp-mid-gray);
}
/* Alt telif bandı: referanstaki açık gri şerit */
#colophon .site-info {
	background-color: var(--oyp-light-gray);
	color: var(--oyp-gray);
	margin-top: var(--space-8);
	padding: var(--space-5) var(--space-3);
	border-top: 1px solid var(--oyp-mid-gray);
}

/* Güven şeridi: referanstaki koyu bant */
.cozumoto-trust-strip {
	background-color: var(--oyp-dark);
	color: #ffffff;
}
.cozumoto-trust-strip span {
	color: #ffffff;
}
.cozumoto-trust-strip img {
	filter: brightness(0) invert(1);
}

/* Footer marka sütunu */
.cozumoto-footer-markalar {
	padding: var(--space-6) 0 0;
}
.cozumoto-footer-markalar-baslik {
	margin: 0 0 var(--space-3);
	font-size: 15px;
	font-weight: 700;
	color: var(--oyp-dark);
}
.cozumoto-footer-markalar ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 4px var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cozumoto-footer-markalar li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cozumoto-footer-markalar a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	text-decoration: none;
}

/* --- İstasyon 5c: kart görsel alanı SABİT yükseklik ---
   Bitmiş sayfalar baştan sona gözden geçirilince (16.09.2026) görüldü: ürün
   görselleri farklı en-boy oranlarında (uzun bir rot ile yassı bir conta yan
   yana) ve görsel alanı içeriğe göre büyüyüp küçüldüğü için kart içerikleri
   birbirinden 100px+ kayıyordu — ana sayfa vitrini ve "İlgili ürünler"
   ızgarası tırtıklı görünüyordu.
   Referans bunu sabit görsel kutusuyla çözüyor: `--oos-img` 144px (masaüstü) /
   108px (mobil). Aynı yaklaşım uygulanıyor: kutu sabit, görsel içine
   `contain` ile ortalanıyor — kırpma yok, oran korunuyor. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail {
	height: 144px;
	width: 100%;
	object-fit: contain;
	object-position: center;
	margin-bottom: var(--space-3);
	background-color: #ffffff;
}
@media (max-width: 767px) {
	.woocommerce ul.products li.product a img,
	.woocommerce-page ul.products li.product a img,
	.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
	.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail {
		height: 108px;
	}
}
/* Kart içeriği alt hizalı kalsın: başlık uzasa da fiyat/buton aynı hizada */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	margin-top: auto;
}

/* --- İstasyon 5d: mobilde 2 sütun ---
   İstasyon 5'teki `auto-fill minmax(234px, 1fr)` medya sorgusu DIŞINDA
   yazıldığı için dosyada daha önce duran `@media (max-width:600px)
   repeat(2, 1fr)` kuralını da eziyordu: 390px ekranda 234px'lik tek sütun
   sığıp ızgara TEK sütuna düşüyordu. Referans mobilde iki sütun kullanıyor
   (`--oos-card: 148px`). Kural medya sorgusu içinde yeniden veriliyor. */
@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		padding: var(--space-3);
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}
	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price,
	.woocommerce ul.products li.product .price .amount,
	.woocommerce-page ul.products li.product .price .amount {
		font-size: var(--fs-3);
		line-height: 1.3;
	}
	/* 154px'lik kartta "Sepete Ekle" iki satıra kırılıyordu */
	.woocommerce ul.products li.product a.button,
	.woocommerce-page ul.products li.product a.button,
	.woocommerce ul.products li.product a.add_to_cart_button,
	.woocommerce-page ul.products li.product a.add_to_cart_button {
		padding: 10px 6px;
		font-size: 13px;
		white-space: nowrap;
	}
}

/* ============================================================
   ERİŞİLEBİLİRLİK — WCAG 2.1 AA kontrast onarımı (16.09.2026)
   Denetim: tools/tasarim-loop/kontrast.py · rapor/kontrast-raporu.md
   Ölçütler: 1.4.3 (metin 4,5:1 · iri 3:1), 1.4.11 (form sınırı 3:1)
   ============================================================ */

/* --- (a) Beyaza çevirme turundan kalan iki GÖRÜNMEZ metin --- */

/* Güven şeridini koyuya çevirirken (İ9) kart zeminleri beyaz kalmıştı:
   beyaz zemin üzerinde beyaz yazı = 1:1, metin tamamen görünmezdi.
   Kartlar saydamlaşıyor; yazı artık koyu şerit üzerinde (17,88:1). */
.cozumoto-trust-strip .cozumoto-trust-item {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.18);
}

/* Footer koyu laciverttten beyaza dönünce (İ9) koyu zemin için seçilmiş
   açık mavi etiket rengi beyaz üzerinde 2,59:1'e düştü. */
.cozumoto-footer-etiket,
#colophon .cozumoto-footer-etiket {
	color: var(--oyp-gray);
}

/* --- (b) Turuncu METİN açık zeminde (2,03–2,84 → 4,50+) --- */
.cozumoto-filtre-baslik,
.cozumoto-banko-tanitim-ust,
.cozumoto-banko-kod,
.cozumoto-marka-oge--tumu .cozumoto-marka-link,
.cozumoto-filtre-kolonu .cozumoto-kategori-cip.is-aktif,
.cozumoto-filtre-kolonu .cozumoto-kategori-cip:hover,
.cozumoto-marka-link:hover,
.cozumoto-marka-oge--mega:hover > .cozumoto-marka-link,
.cozumoto-mega-baslik a:hover,
.cozumoto-mega-modeller a:hover,
.site-header a:hover,
#colophon.site-footer a:hover {
	color: var(--oyp-primary-text);
}
.cozumoto-banko-kod {
	color: var(--oyp-primary-text) !important;
}

/* --- (c) Turuncu zemin üzerinde BEYAZ yazı (2,84) → koyu yazı (6,29) ---
   Hover'da zemin #d88700'e dönüyordu ve yazı beyaza çevriliyordu; bu
   kombinasyon eşiğin altında. Yazı koyu lacivert kalıyor. */
.cozumoto-banko-tanitim-btn:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.single-product div.product form.cart button.single_add_to_cart_button:hover,
body.woocommerce-account button.woocommerce-form-login__submit:hover,
body.woocommerce-account button.woocommerce-form-register__submit:hover,
.cozumoto-banko-secici .button:hover,
.cozumoto-banko-secici button[type="submit"]:hover {
	color: var(--oyp-dark);
}
a.cozumoto-duyuru-cta:hover,
a.cozumoto-duyuru-cta:focus {
	color: #ffffff !important; /* koyu pill üzerinde beyaz — 14,6:1, sorun yok */
}

/* --- (d) Yeşil rozet: beyaz yazı 3,37 → 4,53 --- */
.cozumoto-kargo-rozeti {
	background-color: var(--oyp-success-strong);
}

/* --- (e) Form denetimi sınırları (1.4.11: 3:1) ---
   `--oyp-mid-gray` (#e2e2e2) yalnızca 1,23–1,30:1 veriyordu; dekoratif
   ayraç olarak kalıyor ama form alanlarının SINIRI olamaz. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.input-text,
body.single-product div.product form.cart .quantity input.qty,
body.woocommerce-account .site-main input[type="text"],
body.woocommerce-account .site-main input[type="email"],
body.woocommerce-account .site-main input[type="password"],
.cozumoto-banko-secici select,
.cozumoto-banko-secici input[type="text"],
.cozumoto-banko-secici input[type="search"] {
	border-color: var(--oyp-border-input);
}
/* Header'daki pill arama kutusunun kenarlığı saydamdı (1:1): alanın sınırı
   hiç görünmüyordu. Referansta da kenarlıksız ama bu 1.4.11'i karşılamıyor. */
.site-header .site-search .search-field,
.site-header .widget_product_search .search-field {
	border-color: var(--oyp-border-input);
}

/* --- (f) Kalan küçük bulgular --- */
/* Breadcrumb ayracı `›` #e2e2e2 ile 1,23:1 — metin olduğu için okunabilir olmalı */
.woocommerce-breadcrumb,
.cozumoto-breadcrumb {
	color: var(--oyp-gray);
}
/* Zorunlu alan yıldızı 4,21 → 5,39 */
.required,
abbr.required,
.woocommerce form .form-row .required {
	color: var(--oyp-danger-text);
}

/* --- Kontrast onarımı, ikinci tur (16.09.2026) --- */

/* (g) Araç seçici kutusundaki yardım notu GÖRÜNMEZDİ.
   Hero kutusu koyu (#111726) olduğu için not beyaza boyanmış, ama notun
   bulunduğu form kartının zemini BEYAZ → beyaz üstünde beyaz, 1:1.
   (Bu hata beyaza çevirme turundan önce de vardı.) Not, üstünde durduğu
   beyaz karta göre renklendiriliyor. */
.cozumoto-ymm-filter .cozumoto-ymm-yil-notu,
.cozumoto-banko-secici .cozumoto-ymm-yil-notu {
	color: var(--oyp-gray);
}

/* (h) Turuncu metin düzeltmesi KOYU zeminde ters tepmişti.
   `.cozumoto-banko-kod` koyu hero kutusunun içinde; oraya açık zemin için
   hesaplanan koyu turuncu (#9e6300) uygulanınca 3,61:1'e düştü. Koyu zemin
   üzerinde parlak marka turuncusu zaten 7,4:1 veriyor — geri alınıyor. */
.cozumoto-banko-secici .cozumoto-banko-kod,
.cozumoto-banko-secici a.cozumoto-banko-kod {
	color: var(--oyp-primary) !important;
}

/* (i) Kalan form denetimi sınırları: dosyadaki eski kurallar
   `--cozumoto-border` (#e2e2e2, 1,23–1,30:1) kullanıyor ve daha özgül. */
.cozumoto-ymm-filter select,
.cozumoto-ymm-filter input,
.cozumoto-katalog-arama input,
.cozumoto-katalog-arama .search-field,
.cozumoto-filtre-akordeon select,
.cozumoto-filtre-akordeon input,
.woocommerce .site-main select,
.woocommerce-page .site-main select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.storefront-sorting select {
	border-color: var(--oyp-border-input);
}

/* (j) Breadcrumb ayracı `›` hâlâ #e2e2e2 ile basılıyordu (1,23:1).
   Ayraç metin düğümü olduğu için okunabilirlik eşiğine tabi. */
.woocommerce-breadcrumb,
.cozumoto-katalog-breadcrumb,
.woocommerce-breadcrumb a,
.cozumoto-katalog-breadcrumb a {
	color: var(--oyp-gray);
}
.woocommerce-breadcrumb .breadcrumb-ayrac,
.cozumoto-katalog-breadcrumb .breadcrumb-ayrac,
.woocommerce-breadcrumb > span,
.cozumoto-katalog-breadcrumb > span {
	color: var(--oyp-gray);
}

/* --- Kontrast onarımı, son iki bulgu --- */

/* Kategori sayfasındaki "Tüm katalogda ara" bağlantısı parlak marka
   turuncusuyla basılıyordu: beyaz üzerinde 2,03:1 (13px normal metin). */
.cozumoto-katalog-arama-kapsam a {
	color: var(--oyp-primary-text);
}

/* Katalog arama kutusu `<form class="cozumoto-katalog-arama">` içindeki
   sınıfsız `input`; önceki seçici `.cozumoto-katalog-arama input` daha az
   özgül kalmıştı. Doğrudan çocuk olarak hedefleniyor. */
.cozumoto-katalog-arama > input,
.cozumoto-katalog-arama input[type="search"],
form.cozumoto-katalog-arama input {
	border-color: var(--oyp-border-input);
}

/* ============================================================
   TUTARLILIK ONARIMI — sayfa tipleri arası başlık dili
   Ölçüm: tools/tasarim-loop/tutarlilik.py (16.09.2026)

   Sayfa başlıkları üç ayrı dilde basılıyordu:
     mağaza/kategori/marka/arama : 30,4px / 700 / sola hizalı
     sepet/ödeme/hesap           : 30,4px / 700 / ORTALI
     hakkımızda                  : 32px  /  300 / sola hizalı   ← ağırlık 300
   Tek dile indiriliyor: sola hizalı, 700.
   ============================================================ */

.woocommerce-cart .site-main .entry-title,
.woocommerce-checkout .site-main .entry-title,
.woocommerce-account .site-main .entry-title,
.woocommerce-cart .site-main .page-title,
.woocommerce-checkout .site-main .page-title,
.woocommerce-account .site-main .page-title {
	text-align: left;
}
/* Hakkımızda başlığı 300 ağırlıkla basılıyordu — marka dili 700 */
.page .site-main .entry-title,
.page-template-default .site-main .entry-title {
	font-weight: 700;
}

/* "İlgili ürünler" başlığı 300 ağırlık + ORTALI basılıyordu; ana sayfadaki
   bölüm başlıkları 700 + sola hizalı. Aynı role aynı biçim veriliyor. */
.single-product .related.products > h2,
.single-product .up-sells > h2,
.single-product .cross-sells > h2 {
	font-weight: 700;
	text-align: left;
}

/* --- Tutarlılık onarımı, ikinci tur: özgüllük ---
   İki kural tutmamıştı, sebepleri farklı:

   (1) `.entry-title` Hakkımızda'da `.site-main`in DIŞINDA (`.entry-header`
       içinde) basılıyor; `.page .site-main .entry-title` bu yüzden hiç
       eşleşmedi. Doğrudan gövde sınıfıyla hedefleniyor.

   (2) "İlgili ürünler" başlığında Storefront'un
       `.storefront-full-width-content .up-sells > h2:first-child` kuralı
       (0,3,1) bizimkiyle BERABEREYDİ ve beraberliği o kazanıyordu:
       `woocommerce.css` child temanın `style.css`inden SONRA yükleniyor.
       (Bu depoda tekrar eden tuzak — eşit özgüllükte parent kazanır.)
       Gövde sınıfı eklenip (0,3,2)ye çıkarıldı. */
body.page h1.entry-title,
body.page-template-default h1.entry-title {
	font-weight: 700;
}
body.single-product .related.products > h2,
body.single-product .related.products > h2:first-child,
body.single-product .up-sells.products > h2,
body.single-product .up-sells.products > h2:first-child {
	text-align: left;
	font-weight: 700;
}

/* --- Tutarlılık: HATA bildirimi de aynı kutu diline alınıyor ---
   `.woocommerce-info` / `.woocommerce-message` / `.woocommerce-noreviews`
   markalı kutu biçimini alıyordu ama `.woocommerce-error` listeye hiç
   eklenmemişti: Storefront varsayılanıyla 9px gri sol çubuk + köşesiz
   kutu olarak basılıyor, diğer bildirimlerden farklı görünüyordu.
   Ayrıca zemini #e2401c idi; üstündeki beyaz yazı 4,21:1 (AA 4,5 altında).
   Zemin --oyp-danger-text (#c53516) ile 5,39:1'e çıkıyor.
   `body` öneki ŞART: storefront'un woocommerce stili bu dosyadan SONRA
   yükleniyor ve aynı seçicilerle kendi kutusunu basıyor. */
body .woocommerce-error {
	background-color: var(--oyp-danger-text);
	color: #ffffff;
	border-left: 4px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
body .woocommerce-error a {
	color: #ffffff;
	text-decoration: underline;
}
body .woocommerce-error::before {
	color: #ffffff;
}

/* ============================================================
   17.09.2026 — kullanıcı bildirimleri
   ============================================================ */

/* (1) "Model Yılı hizası yanlış"
   YMM formu `align-items: flex-end`. Üçüncü alanın altında yardım metni
   ("Yıl bilgisi girilmemiş parçalar da listelenir") olduğu için o alan 92px,
   diğerleri 68px; alt hizalamada yıl seçici 24px YUKARI kayıyordu.
   Yardım metni akıştan çıkarılıyor: üç alan da 68px oluyor, seçiciler aynı
   hizaya geliyor, metin alanın altına asılı duruyor. */
/* İLK DENEME YANLIŞTI: yardım metni `position: absolute` yapılmıştı. Bu,
   formun YATAY aktığı mağaza sayfasında işe yarıyor ama ana sayfadaki koyu
   araç seçici kutusunda form DİKEY akıyor — orada mutlak konumlanan metin
   bir sonraki alanın (ve butonun) üstüne biniyordu (kullanıcı bildirdi).
   Doğru çözüm konumlandırma değil: yardım metni akışta kalıyor, diğer iki
   alana AYNI YÜKSEKLİKTE görünmez bir eş veriliyor. Böylece üç alan da eşit
   yükseklikte oluyor ve `align-items: flex-end` seçicileri aynı hizaya
   getiriyor — dikey düzende de hiçbir şey üst üste binmiyor. */
.cozumoto-ymm-filter .cozumoto-ymm-yil-notu {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--oyp-gray);
}
/* `:has()` desteklenmezse davranış eski hâline döner (yalnızca hafif hiza
   kayması), hiçbir şey üst üste binmez. */
@media (min-width: 992px) {
	.cozumoto-ymm-filter .cozumoto-ymm-field:not(:has(.cozumoto-ymm-yil-notu))::after {
		content: "";
		display: block;
		margin-top: 4px;
		font-size: 12.5px;
		line-height: 1.3;
		height: 1.3em;
	}
	/* Ana sayfadaki koyu kutuda form dikey akıyor; orada eşitleyici gereksiz */
	.cozumoto-banko-secici .cozumoto-ymm-filter .cozumoto-ymm-field::after {
		content: none;
	}
}

/* (3) Hero tanıtım kartı geniş ekranda boşalıyordu
   Kapsayıcı genişleyince kart 1266px'e çıkıyor ama metin bloğu ~600px'de
   kalıp sağdaki 260px'lik görselle arasında devasa boşluk bırakıyordu.
   Metin sınırlanıyor, görsel ekranla birlikte büyüyor, ikisi ortalanıyor. */
.cozumoto-banko-tanitim {
	justify-content: center;
	gap: clamp(var(--space-6), 5%, var(--space-12));
}
.cozumoto-banko-tanitim-metin {
	flex: 0 1 520px;
	max-width: 520px;
}
.cozumoto-banko-tanitim-gorsel {
	width: clamp(240px, 32%, 420px);
	max-width: none;
}
@media (max-width: 600px) {
	/* `flex: 0 1 520px` satır yönü için yazıldı; mobilde kart sütuna dönünce
	   520 px YÜKSEKLİK tabanı oldu ve ~150 px'lik metin 508 px kapladı
	   (24.10.2026 ölçümü: kart 769 px). Görsel de mobilde gizli: dekoratif,
	   aynı rayda kampanya görselleri var. */
	.cozumoto-banko-tanitim-metin {
		flex-basis: auto;
	}
	.cozumoto-banko-tanitim-gorsel {
		display: none;
	}
}

/* (2) "Site ortada daracık kalmış, daha ferah olmalı"
   Referansın kapsayıcısı 1290px SABİT. 1900px+ ekranlarda iki yanda ~355px
   boş kalıyor ve katalog 4 sütunda sıkışıyordu — geniş ekranda dar bir
   sütun hissi veriyor. Kapsayıcı ekranla birlikte büyüyen bir değere
   çevriliyor; ürün ızgarası `auto-fill minmax(234px,1fr)` olduğu için
   genişleyen alanı kendiliğinden sütuna çeviriyor.
   Alt sınır korunuyor: 1290px altındaki ekranlarda davranış aynı. */
:root {
	--oyp-container: min(1720px, 95vw);
}

/* ============================================================
   ÜRÜN KARTI — "daha canlı" (17.09.2026 kullanıcı isteği)
   Seçilen üç yön: görsel+hareket · rozet/renk · etkileşim katmanı
   (yoğun ızgara seçilmedi, sütun sayısı değişmiyor)
   ============================================================ */

/* --- (1) Görsel + hareket --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base),
	            border-color var(--transition-base);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(17, 23, 38, 0.10);
	border-color: var(--oyp-mid-gray);
}
/* GRİ ZEMİN DENENDİ VE GERİ ALINDI (17.09.2026).
   Teşhis yanlıştı: ürün fotoğraflarının çoğu ŞEFFAF DEĞİL, kendi BEYAZ
   zeminini taşıyor. Beyaz kartta bu görünmüyordu; arkalarına gri yüzey
   konunca fotoğrafın beyaz kenarı ortaya çıktı ve her kart "kutu içinde
   kutu" gibi göründü (kullanıcı bildirdi). Görsel beyaz zeminde bırakılıyor;
   canlılık, büyüyen görsel alanı + hover hareketiyle sağlanıyor. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail {
	height: 190px;
	background-color: transparent;
	transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1);
}
.woocommerce ul.products li.product:hover a img,
.woocommerce-page ul.products li.product:hover a img {
	transform: scale(1.05);
}

/* --- (2) Rozetler (gerçek veriden; bkz. cozumoto_child_kart_rozetleri) --- */
/* Rozetler AKIŞ DIŞI (absolute) kalıyor: akışa alınsaydı rozeti olan ve
   olmayan kartların başlık/fiyat hizası kayardı (daha önce düzeltilen
   tırtıklı ızgara sorunu geri gelirdi). */
.cozumoto-kart-rozetleri {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
}
.cozumoto-kart-rozet {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 800px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #ffffff;
}
.cozumoto-kart-rozet--kargo   { background-color: var(--oyp-success-strong); }
.cozumoto-kart-rozet--son     { background-color: var(--oyp-danger-text); }
.cozumoto-kart-rozet--tukendi { background-color: var(--oyp-gray); }

/* Tükenen ürün kartı görsel olarak da geri plana çekiliyor */
.woocommerce ul.products li.product.outofstock a img,
.woocommerce-page ul.products li.product.outofstock a img {
	opacity: 0.55;
}

/* --- (3) Etkileşim katmanı --- */
/* Görselin üstünde, yalnızca hover'da beliren "İncele" katmanı.
   Sahte bir "hızlı bakış" penceresi YAPILMADI — katman ürün sayfasına
   götüren gerçek bağlantının görsel karşılığı. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	position: relative;
	display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
	content: "İncele";
	position: absolute;
	left: 50%;
	top: 95px;
	transform: translate(-50%, 6px);
	padding: 7px 18px;
	border-radius: 800px;
	background-color: rgba(17, 23, 38, 0.92);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link::after {
	opacity: 1;
	transform: translate(-50%, -50%);
}
/* Sepete eklendi geri bildirimi (AJAX zaten açık) */
.woocommerce ul.products li.product a.added_to_cart {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--oyp-success-text);
}
.woocommerce ul.products li.product a.add_to_cart_button.loading {
	opacity: 0.75;
}

/* Hareket tercihini kapatan kullanıcılar için */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a img,
	.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
		transition: none;
	}
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
	.woocommerce ul.products li.product:hover a img {
		transform: none;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product a img,
	.woocommerce-page ul.products li.product a img,
	.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
	.woocommerce-page ul.products li.product img.attachment-woocommerce_thumbnail {
		height: 130px;
	}
	/* Dokunmatikte hover yok — katman gizleniyor */
	.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
		content: none;
	}
	.cozumoto-kart-rozetleri {
		top: var(--space-2);
		left: var(--space-2);
	}
	.cozumoto-kart-rozet {
		font-size: 10.5px;
		padding: 2px 7px;
	}
}

/* ============================================================
   HİZALAMA ONARIMI — 17.09.2026 (kullanıcı bildirimi)

   Kapsayıcı 1064px'ten `min(1720px, 95vw)`e genişletilince ana sayfadaki
   bölümler dağıldı: her birinde eski düzenden kalma KENDİ `max-width`
   değeri vardı (1200 / 1180 / 1100px) ve kapsayıcı büyüyünce bunlar yerinde
   kalıp sol kenarları kaydı. Ölçülen hâli:
       header/içerik x=88  · hero x=112 · vitrin x=370 · "Neden" x=410
   Yani sayfanın sol kenarı basamak basamak içeri giriyordu.

   Tüm ana sayfa bölümleri tek kapsayıcı genişliğine bağlanıyor; sol kenarlar
   aynı hizaya geliyor. Bölüm içi ızgaralar zaten esnek, genişleyen alanı
   kendiliğinden kullanıyor.
   ============================================================ */
.cozumoto-vitrin,
.cozumoto-neden,
.cozumoto-neden-inner,
.cozumoto-categories,
.cozumoto-categories-grid,
.cozumoto-vitrin ul.products {
	max-width: var(--oyp-container);
	margin-left: auto;
	margin-right: auto;
}
.cozumoto-vitrin,
.cozumoto-neden,
.cozumoto-categories {
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}
.cozumoto-vitrin ul.products,
.cozumoto-neden-inner,
.cozumoto-categories-grid {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}
/* Vitrin ızgarası da katalogla aynı yoğunlukta olsun (mağazada 5 sütun,
   ana sayfada 4 sütun kalıyordu — aynı kart, iki farklı ölçek). */
.cozumoto-vitrin ul.products {
	grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
}

/* --- Şasi (VIN) kutusu — hero'daki koyu seçici içinde --- */
.cozumoto-sasi {
	margin: 0 0 var(--space-4);
}
.cozumoto-sasi-etiket {
	display: block;
	margin-bottom: var(--space-2);
	font-size: 13px;
	font-weight: 600;
	color: #c7ccd6;
}
.cozumoto-sasi-satir {
	display: flex;
	gap: var(--space-2);
}
.cozumoto-sasi-satir input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	background-color: #ffffff;
	border: 1px solid var(--oyp-border-input);
	border-radius: var(--radius-md);
	color: var(--oyp-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* İstasyon 4 bloğu butona `.cozumoto-banko-secici .button,
   .cozumoto-banko-secici button[type="submit"] { width: 100% }` veriyor.
   İkinci seçici (sınıf + öğe + öznitelik = 0,2,1) `.cozumoto-sasi-satir
   .button`dan (0,2,0) GÜÇLÜ; ilk denememde buton yine satırı kaplayıp
   input'u 31px'te bıraktı. Seçici gövde bağlamıyla (0,3,1)e çıkarıldı. */
.cozumoto-banko-secici .cozumoto-sasi-satir .button,
.cozumoto-banko-secici .cozumoto-sasi-satir button[type="submit"],
.cozumoto-sasi-satir .button {
	width: auto;
	flex: 0 0 auto;
	height: 46px;
	padding: 0 var(--space-5);
	background-color: var(--oyp-primary);
	color: var(--oyp-dark);
	border-radius: var(--radius-md);
	font-weight: 700;
	white-space: nowrap;
}
.cozumoto-sasi-satir .button:hover {
	background-color: var(--oyp-primary-dark);
	color: var(--oyp-dark);
}
.cozumoto-sasi-not {
	margin: var(--space-2) 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #97a0b0;
}
/* "ya da aracınızı seçin" ayracı */
.cozumoto-banko-ayrac {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	color: #97a0b0;
	font-size: 12.5px;
}
.cozumoto-banko-ayrac::before,
.cozumoto-banko-ayrac::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.18);
}

/* --- Şasi gönderildiğinde çıkan panel --- */
.cozumoto-sasi-panel {
	max-width: var(--oyp-container);
	margin: 0 auto var(--space-8);
	padding: 0 var(--space-3);
}
.cozumoto-sasi-panel-inner {
	background-color: var(--oyp-primary-trans);
	border: 1px solid var(--oyp-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-8);
}
.cozumoto-sasi-panel-ust {
	margin: 0 0 var(--space-1);
	font-size: var(--oyp-fs-badge);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oyp-primary-text);
}
.cozumoto-sasi-panel-no {
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--oyp-dark);
}
.cozumoto-sasi-panel-btn {
	display: inline-flex;
	align-items: center;
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-6);
	background-color: var(--oyp-primary);
	border-radius: var(--radius-md);
	color: var(--oyp-dark) !important;
	font-weight: 700;
	text-decoration: none;
}
.cozumoto-sasi-panel-uyari {
	margin: var(--space-2) 0 0;
	color: var(--oyp-gray);
	font-size: 14px;
}

/* ============================================================
   ÜRÜN CAROUSEL'İ — 17.09.2026
   Referans: başlık + sağda ← → daire butonları, yatay kayan şerit.
   Kütüphanesiz: kaydırma `scroll-snap`, oklar 12 satırlık inline JS.
   JS çalışmazsa şerit parmakla/trackpad ile yine kayar; yalnızca oklar
   gizlenir (ilerleyici geliştirme).
   ============================================================ */
.cozumoto-carousel-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.cozumoto-carousel-ust .cozumoto-baslik {
	margin: 0;
}
.cozumoto-carousel-oklar {
	display: flex;
	gap: var(--space-2);
	flex: 0 0 auto;
}
.cozumoto-carousel-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--oyp-mid-gray);
	border-radius: 50%;
	background-color: #ffffff;
	color: var(--oyp-dark);
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base),
	            opacity var(--transition-base);
}
.cozumoto-carousel-ok:hover:not(:disabled) {
	background-color: var(--oyp-primary);
	border-color: var(--oyp-primary);
	color: var(--oyp-dark);
}
.cozumoto-carousel-ok:disabled {
	opacity: 0.35;
	cursor: default;
}
/* Kaydıracak yer yoksa okları hiç gösterme (JS sınıfı ekler) */
.cozumoto-carousel--kaydirilamaz .cozumoto-carousel-oklar {
	display: none;
}

/* Ray: ızgarayı tek satırlık yatay şeride çevirir */
.cozumoto-carousel-ray {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Kart gölgesi/hover yükselmesi kırpılmasın */
	padding: 4px 0 var(--space-4);
	margin: -4px 0 0;
}
.cozumoto-carousel-ray::-webkit-scrollbar {
	display: none;
}
/* Izgara → tek satır. `grid-auto-flow: column` ile sütunlar yan yana dizilir. */
.cozumoto-vitrin .cozumoto-carousel-ray ul.products,
.woocommerce .cozumoto-carousel-ray ul.products,
.woocommerce-page .cozumoto-carousel-ray ul.products {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(234px, 1fr);
	grid-template-columns: none;
	gap: var(--space-5);
	margin: 0;
}
.cozumoto-carousel-ray ul.products li.product {
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.cozumoto-carousel-ust {
		margin-bottom: var(--space-4);
	}
	.cozumoto-carousel-oklar {
		display: none; /* mobilde parmakla kaydırma yeterli */
	}
	.woocommerce .cozumoto-carousel-ray ul.products,
	.woocommerce-page .cozumoto-carousel-ray ul.products,
	.cozumoto-vitrin .cozumoto-carousel-ray ul.products {
		grid-auto-columns: minmax(150px, 60vw);
		gap: var(--space-3);
	}
}

/* ============================================================
   HERO KAMPANYA CAROUSEL'İ — 17.09.2026
   Kampanya slaytı YOKKEN (bugünkü durum) hiçbir şey değişmez:
   `.cozumoto-kampanya--carousel` sınıfı basılmaz, ray tek slaytı
   normal blok gibi gösterir, nokta göstergesi çizilmez.
   Slayt eklendiği an ray yatay kaydırmalı carousel'e döner.
   ============================================================ */
/* `height: 100%` DENENDİ VE GERİ ALINDI: sarmalayıcı → ray → slayt zinciri
   boyunca yüzde yükseklik, hero'nun `1fr` satırıyla birleşince tanıtım kartını
   511px'ten 1937px'e şişirdi (canlıda ölçüldü). Kart doğal yüksekliğinde
   bırakılıyor; kampanya slaytları eklendiğinde ray zaten sabit oranlı
   görsellerle çalışacak. */
.cozumoto-kampanya {
	position: relative;
	min-width: 0;
}
/* Birden çok slayt: yatay kaydırmalı şerit */
.cozumoto-kampanya--carousel .cozumoto-kampanya-ray {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--space-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius-lg);
}
.cozumoto-kampanya--carousel .cozumoto-kampanya-ray::-webkit-scrollbar {
	display: none;
}
/* Kaydırma durağı RAY'IN DOĞRUDAN ÇOCUKLARINA verilir; tanıtım kartı da
   ray içinde ama kampanya slaytı DEĞİL (aşağıdaki görsel kuralları onu
   kapsamamalı — kapsayınca `height:100%` kartın görselini döngüsel
   boyutlandırıp kartı 511px'ten 1937px'e şişirmişti). */
.cozumoto-kampanya--carousel .cozumoto-kampanya-ray > * {
	scroll-snap-align: start;
	min-width: 0;
}
/* Kampanya görseli slaytı — YALNIZCA gerçek kampanya slaytları.
   `.cozumoto-banko-tanitim` (tanıtım kartı) bu sınıfı TAŞIMAZ. */
a.cozumoto-kampanya-slayt {
	display: block;
}
a.cozumoto-kampanya-slayt {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	text-decoration: none;
}
.cozumoto-kampanya-slayt > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.cozumoto-kampanya-baslik {
	position: absolute;
	left: var(--space-6);
	bottom: var(--space-6);
	right: var(--space-6);
	padding: var(--space-3) var(--space-4);
	background-color: rgba(17, 23, 38, 0.86);
	border-radius: var(--radius-md);
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
/* Nokta göstergesi (JS dolduruyor) */
.cozumoto-kampanya-noktalar {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: var(--space-3);
}
/* Dokunma hedefi ≥24×24 px (WCAG 2.5.8, Lighthouse target-size, #99): düğme
   24 px, görsel nokta ::before ile 9 px kalır; aktif nokta 22 px hap. */
.cozumoto-kampanya-nokta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.cozumoto-kampanya-nokta::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--oyp-mid-gray);
}
.cozumoto-kampanya-nokta[aria-current="true"] {
	width: 37px;
}
.cozumoto-kampanya-nokta[aria-current="true"]::before {
	width: 22px;
	border-radius: 800px;
	background-color: var(--oyp-primary);
}

/* --- Kupon hata mesajı (17.09.2026) ---
   WooCommerce 9.x geçersiz kupon uyarısını standart bildirim kutusu yerine
   kupon alanının altında `<p class="coupon-error-notice">` olarak basıyor.
   Bizim bildirim stillerimiz `.woocommerce-error`a bağlı olduğu için bu
   satır tamamen stilsiz kalıyordu: şeffaf zemin, vurgu yok, normal metinden
   ayırt edilemiyordu. İlk teşhisim "mesaj hiç basılmıyor" idi — yanlıştı,
   basılıyor ama hata gibi okunmuyor. Diğer hata kutularıyla aynı dile
   getiriliyor (küçültülmüş hâliyle: satır içi, kutu değil). */
/* `body` öneki: dosyada daha önce `.coupon-error-notice`a #e2401c veren bir
   kural var ve eşit özgüllükte kazanıyordu; o renk açık kırmızı zeminde
   AA eşiğinin altında kalıyor. */
/* Storefront `woocommerce.css`te
   `table.cart td.actions .coupon .coupon-error-notice` (0,4,2) ile #e2401c
   veriyor ve o dosya child temadan SONRA yükleniyor. `body` önekiyle
   (0,2,2) kaybediyordum; aynı yapı izlenip (0,4,3)e çıkarıldı.
   #e2401c açık kırmızı zeminde 3,74:1 — AA eşiği 4,5. */
table.cart td.actions .coupon p.coupon-error-notice,
body .woocommerce p.coupon-error-notice,
body .woocommerce-page p.coupon-error-notice,
body p.coupon-error-notice {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: var(--space-2) 0 0;
	padding: 8px 12px;
	background-color: rgba(197, 53, 22, 0.08);
	border-left: 3px solid var(--oyp-danger-text);
	border-radius: var(--radius-sm);
	color: var(--oyp-danger-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}
table.cart td.actions .coupon p.coupon-error-notice::before,
body .woocommerce p.coupon-error-notice::before,
body p.coupon-error-notice::before {
	content: "!";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: var(--oyp-danger-text);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* --- Filtre paneli: kategori listesine kendi kaydırması (17.09.2026) ---
   Katalog 12.375 → 22.519 ürüne çıkınca kategori sayısı da 61'e ulaştı ve
   sol panel 2.707px oldu (ekran 900px). Bu boyda `position: sticky` işe
   yaramıyor — öğe ekrandan uzun olduğu için "yapışacak" bir durumu yok — ve
   kullanıcı filtrelere ulaşmak için listenin tamamını geçmek zorunda
   kalıyordu. Liste kendi içinde kaydırılıyor; panel ekrana sığınca yapışkan
   davranış da gerçekten çalışır hâle geliyor. */
.cozumoto-filtre-kolonu .cozumoto-kategori-serit {
	max-height: 48vh;
	overflow-y: auto;
	/* `flex-wrap: nowrap` ŞART. Şerit eski YATAY çip tasarımından `wrap`
	   devralıyor; dikey yönde yükseklik sınırlanınca liste kaydırılmak yerine
	   görünmeyen YAN SÜTUNLARA taşıyordu (61 çipin toplamı 2.013px olmasına
	   rağmen scrollHeight 421px ölçülüyordu — son çip tepedeydi). */
	flex-wrap: nowrap;
	flex-shrink: 0;
	overscroll-behavior: contain;
	/* Kaydırma olduğunu belli eden ince çizgi */
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--oyp-mid-gray) transparent;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-serit::-webkit-scrollbar {
	width: 6px;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-serit::-webkit-scrollbar-thumb {
	background-color: var(--oyp-mid-gray);
	border-radius: 800px;
}
.cozumoto-filtre-kolonu .cozumoto-kategori-serit::-webkit-scrollbar-track {
	background: transparent;
}
/* Çipler büzülmesin, doğal yüksekliklerini korusun (yukarıdaki not) */
.cozumoto-filtre-kolonu .cozumoto-kategori-serit > .cozumoto-kategori-cip {
	flex: 0 0 auto;
}

/* Alt kenarda "devamı var" ipucu */
.cozumoto-filtre-kolonu .cozumoto-kategori-serit {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}

@media (max-width: 991px) {
	/* Tek kolonda panel zaten ürünlerin üstünde; sınırlama gereksiz */
	.cozumoto-filtre-kolonu .cozumoto-kategori-serit {
		max-height: none;
		overflow-y: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Mobil listede kategoriler de Filtrele başlığından açılır. Üstteki
   sayfalama alttakiyle tekrar ettiği için kartlara yer bırakır. */
@media (max-width: 767px) {
	body.archive.woocommerce .cozumoto-liste-kolonu > .storefront-sorting:first-child .woocommerce-pagination {
		display: none;
	}
}

/* ============================================================
   HIZLI PARÇA TALEBİ — sabit buton + popup (17.09.2026)
   Tetik kuralı JS'te: girişte AÇILMAZ; 0 sonuçlu aramada ve
   çıkış niyetinde, oturumda bir kez, ürün/ödeme sayfalarında hiç.
   ============================================================ */
.cozumoto-talep-fab {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: 800px;
	background-color: var(--oyp-success-strong);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(17, 23, 38, 0.22);
}
.cozumoto-talep-fab:hover {
	background-color: #0b6d36;
}
.cozumoto-talep-ortu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background-color: rgba(15, 23, 42, 0.55);
}
.cozumoto-talep {
	position: fixed;
	z-index: 101;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: var(--space-8);
	background-color: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(17, 23, 38, 0.3);
}
.cozumoto-talep[hidden],
.cozumoto-talep-ortu[hidden] {
	display: none;
}
.cozumoto-talep h2 {
	margin: 0 0 var(--space-2);
	font-size: 21px;
	font-weight: 700;
	color: var(--oyp-dark);
}
.cozumoto-talep-not {
	margin: 0 0 var(--space-5);
	font-size: 14px;
	line-height: 1.45;
	color: var(--oyp-gray);
}
.cozumoto-talep label {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--oyp-dark);
}
.cozumoto-talep input,
.cozumoto-talep textarea {
	width: 100%;
	margin-bottom: var(--space-4);
	border: 1px solid var(--oyp-border-input);
	border-radius: var(--radius-md);
	background-color: #ffffff;
	color: var(--oyp-dark);
}
.cozumoto-talep input {
	height: 46px;
}
.cozumoto-talep textarea {
	padding: 10px 12px;
	line-height: 1.45;
	resize: vertical;
}
.cozumoto-talep-hata {
	margin: 0 0 var(--space-3);
	padding: 8px 12px;
	background-color: rgba(197, 53, 22, 0.08);
	border-left: 3px solid var(--oyp-danger-text);
	border-radius: var(--radius-sm);
	color: var(--oyp-danger-text);
	font-size: 13.5px;
	font-weight: 600;
}
.cozumoto-talep-hata[hidden] {
	display: none;
}
.cozumoto-talep-gonder {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--radius-md);
	background-color: var(--oyp-success-strong);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.cozumoto-talep-gonder:hover {
	background-color: #0b6d36;
}
.cozumoto-talep-gizlilik {
	margin: var(--space-3) 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--oyp-gray);
}
.cozumoto-talep-kapat {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background-color: var(--oyp-surface);
	color: var(--oyp-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.cozumoto-talep-kapat:hover {
	background-color: var(--oyp-mid-gray);
}

@media (max-width: 767px) {
	.cozumoto-talep-fab {
		right: var(--space-3);
		/* Storefront'un mobil alt çubuğunun üstünde dursun */
		bottom: calc(var(--oyp-bottom-nav) + var(--space-3));
		padding: var(--space-3) var(--space-4);
		font-size: 13px;
	}
	.cozumoto-talep {
		padding: var(--space-6);
	}
}

/* --- Kategori vitrini: ikonlu ve fotoğraflı kartlar aynı ölçüde (17.09.2026)
   Vitrin veriye bağlanınca (sabit slug listesi yerine en çok ürünlü
   kategoriler) fotoğrafı OLMAYAN kategoriler geldi — Kaporta ve Dış Donanım,
   Alt Takım ve Direksiyon gibi. Onlar 64px'lik daire ikonla basılıyor;
   fotoğraflı kartların yanında yarı boş görünüyorlardı.
   İkon, fotoğrafla aynı en-boy oranındaki bir alanın ortasına konuyor;
   ızgara tek düzeye geliyor. (Bu kategoriler için fotoğraf üretilirse
   kart kendiliğinden fotoğraflı sürüme geçer.) */
/* (Bu blok 17.09.2026'da GEÇERSİZ KILINDI: ikon kutusuna açık gri zemin
   veriyordu ve `:not()` özgüllüğü yüzünden sonraki koyu lacivert kuralı
   eziyordu. Fotoğraflı kartların zemini koyu lacivert olduğu için ikonlu
   kartlar gri kalınca ızgara iki parçaya bölünmüş görünüyordu.
   Güncel kural aşağıda: her iki kart türü de aynı koyu kutuyu kullanıyor.) */

/* ============================================================
   KATEGORİ VİTRİNİ — tek görsel dil (17.09.2026)

   Sorun (kullanıcı ekran görüntüsüyle bildirdi): ızgara dağınık ve
   kurumsal durmuyordu.
     · Kart `align-items: center` olduğu için fotoğraf bloğu kart
       genişliğine yayılmıyordu; görsel ortada küçük kalıp iki yanında
       beyaz boşluk bırakıyordu.
     · Fotoğrafsız kategoriler 64px'lik soluk daire ikonla basılıyordu;
       fotoğraflı kartların yanında bomboş görünüyorlardı.
     · İki tür kartın içeriği farklı yükseklikte başlıyordu.

   Çözüm: her kart AYNI yapıda — üstte kart genişliğinde, 3:2 oranında
   KOYU LACİVERT görsel alanı, altında aynı dolgulu metin bloğu.
   Mevcut fotoğrafların zemini zaten koyu lacivert; fotoğrafsız
   kategorilerde aynı zemine turuncu ikon konuyor. Böylece ikonlu kart
   "eksik" değil, serinin bir üyesi gibi okunuyor.
   ============================================================ */
/* Sütun sayısı SABİT: 8 kart → masaüstünde tam iki satır (4+4).
   `auto-fit` denendi ve bırakıldı — 1920px'te 7, 1440'ta 5 sütun üretip
   son satırda yine artık kart bırakıyordu. */
.cozumoto-categories-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
}
@media (max-width: 1100px) {
	.cozumoto-categories-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.cozumoto-categories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}
}
/* Metin bloğu tüm kartlarda aynı yükseklikte: uzun kategori adı ikinci
   satıra taşınca kart boyu değişmesin (ölçümde 214/210 fark çıkmıştı). */
.cozumoto-category-card > span:not(.cozumoto-category-gorsel):not(.cozumoto-category-icon) {
	min-height: 0;
}
.cozumoto-category-card {
	justify-content: flex-start;
}
.cozumoto-category-card {
	align-items: stretch;      /* görsel bloğu kart genişliğini kaplasın */
	gap: 0;
	padding: 0;                /* görsel kenara dayansın, metin kendi dolgusunu alsın */
	overflow: hidden;
	border-radius: var(--radius-lg);
	border-color: var(--oyp-card-border);
	text-align: center;
}
/* Görsel alanı — fotoğraflı ve ikonlu kartlarda BİREBİR aynı kutu */
.cozumoto-category-card .cozumoto-category-gorsel,
.cozumoto-category-card .cozumoto-category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	/* Aşağıdaki `> span` metin dolgusu bu kutuya da düşüyordu: görsel iki
	   yanda 16px daralıp koyu zemini şerit olarak gösteriyordu (24.10.2026). */
	padding: 0;
	border-radius: 0;
	background-color: var(--oyp-dark);
	overflow: hidden;
}
.cozumoto-category-card .cozumoto-category-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* İkon: koyu zeminde turuncu, fotoğrafla aynı ağırlıkta */
.cozumoto-category-card .cozumoto-category-icon img {
	width: 52px;
	height: 52px;
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(72%) sepia(58%) saturate(1600%) hue-rotate(350deg) brightness(102%) contrast(103%);
}
.cozumoto-category-card:hover .cozumoto-category-icon {
	background-color: var(--oyp-dark-light);
}
/* Metin bloğu — iki kart türünde de aynı */
.cozumoto-category-card > span {
	display: block;
	padding: 0 var(--space-4);
}
.cozumoto-category-card > span:not(.cozumoto-category-gorsel):not(.cozumoto-category-icon):first-of-type {
	padding-top: var(--space-4);
}
.cozumoto-category-card .cozumoto-category-sayi {
	padding-bottom: var(--space-4);
	color: var(--oyp-gray);
	font-weight: 500;
}
/* Bölüm kapsayıcısı: sola hizalı başlıkla uyumlu olsun */
.cozumoto-categories {
	text-align: left;
}
/* Ana sayfa mobil: genel 16 px kenarın (.col-full) üstüne banko kendi 12 px
   dolgusunu eklemesin (24.10.2026). */
@media (max-width: 767px) {
	.home .cozumoto-banko {
		padding-left: 0;
		padding-right: 0;
	}
	/* Tek dikey ritim: bölümler arası 32 px. Önceden 24/32/40/48 px karışıktı,
	   kategori bölümü ayrıca üst/alt 48 px dolgu taşıyordu. */
	.home .site-content > section {
		margin-top: 0;
		margin-bottom: var(--space-8);
	}
	.home .cozumoto-categories {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Kutusuz bölümler kutulu bölümlerle aynı 16 px hizasından başlasın. */
	.home .cozumoto-categories,
	.home .cozumoto-vitrin,
	.home .cozumoto-rehber-bolum {
		padding-left: 0;
		padding-right: 0;
	}
	.home .cozumoto-categories h2 {
		margin-bottom: var(--space-4);
	}
}

/* Mobil: kategoriler tek satır yatay kaydırmalı şerit (vitrin ve rehber
   carousel'leriyle aynı kalıp). Dikey 2 sütun ızgara 8 kategoride 705 px
   tutuyordu (24.10.2026); kart görünümü aynı kalır, yalnız dizilim değişir. */
@media (max-width: 767px) {
	.cozumoto-categories-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: var(--space-1);
	}
	.cozumoto-categories-grid::-webkit-scrollbar {
		display: none;
	}
	.cozumoto-categories-grid > * {
		scroll-snap-align: start;
	}
}

/* ============================================================================
 * 17.09.2026 — Aynı OEM numarasını paylaşan ürünler (ürün sayfası)
 *
 * Bölüm, Uyumlu Araçlar'ın (kart zeminli) aksine ÇİZGİYLE ayrılıyor: içinde
 * ürün ızgarası var ve gri zemin üstünde ürün kartları ikinci bir kart katmanı
 * gibi duruyordu. Aynı gerekçeyle arama sayfasındaki `.cozumoto-arama-ilgili`
 * bölümü de çizgi kullanıyor — iki yerde aynı ritim.
 * Not: içerik `inc/muadil.php`'de.
 * ========================================================================== */
.cozumoto-muadil-bolum {
	clear: both;
	margin-top: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--cozumoto-border);
}
.cozumoto-muadil-bolum .cozumoto-baslik {
	font-size: 1.1em;
	margin-bottom: var(--space-3);
}
/* Uyarı metni başlıkla liste arasında; sipariş öncesi okunması gereken tek
   cümle olduğu için soluk değil, okunur bir gri (--cozumoto-text-muted AA'yı
   geçen tondur) ve sol turuncu şeritle işaretli. */
.cozumoto-muadil-not {
	margin: 0 0 var(--space-6);
	padding-left: var(--space-3);
	border-left: 3px solid var(--cozumoto-orange);
	font-size: 0.88em;
	line-height: 1.6;
	color: var(--cozumoto-text-muted);
}
/* ≥992px'te `div.product` bir IZGARA (bkz. "İSTASYON 6 — Ürün detay: üç kolon").
   Izgarada `clear` hükümsüzdür: yerleştirilmemiş her çocuk bir sütun izine
   düşer. Bölüm bu yüzden 1440px'te sol yarısı boş, 544px genişlikte sağ
   kolona sıkışıyordu (Playwright ile ölçüldü, 17.09.2026). Akordeon ve
   `.related` aynı sebeple yukarıda `1 / -1` alıyor; bu kural onların eşi —
   dosyanın ortasındaki bloğa girmemek için (eşzamanlı vardiya) burada. */
@media (min-width: 992px) {
	body.single-product div.product > .cozumoto-muadil-bolum {
		grid-column: 1 / -1;
		width: auto;
		float: none;
	}
	/* Uyumlu Araçlar aynı kusurdaydı: 1440px'te x=36 / genişlik=460 ile sol
	   sütuna sıkışıyordu (CANLIDA ölçüldü, 17.09.2026). Bölümü yazan vardiya
	   bunun bilinçli bir yerleşim olmadığını doğruladı. */
	body.single-product div.product > .cozumoto-uyumlu-bolum,
	body.single-product div.product > .cozumoto-uretici-fitment {
		grid-column: 1 / -1;
	}
}

/* Üretici kataloğuna göre araç uyumu (#147). Uyumlu Araçlar bölümünün eşi;
   kaynak satırı her zaman görünür, üretici ifadesi olduğu gibi listelenir. */
.cozumoto-uretici-fitment {
	margin: var(--space-8) 0;
	padding: var(--space-5);
	background-color: var(--cozumoto-surface);
	border-radius: var(--radius-md);
}
.cozumoto-uretici-fitment .cozumoto-baslik {
	font-size: 1.1em;
	margin-bottom: var(--space-3);
}
.cozumoto-uretici-fitment__liste {
	margin: 0 0 var(--space-3) var(--space-5);
	columns: 2 18rem;
	column-gap: var(--space-8);
}
.cozumoto-uretici-fitment__liste li {
	break-inside: avoid;
	margin-bottom: var(--space-1);
}
.cozumoto-uretici-fitment__ek {
	margin: 0 0 var(--space-2);
	overflow-wrap: anywhere;
}
.cozumoto-uretici-fitment__kod {
	font-family: var(--font-mono);
}
.cozumoto-uretici-fitment__kaynak,
.cozumoto-uretici-fitment__not {
	margin: var(--space-2) 0 0;
	font-size: 0.9em;
	color: var(--cozumoto-text-muted);
}
.cozumoto-uretici-fitment__kaynak a {
	color: inherit;
	text-decoration: underline;
}
/* Her uygulama satırı kendi OE'si ve kaynak bağlantısıyla (#147 inceleme HIGH2). */
.cozumoto-uretici-fitment__satir {
	overflow-wrap: anywhere;
}
.cozumoto-uretici-fitment__satir-ek,
.cozumoto-uretici-fitment__satir-kaynak {
	font-size: 0.85em;
	color: var(--cozumoto-text-muted);
}
.cozumoto-uretici-fitment__satir-kaynak {
	text-decoration: underline;
}

/* ⚠️ BU IZGARAYA EKLENEN HER YENİ TAM GENİŞLİK BÖLÜMÜ `grid-column: 1 / -1`
   ALMAK ZORUNDA. Almazsa sessizce bir sütun izine düşer: hata vermez, test
   kırmaz, yalnızca sayfanın yarısı boş kalır. İki bölüm (Uyumlu Araçlar ve
   muadil) bu tuzağa arka arkaya düştü. `clear`/`float` ızgarada hükümsüzdür. */

/* ------------------------------------------------------------------
   Kurumsal logo — yatay kilit (17.09.2026)
   ------------------------------------------------------------------
   Eski logo dikey kilitliydi (sembol markanın üstünde) ve 180px'lik
   yuvaya oturuyordu. Yeni logo YATAY, oranı 4,24:1 — aynı 180px'te
   yüksekliği 42px'e düşer ve marka adı gereksiz yere küçük kalırdı.
   Başlıkta yer var (arama kutusuna kadar ~400px boşluk), genişlik
   artırıldı. Yükseklikler: 260px -> 61px, 200px -> 47px, 170px -> 40px.

   Bu blok style.css'in SONUNDA; üstteki üç `max-width` tanımını
   (200/150/180) bilinçli olarak eziyor — onlar eski dikey logoya göre
   ayarlanmıştı. */
.site-header .site-branding img.custom-logo {
	max-width: 260px;
}
@media (max-width: 991px) {
	.site-header .site-branding img.custom-logo {
		max-width: 200px;
	}
}
@media (max-width: 600px) {
	.site-header .site-branding img.custom-logo {
		max-width: 170px;
	}
}

/* ============================================================================
 * 17.09.2026 — Hero sağ kolonundaki ölü boşluk
 *
 * ÖLÇÜM (canlı, Playwright): tanıtım kartının altı ile kanıt şeridinin üstü
 * arasında 1280px'te 454px, 1440px'te 431px, 1920px'te 348px boşluk vardı.
 *
 * SEBEP üç katmanda: (1) `.cozumoto-banko-inner` `align-items: stretch`
 * olduğu için sağ kolon sol panelin boyuna (810px) zorlanıyor; (2)
 * `.cozumoto-banko-yan`ın `1fr` satırı artığın tamamını yutup 687px oluyor;
 * (3) ama `.cozumoto-kampanya` blok ve yükseklik aşağı geçmediği için
 * tanıtım kartı 272px'te kalıyor. `1fr`in niyeti doğruydu, zincir kopuktu.
 *
 * BURADAKİ KURAL YALNIZCA (a): zinciri bağlar. Boşluğu YOK ETMEZ, kartın
 * içine taşır — kart "cömert" okunur, "bozuk" okunmaz.
 *
 * TAMAMLANDI: boşluğu asıl kapatan (b) bloğu bu dosyanın SONUNDA ("Sağ kolon
 * TEK panel"). Çözüm sağ kolona yeni içerik eklemek DEĞİL, mevcut iki kutuyu
 * (bej tanıtım + gri kanıt) tek panele toplamak oldu. Canlıda; 1280/1440/
 * 1920px'te kutular arası boşluk 0 ve iki kolon aynı noktada bitiyor.
 *
 * DENENDİ, TUTMADI — sağ kolona araç markası kısayolları koymak.
 * Yazıldı, sonra geri alındı: ana sayfada ZATEN `.cozumoto-marka-serit`
 * var (y=174, hero'nun 165px üstünde, 519 bağlantı) ve aynı taksonomiyi
 * aynı sıralamayla basıyor — çipler onun görsel kopyası olurdu. Deponun
 * emsali de bu yönde: `.home .cozumoto-trust-strip` aynı sebeple gizli.
 * Ana sayfaya konabilecek her aday (kategori kartı, ürün listesi, marka
 * çipi, güven rozeti) mevcut bir bölümün tekrarı; boşluk bir içerik
 * açığından değil, sol panelin dürüstçe 810px olmasından doğuyor.
 * ========================================================================== */

/* (a) Yükseklik zinciri. Yalnızca ızgaranın geçerli olduğu kırılımda:
   991px altında `.cozumoto-banko-yan` zaten `auto auto`, germe yok. */
@media (min-width: 992px) {
	.cozumoto-kampanya,
	.cozumoto-kampanya-ray,
	.cozumoto-kampanya .cozumoto-banko-tanitim {
		height: 100%;
	}
}

/* (b) Sağ kolon TEK panel — kanıt şeridi tanıtım kartının içine alınıyor.
 *
 * (a) zinciri bağladı ama boşluğu kartın içine taşıdı: 687px'lik bej kartta
 * 272px içerik yüzüyordu. Sağ kolonda ÜSTELİK iki ayrı kutu vardı (bej
 * tanıtım + gri kanıt) ve aralarında `gap` duruyordu — yani yükseklik
 * sorunu, iki kutunun da yarı boş kalmasıyla çözülmeye çalışılıyordu.
 *
 * Yaklaşım: yeni içerik UYDURMA (her aday mevcut bir bölümün tekrarı olurdu
 * — bkz. yukarıdaki "DENENDİ, TUTMADI"), bunun yerine zaten sahip olduğumuz
 * içeriği tek bütünlüklü bir panele topla. Sonuç: üst bilgi + başlık + CTA +
 * BÜYÜK ürün görseli, altında ince ayraçla istatistikler. Yükseklik gerçek
 * içerikle doluyor.
 *
 * Görsel `width:100%` alıyor çünkü asıl boşluk yutucu o: yatay düzende
 * 271px'te kalıyordu, dikey düzende 560px'e kadar çıkıp kartın boyunu
 * dürüstçe taşıyor.
 *
 * Yalnızca >=992px: altında ızgara zaten `auto auto`, germe yok, kartlar
 * doğal boylarında ve ayrı durmaları doğru. */
@media (min-width: 992px) {
	.cozumoto-banko-yan {
		gap: 0;
	}

	/* Tanıtım kartı dikey düzene geçiyor; alt kenarı kanıt şeridiyle
	   birleştiği için orada köşe yuvarlaması ve kenarlık yok. */
	.cozumoto-banko-yan .cozumoto-banko-tanitim {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: var(--space-8);
		padding: var(--space-10) var(--space-8) var(--space-8);
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.cozumoto-banko-yan .cozumoto-banko-tanitim-metin {
		flex: 0 0 auto;
		max-width: none;
	}
	.cozumoto-banko-yan .cozumoto-banko-tanitim-gorsel {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}

	/* Kanıt şeridi panelin alt satırı: aynı bej zemin, üstte yalnızca ince
	   ayraç, köşeler yalnızca altta. Gri yüzey ve ayrı kart görünümü kalktı. */
	.cozumoto-banko-yan .cozumoto-banko-kanit {
		background-color: var(--oyp-primary-trans);
		border-color: var(--oyp-card-border);
		border-top: 1px solid rgba(16, 36, 62, 0.12);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: var(--space-6) var(--space-8);
	}
}

/* ============================================================================
 * Hero carousel — İKİ KART GÖRÜNÜR MOD (17.09.2026)
 *
 * Referans ölçümü: sağ kolonda iki portre kart (403x474) + altında noktalar,
 * KENDİLİĞİNDEN DÖNMÜYOR (elle sayfalama). Biz de döndürmüyoruz — otomatik
 * dönen carousel WCAG 2.2.2 açısından da sorunlu.
 *
 * Kart ÖLÇÜSÜNÜ referanstan KOPYALAMADIK. Referansın sol paneli 494px,
 * bizimki 811px (ölçüldü: etiketler, yardım metinleri ve şasi kutusu farkı).
 * 474px'lik kart bizim kolonda ~300px açık bırakırdı — yani bugün kapattığımız
 * boşluk geri gelirdi. Kartlar bizde rayın boyunu doldurur.
 *
 * Bu yüzden kart oranı SABİT DEĞİL: 1440px'te ~449/645 = 0,70, 1920px'te
 * ~625/645 = 0,97. Görseller portre üretilip `object-fit: cover` ile
 * kırpılıyor; bu yüzden görselin İÇİNE metin gömülmez (kenarlardan kırpılır),
 * metin `baslik` alanından gelir ve kartın üstüne basılır.
 * ========================================================================== */
@media (min-width: 992px) {
	/* Tanıtım kartı, slayt YOKKEN gösterilen yedek içeriktir. Gerçek slayt
	   varsa gizlenir; yoksa ray içinde dördüncü bir kart gibi görünür ve
	   nokta sayısı da yanlış olurdu (3 slayt = 2 sayfa beklerken 4 = 2). */
	.cozumoto-kampanya--carousel .cozumoto-banko-tanitim {
		display: none;
	}

	/* Ray, noktalara yer bırakarak kolonu doldurur. `height: 100%` yerine
	   flex: noktalar da `.cozumoto-kampanya` içinde ve yüzde yükseklik
	   ikisini birden sayamıyor. */
	.cozumoto-kampanya--carousel {
		display: flex;
		flex-direction: column;
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-ray {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		/* Tek kart yerine İKİ kart görünür. */
		grid-auto-columns: calc((100% - var(--space-4)) / 2);
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-ray > * {
		height: 100%;
		/* min-content tabanını kır: aşağıdaki `position: absolute` olmasa
		   bile slayt, içindeki görselin doğal boyuna zorlanmasın. */
		min-height: 0;
	}

	/* ÖLÇÜLDÜ VE DÜZELTİLDİ (1920px): kartlar 625x875 çıkıp sağ kolonu
	   1019px'e uzatıyordu; sol panel de peşinden gerilip içi boş kalıyordu.
	   Sebep: `1fr` aslında `minmax(auto, 1fr)` ve `auto` tabanı min-content'e
	   oturuyor — 625px genişlikteki 5:7 görsel 875px min-content üretiyordu
	   (625 x 1,4 = 875, birebir). Yani satırı görselin DOĞAL ORANI sürüyordu,
	   kolonun boyu değil.
	   Çözüm: görseli akıştan tamamen çıkar. `object-fit: cover` zaten kırpıyor,
	   görselin yerleşime yükseklik katkısı olmamalı. */
	.cozumoto-kampanya--carousel {
		min-height: 0;
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-slayt {
		position: relative;
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-slayt > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-noktalar {
		flex: 0 0 auto;
	}

	/* Panel birleşmesi GERİ ALINIR: tek bej panel yaklaşımı (bu dosyanın
	   sonundaki "Sağ kolon TEK panel" bloğu) slayt YOKKEN geçerli. Slayt
	   varken sağ kolon ayrı kartlardan oluşuyor, kanıt şeridi de kendi
	   kartına dönmeli — yoksa hiçbir şeye yapışmayan yarım bir kart olur. */
	.cozumoto-banko-yan:has(.cozumoto-kampanya--carousel) {
		gap: var(--space-4);
	}
	.cozumoto-kampanya--carousel ~ .cozumoto-banko-kanit {
		background-color: var(--oyp-surface);
		border-top: 1px solid var(--oyp-card-border);
		border-top-left-radius: var(--radius-lg);
		border-top-right-radius: var(--radius-lg);
	}
}

/* Carousel — 992px ALTI. Yukarıdaki iki-kart kuralları yalnızca masaüstünde
   geçerli; altında ray tek slaytı tam genişlikte gösteriyor. Orada slaytın
   yüksekliğini görselin DOĞAL ORANI belirliyordu: 991px'te 859px genişlikteki
   5:7 portre görsel 1203px yükseklik üretiyordu (ölçüldü) — ekranı tek başına
   dolduran bir slayt. Oran burada manzaraya sabitleniyor; `object-fit: cover`
   zaten kırptığı için görsel portre üretilmeye devam edebilir. */
@media (max-width: 991px) {
	.cozumoto-kampanya--carousel .cozumoto-kampanya-slayt {
		position: relative;
		aspect-ratio: 3 / 2;
	}
	.cozumoto-kampanya--carousel .cozumoto-kampanya-slayt > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================================
   Blog — tekil yazı (20.09.2026)
   Yazılar depodan taslak ucuyla geliyor (blog/YAZIM-KURALLARI.md); gövde düz
   HTML'dir ve iki anlamsal kutu taşır: .cozumoto-uyari (YMYL güvenlik uyarısı,
   guide/09) ve .cozumoto-sorumluluk. Storefront yazıyı tam genişlikte
   akıtıyordu: 1440px'te satır ~200 karakterdi (okunabilir sınır 60-80).
   Kapsam bilinçli olarak .single-post — sayfalara ve ürünlere dokunmaz.
   ========================================================================== */
.single-post .site-main > article {
	max-width: 760px;
	margin-inline: auto;
}
.single-post .entry-header .entry-title {
	font-weight: 800;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--cozumoto-navy);
}
.single-post .entry-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--cozumoto-text);
}
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
	margin-bottom: var(--space-5);
}
.single-post .entry-content h2 {
	margin: var(--space-12) 0 var(--space-4);
	font-size: 1.625rem;
	font-weight: 700; /* Storefront başlıkları 300 basıyor; hiyerarşi okunmuyordu */
	line-height: 1.25;
	color: var(--cozumoto-navy);
}
.single-post .entry-content h3 {
	margin: var(--space-8) 0 var(--space-3);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cozumoto-navy);
}
.single-post .entry-content li {
	margin-bottom: var(--space-2);
}
.single-post .entry-content a {
	color: var(--cozumoto-navy);
	text-decoration: underline;
	text-decoration-color: var(--cozumoto-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.single-post .entry-content a:hover {
	color: var(--cozumoto-orange-dark);
}

/* Güvenlik uyarısı: kırmızı yalnızca hata/kritik içindir (tasarım sistemi) —
   fren/süspansiyon uyarısı tam olarak bu sınıfa girer. */
.single-post .cozumoto-uyari,
.single-post .cozumoto-sorumluluk {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	font-size: 1rem;
	line-height: 1.6;
}
.single-post .cozumoto-uyari {
	background-color: #fdf1f2;
	border-left: 4px solid var(--cozumoto-red);
}
.single-post .cozumoto-uyari strong {
	color: #a71d2a; /* #fdf1f2 zeminde 6,9:1 */
}
.single-post .cozumoto-sorumluluk {
	margin-top: var(--space-10);
	background-color: var(--cozumoto-surface);
	border: 1px solid var(--cozumoto-border);
	color: var(--cozumoto-text-muted);
	font-size: 0.9375rem;
}

/* Belirti tablosu */
.single-post .entry-content table {
	width: 100%;
	margin: var(--space-6) 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.single-post .entry-content th,
.single-post .entry-content td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--cozumoto-border);
	text-align: left;
	vertical-align: top;
}
.single-post .entry-content thead th {
	background-color: var(--cozumoto-navy);
	color: #fff;
	font-weight: 600;
}
.single-post .entry-content tbody tr:nth-child(even) td {
	background-color: var(--cozumoto-gray-bg);
}

/* Yazı içi ürün vitrini okuma sütunundan taşmasın */
.single-post .entry-content .woocommerce {
	margin: var(--space-8) 0;
}

@media (max-width: 767px) {
	.single-post .entry-content {
		font-size: 1rem;
		line-height: 1.7;
	}
	.single-post .entry-content h2 {
		margin-top: var(--space-10);
		font-size: 1.375rem;
	}
	/* Üç sütunlu tablo 375px'e sığmıyor: yatay kaydır, düzeni kırma */
	.single-post .entry-content table {
		display: block;
		overflow-x: auto;
	}
	.single-post .entry-content th,
	.single-post .entry-content td {
		min-width: 140px;
	}
}

/* Künye: yazar satırı yönetici KULLANICI ADINI basıyordu (cozumoto_admin).
   Bu yalnızca görsel gizleme — ad HTML'de duruyor. Kalıcı çözüm wp-admin'de
   "Herkese görünen ad"ı değiştirmek ve yazar arşivini kapatmak (Yoast). */
.single-post .entry-header .post-author,
.single-post .entry-header .post-comments {
	display: none;
}
.single-post .entry-header .posted-on {
	font-size: 0.875rem;
	color: var(--cozumoto-text-muted);
}

/* Yazı içi ürün vitrini (`[products]`): Storefront'un float dönemi kuralları
   li.product'a YÜZDE genişlik veriyor (columns-3'te %30,8). Tema ul.products'ı
   grid'e çevirdiği için bu yüzde artık KAPSAYICIYA değil GRID SÜTUNUNA göre
   hesaplanıyor: 240px'lik sütunda kart 73px'e düşüyor, fiyat ve buton alt alta
   sarıyordu (20.09.2026'da canlı taslakta ölçüldü). Sütun genişliğini grid
   belirlesin diye eski float/yüzde mirası burada nötrleniyor.
   ÖZGÜLLÜK TUZAĞI: Storefront'un woocommerce.css'indeki
   `.site-main ul.products.columns-3 li.product { width: 29.4118% }` kuralı
   (0,4,2) bu kuralla AYNI özgüllükteydi ve woocommerce.css style.css'ten SONRA
   yüklendiği için beraberliği o kazanıyordu: yüzde, grid sütununa göre
   hesaplanıp kartı 73px'e düşürüyordu (canlıda ölçüldü). `body` + `.site-main`
   eklenerek özgüllük (0,5,3)'e çıkarıldı — dosya sırasından bağımsız kazanır.
   Kapsam yine yalnızca yazı sayfası; mağaza ve kategori grid'ine dokunmaz. */
body.single-post .site-main .entry-content ul.products > li.product {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   Yazı içi ürün vitrini (inc/blog-vitrin.php) — 20.09.2026
   AdSense yerleşim mantığı, kendi ürünlerimizle: bölüm sınırında ince şerit,
   yazının sonunda daha geniş bölüm. Reklam gibi GÖRÜNMESİ bilinçli — okur
   neyin editoryal metin neyin vitrin olduğunu ayırt edebilmeli.
   ========================================================================== */
.single-post .cozumoto-yazi-vitrin {
	margin: var(--space-8) 0;
	padding: var(--space-5);
	background-color: var(--cozumoto-gray-bg);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-md);
}
.single-post .cozumoto-yazi-vitrin-baslik {
	margin: 0 0 var(--space-4);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cozumoto-text-muted);
}
/* `display: grid` AÇIKÇA veriliyor: tema `.woocommerce ul.products` için
   yalnızca grid-template-columns tanımlıyor, display başka bir seçiciden
   geliyor ve bu aside içindeki listeye ulaşmıyordu — ızgara ölü kalıp kartlar
   alt alta tam genişlikte diziliyordu (canlıda ölçüldü: display=block, 718px).
   Ara şerit iki ürünlü: tema 760px'te 3 ize bölüyor, iki kart ortada boşluk
   bırakıyordu — şeritte izi ikiye sabitliyoruz. */
.single-post .cozumoto-yazi-vitrin ul.products {
	display: grid;
	gap: var(--space-5);
}
/* Clearfix mirası: `ul.products` üzerindeki ::before/::after float dönemindeki
   temizleyicilerdi. Izgarada bunlar GERÇEK BİRER HÜCRE işgal ediyor — ilk ürün
   1. sütunu boş bırakıp 2. sütundan başlıyordu (canlıda ölçüldü: ilk kart
   sol=369). Bu bağlamda tamamen kapatılıyorlar. */
.single-post .cozumoto-yazi-vitrin ul.products::before,
.single-post .cozumoto-yazi-vitrin ul.products::after {
	content: none;
	display: none;
}
.single-post .cozumoto-yazi-vitrin:not(.cozumoto-yazi-vitrin--alt) ul.products {
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
}
.single-post .cozumoto-yazi-vitrin--alt {
	margin-top: var(--space-12);
	padding: var(--space-6);
	background-color: transparent;
	border: 0;
	border-top: 3px solid var(--cozumoto-navy);
	border-radius: 0;
}
/* Alt bölüm hep 3 ürün: temanın auto-fill min ölçüsü (234px) 712px'lik okuma
   sütununa 3 iz sığdıramayıp 2+1 bırakıyordu; burada üçe sabitleniyor. */
@media (min-width: 768px) {
	.single-post .cozumoto-yazi-vitrin--alt ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}
.single-post .cozumoto-yazi-vitrin--alt .cozumoto-yazi-vitrin-baslik {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cozumoto-navy);
}
.single-post .cozumoto-yazi-vitrin ul.products {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	/* Şerit tek sütuna düşmesin: iki kart yan yana kalsın, yazı fazla uzamasın */
	.single-post .cozumoto-yazi-vitrin {
		padding: var(--space-4);
	}
	.single-post .cozumoto-yazi-vitrin:not(.cozumoto-yazi-vitrin--alt) ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Belirtide kontrol edilen parçalar (#175, 10.10.2026): kategori başına
   gerekçe satırı + iki ürün + kategori bağlantısı. Alt bölümün 3 sütun
   kuralı burada ikiye iniyor; mevcut seçiciler değişmedi. */
.single-post .cozumoto-yazi-parcalar .cozumoto-yazi-parca-not {
	margin: 0 0 var(--space-5);
	font-size: 0.875rem;
	color: var(--cozumoto-text-muted);
}
.single-post .cozumoto-yazi-parca + .cozumoto-yazi-parca {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--cozumoto-border);
}
.single-post .cozumoto-yazi-parca-baslik {
	margin: 0 0 var(--space-3);
	font-size: 0.9375rem;
}
.single-post .cozumoto-yazi-parcalar ul.products {
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
	.single-post .cozumoto-yazi-parcalar ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Kart altı boşluğu (Storefront li.product ~68px) ve sarmalayıcı dış
   boşluğu bağlantıyı kartlardan koparıyordu (yerelde ölçüldü). */
.single-post .cozumoto-yazi-parcalar .woocommerce {
	margin: 0;
}
.single-post .cozumoto-yazi-parcalar ul.products > li.product {
	margin-bottom: 0;
}
/* Kategori bölüm başlığında yazıyor; dar kartta etiket hece hece kırılıyordu. */
.single-post .cozumoto-yazi-parcalar .cozumoto-kart-kategori {
	display: none;
}
.single-post .cozumoto-yazi-parca-tumu {
	margin: var(--space-3) 0 0;
	font-size: 0.875rem;
	font-weight: 600;
}

/* =========================================================================
   Rehber kartları ve /rehber/ merkezi (inc/rehber.php · 21.09.2026)
   =========================================================================
   Bu blok yalnızca EKLER: yukarıdaki hiçbir seçici değiştirilmedi. Tüm
   seçiciler `.cozumoto-rehber-` önekli, yani mağaza/ürün/sepet/yazı
   yüzeylerine sızmaz. Geri alma: functions.php'deki rehber require satırı.

   Kart neden ürün kartına benzemiyor: okur "satın alınacak şey" ile
   "okunacak şey"i ilk bakışta ayırabilmeli. Ayırt edici iki işaret —
   soldaki turuncu şerit ve kategori çipi — bilinçli olarak ürün kartında
   bulunmayan öğeler.
   ------------------------------------------------------------------------- */

.cozumoto-rehber-liste,
.cozumoto-rehber-izgara {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hub genişliği sayfanın geri kalanıyla AYNI kapsayıcıdan gelir.
   İlk sürümde 760px'lik okuma sütunu kullanılıyordu; gerekçe "3 yazı varken
   ızgara boş görünür"dü. 21.09.2026'da yazı akmaya başlayınca bu tersine
   döndü: tek sütun, işletme sahibinin deyimiyle "kuyruk gibi tek sıra halinde
   uzayıp giden" bir liste haline geldi. Kartlar artık görselli olduğu için
   ızgara hem dolu duruyor hem de taranabilir. */
.cozumoto-rehber-hub {
	max-width: var(--oyp-container);
	margin: 0 auto;
	padding: var(--space-8) var(--space-3) var(--space-10);
}

.cozumoto-rehber-hub-baslik {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 var(--space-3);
}

.cozumoto-rehber-hub-aciklama {
	color: var(--cozumoto-text-muted);
	margin: 0 0 var(--space-8);
	max-width: 62ch;
}

/* Rehber kategori arşivi Storefront'un dar blog sütununa sıkışmasın. */
body.category .content-area {
	width: 100%;
	float: none;
	margin: 0;
}

.cozumoto-rehber-kategori-etiket {
	margin: 0 0 var(--space-2);
	color: var(--oyp-primary-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cozumoto-rehber-liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cozumoto-rehber-izgara {
	display: grid;
	/* auto-FILL (auto-fit değil): son satırda tek kart kalınca kart
	   gereksizce genişleyip komşularıyla farklı boyda görünmesin. */
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--space-5);
}

/* --- Kart gövdesi ------------------------------------------------------- */

.cozumoto-rehber-kart {
	margin: 0;
	list-style: none;
}

.cozumoto-rehber-kart-bag {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-5);
	border: 1px solid var(--cozumoto-border);
	/* Sol şerit: rehber kartının imzası. Ürün kartında yok. */
	border-left: 3px solid var(--cozumoto-orange);
	border-radius: var(--radius-md);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.cozumoto-rehber-kart-bag:hover,
.cozumoto-rehber-kart-bag:focus-visible {
	border-color: var(--cozumoto-orange);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}

.cozumoto-rehber-kart-bag:hover {
	transform: translateY(-2px);
}

.cozumoto-rehber-kart-bag:focus-visible {
	outline: 2px solid var(--cozumoto-navy);
	outline-offset: 2px;
}

.cozumoto-rehber-kart-govde {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Kart görseli — 21.09.2026'dan beri 49/49 yazıda var.
   Kaynak: yazının bağlı olduğu kategorideki GERÇEK ürün fotoğrafı (yeni dosya
   yüklenmedi, mevcut attachment yazıya da bağlandı). AI ile parça fotoğrafı
   üretilmesi reddedildi — parça satan bir sitede uydurma fotoğraf güven
   sorunudur.

   Fotoğraflar KARE ve BEYAZ ZEMİNLİ katalog kareleri:
   - `contain`, çünkü `cover` parçanın kenarlarını kırpar ve ürün tanınmaz
     hale gelir.
   - Zemin `--cozumoto-gray-bg`: beyaz fotoğraf beyaz kartla birleşince
     görselin nerede bittiği kaybolur.
   - `aspect-ratio` sabit: farklı boyutlardaki kareler kart yüksekliğini
     oynatmasın, şeritteki kartlar aynı hizada dursun. */
.cozumoto-rehber-kart-gorsel {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--cozumoto-gray-bg);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.cozumoto-rehber-kart-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Meta satırı TEK SATIR. Sarmalanmasına izin verilince uzun kategori adı
   ("ALT TAKIM VE DİREKSİYON") okuma süresini alt satıra itiyor, o kartın
   başlığı komşularından bir satır aşağıda başlıyor ve şerit hizasız
   görünüyordu (21.09.2026, canlıda görüldü). Çip gerekirse üç noktayla
   kırpılır; hizalama kırpmadan önemli. */
.cozumoto-rehber-kart-ust {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-2);
}

.cozumoto-rehber-cip {
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cozumoto-navy);
	background: var(--cozumoto-orange-tint);
	border-radius: var(--radius-full);
	padding: 3px var(--space-3);
	/* Harf aralığı 0,06 → 0,045: uzun kategori adları kırpılmadan sığsın. */
	letter-spacing: 0.045em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cozumoto-rehber-sure {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.75rem;
	color: var(--cozumoto-text-muted);
}

.cozumoto-rehber-kart-baslik {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cozumoto-navy);
	/* Başlıklar uzun ve soru biçiminde (52-54 karakter ölçüldü); üç satıra
	   kadar yer var, sonrası kırpılır ki kartlar aynı yükseklikte kalsın. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cozumoto-rehber-kart-bag:hover .cozumoto-rehber-kart-baslik {
	/* 18 px metinde beyaz üzerindeki 2,84:1 hover rengini 4,95:1'e çıkar. */
	color: var(--oyp-primary-text);
}

.cozumoto-rehber-kart-ozet {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--cozumoto-text-muted);
}

.cozumoto-rehber-kart--kart .cozumoto-rehber-kart-ozet {
	-webkit-line-clamp: 2;
	font-size: 0.875rem;
}

.cozumoto-rehber-kart-devam {
	margin-top: auto;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--oyp-primary-text);
}

.cozumoto-rehber-kart-devam::after {
	content: ' →';
}

/* --- Sayfalama ---------------------------------------------------------- */

.cozumoto-rehber-sayfalama {
	margin-top: var(--space-8);
}

.cozumoto-rehber-sayfalama ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cozumoto-rehber-sayfalama .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px dokunma hedefi — #99'da nokta düğmelerinde alınan kararla aynı. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-sm);
	color: var(--cozumoto-navy);
	text-decoration: none;
}

.cozumoto-rehber-sayfalama .page-numbers.current {
	background: var(--cozumoto-navy);
	border-color: var(--cozumoto-navy);
	color: #fff;
}

.cozumoto-rehber-bos,
.cozumoto-rehber-hub-alt {
	color: var(--cozumoto-text-muted);
}

.cozumoto-rehber-hub-alt {
	margin-top: var(--space-10);
	padding-top: var(--space-5);
	border-top: 1px solid var(--cozumoto-border);
	font-size: 0.9375rem;
}

.cozumoto-rehber-hub-alt-bag {
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.cozumoto-rehber-hub {
		padding: var(--space-5) 0 var(--space-8);
	}
	/* Mobilde TEK sütun: ürün ızgarası 2 sütun/141px'e düşüyor ama metin
	   önde kartta 141px genişlikte başlık okunmaz hale geliyor. */
	.cozumoto-rehber-izgara {
		grid-template-columns: 1fr;
	}
	.cozumoto-rehber-kart-bag {
		padding: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cozumoto-rehber-kart-bag {
		transition: none;
	}
	.cozumoto-rehber-kart-bag:hover {
		transform: none;
	}
}

/* --- Ana sayfa rehber şeridi (front-page.php) ---------------------------
   Ölçüler ürün vitrininden (1180px / var(--space-4)) kopyalandı: iki bölüm
   alt alta durduğu için kenarları hizalı olmalı, yoksa sayfa kayıyor gibi
   görünüyor. */

/* Kapsayıcı, komşu bölümlerle AYNI token'dan gelir.
   Önce `.cozumoto-vitrin`'in ilk tanımındaki 1180px kopyalanmıştı; oysa o
   değer dosyanın ilerisinde `--oyp-container` ile eziliyor. Sonuç: 1853px
   ekranda kategoriler/vitrin/"Neden" 1720px genişken rehber bölümü 1180px'te
   kalıyor ve sayfanın ortasında içeri kaçmış görünüyordu (21.09.2026'da
   işletme sahibi fark etti, Playwright ile ölçüldü). Sabit değer yerine
   token: kapsayıcı büyüyünce bu bölüm de büyür. */
.cozumoto-rehber-bolum {
	max-width: var(--oyp-container);
	margin: 0 auto var(--space-12);
	padding: 0 var(--space-3);
}

.cozumoto-rehber-bolum .cozumoto-baslik {
	margin-bottom: var(--space-2);
}

.cozumoto-rehber-bolum-giris {
	color: var(--cozumoto-text-muted);
	margin: 0 0 var(--space-6);
}

.cozumoto-rehber-bolum .cozumoto-rehber-izgara {
	/* Ana sayfada tam üç yazı var; auto-fit yerine sabit üç sütun, çünkü
	   auto-fit geniş ekranda kartları gereksiz genişletiyordu. */
	grid-template-columns: repeat(3, 1fr);
}

.cozumoto-rehber-bolum-tumu {
	margin: var(--space-6) 0 0;
}

@media (max-width: 900px) {
	.cozumoto-rehber-bolum .cozumoto-rehber-izgara {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cozumoto-rehber-bolum .cozumoto-rehber-izgara {
		grid-template-columns: 1fr;
	}
	.cozumoto-rehber-bolum {
		padding: 0 var(--space-3);
	}
}

/* --- Footer rehber sütunu ---------------------------------------------- */

.cozumoto-footer-rehber {
	padding: var(--space-6) 0 0;
}

.cozumoto-footer-rehber-baslik {
	margin: 0 0 var(--space-3);
	font-size: 15px;
	font-weight: 700;
}

.cozumoto-footer-rehber ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cozumoto-footer-rehber li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Kategori sayfasındaki rehber kutusu -------------------------------- */

.cozumoto-rehber-kutu {
	/* Kategori sayfasının `main` öğesi İKİ SÜTUNLU ızgara (filtre 234px +
	   ürün alanı 958px, 21.09.2026'da canlıda ölçüldü). Kutu bu ızgaraya
	   sıradaki hücre olarak düşünce 234px'lik filtre sütununa sıkışıyor ve
	   başlık okunmaz hale geliyordu. Satırın tamamını kaplaması gerekiyor. */
	grid-column: 1 / -1;
	margin: var(--space-10) 0 var(--space-6);
	padding: var(--space-6);
	background: var(--cozumoto-gray-bg);
	border-radius: var(--radius-md);
}

.single-product .cozumoto-urun-rehber {
	clear: both;
}

.cozumoto-rehber-kutu-baslik {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--cozumoto-navy);
	margin: 0 0 var(--space-4);
}

.cozumoto-rehber-kutu .cozumoto-rehber-izgara {
	/* Tam satır genişliğinde 1-2 kart var; `1fr` sütunlar tek yazıda kartı
	   600px'e kadar geriyordu. Kart genişliği sınırlanıp sola yaslanıyor. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
	justify-content: start;
}

@media (max-width: 600px) {
	.cozumoto-rehber-kutu {
		padding: var(--space-4);
	}
	.cozumoto-rehber-kutu .cozumoto-rehber-izgara {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   Rehber şeridi carousel'i, otomatik geçiş düğmesi ve footer çipleri
   (21.09.2026 — işletme sahibi footer düzeni isteği)
   ========================================================================= */

/* --- Carousel başlığının altına açıklama satırı ------------------------- */

.cozumoto-carousel-ust-metin {
	min-width: 0; /* uzun açıklama okları sıkıştırmasın */
}

.cozumoto-carousel-aciklama {
	margin: var(--space-2) 0 0;
	color: var(--cozumoto-text-muted);
	font-size: 0.9375rem;
}

/* --- Rehber kartları rayda tek satır ------------------------------------
   Ürün şeridiyle aynı kalıp (`grid-auto-flow: column`), ama kart genişliği
   daha büyük: rehber kartı görsel + 3 satır başlık + 2 satır özet taşıyor,
   234px'te başlık okunmaz hale geliyordu. */

.cozumoto-rehber-carousel .cozumoto-carousel-ray .cozumoto-rehber-izgara {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, 1fr);
	grid-template-columns: none;
	gap: var(--space-5);
	margin: 0;
}

.cozumoto-rehber-carousel .cozumoto-carousel-ray .cozumoto-rehber-kart {
	scroll-snap-align: start;
}

/* --- Otomatik geçişi durdurma düğmesi -----------------------------------
   Düğme `.cozumoto-carousel-oklar` içinde; kaydırılacak içerik yoksa o kutu
   zaten tamamen gizleniyor (`--kaydirilamaz`), yani az yazı varken ne ok ne
   düğme görünür. */

.cozumoto-carousel-durdur .cozumoto-carousel-ikon-oynat {
	display: none;
}

.cozumoto-carousel--duruyor .cozumoto-carousel-durdur .cozumoto-carousel-ikon-durdur {
	display: none;
}

.cozumoto-carousel--duruyor .cozumoto-carousel-durdur .cozumoto-carousel-ikon-oynat {
	display: block;
}

/* --- Footer: rehber tek satırı ------------------------------------------ */

.cozumoto-footer-rehber {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-6) 0 0;
}

.cozumoto-footer-rehber-bag {
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.cozumoto-footer-rehber-not {
	color: var(--cozumoto-text-muted);
	font-size: 0.875rem;
}

/* --- Footer: marka bağlantıları çip oldu --------------------------------
   Kayan yazı (marquee) istenmişti, gerekçeyle reddedildi: hareketli linke
   tıklanmıyor, WCAG 2.2.2 durdurma kontrolü gerektiriyor ve sitedeki tek
   kayan öğe olurdu. Asıl sorun hareket eksikliği değil YAPISIZLIKTI —
   16 marka çıplak metin olarak ızgaraya dağılmıştı. Çip, tıklama alanını
   görünür kılıyor ve blok bir anda düzenli duruyor. */

.cozumoto-footer-markalar ul {
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: none;
	gap: var(--space-2);
}

.cozumoto-footer-markalar a {
	display: inline-flex;
	align-items: center;
	/* 32px: footer'da yoğun bir liste; 44px tavsiye edilen dokunma hedefi ama
	   burada 16 öğe var ve footer ikincil gezinme — satır aralığı `gap` ile
	   korunuyor, çipler birbirine yapışmıyor. */
	min-height: 32px;
	padding: 0 var(--space-3);
	border: 1px solid var(--cozumoto-border);
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color var(--transition-base), background var(--transition-base);
}

.cozumoto-footer-markalar a:hover,
.cozumoto-footer-markalar a:focus-visible {
	border-color: var(--cozumoto-orange);
	background: var(--cozumoto-orange-tint);
	text-decoration: none;
}

/* --- Footer düzeni (24.10.2026, tasarım denetimi madde 7) ---------------
   40+ çip footer'ı uzatıyordu: masaüstünde çip küçülür, mobilde ilk 12'si
   görünür ve "Tüm markalar" (#footer-markalar çapası) kalanını :target ile
   açar. Yasal bağlantılar diğer sütunlar gibi sola hizalanır; telif satırı
   gri kutu yerine ince ayraçlı sade satırdır. */
.cozumoto-footer-markalar ul {
	gap: var(--space-1) var(--space-2);
}
.cozumoto-footer-markalar a {
	min-height: 28px;
	padding: 0 var(--space-2);
	font-size: 13px;
}
.cozumoto-footer-markalar a.cozumoto-footer-markalar-tumu {
	display: none;
}
#colophon .footer-widgets.col-4 .block.footer-widget-4 {
	text-align: left;
}
/* Diğer başlıklarda alt çizgi yok; widget'ın 59 px alt boşluğu ve kendi alt
   çizgisi telif satırının ayracıyla üst üste iki çizgi oluşturuyordu. */
#colophon .footer-widgets {
	border-bottom: 0;
}
#colophon .footer-widgets .widget {
	margin-bottom: 0;
}
#colophon .footer-widgets .widget-title {
	padding-bottom: 0;
	border-bottom: 0;
}
/* Footer başlıkları tek stil (24.10.2026): "İLETİŞİM"/"YASAL BİLGİLER"
   büyük harf + harf aralıklı, "Araç Markaları"/"Arıza ve Bakım Rehberi"
   normal yazılıyordu ve üç ayrı boy (13,6 / 15 / 15,2 px) vardı. */
#colophon .cozumoto-footer-sutun h3,
#colophon .footer-widgets .widget-title,
#colophon .cozumoto-footer-markalar-baslik,
#colophon .cozumoto-footer-rehber-bag {
	font-size: var(--fs-3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--oyp-dark);
}
/* Rehber bağlantısı başlık gibi durur; bağlantı olduğunu ok işareti gösterir. */
#colophon .cozumoto-footer-rehber-bag {
	text-decoration: none;
}
#colophon .cozumoto-footer-legal-links {
	justify-content: flex-start;
	margin-left: calc(-1 * var(--space-1));
}
#colophon .site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-6);
	padding: var(--space-4) 0;
	background-color: transparent;
	color: var(--cozumoto-text-muted);
	font-size: 0.875rem;
}
@media (max-width: 767px) {
	.cozumoto-footer-markalar a {
		min-height: 32px;
	}
	.cozumoto-footer-markalar:not(:target) li:nth-child(n+13) {
		display: none;
	}
	/* Çip değil metin bağlantısı: listenin devamı olduğu altı çizgiyle belli. */
	.cozumoto-footer-markalar:not(:target) a.cozumoto-footer-markalar-tumu {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-top: var(--space-1);
		padding: 0;
		border: 0;
		font-size: 0.875rem;
		font-weight: 700;
		text-decoration: underline;
	}
}

@media (max-width: 767px) {
	.cozumoto-rehber-carousel .cozumoto-carousel-ray .cozumoto-rehber-izgara {
		grid-auto-columns: minmax(240px, 78vw);
		gap: var(--space-3);
	}
	.cozumoto-carousel-aciklama {
		font-size: 0.875rem;
	}

	/*
	 * MOBİLDE OKLAR GİZLİ AMA DURDURMA DÜĞMESİ GÖRÜNÜR.
	 * Yukarıdaki genel kural mobilde `.cozumoto-carousel-oklar`ı tamamen
	 * gizliyor (parmakla kaydırma yeterli, doğru karar). Ama durdurma düğmesi
	 * de o kutunun içinde: otomatik geçiş çalışırken dokunmatik kullanıcının
	 * durdurma yolu kalmıyordu. Üstelik `mouseenter` dokunmatikte hiç
	 * tetiklenmiyor, yani oradaki duraklatma da yok. WCAG 2.2.2 ihlali
	 * olurdu — marquee'yi reddederken öne sürdüğümüz ölçüt burada da geçerli.
	 *
	 * `:not(--kaydirilamaz)` ŞART: kaydırılacak içerik yokken (az yazı) kutu
	 * yine tamamen gizli kalmalı, yoksa hiç kaymayan bir şeridin üstünde
	 * anlamsız bir durdurma düğmesi durur.
	 */
	.cozumoto-carousel[data-otomatik]:not(.cozumoto-carousel--kaydirilamaz) .cozumoto-carousel-oklar {
		display: flex;
	}
	.cozumoto-carousel[data-otomatik] .cozumoto-carousel-ok:not(.cozumoto-carousel-durdur) {
		display: none;
	}
}

/* --- Hero duyuru slaytı: başlık okunurluğu ve tıklanabilirlik ------------
   21.09.2026, işletme sahibi geri bildirimi: "yazılar en altta sönük kalıyor,
   sadece resim varmış gibi algılanıyor."

   İki sebebi vardı:
   1. Başlık yarı saydam (%86) bir HAP içindeydi; altındaki fotoğraf hapın
      içinden sızdığı için metin fotoğrafın üstünde YÜZÜYOR gibi duruyordu.
      Yerine alttan yukarı degrade bir perde kondu — metin artık kompozisyonun
      parçası, kontrastı da sabit (fotoğraf ne kadar açık olursa olsun).
   2. Kartın tıklanabilir olduğunu söyleyen hiçbir işaret yoktu. Turuncu ok
      eklendi; turuncu bu temada EYLEM rengi.
   Metin hâlâ GÖRSELE GÖMÜLÜ DEĞİL, koddan basılıyor (seçilebilir, aranabilir,
   çevrilebilir) — hero slayt kuralı korunuyor. */

a.cozumoto-kampanya-slayt::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58%;
	background: linear-gradient(
		to top,
		rgba(11, 15, 25, 0.94) 0%,
		rgba(11, 15, 25, 0.78) 38%,
		rgba(11, 15, 25, 0) 100%
	);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	pointer-events: none;
}

.cozumoto-kampanya-baslik {
	/* Perdenin ÜSTÜNDE kalmalı: ::after, konumlandırılmamış çocuklardan sonra
	   boyanıyor; z-index olmadan başlığın üstünü örterdi. */
	z-index: 1;
	left: var(--space-5);
	right: var(--space-5);
	bottom: var(--space-5);
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	font-family: var(--font-heading);
	font-size: 18px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.cozumoto-kampanya-baslik::after {
	content: " \2192";
	color: var(--cozumoto-orange);
	font-weight: 800;
	/* Okun başlıktan kopup tek başına satıra düşmesini engeller. */
	white-space: nowrap;
}

a.cozumoto-kampanya-slayt:hover .cozumoto-kampanya-baslik,
a.cozumoto-kampanya-slayt:focus-visible .cozumoto-kampanya-baslik {
	text-decoration: none;
}

a.cozumoto-kampanya-slayt:hover .cozumoto-kampanya-baslik::after {
	/* Küçük bir kayma: fareyle üstüne gelince kartın bağlantı olduğu belli olsun. */
	display: inline-block;
	transform: translateX(3px);
	transition: transform var(--transition-base);
}

/* --- Hero şeridi otomatik geçiş durdurma düğmesi ------------------------- */

.cozumoto-kampanya-durdur {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 32px: hero'da görseli kapatmayacak kadar küçük, dokunulabilecek kadar
	   büyük. Nokta düğmelerinde alınan 24px alt sınırının üstünde. */
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(11, 15, 25, 0.72);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-base);
}

.cozumoto-kampanya-durdur:hover,
.cozumoto-kampanya-durdur:focus-visible {
	background: rgba(11, 15, 25, 0.92);
}

.cozumoto-kampanya-durdur[hidden] {
	display: none;
}

.cozumoto-kampanya-ikon-oynat {
	display: none;
}

.cozumoto-kampanya--duruyor .cozumoto-kampanya-ikon-durdur {
	display: none;
}

.cozumoto-kampanya--duruyor .cozumoto-kampanya-ikon-oynat {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	a.cozumoto-kampanya-slayt:hover .cozumoto-kampanya-baslik::after {
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   TEK SLAYT OKU STANDARDI (21.09.2026)
   =========================================================================
   İşletme sahibi: "her bölümde slayt okları farklı". Doğruydu — ürün
   ("Stoktaki Parçalardan Seçmeler") ve rehber ("Arıza ve Bakım Rehberi")
   şeritlerinde oklar BAŞLIK HİZASINDA sağ üstteydi, hero duyuru şeridinde
   ise ok yoktu, altta soluk bir nokta göstergesi vardı.

   Standart: oklar RAYIN SOL VE SAĞ KENARINDA, dikey ortada; aynı çap, aynı
   biçim, aynı durum davranışı. Üç şerit de `.cozumoto-carousel-ok` kullanıyor.
   Nokta göstergesi tamamen kaldırıldı (işaretlemesi de, JS'i de).
   ------------------------------------------------------------------------- */

.cozumoto-carousel-sargi {
	position: relative;
}

@media (min-width: 768px) {
	/*
	 * KART şeritlerinde ray, ok genişliği kadar İÇERİ alınıyor.
	 * Bindirmeli ok hero'da sorunsuz (altında yalnızca fotoğraf var) ama ürün
	 * ve rehber kartlarında ilk/son kartın kategori çipinin üstüne biniyordu
	 * (21.09.2026'da canlıda görüldü). Ok BİÇİMİ değişmiyor — tek standart
	 * korunuyor — yalnızca rayın kenar boşluğu açılıyor. Bedeli 1368px
	 * kapsayıcıda %7 genişlik; kart ızgarası esnek olduğu için sütun sayısı
	 * değişmiyor.
	 */
	.cozumoto-carousel-sargi {
		padding-left: 52px;
		padding-right: 52px;
	}
	.cozumoto-carousel-sargi .cozumoto-carousel-ok--sol {
		left: 0;
	}
	.cozumoto-carousel-sargi .cozumoto-carousel-ok--sag {
		right: 0;
	}
}

/* Ok düğmesinin ÇAPI ve rengi yukarıdaki `.cozumoto-carousel-ok` bloğundan
   geliyor (44px, beyaz, yuvarlak). Burada yalnızca KONUM ve katman
   tanımlanıyor; iki ayrı görünüm doğmasın diye biçim tekrar edilmiyor. */
.cozumoto-carousel-ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	/* Kartların üstünde durduğu için gölge şart: sınır çizgisi tek başına
	   açık zeminli ürün kartında kayboluyor. */
	box-shadow: var(--shadow-md);
}

.cozumoto-carousel-ok--sol {
	left: var(--space-2);
}

.cozumoto-carousel-ok--sag {
	right: var(--space-2);
}

/* Kaydıracak yer yoksa iki ok da görünmez. Eski kural artık var olmayan
   `.cozumoto-carousel-oklar` kabını hedefliyordu. */
.cozumoto-carousel--kaydirilamaz .cozumoto-carousel-ok,
.cozumoto-kampanya--kaydirilamaz .cozumoto-carousel-ok {
	display: none;
}

/* Uçtaki ok GİZLENİR, soluklaştırılmaz.
   Önce `opacity: 0.3` denendi: koyu hero görselinde okunuyordu ama beyaz ürün
   kartının üstünde beyaz düğme neredeyse görünmez bir hayalete dönüşüyordu —
   tam olarak kaldırmaya çalıştığımız "sönük düğme" görüntüsü. Gizlemek hem
   iki zeminde de tutarlı hem de niyetli duruyor; oklar mutlak konumlu olduğu
   için gizlenince yerleşim kaymıyor. */
.cozumoto-carousel-ok:disabled {
	display: none;
}

/* --- Durdurma düğmesi: her iki şeritte de aynı yerde (sağ üst) ---------- */

.cozumoto-carousel-durdur {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(11, 15, 25, 0.72);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-base);
}

.cozumoto-carousel-durdur:hover,
.cozumoto-carousel-durdur:focus-visible {
	background: rgba(11, 15, 25, 0.92);
}

.cozumoto-carousel-durdur[hidden] {
	display: none;
}

.cozumoto-carousel-ikon-oynat {
	display: none;
}

.cozumoto-carousel--duruyor .cozumoto-carousel-ikon-durdur,
.cozumoto-kampanya--duruyor .cozumoto-carousel-ikon-durdur {
	display: none;
}

.cozumoto-carousel--duruyor .cozumoto-carousel-ikon-oynat,
.cozumoto-kampanya--duruyor .cozumoto-carousel-ikon-oynat {
	display: block;
}

/* Nokta göstergesi artık basılmıyor; kalan kurallar bir şey seçmiyor ama
   yanlışlıkla geri gelirse yer kaplamasın. */
.cozumoto-kampanya-noktalar {
	display: none;
}

@media (max-width: 767px) {
	/* Mobilde parmakla kaydırma yeterli; oklar ekranın dar alanını yemesin.
	   Durdurma düğmesi GÖRÜNÜR kalır — otomatik geçiş çalışırken dokunmatik
	   kullanıcının durdurma yolu olmak zorunda (WCAG 2.2.2) ve `mouseenter`
	   dokunmatikte tetiklenmiyor. */
	.cozumoto-carousel-ok {
		display: none;
	}
}

/* =========================================================================
   Tekil yazı — genişletme, İKİNCİ DENEME (21.09.2026)
   =========================================================================
   İstek: "blog tekil sayfasında genişliği de biraz arttır."

   BİRİNCİ DENEME GERİ ALINDI. Editoryal düzen kurmuştum: kapsayıcı 1040px,
   metin 760px'te ortalı, tablo/vitrin/uyarı kutuları tam genişlikte. Ölçüm
   kâğıt üstünde doğruydu (satır yine 89 karakter) ama SAYFA BOZULDU:
   `.entry-content` çocuklarının 39'u 340px'ten, 7'si 200px'ten başlıyordu.
   Bu kadar çok tam-genişlik kutusu olan bir yazıda iki ölçü tırtıklı bir sol
   kenar üretiyor; işletme sahibi haklı olarak "rezil olmuş" dedi. Editoryal
   düzen tam-genişlik öğeleri SEYREK ve görsel olarak baskın olduğunda
   çalışır; burada güvenlik uyarısı daha ilk paragrafın altında geliyor.

   İKİNCİ DENEME — TEK ÖLÇÜ, ama daha geniş VE daha büyük punto:
     genişlik 760 → 840   (+%11)
     gövde    17 → 18.4px (+%8)
   Satır başına karakter sabit kalıyor (89 → 89): sütun genişlerken punto da
   büyüdüğü için ölçü değişmiyor. Sayfa hem geniş hem metin iri, okuma
   bozulmuyor. (880px denendi, 93 karakter veriyordu — 840'a çekildi.) Her öğe aynı kenardan
   başladığı için tırtıklı kenar sorunu kökten yok.
   ------------------------------------------------------------------------- */

.single-post .site-main > article {
	max-width: 840px;
}

/* Madde listesi girintisi: Storefront varsayılanı 55px, punto büyüyünce daha
   da açıldı. Bu derinlikte liste metin bloğundan kopuk duruyor. ~25px, madde
   işaretini barındıracak kadar yeterli. */
.single-post .entry-content > ul,
.single-post .entry-content > ol {
	margin-left: 0;
	padding-left: 1.35em;
}

.single-post .entry-content {
	font-size: 1.15rem; /* ~18.4px */
}

/* ÖNE ÇIKAN GÖRSEL YAZIDA GİZLİ.
   Bu görsel yazı için çekilmiş bir kapak DEĞİL: kart küçük resmi olsun diye
   yazının kategorisindeki bir ÜRÜNÜN katalog fotoğrafı bağlanıyor (blog
   oturumu, 21.09.2026). Kartta işini görüyor; yazının başında 365×248'lik
   düşük çözünürlüklü bir parça fotoğrafı olarak bir ekran boyu yer kaplayıp
   hiçbir şey anlatmıyor, üstelik makale kapağı sanılıyor. Gerçek bir kapak
   görseli üretilirse bu kural kaldırılır. */
.single-post .entry-content > img.wp-post-image,
.single-post .entry-content > a > img.wp-post-image {
	display: none;
}

/* 320px ana sayfa: hero iç payı VIN satırını kutunun dışına itiyordu. Izgara
   daralır, VIN alanı alt alta gelir. (Dış pay artık genel 16 px .col-full kuralında.) */
@media (max-width: 359px) {
	.cozumoto-banko-inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.cozumoto-banko-secici,
	.cozumoto-banko-yan {
		min-width: 0;
	}
	.cozumoto-sasi-satir {
		flex-direction: column;
	}
	.cozumoto-banko-secici .cozumoto-sasi-satir button[type="submit"] {
		width: 100%;
	}
	/* Ürün arşivinde 119px'lik iki kart başlık ve fiyatı okunmaz
	   hale getiriyordu. Dar ekranda tek, tam genişlikli kart kullan. */
	body.archive.woocommerce ul.products.columns-3 {
		grid-template-columns: minmax(0, 1fr);
	}
	body.archive.woocommerce ul.products li.product {
		width: auto;
		float: none;
	}
}

/* #145 Araç uyum kanıt düzeyi: detay kutusu, liste rozeti ve kapsam notu.
   Durum yalnız renkle değil, etiket metniyle de verilir; "uyumlu" vaadi yoktur. */
.cozumoto-kanit {
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--cozumoto-border);
	border-left: 4px solid var(--cozumoto-text-muted);
	border-radius: var(--radius-sm);
	background-color: var(--cozumoto-gray-bg);
	font-size: 0.95em;
}
.cozumoto-kanit--bilgi_gerekli { border-left-color: var(--cozumoto-orange-dark); }
.cozumoto-kanit--dogrulanmis_uygulama { border-left-color: var(--cozumoto-green); }
.cozumoto-kanit--uyumsuz { border-left-color: #b02a37; }
.cozumoto-kanit__baslik {
	margin: 0 0 var(--space-1);
	font-size: 1em;
	font-weight: 700;
}
.cozumoto-kanit__mesaj,
.cozumoto-kanit__kaynak,
.cozumoto-kanit__eylem {
	margin: var(--space-1) 0 0;
	overflow-wrap: anywhere;
}
.cozumoto-kanit__kaynak { color: var(--cozumoto-text-muted); font-size: 0.9em; }
.cozumoto-kanit__eylem a { text-decoration: underline; }
.cozumoto-kanit-kart {
	margin: var(--space-1) 0 0;
	font-size: 0.8em;
	line-height: 1.35;
	color: var(--cozumoto-text);
}
.cozumoto-kanit-kart::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.35em;
	border-radius: var(--radius-full);
	background-color: var(--cozumoto-text-muted);
}
.cozumoto-kanit-kart--bilgi_gerekli::before { background-color: var(--cozumoto-orange-dark); }
.cozumoto-kanit-kart--dogrulanmis_uygulama::before { background-color: var(--cozumoto-green); }
.cozumoto-kanit-kart--uyumsuz::before { background-color: #b02a37; }
.cozumoto-kanit-kapsam,
.cozumoto-ilgili-not {
	margin: 0 0 var(--space-3);
	font-size: 0.9em;
	color: var(--cozumoto-text-muted);
}

/* Ödeme yöntemi seçimi (22.10.2026): Storefront seçilmemiş yöntemi Font Awesome
   solid \f111 ile DOLU daire, seçiliyi mor halka çiziyor — seçilmemiş olan seçili
   gibi görünüyordu; iki PayTR test siparişi bu yüzden Havale/EFT'ye düştü.
   Seçilmemiş = boş halka, seçili = lacivert noktalı halka. */
#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:first-child + label::before {
	content: "";
	display: inline-block;
	box-sizing: border-box;
	width: 1.1em;
	height: 1.1em;
	margin-right: var(--space-2);
	vertical-align: -0.2em;
	border: 2px solid var(--cozumoto-text-muted);
	border-radius: 50%;
	background: #fff;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:first-child:checked + label::before {
	content: ""; /* Storefront icons.css \f192 basıyor; seçici onu bir öğe farkla geçmeli */
	border-color: var(--cozumoto-navy);
	background: radial-gradient(circle, var(--cozumoto-navy) 0 38%, #fff 42%);
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:first-child:focus-visible + label::before {
	outline: 2px solid var(--cozumoto-orange);
	outline-offset: 2px;
}

/* Ürün sayfası alt bölümleri — az kartlı ızgara (24.10.2026).
   Katalog ızgarası 234px'lik auto-fill sütun kuruyor; "Aynı katalog
   referansını paylaşan ürünler" ve "İlgili ürünler" çoğu zaman 1–2 kart
   taşıyor, 1600px'te tek kart solda kalıp satırın ~%85'i boş görünüyordu
   (Playwright, 80 ürün sayfasının 13'ünde tek kartlı bölüm). 1–2 kartta
   ızgara iki sütuna iner, kart yatay okunur: görsel solda, bilgi sağda. */
@media (min-width: 768px) {
	/* `.related` columns-4 ve 1280px altındaki columns-3 Storefront'un float
	   düzeninde kalıyor; ızgara burada açıkça kuruluyor. */
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))),
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3)))::before,
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3)))::after,
	body.single-product .related ul.products:not(:has(> li:nth-child(3)))::before,
	body.single-product .related ul.products:not(:has(> li:nth-child(3)))::after {
		display: none;
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))) li.product,
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) li.product {
		float: none;
		width: auto;
		margin: 0;
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child,
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child {
		display: grid;
		grid-template-columns: 140px minmax(0, 1fr);
		column-gap: var(--space-5);
		align-content: start;
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child > img,
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child > img {
		grid-row: 1 / span 5;
		margin: 0;
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child > *,
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) li.product > a:first-child > * {
		justify-self: start;
	}
	body.single-product .cozumoto-muadil-bolum ul.products:not(:has(> li:nth-child(3))) li.product > .button,
	body.single-product .related ul.products:not(:has(> li:nth-child(3))) li.product > .button {
		width: auto;
		margin-left: calc(140px + var(--space-5));
	}
}
/* Bu bölümlerde kartları ayıran asıl bilgi koddur: aynı adı taşıyan iki
   farklı ürün çıkabiliyor (ör. FROW 8361502001 / 8361502002), müşteri adı
   görünce ürünün kendisi önerildi sanıyor. Mobilde dar kartta kalın yazı
   kodu daha erken kestiği için yalnız ≥768px. */
@media (min-width: 768px) {
	body.single-product .cozumoto-muadil-bolum .cozumoto-loop-kod,
	body.single-product .related .cozumoto-loop-kod {
		font-size: 0.8125em;
		font-weight: 600;
	}
}