/* ===== Katalog & Detail Template (generated pages) ===== */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; margin: 24px 0; }
.catalog-card { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.catalog-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f1ec; position: relative; }
/* Skeleton shimmer: tampil selama gambar belum selesai dimuat */
.catalog-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #efeae2 40%, #f8f5f0 50%, #efeae2 60%);
  background-size: 200% 100%;
  animation: thumb-shimmer 1.4s ease-in-out infinite;
}
.catalog-thumb img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 1;
}
.catalog-thumb img.is-loaded { opacity: 1; }
@keyframes thumb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.catalog-card:hover .catalog-thumb img { transform: scale(1.03); }
.catalog-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.catalog-body h3 { margin: 0; font-size: 1.15rem; }
.catalog-body h3 a { color: inherit; text-decoration: none; }
.catalog-desc { margin: 0; color: #555; font-size: .92rem; }
.catalog-meta { display: flex; gap: 16px; font-size: .85rem; color: #777; }
.catalog-price { font-weight: 700; color: #741B35; }
.catalog-actions { margin-top: auto; display: flex; align-items: center; gap: 16px; padding-top: 8px; }

.website-detail .detail-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.website-detail h2 { margin-top: 44px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; }
.gallery-grid figure { margin: 0; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; overflow: hidden; background: #f4f1ec; }
.gallery-grid img { width: 100%; display: block; }
.gallery-mobile { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.detail-info ul { list-style: none; padding: 0; display: grid; gap: 8px; }