/**
 * Sutore Product Page — sayfa yerleşimi.
 * page-staging.php içindeki inline <style> bloğundan taşındı (prod değerleri).
 *
 * İskelet: .sutore-product-wrapper
 *   ├── .product-images            → [sutore_gallery]
 *   ├── .sutore-product-info       → [sutore_product_buybox]
 *   └── .sutore-product-description→ [sutore_product_description]
 *
 * NOT: Galeri iç kuralları (.sutore-page-gallery*) sutore-gallery/assets/css/gallery.css'in
 * sahipliğinde — burada tekrar etme, iki eklenti çakışır.
 * .product-images bilerek .sutore-product-wrapper altına scope'landı: Flatsome da
 * single-product sayfalarında .product-images kullanıyor; scope'suz kural oraya sızar.
 */

/* ── Legacy blok kabuğunun nötrlenmesi ────────────────────────────────────────
   Gerçek PDP'de wrapper, eski sayfanın UX-blok kabuğu İÇİNDE render olur
   (blok 2979 → row.sp-twobox > .col). Kabuk kendi çerçevesini taşıyor
   (tema style.css: .sp-twobox{max-width:1490;padding:0 65px} + col 15px) →
   wrapper'ın kendi 65px'iyle üst üste binip çift boşluk açıyordu. Ayrıca
   eski sayfanın üst çizgisi (style.css:194 border-top) ve
   içeriği susturulan 2. satırın ([sutorecontent]/[sutoremeta]) boş kabuğu +
   dip hairline'ı kalıyordu. Yeni kompozisyon sahnedeyken (:has guard —
   rollback'te bu kurallar hiç değmez) kabuk tamamen şeffaflaşır:
   çerçevenin TEK sahibi wrapper'dır. */
.sp-twobox:has(.sutore-product-wrapper) {
	max-width: none !important;
	padding: 0;
}
.sp-twobox:has(.sutore-product-wrapper) > .col {
	padding: 0;
}
/* Header altı çizgi: eski sayfanın border-top kuralı temadan (style.css) kaynağında
   silindi — burada nötrleyici gerekmez. */
body:has(.sutore-product-wrapper) .custom-product-page .row.prdct-middle {
	display: none; /* boş legacy satır + dip hairline */
}

/* Galeri açılış disiplini: ölçüsü runtime yazılan kare (eager kare) ölçü
   hazır olana dek gizli gelir (sunucu data-su-bekle basar), galeri-sahne.js son
   boyutunda açar (su-hazir). Kullanıcı küçülme flaşı görmez. JS kapalıysa
   noscript kuralı (wp_head) anında açar; JS var ama script gelmediyse
   (engellendi/404) aşağıdaki animasyon failsafe'i 2.5s'te açar — kare hiçbir
   senaryoda gizli kalamaz. */
img[data-su-bekle] {
	opacity: 0;
	animation: su-reveal 0.18s ease 2.5s forwards;
}

@keyframes su-reveal {
	to { opacity: 1; }
}

img.su-hazir {
	opacity: 1;
	transition: opacity 0.18s ease;
}

/* Galeri optik normalizasyon (mobil slayt + masaüstü mozaik hücresi):
   galeri-sahne.js her karede ürünü sahnesine göre ölçekler (--su-olcek /
   --su-kaydir, veri img data-su-* attribute'larında). Taşan beyaz kanvas
   kenarını gallery.css'in baz kuralı kırpar (.sutore-page-gallery-item
   overflow:hidden — burada TEKRAR ETME); ürün pikseli JS guard'larıyla
   korunur. JS/veri yoksa var() varsayılanları = ham görünüm. */
.sutore-product-wrapper .product-images .sutore-page-gallery-item img[data-su-sahne] {
	transform: translateY(var(--su-kaydir, 0px)) scale(var(--su-olcek, 1));
	transform-origin: 50% 50%;
}

/* Masaüstü sahne: galeri ~%70, panel %30, arada 48px hava — panel metni
   görselden net kopar, 65px dış kenarlar sabit. Üst 18: içerik header'ın
   hemen altında başlar. Alt 0: reco kendi nefesini verir, çift boşluk olmaz. */
.sutore-product-wrapper {
	display: flex;
	max-width: 1490px;
	margin: 0 auto;
	padding: 30px 65px 0;
	/* Yatay 48 (galeri↔panel), dikey 0: yığılan tam-genişlik bölümler (breadcrumb,
	   açıklama, reco) arası boşluk MARGIN ile ölçülür — tek `gap` breadcrumb'ın
	   etrafında çift 48 üretiyordu. */
	column-gap: 48px;
	row-gap: 0;
	flex-wrap: wrap;
}

.sutore-product-wrapper .product-images {
	flex: 0 0 calc(70% - 48px);
}

.sutore-product-wrapper .sutore-product-info {
	flex: 0 0 30%;
}

.sutore-product-wrapper .sutore-product-description {
	flex: 0 0 100%;
}

/* Masaüstü: kırıntı galerinin ALTINA, açıklamanın ÜSTÜNE iner. Sıra ile taşınır —
   markup değişmez, mobilde (order yok) fotoğrafın üstünde kalır. */
@media (min-width: 769px) {
	.sutore-product-wrapper .product-images { order: 1; }
	.sutore-product-wrapper .sutore-product-info { order: 2; }
	.sutore-product-wrapper .sutore-pp-breadcrumbs-row {
		order: 3;
		/* Galeri altı 36, açıklama üstü 40. Hero ortalama sonrası iç boşluk yok. */
		margin: 36px 0 40px;
	}
	.sutore-product-wrapper .sutore-product-description { order: 4; }
	.sutore-product-wrapper .sutore-product-recommendations {
		order: 5;
		/* Açıklama → reco: 46 + reco:first-child 14 = 60 — büyük bölüm geçişi. */
		margin-top: 46px;
		/* Sayfa dibi: footer bölümünün kendi üst nefesi var → reco dibinde ayrı
		   boşluğa gerek yok; ayrımı footer'ın iç boşluğu verir. */
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.sutore-product-wrapper {
		flex-direction: column;
		width: 100%;
		padding: 0;
	}

	/* Mobil fold kompozisyonu: ilk ekranda fotoğraf + marka + isim + fiyat birlikte.
	   Wrapper gap mobilde 16 (30 iki kez tekrarlanıp fold'u şişiriyordu);
	   buybox→açıklama 44 dengesi alt padding ile korunur (16+28=44). */
	.sutore-product-wrapper {
		gap: 16px;
	}

	/* Galeri sahnesi: tahmin değil bütçe — header 73 + kırıntı 30 + 2×gap 32 +
	   kimlik bloğu (marka+isim+fiyat) 103 + nefesler ≈ 268px; kalan fotoğrafın.
	   svh bilinçli tercih: dvh iOS çubuğu kaybolunca sahneyi anlık büyütür (kayma!),
	   svh en küçük durumda bile sığmayı garanti eder, hiçbir şey zıplamaz.
	   3 sınıflı seçici gallery.css'in tüm height kurallarını zaten yener. */
	.sutore-product-wrapper .product-images .sutore-page-gallery {
		height: calc(100vh - 268px); /* svh bilmeyen eski tarayıcı */
		height: calc(100svh - 268px);
		min-height: 340px;
		max-height: 620px;
	}

	/* Mobil yatay gutter 20px — header ve tüm sayfalarla tutarlı standart.
	   Alt 28: buybox→açıklama = gap 16 + 28 = 44 (iki büyük geçiş de 44). */
	.sutore-product-wrapper .sutore-product-info {
		padding: 16px 20px 28px;
	}

	/* Üst padding 0: buybox→açıklama geçişi sıkı */
	.sutore-product-wrapper .sutore-product-description {
		padding: 0 20px;
	}
}