/* ----------------------------------------------------------------
   GENEL SLIDER VE VIDEO STİLLERİ (SCANLINE & DOT MATRIX İÇİN ORTAK)
   Bu kısım, iki overlay'in de düzgün çalışması için gereklidir.
---------------------------------------------------------------- */

/* Ana Kapsayıcı - Gerekli pozisyon ve boyut ayarları */
.slide {
    position: relative;
    height: 100vh; /* Ekranı tam kaplar */
    min-height: 500px;
    overflow: hidden;
    background-color: #000; /* Video yüklenene kadar siyah zemin */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem; /* Slaytlar arasına boşluk */
}

/* Şablonunuzun video etiketini kapsayan stil */
.slide > video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0; /* En arkada yer alır */
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Yazıların Konumlandığı Alan - En üst katman */
.container-slider {
    position: relative;
    z-index: 3; /* Overlay'den (1) ve Video'dan (0) üstte olmalı */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Yazıların okunurluğunu artırır */
}

/* Başlık ve Paragraf Stilleri (Okunurluğu artırmak için) */
.slide-captions h1 {
    font-size: 4rem;
    font-weight: 700;
}
.slide-captions p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* ----------------------------------------------------------------
   1. VERSİYON: SCANLINE OVERLAY CSS (Çizgi Çizgi Efekt)
   HTML'de: <div class="overlay-scanline"></div> kullanın
---------------------------------------------------------------- */
.overlay-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    pointer-events: none;
    
    /* Saf CSS ile Çizgili Tarama ve Karartma */
    background: 
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.5) 50%, /* Çizgi Rengi ve Opaklığı */
            rgba(0, 0, 0, 0.5)
        ),
        rgba(0, 0, 0, 0.2); /* Genel video karartması */
        
    background-size: 100% 4px; /* Çizgilerin sıklığı */
}


/* ----------------------------------------------------------------
   2. VERSİYON: DOT MATRIX OVERLAY CSS (Nokta Nokta Efekt)
   HTML'de: <div class="overlay-dotmatrix"></div> kullanın
---------------------------------------------------------------- */
.overlay-dotmatrix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    pointer-events: none;
    
    /* Saf CSS ile Noktalı Doku ve Karartma */
    background: 
        radial-gradient(
            circle,
            rgba(0, 0, 0, 0.5) 1px, /* Nokta Rengi ve Boyutu */
            transparent 1px /* Noktalar arası şeffaflık */
        ),
        rgba(0, 0, 0, 0.4); /* Genel video karartması */

    background-size: 4px 4px; /* Noktalar arasındaki mesafe ve sıklık */
}