/* ============================================================
   Basit, bağımsız Lightbox eklentisi (galeri için)
   ============================================================ */
.lb-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 16, 12, .94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    overscroll-behavior: contain;
    touch-action: none;
    user-select: none;
}
.lb-root.open { opacity: 1; visibility: visible; }

/* Resim alanı */
.lb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lb-img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: translate(0, 0) scale(1);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
    cursor: zoom-in;
    will-change: transform;
    -webkit-user-drag: none;
}
.lb-img.zoomed  { cursor: grab; }
.lb-img.grabbing { cursor: grabbing; transition: opacity .25s ease; } /* pan sırasında anlık */
.lb-img.swapping { opacity: 0; }

/* Yükleniyor göstergesi */
.lb-spinner {
    position: absolute;
    width: 42px; height: 42px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lb-spin .8s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.lb-spinner.show { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* Kontroller */
.lb-btn {
    position: absolute;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, transform .12s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-btn:active { transform: scale(.92); }
.lb-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lb-close { top: 16px; right: 16px; width: 46px; height: 46px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(.92); }
.lb-prev.hide, .lb-next.hide { opacity: 0; pointer-events: none; }

/* Üst bilgi: sayaç */
.lb-counter {
    position: absolute;
    top: 22px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font: 600 14px/1 "Segoe UI", system-ui, sans-serif;
    letter-spacing: .5px;
    background: rgba(0,0,0,.35);
    padding: 8px 14px;
    border-radius: 20px;
}

/* Alt bilgi: açıklama + zoom kontrolleri */
.lb-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.lb-caption {
    color: #fff;
    font: 500 15px/1.4 "Segoe UI", system-ui, sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.lb-caption .lb-name { font-weight: 700; font-size: 15px; }
.lb-caption .lb-note {
    font-weight: 400;
    font-size: 14px;
    opacity: .92;
    line-height: 1.45;
    max-height: 4.4em;          /* ~3 satır, uzun notlarda kaydır */
    overflow-y: auto;
    white-space: pre-wrap;      /* satır sonlarını koru */
    word-break: break-word;
}
.lb-zoom-group { display: flex; gap: 10px; flex-shrink: 0; }
.lb-zoom-group .lb-btn {
    position: static;
    width: 42px; height: 42px;
    transform: none;
}
.lb-zoom-group .lb-btn:active { transform: scale(.92); }

/* Mobil */
@media (max-width: 560px) {
    .lb-img { max-width: 96vw; max-height: 80vh; }
    .lb-prev, .lb-next { width: 44px; height: 44px; }
    .lb-prev { left: 8px; } .lb-next { right: 8px; }
    .lb-close { top: 10px; right: 10px; width: 42px; height: 42px; }
    .lb-caption { font-size: 13.5px; }
}