:root{ --slide-h: 420px }           /* ~2 ürün karti yüksekligi */

.slider{
  position:relative; border-radius:16px; overflow:hidden;
  height:var(--slide-h); margin-bottom:18px; background:#000;
  box-shadow:0 8px 30px rgba(0,0,0,.08); border:1px solid #eee;
  -webkit-tap-highlight-color: transparent;
}

/* Ray */
.slider .slides{
  height:100%;
  display:flex;
  /* ÖNEMLI: aralik yok ve dis etkileri bastir */
  gap:0; column-gap:0; row-gap:0;
  transition:transform .5s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Slayt (figure) */
.slider .slide{
  /* ÖNEMLI: figure default margin’ini sifirla */
  margin:0 !important; padding:0;
  /* Dis CSS’ler esnetmesin */
  flex:0 0 100%; flex-shrink:0;
  height:100%; box-sizing:border-box; overflow:hidden;
}

/* Görsel */
.slider .slide img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}

/* Oklar */
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.9); color:#111; font-size:24px; line-height:40px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  z-index:5; display:flex; align-items:center; justify-content:center;
}
.slider .nav:hover{filter:brightness(1.05)}
.slider .prev{ left:12px;  right:auto; }
.slider .next{ right:12px; left:auto;  }

/* Noktalar */
.slider .dots{
  position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px;
  justify-content:center; align-items:center; z-index:4;
}
.slider .dot{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.6); box-shadow:0 2px 8px rgba(0,0,0,.24);
}
.slider .dot[aria-selected="true"]{background:#f28c28}

/* Responsive */
@media (max-width:900px){ :root{ --slide-h: 280px } }