/* Produk Kami / Our Products: catalog tile design (icon tiles + numbered captions) */
#produk .material-grid{counter-reset:produk;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 24px}
#produk .material-card{counter-increment:produk;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;display:flex;flex-direction:column}
#produk .material-card:hover{transform:translateY(-3px);box-shadow:none}
#produk .material-card:hover .material-art{box-shadow:0 12px 26px #16233a1f}
#produk .material-art{height:auto;aspect-ratio:4/3;border:1px solid #d3dbe6;border-radius:10px;background:radial-gradient(circle at 50% 38%,#fff,#e6ebf2);display:flex;align-items:center;justify-content:center;transition:box-shadow .25s ease}
#produk .material-art img{width:60%;height:auto;max-height:86%;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(20,35,60,.24))}
#produk .material-art img[src*="/uploads/"]{width:100%;height:100%;max-height:none;object-fit:cover;filter:none;border-radius:9px}
#produk .material-info{padding:12px 0 0;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline}
#produk .material-info h3{grid-column:1;grid-row:1;margin:0;font-size:14px;font-weight:600;line-height:1.3}
#produk .material-info h3 span{font-weight:500}
#produk .material-info::after{content:counter(produk,decimal-leading-zero);grid-column:2;grid-row:1;font-size:12px;color:#6b778c;font-variant-numeric:tabular-nums}
#produk .material-index{display:none}
#produk .material-info p{grid-column:1/-1;margin:6px 0 8px;font-size:12.5px;line-height:1.5;color:#6b778c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#produk .material-info .card-link,#produk .material-info .product-detail-link{grid-column:1/-1;font-size:12px}
@media (max-width:640px){#produk .material-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}#produk .material-info p{display:none}}