/* ===============================================
   MAIN SLIDER OVERLAY & GRADIENT EFFECTS
   =============================================== */

/* Her slide'a overlay efekti ekle */
.tp-portfolio-11-slider-bg {
    position: relative;
}

.tp-portfolio-11-slider-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Resim üstünde düşük opacity siyahlık */
    z-index: 1;
    pointer-events: none;
}

/* Sol alt köşeden başlayan gradient overlay */
.tp-portfolio-11-slider-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Yazıların üstte görünmesi için */
.tp-portfolio-11-slider-content {
    position: relative;
    z-index: 3;
}

/* Mobilde gradient efekti daha az olsun */
@media (max-width: 768px) {
    .tp-portfolio-11-slider-bg::before {
        background: rgba(0, 0, 0, 0.3); /* Mobilde daha hafif */
    }
    
    .tp-portfolio-11-slider-bg::after {
        /* height: 80%;  */
        background: linear-gradient(
            to top right,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

/* ===============================================
   NAVIGATOR SLIDER THUMB OVERLAY
   =============================================== */

/* Navigator küçük resimlere hafif overlay */
.tp-portfolio-11-slider-nav-thumb {
    position: relative;
    overflow: hidden;
}

.tp-portfolio-11-slider-nav-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); /* Hafif siyah opacity */
    z-index: 1;
    pointer-events: none;
}

/* Navigator resimlerin üstte görünmesi için */
.tp-portfolio-11-slider-nav-thumb img {
    position: relative;
    z-index: 0;
}