/* ============================================================
   TERA BANK — SLIDER DOUBLE-LAYER STABILITY FIX (FINAL)
   Animasyon yapısı DEĞİŞMEDİ.
   Eklenenler:
   • Double-layer GPU stabilizasyon (iPhone 12–14 çözümü)
   • Chrome/iPhone görsel kaybı giderildi
   • GPU layer-drop engellendi
   ============================================================ */


/* ============================
   1) GPU-SAFE BASE STABILITY
   ============================ */

.slide-bg img,
.slide-image-bottom img,
.slide-image-behind img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    image-rendering: auto !important;
    position: relative;
    z-index: 1;
    min-height: 1px;
}

.carousel-item {
    contain: layout paint style;
    transform: translateZ(0);
    will-change: opacity, transform;
}

.carousel-inner {
    perspective: 1000px;
}

.carousel-item.active .slide-bg img,
.carousel-item.active .slide-image-bottom,
.carousel-item.active .slide-image-behind,
.carousel-item.active .slide-slogan {
    animation-play-state: running !important;
}

.slide-bg,
.slide-image-bottom,
.slide-image-behind,
.slide-slogan {
    will-change: transform, opacity;
}

@supports (-webkit-overflow-scrolling: touch) {
    .slide-bg img,
    .slide-image-bottom img,
    .slide-image-behind img {
        content-visibility: auto;
        contain-intrinsic-size: 800px;
    }
}



/* ============================
   2) DOUBLE-LAYER RENDER FIX
   ============================ */

.slide-bg,
.slide-image-bottom,
.slide-image-behind {
    position: relative;
    z-index: 1;
}

.slide-bg::before,
.slide-image-bottom::before,
.slide-image-behind::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
    will-change: opacity, transform;
}


/* SLIDE 1 */
.carousel-item:nth-child(1) .slide-bg::before {
    background-image: url('../img/slide1Bg_isim.jpg');
}
.carousel-item:nth-child(1) .slide-image-bottom::before {
    background-image: url('../img/slide1_isim.png');
}
.carousel-item:nth-child(1) .slide-image-behind::before {
    background-image: url('../img/okGorselSlide.png');
}

/* SLIDE 2 */
.carousel-item:nth-child(2) .slide-bg::before {
    background-image: url('../img/slide1Bg_isim.jpg');
}
.carousel-item:nth-child(2) .slide-image-bottom::before {
    background-image: url('../img/slide2_isim.png');
}
.carousel-item:nth-child(2) .slide-image-behind::before {
    background-image: url('../img/okGorselSlide.png');
}

/* SLIDE 3 */
.carousel-item:nth-child(3) .slide-bg::before {
    background-image: url('../img/slide1Bg_isim.jpg');
}
.carousel-item:nth-child(3) .slide-image-bottom::before {
    background-image: url('../img/slide3_isim.png');
}
.carousel-item:nth-child(3) .slide-image-behind::before {
    background-image: url('../img/okGorselSlide.png');
}

/* DOUBLE-LAYER BACKUP LAYER */
.slide-bg::before,
.slide-image-bottom::before,
.slide-image-behind::before {
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* GÖRSEL KATLARI / DOĞRU SIRALAMA */

/* En arkada: slide-image-behind (OK GÖRSELİ) */
.slide-image-behind {
    position: absolute !important;
    bottom: 0;
    right: 10%; /* senin orijinal konumun */
    display: block !important;
    height: auto !important;
    width: auto !important;
    z-index: 2 !important;  /* ok arkada */
}
.slide-image-behind img {
    position: relative;
    z-index: 2 !important;
    transform: translateZ(0) !important;
}

/* Onun önünde: slide-image-bottom (büyük görsel) */
.slide-image-bottom {
    position: absolute !important;
    bottom: 0;
    right: 0;
    display: block !important;
    height: auto !important;
    width: auto!important;
    z-index: 3 !important; /* büyük görsel önde */
}
.slide-image-bottom img {
    position: relative;
    z-index: 3 !important;
    transform: translateZ(0) !important;
}

/* Üstteki wrapper’ların da z-index çatışması olmasın diye */
.slide-bg img {
    z-index: 1 !important;
}

/* SLIDER HEIGHT FIX */
#carouselTera,
#carouselTera .carousel-inner,
#carouselTera .carousel-item,
#carouselTera .slide-bg {
   height: calc(1080px - 115.5px); 
}
.slide-heading {
    z-index: 10 !important;
}

@media (max-width:1600px){
    #carouselTera,
#carouselTera .carousel-inner,
#carouselTera .carousel-item,
#carouselTera .slide-bg {
   height: calc(800px - 115.5px); 
}
}
@media (max-width:1440px) {
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
         height: calc(900px - 115.5px); 
    }
}
@media (max-width:1368px) {
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
         height: calc(800px - 115.5px); 
    }
}
@media (max-width: 1024px) {
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
         height: calc(800px - 115.5px); 
    }
}
/* ================================================
   1) TABLET & MOBIL (max-width: 768px)
   ================================================ */
@media (max-width: 768px) {

    /* Slider height */
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
        height: 600px;
    }

    /* OK GÖRSELİ (arka plan) — Gizli */
    .slide-image-behind {
        display: none !important;
    }

    /* ALT GÖRSEL (banka kartı vb.) — Ortala */
    .slide-image-bottom {
        width: 300px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .slide-image-bottom img {
        width: 100% !important;
        height: auto !important;
    }
}


/* ================================================
   2) MOBILE (max-width: 480px)
   ================================================ */
@media (max-width: 480px) {

    /* Slider height */
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
        height: 540px;
    }

    /* iOS Animation Reset Fix */
    .ios-anim-reset {
        animation-duration: inherit !important;
        animation-delay: inherit !important;
        animation-fill-mode: both !important;
        opacity: 1 !important;
        backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }

    /* iOS reset sonrası görsel pozisyon sabitleme */
    .slide-image-bottom.ios-anim-reset,
    .slide-image-bottom img.ios-anim-reset {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .slide-image-behind.ios-anim-reset,
    .slide-image-behind img.ios-anim-reset {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Mobilde heading komple gizli (sorun çıkarmasın diye) */
    .slide-heading,
    .slide-heading .heading-text {
        display: none !important;
    }
}



@media (max-width:360px) {
    #carouselTera,
    #carouselTera .carousel-inner,
    #carouselTera .carousel-item,
    #carouselTera .slide-bg {
        height:480px; 
    }
}