/* public/assets/css/custom.css
   Styling tambahan di luar utility class Tailwind (Tailwind CDN tidak bisa
   di-purge/extend lewat config file, jadi custom CSS murni taruh di sini). */

html {
  scroll-behavior: smooth;
}

/* Scrollbar tipis & rapi */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #c7c9f7;
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background-color: #f3f4f6;
}

/* Animasi fade-in sederhana untuk konten yang muncul */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading (opsional dipakai saat fetch data via JS) */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.2s infinite;
}
@keyframes skeletonLoading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pastikan gambar produk tidak gepeng di semua ukuran layar */
img {
  max-width: 100%;
  height: auto;
}