.gallery {
    display: grid; /* Izgara yapısı */
    grid-template-columns: repeat(4, 1fr); /* 4 sütun oluştur */
    gap: 1px; /* Kutucuklar arasındaki boşluk */
    width: 100%; /* Galerinin genişliği */
}

.image-container {
    position: relative;
    overflow: hidden; /* Taşmaları gizlemek için */
    cursor: pointer; /* Tıklanabilir olduğunu göstermek için */
}

.image-container img {
    width: 100%; /* Resmi container genişliği kadar yap */
    height: 100%; /* Oranı korur */
    transition: transform 0.3s ease;
}

.image-container {
    display: flex;
    justify-content: center; /* Yatayda ortalama */
    align-items: center; /* Dikeyde ortalama (isteğe bağlı) */
    margin: 0.5rem; /* Aralarındaki boşluk */
}



/* Büyütülmüş resmin tam ekran görünümü */
.full-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Koyu arka plan */
    z-index: 9999;
}

.full-screen img {
    max-width: 800px; /* Orijinal boyut 800px */
    max-height: 600px; /* Orijinal boyut 600px */
}
.reference-section {
    margin: 2rem;
    text-align: center;
	background-color: #ffffff; /* Açık arka plan rengi */
    color: #000000; /* Yazı rengi */
}

.reference-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.reference-card {
    background-color: #f8f8f8; /* Arka plan rengi */
    border: 1px solid var(--border-color, #ddd); /* Kenar rengi */
    border-radius: 8px; /* Kenar yuvarlama */
    padding: 1rem; /* İç boşluk */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti */
    transition: transform 0.3s; /* Geçiş efekti */
	 color: #333333;
}

.reference-card:hover {
    transform: translateY(-5px); /* Hover efekti */
}

.navigation-button {
    background: none; /* Arka planı kaldır */
    border: none; /* Kenarlık kaldır */
    color: white; /* Yazı rengi beyaz */
    font-size: 24px; /* Boyut */
    cursor: pointer;
    margin: 0 15px; /* Kenar boşlukları */
}

.navigation-button:hover {
    color: #FFD700; /* Hover rengi */
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px; /* Ok simgesinin boyutu */
    color: white; /* Ok simgesinin rengi */
    cursor: pointer; /* Üzerine gelindiğinde imlecin el işaretine dönüşmesi için */
    z-index: 1001; /* Resimlerin üstünde görünmesi için */
}

#prev {
    left: 20px; /* Sol tarafta */
}

#next {
    right: 20px; /* Sağ tarafta */
}