.card-produk {
  width: 100%;
  /* Memastikan kartu memenuhi lebar kolom */
  height: 350px;
  /* Tinggi tetap untuk semua kartu */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  /* Mengatur elemen dalam kartu secara vertikal */
  -ms-flex-pack: justify;
      justify-content: space-between;
  /* Memberi jarak antar elemen */
}

.card-produk .image-container {
  width: 100%;
  /* Memastikan gambar memenuhi lebar container */
  height: 180px;
  /* Tinggi tetap untuk gambar */
  overflow: hidden;
  /* Gambar tidak keluar dari container */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  background-color: #f8f9fa;
  /* Warna latar jika gambar tidak dimuat */
}

.card-produk .image-container img {
  width: 100%;
  /* Gambar menyesuaikan lebar container */
  height: 100%;
  /* Gambar menyesuaikan tinggi container */
  -o-object-fit: cover;
     object-fit: cover;
  /* Memotong gambar untuk mengisi container */
}

.kotak-content {
  padding: 10px;
  /* Memberi ruang di sekitar konten */
}

.badge {
  -ms-flex-item-align: start;
      align-self: start;
  /* Membuat badge sejajar ke awal (kiri) */
}

.bg-light-custom {
  background-color: #e9ecef !important;
  /* Warna abu-abu terang lebih gelap */
}

.skeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #e0e0e0 50%, #f2f2f2 75%);
  background-size: 200% 100%;
  -webkit-animation: skeleton-loading 1.5s infinite;
          animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

/* Skeleton Loader adjustments for better contrast */
.skeleton-image {
  height: 180px;
  width: 100%;
  margin-bottom: 15px;
  background: #dee2e6;
}

.skeleton-title,
.skeleton-text,
.skeleton-badge {
  background: #ced4da;
}

@-webkit-keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}