/*
Ürün Karşılaştırma (B11) — toggle buton (kart görseli üzerinde + tekil ürün sayfasında)
+ /karsilastir/ sayfası (boş/yükleniyor/hata durumları + karşılaştırma tablosu).
Token kullanımı zorunlu — ham hex/px yok. Tek aksan kuralı (01-TASARIM-SISTEMI.md §2):
seçili (karşılaştırmaya eklenmiş) durum --color-primary — favoriler.css'teki
.dga-favori-buton.is-active ile AYNI görsel dil.
*/

/* ============================================================
   1. Toggle buton — TEMEL görünüm (dga-btn-circle/--outline'ın üzerine, favori-buton.css'teki
   .dga-favori-buton ile aynı 44px daire + box-shadow disiplini; button.css/teklif-sepeti.css'teki
   .dga-btn-circle(--outline) temel kutu kurallarını miras alır, burada renk/durum geçersiz kılınır).
   ============================================================ */
.dga-karsilastir-buton {
	background: var(--color-surface);
	border-color: var(--color-border);
	box-shadow: var(--shadow-card);
	color: var(--color-text-muted);
}
.dga-karsilastir-buton:hover,
.dga-karsilastir-buton:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
	transform: translateY(-2px);
}
.dga-karsilastir-buton:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.dga-karsilastir-buton svg {
	width: 18px;
	height: 18px;
}

/* Seçili (karşılaştırmaya eklenmiş) durum — kalıcı vurgu, hover'daki dolu-kırmızı zeminle
   karışmasın diye zemin BEYAZ kalır (favoriler.css'teki .dga-favori-buton.is-active ile aynı
   ayrım mantığı: "eklendi" != "üzerine gelindi"). */
.dga-karsilastir-buton.is-active {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.dga-karsilastir-buton.is-active:hover,
.dga-karsilastir-buton.is-active:focus-visible {
	background: var(--color-surface);
	color: var(--color-primary);
}
/* İkon çizgi tabanlı (kapalı bir şekil değil, bkz. karsilastir-buton.php'deki <path>) — favori
   kalbi gibi "dolgu" ile değil, kalın stroke ile vurgulanır (svg zaten stroke: currentColor
   miras alıyor, bkz. button.css .dga-btn-circle svg). */
.dga-karsilastir-buton.is-active svg {
	stroke-width: 2.5px;
}

/* ============================================================
   2. Ürün kartı — görsel üzerinde overlay, favori butonunun HEMEN ALTINDA (dikey istifleme;
   favoriler.css'teki .dga-product-card__media-wrap zaten position:relative referans noktası
   kuruyor, favori butonu üstte (top: var(--space-1)) sabit — bu buton onun 44px yüksekliği +
   aradaki space-1 boşluk kadar aşağıda konumlanır, "favori butonunun yanına" ilkesi dikey
   istifleme ile karşılanır; iki buton yan yana konsaydı kartın dar genişliğinde başlığa/rozete
   taşardı).
   ============================================================ */
.dga-product-card__media-wrap .dga-karsilastir-buton {
	position: absolute;
	top: calc(var(--space-1) + 44px + var(--space-1));
	right: var(--space-1);
	z-index: 2;
}

/* ============================================================
   3. Tekil ürün sayfası — buybox üst satırında, stok rozetinin yanında (statik, overlay DEĞİL;
   galeri üzerine hiç konulmadı — görev talimatı). single-product.php'de "top-actions"
   sarmalayıcısı EKLENDİ, .dga-pdp-buybox__top zaten flex+space-between (single-product.css
   satır ~117); bu sarmalayıcı space-between'in ikinci (sağ) grubu olarak rozet + butonu birlikte
   taşır.
   ============================================================ */
.dga-pdp-buybox__top-actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.dga-pdp-buybox__top-actions .dga-karsilastir-buton {
	flex: none;
}

/* ============================================================
   4. Bildirim (toast) — "en fazla N ürün" limiti gibi kısa geri bildirimler için TEK, sayfa
   geneli bir alan (assets/js/karsilastir.js → showToast() tarafından JS ile oluşturulur, PHP
   tarafında karşılığı yok). mini-cart-drawer/teklif-modal'daki sabit-konum FAB'lerle aynı
   z-index katmanına (700) yakın ama onlarla ÇAKIŞMASIN diye biraz daha yüksek z-index.
   ============================================================ */
.dga-karsilastir-toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-4);
	transform: translate(-50%, 12px);
	z-index: 800;
	max-width: calc(100vw - var(--space-4));
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-dark);
	color: var(--color-surface);
	border-radius: var(--radius-tab);
	box-shadow: var(--shadow-card);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transition: opacity var(--transition), transform var(--transition);
	pointer-events: none;
}
.dga-karsilastir-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ============================================================
   5. /karsilastir/ sayfası — başlık + boş/yükleniyor/hata durumları.
   ============================================================ */
.dga-karsilastir-page {
	padding-block: var(--space-4) var(--space-8);
}
.dga-karsilastir-page__header {
	margin-bottom: var(--space-4);
}
.dga-karsilastir-page .dga-section-title {
	margin: 0 0 var(--space-1);
	font-size: 24px;
	font-weight: 800;
}
@media (min-width: 1024px) {
	.dga-karsilastir-page .dga-section-title {
		font-size: 28px;
	}
}
.dga-karsilastir-page__lead {
	margin: 0;
	max-width: 640px;
	color: var(--color-text-muted);
}

.dga-karsilastir-loading {
	padding: var(--space-6) var(--space-3);
	color: var(--color-text-muted);
}

/* Boş/hata durumu — favoriler.css'teki .dga-favoriler-empty ile AYNI kart deseni (tutarlılık).
   Bu sınıf hem #dga-karsilastir-empty hem #dga-karsilastir-error konteynerinde kullanılıyor
   (page-templates/karsilastir.php); ikisi de JS tarafından `hidden` özniteliğiyle açılıp
   kapanıyor (assets/js/karsilastir.js → showOnly()). `display: flex` burada `[hidden]`
   koşulsuz uygulandığından tarayıcının varsayılan `[hidden] { display: none }` UA kuralını
   ezip elemanı `hidden` iken de görünür bırakıyordu (canlıda tablo yüklendiğinde boş/hata
   kutularının da tabloyla birlikte göründüğü tespit edildi) — `[hidden]` seçicisi burada
   AÇIKÇA `none`'a zorlanıyor. */
.dga-karsilastir-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
}
.dga-karsilastir-empty[hidden] {
	display: none;
}
.dga-karsilastir-empty__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
}
.dga-karsilastir-empty__desc {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ============================================================
   6. Karşılaştırma tablosu sarmalayıcı + tablo (AJAX ile #dga-karsilastir-table-inner
   içine basılır — bkz. inc/karsilastir.php + template-parts/components/karsilastir-tablo.php).
   Mobilde yatay scroll ("tam bir tablo problemi", 05-EK-OZELLIKLER-VE-REACT.md §D notu) —
   Faz 10'daki React/@templateui/table'a kadar bu basit çözüm yeterli.
   ============================================================ */
.dga-karsilastir-table-wrap__actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--space-2);
}

.dga-karsilastir-table-inner {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.dga-karsilastir-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}
.dga-karsilastir-table th,
.dga-karsilastir-table td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
.dga-karsilastir-table th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 160px;
	background: var(--color-surface-alt);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.dga-karsilastir-table__product-col {
	position: relative;
	min-width: 200px;
	text-align: center;
}
.dga-karsilastir-table__remove {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-icon);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.dga-karsilastir-table__remove:hover,
.dga-karsilastir-table__remove:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}
.dga-karsilastir-table__image {
	display: block;
	margin: 0 auto var(--space-1);
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: var(--color-surface-alt);
}
.dga-karsilastir-table__name {
	display: block;
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
}
.dga-karsilastir-table__name:hover {
	text-decoration: underline;
}
.dga-karsilastir-table__row--price td {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-primary);
}
.dga-karsilastir-table__row--actions td {
	text-align: center;
}
.dga-karsilastir-table__value--empty {
	color: var(--color-text-faint);
}