/* ── Video kartı altı yatay resim albümü ──────────────────────────────── */

.image-gallery {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin-top: 28px;
    overflow: hidden; /* görünür alanı asla sayfa genişliğinin üzerine taşırma */
    contain: layout; /* bu bölümdeki içerik diğer bölümlerin (video kartları dahil) boyutunu etkilemez */
}

.image-gallery__viewport {
    flex: 1 1 auto;
    min-width: 0; /* flex/grid içinde içerik genişliğinin konteyneri itmesini engeller */
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--card-radius);
    padding: var(--gallery-viewport-pad, 8px) 0; /* resim büyürken üstten/alttan kırpılmasın diye minimum boşluk */
    touch-action: pan-y; /* yatay sürüklemeyi JS yönetir (sadece dokunmatik), dikey sayfa kaydırması serbest kalır */
}

.image-gallery__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    will-change: transform;
    transition: transform var(--gallery-transition-speed, 450ms) ease;
}

.image-gallery__item {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    height: 130px;
    padding: 0;
    overflow: visible; /* büyürken komşu resimlerin üzerine taşıyabilsin */
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    background: var(--surface);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
    transition: transform var(--gallery-transition-speed, 450ms) cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow var(--gallery-transition-speed, 450ms) ease,
        z-index 0s;
}

.image-gallery__item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* resmin kendisi köşeleri taşmasın */
    border-radius: calc(var(--card-radius) - 1px);
}

.image-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.image-gallery__item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 6px 8px;
    border-radius: 0 0 calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px);
    background: linear-gradient(to top, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0));
    color: var(--text-gallery-title-color);
    font-size: var(--text-gallery-title-size);
    font-weight: var(--text-gallery-title-weight);
    font-family: var(--text-gallery-title-family, inherit);
    line-height: 1.25;
    pointer-events: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    /* Metin hizalaması: --text-gallery-title-align CSS degiskeni
       functions.php'deki <style> blogundan gelir (left/center/right). */
    text-align: var(--text-gallery-title-align, left);
}

.image-gallery__item-caption span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-gallery__item-desc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 22px 8px 6px;
    border-radius: 0 0 calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px);
    background: linear-gradient(to top, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0));
    color: var(--text-gallery-desc-color);
    font-size: var(--text-gallery-desc-size);
    font-weight: var(--text-gallery-desc-weight);
    font-family: var(--text-gallery-desc-family, inherit);
    text-align: var(--text-gallery-desc-align, left);
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none; /* sadece desc varsa JS ile gösterilir */
}

.image-gallery__item[data-has-desc] .image-gallery__item-desc {
    display: block;
}

.image-gallery__item.is-active {
    z-index: 2;
    border-color: var(--accent);
    box-shadow:
        0 0 0 2px var(--accent),
        0 18px 30px -16px rgba(15, 23, 42, 0.45);
}

.image-gallery__item:hover,
.image-gallery__item:focus-visible {
    z-index: 5;
    /* Kart kutusunun TAMAMI büyür (resim dahil) ve hafifçe yukarı kalkar;
       overflow artık "visible" olduğu için büyüyen kart, komşu resimlerin
       üzerine fiziksel olarak taşarak gerçekten öne çıkmış/belirgin olur. */
    transform: translateY(-6px) scale(var(--gallery-hover-scale, 1.25));
    box-shadow:
        0 26px 40px -14px rgba(15, 23, 42, 0.5),
        0 10px 18px -6px rgba(15, 23, 42, 0.32);
}

.image-gallery__edge {
    flex: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

@media (max-width: 768px) {
    .image-gallery__item {
        width: 130px;
        height: 96px;
    }

    .image-gallery__item:hover,
    .image-gallery__item:focus-visible {
        transform: translateY(-4px) scale(min(var(--gallery-hover-scale, 1.25), 1.35));
    }
}