/*
 * Ürün karşılaştırma sayfası ve alt karşılaştırma çubuğu.
 *
 * Sütun sayısı satır içi `--dj-compare-cols` değişkeniyle gelir; burada
 * kategori, ürün ya da SKU'ya özel hiçbir kural yoktur.
 */

.dj-compare {
	--dj-compare-label: 23%;
	--dj-compare-gap: calc(24 * var(--dj-u));
	/* Tablo hücresinin yatay dolgusu — sütunların hizalanması buna bağlı. */
	--dj-compare-cell-x: var(--dj-space-20);
	/* Dar ekranda site başlığı yapışkandır (header.css ≤1023); katman onun altına oturur. */
	--dj-compare-sticky-top: var(--dj-sticky-header-offset, 0px);
}

/* ------------------------------------------------------------------ */
/* Başlık bandı                                                        */
/* ------------------------------------------------------------------ */

/*
 * Görünür başlık yok; şerit yalnız denetimleri taşır ve eskisiyle aynı
 * hizada (sağda) kalır. Eski başlık için ayrılmış boşluk bırakılmaz.
 */
.dj-compare__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--dj-space-24);
	flex-wrap: wrap;
	margin-bottom: var(--dj-space-24);
}

.dj-compare__tools {
	display: flex;
	align-items: center;
	gap: var(--dj-space-24);
	flex-wrap: wrap;
}

/*
 * Onay kutusu: tarayıcı varsayılanı bırakılmaz ama aşırı özelleştirilmez —
 * kare kutu, marka çizgisi, işaret yalnız seçiliyken.
 */
.dj-compare__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--dj-u));
	font-size: var(--dj-fs-16);
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
}

.dj-compare__toggle .dj-check {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dj-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
	border: 1px solid var(--dj-gray-300);
	border-radius: calc(5 * var(--dj-u));
	background: var(--dj-white);
	color: transparent;
	transition: background-color var(--dj-transition), border-color var(--dj-transition), color var(--dj-transition);
}

.dj-check__box svg {
	width: calc(13 * var(--dj-u));
	height: calc(13 * var(--dj-u));
}

@media (hover: hover) {
	.dj-compare__toggle:hover .dj-check__box {
		border-color: var(--dj-ink);
	}
}

.dj-compare__toggle .dj-check:checked + .dj-check__box {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
}

.dj-compare__toggle .dj-check:focus-visible + .dj-check__box {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Liste temizleme yardımcı bir eylemdir: ok taşımaz. */
.dj-compare__clear {
	white-space: nowrap;
}

/* Aile uyuşmazlığı bilgisi — hata değil, bilgi. */
.dj-compare__notice {
	padding: var(--dj-space-16) var(--dj-space-20);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface-2);
	color: var(--dj-muted);
	font-size: var(--dj-fs-15);
	margin-bottom: var(--dj-space-24);
}

/* ------------------------------------------------------------------ */
/* Karşılaştırma tahtası                                               */
/* ------------------------------------------------------------------ */

/*
 * Ürün başlıkları ve teknik tablo tek kaydırma alanındadır; dar ekranda
 * sağa kaydırıldığında başlıklar ile değerler aynı sütunda kalır.
 */
.dj-compare__board {
	position: relative;
}

.dj-compare__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* Ürün başlık satırı */

/*
 * Ürün başlıkları ve teknik tablo TEK sütun matematiği kullanır: başta
 * etiket sütunu, sonra ürün sayısı kadar eşit sütun. Böylece üstteki ürün
 * sütunlarının merkezleri alttaki değer sütunlarının merkezleriyle çakışır.
 * Izgara boşluğu yoktur; yatay ayrım tablo hücresiyle aynı iç dolgudan gelir.
 */
.dj-compare__head-row {
	display: grid;
	grid-template-columns: var(--dj-compare-label) repeat(var(--dj-compare-cols, 3), minmax(0, 1fr));
	grid-template-rows: auto auto auto auto;
	align-items: stretch;
	padding-bottom: var(--dj-space-30);
}

/*
 * Etiket sütununun başlık alanındaki karşılığı. İçeriği yoktur; yalnız
 * tablonun etiket sütunuyla aynı genişlikte yer tutarak ürün sütunlarının
 * alttaki değer sütunlarıyla çakışmasını sağlar.
 */
.dj-compare__lead {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

/*
 * Sütunlar aynı satır ızgarasını paylaşır (`subgrid`): görsel, kategori,
 * başlık ve düğme üç üründe de aynı y çizgisinde başlar.
 * Başlık iki satıra çıkarsa satır yüksekliği hepsinde birlikte artar;
 * hiçbir metin kısaltılmaz.
 */
.dj-compare__col {
	position: relative;
	display: grid;
	grid-row: 1 / -1;
	grid-column: auto;
	grid-template-rows: subgrid;
	align-content: start;
	gap: 0;
	min-width: 0;
	padding-inline: var(--dj-compare-cell-x);
}

/*
 * Sütun daraldığında içerik kendi doğal genişliğini dayatıp komşu sütuna
 * taşmasın: her satır kendi kutusunda kalır, uzun sözcükler kırılır.
 */
.dj-compare__col > * {
	min-width: 0;
	max-width: 100%;
}

.dj-compare__title,
.dj-compare__category {
	overflow-wrap: anywhere;
}

/* `subgrid` yoksa sütun normal akışa döner; hizalama yaklaşık kalır. */
@supports not (grid-template-rows: subgrid) {
	.dj-compare__col {
		display: flex;
		flex-direction: column;
	}
}

/*
 * E: çıkar düğmesi görsel sahnesine bağlıdır — ürünün çizim ölçüsü
 * değiştiğinde yeri kaymaz.
 */
.dj-compare__stage {
	position: relative;
}

/*
 * Çıkar düğmesi tek ortak çapadan konumlanır: sahnenin sağ üstünden 12 px.
 * Ürünün çizim ölçüsünden bağımsızdır, üç sütunda aynı koordinattadır.
 * İçerik gerçek SVG'dir ve `place-items: center` ile ortalanır — yazı tipi
 * satır yüksekliğinden gelen optik kayma olmaz.
 */
.dj-compare__remove {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: max(calc(36 * var(--dj-u)), 34px);
	height: max(calc(36 * var(--dj-u)), 34px);
	padding: 0;
	line-height: 0;
	background: var(--dj-white);
	border: 1px solid var(--dj-line);
	color: var(--dj-ink);
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

/*
 * Görünen daire aynı kalır; dokunma alanı 44 px'e tamamlanır (Favoriler ile
 * aynı yöntem). `inset` dolgu kutusundan ölçülür (1 px kenarlığın içi), bu
 * yüzden sabit bir değer yerine merkezden 22 px verilir: düğme 32, 34 ya da
 * 36 px olsun alan her genişlikte tam 44 × 44'tür.
 */
.dj-compare__remove::after {
	content: "";
	position: absolute;
	inset: calc(50% - 22px);
	border-radius: 50%;
}

.dj-compare__remove svg {
	display: block;
	width: max(calc(16 * var(--dj-u)), 15px);
	height: max(calc(16 * var(--dj-u)), 15px);
}

@media (hover: hover) {
	.dj-compare__remove:hover {
		background: var(--dj-ink);
		border-color: var(--dj-ink);
		color: var(--dj-white);
		transform: none;
	}
}

/*
 * Ortak görsel sahnesi: üç üründe de aynı kutu, aynı optik yükseklik.
 * `contain` — kırpma yok.
 */
/*
 * Sahne geniş ve kısa tutulur: görsel bu kutuda yatay değil DİKEY sınırlanır,
 * böylece hem dar (beyaz eşya) hem geniş (televizyon) normalize paketler
 * sahnenin aynı oranını — %82 — kaplar. Çevredeki gri boşluk küçülür.
 */
.dj-compare__media {
	display: block;
	position: relative;
	/* `aspect-ratio` + `max-height` ızgara öğesinde genişliği daraltmasın; çıkar düğmesi sahne köşesinde kalır. */
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--dj-surface);
	border-radius: var(--dj-radius-md);
	overflow: hidden;
	margin-bottom: var(--dj-space-16);
	/*
	 * Az ürünlü listede sütun genişler; oran tek başına kalınca iki ürünlü
	 * listede sahne 1440'ta 957 × 638 oluyordu. Yükseklik sınırlanır, görsel
	 * `contain` ile ortada kalır. 3–4 ürünlü listede sınır devreye girmez.
	 */
	max-height: calc(280 * var(--dj-u));
}

.dj-compare__media img {
	position: absolute;
	inset-block: 9%;
	inset-inline: 0;
	width: 100%;
	height: 82%;
	object-fit: contain;
	object-position: center center;
}

.dj-compare__category {
	display: block;
	font-size: var(--dj-fs-14);
	line-height: 1.4;
	color: var(--dj-muted);
	padding-bottom: calc(4 * var(--dj-u));
}

/* 1440'ta `--dj-fs-20` 15 px'e iniyor, tablo değerleriyle (15) aynı kalıyordu. */
.dj-compare__title {
	display: block;
	font-size: max(17px, calc(20 * var(--dj-ut)));
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
	padding-bottom: var(--dj-space-20);
}

@media (hover: hover) {
	.dj-compare__title:hover {
		color: var(--dj-muted);
	}
}

/*
 * Sepete Ekle sitenin ters çevirme standardını kullanır. Kenarlık normalde
 * de vardır (zeminle aynı renk), bu yüzden hover'da kutu ölçüsü değişmez;
 * yükselme, gölge ve ölçek yok. Seçici, tema uyumluluk kuralından
 * (`.woocommerce a.button:hover`, 0-2-1) bir kademe güçlüdür — o dosya bu
 * dosyadan sonra yükleniyor.
 */
.dj-compare__cart {
	width: 100%;
	min-width: 0;
	justify-content: center;
	align-self: start;
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

@media (hover: hover) {
	.dj-compare .dj-compare__col a.dj-compare__cart:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
		transform: none;
		box-shadow: none;
	}

	.dj-compare .dj-compare__col a.dj-compare__cart:hover .dj-btn__caret {
		transform: translateX(2px);
	}
}

.dj-compare .dj-compare__col a.dj-compare__cart:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

.dj-compare__cart-placeholder {
	display: block;
	min-height: calc(50 * var(--dj-u));
}

/* ------------------------------------------------------------------ */
/* Sabit (kompakt) ürün başlığı                                        */
/* ------------------------------------------------------------------ */

/*
 * Teknik tablo uzun olduğunda hangi sütunun hangi ürün olduğu kaybolmasın
 * diye kompakt bir şerit sayfanın üstüne yapışır. Yalnız küçük görsel,
 * kısa ad ve fiyat taşır; kartın tamamı sabitlenmez.
 *
 * Şerit tablonun kaydırma alanının içindedir, bu yüzden yatay kaydırmada
 * değer sütunlarıyla birlikte hareket eder.
 */
/*
 * Yapışan çapa. Yüksekliği sıfırdır: akışa yer katmaz, bu yüzden görünürlüğü
 * değiştiğinde sayfa yüksekliği ve altındaki içerik KIMILDAMAZ.
 *
 * Eski uygulamada şerit akıştaydı; görünür olduğunda sayfayı 67 px aşağı
 * itiyor, bu da gözlemlenen ürün başlığını yeniden görünür yapıp şeridi
 * gizliyordu — sınırda ileri/geri titreme (ölçüm: tek geçişte 14 durum
 * değişimi, sayfa yüksekliği 3915 ↔ 3982). Çapa sıfır yükseklikte olduğu
 * için bu geri besleme döngüsü ortadan kalkar.
 *
 * Yapışan katmana `transform` uygulanmaz; yatay hareket iç katmandadır.
 */
.dj-compare__sticky {
	position: sticky;
	inset-block-start: var(--dj-compare-sticky-top);
	z-index: 6;
	height: 0;
}

/* Görünen şerit: çapanın dışına taşarak çizilir, akışı etkilemez. */
.dj-compare__sticky-bar {
	background: var(--dj-white);
	border-bottom: 1px solid var(--dj-line);
	box-shadow: 0 calc(6 * var(--dj-u)) calc(18 * var(--dj-u)) rgba(16, 18, 19, 0.06);
}

/*
 * Görünürlük yalnız `visibility`/`opacity` ile değişir — `display` ya da
 * `hidden` kullanılmaz, geçişte ölçü değişmez. Geçiş yalnız opaklıkta;
 * `top`, `height` ya da `transform` animasyonu yok.
 */
.dj-compare__sticky[aria-hidden="true"] .dj-compare__sticky-bar {
	visibility: hidden;
	opacity: 0;
}

.dj-compare__sticky-bar {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--dj-motion-fast) var(--dj-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
	.dj-compare__sticky-bar {
		transition: none;
	}
}

/* Yatay konum betikten kaydırma alanıyla eşitlenir; kendi çubuğu görünmez. */
.dj-compare__sticky-scroll {
	overflow-x: hidden;
}

/*
 * Şerit teknik tablonun üstünde belirir, bu yüzden ürün başlık satırının
 * değil TABLONUN sütun düzenini kullanır: başta etiket sütunu kadar yer.
 */
/*
 * Izgara boşluksuzdur ve sütun dolgusu tablo hücresiyle aynıdır; şeridin
 * sütun sınırları tablonunkilerle birebir çakışır.
 */
.dj-compare__sticky-inner {
	display: grid;
	grid-template-columns: var(--dj-compare-label) repeat(var(--dj-compare-cols, 3), minmax(0, 1fr));
	align-items: center;
	padding-block: calc(10 * var(--dj-u));
}

.dj-compare__sticky-col {
	padding-inline: var(--dj-compare-cell-x);
}

.dj-compare__sticky-col {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--dj-u));
	min-width: 0;
}

.dj-compare__sticky-media {
	flex: 0 0 auto;
	display: block;
	width: calc(46 * var(--dj-u));
	height: calc(46 * var(--dj-u));
	border-radius: calc(8 * var(--dj-u));
	background: var(--dj-surface);
	overflow: hidden;
}

.dj-compare__sticky-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: calc(4 * var(--dj-u));
}

.dj-compare__sticky-text {
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--dj-u));
	min-width: 0;
}

.dj-compare__sticky-title {
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.25;
	color: var(--dj-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dj-compare__sticky-price {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dj-compare__sticky-price .amount,
.dj-compare__sticky-price ins {
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Teknik tablo                                                        */
/* ------------------------------------------------------------------ */

/*
 * Köşe yuvarlaması köşe hücrelerine verilir. Tabloya `overflow: hidden`
 * konulursa kırpma bağlamı oluşur ve dar ekranda etiket sütununun
 * `position: sticky` davranışı çalışmaz.
 */
.dj-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
}

.dj-compare__table tbody tr:first-child > *:first-child {
	border-start-start-radius: var(--dj-radius-md);
}

.dj-compare__table tbody tr:first-child > *:last-child {
	border-start-end-radius: var(--dj-radius-md);
}

.dj-compare__table tbody tr:last-child > *:first-child {
	border-end-start-radius: var(--dj-radius-md);
}

.dj-compare__table tbody tr:last-child > *:last-child {
	border-end-end-radius: var(--dj-radius-md);
}

.dj-compare__col-label {
	width: var(--dj-compare-label);
}

.dj-compare__table th,
.dj-compare__table td {
	text-align: start;
	vertical-align: middle;
	padding: var(--dj-space-16) var(--dj-space-20);
	border-bottom: 1px solid var(--dj-line);
	font-size: var(--dj-fs-15);
	line-height: var(--dj-lh-normal, 1.5);
	background: var(--dj-white);
	overflow-wrap: anywhere;
}

.dj-compare__table tbody tr:last-child th,
.dj-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Satır yüksekliği tasarım birimiyle küçülünce dar ekranlarda okunaksız
 * kalıyordu; alt sınır sabit tutulur.
 */
.dj-compare__table tbody tr:not(.dj-compare__group) th,
.dj-compare__table tbody tr:not(.dj-compare__group) td {
	height: max(calc(60 * var(--dj-u)), 56px);
}

/* Etiket sütunu */
.dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
	font-weight: var(--dj-fw-medium);
	color: var(--dj-ink);
}

.dj-compare__table td {
	color: var(--dj-ink);
}

/* Grup başlığı */
.dj-compare__group th {
	background: var(--dj-surface-2);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-bold);
	letter-spacing: 0.01em;
	padding-block: calc(12 * var(--dj-u));
	/* Etiket hücrelerindeki 2 px işaret payı: grup adı etiketlerle aynı x'te başlar. */
	border-inline-start: 2px solid transparent;
}

.dj-compare__na {
	color: var(--dj-gray-400);
}

/* Ticari satırlar: fiyat ve stok hücreleri. */
.dj-compare__cell-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: calc(4 * var(--dj-u)) calc(8 * var(--dj-u));
}

/* “89.999 TL - 99.999 TL” fiyat aralığı gibi okunuyordu; eski fiyat üstü çizili yeterli. */
.dj-compare__cell-price .dj-price__sep {
	display: none;
}

.dj-compare__cell-price ins,
.dj-compare__cell-price ins .amount {
	text-decoration: none;
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

.dj-compare__cell-price del,
.dj-compare__cell-price del .amount {
	color: var(--dj-gray-400);
	font-weight: var(--dj-fw-regular);
	text-decoration: line-through;
}

.dj-compare__cell-stock {
	font-weight: var(--dj-fw-medium);
}

.dj-compare__cell-stock--instock {
	color: var(--dj-green);
}

/* Uyarı kutusu değil: yalnız sakin, koyu bir durum. */
.dj-compare__cell-stock--outofstock {
	color: var(--dj-muted);
}

.dj-compare__cell-stock--onbackorder {
	color: var(--dj-ink);
}

/*
 * Farklılık vurgusu: alarm rengi yok ve **satır zemini beyaz kalır**. Zemin
 * dolgusu kullanıldığında farklı satırlar çoğunluk olduğu için tablo bütün
 * olarak gri bir bloğa dönüşüyordu (ölçüm: tablo alanının %59'u). Vurgu
 * artık yalnız yazı ağırlığı ve etiket sütununun başındaki ince işaretle
 * verilir.
 */
.dj-compare__table tbody tr[data-differs="1"] td {
	font-weight: var(--dj-fw-medium);
}

/*
 * İşaret her etiket hücresinde saydam bir kenarlık olarak hep vardır; yalnız
 * rengi değişir. Böylece kutu ölçüsü satırdan satıra kaymaz ve kaydırma
 * modundaki ayırıcı gölgesiyle çakışmaz.
 */
.dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
	border-inline-start: 2px solid transparent;
}

.dj-compare__table tbody tr[data-differs="1"] th[scope="row"] {
	border-inline-start-color: var(--dj-gray-300);
}

/*
 * Filtre açıkken görünen her satır zaten bir farklılık; vurgu tekrarlanmaz.
 */
.dj-compare.is-diff-only .dj-compare__table tbody tr[data-differs="1"] td {
	font-weight: var(--dj-fw-regular);
}

.dj-compare.is-diff-only .dj-compare__table tbody tr[data-differs="1"] th[scope="row"] {
	border-inline-start-color: transparent;
}

/* Yalnız farklılıklar */
.dj-compare.is-diff-only .dj-compare__table tbody tr[data-differs="0"],
.dj-compare.is-diff-only .dj-compare__table tbody tr.dj-compare__group.is-empty {
	display: none;
}

.dj-compare__diff-empty {
	margin: var(--dj-space-20) 0 0;
	padding: var(--dj-space-20);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface-2);
	color: var(--dj-muted);
	font-size: var(--dj-fs-15);
	text-align: center;
}

/* Teknik özellik bulunmayan durum — hata değil, bilgi. */
/* Tablo altında duruyorsa üstünde nefes payı kalsın. */
.dj-compare__table + .dj-compare__diff-empty + .dj-compare__no-specs,
.dj-compare__table ~ .dj-compare__no-specs {
	margin-top: var(--dj-space-20);
}

.dj-compare__no-specs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--dj-u));
	text-align: center;
	padding: var(--dj-space-20);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface-2);
}

.dj-compare__no-specs-icon svg {
	width: calc(24 * var(--dj-u));
	height: calc(24 * var(--dj-u));
	color: var(--dj-gray-400);
}

.dj-compare__no-specs p {
	margin: 0;
	color: var(--dj-muted);
	font-size: var(--dj-fs-15);
}

/* ------------------------------------------------------------------ */
/* Boş karşılaştırma                                                   */
/* ------------------------------------------------------------------ */

/*
 * Boş durum, Favoriler ve Sepet'teki boş durumlarla aynı ailededir:
 * kutu yok — kenarlık, yarıçap, zemin ve gölge kullanılmaz; içerik doğrudan
 * sayfanın beyaz zemininde, ortalanmış bir sütun olarak durur.
 * Ölçüler `.dj-cart-empty` / `.dj-wishlist-empty` ile aynı sistemden gelir.
 */
.dj-compare__empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	max-width: calc(660 * var(--dj-ut));
	margin-inline: auto;
	/* Üstte başlık zaten var; ailedeki sayfa değerinden bir kademe kompakt. */
	padding-block: var(--dj-space-40) var(--dj-space-60);
	text-align: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/*
 * İkon çevresinde kutu yok. Kaynak başlıktaki karşılaştırma ikonuyla aynı
 * (`card-compare`); çizgi kalınlığı ve geometrisi oradan gelir. Renk,
 * Favoriler ve Sepet boş durum ikonlarıyla aynı nötr tondur.
 */
.dj-compare__empty-icon {
	display: inline-flex;
	color: var(--dj-gray-400);
}

.dj-compare__empty-icon svg {
	width: 32px;
	height: 32px;
}

.dj-compare__empty-title {
	margin: 8px 0 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
}

.dj-compare__empty-text {
	margin: 0;
	max-width: calc(420 * var(--dj-ut));
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	line-height: 1.5;
}

.dj-compare__empty .dj-empty-cta {
	margin-top: var(--dj-space-16);
}

.dj-compare__content {
	margin-top: var(--dj-space-40);
}

/* ------------------------------------------------------------------ */
/* Alt karşılaştırma çubuğu                                            */
/* ------------------------------------------------------------------ */

/*
 * Çubuk tam genişlikte, temiz beyaz bir yüzeydir: dış kapsül yok, yuvarlak
 * dev kutu yok. Üstte yalnız ince bir çizgi ve çok hafif bir gölge.
 *
 * Hiçbir ebeveyn `:hover` kuralı yoktur — bir düğmenin üzerine gelmek
 * çubuğun, küçük görsellerin ya da başka denetimin zeminini değiştirmez.
 */
.dj-compare-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 120;
	background: var(--dj-white);
	border-top: 1px solid var(--dj-line);
	box-shadow: 0 calc(-2 * var(--dj-u)) calc(12 * var(--dj-u)) rgba(16, 18, 19, 0.05);
}

.dj-compare-bar__inner {
	min-height: calc(72 * var(--dj-u));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: calc(10 * var(--dj-u));
}

.dj-compare-bar__note {
	margin: 0 0 calc(8 * var(--dj-u));
	font-size: var(--dj-fs-14);
	color: var(--dj-red);
}

.dj-compare-bar__main {
	display: flex;
	align-items: center;
	gap: var(--dj-space-20);
}

.dj-compare-bar__label {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--dj-u));
	font-size: var(--dj-fs-15);
	line-height: 1;
	color: var(--dj-muted);
	white-space: nowrap;
}

.dj-compare-bar__label svg {
	width: calc(22 * var(--dj-u));
	height: calc(22 * var(--dj-u));
	color: var(--dj-ink);
}

.dj-compare-bar__count {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	margin-inline-start: calc(4 * var(--dj-u));
}

.dj-compare-bar__max {
	font-size: var(--dj-fs-15);
	color: var(--dj-gray-400);
}

.dj-compare-bar__items {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--dj-u));
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.dj-compare-bar__items::-webkit-scrollbar {
	display: none;
}

.dj-compare-bar__item {
	position: relative;
	flex: 0 0 auto;
	width: calc(46 * var(--dj-u));
	height: calc(46 * var(--dj-u));
	border-radius: calc(8 * var(--dj-u));
	background: var(--dj-surface);
	overflow: visible;
}

.dj-compare-bar__item img,
.dj-compare-bar__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: contain;
	padding: calc(4 * var(--dj-u));
	background: var(--dj-surface);
}

/* Küçük çarpı yalnız kendi üzerinde tepki verir. */
.dj-compare-bar__remove {
	position: absolute;
	inset-block-start: calc(-5 * var(--dj-u));
	inset-inline-end: calc(-5 * var(--dj-u));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(18 * var(--dj-u));
	height: calc(18 * var(--dj-u));
	border-radius: 50%;
	border: 1px solid var(--dj-line);
	background: var(--dj-white);
	color: var(--dj-muted);
	transition: background-color var(--dj-transition), border-color var(--dj-transition), color var(--dj-transition);
}

.dj-compare-bar__remove svg {
	width: calc(9 * var(--dj-u));
	height: calc(9 * var(--dj-u));
}

@media (hover: hover) {
	.dj-compare-bar__remove:hover {
		background: var(--dj-ink);
		border-color: var(--dj-ink);
		color: var(--dj-white);
	}
}

.dj-compare-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--dj-space-16);
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* Temizle: ghost yardımcı eylem — alt çizgi ve siyah kapsül yok. */
/* Mobilde kullanılan ikon masaüstünde gösterilmez; metin aynı kalır. */
.dj-compare-bar__clear svg {
	display: none;
}

.dj-compare-bar__clear {
	font-size: var(--dj-fs-15);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-muted);
	text-decoration: none;
	white-space: nowrap;
	padding: calc(6 * var(--dj-u)) 0;
	background: none;
	border: 0;
	transition: color var(--dj-transition);
}

@media (hover: hover) {
	.dj-compare-bar__clear:hover {
		color: var(--dj-ink);
	}
}

/*
 * Karşılaştır düğmesi sitenin ters çevirme standardını kullanır; yükselme,
 * gölge ve ölçek yok. Kenarlık normalde de vardır (zeminle aynı renk), bu
 * yüzden hover'da kutu ölçüsü değişmez.
 */
.dj-compare-bar__go {
	flex: 0 0 auto;
	min-height: calc(46 * var(--dj-u));
	padding-inline: calc(26 * var(--dj-u));
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	white-space: nowrap;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

@media (hover: hover) {
	.dj-compare-bar .dj-compare-bar__go:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
		transform: none;
		box-shadow: none;
	}

	.dj-compare-bar .dj-compare-bar__go:hover .dj-btn__caret {
		transform: translateX(2px);
	}
}

.dj-compare-bar .dj-btn.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * Çubuk açıkken sayfa sonundaki içerik onun altında kalmasın. Güvenli alan
 * footer'ın kendi dolgusuna eklenir: gövdeye eklenseydi koyu footer'ın
 * altında beyaz bir şerit kalırdı.
 */
body:has(.dj-compare-bar:not([hidden])) .dj-footer {
	padding-bottom: max(calc(96 * var(--dj-u)), 88px);
}

/* ------------------------------------------------------------------ */
/* Duyarlı                                                             */
/* ------------------------------------------------------------------ */

/*
 * Kaydırma modu: ürün sütunları en az bu genişliği korur, etiket sütunu
 * sabitlenir ve başlıklar aynı ızgarada kaldığı için değerlerle hizalı
 * kalır. Sayfa gövdesi değil, yalnız karşılaştırma alanı kayar.
 */
@media (max-width: 1024px) {
	/*
	 * Kaydırma modunda ölçüler tasarım biriminden değil sabit px'ten gelir:
	 * sütun genişliği ekranla birlikte küçülürse değerler okunmaz olur.
	 */
	.dj-compare {
		--dj-compare-label: 170px;
		--dj-compare-lead: 170px;
		--dj-compare-col-min: 232px;
	}

	.dj-compare__head-row,
	.dj-compare__sticky-inner,
	.dj-compare__table {
		min-width: calc(var(--dj-compare-lead) + var(--dj-compare-cols, 3) * var(--dj-compare-col-min));
	}

	.dj-compare__head-row,
	.dj-compare__sticky-inner {
		grid-template-columns: var(--dj-compare-lead) repeat(var(--dj-compare-cols, 3), minmax(var(--dj-compare-col-min), 1fr));
	}

	.dj-compare__col-label {
		width: var(--dj-compare-label);
	}

	/* Etiket sütunu kaydırmada yerinde kalır. */
	.dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
		position: sticky;
		inset-inline-start: 0;
		z-index: 3;
		box-shadow: 1px 0 0 var(--dj-line);
	}

	[dir="rtl"] .dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
		box-shadow: -1px 0 0 var(--dj-line);
	}

	.dj-compare__group th {
		position: sticky;
		inset-inline-start: 0;
	}

	.dj-compare__lead {
		position: sticky;
		inset-inline-start: 0;
		z-index: 3;
		background: var(--dj-white);
	}

	.dj-compare__title {
		font-size: var(--dj-fs-18);
	}

	/* Genel `.dj-btn` ölçeği (60 px, 20 px yazı) ürün adından iri kalıyordu. */
	.dj-compare .dj-compare__col .dj-compare__cart {
		min-height: 48px;
		padding-inline: 16px;
		font-size: var(--dj-fs-16);
	}

	.dj-compare__cart-placeholder {
		min-height: 48px;
	}

	.dj-compare__toggle {
		min-height: 44px;
	}
}

/*
 * Mobil: etiket sütunu kaldırılır. 390'da 140 px etiket + 222 px ürün sütunu
 * ekranda aynı anda yalnız TEK ürün bırakıyordu — karşılaştırma yapılamıyordu.
 *
 * Artık her özellik iki katmanlıdır: üstte tam genişlikte küçük etiket, altında
 * ürün sayısı kadar değer. Ürün sütunu 160 px: iki ürün yan yana görünür,
 * üçüncü ürün kenardan belirerek kaydırılabileceğini gösterir. Başlıklar,
 * yapışkan şerit ve değerler aynı sütun matematiğini kullanır (baştaki etiket
 * sütunu 0 px), yatay kaydırmada hizada kalır; etiket kaydırmada yerinde durur.
 *
 * Tablo işaretlemesi değişmez; satırlar yalnız görsel olarak ızgaraya döner.
 * Satır gizleme kuralları (`is-diff-only`) bu seçicilerden özgül olduğu için
 * filtre aynen çalışır.
 */
@media (max-width: 767px) {
	.dj-compare {
		--dj-compare-label: 0px;
		--dj-compare-lead: 0px;
		--dj-compare-col-min: 160px;
		--dj-compare-cell-x: 12px;
	}

	/* Denetimler tek satır: onay solda, temizle sağda (44 px). */
	.dj-compare__head {
		justify-content: flex-start;
		gap: var(--dj-space-12);
		margin-bottom: var(--dj-space-12);
	}

	.dj-compare__tools {
		width: 100%;
		justify-content: space-between;
		gap: 8px;
	}

	.dj-compare__toggle {
		font-size: var(--dj-fs-15);
	}

	.dj-compare .dj-compare__clear {
		min-height: 44px;
		padding-inline: 16px;
		font-size: var(--dj-fs-15);
	}

	.dj-compare__viewport {
		scroll-snap-type: x proximity;
	}

	.dj-compare__col {
		scroll-snap-align: start;
	}

	/* Ürün başlıkları — dar sütuna göre */
	.dj-compare__head-row {
		padding-bottom: var(--dj-space-20);
	}

	.dj-compare__media {
		margin-bottom: 10px;
	}

	.dj-compare__remove {
		inset-block-start: 6px;
		inset-inline-end: 6px;
		width: 32px;
		height: 32px;
	}

	.dj-compare__remove svg {
		width: 14px;
		height: 14px;
	}

	.dj-compare__category {
		font-size: var(--dj-fs-14);
		padding-bottom: 2px;
	}

	.dj-compare__title {
		font-size: var(--dj-fs-15);
		line-height: 1.3;
		padding-bottom: var(--dj-space-12);
	}

	.dj-compare .dj-compare__col .dj-compare__cart {
		--dj-cta-gap: 6px;
		min-height: 44px;
		padding-inline: 10px;
		font-size: var(--dj-fs-14);
	}

	.dj-compare__cart-placeholder {
		min-height: 44px;
	}

	/* Teknik tablo — etiket üstte, değerler altta */
	.dj-compare__table {
		display: block;
		/* `clip` kaydırma kapsayıcısı oluşturmaz: köşeler kırpılır, yapışkan etiket çalışır. */
		overflow: clip;
	}

	.dj-compare__table colgroup {
		display: none;
	}

	.dj-compare__table tbody {
		display: block;
	}

	.dj-compare__table tbody tr {
		display: grid;
		grid-template-columns: repeat(var(--dj-compare-cols, 3), minmax(0, 1fr));
		border-bottom: 1px solid var(--dj-line);
	}

	.dj-compare__table tbody tr:last-child {
		border-bottom: 0;
	}

	/*
	 * Masaüstünde tablo köşeleri köşe hücrelerinden yuvarlanır. Burada
	 * satırlar ızgaradır: etiket (`th`) satırın üstünde tam genişlikte,
	 * değerler altında. İlk/son satırın ilk/son hücresi artık tablo köşesi
	 * değildir; son satırın etiketine düşen alt-sol yuvarlama 2 px sol
	 * çizgiyle iç satırda oval bir cep çiziyordu. Dış köşeleri tablonun
	 * kendi `border-radius` + `overflow: clip` kuralı zaten kırpar.
	 */
	.dj-compare__table tbody tr:first-child > *:first-child,
	.dj-compare__table tbody tr:first-child > *:last-child,
	.dj-compare__table tbody tr:last-child > *:first-child,
	.dj-compare__table tbody tr:last-child > *:last-child {
		border-radius: 0;
	}

	.dj-compare__table th,
	.dj-compare__table td {
		border-bottom: 0;
	}

	.dj-compare__table tbody tr:not(.dj-compare__group) th,
	.dj-compare__table tbody tr:not(.dj-compare__group) td {
		height: auto;
	}

	.dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
		grid-column: 1 / -1;
		justify-self: start;
		max-width: calc(100vw - 2 * var(--dj-page-padding));
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
		box-shadow: none;
		padding: 10px 12px 0 10px;
		background: transparent;
		color: var(--dj-muted);
		font-size: var(--dj-fs-14);
		line-height: 1.3;
	}

	[dir="rtl"] .dj-compare__table tbody tr:not(.dj-compare__group) th[scope="row"] {
		box-shadow: none;
		padding: 10px 10px 0 12px;
	}

	.dj-compare__table td {
		padding: 4px 12px 10px;
		font-size: var(--dj-fs-14);
		line-height: 1.4;
	}

	.dj-compare__table tbody tr.dj-compare__group {
		background: var(--dj-surface-2);
	}

	.dj-compare__group th {
		grid-column: 1 / -1;
		justify-self: start;
		max-width: calc(100vw - 2 * var(--dj-page-padding));
		padding: 10px 12px 10px 10px;
		background: transparent;
		font-size: var(--dj-fs-15);
	}

	/* Yapışkan şerit: dar sütunda küçük görsel yerine ad + fiyat. */
	.dj-compare__sticky-inner {
		padding-block: 8px;
	}

	.dj-compare__sticky-media {
		display: none;
	}

	.dj-compare__sticky-title,
	.dj-compare__sticky-price {
		font-size: var(--dj-fs-14);
	}

	.dj-compare-bar__word {
		display: none;
	}

	.dj-compare-bar__main {
		gap: var(--dj-space-12);
	}

	.dj-compare-bar__actions {
		gap: var(--dj-space-12);
	}
}

/*
 * Alt gezinme çubuğu olan genişlikler (≤1199): karşılaştırma çubuğu da
 * altta sabit olduğu için gezinme çubuğunun altında kalıyor, sayaç ve
 * “Karşılaştır” görünmüyordu. Çubuk gezinmenin hemen üstüne oturur;
 * yükseklik ve güvenli alan gezinmenin kendi belirtecinden okunur.
 * Ürün sayfasında gezinme yoksa oradaki kural (product.css) geçerlidir.
 */
@media (max-width: 1199px) {
	.dj-compare-bar {
		bottom: calc(var(--dj-mobilenav-height) + env(safe-area-inset-bottom, 0px));
	}
}

/*
 * Mobil: sade tek satır — [sayaç + Temizle] [üst üste binen dört küçük
 * görsel] [Karşılaştır]. En fazla 4 ürün olduğu için kaydırma yok; küçük
 * görseller 48–56 px'tir ve her biri öncekinin üstüne 13 px biner (sıra
 * arttıkça üstte; dörtlü yığın 153–185 px). Yer açmak için çubuğun yan
 * boşluğu 16 px, sütun aralığı 8 px. Temizle ana satırda değil, sayacın altında ikincil bir
 * metin bağlantısıdır. İşaretleme masaüstüyle aynı; eylemler kutusu
 * (`__actions`) ızgarada çözülür, öğeleri doğrudan yerleşir.
 */
@media (max-width: 767px) {
	/* Çıkar × görselin üstünden 6 px taşar; dikey iç boşluk onu kapsar. */
	.dj-compare-bar__inner {
		min-height: 0;
		padding-block: 8px;
		padding-inline: 16px;
	}

	.dj-compare-bar__note {
		margin-bottom: 6px;
		font-size: var(--dj-fs-14);
	}

	.dj-compare-bar__main {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"count stack go"
			"clear stack go";
		align-items: center;
		column-gap: 8px;
		row-gap: 2px;
	}

	.dj-compare-bar__actions {
		display: contents;
	}

	/* Sayaç: yalnız “4 / 4”. */
	.dj-compare-bar__label {
		grid-area: count;
		align-self: end;
		gap: 0;
		font-size: var(--dj-fs-15);
	}

	.dj-compare-bar__label svg {
		display: none;
	}

	.dj-compare-bar__count {
		margin-inline-start: 0;
		font-size: var(--dj-fs-16);
	}

	.dj-compare-bar__max {
		margin-inline-start: 3px;
		font-size: var(--dj-fs-15);
	}

	/* Temizle: sayacın altında küçük ikincil bağlantı; dokunma alanı büyük. */
	.dj-compare-bar__clear {
		grid-area: clear;
		align-self: start;
		justify-self: start;
		position: relative;
		padding: 0;
		font-size: var(--dj-fs-14);
		line-height: 1.3;
		color: var(--dj-muted);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.dj-compare-bar__clear::after {
		content: "";
		position: absolute;
		inset: -12px -10px;
	}

	/* Küçük görseller: üst üste binen yığın. */
	.dj-compare-bar__items {
		--dj-compare-thumb: clamp(48px, 13.4vw, 56px);
		--dj-compare-overlap: 13px;

		grid-area: stack;
		justify-self: center;
		gap: 0;
		padding: 0;
		overflow: visible;
	}

	.dj-compare-bar__item {
		width: var(--dj-compare-thumb);
		height: var(--dj-compare-thumb);
		border: 1px solid rgba(16, 18, 19, 0.07);
		border-radius: 5px;
		background: var(--dj-white);
		box-shadow: 0 1px 2px rgba(16, 18, 19, 0.06);
	}

	.dj-compare-bar__item + .dj-compare-bar__item {
		margin-inline-start: calc(-1 * var(--dj-compare-overlap));
	}

	.dj-compare-bar__item:nth-child(2) { z-index: 2; }
	.dj-compare-bar__item:nth-child(3) { z-index: 3; }
	.dj-compare-bar__item:nth-child(4) { z-index: 4; }

	.dj-compare-bar__item img,
	.dj-compare-bar__placeholder {
		padding: 0;
		border-radius: 4px;
		background: var(--dj-white);
	}

	/*
	 * Çıkar ×: her zaman görünür, küçük. Sol üst köşede durur; sağ üstte
	 * olsaydı bir sonraki (üstteki) görselin altında kalırdı.
	 */
	.dj-compare-bar__remove {
		inset-block-start: -5px;
		inset-inline-start: -5px;
		inset-inline-end: auto;
		width: 16px;
		height: 16px;
		box-shadow: 0 1px 2px rgba(16, 18, 19, 0.12);
	}

	.dj-compare-bar__remove svg {
		width: 7px;
		height: 7px;
	}

	/* Görünmeyen dokunma alanı: 32 px. */
	.dj-compare-bar__remove::after {
		content: "";
		position: absolute;
		inset: -8px;
	}

	/* Karşılaştır: ana eylem, görseller onu sıkıştırmaz. */
	.dj-compare-bar__go {
		grid-area: go;
		--dj-cta-gap: 6px;
		min-width: 112px;
		min-height: 42px;
		padding-inline: 14px;
		font-size: var(--dj-fs-14);
	}

	/*
	 * Karşılaştırma alanı: ürün sütunu ekranın ~%43'ü (140–176 px). İki
	 * ürün alanı doldurur; üç ve üstünde üçüncü sütunun ~%30'u her
	 * genişlikte görünür, devamı olduğu kesik bir kenarla değil kısmen
	 * görünen sütunla anlaşılır.
	 */
	.dj-compare {
		--dj-compare-col-min: clamp(140px, calc((100vw - 2 * var(--dj-page-padding)) / 2.3), 176px);
	}

	/*
	 * Sağda görünmeyen ürün varken kenar hafifçe söner; en sağa
	 * gelinince kalkar (durum main.js'te kaydırmadan okunur).
	 */
	.dj-compare__viewport[data-dj-more~="end"],
	.dj-compare__sticky-scroll[data-dj-more~="end"] {
		-webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
		mask-image: linear-gradient(to left, transparent 0, #000 32px);
	}

	[dir="rtl"] .dj-compare__viewport[data-dj-more~="end"],
	[dir="rtl"] .dj-compare__sticky-scroll[data-dj-more~="end"] {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
		mask-image: linear-gradient(to right, transparent 0, #000 32px);
	}
}