/* Genel amaçlı yatay kaydırma şeridi (karusel).
   Ana sayfada hem ürün kartları hem müşteri yorumları için kullanılır.
   Kart genişliği --kd-kart değişkeniyle her kullanım için ayrı ayarlanabilir. */

.kaydirici { position: relative; }

/* Kaydırılan ray */
.kd-ray {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* proximity: kartları hizalar ama programlı kaydırmayı engellemez.
     mandatory kullanılırsa tarayıcı kaydırmayı başa geri çeker. */
  scroll-snap-type: x proximity;
  /* scroll-behavior: smooth KULLANILMIYOR — bazı tarayıcı/gömülü görünümlerde
     hiç çalışmıyor. Yumuşak geçiş kaydirici.js içinde elle yapılır. */
  scroll-padding-left: 2px;
  padding: 4px 2px 20px;           /* alt boşluk: kart gölgesi kesilmesin */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;
}
.kd-ray::-webkit-scrollbar { display: none; }
.kd-ray:focus-visible { outline: 2px solid #D72420; outline-offset: 4px; border-radius: 12px; }

@media (min-width: 640px) { .kd-ray { gap: 24px; } }

/* Kartlar: sabit genişlik, küçülmesin.
   Genişlik medya sorgusu olmadan çözülür: geniş ekranda --kd-kart,
   dar ekranda ekranın %78'i (sonraki kartın ucu görünsün diye). */
.kd-kart {
  flex: 0 0 min(var(--kd-kart, 300px), 78vw);
  scroll-snap-align: start;
  min-height: 260px;
}
@media (max-width: 640px) { .kd-kart { min-height: 230px; } }

/* Kenarlarda soluklaşma — daha fazla içerik olduğunu belli eder */
.kaydirici::before,
.kaydirici::after {
  content: "";
  position: absolute;
  top: 0; bottom: 20px;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}
.kaydirici::before { left: 0;  background: linear-gradient(to right, #ffffff 15%, rgba(255,255,255,0)); }
.kaydirici::after  { right: 0; background: linear-gradient(to left,  #ffffff 15%, rgba(255,255,255,0)); }
.kaydirici.kd-sol-var::before { opacity: 1; }
.kaydirici.kd-sag-var::after  { opacity: 1; }

/* Oklar */
.kd-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  background: #ffffff;
  color: #064C85;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(6, 76, 133,.14);
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s, box-shadow .2s;
}
.kd-ok:hover { background: #064C85; color: #ffffff; }
.kd-ok:focus-visible { outline: 2px solid #D72420; outline-offset: 2px; }
.kd-ok[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.kd-ok[disabled]:hover { background: #ffffff; color: #064C85; }
.kd-ok-sol { left: -18px; }
.kd-ok-sag { right: -18px; }

/* Oklar yalnızca imleçli (dokunmatik olmayan) cihazlarda */
@media (hover: hover) and (pointer: fine) {
  .kd-ok { display: flex; }
}

/* İlerleme noktaları */
.kd-noktalar {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}
.kd-nokta {
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #E2E8F0;
  border: 0; padding: 0;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.kd-nokta.aktif { width: 22px; background: #064C85; }

@media (prefers-reduced-motion: reduce) {
  .kd-ok, .kd-nokta, .kaydirici::before, .kaydirici::after { transition: none; }
}

/* Dokunma hedefi 40px - gorsel nokta 7px kalir */
.kd-nokta { position: relative; }
.kd-nokta::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; }