/* Sınabeli Ürün Galerisi v2.4.1 — Zohi */

.snbg-galeri {
	--snbg-hedef: 260px;
	--snbg-sutun: 3;
	--snbg-bosluk: 8px;
	--snbg-kose: 6px;
	--snbg-fit: cover;
	--snbg-bg: #f6f4f1;
	width: 100%;
	margin: 0 0 24px;
}

.snbg-galeri .snbg-oge {
	margin: 0;
	padding: 0;
	background: var(--snbg-bg);
	border-radius: var(--snbg-kose);
	overflow: hidden;
	position: relative;
}

.snbg-galeri .snbg-bag {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.snbg-galeri img,
.snbg-galeri .snbg-video,
.snbg-galeri .snbg-gomme {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--snbg-fit);
	object-position: center;
	border: 0;
	margin: 0;
	transition: transform 0.35s ease;
}

.snbg-galeri .snbg-bag:hover img {
	transform: scale(1.03);
}

.snbg-galeri .snbg-oge-mp4,
.snbg-galeri .snbg-oge-gomme {
	background: #000;
}

/* ---------------------------------------------------------------
 * Düzen: büyük görsel + alt bant (tek ekrana sığar)
 * ------------------------------------------------------------ */

.snbg-duzen-bant {
	--snbg-ekran: max( var(--snbg-asgari, 380px), calc( 100svh - var(--snbg-ust, 190px) ) );
	display: flex;
	flex-direction: column;
	gap: var(--snbg-bosluk);
}

.snbg-duzen-bant .snbg-sahne {
	position: relative;
	height: calc( var(--snbg-ekran) - var(--snbg-bant, 96px) - var(--snbg-bosluk) );
	background: var(--snbg-bg);
	border-radius: var(--snbg-kose);
	overflow: hidden;
}

.snbg-duzen-bant .snbg-sahne .snbg-oge {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	border-radius: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.snbg-duzen-bant .snbg-sahne .snbg-oge.snbg-aktif {
	opacity: 1;
	visibility: visible;
}

/* Sahnedeki görsel asla kırpılmaz ve asla taşmaz */
.snbg-duzen-bant .snbg-sahne img,
.snbg-duzen-bant .snbg-sahne .snbg-video,
.snbg-duzen-bant .snbg-sahne .snbg-gomme {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.snbg-duzen-bant .snbg-sahne .snbg-bag:hover img {
	transform: none;
}

/* Sahne üzerindeki oklar */
.snbg-duzen-bant .snbg-ok,
.snbg-duzen-bant .snbg-buyutec {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #2a2724;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(3px);
	transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.snbg-duzen-bant .snbg-ok:hover,
.snbg-duzen-bant .snbg-buyutec:hover {
	background: #fff;
}

.snbg-duzen-bant .snbg-ok {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	opacity: 0;
}

.snbg-duzen-bant .snbg-sahne:hover .snbg-ok,
.snbg-duzen-bant .snbg-ok:focus-visible {
	opacity: 1;
}

.snbg-duzen-bant .snbg-ok-onceki { left: 14px; }
.snbg-duzen-bant .snbg-ok-sonraki { right: 14px; }

.snbg-duzen-bant .snbg-buyutec {
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 8px;
}

@media (max-width: 767px) {
	.snbg-duzen-bant .snbg-ok {
		opacity: 1;
		width: 38px;
		height: 38px;
	}

	.snbg-duzen-bant .snbg-ok-onceki { left: 8px; }
	.snbg-duzen-bant .snbg-ok-sonraki { right: 8px; }
}

/* Bant kaydırma çubuğu */
.snbg-duzen-bant .snbg-bant::-webkit-scrollbar {
	height: 5px;
}

.snbg-duzen-bant .snbg-bant::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.22);
	border-radius: 3px;
}

.snbg-duzen-bant .snbg-bant::-webkit-scrollbar-track {
	background: transparent;
}

/* Varyasyon seçimiyle gelen, galeride bulunmayan görsel */
.snbg-duzen-bant .snbg-oge-varyant {
	position: absolute;
	inset: 0;
}

.snbg-duzen-bant .snbg-bant {
	display: flex;
	gap: var(--snbg-bosluk);
	height: var(--snbg-bant, 96px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scroll-behavior: smooth;
	padding: 0;
	margin: 0;
}

.snbg-duzen-bant .snbg-kucuk {
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	background: var(--snbg-bg);
	border-radius: calc( var(--snbg-kose) * 0.8 );
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity 0.2s ease, outline-color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b6b6b;
}

.snbg-duzen-bant .snbg-kucuk img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.snbg-duzen-bant .snbg-kucuk:hover,
.snbg-duzen-bant .snbg-kucuk:focus-visible {
	opacity: 1;
}

.snbg-duzen-bant .snbg-kucuk.snbg-aktif {
	opacity: 1;
	outline-color: currentColor;
}

.snbg-duzen-bant .snbg-video-rozet {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #16130f;
	color: #fff;
}

/* ---------------------------------------------------------------
 * Düzen: büyük görsel + SOL dikey bant
 * ------------------------------------------------------------ */

@media (min-width: 768px) {
	.snbg-galeri.snbg-duzen-sol {
		flex-direction: row;
		align-items: flex-start;
	}

	.snbg-galeri.snbg-duzen-sol .snbg-bant {
		order: 1;
		flex: 0 0 var(--snbg-bant-g, 96px);
		width: var(--snbg-bant-g, 96px);
		height: var(--snbg-ekran);
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.snbg-galeri.snbg-duzen-sol .snbg-kucuk {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
	}

	.snbg-galeri.snbg-duzen-sol .snbg-sahne {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		height: var(--snbg-ekran);
	}

	.snbg-galeri.snbg-duzen-sol .snbg-bant::-webkit-scrollbar {
		width: 5px;
		height: auto;
	}
}

@media (max-width: 767px) {
	.snbg-duzen-bant {
		--snbg-ekran: auto;
	}

	.snbg-duzen-bant .snbg-sahne {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.snbg-duzen-bant .snbg-bant {
		height: 72px;
	}
}

/* ---------------------------------------------------------------
 * Düzen: hizalı satırlar
 * ------------------------------------------------------------ */

.snbg-duzen-hizali {
	display: flex;
	flex-wrap: wrap;
	gap: var(--snbg-bosluk);
}

.snbg-duzen-hizali .snbg-oge {
	height: var(--snbg-hedef);
	flex-shrink: 1;
	min-width: 0;
}

/* Son satır sola yaslansın, aşırı büyümesin */
.snbg-duzen-hizali::after {
	content: "";
	flex-grow: 999999;
	min-width: 0;
	height: 0;
}

.snbg-duzen-hizali.snbg-ilk-buyuk .snbg-oge:first-child {
	height: calc( var(--snbg-hedef) * 2 + var(--snbg-bosluk) );
	flex-basis: 100%;
	flex-grow: 1;
}

/* ---------------------------------------------------------------
 * Düzen: mozaik (kırpma yok)
 * ------------------------------------------------------------ */

.snbg-duzen-mozaik {
	column-count: var(--snbg-sutun);
	column-gap: var(--snbg-bosluk);
}

.snbg-duzen-mozaik .snbg-oge {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: var(--snbg-bosluk);
	display: block;
	width: 100%;
	height: auto;
	flex: none !important;
}

.snbg-duzen-mozaik img {
	height: auto;
	object-fit: fill;
}

.snbg-duzen-mozaik .snbg-oge-mp4,
.snbg-duzen-mozaik .snbg-oge-gomme {
	aspect-ratio: var(--snbg-oran, 16/9);
}

/* ---------------------------------------------------------------
 * Düzen: eşit kare ızgara
 * ------------------------------------------------------------ */

.snbg-duzen-kare {
	display: grid;
	grid-template-columns: repeat(var(--snbg-sutun), minmax(0, 1fr));
	gap: var(--snbg-bosluk);
}

.snbg-duzen-kare .snbg-oge {
	aspect-ratio: 1 / 1;
	flex: none !important;
	height: auto;
}

.snbg-duzen-kare.snbg-ilk-buyuk .snbg-oge:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* ---------------------------------------------------------------
 * Mobil
 * ------------------------------------------------------------ */

@media (max-width: 767px) {
	.snbg-duzen-hizali .snbg-oge {
		height: calc( var(--snbg-hedef) * 0.75 );
	}

	.snbg-duzen-mozaik {
		column-count: 2;
	}

	.snbg-duzen-kare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.snbg-duzen-hizali .snbg-oge {
		flex-basis: 100% !important;
		height: auto;
		aspect-ratio: var(--snbg-oran, 1);
	}

	.snbg-duzen-hizali.snbg-ilk-buyuk .snbg-oge:first-child {
		height: auto;
	}
}

/* ---------------------------------------------------------------
 * Lightbox
 * ------------------------------------------------------------ */

.snbg-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(18, 16, 15, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

.snbg-lb.acik {
	opacity: 1;
	visibility: visible;
}

.snbg-lb-govde {
	max-width: 86vw;
	max-height: 86vh;
	display: block;
}

.snbg-lb-tek .snbg-lb-onceki,
.snbg-lb-tek .snbg-lb-sonraki {
	display: none;
}

.snbg-lb-govde img {
	max-width: 86vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 4px;
}

.snbg-lb-dugme {
	position: absolute;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	padding: 0;
}

.snbg-lb-dugme:hover {
	background: rgba(255, 255, 255, 0.26);
}

.snbg-lb-kapat {
	top: 20px;
	right: 20px;
}

.snbg-lb-onceki {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.snbg-lb-sonraki {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.snbg-lb-sayac {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	letter-spacing: 0.04em;
}

@media (max-width: 600px) {
	.snbg-lb-onceki { left: 8px; }
	.snbg-lb-sonraki { right: 8px; }
	.snbg-lb-dugme { width: 40px; height: 40px; }
}