/* Genel Ayarlar ve Başlık Bölümü */
.page-header { /* Bu stil, exhibition.php'deki Bootstrap header'ını hedef alacak */
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 3.5rem;
    padding: 0 15px;
}

.page-header h1 {
    font-size: 3.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.page-header p.lead {
    font-size: 1.3rem;
    color: #7f8c8d;
    max-width: 700px;
    margin: 0 auto;
}

/* Galeri Izgarası ve Öğeleri (Bootstrap ile uyumlu hale getirildi) */
/* Bootstrap'in .row ve .col sınıflarını kullandığımız için
   yy-exh-gallery-grid yerine yy-exh-gallery-grid-wrapper adını verdim
   ve asıl stil öğe kartına (yy-exh-gallery-item) odaklandı. */
.yy-exh-gallery-grid-wrapper {
    /* Bu bir Bootstrap .row olduğu için kendi gap'ini ve flex özelliklerini kullanır */
    padding: 0 15px; /* Konteyner padding'ine ek */
}

/* Her Bir Galeri Öğesi (Resim Kartı) */
.yy-exh-gallery-item {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block; /* a etiketi olduğu için varsayılan inline yerine block yap */

    /* KRİTİK: En boy oranı için padding-bottom hilesi */
    position: relative; /* İçindeki img için mutlak pozisyonlama sağlar */
    padding-bottom: 75%; /* Genişliğin %75'i kadar yükseklik verir (4:3 en boy oranı) */
    height: 0; /* padding-bottom ile yüksekliği kontrol ettiğimiz için doğal yüksekliği sıfırlar */
}

/* Hover Efekti: Resmin kendisi büyür */
.yy-exh-gallery-item:hover img {
    transform: scale(1.15); /* Resmin 1.15 kat büyümesi */
}

/* Üzerine gelince tüm kartın hafifçe büyümesi */
.yy-exh-gallery-item:hover {
    transform: translateY(-8px); /* Hafifçe yukarı kaydır */
    box-shadow: 0 15px 30px rgba(0,0,0,0.25); /* Daha da belirgin gölge */
    z-index: 2; /* Üzerine gelince diğerlerinin önüne gelsin */
}

.yy-exh-gallery-item img {
    /* KRİTİK: Kapsayıcının içinde tam pozisyonla ve yüksekliği doldur */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Kapsayıcının (yy-exh-gallery-item) yüksekliğini (padding-bottom ile belirlenen) doldur */
    object-fit: cover; /* En boy oranını koruyarak kutuyu doldur */
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.6s ease-in-out;
}

/* Resim Bilgisi Kutusu (Hover'da aşağıdan yukarı çıkan) */
.yy-exh-photo-info {
    position: absolute; /* Kapsayıcıya göre pozisyon al */
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75); /* Daha opak bir arka plan */
    color: #fff;
    padding: 15px 20px;
    transform: translateY(100%); /* Başlangıçta gizli (aşağıda) */
    transition: transform 0.3s ease-in-out; /* Animasyon */
    text-align: center;
}

/* Kartın üzerine gelindiğinde bilgi kutusu yukarı kayar */
.yy-exh-gallery-item:hover .yy-exh-photo-info {
    transform: translateY(0);
}

.yy-exh-photo-info h5 {
    margin-bottom: 5px;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 600;
}

.yy-exh-photo-info p {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 0;
}

/* Lightbox'ın kendi CSS'ine karışmadan, varsa mobil görünümdeki siyah çizgiyi engellemek için */
/* Bu bölüm, özellikle mobil görünümdeki Lightbox modalında görülen siyah çizgiyi hedef alıyor.
   Genellikle bu tür sorunlar Lightbox'ın kendi CSS'i veya responsive ayarlarla çakışmasından kaynaklanır.
   Burada doğrudan Lightbox'ın .lb-image veya .lightbox'ı hedef almadık,
   çünkü bunu değiştirmek Lightbox'ın temel işlevini bozabilir.
   Eğer çizgi devam ederse, bu bölümü daha spesifik hale getirmek için
   o çizgiye tıklayıp Geliştirici Araçları'nda stilini incelememiz gerekir. */
@media (max-width: 768px) {
    /* Lightbox modalındaki resimler için ek düzenleme */
    /* Bu stil, lightbox'ın içindeki .lb-image veya benzer bir etikete uygulandığında işe yarayabilir. */
    .lightbox .lb-image { /* Lightbox modalındaki resim */
        border: none !important; /* Herhangi bir kenarlığı kaldır */
        outline: none !important; /* Herhangi bir dış çizgiyi kaldır */
        box-shadow: none !important; /* Herhangi bir gölgeyi kaldır */
        background-color: transparent !important; /* Arka planı şeffaf yap */
    }
}


/* Responsive Ayarlar (Bootstrap'in ızgarasıyla iyi çalışmalı) */
@media (max-width: 1200px) {
    .yy-exh-gallery-grid-wrapper {
        padding: 0 10px;
    }
}

@media (max-width: 992px) { /* Tablet boyutları */
    .page-header h1 {
        font-size: 2.8rem;
    }
    .page-header p.lead {
        font-size: 1.2rem;
    }
    .yy-exh-gallery-item {
        padding-bottom: 80%; /* Biraz daha dikey olabilir */
    }
}

@media (max-width: 768px) { /* Mobil boyutlar */
    .page-header h1 {
        font-size: 2.5rem;
    }
    .page-header p.lead {
        font-size: 1.1rem;
    }
    .yy-exh-gallery-item {
        padding-bottom: 75%; /* Mobil'de genel bir oran */
    }
}

@media (max-width: 480px) { /* Daha küçük mobil cihazlar */
    .yy-exh-gallery-item {
        padding-bottom: 70%; /* Daha küçük ekranlarda biraz daha yatay */
    }
}