/* Velocity Storefront — ürün VİTRİNİ carousel'i (yatay kayan şerit).
   Masaüstü 6, tablet 3, mobil 2 ürün yan yana. Marka rengi: --vst-accent.
   Tema ürün kartı stili korunur (ul.products li.product şablonu kullanılır);
   burada yalnız yerleşim (flex + scroll-snap) ve ok butonları ele alınır. */

.vst-carousel {
	/* Sütun sayısı: masaüstü inline --vst-cols-desktop'tan gelir; tablet/mobil
	   media query ile EZİLİR (inline değil, stil sayfasında set edilir ki media kazansın). */
	--cols: var(--vst-cols-desktop, 6);
	--gap: 16px;
	position: relative;
	margin: 0;
}

/* Başlık + ok butonları (WoodMart tarzı: başlık solda, oklar sağ üstte). */
.vst-carousel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.vst-carousel-title {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	/* Boyut/renk temadan/başlıktan gelsin; yalnız güvenli varsayılan. */
}

/* Ok butonları kartların SAĞ/SOL yanında, dikey ortada (başlığın yanında değil). */
.vst-carousel-body { position: relative; }
.vst-carousel-nav { display: inline-flex; gap: 8px; flex: none; } /* eski konum — kullanılmıyor, geriye uyum */

.vst-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--vt-text, #1f2937);
	cursor: pointer;
	padding: 0;
	line-height: 0;
	box-shadow: var(--vt-shadow-md, 0 6px 18px rgba(17, 24, 39, .10));
	transition: background-color .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}

/* Kartların iç-kenarına hafif binerek (dışarı taşıp yatay-kaydırma yaratmadan) yanlarda dururlar. */
.vst-carousel-btn[data-dir="prev"] { left: 4px; }
.vst-carousel-btn[data-dir="next"] { right: 4px; }

.vst-carousel-btn:hover {
	background: var(--vt-accent, var(--vst-accent, #e11d48));
	color: #fff;
}

.vst-carousel-btn:focus-visible {
	outline: 2px solid var(--vst-accent, #e11d48);
	outline-offset: 2px;
}

.vst-carousel-btn:disabled {
	opacity: .35;
	cursor: default;
	background: #fff;
	color: var(--vst-accent, #e11d48);
}

/* Yatay kayan şerit — ul.products'ın tema ızgarasını flex'e çevir. */
.vst-carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--gap);
	margin: 0 !important;
	padding: 4px 0 !important;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Kaydırma çubuğunu gizle (oklar affordance sağlar). */
	scrollbar-width: none;
}

.vst-carousel-track::-webkit-scrollbar {
	display: none;
}

/* Bazı temaların ul.products clearfix pseudo-elementleri flex'i bozmasın. */
.vst-carousel-track::before,
.vst-carousel-track::after {
	display: none !important;
	content: none !important;
}

/* Her ürün kartı: sabit genişlik (tema width/float/margin'ini ez). */
.vst-carousel-track > li.product,
.vst-carousel-track > .product {
	flex: 0 0 calc(100% / var(--cols) - var(--gap));
	max-width: calc(100% / var(--cols) - var(--gap));
	width: auto !important;
	min-width: 0; /* flex varsayılan min-width:auto → büyük görsel öğeyi şişirip track'i taşırıyordu */
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
	box-sizing: border-box;
	/* overflow:hidden KALDIRILDI: büyük/uzun görseli kırpıp "yarıda kesiyordu". Görsel zaten
	   aspect-ratio:1/1 + object-fit:contain ile kare kutuya sığar (ne kesme ne şişirme). */
}

/* Kart içi görsel taşmasın. */
.vst-carousel-track > li.product img,
.vst-carousel-track > .product img {
	max-width: 100%;
	height: auto;
}

/* Izgara düzeni (layout="grid"): kayan şerit yerine sabit ızgara — ok yok, snap yok.
   Kart chrome'u (kenarlık/görsel/başlık/fiyat/buton) yine temadan gelir. */
.vst-carousel .vst-carousel-track.is-grid {
	display: grid !important;
	/* Özgüllük (0,3,0) + !important: track `products` sınıfını da taşıdığından, bir `.woocommerce`
	   atası varsa tema ızgara kuralı `.woocommerce ul.products` (0,2,1) sütun/gap'i ezerdi
	   (--cols yerine --vt-cols okurdu → kullanıcının sütun ayarı yok sayılırdı). Bunu engelle. */
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important;
	gap: var(--gap) !important;
	overflow: visible;
	scroll-snap-type: none;
	padding: 4px 0 !important;
}

.vst-carousel-track.is-grid > li.product,
.vst-carousel-track.is-grid > .product {
	flex: none;
	max-width: none;
	scroll-snap-align: none;
}

/* Tablet: 3 sütun. */
@media (max-width: 1024px) {
	.vst-carousel {
		--cols: 3;
	}
}

/* Mobil: 2 sütun. */
@media (max-width: 600px) {
	.vst-carousel {
		--cols: 2;
		--gap: 12px;
	}

	.vst-carousel-btn {
		width: 38px;
		height: 38px;
	}
}

/* Hareket duyarlılığı: yumuşak kaydırmayı kapat. */
@media (prefers-reduced-motion: reduce) {
	.vst-carousel-track {
		scroll-behavior: auto;
	}
}