/*
 * ÇandName CSS modülü: Görsel penceresi (lightbox)
 * Yazı içi görsele dokununca tam ekran açılır; yakınlaştırılabilir (dokun / sıkıştır), oklarla gezilir.
 * İşaretleme: inc/lightbox.php. Betik: assets/js/theme.js (initLightbox).
 * Bu dosya diğer CSS dosyalarından bağımsızdır; hata yalnızca bu alanı etkiler.
 * Yükleme sırası: inc/assets.php
 */

/* Pictures that can be opened show a zoom cursor (theme.js marks them with data-lb). */
img[data-lb] { cursor: zoom-in; }

.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(8, 12, 10, 0.94); display: flex; }
.lightbox[hidden] { display: none; }
body.has-lightbox-open { overflow: hidden; }
.lightbox-stage { flex: 1; min-width: 0; display: flex; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
/* Fit: whole picture, centred. margin:auto keeps it centred without cutting the left/top edge when it is bigger than the screen (zoomed). */
.lightbox-img { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.lightbox-stage.is-loading .lightbox-img { opacity: 0.6; }
/* Zoomed: 2.4x the screen width (readable text), scroll to move around. */
.lightbox-stage.is-zoomed .lightbox-img { max-width: none; max-height: none; width: 240vw; cursor: zoom-out; }
@media (min-width: 960px) { .lightbox-stage.is-zoomed .lightbox-img { width: max(160vw, 1600px); } }

.lightbox-btn {
	position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
}
.lightbox-btn:hover, .lightbox-btn:focus-visible { background: rgba(0, 0, 0, 0.8); }
.lightbox-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lightbox-btn i { font-size: calc(20px * var(--fs, 1)); line-height: 1; }
.lightbox-btn[hidden] { display: none; }
.lightbox-close { top: 12px; inset-inline-end: 12px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { inset-inline-start: 10px; }
.lightbox-next { inset-inline-end: 10px; }
.lightbox-count { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: calc(13px * var(--fs, 1)); }
.lightbox-count:empty { display: none; }
/* Touch screens: swipe moves between pictures, so the side arrows are hidden (the close button stays). */
@media (hover: none) and (pointer: coarse) { .lightbox-prev, .lightbox-next { display: none; } }