@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&display=swap');

/* Ana Slider Konteyneri */
.slider-container {
    position: relative;
    width: 100%;
    /* Yükseklik için vh (viewport height) kullanalım, örn: ekranın %80'i */
    height: 80vh;
    min-height: 500px; /* Çok küçülmesin */
    margin: 0 auto; /* Üstte boşluk yok, tam genişlik */
    overflow: hidden; /* ÇOK ÖNEMLİ: Animasyonların taşmasını engeller */
    background-color: #333; /* Resim yüklenene kadar */
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* * --------------------------------
 * ANİMASYONLU SLAYT BÖLÜMÜ
 * --------------------------------
*/
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    /* Slaytın giriş/çıkış animasyonu (genel solma) */
    transition: opacity 1s ease-in-out, visibility 1s;
}

    /* Aktif Slaytın Stili */
    .slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 10; /* Her zaman diğerlerinin üstünde */
    }

    /* Çıkış yapan (eski) slaytın stili */
    .slide.exiting {
        opacity: 0;
        visibility: visible; /* Animasyon bitene kadar görünür kalmalı */
        z-index: 5; /* Aktif olanın arkasında kalır */
        transition: opacity 0.8s ease-in-out, visibility 0.8s;
    }

/* Görsel Kapsayıcı (Ken Burns efekti için) */
.slide-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Görselin zoom yaparken taşmasını engeller */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* KEN BURNS (BAŞLANGIÇ): Hafif yakınlaşmış başla */
    transform: scale(1.15);
    /* Geçiş: 8 saniye boyunca yavaşça zoom yapsın */
    transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s;
}

/* KEN BURNS (BİTİŞ): Aktif slaytın görseli yavaşça normale dönsün */
.slide.active img {
    transform: scale(1);
}

/* Çıkış yapan slaytın görseli anında başa sarsın */
.slide.exiting img {
    transition: none; /* Çıkarken animasyon olmasın */
    transform: scale(1.15);
}


/* Slayt İçeriği (Yazılar) */
.slide-content {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    bottom: 10%; /* Alttan %10 mesafede */
    left: 5%; /* Soldan %5 mesafede */
    z-index: 15; /* Görselin ve butonların üstünde */
    background-color: rgb(0, 0, 0, 0.50) !important;
    color: #ffffff;
    padding: 25px;
    max-width: 70%;
    opacity: 0;
    transform: translateY(40px);
    font-weight:bold;
    /* Geçiş: Resim oturduktan 0.4s sonra başlasın */
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

/* METİN ANİMASYONU (GİRİŞ): Aktif slaytın içeriği görünsün */
.slide.active .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* METİN ANİMASYONU (ÇIKIŞ): Eski slaytın içeriği yukarı çıksın */
.slide.exiting .slide-content {
    opacity: 0;
    transform: translateY(-40px);
    /* Çıkış animasyonu daha hızlı ve gecikmesiz olsun */
    transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

.slide-content h2 {
    font-family: "Bakbak One", sans-serif;
    font-weight: 400;
    font-size: 65px;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    text-transform: uppercase !important;
}

.slide-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; /* 20px */
    font-weight: 300;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navigasyon Butonları */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20; /* Her şeyin üstünde */

    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px); /* Buzlu cam efekti */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .slider-nav:hover {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

.nav-left {
    left: 20px;
}

.nav-right {
    right: 20px;
}

/* Mobil Cihazlar İçin Ayarlamalar */
@media (max-width: 768px) {
    .slider-container {
        height: 60vh; /* Mobilde biraz daha kısa */
    }

    .slide-content {
        left: 0;
        bottom: 5%;
        padding: 20px;
        max-width: 90%;
        margin: 0 5%;
        background-color: rgba(0, 0, 0, 0.3); /* Okunurluk için */
        border-radius: 8px;
    }

        .slide-content h2 {
            font-size: 2.5rem;
        }

        .slide-content h4 {
            font-size: 1rem;
        }

    .slider-nav {
        width: 40px;
        height: 40px;
    }
}