/* =====================================
   HALAMAN PRODUK
===================================== */
.produk-page{
    padding:20px 0 50px;
	 background:#f7f8fa;
}
.produk-breadcrumb{
    margin-bottom:20px;
    font-size:15px;
    color:#000;
}
.produk-breadcrumb a{
    color:#555;
    text-decoration:none;
}

.produk-kategori{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:40px;
}
.kategori-btn{
    padding:10px 22px;
    border:none;
    border-radius:30px;
    background:#fff;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.kategori-btn:hover,
.kategori-btn.active{
    background:#FC4C02;
    color:#fff;
}
.produk-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
}
.produk-card a{
    display:block;
    position:relative;
    text-decoration:none;
}
.produk-card img{
    width:100%;
    height:300px;
    object-fit:contain;
    display:block;
    transition:.4s;
}

.produk-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.produk-card:hover img{
    transform:scale(1.08);
}
.produk-overlay{
   position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 10px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(100%);
}
.produk-card:hover .produk-overlay{
    opacity:1;
	transform: translateY(0);
}
.produk-overlay p{
    margin:0;
    font-size:15px;
    font-weight:600;
	text-align:center;
}

#produk-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.produk-pagination{
    margin-top:50px;
    text-align:center;
}

.produk-pagination .page-numbers{
    display:inline-block;
    margin:0 6px;
    padding:16px 16px;
    border-radius:8px;
    background:#fff;
    text-decoration:none;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.produk-pagination .current{
    background:#ff6600;
    color:#fff;
}

@media(max-width:991px){
#produk-list{
grid-template-columns:repeat(3,1fr);
}
 }

@media(max-width:768px){
#produk-list{
grid-template-columns:repeat(2,1fr);
}
  }

@media(max-width:480px){
#produk-list{
grid-template-columns:1fr;
}
  }