.welcome-section{padding-top:var(--space-8);padding-bottom:var(--space-6);background-color:#FFFFFF;text-align:center}
.welcome-header{max-width:820px;margin:0 auto var(--space-5);text-align:center}
.welcome-title{font-size:1.5rem;font-weight:800;color:var(--navy-800);margin-top:var(--space-2);margin-bottom:var(--space-2);line-height:var(--leading-tight)}
@media (min-width:640px){.welcome-title{font-size:1.85rem}}
@media (min-width:1024px){.welcome-title{font-size:2.25rem}}
.welcome-subtitle{font-size:var(--text-sm);color:var(--ink-600);margin-bottom:0}
.welcome-photo-frame{max-width:960px;margin:0 auto;border:2.5px solid var(--orange-600);border-radius:var(--radius-lg);overflow:hidden;background-color:#FFFFFF;box-shadow:0 4px 16px rgba(194,65,12,0.08)}
.welcome-photo-frame img{width:100%;height:auto;aspect-ratio:960/232;object-fit:cover;object-position:center;display:block}
.hero{padding-top:var(--space-8);padding-bottom:var(--space-10);background-color:#FFFFFF;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:start}
@media (min-width:992px){.hero-grid{grid-template-columns:1.15fr 0.85fr;gap:var(--space-10);align-items:center}
}
.hero-badge{display:inline-flex;margin-bottom:var(--space-3)}
.hero-title{font-size:1.45rem;font-weight:800;color:var(--navy-900);margin-bottom:var(--space-3);line-height:1.25;overflow-wrap:break-word}
@media (min-width:640px){.hero-title{font-size:1.85rem}
}
@media (min-width:1024px){.hero-title{font-size:2.25rem}
}
.hero-lead{font-size:var(--text-base);color:var(--ink-700);line-height:var(--leading-normal);margin-bottom:var(--space-5)}
.hero-trust-list{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-6);padding:0;list-style:none}
.hero-trust-item{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-900);font-weight:600;line-height:1.45}
.hero-trust-item .icon{margin-top:2px;flex-shrink:0}
.hero-trust-item span{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}
@media (max-width:640px){.hero-actions{flex-direction:column;width:100%}
.hero-actions .btn{width:100%;justify-content:center}
}
.hero-schedule-card{background-color:#FFFFFF;border:2px solid var(--orange-600);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:0 4px 16px rgba(232, 89, 12, 0.08)}
.hero-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.hero-card-title{font-size:var(--text-md);font-weight:700;color:var(--navy-800);display:flex;align-items:center;gap:var(--space-2);margin:0}
.hero-schedule-list{list-style:none;margin:0;padding:0}
.hero-schedule-item{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--text-sm);border-bottom:1px dashed var(--line)}
.hero-schedule-item:last-child{border-bottom:none}
.hero-schedule-day{font-weight:600;color:var(--ink-900)}
.hero-schedule-hours{color:var(--orange-700);font-weight:700}
.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:var(--space-4);margin-top:calc(-1 * var(--space-6));position:relative;z-index:10;margin-bottom:var(--space-12)}
.shortcut-card{background-color:#FFFFFF;border:1.5px solid var(--orange-400);border-radius:var(--radius-md);padding:var(--space-5);text-decoration:none;color:inherit;box-shadow:var(--shadow-card);transition:all var(--transition-fast);display:flex;flex-direction:column;justify-content:space-between}
.shortcut-card:hover{border-color:var(--orange-600);transform:translateY(-2px);text-decoration:none}
.shortcut-icon{width:40px;height:40px;border-radius:var(--radius-md);background-color:#FFFFFF;border:1.5px solid var(--orange-600);color:var(--orange-700);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3)}
.shortcut-title{font-size:var(--text-md);font-weight:700;color:var(--navy-800);margin-bottom:var(--space-1)}
.shortcut-desc{font-size:var(--text-xs);color:var(--ink-600);margin-bottom:0}
.section{padding-top:var(--space-10);padding-bottom:var(--space-10)}
.section-alt{background-color:#FFFFFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-header{margin-bottom:var(--space-8);max-width:720px}
.section-title{font-size:var(--text-2xl);font-weight:800;color:var(--navy-800);margin-bottom:var(--space-2)}
.section-subtitle{font-size:var(--text-base);color:var(--ink-600);margin-bottom:0}
.steps-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:640px){.steps-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width:1024px){.steps-grid{grid-template-columns:repeat(4, 1fr)}
}
.step-card{background-color:#FFFFFF;border:1.5px solid var(--orange-300);border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column;position:relative}
.step-number{width:32px;height:32px;border-radius:50%;background-color:#FFFFFF;border:2px solid var(--orange-600);color:var(--orange-700);font-weight:800;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3)}
.step-title{font-size:var(--text-base);font-weight:700;color:var(--navy-800);margin-bottom:var(--space-2)}
.step-desc{font-size:var(--text-sm);color:var(--ink-600);line-height:var(--leading-normal);margin-bottom:0}
.announcement-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:768px){.announcement-grid{grid-template-columns:repeat(3, 1fr)}
}
.announcement-card{background-color:#FFFFFF;border:1.5px solid var(--orange-200);border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column}
.announcement-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.announcement-tag{font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-full);background-color:var(--orange-100);color:var(--orange-800)}
.announcement-date{font-size:var(--text-xs);color:var(--ink-400)}
.announcement-title{font-size:var(--text-base);font-weight:700;color:var(--navy-800);margin-bottom:var(--space-2);line-height:var(--leading-tight)}
.announcement-desc{font-size:var(--text-sm);color:var(--ink-600);margin-bottom:0}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width:900px){.gallery-grid{grid-template-columns:repeat(3, 1fr)}
}
.gallery-card{background-color:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:all var(--transition-fast)}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(194,65,12,0.12);border-color:var(--orange-600)}
.gallery-thumb-wrap{position:relative;width:100%;aspect-ratio:16 / 9;background-color:var(--surface-alt);overflow:hidden}
.gallery-thumb-wrap img{width:100%;height:100%;object-fit:cover}
.gallery-info{padding:var(--space-4);flex:1;display:flex;flex-direction:column}
.gallery-title{font-size:var(--text-base);font-weight:700;color:var(--navy-800);margin-bottom:var(--space-1)}
.gallery-desc{font-size:var(--text-xs);color:var(--ink-600);margin-bottom:0}
.ikm-hero{background-color:#FFFFFF;border:2px solid var(--orange-600);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
@media (min-width:768px){.ikm-hero{flex-direction:row;align-items:center;justify-content:space-between}
}
.ikm-score-badge{display:inline-flex;align-items:baseline;gap:var(--space-2)}
.ikm-number{font-size:3rem;font-weight:800;color:var(--orange-700);line-height:1}
.ikm-grade{font-size:var(--text-lg);font-weight:700;color:var(--navy-800)}
.ikm-actions-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
@media (max-width:640px){.ikm-actions-wrap{flex-direction:column;align-items:flex-start;width:100%}
.ikm-actions-wrap .btn{width:100%;justify-content:center}
}
.ikm-chart-container{background-color:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-8);overflow-x:auto}
.org-chart{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin:var(--space-6) 0}
.org-node{background-color:var(--surface);border:2px solid var(--navy-800);border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);text-align:center;max-width:340px;width:100%;box-shadow:var(--shadow-subtle)}
.org-node-primary{background-color:var(--navy-900);color:#FFFFFF;border-color:var(--navy-950)}
.org-node-primary h4{color:#FFFFFF}
.org-node-accent{background-color:var(--orange-100);border-color:var(--orange-600)}
.org-node-accent h4{color:var(--orange-800)}
.org-connector{width:2px;height:24px;background-color:var(--line-strong)}
.org-children{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;width:100%}
.map-facade{background-color:var(--navy-900);border-radius:var(--radius-lg);color:#FFFFFF;padding:var(--space-8) var(--space-6);text-align:center;border:1px solid rgba(255, 255, 255, 0.1);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.map-facade h3{color:#FFFFFF}
.map-facade p{color:var(--navy-100);max-width:500px;margin-bottom:var(--space-4)}
.timeline{display:flex;flex-direction:column;gap:var(--space-6);position:relative;padding-left:var(--space-6);border-left:2px solid var(--orange-300);margin:var(--space-6) 0}
.timeline-item{position:relative}
.timeline-item::before{content:"";position:absolute;left:calc(-1 * var(--space-6) - 5px);top:4px;width:12px;height:12px;border-radius:50%;background-color:var(--orange-700);border:2px solid #FFFFFF}
.timeline-year{font-weight:800;color:var(--orange-700);font-size:var(--text-sm);margin-bottom:var(--space-1)}
.timeline-content{background-color:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}
.filter-tabs, .gallery-filter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6);align-items:center}
.filter-tab, .gallery-filter-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;border:1.5px solid var(--line-strong);border-radius:var(--radius-full);background-color:#FFFFFF;color:var(--navy-800);font-family:inherit;font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:all var(--transition-fast);min-height:42px;box-shadow:var(--shadow-subtle);user-select:none}
.filter-tab:hover, .gallery-filter-btn:hover{border-color:var(--orange-600);color:var(--orange-700);background-color:#FFFFFF;transform:translateY(-1px)}
.filter-tab.is-active, .gallery-filter-btn.is-active{background-color:var(--orange-600);color:#FFFFFF;border-color:var(--orange-600);box-shadow:0 4px 14px rgba(232,89,12,0.25)}
.faq-search{margin-bottom:var(--space-6)}
.faq-search-input{width:100%;padding:var(--space-3) var(--space-5);font-family:inherit;font-size:var(--text-base);border:1px solid var(--line-strong);border-radius:var(--radius-md);min-height:var(--touch-min);transition:border-color var(--transition-fast)}
.faq-search-input:focus{border-color:var(--orange-600);outline:2px solid var(--orange-500);outline-offset:1px}
.page-header{background-color:var(--surface-alt);border-bottom:1px solid var(--line);padding:var(--space-6) 0 var(--space-5)}
.page-header .badge{margin-bottom:var(--space-2)}
.numbered-steps{counter-reset:step-counter;list-style:none;padding:0}
.numbered-step{counter-increment:step-counter;display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.numbered-step:last-child{border-bottom:none}
.numbered-step::before{content:counter(step-counter);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background-color:var(--orange-700);color:#FFFFFF;font-weight:800;font-size:var(--text-sm);flex-shrink:0}
.pengaduan-layout{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:768px){.pengaduan-layout{grid-template-columns:1.2fr 0.8fr}
}
.pengaduan-sidebar{order:-1}
@media (min-width:768px){.pengaduan-sidebar{order:0}
}