/*
Hızlı Önizleme / Quick Shop modalı — 05-EK-OZELLIKLER-VE-REACT.md §B20.
Masaüstünde ortalanmış kart, mobilde tam ekran/bottom-sheet. Aç/kapa davranışı:
assets/js/quick-view.js (mini-cart-drawer.js ile aynı geçiş deseni — çift rAF + transitionend).
Odak halkası base.css'teki global :focus-visible kuralından miras alınır (§10) — burada tekrar
tanımlanmaz. Token kullanımı zorunlu — ham hex/px yok (01-TASARIM-SISTEMI.md kuralı).
*/

.dga-quick-view-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 19, 19, 0.5);
	z-index: 910;
	opacity: 0;
	transition: opacity var(--transition);
}
.dga-quick-view-backdrop.is-open {
	opacity: 1;
}

.dga-quick-view-modal {
	position: fixed;
	inset: 0;
	z-index: 911;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}
.dga-quick-view-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.dga-quick-view-modal__panel {
	position: relative;
	width: min(760px, 100%);
	max-height: calc(100vh - var(--space-6));
	overflow-y: auto;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
	transform: translateY(12px) scale(0.98);
	transition: transform var(--transition);
}
.dga-quick-view-modal.is-open .dga-quick-view-modal__panel {
	transform: translateY(0) scale(1);
}

/* ---------- Kapatma butonu ---------- */
.dga-quick-view-modal__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* dokunma hedefi ≥44px — 01-TASARIM-SISTEMI.md §10 */
	height: 44px;
	border-radius: var(--radius-icon);
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	z-index: 1;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.dga-quick-view-modal__close:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}
.dga-quick-view-modal__close svg {
	width: 18px;
	height: 18px;
}

/* ---------- Yükleniyor / hata durumu ---------- */
.dga-quick-view-modal__status {
	padding: var(--space-6) var(--space-3);
	text-align: center;
	color: var(--color-text-muted);
	font-weight: 600;
}

/* ---------- Gövde: görsel + bilgi ---------- */
.dga-quick-view-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 280px) 1fr;
	gap: var(--space-4);
}

.dga-quick-view-modal__media {
	background: var(--color-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* aspect-ratio: 1/1 (dga-gallery__main ile AYNI desen, bkz. woocommerce/single-product.css) —
	   önceki `min-height: 200px`, grid satırının info kolonuna (başlık+fiyat+açıklama+aksiyonlar)
	   göre esnemesine izin veriyordu; medya kutusu görselden çok daha uzun kalınca üstte/altta
	   boş gri şerit oluşuyordu ("thumbnail alanları boş/gri kutu" olarak bildirildi — aslında
	   thumbnail değil, bu letterbox boşluğuydu). Sabit kare oran, kutuyu görsele sarar. */
	aspect-ratio: 1 / 1;
	align-self: start;
}
.dga-quick-view-modal__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.dga-quick-view-modal__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.dga-quick-view-modal__title {
	margin: 0;
	padding-right: var(--space-5); /* kapatma butonuyla çakışmasın */
	font-size: 22px;
	font-weight: 800;
	color: var(--color-text);
}

.dga-quick-view-modal__price {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
}

.dga-quick-view-modal__description {
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
}
.dga-quick-view-modal__description p {
	margin: 0;
}

.dga-quick-view-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

@media (max-width: 767.98px) {
	.dga-quick-view-modal {
		padding: 0;
		align-items: flex-end;
	}
	.dga-quick-view-modal__panel {
		width: 100%;
		max-height: calc(100vh - var(--space-4));
		border-radius: 0;
		transform: translateY(100%);
	}
	.dga-quick-view-modal.is-open .dga-quick-view-modal__panel {
		transform: translateY(0);
	}
	.dga-quick-view-modal__body {
		grid-template-columns: 1fr;
	}
	.dga-quick-view-modal__actions .dga-btn,
	.dga-quick-view-modal__actions .dga-btn--outline {
		width: 100%;
	}
}

/* Modal açıkken arka plan kaydırmayı engelle (JS: document.body.classList) */
body.dga-quick-view-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Ürün kartı aksiyon satırı — Hızlı Bakış (bu bileşenin) tetikleyicisinin
 * dar kartlarda GÖRÜNMEZ kalması düzeltmesi.
 *
 * Kök neden: template-parts/components/product-card-spec.php'deki kart, dört aksiyon
 * butonu barındırıyor (İncele/Sepete Ekle/Teklife Ekle/Hızlı Bakış — bu SONUNCUSU bu
 * bileşenin tetikleyicisi). assets/css/components/product-card-spec.css'teki
 * `.dga-product-card__actions` kuralı `flex: none` (sarma/daralma YOK) tanımlıyor ve
 * `.dga-product-card` kartın kendisi `overflow: hidden`. Dar (2 sütunlu mobil ızgara,
 * ör. "Beğenebilecekleriniz") kartlarda 4 butonun toplam genişliği kart genişliğini
 * aşınca, satır sarmadığı için sağdaki butonlar (Teklife Ekle + Hızlı Bakış) kart
 * kenarının DIŞINA taşıp `overflow:hidden` tarafından TAMAMEN KIRPILIYORDU — kullanıcı
 * "hiç gözükmüyor" olarak bildirdi (canlıda 390px genişlikte doğrulandı: yalnızca
 * İncele + Sepete Ekle görünür kalıyordu, Hızlı Bakış DOM'da var ama ekran dışıydı).
 *
 * Doğru düzeltme yeri product-card-spec.css olurdu, ama görev kapsamı o dosyaya
 * KESİNLİKLE DOKUNULMAMASINI şart koşuyor (başka bir ajan/mağaza kartlarını etkiler).
 * Bu yüzden düzeltme burada, bu bileşenin (Hızlı Bakış) tetikleyicisinin görünürlüğünü
 * garanti eden dar kapsamlı bir override olarak yaşıyor. `.dga-product-card` ata
 * seçicisiyle (0,2,0 özgüllük) product-card-spec.css'teki tek sınıflı kuralı (0,1,0)
 * yükleme SIRASINDAN BAĞIMSIZ ezer. Kartın kendisi zaten `display:flex;flex-direction:column`
 * + `margin-top:auto` ile esnek yükseklikli ve ızgara satırları sabit yükseklik
 * ZORLAMIYOR — ekstra satır yalnızca o ızgara satırını büyütür, başka bir kesilme
 * oluşmaz. KALICI DOĞRU ÇÖZÜM İÇİN NOT: bu kural idealde product-card-spec.css'e
 * taşınmalı (bkz. görev raporu).
 *
 * `flex: 1 1 100%` şart — yalnızca `flex-wrap: wrap` eklemek yetmezdi: product-card-spec.css
 * `.dga-product-card__actions`'ı `flex: none` (büzülme YOK) ile tanımlıyor, bu yüzden kendi
 * satırına geçtiğinde bile mevcut genişliğe BÜZÜLMEDEN 4 butonun toplam (max-content)
 * genişliğini korumaya çalışır ve yine taşardı. `flex: 1 1 100%` bunu ezip mevcut satır
 * genişliğinin TAMAMINI kullanmasını sağlar, böylece `flex-wrap: wrap` butonları GERÇEKTEN
 * iki satıra bölebilir.
 * ------------------------------------------------------------------- */
.dga-product-card .dga-product-card__actions {
	flex: 1 1 100%;
	flex-wrap: wrap;
	row-gap: var(--space-1);
}