.image-gallery {
    display: grid; /* Grid düzeni kullanarak öğeleri yerleştirir */
    grid-template-columns: repeat(4, 1fr); /* 4 eşit sütun oluşturur */
    gap: 50px; /* Satırlar ve sütunlar arasındaki boşlukları 20 piksel yapar */
    justify-items: center; /* Grid hücrelerindeki öğeleri yatay olarak ortalar */
    width: 80%; /* Galeri genişliğini 900 piksel olarak ayarlar */
    height: 80%; /* Galeri yüksekliğini 900 piksel olarak ayarlar */
    margin: 0 auto; /* Galeriyi yatay olarak ortalar */
    padding: 20px; /* Galerinin iç kenarlarına 20 piksel boşluk ekler */
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil eder */
}

/* Individual Image Item */
.image-item img {
    width: 250px; /* Resmin genişliğini kapsayıcıya uydurur */
    height: 250px; /* Resmin yüksekliğini kapsayıcıya uydurur */
    object-fit: fill; /* Resmi kapsayıcıyı dolduracak şekilde ölçeklendirir */ /* Resmin etrafına 2 piksel kalınlığında sarı renkli bir sınır ekler */
    border-radius: 2px; /* Resmin köşelerini 8 piksel yuvarlatır */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.737); /* Resme hafif bir gölge efekti ekler */
    cursor: pointer; /* Fare üzerine geldiğinde el simgesi gösterir, tıklanabilir olduğunu belirtir */
}


/* Lightbox */
.lightbox {
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Koyu arka plan */
}

/* Lightbox İçeriği */
.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Görseli hem yatay hem dikey olarak ortalar */
    max-width: 90%;
    max-height: 90%; /* Ekranın boyutuna göre sınırlama yapar */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Lightbox Image */
.lightbox-image {
    width: auto; /* Genişliği otomatik olarak ayarlar */
    height: auto; /* Yüksekliği otomatik olarak ayarlar */
    max-width: 100%; /* Görselin genişliğini lightbox çerçevesine sığacak şekilde sınırlar */
    max-height: 100%; /* Görselin yüksekliğini lightbox çerçevesine sığacak şekilde sınırlar */
    display: block;
    object-fit: contain; /* Resmin orijinal boyutlarını korur ve çerçeveye sığdırır */
}



.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.3s;
    user-select: none;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

/* Buton Üzerine Gelindiğinde Efekt */
.prev:hover, .next:hover {
    background-color: #f4c542; /* Butonların üzerine gelindiğinde arka plan rengini değiştirir */
}


/* Kapatma Butonunun Stilleri */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f4c542;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Medya Sorguları */
@media screen and (max-width: 481px) and (max-width: 768px) {
    
    /* Tablet ve mobil cihazlar için stil ayarları */
    .image-gallery {
        grid-template-columns: repeat(1, 1fr);  /* 4 eşit sütun oluşturur */
    }
    .prev, .next {
        font-size: 30px; /* Font boyutunu azaltır */
        padding: 12px; /* Buton paddingini azaltır */
    }

    .close {
        font-size: 25px; /* Font boyutunu azaltır */
        top: 5px; /* Üstten boşluğu azaltır */
        right: 10px; /* Sağdan boşluğu azaltır */
    }

    .lightbox-content {
        max-width: 95%;
        max-height: 90%; /* Maksimum yükseklik */
    }
}

@media (max-width: 480px) {
    /* Mobil cihazlar için stil ayarları */

    .image-gallery {
        grid-template-columns: repeat(1, 1fr);  /* 4 eşit sütun oluşturur */
    }
    .prev, .next {
        font-size: 30px; /* Font boyutunu azaltır */
        padding: 12px; /* Buton paddingini azaltır */
    }

    .close {
        font-size: 25px; /* Font boyutunu azaltır */
        top: 5px; /* Üstten boşluğu azaltır */
        right: 10px; /* Sağdan boşluğu azaltır */
    }

    .lightbox-content {
        max-width: 95%;
        max-height: 90%; /* Maksimum yükseklik */
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){
        /* Tablet ve mobil cihazlar için stil ayarları */
        .image-gallery {
            grid-template-columns: repeat(2, 1fr);  /* 4 eşit sütun oluşturur */
        }
        .prev, .next {
            font-size: 30px; /* Font boyutunu azaltır */
            padding: 12px; /* Buton paddingini azaltır */
        }
    
        .close {
            font-size: 25px; /* Font boyutunu azaltır */
            top: 5px; /* Üstten boşluğu azaltır */
            right: 10px; /* Sağdan boşluğu azaltır */
        }
    
        .lightbox-content {
            max-width: 95%;
            max-height: 90%; /* Maksimum yükseklik */
        }
}