/*
Favoriler / İstek Listesi (B12) — kalp ikonlu toggle buton (ürün kartı görseli üzerinde overlay)
+ Hesabım → "Favorilerim" listesi ızgarası. Token kullanımı zorunlu — ham hex/px yok.
Tek aksan kuralı (01-TASARIM-SISTEMI.md §2): dolu (favorilenmiş) durum kırmızı (--color-primary).
*/

/* ---------- Ürün kartı görseli için konumlandırma referansı ----------
   product-card-spec.php'de EKLENEN ".dga-product-card__media-wrap" sarmalayıcısı — kartın geri
   kalanı bozulmadı, yalnızca favori butonunun görsel üzerinde konumlanabilmesi için bir referans
   noktası eklendi. Görselin kendi margin'i BURAYA taşındı (aşağıdaki ikinci kural,
   product-card-spec.css'teki ".dga-product-card__media { margin: var(--space-2); }" kuralını daha
   yüksek özgüllükle geçersiz kılar — sonuç pikselde birebir aynı görünüm). */
.dga-product-card__media-wrap {
	position: relative;
	margin: var(--space-2);
}
.dga-product-card__media-wrap .dga-product-card__media {
	margin: 0;
}

/* ---------- Favori butonu — görsel üzerinde sağ üst köşe overlay ----------
   Düzeltme (kullanıcı bildirimi: "favori ekle butonu kötü duruyor"): eskiden `box-shadow` YOKTU —
   ürün fotoğrafları çoğunlukla beyaz/açık zeminli olduğundan (bkz. product-card-spec.css
   `.dga-product-card__media { background: var(--color-surface-alt) }`), beyaz zemin üzerindeki
   beyaz buton neredeyse kayboluyor, ince kenarlık dışında hiçbir ayrım kalmıyordu. Sayfadaki AYNI
   deseni kullanan diğer görsel-üstü daire buton (`.dga-gallery__zoom`, bkz.
   assets/css/woocommerce/single-product.css) zaten `box-shadow: var(--shadow-card)` kullanıyor —
   burada da aynı token uygulanarak tutarlılık sağlandı ve buton her zemin renginde görünür kılındı. */
.dga-favori-buton {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* dokunma hedefi ≥44px — 01-TASARIM-SISTEMI.md §10 / WCAG 2.5.8 */
	height: 44px;
	border-radius: var(--radius-icon);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.dga-favori-buton:hover,
.dga-favori-buton:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
	transform: translateY(-2px);
}
.dga-favori-buton:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.dga-favori-buton__icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill var(--transition), stroke var(--transition);
}

/* Dolu (favorilenmiş) durum — dolgu rengi tek aksan kuralına (01-TASARIM-SISTEMI.md §2) uyar,
   ama zemin BEYAZ kalır (hover'daki dolu-kırmızı zeminle karışmasın — "eklendi" durumu kalıcı bir
   vurgu, "üzerine gelindi" durumu geçici bir aksiyon daveti; ikisi görsel olarak ayrışmalı). */
.dga-favori-buton.is-active {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.dga-favori-buton.is-active:hover,
.dga-favori-buton.is-active:focus-visible {
	background: var(--color-surface);
	color: var(--color-primary);
}
.dga-favori-buton.is-active .dga-favori-buton__icon {
	fill: var(--color-primary);
}

/* ---------- Hesabım → "Favorilerim" listesi (woocommerce/myaccount/my-account.php içinde,
   dga-archive-grid ile aynı ızgara mantığı — archive.css'e bağımlı KALMADAN kendi kuralı) ---------- */
.dga-favoriler-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-3);
}

.dga-favoriler-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-favoriler-empty__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text-muted);
}