/* Tüm ekran çözünürlükleri için resimlere duyarlı (responsive) bir görünüm sağlar */
.image-container {
    max-width: 100%; /* Konteynerin genişliği sayfanın %100'üne kadar olabilir */
    height: auto; /* Yüksekliği otomatik olarak ayarlar */
    display: block; /* Resmin dış kenarlarının sayfa ile hizalanmasını sağlar */
}

img {
    width: 100%; /* Resmin genişliği her zaman konteynerin genişliğiyle aynı olur */
    height: auto; /* Yüksekliği, en-boy oranını koruyarak otomatik ayarlanır */
    object-fit: cover; /* Resmi, alanın dışına taşmadan kapsar ve kırpmalarla eşit şekilde yerleştirir */
}
/* Hero (Slider) Sabit Kalsın */
#hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
}

/* Slider için gerekli stiller */
.slider {
    position: relative;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slides {
    display: none;
    width: 100%;
    height: 100vh;
}

.fade {
    animation: fadeEffect 1.5s ease-in-out;
}

@keyframes fadeEffect {
    from { opacity: 0.4 }
    to { opacity: 1 }
}

/* About kısmı yukarıdan daha erken kaymaya başlayacak */
#about {
    position: relative;
    z-index: 2;
    margin-top: 10vh; /* Daha erken kayması için boşluğu küçülttük */
    background-color: #f4f4f4;
    padding: 20px;
}

/* İlk Sticky Header */
#sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 165px;
    z-index: 1000;
}

/* İkinci Sticky Header */
#sticky-header-2 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 105px;
    background-color: white;
    z-index: 1000;
    display: none; /* Başlangıçta gizli */
    box-shadow: 0px 5px 10px -5px rgba(0, 1, 1, 1); /* Alt kısma gölge */
}