/*
 * SNN Core — 3B ürün görüntüleyici (modules/3b.php, assets/3b.js).
 * Renkler snn-child tokens.css jetonlarından; sabit hex yok (yedekler açık gövde değerleri).
 * Galeri kutusu: snn-child urun.css 1 (.woocommerce-product-gallery, padding 12, overflow hidden).
 * İki ayrı metin satırı var: `.snn-3b__durum` sahne İÇİNDE (yükleniyor/hata), `.snn-3b__not` kökte,
 * galerinin altında (seçilen modelin 3B'si yok). Karo `.flexy-pills` içinde, kökün dışında durur → [hidden].
 */

.single-product .woocommerce-product-gallery {
	position: relative;
}

/* --- Açma düğmesi: galerinin sol altında --------------------------- */
.snn-3b__ac,
.snn-3b__kapat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--snn-kart-kenar, #E1DFD5);
	border-radius: var(--snn-radius, 4px);
	background: var(--snn-kart, #FFFFFF);
	color: var(--snn-metin, #1A1A18);
	font: 600 15px/1 var(--snn-font, "Archivo Narrow", sans-serif);
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: var(--snn-golge, 0 1px 3px rgba(26, 26, 24, .12));
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.snn-3b__ac:hover,
.snn-3b__ac:focus-visible,
.snn-3b__kapat:hover,
.snn-3b__kapat:focus-visible {
	background: var(--snn-vurgu, #F8A72B);
	border-color: var(--snn-vurgu, #F8A72B);
	color: var(--snn-vurgu-metin, #1A1A18);
	outline: none;
}

.snn-3b__ac:focus-visible,
.snn-3b__kapat:focus-visible {
	box-shadow: 0 0 0 3px rgba(248, 167, 43, .35);
}

.snn-3b__ac {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 4; /* flexy okları ve büyüteç (2-3) üstünde */
	font-size: 14px;
	font-weight: 700;
}

.snn-3b__ac .snn-3b__ikon {
	width: 16px;
	height: 16px;
}

.snn-3b__ac[hidden],
.snn-3b__kapat[hidden] {
	display: none; /* sınıfın display'i UA [hidden] kuralını ezmesin */
}

.snn-3b__ac--bekliyor {
	cursor: progress;
	opacity: .7;
}

.snn-3b__ikon {
	flex: none;
}

/* --- Sahne: galeri fotoğraflarıyla aynı oran (Blocksy product_gallery_ratio 3/4) ---- */
.snn-3b__sahne {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--snn-kart-gorsel, #F3F2EC) var(--snn-3b-poster, none) center / contain no-repeat; /* model inene kadar öne çıkan görsel */
	border-radius: calc(var(--snn-radius-kart, 6px) - 2px);
	overflow: hidden;
}

.snn-3b__sahne[hidden] {
	display: none;
}

.snn-3b__kap,
.snn-3b__kap model-viewer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.snn-3b__kap model-viewer {
	--poster-color: transparent;
	--progress-bar-color: var(--snn-vurgu, #F8A72B);
	--progress-bar-height: 3px;
	background: transparent;
	cursor: grab;
	opacity: 0;
	transition: opacity .25s ease;
}

.snn-3b__kap model-viewer:active {
	cursor: grabbing;
}

.snn-3b__kap model-viewer.snn-3b__model--hazir {
	opacity: 1;
}

.snn-3b__kapat {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

.snn-3b__durum {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--snn-radius, 4px);
	background: rgba(255, 255, 255, .9);
	color: var(--snn-ikincil, #5C5C52);
	font: 500 13px/1.3 var(--snn-font, "Archivo Narrow", sans-serif);
	pointer-events: none;
}

.snn-3b__durum:empty,
.snn-3b__durum[hidden] {
	display: none;
}

.snn-3b__durum--hata {
	color: var(--snn-uyari-metin, #8A2B1F);
	background: var(--snn-uyari-zemin, #FBEAE6);
}

/* Model gelince poster arka planı kalkar (fotoğraf modelin arkasında durmasın). */
.snn-3b__sahne--hazir {
	background-image: none;
}

/* Sürükleme ipucu: model hazır olunca alt ortada, ilk sürüklemede kaybolur. */
.snn-3b__sahne--hazir:not(.snn-3b__sahne--dokunuldu)::after {
	content: attr(data-ipucu);
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 1;
	padding: 5px 10px;
	border-radius: var(--snn-radius, 4px);
	background: rgba(26, 26, 24, .55);
	color: var(--snn-koyu-metin, #ECEBE3);
	font: 500 13px/1.3 var(--snn-font, "Archivo Narrow", sans-serif);
	white-space: nowrap;
	pointer-events: none;
}

/* --- Not: seçilen modelin 3B'si yok (kökte, sahnenin DIŞINDA, galerinin altında) ------------- */
.snn-3b__not {
	display: block;
	margin: 12px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--snn-kenar, #DDDBD0);
	border-radius: var(--snn-radius, 4px);
	background: var(--snn-bolum, #E9E8E0);
	color: var(--snn-ikincil, #5C5C52);
	font: 500 14px/1.4 var(--snn-font, "Archivo Narrow", sans-serif);
	overflow-wrap: break-word; /* 390 px'de uzun model adı taşmasın */
}

.snn-3b__not:empty,
.snn-3b__not[hidden] {
	display: none; /* sınıfın display'i UA [hidden] kuralını ezmesin */
}

/* Karo modunda açma düğmesi gizli; not yine galerinin altında kalır. */
.snn-3b--karo .snn-3b__not {
	margin-top: 8px;
}

/* --- Karo modu: "3D" küçük resim şeridinde, sahne büyük görselin yerinde -------------------- */
.snn-3b--karo .snn-3b__ac,
.flexy > .snn-3b__sahne .snn-3b__kapat {
	display: none; /* şeritteki karo ve küçük resimler geçişi yapar (sahne .flexy içine taşınır) */
}

/* Açıkken büyük görsel ve oklar yalnız GÖRÜNMEZ (display:none değil: Blocksy kaydırıcısı ilk kurulumda
   genişliği ölçer; gizli kurulursa fotoğrafa dönünce 0 px kalıyordu, 2026-09-21). Sahne görselin üstüne
   biner, aynı boyutu alır. */
.flexy.snn-3b-flexy-gizli {
	position: relative;
}

.flexy.snn-3b-flexy-gizli > :not(.snn-3b__sahne) {
	visibility: hidden;
	pointer-events: none;
}

.woocommerce-product-gallery .flexy.snn-3b-flexy-gizli > .snn-3b__sahne {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	z-index: 2;
}

.flexy > .snn-3b__sahne {
	border-radius: calc(var(--snn-radius-kart, 6px) - 2px);
}

/* Büyüteç 3B açıkken anlamsız. */
.woocommerce-product-gallery.snn-3b-acik .woocommerce-product-gallery__trigger {
	display: none;
}

/* Şerit: [3D karosu][ol] aynı yönde (Blocksy --pills-direction: row altta, column yanda). */
.flexy-pills:has(> .snn-3b-karo) {
	display: flex;
	flex-direction: var(--pills-direction, row);
	align-items: flex-start;
	gap: var(--thumbs-spacing, 15px);
}

.flexy-pills:has(> .snn-3b-karo) > ol {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	/* Blocksy ol'a satırda −7,5 px yan kenar boşluğu verir; flex öğesi olarak sağdaki eksi boşluk
	   şeridi 8 px taşırıyordu (telefonda son karo kesiliyordu, 2026-09-21). Sol eksi boşluk kalır:
	   karo → ilk küçük resim arası yine 15 px (7,5 boşluk + li'nin 7,5 iç payı). */
	margin-inline-end: 0;
}

.snn-3b-karo[hidden] {
	display: none; /* karo kök'ün dışında: 3B kullanılamazsa JS ikisini birden gizler */
}

.snn-3b-karo {
	flex: 0 0 auto;
	order: -1; /* DOM'da ol'dan sonra (Blocksy için), görselde başta */
	width: min(var(--snn-kucuk-karo, 88px), 22%);
}

/* Yanda (solda/sağda) şerit dikey sütun: karo tam genişlik, en üstte. Yalnız ≥690 px: Blocksy
   altında şeridi alta (satır) düşürür ama data-thumbs="left" kalır; kural sınırsızken telefonda karo
   tüm satırı kaplayıp küçük resimleri 15 px'e sıkıştırıyordu (2026-09-21). */
@media (min-width: 690px) {
	.woocommerce-product-gallery[data-thumbs="left"] .snn-3b-karo {
		width: 100%;
	}
}

.snn-3b-karo__dugme {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid var(--snn-3b-cerceve, var(--snn-vurgu, #F8A72B));
	border-radius: var(--snn-radius-kart, 6px);
	background: var(--snn-kart, #FFFFFF);
	color: var(--snn-metin, #1A1A18);
	font: 700 13px/1 var(--snn-font, "Archivo Narrow", sans-serif);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.snn-3b-karo__dugme .snn-3b__ikon {
	width: 24px;
	height: 24px;
}

.snn-3b-karo__dugme:hover,
.snn-3b-karo__dugme:focus-visible {
	background: var(--snn-vurgu, #F8A72B);
	color: var(--snn-vurgu-metin, #1A1A18);
	outline: none;
}

.snn-3b-karo--aktif .snn-3b-karo__dugme {
	background: var(--snn-vurgu, #F8A72B);
	color: var(--snn-vurgu-metin, #1A1A18);
}

/* Kütüphane inerken karo da "bekliyor" görünür ve pasiftir (karo modunda .snn-3b__ac gizli olduğu için
   geri bildirim yalnız ona yazılınca görünmüyordu, 2026-09-22). */
.snn-3b-karo__dugme--bekliyor,
.snn-3b-karo__dugme[disabled] {
	cursor: progress;
	opacity: .7;
}

/* 3B açıkken Blocksy'nin "aktif" küçük resmi vurgusuz kalsın. */
.woocommerce-product-gallery.snn-3b-acik .flexy-pills ol li.active {
	opacity: .55;
}

/* --- Küçük ekran (390): düğme köşeye yakın, daha kısa --------------- */
@media (max-width: 599px) {
	.snn-3b__ac {
		left: 12px;
		bottom: 12px;
		min-height: 34px;
		padding: 0 10px;
	}

	.snn-3b__kapat {
		top: 8px;
		right: 8px;
		min-height: 34px;
		padding: 0 10px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snn-3b__ac,
	.snn-3b__kapat,
	.snn-3b__kap model-viewer {
		transition: none;
	}
}