/* Scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Social proof slider – geçiş JS ile yapılıyor, transition burada tanımlı */
.social-proof-slider {
  transition: transform 0.5s ease-in-out;
}

/* Product Card Styles - Trendyol benzeri */
.product-card-container {
  width: 100%;
  max-width: 280px;
  min-width: 0; /* Grid içinde taşmayı önler */
}

.pc-image-layout {
  width: 100%;
  position: relative;
  aspect-ratio: 7/10; /* 280x400 piksel oranı */
}

.pc-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive ürün kartı boyutları */
@media (max-width: 640px) {
  .product-card-container {
    max-width: 100%;
  }
  
  .pc-image-layout {
    aspect-ratio: 7/10; /* Mobilde de aynı oran */
  }
}

/* Mobil responsive iyileştirmeler */
@media (max-width: 640px) {
  /* Mobilde tablo scroll */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobilde buton boyutları (banner okları/noktalar ve ürün kartı favori hariç) */
  button:not(#banner-prev):not(#banner-next):not(.banner-dot):not(.product-card-fav-btn),
  .btn {
    min-height: 44px; /* Touch target için */
  }
  
  /* Mobilde input boyutları */
  input, select, textarea {
    font-size: 16px; /* iOS zoom önleme */
  }
  
  /* Mobilde görsel optimizasyonu */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Tablet responsive */
@media (min-width: 641px) and (max-width: 1024px) {
  .product-card-container {
    max-width: 100%;
  }
}