:root{--clr-primary:#3d7ab3;--clr-primary-dark:#2f638f;--clr-primary-light:#69add2;--clr-primary-pale:#e8f2fa;--clr-primary-soft:#c8dff2;--clr-navy:#1a3e59;--clr-navy-dark:#122c3f;--clr-accent-yellow:#f2bc3e;--clr-white:#fff;--clr-off-white:#f8f9fa;--clr-surface:#f1f5f9;--clr-border:#e2e8f0;--clr-border-dark:#cbd5e1;--clr-text:#1e293b;--clr-text-muted:#3d4a5c;--clr-text-light:#64748b;--clr-black:#0f172a;--font-primary:"Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--container-max:1200px;--container-pad:1.5rem;--radius-sm:4px;--radius-base:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 2px 8px #00000014;--shadow-md:0 8px 24px #0000001f;--shadow-lg:0 16px 40px #00000026;--shadow-blue:0 8px 24px #548fc540;--transition-fast:.2s ease;--transition-base:.35s ease;--z-dropdown:100;--z-sticky:200;--header-height:84px;--announcement-height:40px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-primary);text-align:justify;font-weight:500;font-size:var(--font-size-base);color:var(--clr-text);background:var(--clr-white);-webkit-font-smoothing:antialiased;line-height:1.6}body.announcement-visible{padding-top:calc(var(--header-height) + var(--announcement-height))}body:not(.announcement-visible){padding-top:var(--header-height)}img{max-width:100%;height:auto;display:block}a{color:var(--clr-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--clr-primary-dark)}ul,ol{list-style:none}button{cursor:pointer;font-family:var(--font-primary);background:0 0;border:none}h1,h2,h3,h4{color:var(--clr-primary);font-weight:800;line-height:1.2}p{margin-bottom:var(--space-4);text-align:justify}p:last-child{margin-bottom:0}.container{max-width:var(--container-max);padding:0 var(--container-pad);margin:0 auto}.btn{align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--font-size-sm);border-radius:var(--radius-base);transition:all var(--transition-base);text-align:center;white-space:nowrap;border:2px solid #0000;text-decoration:none;display:inline-flex}.btn--sm{padding:var(--space-2) var(--space-5);font-size:var(--font-size-sm)}.btn--primary-blue{color:var(--clr-white);box-shadow:var(--shadow-blue);background:#1a3e59;border-color:#1a3e59}.btn--primary-blue:hover{color:var(--clr-white);background:#122c3f;border-color:#122c3f;transform:translateY(-1px)}.page-hero-produk{text-align:left;background:linear-gradient(135deg,#1a3e59 0%,#244f70 100%);padding:5rem 0 3.5rem;position:relative;overflow:hidden}.page-hero-produk:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 100%,#548fc526 0%,#0000 60%);position:absolute;inset:0}.hero-bg{opacity:.12;pointer-events:none;z-index:0;background-position:50%;background-size:cover;position:absolute;inset:0}.page-hero-produk .container{z-index:1;position:relative}.page-hero-produk__eyebrow{font-size:var(--font-size-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--clr-primary-light);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-5);background:#548fc526;border:1px solid #548fc54d;font-weight:700;display:inline-block}.page-hero-produk__title{color:#fff;margin-bottom:var(--space-4);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.2}.page-hero-produk__desc{font-size:var(--font-size-md);color:#ffffffb8;max-width:620px;margin:0;line-height:1.8}.page-hero__left{max-width:560px}.breadcrumb{background:var(--clr-off-white);border-bottom:1px solid var(--clr-border);padding:.75rem 0}.breadcrumb__list{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.breadcrumb__item{color:var(--clr-text-muted);font-size:.8rem;font-weight:500}.breadcrumb__item a{color:var(--clr-text-muted)}.breadcrumb__item a:hover{color:var(--clr-primary)}.breadcrumb__sep{color:var(--clr-border-dark)}.breadcrumb__item--active{color:var(--clr-navy);font-weight:700}.produk-listing{background:#fff;padding:3rem 0 5rem}.filter-area{text-align:center;margin-bottom:2rem}.filter-area__row1{background:var(--clr-surface);border-radius:var(--radius-full);margin-inline:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:center;gap:2px;width:max-content;max-width:100%;margin-bottom:.85rem;padding:4px;display:flex;overflow-x:auto}.filter-area__row2{text-align:left;align-items:center;gap:.75rem;display:flex}.tab-btn{border-radius:var(--radius-full);color:var(--clr-text-muted);cursor:pointer;white-space:nowrap;text-align:center;background:0 0;border:none;flex:none;padding:.5rem 1.15rem;font-size:.875rem;font-weight:600;line-height:1.4;transition:background .18s,color .18s,box-shadow .18s}.tab-btn:hover{color:var(--clr-navy);background:#ffffffbf}.tab-btn.is-active{background:var(--clr-navy);color:#fff;box-shadow:0 2px 8px #1a3e5933}.syariah-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--clr-text);align-items:center;gap:.55rem;font-size:.875rem;font-weight:500;display:flex}.syariah-toggle input[type=checkbox]{appearance:none;border:1.5px solid var(--clr-border-dark);cursor:pointer;background:#fff;border-radius:3px;flex-shrink:0;width:17px;height:17px;margin:0;transition:border-color .15s,background .15s;position:relative}.syariah-toggle input[type=checkbox]:checked{background:var(--clr-primary);border-color:var(--clr-primary)}.syariah-toggle input[type=checkbox]:checked:after{content:"";border:2px solid #fff;border-top:none;border-left:none;width:6px;height:10px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.syariah-toggle__label-text{color:var(--clr-text);font-weight:500}.syariah-toggle__syariah{color:#16a34a;align-items:center;gap:.3rem;font-weight:600;display:inline-flex}.syariah-toggle__syariah svg{flex-shrink:0}.produk-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.produk-card{min-height:200px;color:inherit;background:linear-gradient(145deg,#e8f2fa 0%,#cad9ec 100%);border:none;border-radius:8px;flex-direction:column;justify-content:space-between;padding:1.5rem 1.5rem 1.4rem;text-decoration:none;transition:background .3s,box-shadow .3s;display:flex}.produk-card:hover{background:var(--clr-navy);box-shadow:0 10px 32px #1a3e5947}.produk-card__top{justify-content:space-between;align-items:flex-start;gap:.6rem;display:flex}.produk-card__name{color:var(--clr-navy);flex:1;font-size:.95rem;font-weight:700;line-height:1.4;transition:color .3s}.produk-card:hover .produk-card__name{color:#fff}.produk-card__arrow{color:var(--clr-primary);flex-shrink:0;justify-content:center;align-items:center;margin-top:.1rem;transition:color .3s;display:flex}.produk-card:hover .produk-card__arrow{color:#ffffffe6}.produk-card__badges{display:none}.produk-card__desc{color:var(--clr-text-muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-top:1rem;font-size:1rem;font-weight:600;line-height:1.75;transition:color .3s;display:-webkit-box;overflow:hidden}.produk-card:hover .produk-card__desc{color:#ffffffbf}.produk-empty{text-align:center;color:var(--clr-text-muted);grid-column:1/-1;padding:3.5rem 1rem}.produk-empty__icon{opacity:.35;width:2.5rem;height:2.5rem;color:var(--clr-text-muted);margin:0 auto .75rem;display:block}.produk-empty__text{font-size:.9rem;font-weight:500}@media (width<=1024px){.produk-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){:root{--header-height:64px;--announcement-height:48px;--container-pad:1rem}.page-hero-produk{padding:3.5rem 0 2.5rem}.produk-listing{padding:2rem 0 3.5rem}.produk-grid{grid-template-columns:1fr}.filter-area__row1{display:none}.filter-area__mobile{display:flex}}@media (width<=480px){:root{--container-pad:.875rem}}