/*
 * Sukod ortak galeri / lightbox (V2.1) · SonayKit.openGallery
 * Katman ölçeği (merkezi): site başlığı 100 · gemi popup'ı (.modal) 400 · bildirim 900 · çerez paneli 2147483000 ·
 * galeri lightbox 2147483600 (en üst). Lightbox açıkken diğer gövde öğeleri inert yapılır.
 * Seçiciler bileşene özgüdür (.sk-lb); sitedeki img/a/slider stilleri değiştirilmez.
 */
.sk-lb {
	--sk-lb-bg: rgba(11, 20, 38, .96);
	--sk-lb-accent: #1687E8;
	--sk-lb-top: 64px;
	--sk-lb-bottom: 112px;
	--sk-lb-side: 80px;
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: grid;
	grid-template-rows: var(--sk-lb-top) minmax(0, 1fr) var(--sk-lb-bottom);
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
	background: var(--sk-lb-bg);
	color: #fff;
	font-family: inherit;
	overscroll-behavior: contain;
}
.sk-lb[hidden] { display: none !important; }
.sk-lb *, .sk-lb *::before, .sk-lb *::after { box-sizing: border-box; }
.sk-lb.is-open { animation: sk-lb-fade 200ms ease-out; }
@keyframes sk-lb-fade { from { opacity: 0; } to { opacity: 1; } }

.sk-lb__top { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 84px; }
.sk-lb__title { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 24px; font-weight: 600; }
.sk-lb__count { font-size: 14px; line-height: 20px; opacity: .85; }
.sk-lb__close { position: absolute; top: 10px; right: 20px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.sk-lb__close .ic { width: 22px; height: 22px; }

.sk-lb__stage { position: relative; display: grid; grid-template-columns: var(--sk-lb-side) minmax(0, 1fr) var(--sk-lb-side); align-items: center; min-height: 0; }
.sk-lb__fig { grid-column: 2; position: relative; display: grid; place-items: center; height: 100%; min-height: 0; margin: 0; }
.sk-lb__img { display: block; width: auto; height: auto; max-width: min(1280px, calc(100vw - 2 * var(--sk-lb-side))); max-height: calc(100dvh - var(--sk-lb-top) - var(--sk-lb-bottom) - 32px); object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity 220ms ease-out; }
.sk-lb__img.is-in { opacity: 1; }
.sk-lb__img.is-contain { background: #fff; }
.sk-lb__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 900px; padding: 6px 12px; text-align: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .9); }
.sk-lb__cap[hidden] { display: none; }
.sk-lb__spin { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sk-lb__spin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sk-lb__spin::before { content: ""; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: sk-lb-spin 900ms linear infinite; }
.sk-lb:not(.is-loading) .sk-lb__spin { display: none; }
@keyframes sk-lb-spin { to { transform: rotate(360deg); } }
.sk-lb__err { display: grid; gap: 12px; justify-items: center; padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, .08); text-align: center; }
.sk-lb__err[hidden] { display: none; }
.sk-lb__err p { margin: 0; font-size: 16px; }
.sk-lb__retry { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--sk-lb-accent); color: #fff; font-weight: 700; cursor: pointer; }

.sk-lb__nav { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background 160ms; }
.sk-lb__nav:hover, .sk-lb__close:hover { background: rgba(255, 255, 255, .26); }
.sk-lb__nav .ic { width: 24px; height: 24px; }
.sk-lb__nav[hidden] { display: none !important; }
.sk-lb__nav--prev { grid-column: 1; justify-self: start; margin-left: 24px; }
.sk-lb__nav--next { grid-column: 3; justify-self: end; margin-right: 24px; }
.sk-lb__nav:focus-visible, .sk-lb__close:focus-visible, .sk-lb__thumbs button:focus-visible, .sk-lb__retry:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.sk-lb__bottom { display: grid; align-content: center; gap: 8px; min-width: 0; padding: 0 16px 10px; }
.sk-lb__mnav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sk-lb__mnav .sk-lb__nav--m { display: none; }
.sk-lb__counter { margin: 0; font-size: 14px; line-height: 20px; text-align: center; color: rgba(255, 255, 255, .9); }
.sk-lb__thumbs { display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; }
.sk-lb__thumbs[hidden] { display: none; }
.sk-lb__thumbs button { flex: none; width: 80px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .1); cursor: pointer; opacity: .65; transition: opacity 160ms, border-color 160ms; }
.sk-lb__thumbs button:hover { opacity: 1; }
.sk-lb__thumbs button[aria-current="true"] { border-color: var(--sk-lb-accent); opacity: 1; }
.sk-lb__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-lb.is-single .sk-lb__bottom { align-content: center; }

/* Mobil ≤767: yan oklar görseli örtmez; alt kontrol sırasında (44 px) sayaçla birlikte */
@media (max-width: 767px) {
	.sk-lb { --sk-lb-top: 56px; --sk-lb-side: 12px; --sk-lb-bottom: 120px; }
	.sk-lb__top { justify-content: flex-start; padding: 0 64px 0 12px; }
	.sk-lb__close { right: 12px; top: 6px; }
	.sk-lb__stage { grid-template-columns: 12px minmax(0, 1fr) 12px; }
	.sk-lb__nav--prev, .sk-lb__nav--next { display: none; }
	.sk-lb__mnav .sk-lb__nav--m { display: grid; width: 44px; height: 44px; }
	.sk-lb__img { max-width: calc(100vw - 24px); }
	.sk-lb__sep, .sk-lb__count { display: none; }
}
/* Kısa / yatay ekran (yükseklik ≤500): önizleme şeridi gizlenir; araç alanı 44, alt alan 32 */
@media (max-height: 500px) {
	.sk-lb { --sk-lb-top: 44px; --sk-lb-bottom: 32px; }
	.sk-lb__thumbs { display: none !important; }
	.sk-lb__close { top: 0; }
	.sk-lb__bottom { padding-bottom: 0; }
	.sk-lb__mnav .sk-lb__nav--m { display: none; }
	.sk-lb__nav--prev, .sk-lb__nav--next { display: grid; }
	.sk-lb__stage { grid-template-columns: 64px minmax(0, 1fr) 64px; }
	.sk-lb__nav--prev { margin-left: 8px; }
	.sk-lb__nav--next { margin-right: 8px; }
	.sk-lb__img { max-width: calc(100vw - 128px); }
}
@media (prefers-reduced-motion: reduce) {
	.sk-lb.is-open { animation: none; }
	.sk-lb__img { transition: none; opacity: 1; }
	.sk-lb__spin::before { animation-duration: 2s; }
}