.service-area-section{background:var(--bg-light);border-top:1px solid var(--border-color);width:100%;padding:80px 0}.service-area-container{max-width:var(--container-width);margin:0 auto}.service-area-header{text-align:center;max-width:760px;margin:0 auto 48px}.service-area-eyebrow{border-radius:var(--radius-sm);background:var(--bg-soft);color:var(--secondary-color);letter-spacing:.08em;text-transform:uppercase;align-items:center;padding:6px 12px;font-size:.6875rem;font-weight:700;line-height:1.2;display:inline-flex}.service-area-title{color:var(--text-primary);font-family:var(--font-heading);margin-top:10px;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.2}.service-area-title span{color:var(--secondary-color)}.service-area-description{max-width:700px;color:var(--text-secondary);margin:12px auto 0;font-size:1rem;line-height:1.7}.service-area-card{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:32px}.service-area-search{margin-bottom:24px;position:relative}.service-area-search i{color:var(--text-secondary);pointer-events:none;font-size:20px;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.service-area-search input{background:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;height:48px;color:var(--text-primary);font-family:var(--font-primary);box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);outline:none;padding:0 16px 0 46px;font-size:.875rem}.service-area-search input::placeholder{color:var(--text-muted)}.service-area-search input:hover{box-shadow:var(--shadow-md)}.service-area-search input:focus{background:var(--bg-color);border-color:var(--secondary-color);box-shadow:0 0 0 3px #009b621a}.service-area-list{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;height:400px;padding-right:10px;display:grid;overflow:hidden auto}.service-area-list::-webkit-scrollbar{width:6px}.service-area-list::-webkit-scrollbar-track{background:0 0}.service-area-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}.service-area-list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.service-province{min-width:0}.service-province-title{z-index:2;background:var(--bg-color);color:var(--text-primary);margin-bottom:10px;padding:7px 4px;font-size:.9375rem;font-weight:700;line-height:1.4;position:sticky;top:0}.service-city-list{flex-direction:column;gap:5px;list-style:none;display:flex}.service-city-item{min-width:0}.service-city-link{color:var(--text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast), background var(--transition-fast);align-items:flex-start;gap:8px;padding:5px 4px;font-size:.875rem;line-height:1.5;display:flex}.service-city-link i{color:var(--secondary-color);transition:transform var(--transition-fast);flex:none;margin-top:2px;font-size:16px}.service-city-link span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.service-city-link:hover{background:var(--bg-light);color:var(--secondary-color)}.service-city-link:hover i{transform:translateY(-1px)}.service-area-footer{border-top:1px solid var(--border-color);text-align:center;margin-top:28px;padding-top:20px}.service-area-footer p{color:var(--text-secondary);font-size:.8125rem;line-height:1.6}.service-area-footer a{color:var(--secondary-color);font-weight:700}.service-area-footer a:hover{color:var(--secondary-dark);text-decoration:underline}.service-province.is-hidden{display:none}.service-area-empty{color:var(--text-muted);text-align:center;grid-column:1/-1;padding:48px 20px;display:none}.service-area-empty.is-visible{display:block}.service-area-empty i{margin-bottom:8px;font-size:32px;display:block}@media (width<=1100px){.service-area-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=900px){.service-area-section{padding:64px 0}.service-area-card{padding:24px}.service-area-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.service-area-section{padding:56px 0}.service-area-header{margin-bottom:32px}.service-area-title{font-size:1.6rem}.service-area-description{font-size:.875rem}.service-area-card{border-radius:var(--radius-md);padding:16px}.service-area-list{grid-template-columns:1fr;gap:20px;height:420px}.service-area-footer{margin-top:20px;padding-top:16px}}.service-city-kecamatan{color:var(--on-surface-variant,#6b7280);max-width:90%;margin:2px 0 6px 22px;font-size:.72rem;line-height:1.3;display:block}