.product-modal__backdrop{z-index:1000;-webkit-backdrop-filter:blur(4px);padding:var(--space-md);background:#0009;justify-content:center;align-items:center;animation:.3s modalFadeIn;display:flex;position:fixed;inset:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.product-modal{background:var(--color-white);border-radius:var(--radius-lg);width:100%;max-width:900px;max-height:90vh;animation:.3s modalSlideUp;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0000004d}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.product-modal__close{top:var(--space-sm);right:var(--space-sm);z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-border-light);border-radius:var(--radius-full);width:40px;height:40px;color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);background:#ffffffe6;justify-content:center;align-items:center;display:flex;position:absolute}.product-modal__close:hover{background:var(--color-text);color:var(--color-white)}.product-modal__body{grid-template-columns:1fr;display:grid}@media (min-width:768px){.product-modal__body{grid-template-columns:1fr 1fr}}.product-modal__image-wrapper{border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:300px;position:relative;overflow:hidden}@media (min-width:768px){.product-modal__image-wrapper{border-radius:var(--radius-lg) 0 0 var(--radius-lg);height:100%;min-height:500px}}.product-modal__image{object-fit:cover}.product-modal__details{padding:var(--space-lg);overflow-y:auto}.product-modal__emoji{margin-bottom:var(--space-xs);font-size:2.5rem;display:block}.product-modal__name{font-size:var(--fs-h2);color:var(--color-text);margin-bottom:4px;font-weight:800}.product-modal__tagline{font-family:var(--font-heading);font-size:var(--fs-small);color:var(--color-accent);margin-bottom:var(--space-sm);font-weight:600}.product-modal__description{color:var(--color-text-light);margin-bottom:var(--space-md);font-size:.95rem;line-height:1.8}.product-modal__section{margin-bottom:var(--space-md)}.product-modal__section:last-child{margin-bottom:0}.product-modal__section-title{color:var(--color-primary);margin-bottom:var(--space-xs);align-items:center;gap:6px;font-size:1rem;font-weight:700;display:flex}.product-modal__list{margin:0;padding:0;list-style:none}.product-modal__list li{font-size:var(--fs-small);color:var(--color-text-light);margin-bottom:4px;padding-left:18px;line-height:1.6;position:relative}.product-modal__list li:before{content:"•";color:var(--color-primary);font-weight:700;position:absolute;left:0}.product-modal__list--benefits li:before{content:"✓";color:var(--color-primary)}.product-modal::-webkit-scrollbar{width:6px}.product-modal::-webkit-scrollbar-track{background:0 0}.product-modal::-webkit-scrollbar-thumb{background:var(--color-border-light);border-radius:var(--radius-full)}
.produk-hero{padding:calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-2xl);position:relative;overflow:hidden}.produk-hero__bg{background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent-dark) 100%);position:absolute;inset:0}.produk-hero__bg:before{content:"";background:#ffffff0a;border-radius:50%;width:400px;height:400px;position:absolute;bottom:-30%;left:-10%}.produk-hero__content{z-index:1;text-align:center;position:relative}.produk-hero__title{font-size:var(--fs-hero);color:var(--color-white);margin-bottom:var(--space-xs);font-weight:800}.produk-hero__subtitle{color:#ffffffd9;max-width:600px;margin:0 auto;font-size:1.1rem;line-height:1.7}.produk-grid{gap:var(--space-md);grid-template-columns:1fr;display:grid}@media (min-width:640px){.produk-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.produk-grid{grid-template-columns:repeat(3,1fr)}}.produk-card{border-radius:var(--radius-lg);background:var(--color-white);box-shadow:var(--shadow-card);border:1px solid var(--color-border-light);transition:all var(--transition-base);cursor:pointer;outline:none;overflow:hidden}.produk-card:hover,.produk-card:focus-visible{box-shadow:var(--shadow-card-hover);transform:translateY(-6px)}.produk-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.produk-card__image-wrapper{width:100%;height:240px;position:relative;overflow:hidden}@media (min-width:768px){.produk-card__image-wrapper{height:260px}}.produk-card__image{object-fit:cover;transition:transform var(--transition-slow)}.produk-card:hover .produk-card__image{transform:scale(1.08)}.produk-card__overlay{transition:background var(--transition-base);background:0 0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.produk-card:hover .produk-card__overlay{background:#00000059}.produk-card__view{background:var(--color-white);color:var(--color-primary);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);border-radius:var(--radius-full);opacity:0;transition:all var(--transition-base);padding:8px 20px;display:inline-block;transform:translateY(10px)}.produk-card:hover .produk-card__view{opacity:1;transform:translateY(0)}.produk-card__content{padding:var(--space-md);text-align:center}.produk-card__emoji{margin-bottom:var(--space-xs);font-size:2rem;display:block}.produk-card__name{font-size:var(--fs-h4);color:var(--color-text);margin-bottom:4px;font-weight:700}.produk-card__tagline{font-size:var(--fs-small);color:var(--color-text-light);line-height:1.5}