/* Popup Tasarımı - Modern Card */

.modal-video-popup {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 80%;

    max-width: 900px;

    max-height: 90vh;

    background-color: rgba(0, 0, 0, 0.0); /* Yarı saydam arka plan */

    justify-content: center;

    align-items: center;

    z-index: 9999;

    animation: fadeIn 0.5s ease-out;

    border-radius: 15px; /* Modern köşe yuvarlama */

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.0);

    overflow: hidden;

}



/* Fade-in animasyonu */

@keyframes fadeIn {

    from {

        opacity: 0;

        visibility: hidden;

    }



    to {

        opacity: 1;

        visibility: visible;

    }

}



/* Modal içerik */

.modal-content {

    background-color: #fff;

    width: 100%;

    height: 100%;

    padding-top: 20px;

    padding-bottom: 20px;

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    position: relative;

}



/* Başlık Tasarımı */

.modal-title {

    font-size: 24px;

    color: #ab8a62;

    font-weight: bold;

    margin-bottom: 20px;

    text-align: center;

    position: relative;

}



/* Kapatma Butonu */

.close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 30px;

    color: #333;

    cursor: pointer;

    transition: color 0.3s ease;

    font-weight: bold;

    z-index: 10; /* Çarpı butonunun üstte olmasını sağlamak */

}



    .close-btn:hover {

        color: #ab8a62; /* Buton hover rengi */

    }



/* Video Slider (Swiper) Container */

.swiper-container {

    width: 100%;

    height: 60vh; /* Slider boyutunu sınırlıyoruz */

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    margin-bottom: 20px; /* Pagination ile slider arasındaki mesafeyi ayarlıyoruz */

}



/* Swiper'daki video öğelerinin görünürlüğünü kontrol et */

.swiper-slide video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    display: none; /* Başlangıçta gizle */

}



/* Sadece aktif olan slayttaki videoyu göster */

.swiper-slide.swiper-slide-active video {

    display: block; /* Sadece aktif olan video görünür */

}



/* Video posterini göstermek için */

.swiper-slide video::-webkit-media-controls-start-playback-button {

    display: none;

}



/* Pagination: Nokta Görünümü */

.swiper-pagination {

    display: flex;

    justify-content: center; /* Pagination'ı ortalamak için */

    gap: 8px; /* Noktalar arasında mesafe */

    margin-top: 20px; /* Pagination ile video slider arasındaki mesafeyi ayarlıyoruz */

}



/* Pagination Bullet */

.swiper-pagination-bullet {

    background-color: #ab8a62; /* Nokta rengi */

    width: 12px;

    height: 12px;

    border-radius: 50%;

    opacity: 1 !important; /* Noktaların net görünmesini sağlıyoruz */

}



.swiper-pagination-bullet-active {

    background-color: #927055; /* Aktif noktalar için daha koyu renk */

}



.swiper-slide {

    overflow: hidden;

}



/* Modern Ok İşaretleri */

.swiper-button-next,

.swiper-button-prev {

    color: #ab8a62;

    font-size: 30px;

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 1.0);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: background-color 0.3s ease;

    z-index: 3; /* Ok işaretleri üstte olsun */

}



    .swiper-button-next:hover,

    .swiper-button-prev:hover {

        background-color: #ab8a62;

        color: white;

    }



    .swiper-button-next:after,

    .swiper-button-prev:after {

        font-size: 18px;

    }



/* Responsive Design - Mobil için Uyarlamalar */

@media screen and (max-width: 768px) {

    .popup-content {

        padding: 15px;

    }



    .modal-title {

        font-size: 20px; /* Mobilde başlık boyutunu küçültüyoruz */

    }



    .swiper-container {

        height: 50vh;

    }

}