/* 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 */
.social-proof-slider {
  animation: slideUp 3s infinite;
}

@keyframes slideUp {
  0%, 20% {
    transform: translateY(0);
  }
  25%, 45% {
    transform: translateY(-14px);
  }
  50%, 70% {
    transform: translateY(-28px);
  }
  75%, 95% {
    transform: translateY(-42px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 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ı */
  button, .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%;
  }
}