* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

.masonry-grid { /* Container - ID ile de seçilebilir (#imageGrid) */
    position: relative; /* Masonry'nin konumlandırması için */
}

/* --- Öğe Stilleri --- */
.item { /* SINIF ADI GÜNCELLENDİ */
    position: relative; /* İçindeki .vitrin_menu'yü mutlak konumlandırmak için GEREKLİ */
    margin-bottom: 15px; /* Dikey boşluk */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 8px;
    overflow: hidden; /* Köşeler için */
    box-sizing: border-box; /* ÇOK ÖNEMLİ */
    /*border-width: 3px;*/ /* Vurgu için temel kenarlık */
    /*border-style: solid;
            border-color: transparent;*/ /* Başlangıçta şeffaf */

    width: calc(50% - 8px);
}

    .item img { /* SINIF ADI GÜNCELLENDİ */
        display: block; /* Alt boşluğu engelle */
        width: 100%; /* Genişliği doldur */
        height: auto; /* Oranı koru */
        box-sizing: border-box; /* İçeride kalması için */
        /* Geçiş efektinin resmin üzerinde daha iyi görünmesi için */
        transition: opacity 0.3s ease-in-out;
    }

.vitrin_menu {
    /* --- Konumlandırma --- */
    position: absolute; /* Atası olan .item'a göre konumlanacak */
    top: 0; /* Üst kenara yapış */
    left: 0; /* Sol kenara yapış */
    right: 0; /* Sağ kenara yapış */
    bottom: 0; /* Alt kenara yapış */
    /* width: 100%; ve height: 100%; yerine bunlar geldi */
    width: auto; /* Genişlik otomatik (left/right belirler) */
    height: auto; /* Yükseklik otomatik (top/bottom belirler) */
    /* --- Görünüm --- */
    background-color: rgba(0, 0, 0, 0.4); /* Yarı şeffaf siyah arka plan (örnek) */
    color: white; /* Beyaz yazı rengi (örnek) */
    padding: 15px; /* İçerik için boşluk */
    box-sizing: border-box; /* Padding'i yüksekliğe dahil et */
    /* --- İçerik Hizalama (İsteğe Bağlı) --- */
    display: flex;
    flex-direction: column; /* İçeriği dikey sırala */
    justify-content: center; /* Dikeyde ortala */
    align-items: center; /* Yatayda ortala */
    text-align: center;
    /* --- Başlangıç Durumu (Aşağıda Gizli) --- */
    transform: translateY(100%); /* Öğeyi kendi yüksekliği kadar aşağı it */
    opacity: 0.4; /* Başlangıçta tamamen şeffaf yapalım (daha yumuşak giriş için) */
    /* --- Geçiş Efekti --- */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Kayma ve opaklık için yumuşak geçiş */
}


/* ----- GÜNCEL VE DOĞRU CSS ----- */
/* Medyayı saran ve en-boy oranını koruyan ana konteyner */
.media-wrapper {
    /*position: relative;*/
    width: 100%;
    /* padding-top: 125%;*/
    background-color: #f0f0f0; /* Medya yüklenirken görünecek yer tutucu renk */
    overflow: hidden;
    border-radius: 8px; /* Köşeleri yuvarlatmak için */
}

/* Resim, Video ve Iframe için TEK ve ORTAK stil. */
.item-media {
    /* position: absolute;*/ /* En önemli kural! .media-wrapper'a göre konumlanır. */
    display: block; /* img altındaki olası boşlukları engeller */
    /*top: 0;
            left: 0;*/
    width: 100%;
    height: auto;
    border: 0; /* iframe kenarlıklarını sıfırlar */
}
/* İsteğe bağlı: Hover sırasında alttaki resmin biraz kararması */
.item:hover img {
    opacity: 0.4; /* Resmin opaklığını azalt */
}

/* Vurgulama sınıfı */
.item.priority-highlight { /* SINIF ADI GÜNCELLENDİ */
    border-color: red; /* Kırmızı kenarlık */
    /* Gölge isteğe bağlı */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

/* --- Duyarlılık Ayarları (Media Queries) --- */
@media (min-width: 600px) { /* Tablet (örn. 3 sütun) */
    .item { /* SINIF ADI GÜNCELLENDİ */
        width: calc(33.333% - 10px); /* Gutter'a göre ayarla */
    }
}

@media (min-width: 900px) { /* Küçük Masaüstü (örn. 4 sütun) */
    .item { /* SINIF ADI GÜNCELLENDİ */
        width: calc(16.666% - 12px); /* Küçük Masaüstü (örn. 6 sütun) */
    }
}


@media (min-width: 1200px) { /* Geniş Masaüstü (Hedef 9 sütun) */
    .item { /* SINIF ADI GÜNCELLENDİ */
        width: calc(11.111% - 14px); /* Gutter'a göre ayarla */
    }
}


/* --- Gallery 2 Stilleri --- */

.gallery2 { /* #gallery2Container ile de seçilebilir */

    margin-top: 30px; /* Önceki bölümden ayırmak için */
}

.vitrin { /* Yeni galeri öğeleri */
    margin-bottom: 10px; /* Daha küçük dikey boşluk (isteğe bağlı) */
    background-color: #e0e0e0; /* Farklı arka plan (isteğe bağlı) */

    overflow: hidden;
    box-sizing: border-box;
    width: calc(50% - 6px); /* 10px gutter varsayımıyla */
}

    .vitrin img {
        display: block;
        width: 100%;
        height: auto;
    }

/* --- Gallery 2 için Duyarlılık --- */

@media (min-width: 480px) { /* Küçük Tablet (örn. 3 sütun) */
    .vitrin {
        width: calc(33.333% - 7px); /* 10px gutter varsayımıyla */
    }
}

@media (min-width: 600px) { /* Tablet (örn. 4 sütun) */
    .vitrin {
        width: calc(25% - 8px); /* 10px gutter varsayımıyla */
    }
}

@media (min-width: 900px) { /* Küçük Masaüstü (örn. 6 sütun) */
    .vitrin {
        width: calc(16.666% - 9px); /* 10px gutter varsayımıyla */
    }
}

@media (min-width: 1200px) { /* Geniş Masaüstü (Hedef 8 sütun) */
    .vitrin {
        width: calc(12.5% - 9px); /* 10px gutter varsayımıyla */
    }
}



/* Yatayda kaydırılabilir Container (galerinin kendisi) */
#gallery2Container {
    display: flex;
    align-items: center; /* DİKEYDE HİZALAMA EKLENDİ */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 25px 0; /* Dikeyde de boşluk eklendi */
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* Mobil cihazlarda daha akıcı kaydırma için */
    /*border:1px solid red;*/
    /* Firefox için */
    scrollbar-width: none;
    /* Internet Explorer ve Edge için */
    -ms-overflow-style: none;
}

    #gallery2Container::-webkit-scrollbar {
        display: none;
    }

    #gallery2Container::-webkit-scrollbar-track {
        background: transparent; /* Arka planı gizle */
    }

    #gallery2Container::-webkit-scrollbar-thumb {
        background: #cccccc;
        border-radius: 6px;
    }

        #gallery2Container::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

    /* Bu bloğu aşağıdaki güncel haliyle değiştirin */
    #gallery2Container .ust-bar-chip {
        display: inline-block;
        flex-shrink: 0;
        /* Boyutlandırma garantileri */
        width: auto;
        height: auto;
        line-height: 1.5;
        /* Görünüm */
        background-color: #f1f1f1;
        border: 1px solid #e0e0e0;
        border-radius: 8px; /* DEĞİŞTİ: Kenar yuvarlaklığı biraz arttı */
        padding: 10px 20px; /* DEĞİŞTİ: Dikey ve yatay boşluk arttı */
        margin: 0 5px;
        /* Metin Stilleri */
        color: #333;
        text-decoration: none;
        text-align: center;
        font-size: 13px; /* DEĞİŞTİ: Yazı boyutu biraz büyüdü */
        font-weight: 500;
        white-space: nowrap;
        /* Efektler */
        transition: all 0.2s ease-in-out;
    }

        /* YENİLENDİ: Hover kuralı da daha spesifik hale getirildi */
        #gallery2Container .ust-bar-chip:hover {
            border-color: #cccccc;
            background-color: #e6e6e6;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        }

/* ----- Lightbox Stilleri ----- */
#mediaLightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    #mediaLightbox.visible {
        opacity: 1;
        visibility: visible;
    }

#lightboxClose {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

#lightboxContent {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    max-height: 80vh;
}

    #lightboxContent img,
    #lightboxContent video,
    #lightboxContent iframe {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Medyanın tamamının görünmesini sağlar */
        border: none;
    }

/* ----- Grid Öğesi İyileştirmeleri ----- */
.item {
    cursor: pointer; /* Tıklanabilir olduğunu belirtir */
}

.item-media {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none; /* Medyanın kendisinin tıklama olaylarını yakalamasını engeller */
}

/* ----- Video Gösterge İkonu Stilleri ----- */
.play-indicator {
    position: absolute;
    bottom: 12px; /* Alttan boşluk */
    right: 12px; /* Sağdan boşluk */
    width: 32px; /* İkon boyutu */
    height: 32px; /* İkon boyutu */
    background-color: rgba(0, 0, 0, 0.5); /* Yarı şeffaf siyah arka plan */
    border-radius: 50%; /* Tamamen yuvarlak */
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px; /* Üçgeni tam ortalamak için küçük ayar */
    box-sizing: border-box;
    pointer-events: none; /* Tıklamaların arkadaki öğeye gitmesini sağlar */
    z-index: 5;
    transition: transform 0.2s ease, background-color 0.2s ease;
    backdrop-filter: blur(2px); /* Arka planı hafifçe bulanıklaştırır (destekleyen tarayıcılarda) */
}

    .play-indicator svg {
        width: 60%;
        height: 60%;
    }

        .play-indicator svg path {
            fill: rgba(255, 0, 0, 0.95); /* SVG'nin iç rengi (beyaz) */
        }

/* Fare üzerine gelince hafifçe büyüsün ve rengi değişsin */
.item:hover .play-indicator {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.7);
}