/* =========================================================
   Vitrin Ürün Galerisi
   Kırılımlar: masaüstü ≥1025px · tablet 769–1024px · telefon ≤768px
   ========================================================= */

.vug {
	--vug-r: var(--vug-ratio-d, 1 / 1);
	--vug-gap: 12px;
	--vug-thumb-w: 84px;
	--vug-ink: #2b2118;
	--vug-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	width: 100%;
	min-width: 0;
}

.vug *,
.vug *::before,
.vug *::after {
	box-sizing: border-box;
}

/* ---------- Sahne ---------- */

.vug__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--vug-radius, 14px);
	background: var(--vug-bg, #f5f1eb);
	isolation: isolate;
}

.vug__stage:has(.vug__track:focus-visible) {
	outline: 2px solid var(--vug-accent);
	outline-offset: 3px;
}

.vug__track {
	position: relative;
	display: flex;
	/* Kesirli piksel genişliklerinde komşu slaytın kenarı görünmesin. */
	gap: 2px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	outline: none;
}

.vug__track::-webkit-scrollbar {
	display: none;
}

.vug .vug__slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--vug-r);
	overflow: hidden;
	background: var(--vug-bg, #f5f1eb);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	isolation: isolate;
}

.vug--lightbox .vug__slide {
	cursor: zoom-in;
}

.vug .vug__slide picture,
.vug .vug__thumb picture {
	display: contents;
}

.vug .vug__slide img,
.vug .vug__thumb img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	object-position: 50% 50%;
	-webkit-user-drag: none;
	user-select: none;
}

.vug .vug__slide img {
	transform-origin: var(--vug-ox, 50%) var(--vug-oy, 50%);
	transition: transform .45s var(--vug-ease);
	will-change: transform;
}

/* Bulanık dolgu (yalnızca "Görselin bulanık hâli" seçiliyse basılır) */
.vug__backdrop {
	position: absolute;
	inset: -24px;
	z-index: -1;
	display: none;
	background-position: center;
	background-size: cover;
	filter: blur(28px) saturate(1.15);
	opacity: .85;
	transform: scale(1.1);
}

/* ---------- Sığdırma: masaüstü + tablet ---------- */
@media (min-width: 769px) {
	.vug .vug-fit-d-cover img {
		object-fit: cover;
		object-position: var(--vug-focus, 50% 50%);
	}

	.vug .vug-fit-d-contain > .vug__backdrop {
		display: block;
	}

	.vug--blend .vug-fit-d-contain img {
		mix-blend-mode: multiply;
	}
}

/* ---------- Sığdırma: telefon ---------- */
@media (max-width: 768px) {
	.vug {
		--vug-r: var(--vug-ratio-m, var(--vug-ratio-d, 1 / 1));
	}

	.vug .vug-fit-m-cover img {
		object-fit: cover;
		object-position: var(--vug-focus, 50% 50%);
	}

	.vug .vug-fit-m-contain > .vug__backdrop {
		display: block;
	}

	.vug--blend .vug-fit-m-contain img {
		mix-blend-mode: multiply;
	}
}

/* ---------- Düğmeler (tema düğme stillerini sıfırla) ---------- */

.vug .vug__btn {
	position: absolute;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 6px 20px rgba(43, 33, 24, .14), 0 1px 3px rgba(43, 33, 24, .08);
	color: var(--vug-ink);
	font-size: 0;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: opacity .25s ease, transform .25s var(--vug-ease), background-color .2s ease;
}

.vug .vug__btn:hover {
	background: #fff;
	color: var(--vug-ink);
}

.vug .vug__btn:focus-visible {
	outline: 2px solid var(--vug-accent);
	outline-offset: 2px;
}

.vug .vug__btn svg {
	display: block;
}

.vug .vug__arrow {
	top: 50%;
	margin-top: -22px;
	opacity: 0;
	pointer-events: none;
}

.vug .vug__arrow--prev {
	left: 16px;
	transform: translateX(-8px);
}

.vug .vug__arrow--next {
	right: 16px;
	transform: translateX(8px);
}

@media (hover: hover) and (pointer: fine) {
	.vug__stage:hover .vug__arrow,
	.vug .vug__arrow:focus-visible {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

.vug .vug__expand {
	right: 14px;
	bottom: 14px;
	width: 40px;
	height: 40px;
	opacity: .9;
}

.vug .vug__expand:hover {
	opacity: 1;
	transform: scale(1.06);
}

/* WoodMart etiketleri sahnenin üstünde kalsın */
.vug__stage > .product-labels {
	z-index: 4;
	pointer-events: none;
}

/* ---------- Nokta göstergesi / sayaç (yalnızca telefon) ---------- */

.vug__dots,
.vug__counter {
	position: absolute;
	bottom: 14px;
	left: 50%;
	z-index: 4;
	display: none;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 2px 10px rgba(43, 33, 24, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.vug__dots {
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
}

.vug .vug__dot {
	display: block;
	width: 6px;
	height: 6px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(43, 33, 24, .28);
	box-shadow: none;
	cursor: pointer;
	transition: width .3s var(--vug-ease), background-color .3s ease;
}

.vug .vug__dot.is-active {
	width: 18px;
	background: var(--vug-accent);
}

.vug__counter {
	padding: 5px 12px;
	color: var(--vug-ink);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

/* ---------- Küçük görseller ---------- */

.vug__thumbs {
	margin-top: var(--vug-gap);
}

.vug__thumbs-list {
	position: relative;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.vug__thumbs-list::-webkit-scrollbar {
	display: none;
}

.vug .vug__thumb {
	position: relative;
	flex: 0 0 calc((100% - 40px) / 5);
	aspect-ratio: var(--vug-r);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: calc(var(--vug-radius, 14px) * .6);
	background: var(--vug-bg, #f5f1eb);
	box-shadow: none;
	opacity: .55;
	cursor: pointer;
	scroll-snap-align: start;
	isolation: isolate;
	transition: opacity .25s ease;
}

.vug .vug__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(43, 33, 24, .07);
	transition: box-shadow .25s ease;
	pointer-events: none;
}

.vug .vug__thumb:hover {
	opacity: .9;
	background: var(--vug-bg, #f5f1eb);
}

.vug .vug__thumb.is-active {
	opacity: 1;
}

.vug .vug__thumb.is-active::after {
	box-shadow: inset 0 0 0 2px var(--vug-accent);
}

.vug .vug__thumb:focus-visible {
	outline: 2px solid var(--vug-accent);
	outline-offset: 2px;
}

/* ---------- Masaüstü ---------- */
@media (min-width: 1025px) {
	.vug--thumbs-left.vug--multi {
		display: grid;
		grid-template-columns: var(--vug-thumb-w) minmax(0, 1fr);
		gap: var(--vug-gap);
	}

	.vug--thumbs-left .vug__stage {
		grid-column: 2;
		grid-row: 1;
	}

	/* Küçük görsel sütunu sahnenin yüksekliğini aşmaz; fazlası kendi içinde kayar. */
	.vug--thumbs-left .vug__thumbs {
		position: relative;
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.vug--thumbs-left .vug__thumbs-list {
		position: absolute;
		inset: 0;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: y proximity;
	}

	.vug--thumbs-left .vug__thumb {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ---------- Tablet ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.vug {
		--vug-gap: 10px;
	}

	.vug .vug__thumb {
		flex-basis: calc((100% - 40px) / 5);
	}
}

/* ---------- Telefon ---------- */
@media (max-width: 768px) {
	.vug {
		--vug-gap: 8px;
	}

	.vug .vug__arrow {
		display: none;
	}

	.vug .vug__expand {
		right: 12px;
		bottom: 12px;
		width: 38px;
		height: 38px;
	}

	.vug--mnav-dots .vug__dots {
		display: flex;
	}

	.vug--mnav-dots .vug__counter {
		display: block;
	}

	.vug--mnav-dots .vug__thumbs {
		display: none;
	}

	.vug .vug__thumbs-list {
		gap: 8px;
	}

	.vug .vug__thumb {
		flex-basis: calc((100% - 32px) / 4.5);
	}
}

/* ---------- Üzerine gelince yakınlaştırma (yalnızca fare) ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
	.vug--zoom .vug__slide {
		cursor: crosshair;
	}

	.vug--zoom .vug__slide.is-zooming img {
		transform: scale(2);
		transition: transform .35s var(--vug-ease);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vug *,
	.vug-lb * {
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   Tam ekran görüntüleyici
   ========================================================= */

html.vug-lock,
html.vug-lock body {
	overflow: hidden !important;
}

.vug-lb {
	--vug-ease: cubic-bezier(.2, .7, .2, 1);
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: rgba(22, 18, 14, .96);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility 0s linear .28s;
	font-family: inherit;
}

.vug-lb.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .28s ease;
}

.vug-lb *,
.vug-lb *::before,
.vug-lb *::after {
	box-sizing: border-box;
}

.vug-lb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	padding: max(12px, env(safe-area-inset-top)) 16px 12px;
}

.vug-lb__count {
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	opacity: .8;
}

.vug-lb .vug-lb__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	box-shadow: none;
	color: #fff;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}

.vug-lb .vug-lb__btn:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.vug-lb .vug-lb__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vug-lb__track {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.vug-lb__track::-webkit-scrollbar {
	display: none;
}

.vug-lb__slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 100%;
	min-width: 0;
	padding: 0 clamp(8px, 6vw, 96px) max(20px, env(safe-area-inset-bottom));
	overflow: hidden;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.vug-lb__slide img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	border-radius: 6px;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.vug-lb__slide.is-zoomed {
	display: block;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.vug-lb__slide.is-zoomed::-webkit-scrollbar {
	display: none;
}

.vug-lb__slide.is-zoomed img {
	max-width: none;
	max-height: none;
	margin: auto;
	border-radius: 0;
	cursor: zoom-out;
}

.vug-lb .vug-lb__nav {
	position: absolute;
	top: 50%;
	margin-top: -23px;
}

.vug-lb .vug-lb__prev {
	left: 20px;
}

.vug-lb .vug-lb__next {
	right: 20px;
}

@media (hover: none), (max-width: 768px) {
	.vug-lb .vug-lb__nav {
		display: none;
	}
}