/*
360° Ürün Görüntüleyici (B15, 05-EK-OZELLIKLER-VE-REACT.md §B15) — assets/css/woocommerce/single-product.css
`.dga-gallery__main` ile GÖRSEL OLARAK TUTARLI (aynı kutu boyutu/kenarlık/radius/gölge dili),
ayrı bir dosyada tutuluyor çünkü yalnızca `dga_urun_360_aktif` açık ürünlerde enqueue edilir.
Token kullanımı zorunlu — ham hex/px yok (01-TASARIM-SISTEMI.md).
*/

/* ---------- Toggle butonu — .dga-btn--outline üzerine ikon/aktif-durum eklentisi ---------- */
.dga-360-toggle {
	margin-top: var(--space-2);
	gap: var(--space-1);
}
.dga-360-toggle__icon {
	flex: none;
}
.dga-360-toggle[aria-pressed="true"] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}

/* ---------- Görüntüleyici kutusu — .dga-gallery__main ile aynı boyut/kenarlık dili ---------- */
.dga-360-viewer {
	position: relative;
	aspect-ratio: 1 / 1;
	margin-top: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y; /* yatay sürükleme JS'e ait; dikey sayfa scroll'u serbest kalır */
	-webkit-user-select: none;
	user-select: none;
}
.dga-360-viewer[hidden] {
	display: none;
}
.dga-360-viewer.is-dragging,
.dga-360-viewer:active {
	cursor: grabbing;
}
.dga-360-viewer:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.dga-360-viewer__frame {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none; /* tıklama/sürükleme her zaman .dga-360-viewer üzerinde ele alınır */
}

.dga-360-viewer__badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	background: var(--color-text);
	color: var(--color-surface);
}

/* ---------- Yükleniyor göstergesi ---------- */
.dga-360-viewer__loading {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	background: color-mix(in srgb, var(--color-surface) 88%, transparent);
	color: var(--color-text-muted);
	font-family: var(--font-sans);
	font-size: 13px;
	text-align: center;
}
.dga-360-viewer__loading[hidden] {
	display: none;
}
.dga-360-viewer__spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: var(--radius-icon);
	animation: dga-360-spin 0.8s linear infinite;
}
@keyframes dga-360-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	/* Tamamen durdurmak yerine yavaşlatılır — dönen gösterge yükleme durumunu iletmeye devam eder
	   (01-TASARIM-SISTEMI.md §10 "Hareket" kuralı: keyframe animasyonları azaltılır). */
	.dga-360-viewer__spinner {
		animation-duration: 2.4s;
	}
}

/* ---------- "Sürükleyerek döndür" ipucu ---------- */
.dga-360-viewer__hint {
	position: absolute;
	left: 50%;
	bottom: var(--space-2);
	z-index: 2;
	transform: translateX(-50%);
	margin: 0;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-text) 78%, transparent);
	color: var(--color-surface);
	font-family: var(--font-sans);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--transition);
}
.dga-360-viewer__hint.is-hidden {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.dga-360-viewer__hint {
		transition: none;
	}
}

@media (max-width: 480px) {
	.dga-360-viewer__hint {
		font-size: 11px;
		white-space: normal;
		max-width: 80%;
		text-align: center;
	}
}