/* Sonsuz Uzaklaşma (Zoom Out) Efekti */
.main-slider .carousel-item {
    height: 90vh; /* Tam ekran yüksekliği */
    min-height: 600px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center; /* İçeriği dikeyde ortala */
    justify-content: flex-start; /* İçeriği sola hizala */
    overflow: hidden; /* Animasyonun dışarı taşmasını engelle */
}

.main-slider .carousel-item::after { /* Pseudo-element for the zoom effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Arka plan görüntüsünü devral */
    background-size: cover;
    background-position: center center;
    transform: scale(1); /* Başlangıç boyutu */
    animation: zoomOut 20s infinite alternate; /* Animasyon: 20 saniye, sonsuz, ileri-geri */
    z-index: 0; /* İçeriğin arkasında kalması için */
}

.main-slider .carousel-item .carousel-caption {
    z-index: 2; /* Yazının önde kalması için */
    position: relative; /* Z-index'in çalışması için */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-slider .carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Daha hafif bir karartma */
    z-index: 1; /* Efektin üstünde ama yazının altında */
}

/* Keyframes for the zoom out effect */
@keyframes zoomOut {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1); /* Hafifçe uzaklaşma */
    }
}

.main-slider .carousel-caption {
    bottom: auto; /* Alttan hizalamayı kaldır */
    top: 50%; /* Dikeyde ortala */
    transform: translateY(-50%); /* Dikeyde tam ortalama */
    left: 10%; /* Sol kenara hizala */
    right: auto; /* Sağ kenar hizalamasını kaldır */
    width: 60%; /* İçerik genişliği */
    max-width: 900px; /* Maksimum genişlik */
    text-align: left; /* Metni sola hizala */
    padding: 2rem 0; /* İç boşluklar */
    background: none; /* Gradyanı kaldır */
    z-index: 2;
    color: #fff;
}

.main-slider .carousel-caption h5 {
    font-size: 4.8rem; /* Daha büyük başlık */
    font-weight: 900; /* Daha kalın başlık */
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.main-slider .carousel-caption p {
    font-size: 1.9rem; /* Daha büyük açıklama */
    color: #e0e0e0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 2.5rem;
    max-width: 750px; /* Okunabilirliği artırmak için maksimum genişlik */
    line-height: 1.4;
}

.main-slider .carousel-caption .btn {
    padding: 1.2rem 3.5rem; /* Daha büyük buton */
    font-size: 1.4rem; /* Daha büyük buton yazısı */
    border-radius: 5px; /* Daha köşeli buton */
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main-slider .carousel-caption .btn-primary {
    background-color: var(--primary-color); /* Tarım temasına uygun birincil renk */
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--primary-color), 0.4);
}

.main-slider .carousel-caption .btn-primary:hover {
    background-color: var(--secondary-color); /* Hover rengi */
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-color), 0.6);
}

.main-slider .carousel-control-prev,
.main-slider .carousel-control-next {
    width: 5%; /* Kontrol butonlarının genişliği */
    opacity: 0.8; /* Hafif saydamlık */
    transition: opacity 0.3s ease, background-color 0.3s ease;
    background: rgba(255, 255, 255, 0.1); /* Hafif arka plan */
    border-radius: 5px; /* Köşeli butonlar */
    margin: 0 1%;
}

.main-slider .carousel-control-prev:hover,
.main-slider .carousel-control-next:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.main-slider .carousel-control-prev-icon,
.main-slider .carousel-control-next-icon {
    font-size: 3.5rem; /* Daha büyük ikonlar */
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.main-slider .carousel-indicators {
    bottom: 30px; /* Göstergeleri biraz yukarı çek */
}

.main-slider .carousel-indicators button {
    width: 16px; /* Daha büyük gösterge */
    height: 16px; /* Daha büyük gösterge */
    border-radius: 50%;
    margin: 0 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.main-slider .carousel-indicators button.active {
    background-color: var(--primary-color); /* Aktif gösterge ana renk */
    transform: scale(1.1); /* Aktif göstergeyi büyüt */
    border-color: var(--primary-color);
}

/* Responsive Ayarlar */
@media (max-width: 991.98px) {
    .main-slider .carousel-item {
        height: 70vh;
        min-height: 450px;
        justify-content: center; /* İçeriği ortala */
    }

    .main-slider .carousel-caption {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        text-align: center; /* Mobilde ortala */
        padding: 1.5rem;
    }

    .main-slider .carousel-caption h5 {
        font-size: 3.5rem;
    }

    .main-slider .carousel-caption p {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .main-slider .carousel-caption .btn {
        padding: 1rem 2.5rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .main-slider .carousel-item {
        height: 60vh;
        min-height: 380px;
    }

    .main-slider .carousel-caption h5 {
        font-size: 2.5rem;
    }

    .main-slider .carousel-caption p {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .main-slider .carousel-caption .btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    .main-slider .carousel-control-prev,
    .main-slider .carousel-control-next {
        width: 8%;
    }

    .main-slider .carousel-control-prev-icon,
    .main-slider .carousel-control-next-icon {
        font-size: 2.5rem;
    }

    .main-slider .carousel-indicators button {
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }
}

@media (max-width: 575.98px) {
    .main-slider .carousel-caption h5 {
        font-size: 1.8rem;
    }

    .main-slider .carousel-caption p {
        font-size: 0.9rem;
    }
}