/* Temel Slider Kapsayıcısı */
.wps-slider-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Tekil Slayt Zemin */
.wps-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 6 / 5; 
}

/* Link Katmanı */
.wps-slide-link-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
}

/* Ana Görsel (Mobilde Tam Ekran) */
.wps-bg-main {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Ayna Görseli */
.wps-bg-mirror { display: none; }

/* Renk Katmanı (Overlay) */
.wps-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
    /* Mobilde rengi %50 şeffaf yaparak altındaki resmi gösteriyoruz */
    background-color: var(--overlay-color) !important;
    opacity: 0.3; 
}

/* İçerik Kapsayıcısı */
.wps-content {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* ORTAK YAZI STİLLERİ */
.wps-title-1, .wps-t2-main, .wps-t2-highlight { text-transform: uppercase !important; }

/* Başlık 1 (Mobil) */
.wps-title-1 {
    position: absolute;
    top: 5px; left: 5px;
    background-color: var(--t1-bg);
    color: var(--t1-color);
    padding: 6px 14px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    border-radius: 3px;
}

/* Başlık 2 Kapsayıcı (Mobil) */
.wps-title-2 {
    position: absolute;
    bottom: 25px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
}

.wps-t2-main {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
    line-height: 1.2;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wps-t2-highlight {
    color: var(--highlight-color);
    font-size: 24px;
    font-weight: 900;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

/* Mobil Navigasyon Okları */
.wps-nav-arrow {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    transform: scale(0.7);
    top: 35%; 
    z-index: 11;
}

/* Mobil Noktalar */
.wps-mobile-pagination { bottom: 2px !important; z-index: 11; }
.wps-mobile-pagination .swiper-pagination-bullet { background: #ffffff; opacity: 0.5; }
.wps-mobile-pagination .swiper-pagination-bullet-active { background: #ffb300; opacity: 1; transform: scale(1.3); }
.wps-desktop-pagination { display: none; }

/* =========================================================
   MASAÜSTÜ GÖRÜNÜMÜ
   ========================================================= */
@media (min-width: 768px) {
    .wps-slide {
        aspect-ratio: auto;
        height: 320px;
    }

    .wps-bg-main {
        width: 50%;
        left: auto;
        right: 0;
        background-position: right center;
    }

    .wps-bg-mirror {
        display: block;
        position: absolute;
        top: 0; left: 0;
        width: 50%; height: 100%;
        background-size: cover;
        background-position: left center;
        transform: scaleX(-1); 
        z-index: 1;
    }

    /* 
      YENİ GRADIENT GEÇİŞİ: 
      - %0'dan %15'e kadar (Numaraların olduğu bölge) TAMAMEN DÜZ RENK
      - %15'te şeffaflaşmaya başlar.
      - %80'de (Ana resmin %60'ı) tamamen YOK OLUR.
    */
    .wps-overlay {
        opacity: 1 !important; /* Masaüstünde şeffaflığı iptal ediyoruz */
        background: linear-gradient(to right, 
            var(--overlay-color) 0%, 
            var(--overlay-color) 15%, 
            transparent 80%, 
            transparent 100%
        ) !important;
        box-shadow: none;
    }

    /* TEKNOLOJİ EFEKTİ 1: İnce noktalar */
    .wps-overlay::before {
        content: ''; position: absolute; top: 0; 
        left: 0; width: 80%; height: 100%; /* Sola tamamen yaslandı (left:0) ve genişletildi */
        background-image: radial-gradient(rgba(255,255,255,0.2) 2px, transparent 2px);
        background-size: 12px 12px;
        /* Maske: Soldan (%0) başlar tamamen görünür kalır, sağa doğru (%75'te) yok olur */
        mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
        pointer-events: none; z-index: 5;
    }

    /* TEKNOLOJİ EFEKTİ 2: Dikey/Yatay çizgiler ve geniş noktalar */
    .wps-overlay::after {
        content: ''; position: absolute; top: 0; 
        left: 0; width: 80%; height: 100%; /* Sola tamamen yaslandı */
        background-image: 
            radial-gradient(rgba(255,255,255,0.15) 3px, transparent 3px), 
            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), 
            linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); 
        background-size: 30px 30px, 60px 60px, 60px 60px; 
        /* Maske: Soldan (%0) başlar tamamen görünür kalır, sağa doğru (%75'te) yok olur */
        mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0%, black 75%, transparent 100%);
        pointer-events: none; z-index: 4;
    }

    /* Başlık 1 */
    .wps-title-1 {
        top: 20px; left: 60px; 
        background: transparent !important;
        color: #ffffff !important;
        font-size: 38px; padding: 0; box-shadow: none;
        text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 5px 5px 10px rgba(0,0,0,0.8);
    }

    /* 
      Başlık 2 Kutu (YENİ HİZALAMA) 
      Ortalamak yerine sola alındı ve sağdaki temiz alana taşması engellendi.
    */
    .wps-title-2 {
        bottom: 0; 
        background-color: #ff6600; 
        width: fit-content; 
        min-width: 350px;
        max-width: 60%; /* Sağdaki resme taşmasın diye %85'ten %60'a düşürüldü */
        padding: 12px 45px; 
        border-radius: 5px 5px 0 0;
        
        /* HİZALAMA DEĞİŞİKLİĞİ BURADA */
        left: 140px; /* Başlık 1 (60px) hizasından daha ileride başlıyor */
        transform: none; /* Eski ortalama kodunu iptal ettik */
        margin: 0; 
    }

    /* Başlık 2 - Ana Metin (Masaüstü) */
    .wps-t2-main {
        color: #000000; 
        font-size: 24px; margin: 0; display: block;
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.9) !important;
    }

    /* Başlık 2 - Vurgulu Alt Metin (Masaüstü) */
    .wps-t2-highlight {
        color: var(--highlight-color) !important; 
        font-size: 24px; margin: 0; display: block;
        text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, 3px 3px 6px rgba(0,0,0,0.9) !important; 
    }

    .wps-nav-arrow { display: none; }
    .wps-mobile-pagination { display: none; }

    .wps-desktop-pagination {
        display: flex; flex-direction: column; position: absolute;
        top: 50%; left: 15px; transform: translateY(-50%); z-index: 11; gap: 8px;
    }

    .wps-desktop-bullet {
        width: 25px; height: 25px; background: rgba(0,0,0,0.7); color: #fff;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-weight: bold; font-size: 13px;
        border: 1px solid #fff; transition: all 0.2s ease; pointer-events: auto; 
    }

    .wps-desktop-bullet:hover, .wps-desktop-bullet.active {
        background: #ff6600; transform: scale(1.1); border-color: #ff6600;
    }
}