/* =========================================
   KAPTAN HYBRID SLIDER CSS
   ========================================= */

.kaptan-slider {
    position: relative;
    width: 100%;
    height: 100vh; /* Tam Ekran */
    max-height: 900px;
    overflow: hidden;
    background-color: var(--primary-1000);
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* Kaydırma işlemi transform ile yapılacak */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

.slide-item {
    min-width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

/* Karartma Overlay */
.slide-item::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(13, 23, 60, 0.8) 0%, rgba(13, 23, 60, 0.3) 50%, rgba(13, 23, 60, 0.1) 100%);
    z-index: 1; pointer-events: none;
}

/* Medya Ayarları */
.slide-video, .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

/* Mevcut global-play-pause stilinizin altına ekleyin */

.global-play-pause.hidden {
    opacity: 0;
    pointer-events: none; /* Görünmezken tıklanmasın */
    transform: scale(0); /* Küçülerek kaybolsun */
}

/* Varsayılan: Video altta, Resim üstte (Video yüklenince resim gizlenir) */
.slide-video { z-index: 0; opacity: 0; transition: opacity 0.5s; }
.slide-img { z-index: 0; opacity: 1; transition: opacity 0.5s; }

/* Video Oynarken */
.slide-item.playing .slide-video { opacity: 1; z-index: 0; }
.slide-item.playing .slide-img { opacity: 0; }

/* İçerik */
.slide-content {
    position: absolute; bottom: 15%; left: 10%; max-width: 600px;
    z-index: 10; color: var(--white);
    transform: translateY(30px); opacity: 0; transition: all 0.8s ease 0.3s;
}

.slide-item.active .slide-content { transform: translateY(0); opacity: 1; }

.slide-title { font-size: 3rem; font-weight: 800; line-height: 1.1; margin-bottom: 15px; color: var(--white); }
.slide-desc { font-size: 1.1rem; margin-bottom: 25px; color: rgba(255,255,255,0.9); }
.slide-btn { 
    display: inline-block; padding: 12px 30px; background: var(--accent); color: var(--primary-1000); 
    font-weight: 700; text-decoration: none; border-radius: 4px; transition: 0.3s;
}

/* --- KONTROLLER --- */

/* 1. Progress Bar */
.slider-progress-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
    background: rgba(255,255,255,0.2); z-index: 20;
}
.slider-progress-bar {
    height: 100%; width: 0%; background: var(--accent);
    transition: width 0.1s linear;
}

/* 2. Global Play/Pause (Sağ Alt) */
.global-play-pause {
    position: absolute; bottom: 30px; right: 30px;
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 2px solid var(--white);
    color: var(--white); cursor: pointer; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; backdrop-filter: blur(5px);
}
.global-play-pause:hover { background: var(--accent); border-color: var(--accent); color: var(--primary-1000); }

/* 3. Dots (Alt Orta) */
/* --- MODERN ÇİZGİ NAVİGASYON (DOTS) --- */
.slider-dots {
    position: absolute; 
    bottom: 40px; /* Mobilde parmak erişimi için biraz yukarıda */
    left: 50%; 
    transform: translateX(-50%);
    display: flex; 
    gap: 12px; /* Çizgiler arası boşluk */
    z-index: 20;
    width: auto;
}

.dot {
    width: 40px; /* Standart çizgi genişliği */
    height: 5px; /* İstenilen kalınlık */
    border-radius: 2px; /* Hafif yumuşak köşeler */
    background: rgba(255,255,255,0.3); 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative; /* Tıklama alanı için referans */
}

/* Tıklama Alanını Genişletme (Görünmez alan) */
.dot::after {
    content: '';
    position: absolute;
    top: -15px; /* Yukarı 15px */
    bottom: -15px; /* Aşağı 15px */
    left: 0;
    right: 0;
    /* background: red; /* Test etmek için bunu açabilirsiniz */
}

/* Aktif Çizgi */
.dot.active { 
    width: 60px; /* Aktif olan uzasın (Orantılı hissi verir) */
    background: var(--accent); /* Sarı renk */
    box-shadow: 0 0 10px rgba(242, 169, 0, 0.4);
}

.dot:hover {
    background: rgba(255,255,255,0.8);
}

/* 4. Mobil Play Butonu (Slayt Ortasında) */
.mobile-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(13, 23, 60, 0.7); border: 2px solid var(--accent);
    color: var(--accent); font-size: 1.5rem; cursor: pointer;
    z-index: 5; display: none; /* Sadece mobilde ve videolu slaytta açılır */
    backdrop-filter: blur(5px);
}

/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 768px) {
    /* Mobilde Video varsayılan olarak gizli (Resim görünür) */
    .slide-video { display: none; }
    /* Mobilde içerik biraz daha yukarı */
    .slide-content { bottom: 80px; left: 20px; right: 20px; text-align: center; }
    .slide-title { font-size: 2rem; }
    
    /* Mobilde videolu slaytta Play butonu görünür */
    .slide-item.has-video .mobile-play-btn { display: flex; align-items: center; justify-content: center; }
    
    /* Mobilde video oynatılıyorsa butonu gizle ve videoyu göster */
    .slide-item.playing .mobile-play-btn { display: none; }
    .slide-item.playing .slide-video { display: block; }
}