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

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #4B3D31, #f5d8ad); /* Kahve ve bej arasında geçiş */
    overflow: hidden; /* Sayfanın kaymasını engelle */
}

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    transition: transform 1s ease; /* Geçiş efekti */
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1s ease; /* Opaklık geçişi */
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    transition: transform 1s ease; /* Geçiş efekti */
}

.gallery {
    display: none; /* Başlangıçta gizli */
    flex-direction: column;
    position: absolute; /* Galeriyi konumlandır */
    top: 0; /* Üstten başlat */
    left: 0; /* Soldan başlat */
    width: 100%; /* Tam genişlik */
    height: 100vh; /* Tam yükseklik */
    transform: translateY(100%); /* Başlangıçta aşağıda */
    transition: transform 2s ease; /* Geçiş süresini 2 saniye yap */
}

.gallery {
    display: none; /* Başlangıçta gizli */
    flex-direction: column;
    position: absolute; /* Galeriyi konumlandır */
    top: 0; /* Üstten başlat */
    left: 0; /* Soldan başlat */
    width: 100%; /* Tam genişlik */
    height: 100vh; /* Tam yükseklik */
    transform: translateY(100%); /* Başlangıçta aşağıda */
    transition: transform 1s ease; /* Geçiş süresini 2 saniye yap */
    overflow-y: auto; /* Dikey kaydırma ekle */
}

.gallery img {
    width: 100%;
    height: auto;
}

.show {
    display: flex; /* Galeriyi göster */
    transform: translateY(0); /* Yukarı kaydırma */
}

@keyframes slideIn {
    from {
        transform: translateY(100%); /* Aşağıdan gelme */
    }
    to {
        transform: translateY(0); /* Yukarıda durma */
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0); /* Yukarıda durma */
    }
    to {
        transform: translateY(100%); /* Aşağıya gitme */
    }
}

.gallery {
    display: none; /* Başlangıçta gizli */
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: display 0s 2s; /* Geçiş süresi için gizleme */
    overflow-y: auto;
}

.show {
    display: flex; /* Galeriyi göster */
    animation: slideIn 0.5s forwards; /* Açılma animasyonu */
}

.hide {
    animation: slideOut 0.5s forwards; /* Kapanma animasyonu */
}
.fixed-about {
    position: fixed; /* Sabit pozisyon */
    top: 10px; /* Sayfanın üstünden 10 piksel */
    right: 10px; /* Sayfanın sağından 10 piksel */
    background-color: #007BFF; /* Arka plan rengi */
    color: white; /* Yazı rengi */
    padding: 10px 15px; /* İç boşluk */
    border-radius: 5px; /* Köşeleri yuvarlar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-weight: bold; /* Yazıyı kalın yapar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Hafif gölge */
    transition: background-color 0.3s; /* Hover geçiş efekti */
    z-index: 1000; /* En üstte görünmesi için yüksek bir değer */
}

.fixed-about:hover {
    background-color: #0056b3; /* Hover efekti */
}