/* assets/css/style.css */
:root { 
    --primary: #0f766e; 
    --button-radius: 40px; 
    --product-gap: 0.8rem;
}
.btn-primary { background-color: var(--primary); border-radius: var(--button-radius); transition: all 0.3s ease; }
.btn-primary:active { transform: scale(0.97); }
.scroll-horizontal { scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scroll-horizontal::-webkit-scrollbar { height: 4px; }
.wa-float { position: fixed; bottom: 80px; right: 16px; z-index: 50; }
@media (min-width: 640px) { .wa-float { bottom: 24px; right: 24px; } }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Animasi */
html { scroll-behavior: smooth; }
.navbar { animation: slideDown 0.6s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
.hero-slider { animation: fadeZoom 0.8s ease-out; }
@keyframes fadeZoom { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.kategori-section { animation: slideFromRight 0.7s ease-out; }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
.produk-section { animation: slideFromLeft 0.7s ease-out; }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
.cara-pemesanan-section { animation: zoomIn 0.7s ease-out; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.portfolio-section, .testimoni-section { animation: fadeUp 0.7s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.cta-section { animation: gentleBounce 0.8s ease-out; }
@keyframes gentleBounce { 0% { opacity: 0; transform: scale(0.95); } 70% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } }
.faq-section { animation: slideFromBottom 0.7s ease-out; }
@keyframes slideFromBottom { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
.maps-section { animation: fadeIn 0.8s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.footer { animation: slideUp 0.6s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.produk-grid .product-card:nth-child(odd) { animation: slideFromLeft 0.6s ease-out; }
.produk-grid .product-card:nth-child(even) { animation: slideFromRight 0.6s ease-out; }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

.product-card, .blog-card, .portfolio-item, .btn-primary { transition: all 0.3s ease; }
.product-card:hover, .blog-card:hover, .portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -12px rgba(0,0,0,0.15); }
.btn-primary:hover { transform: scale(1.02); filter: brightness(1.05); }