.produk-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;max-width:1200px;margin:0 auto}.produk-filters{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:30px;padding:20px;background:#f8f8f8;border-radius:8px;box-shadow:0 2px 5px rgb(0 0 0 / .05)}.produk-filters>div{margin-bottom:15px}.produk-search{flex:1;min-width:200px}.produk-search input{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:4px;transition:all 0.3s ease}.produk-search input:focus{border-color:#2ea3f2;box-shadow:0 0 5px rgb(46 163 242 / .3);outline:none}.produk-kategori,.produk-harga,.produk-sorting{min-width:200px}.produk-kategori select,.produk-harga select,.produk-sorting select{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:4px;background-color:#fff;transition:all 0.3s ease}.produk-kategori select:focus,.produk-harga select:focus,.produk-sorting select:focus{border-color:#2ea3f2;box-shadow:0 0 5px rgb(46 163 242 / .3);outline:none}.produk-short-desc{font-size:.9rem;line-height:1.5;color:#666;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.produk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}.produk-item{border:1px solid #eee;border-radius:8px;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease;background:#fff;height:100%;display:flex;flex-direction:column}.produk-item:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgb(0 0 0 / .1)}.produk-image-slider{position:relative;overflow:hidden;aspect-ratio:1/1}.produk-image-slider img{width:100%;height:100%;object-fit:cover;display:none}.produk-image-slider img.active{display:block}.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgb(0 0 0 / .3);color:#fff;border:none;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer;transition:background 0.3s;display:flex;align-items:center;justify-content:center}.slider-nav:hover{background:rgb(0 0 0 / .5)}.slider-nav.prev{left:10px}.slider-nav.next{right:10px}.slider-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px}.slider-dot{width:8px;height:8px;border-radius:50%;background:rgb(255 255 255 / .5);cursor:pointer}.slider-dot.active{background:#fff}.produk-info{padding:20px;display:flex;flex-direction:column;flex-grow:1}.produk-kategori-tag{font-size:.8rem;color:#777;margin-bottom:8px}.produk-title{font-size:1.2rem;margin:5px 0 10px;font-weight:600;line-height:1.2}.produk-price{font-size:1.1rem;color:#2ea3f2;font-weight:700;margin-bottom:15px}.produk-price-container{position:relative;margin-bottom:15px;display:flex;align-items:center}.produk-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.produk-price-regular{text-decoration:line-through;color:#999;font-size:.85em}.produk-price-current{font-weight:700;color:#2ea3f2;font-size:1.1rem}.produk-price-sale .produk-price-current{color:#e74c3c}.produk-discount-badge{background-color:#e74c3c;color:#fff;padding:3px 8px;border-radius:4px;font-size:.75rem;font-weight:700;margin-right:10px}.produk-buttons{display:flex;gap:10px;margin-top:auto}.produk-button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px;text-align:center;border-radius:4px;font-weight:600;font-size:14px;transition:all 0.3s ease;text-decoration:none;position:relative;overflow:hidden}.produk-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgb(0 0 0 / .15)}.produk-button-icon{width:16px;height:16px;flex-shrink:0;transition:transform 0.3s ease}.produk-button:hover .produk-button-icon{transform:scale(1.1)}.produk-button-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.produk-button-primary{background-color:#2ea3f2;color:#fff}.produk-button-primary:hover{background-color:#0c87d3}.produk-button-primary .produk-button-icon{color:#fff}.produk-button-secondary{background-color:#f1f1f1;color:#333}.produk-button-secondary:hover{background-color:#e0e0e0}.produk-button-secondary .produk-button-icon{color:#25D366}.produk-button:active{transform:translateY(0);transition:transform 0.1s ease}.produk-pagination{display:flex;justify-content:center;margin-top:40px;gap:5px}.produk-pagination a,.produk-pagination span{display:inline-block;padding:8px 12px;border:1px solid #ddd;border-radius:4px;text-decoration:none;color:#333;background:#fff;transition:all 0.3s ease}.produk-pagination a:hover{background-color:#f5f5f5}.produk-pagination .current{background-color:#333;color:#fff;border-color:#333}.produk-pagination a:hover{background-color:#f0f0f0;border-color:#333}.produk-loading{position:relative;min-height:200px}.produk-loading:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2ea3f2;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.produk-grid-container.produk-loading{position:relative;min-height:200px}.produk-grid-container.produk-loading:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(255 255 255 / .7);z-index:10}.produk-grid-container.produk-loading:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #2ea3f2;border-radius:50%;z-index:11;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.produk-item{animation:fadeIn 0.5s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.produk-no-results{text-align:center;padding:40px;background:#f8f8f8;border-radius:8px;color:#666}@media (max-width:768px){.produk-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.produk-filters{flex-direction:column;align-items:stretch}.produk-search,.produk-kategori,.produk-harga,.produk-sorting{width:100%}.produk-button{font-size:13px;padding:10px 12px;gap:6px}.produk-button-icon{width:14px;height:14px}}@media (max-width:480px){.produk-grid{grid-template-columns:1fr}.produk-item{margin-bottom:20px}.produk-title{font-size:1rem}.produk-buttons{flex-direction:column;gap:8px}.produk-button{width:100%;font-size:12px;padding:10px;gap:5px}.produk-button-icon{width:12px;height:12px}.produk-button-text{font-size:12px}.produk-pagination{flex-wrap:wrap;justify-content:center}.produk-pagination a,.produk-pagination span{margin:2px;padding:6px 10px;font-size:13px}.produk-filters{padding:15px 10px}.produk-image-slider{aspect-ratio:4/3}.slider-nav{width:25px;height:25px}}@media (min-width:769px){.produk-button:hover .produk-button-text{color:inherit}.produk-button-primary:hover .produk-button-icon{animation:cartBounce 0.6s ease-in-out}.produk-button-secondary:hover .produk-button-icon{animation:whatsappPulse 0.6s ease-in-out}}@keyframes cartBounce{0%,20%,60%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-3px) scale(1.1)}80%{transform:translateY(-1px) scale(1.05)}}@keyframes whatsappPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}.produk-button-secondary[style*="background-color"] .produk-button-icon{color:#25D366!important}.produk-button-secondary[style*="color: #fff"] .produk-button-icon,.produk-button-secondary[style*="color:#fff"] .produk-button-icon{color:#25D366!important}.produk-button:hover{box-shadow:0 4px 15px rgb(0 0 0 / .15)}.produk-button-primary:hover{box-shadow:0 4px 15px rgb(46 163 242 / .3)}.produk-button-secondary:hover{box-shadow:0 4px 15px rgb(37 211 102 / .2)}