.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:40px;margin:40px 0;border-bottom:1px solid #e8e8e8;padding-bottom:18px}.kategori-btn{position:relative;border:none;background:none;padding:0;font-size:17px;font-weight:600;color:#666;cursor:pointer;transition:.3s}.kategori-btn:hover{color:#FC4C02}.kategori-btn::after{content:"";position:absolute;left:0;bottom:-19px;width:0;height:3px;border-radius:50px;background:#E84D0A;transition:.35s}.kategori-btn.active::after{width:100%}.kategori-btn{transform:translateY(0)}.kategori-btn:hover{transform:translateY(-2px)}.produk-card{position:relative;overflow:hidden;border-radius:22px;background:#fff;aspect-ratio:1/1;box-shadow:0 10px 30px rgb(0 0 0 / .08)}.produk-card a{display:block;width:100%;height:100%}.produk-card img{width:100%;height:250px;object-fit:contain;display:block;transition:.35s}.produk-card:hover{transform:translateY(-10px);box-shadow:0 25px 45px rgb(0 0 0 / .18)}.produk-card:hover img{transform:scale(1.08)}.produk-card:hover .produk-overlay{opacity:1;transform:translateY(0)}.produk-overlay{position:absolute;bottom:0;left:0;width:100%;background:rgb(0 0 0 / .7);color:#fff;font-size:15px;font-weight:500;padding:15px 10px;font-family:'Fredoka',sans-serif;box-sizing:border-box;transition:opacity 0.3s ease,transform 0.3s ease;opacity:0;transform:translateY(100%)}.produk-overlay p{margin:0;font-size:15px;font-weight:600;text-align:center;font-family:'Fredoka',sans-serif}.produk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;min-height:420px}.produk-pagination{display:flex;justify-content:center;align-items:center;gap:6px;list-style:none;margin-top:40px}.produk-pagination .page-numbers{display:inline-block;padding:6px 12px;text-decor ation:none;border:1p x solid #dcdcdc;color:#33 3;border-radius:5px;cursor:pointer;transition:al l 0.2s ease;font-weight:50 0;background:#fff box-shadow:0 5px 15px rgb(0 0 0 / .08)}.produk-pagination .page-numbers:hover{border-color:#f60;color:#ff600}.produk-pagination .current{background:#f60;border-color:#f60;color:#fff;cursor:default}@keyframes produkFade{to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:991px){.produk-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.produk-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.produk-grid{grid-template-columns:1fr}}.produk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;min-height:420px}.produk-grid.is-loading{opacity:.3;transform:scale(.99);pointer-events:none}.produk-card{opacity:0;transform:translateY(12px);transition:opacity 0.25s ease,transform 0.25s ease,box-shadow 0.35s ease}.produk-card.is-visible{opacity:1;transform:translateY(0)}.produk-card:nth-child(1){animation-delay:.02s;.produk-grid.is-loading{opacity:.3;transform:scale(.99);pointer-events:none}}.produk-card:nth-child(2){animation-delay:.04s}.produk-card:nth-child(3){animation-delay:.06s}.produk-card:nth-child(4){animation-delay:.08s}.produk-card:nth-child(5){animation-delay:.10s}.produk-card:nth-child(6){animation-delay:.12s}.produk-card:nth-child(7){animation-delay:.14s}.produk-card:nth-child(8){animation-delay:.16s}.produk-card:nth-child(9){animation-delay:.18s}.produk-card:nth-child(10){animation-delay:.20s}.produk-card:nth-child(11){animation-delay:.22s}.produk-card:nth-child(12){animation-delay:.24s}@keyframes produkFade{to{opacity:1;transform:translateY(0) scale(1)}}.kategori-btn.active{color:#000;transform:translateY(-3px);box-shadow:0 10px 25px rgb(0 0 0 / .15)}