/* CSS عام */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            direction: rtl;
            background-color: #f8f9fa;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }



.slider{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  height: 420px;
  background:#0b1220;

  /* ✅ فراغ خارجي يمين/يسار (بدون فراغ داخلي) */
  width: min(1200px, calc(100% - 44px));
  margin: 0 auto;
}

@media (max-width: 992px){
  .slider{ height: 360px; width: calc(100% - 28px); }
}
@media (max-width: 768px){
  .slider{ height: 300px; width: calc(100% - 20px); }
}
@media (max-width: 480px){
  .slider{ height: 260px; width: calc(100% - 16px); }
}

.slides-container{width:100%;height:100%;}
.slides{
  display:flex;
  height:100%;
  width:100%;
  transition: transform .6s ease;
  will-change: transform;
}
.slide{
  flex: 0 0 100%;
  width:100%;
  height:100%;
  position:relative;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.slide::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05));
  z-index:1;
}

.slide-content{
  position:absolute;
  z-index:2;
  top:50%;
  right:6%;
  transform:translateY(-50%);
  color:#fff;
  max-width:560px;
}

@media (max-width: 768px){
  .slide-content{ right:5%; max-width: 90%; }
}

.slide-btn{
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.15);
  color:#fff;
  cursor:pointer;
}

/* الأسهم */
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
}

.slider-arrow.prev{ right:14px; }
.slider-arrow.next{ left:14px; }

.slider-controls{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
}
.slider-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.slider-dot.active{
  width:22px;border-radius:999px;
  background:#fff;
}