/**
 * Klemsan Ürün Karşılaştırma — ekran stilleri.
 *
 * Yapışkanlık (sticky) yaklaşımı: tablo kendi kaydırma kutusunda durur
 * (.kkar-table-wrap). Böylece hem başlık satırı yukarıda hem özellik sütunu solda
 * kalır. Sayfanın kendisini kaydırma kutusu yapmak, yatay kaydırmada dikey
 * yapışkanlığı bozduğu için tercih edilmedi.
 */

.kkar-page {
	--kkar-border: #e2e6ea;
	--kkar-border-strong: #cfd4da;
	--kkar-border-soft: #edeff1;
	--kkar-head-bg: #f7f8f9;
	--kkar-label-bg: #fbfcfc;
	--kkar-diff-bg: #fff8ec;
	--kkar-diff-bar: #e8a33d;
	--kkar-text: #1f2429;
	--kkar-muted: #7a838c;
	--kkar-accent: #0f5ca8;

	/* Etiket sütununun genişliği. Masaüstü tabanı bunun üzerine kuruluyor;
	   iki yerde elle senkron tutulmasın diye tek kaynaktan okunur. */
	--kkar-label-w: 280px;

	/* Masaüstünde sütun başına ayrılan taban genişlik. Tablonun `min-width`i bundan
	   hesaplanır; dar masaüstünde aşağıda kısılır. */
	--kkar-col-w: 160px;

	max-width: 1600px;
	margin: 0 auto;
	padding: 28px 20px 120px;
	color: var(--kkar-text);
}

/* ---------------------------------------------------------------- Araç çubuğu */

.kkar-title {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.kkar-toolbar {
	margin-bottom: 18px;
}

.kkar-toolbar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.kkar-toolbar-spacer {
	flex: 1 1 auto;
}

.kkar-stats {
	font-size: 13px;
	color: var(--kkar-muted);
	white-space: nowrap;
}

.kkar-notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 3px solid var(--kkar-diff-bar);
	background: var(--kkar-diff-bg);
	font-size: 13px;
}

/* ---------------------------------------------------------------- Düğmeler */

.kkar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--kkar-border-strong);
	border-radius: 4px;
	background: #fff;
	color: var(--kkar-text);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.kkar-btn:hover,
.kkar-btn:focus-visible {
	border-color: var(--kkar-accent);
	color: var(--kkar-accent);
}

/* Birincil eylem sitenin turuncusudur ("Listeye Ekle" ile aynı aile).
   Tablodaki ürün bağlantıları mavi kalır: eylem ile veri birbirine karışmasın. */
.kkar-btn-primary,
.kkar-tray .kkar-btn-primary {
	background: #F37021;
	border-color: #F37021;
	color: #fff;
	font-weight: 600;
}

.kkar-btn-primary:hover,
.kkar-btn-primary:focus-visible,
.kkar-tray .kkar-btn-primary:hover,
.kkar-tray .kkar-btn-primary:focus-visible {
	background: #d55d13;
	border-color: #d55d13;
	color: #fff;
}

.kkar-btn-primary[disabled] {
	background: #d8dce0;
	border-color: #d8dce0;
	color: #fff;
	cursor: not-allowed;
}

.kkar-btn-quiet {
	border-color: transparent;
	color: var(--kkar-muted);
}

.kkar-btn[aria-disabled="true"] {
	opacity: .45;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Fark anahtarı */

.kkar-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	user-select: none;
}

.kkar-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.kkar-switch-track {
	position: relative;
	display: block;
	width: 38px;
	height: 20px;
	border-radius: 10px;
	background: #c9ced4;
	transition: background-color .15s ease;
}

.kkar-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
}

.kkar-switch input:checked + .kkar-switch-track {
	background: var(--kkar-accent);
}

.kkar-switch input:checked + .kkar-switch-track .kkar-switch-thumb {
	transform: translateX(18px);
}

.kkar-switch input:focus-visible + .kkar-switch-track {
	outline: 2px solid var(--kkar-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Tablo */

.kkar-table-wrap {
	overflow: auto;
	max-height: min(78vh, 880px);
	border: 1px solid var(--kkar-border);
	border-radius: 6px;
	background: #fff;
	overscroll-behavior: contain;
}

.kkar-table {
	border-collapse: separate;
	border-spacing: 0;
	width: max-content;
	min-width: 100%;
	font-size: 13px;
}

.kkar-table th,
.kkar-table td {
	padding: 11px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--kkar-border);
	border-right: 1px solid var(--kkar-border);
	font-weight: 400;
}

.kkar-table tr > *:last-child {
	border-right: 0;
}

/* Başlık satırı — yukarıda kalır */
.kkar-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fff;
	border-bottom: 1px solid var(--kkar-border-soft);
	border-right-color: var(--kkar-border-soft);
	vertical-align: bottom;
}

/* Özellik sütunu — solda kalır */
.kkar-label,
.kkar-corner {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--kkar-label-w);
	min-width: 240px;
	max-width: 320px;
	background: var(--kkar-label-bg);
	color: var(--kkar-muted);
	border-right: 1px solid var(--kkar-border-strong);
}

/* Sol üst köşe iki eksende birden yapışkan */
.kkar-corner {
	z-index: 5;
	background: #fff;
	border-right-color: var(--kkar-border-soft);
}

.kkar-corner-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------------------------------------------------------------- Ürün başlığı */

.kkar-product {
	position: relative;
	min-width: 220px;
	max-width: 300px;
	padding-top: 16px;
}

.kkar-product-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/**
 * Görsel kutusu KESİN sınırlıdır — `height: auto` KULLANILMAZ.
 *
 * Nedeni ölçülerek bulundu: görseli kırık (404) bir üründe tarayıcı içsel ölçüyü
 * çözemiyor (naturalWidth=0) ve `height:auto` ile görseli 1500 px yüksekliğinde
 * çiziyordu. Başlık hücresi 1613 px'e çıkınca 702 px'lik kaydırma kutusunu tek başına
 * dolduruyor, tablo satırları görünür alanın çok altında kalıyor ve tablo "boş" görünüyordu.
 * Sabit yükseklik + object-fit, hangi görsel gelirse gelsin başlığın taşmasını imkânsız kılar.
 */
.kkar-product-img {
	display: block;
	width: 100%;
	max-width: 140px;
	height: 140px;
	object-fit: contain;
	
	/* Çerçeve: görsel zemini sayfayla aynı beyaz olduğu için sınırı görünmüyordu. */
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var(--kkar-border-soft);
	border-radius: 4px;
	background: #fff;
	margin: 0 0 10px;
}

.kkar-product-img-empty {
	width: 140px;
	height: 140px;
	box-sizing: border-box;
	border: 1px solid var(--kkar-border-soft);
	border-radius: 4px;
	background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 6px, #f2f4f6 6px, #f2f4f6 12px);
}

/* Başlık hücresi hiçbir koşulda kaydırma kutusunu ele geçirmesin. */
.kkar-table thead th {
	max-height: 260px;
}

.kkar-product-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.kkar-product-link:hover .kkar-product-title {
	color: var(--kkar-accent);
}

.kkar-product-sku {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--kkar-muted);
}

/**
 * Kapatma düğmesi.
 *
 * Seçici zinciri temanın genel `button` kuralını yenecek kadar belirgin: WoodMart
 * butonlara gri bir zemin veriyor ve düğme beyaz başlıkta gri bir kutu gibi duruyordu.
 */
.kkar-table .kkar-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Tema butonlara min-width/padding veriyor; daire elips gibi eziliyordu.
	   Ölçüyü kesinleştir, oranı kilitle. */
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	min-width: 24px;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--kkar-border-soft);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: #9aa2aa;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.kkar-table .kkar-remove:hover,
.kkar-table .kkar-remove:focus-visible {
	border-color: #e6b8b2;
	background: #fdf3f2;
	color: #c0392b;
}

/* ---------------------------------------------------------------- Gruplar */

.kkar-group-head th {
	position: sticky;
	left: 0;
	padding: 0;
	background: #eef1f4;
	border-right: 0;
}

.kkar-group-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	border: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--kkar-text);
	text-align: left;
	cursor: pointer;
}

.kkar-group-caret {
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: rotate(90deg);
	transition: transform .15s ease;
}

.kkar-group.is-collapsed .kkar-group-caret {
	transform: rotate(0deg);
}

.kkar-group-badge {
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--kkar-diff-bg);
	color: #97621a;
	font-size: 11px;
	font-weight: 600;
}

.kkar-group.is-collapsed .kkar-row {
	display: none;
}

/* ---------------------------------------------------------------- Satırlar */

.kkar-value {
	min-width: 220px;
}

.kkar-value-empty {
	color: #b6bcc3;
}

/* Fark vurgusu: renk tek başına bilgi taşımasın diye solda ayrıca bir çubuk var. */
.kkar-row.is-diff .kkar-value {
	background: var(--kkar-diff-bg);
	font-weight: 600;
}

.kkar-row.is-diff .kkar-label {
	box-shadow: inset 3px 0 0 var(--kkar-diff-bar);
	color: var(--kkar-text);
}

.kkar-row:hover .kkar-value,
.kkar-row:hover .kkar-label {
	background: #f4f7fa;
}

.kkar-row.is-diff:hover .kkar-value {
	background: #fff3e0;
}

/* "Sadece farkları göster" açıkken aynı satırlar ve tamamen aynı gruplar gizlenir. */
.kkar-page.is-diff-only .kkar-row.is-same {
	display: none;
}

.kkar-page.is-diff-only .kkar-group[data-kkar-group-diff="0"] {
	display: none;
}

.kkar-no-diff {
	margin-top: 16px;
	padding: 16px;
	border: 1px dashed var(--kkar-border-strong);
	border-radius: 6px;
	text-align: center;
	color: var(--kkar-muted);
}

/* ---------------------------------------------------------------- Boş durum */

.kkar-empty {
	max-width: 560px;
	margin: 40px auto;
	text-align: center;
}

.kkar-empty h1 {
	font-size: 22px;
	margin-bottom: 12px;
}

.kkar-empty p {
	color: var(--kkar-muted);
	margin-bottom: 8px;
}

.kkar-empty .kkar-btn {
	margin-top: 16px;
}

/* ---------------------------------------------------------------- Karşılaştır butonu
 *
 * Görünüm burada kurulur, temaya bırakılmaz: WoodMart "Compare" ayarı kapalıyken ilgili
 * CSS parçasını (woo-page-compare) hiç yüklemiyor, dolayısıyla .wd-compare-btn stilleri
 * sayfada bulunmayabilir. Seçici zinciri (.kkar-compare-btn .kkar-compare-link) temanın
 * genel bağlantı/buton kurallarını yenecek kadar belirgin tutuldu.
 *
 * Renk siyaha yakın koyu gridir, turuncu DEĞİL: hem ürün kartında hem ürün sayfasında
 * turuncu "Listeye Ekle" var; iki turuncu yan yana birincil eylemi belirsizleştiriyordu.
 * Karşılaştır ikincil bir eylem, nötr renk onu doğru sıraya koyuyor.
 */

.kkar-compare-btn {
	--kkar-btn: #24292e;
	--kkar-btn-dark: #0f1418;
	--kkar-btn-tint: #f2f3f5;

	display: block;
	margin: 10px 0 0;
}

.kkar-compare-btn .kkar-compare-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kkar-btn);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease;
}

.kkar-compare-btn .kkar-compare-link:hover,
.kkar-compare-btn .kkar-compare-link:focus-visible {
	color: var(--kkar-btn-dark);
	text-decoration: none;
}

/* Onay kutusu — seçim eylemi olduğunu ve ürünün listede olup olmadığını gösterir. */
.kkar-compare-btn .kkar-compare-check {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 2px solid var(--kkar-btn);
	border-radius: 3px;
	background: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Onay işareti — kutu dolduğunda görünür. */
.kkar-compare-btn .kkar-compare-check::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

.kkar-compare-btn .kkar-compare-link:hover .kkar-compare-check {
	border-color: var(--kkar-btn-dark);
	background: var(--kkar-btn-tint);
}

/* --- Seçili durum --- */

.kkar-added .kkar-compare-check {
	background: var(--kkar-btn);
	border-color: var(--kkar-btn);
}

.kkar-added .kkar-compare-check::after {
	transform: rotate(45deg) scale(1);
}

.kkar-added .kkar-compare-link:hover .kkar-compare-check {
	background: var(--kkar-btn-dark);
	border-color: var(--kkar-btn-dark);
}

/* Etiket seçiliyken değişir: durum yalnız renge bırakılmaz.
   Metin sunucudan gelir (data-added), böylece çevrilebilir kalır. */
.kkar-added .kkar-compare-text {
	font-size: 0;
}

.kkar-added .kkar-compare-text::after {
	content: attr(data-added);
	font-size: 13px;
}

/* --- Ürün sayfası ---
 *
 * Çerçeveli kutu kaldırıldı: butonun hemen altındaki "Ürün ile ilgili dosyalar",
 * "İndirilebilir Sertifikalar" vb. bağlantılar çerçevesiz ikon+metin satırları
 * (.klemsan-ask-link ailesi). Kutulu hâli o dizinin ritmini bozuyordu.
 *
 * Ölçüler bilinçli olarak o bağlantılarla eşleştirildi: 20px ikon kutusu, 10px
 * boşluk, 14px/600 metin, 6px dikey iç boşluk — böylece onay kutusu ikonlarla
 * aynı sol hizada başlar.
 */

.kkar-compare-btn--single {
	margin: 10px 0 0;
}

.kkar-compare-btn--single .kkar-compare-link {
	gap: 10px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
	letter-spacing: .01em;
}

/* İkonlarla aynı 20px kutu. */
.kkar-compare-btn--single .kkar-compare-check {
	width: 20px;
	height: 20px;
}

.kkar-compare-btn--single .kkar-compare-check::after {
	left: 5px;
	top: 1px;
}

.kkar-compare-btn--single .kkar-compare-link:hover,
.kkar-compare-btn--single .kkar-compare-link:focus-visible {
	background: none;
	color: var(--kkar-btn-dark);
}

.kkar-compare-btn--single.kkar-added .kkar-compare-text::after {
	font-size: 14px;
}

/* ---------------------------------------------------------------- Alt tepsi */

.kkar-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 380;
	background: #fff;
	border-top: 1px solid var(--kkar-border-strong, #cfd4da);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .09);
}

.kkar-tray[hidden] {
	display: none;
}

.kkar-tray-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px 20px;
}

.kkar-tray-items {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	overflow-x: auto;
	/* Kartlar kaydırma kutusunda ezilmesin. */
	padding: 2px 2px 4px;
}

/**
 * Kartlar TEK ÖLÇÜDE.
 *
 * Önceki halde dolu kart içeriğe göre genişliyor, boş yuva ise sabit 92x46 idi;
 * yan yana dizilince satır dağınık duruyordu. Sabit ölçü, kaç ürün eklenirse
 * eklensin tepsinin ritmini koruyor.
 */
.kkar-tray-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 178px;
	height: 62px;
	padding: 9px 28px 9px 9px;
	border: 1px solid var(--kkar-border-soft, #edeff1);
	border-radius: 6px;
	background: #fff;
}

.kkar-tray-slot {
	border-style: dashed;
	border-color: #e4e7eb;
	background: #fafbfc;
}

.kkar-tray-img,
.kkar-tray-img-empty {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	padding: 3px;
	border: 1px solid var(--kkar-border-soft, #edeff1);
	border-radius: 4px;
	background: #fff;
	object-fit: contain;
}

.kkar-tray-img-empty {
	padding: 0;
	background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 4px, #f2f4f6 4px, #f2f4f6 8px);
}

.kkar-tray-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--kkar-text, #1f2429);
	/* İki satıra kadar sarsın: uzun SKU'lar tek satırda hemen kırpılıyordu. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Çarpı, kartın köşesine oturur — içerikle çakışmaz, hepsi aynı hizadadır. */
/**
 * Kapatma düğmesi — dikeyde ortalı, sağa dayalı.
 *
 * Seçici zinciri temanın genel `button` kuralını yenecek kadar belirgin: WoodMart
 * butonlara gri zemin ve iç boşluk veriyor, düğme kartın içinde kocaman gri bir
 * kutu gibi duruyordu.
 */
.kkar-tray .kkar-tray-remove {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	min-width: 22px;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #9aa2aa;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.kkar-tray .kkar-tray-remove:hover,
.kkar-tray .kkar-tray-remove:focus-visible {
	background: #f2f4f6;
	color: #c0392b;
}

.kkar-tray-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Tepsinin asıl eylemi: fark edilir olmalı, "Listeyi temizle" ile karışmamalı. */
.kkar-tray .kkar-btn-primary {
	padding: 11px 22px;
	font-size: 14px;
	white-space: nowrap;
}

.kkar-tray-count {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .25);
	font-size: 12px;
	text-align: center;
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 768px) {
	.kkar-page {
		padding: 18px 12px 140px;
	}

	.kkar-title {
		font-size: 20px;
	}

	.kkar-toolbar-actions {
		gap: 8px;
	}

	.kkar-toolbar-spacer {
		flex-basis: 100%;
	}

	.kkar-table-wrap {
		max-height: none;
		border-radius: 4px;
	}

	.kkar-table th,
	.kkar-table td {
		padding: 9px 12px;
	}

	.kkar-label,
	.kkar-corner {
		width: 150px;
		min-width: 150px;
		max-width: 150px;
		font-size: 12px;
	}

	.kkar-product,
	.kkar-value {
		min-width: 160px;
	}

	.kkar-product-img {
		max-width: 90px;
	}

	.kkar-tray-inner {
		flex-wrap: wrap;
		padding: 10px 12px;
	}

	.kkar-tray-actions {
		width: 100%;
	}

	.kkar-tray-actions .kkar-btn-primary {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ------------------------------------------------- Ürün Açıklaması bölümü */

/*
 * Açıklama teknik bir değer değil, cümle — sarmalayıcı blok, satır sarması için.
 *
 * `max-width` burada ARTIK DÜZENİ BELİRLEMİYOR: masaüstünde tablo `table-layout: fixed`
 * olduğu için sütun genişliği içerikten bağımsızdır (aşağıdaki masaüstü bloğu).
 * Mobilde tablo hâlâ `max-content`; orada bu sınır sütunu tek başına genişletmeyi
 * engelleyen fren olarak duruyor.
 */
.kkar-desc {
	max-width: 340px;
	white-space: normal;
	line-height: 1.5;
}

/* Ürün sayfasındaki "Üretimden kaldırılmış ürün" notu kendi biçimini korur; blok
   olarak ayrılsın ki açıklamanın devamı gibi okunmasın. Seçici `> span[style]` ile dar
   tutuldu: cümle ORTASINDAKİ sıradan bir span bloklaşıp satırı kırmasın. */
.kkar-desc > span[style] {
	display: inline-block;
	margin-top: 6px;
	line-height: 1.4;
}

.kkar-desc br + span[style] {
	margin-top: 4px;
}

/* Fark vurgusunda 600 punto uzun bir paragrafta yorucu; vurgu zaten zemin + sol çubuk. */
.kkar-row.is-meta.is-diff .kkar-value {
	font-weight: 500;
}

/* ------------------------------------------------- Masaüstü: yatay kaydırma yok
 *
 * İstek: masaüstünde karşılaştırma tablosu yatayda kaydırmasın; hücreler gerekiyorsa
 * 2-3 satıra uzasın. Otomatik tablo düzeninde bu mümkün değildi — sütun genişliği
 * içeriğin `max-content` ölçüsünden doğuyordu ve 340 px'lik açıklama bloğu her sütuna
 * bir taban dayatıyordu (ölçüm: 3 üründe tablo 1431 px, kutu 1367 px → 64 px kaydırma).
 *
 * `table-layout: fixed` ile sütun genişliği yalnız ilk satırdan ve tablo genişliğinden
 * çıkar; içerik ne olursa olsun sütunu genişletemez, taşan metin alta sarar.
 *
 * Kaydırma tamamen kapatılmadı, dar ekrana ötelendi: `--kkar-cols` (sunucudan gelen ürün
 * sayısı) ile sütun başına 160 px taban ayrılıyor. Taban kutuya sığdığı sürece tablo
 * `100%` kalır ve çubuk hiç çıkmaz; altına düşen dar ekranda sütunlar okunmaz hâle
 * geleceği için kaydırma geri gelir.
 *
 * Ölçü: gösterim sınırı VARSAYILAN olarak 4 üründür (`kkar_max_products`, filtrelenebilir),
 * yani en kötü hâlde taban 280 + 4x160 = 920 px. Ölçülen sonuç: 1024 px ve üstü hiçbir
 * pencere genişliğinde 4 üründe bile yatay kaydırma yok. Sınır filtreyle büyütülürse
 * degradasyon kademelidir: 1367 px'lik kutuda 6 üründe hâlâ taşma yok, 8 üründe kaydırma
 * geri gelir.
 *
 * `screen` kasıtlı: medya tipi yazılmazsa kural yazdırmada da değerlendirilir ve
 * `compare-print.css` sabit düzeni geri almadığı için kâğıtta etiket sütunu 280 px'i
 * sabitler. Yazdırma kendi kurgusunda kalsın.
 *
 * Mobil kasıtlı olarak dokunulmamıştır (768 px altı mevcut kurguda kalır).
 */
@media screen and (min-width: 769px) {
	.kkar-table {
		table-layout: fixed;
		width: 100%;
		min-width: calc(var(--kkar-label-w) + var(--kkar-cols, 3) * var(--kkar-col-w));
	}

	/* Bu sınırlar otomatik düzen içindi. Sabit düzende tablo hücresinde `min/max-width`
	   davranışı CSS2.1'de TANIMSIZ: Chrome yok sayıyor, uygulayan bir motorda 4 ürün
	   240+4x220=1160 px isteyip kaydırmayı geri getirirdi. Niyeti açıkça yaz. */
	.kkar-product,
	.kkar-value {
		min-width: 0;
		max-width: none;
	}

	/* Sabit düzende sütun içeriğe göre büyüyemez; bölünemeyen uzun bir değer
	   (SKU, kod, URL) hücreden taşmasın diye kırılmaya izin verilir. */
	.kkar-table th,
	.kkar-table td {
		overflow-wrap: break-word;
	}

	/* Kısa açıklama editör alanından `white-space: nowrap` taşıyan bir span gelebilir.
	   Sabit düzende sütun içeriğe göre büyüyemediği için böyle bir span hücreyi aşıp
	   komşu sütunun üstüne biniyordu (ölçüm: 156 px hücrede 379 px span, 239 px taşma).
	   `overflow-wrap` bunu çözmez — sorun kelime kırma değil, sarmanın kapatılmış olması.

	   `!important` ZORUNLU: kural satır içi `style` ile yarışıyor ve onsuz kaybediyor
	   (ölçüldü). Yalnız masaüstünde: mobilde düzen `auto` kaldığı için sütun genişler,
	   taşma olmaz — mobil kurgusuna dokunulmuyor. */
	.kkar-desc * {
		white-space: normal !important;
	}
}

/* ------------------------------------------- Dar masaüstü (769-1023 px): ölçü kısma
 *
 * Yukarıdaki tabanla (280 + n x 160) 4 ürün ancak ~977 px viewport'tan sonra sığıyordu;
 * 769-976 px arasında kaydırma geri geliyordu (ölçüldü: 784 px'te 193 px, 944 px'te 33 px).
 * İstek net — masaüstünde kaydırma yok, gerekirse hücre uzasın. Bu bantta etiket sütunu
 * ve sütun tabanı kısılıyor.
 *
 * Taban hesabında KAYDIRMA ÇUBUĞU PAYI var: Chrome medya sorgusunu çubuk DAHİL ölçer,
 * düzen genişliği (`clientWidth`) ise çubuk HARİÇ — arada ~15 px fark oluşur. Yani
 * `min-width: 769px` eşiğinde tabloya gerçekte ~754 px viewport, sayfa dolgusundan sonra
 * ~697 px iç genişlik kalır. Ölçüldü: 128 px tabanla burada 5 px kaydırma geri geliyordu.
 * 190 + 4 x 120 = 670 px ile ~27 px pay bırakılıyor.
 */
@media screen and (min-width: 769px) and (max-width: 1023px) {
	.kkar-page {
		--kkar-label-w: 190px;
		--kkar-col-w: 120px;
	}
}

/* ---------------------------------------------------------------- Çatışma diyaloğu

   window.confirm() yerine geçen modal. Tepsi gibi sayfanın HER yerinde çıkabildiği için
   --kkar-* değişkenlerine yalnız yedekli (fallback) kullanılır: o değişkenler .kkar-page
   altında tanımlı ve karşılaştırma sayfası dışında yoktur. */

.kkar-dialog-backdrop {
	/* .kkar-btn ailesi bu değişkenleri YEDEKSİZ kullanıyor ve onlar yalnız .kkar-page
	   altında tanımlı. Diyalog sayfanın her yerinde açıldığı için burada yeniden
	   tanımlanır; yoksa `border: 1px solid var(--kkar-border-strong)` geçersiz kalıp
	   Vazgeç düğmesinin kenarlığı hiç basılmıyordu (ölçüldü). */
	--kkar-border: #e2e6ea;
	--kkar-border-strong: #cfd4da;
	--kkar-text: #1f2429;
	--kkar-muted: #5c656e;
	--kkar-accent: #0f5ca8;
	--kkar-diff-bg: #fff8ec;
	--kkar-diff-bar: #e8a33d;

	position: fixed;
	inset: 0;
	z-index: 400; /* tepsinin (380) üstünde */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 20, 25, .55);
	animation: kkar-dialog-in .14s ease-out;
}

.kkar-dialog {
	width: 100%;
	max-width: 460px;
	padding: 24px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	color: var(--kkar-text, #1f2429);
	text-align: left;
}

.kkar-dialog-title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

.kkar-dialog-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

/* Kaybedilecek şeyin sayısı: uyarı rengiyle, ama alarm tonuna kaçmadan. */
.kkar-dialog-note {
	margin: 14px 0 0;
	padding: 9px 12px;
	border-left: 3px solid var(--kkar-diff-bar, #e8a33d);
	background: var(--kkar-diff-bg, #fff8ec);
	font-size: 13px;
	line-height: 1.45;
}

.kkar-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

/* Yıkıcı eylem sağda ve birincil renkte, vazgeç solda ve sessiz: göz soldan sağa
   "kalsın / değiştir" sırasıyla okur, varsayılan odak da vazgeçtedir. */
.kkar-dialog-actions .kkar-btn {
	padding: 9px 16px;
	font-size: 13px;
}

.kkar-dialog-cancel {
	border-color: var(--kkar-border-strong, #cfd4da);
}

@keyframes kkar-dialog-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.kkar-dialog-backdrop {
		animation: none;
	}
}

/* Dar ekranda düğmeler alt alta ve tam genişlik — küçük hedeflere basmak zorunda kalınmasın. */
@media (max-width: 480px) {
	.kkar-dialog {
		padding: 20px;
	}

	.kkar-dialog-actions {
		flex-direction: column-reverse;
	}

	.kkar-dialog-actions .kkar-btn {
		justify-content: center;
		width: 100%;
	}
}