/* =========================================================
   1. فك الحصار عن الحاويات الخارجية لمنع أي قص للصور
   ========================================================= */
.banners-slider--15,
.banners-slider--15 .container,
.banners-slider--15 salla-slider,
.banners-slider--15 .s-slider-block__title,
.banners-slider--15 .s-slider-block__title-left {
    overflow: visible !important;
    display: block !important;
}

/* 2. تهيئة الحاوية وتوسيع المساحة لتستوعب حركة الصور كاملة */
.banners-slider--15 .swiper {
    perspective: 1600px !important;
    overflow: visible !important;
    padding: 100px 0 !important;
    position: relative !important;
    height: 400px !important;
}

/* 3. إلغاء الإزاحة الطولية وتثبيت نقطة الارتكاز في المنتصف */
.banners-slider--15 .swiper-wrapper {
    transform-style: preserve-3d !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: none !important; /* تثبيت الصدارة للمركز */
    width: 100% !important;
    height: 100% !important;
}

/* 4. الإعداد الافتراضي لكافة الكروت التسعة */
.banners-slider--15 .swiper-slide {
    position: absolute !important; /* تجميع الكروت في المنتصف لتوزيعها دائرياً */
    width: 200px !important;
    height: 320px !important;
    opacity: 0 !important; /* الكروت البعيدة جداً تختفي حتى يقترب دورها في الدوران */
    visibility: hidden !important;
    filter: none !important;
    transform: scale(0.6) translateZ(-400px) !important; /* دفع الكروت الخلفية البعيدة لعمق الشاشة */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s, z-index 0.6s !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.banners-slider--15 .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

/* =========================================================
   5. نظام التوزيع الدائري الكامل لجميع الصور التسعة أثناء الدوران اللانهائي
   ========================================================= */

/* [المركز] العنصر النشط المستهدف برؤيته (الصورة رقم 1 في المنتصف) */
.banners-slider--15 .swiper-slide-active,
.banners-slider--15 .swiper-slide-duplicate-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.2) translateY(-20px) translateZ(200px) !important;
    z-index: 100 !important;
}

/* [الدائرة القريبة] العناصر المجاورة مباشرة (الصورة رقم 2 ورقم 3 يميناً ويساراً) */
.banners-slider--15 .swiper-slide-prev,
.banners-slider--15 .swiper-slide-duplicate-prev {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(0.95) translateX(-155px) translateY(10px) translateZ(50px) rotateY(20deg) !important;
    z-index: 50 !important;
}
.banners-slider--15 .swiper-slide-next,
.banners-slider--15 .swiper-slide-duplicate-next {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(0.95) translateX(155px) translateY(10px) translateZ(50px) rotateY(-20deg) !important;
    z-index: 50 !important;
}

/* [الدائرة المتوسطة] العناصر الأبعد خطوة (الصورة رقم 4 ورقم 5 يميناً ويساراً) */
.banners-slider--15 .swiper-slide-prev-prev, 
.banners-slider--15 .swiper-slide:has(+ .swiper-slide-prev),
.banners-slider--15 .swiper-slide-duplicate:has(+ .swiper-slide-duplicate-prev) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(0.75) translateX(-280px) translateY(35px) translateZ(-100px) rotateY(35deg) !important;
    z-index: 20 !important;
}
.banners-slider--15 .swiper-slide-next + .swiper-slide,
.banners-slider--15 .swiper-slide-duplicate-next + .swiper-slide-duplicate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(0.75) translateX(280px) translateY(35px) translateZ(-100px) rotateY(-35deg) !important;
    z-index: 20 !important;
}

/* [الدائرة الخلفية] الكروت المتبقية في الخلف (الصورة 6، 7، 8، 9 تظهر تدريجياً في عمق الالتفاف لمنع الاختفاء المفاجئ) */
.banners-slider--15 .swiper-slide-next + .swiper-slide + .swiper-slide,
.banners-slider--15 .swiper-slide-duplicate-next + .swiper-slide-duplicate + .swiper-slide-duplicate {
    opacity: 0.6 !important;
    visibility: visible !important;
    transform: scale(0.6) translateX(380px) translateY(55px) translateZ(-250px) rotateY(-45deg) !important;
    z-index: 10 !important;
}
.banners-slider--15 .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev),
.banners-slider--15 .swiper-slide-duplicate:has(+ .swiper-slide + .swiper-slide-duplicate-prev) {
    opacity: 0.6 !important;
    visibility: visible !important;
    transform: scale(0.6) translateX(-380px) translateY(55px) translateZ(-250px) rotateY(45deg) !important;
    z-index: 10 !important;
  
}