/* ========================================================= */
/* 🧵 POPÜLER ÜRÜNLER – SLIDER FINAL (TASARIM A)             */
/* ========================================================= */

.popular {
  padding: 80px 20px;
  text-align: center;
  background: #f8f6f2;
  overflow: hidden;
}

.popular h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #3e3e3e;
}

/* Slider dış çerçeve */
.scroll-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track – hareket eden alan */
.scroll-inner {
  display: flex;
  gap: 25px;
  width: max-content;
  will-change: transform;
}

/* Sonsuz animasyon (masaüstü geneli) */
@keyframes scrollLoop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hover durdurma */
@media (hover: hover) {
  .scroll-slider:hover .scroll-inner {
    animation-play-state: paused;
  }
}

/* ========================= */
/* 🟨 KART TASARIMI – A MODEL */
/* ========================= */
.slide {
  min-width: 260px;
  max-width: 260px;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover:hover) {
  .slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  }
}

.slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}



.slide h3 {
  margin: 10px 0 4px;
  font-size: 1rem;
  color: #3e3e3e;
}

/* Fiyat bölümü */
.pop-price {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pop-price .old-price {
  font-size: 0.9rem;
  color: #b7a99a;
  text-decoration: line-through;
}

.pop-price .new-price {
  font-size: 1.2rem;
  color: #b79d83;
  font-weight: 700;
}

.pop-price .discount-tag {
  background: #b79d83;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
}

/* ⭐ BEST TAG */
.best-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(45deg, #b79d83, #d8c2a3);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}

/* ========================================================= */
/* 🖥️ MASAÜSTÜ OTOMATİK ANİMASYON                          */
/* ========================================================= */
@media (min-width: 901px) {
  .scroll-slider {
    overflow: hidden;
  }

  .scroll-inner {
    animation: scrollLoop 25s linear infinite;
  }
}

/* ========================================================= */
/* 📱 MOBİL SÜRÜKLEME                                        */
/* ========================================================= */
@media (max-width: 900px) {

  /* Animasyonu tamamen kapat */
  .scroll-inner {
    animation: none !important;
    transform: none !important;
    display: flex;
    gap: 15px;
    scroll-snap-type: x mandatory;
    width: max-content;
  }

  /* Mobil için yatay kaydırma aktif */
  .scroll-slider {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .scroll-slider::-webkit-scrollbar {
    display: none; /* istersen görünmez scrollbar */
  }

  .slide {
    scroll-snap-align: start;
  }
}
/* ========================================================= */
/* 📱 MOBİL SÜRÜKLEME + KART KÜÇÜLTME                       */
/* ========================================================= */
@media (max-width: 900px) {

  /* Animasyonu kapat */
  .scroll-inner {
    animation: none !important;
    transform: none !important;
    display: flex;
    gap: 15px;
    scroll-snap-type: x mandatory;
    width: max-content;
  }

  .scroll-slider {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .scroll-slider::-webkit-scrollbar {
    display: none;
  }

  /* 🔥 KART: YÜKSEKLİĞİ SERBEST BIRAK */
  .slide {
    min-width: 200px;
    max-width: 200px;
    padding: 15px;
    scroll-snap-align: start;

    /* EN KRİTİK SATIR */
    min-height: 320px;   /* ✅ fiyat + yazı için alan */
    display: flex;
    flex-direction: column;
  }

  /* 🔥 RESİM: KARE AMA SADECE RESİM */
  .slide img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    flex-shrink: 0;
  }

  /* 🔥 METİN ALANI */
  .slide h3 {
    font-size: 0.95rem;
    margin: 10px 0 6px;
    line-height: 1.25;
    flex-shrink: 0;
  }

  /* 🔥 FİYAT ALANI */
  .pop-price {
    margin-top: auto;     /* 👈 fiyatı alta sabitler */
    gap: 4px;
    display: flex;
    flex-direction: column;
  }

  .pop-price .new-price {
    font-size: 1.15rem;
    font-weight: 700;
  }
}