.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;
  }
}