.icon{width:1.25rem;height:1.25rem;display:inline-block;vertical-align:-0.2rem;flex-shrink:0}
.top-bar{background-color:#C2410C;color:#FFF4EB;font-size:11.5px;padding:5px 0;border-bottom:1px solid rgba(255, 255, 255, 0.15);overflow:hidden}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.top-bar-instansi{display:flex;align-items:center;gap:var(--space-2);font-weight:600;letter-spacing:0.02em;font-size:11.5px;min-width:0}
.top-bar-instansi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-bar-actions{display:flex;align-items:center;gap:var(--space-3);font-size:11.5px;flex-shrink:0}
.top-bar-status{display:inline-flex;align-items:center;gap:var(--space-1);color:#FFFFFF;font-weight:600;white-space:nowrap}
.top-bar-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#51CF66}
@media (max-width:640px){.top-bar-instansi span{font-size:10.5px}
.top-bar-actions{display:none !important}
}
.site-header{background-color:#E8590C;border-bottom:3px solid #C2410C;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(194, 65, 12, 0.18)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px;min-height:56px;gap:var(--space-3)}
.brand-wrapper{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex-shrink:0}
.brand-wrapper:hover{text-decoration:none}
.brand-emblem{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#FFFFFF;padding:2px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}
@media (min-width:640px){.brand-emblem{width:44px;height:44px}
}
.brand-emblem img, .brand-emblem svg{width:100%;height:100%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{font-size:0.95rem;font-weight:800;color:#FFFFFF;line-height:1.15;letter-spacing:0.01em;white-space:nowrap}
.brand-subtitle{font-size:0.7rem;color:#FFFFFF;font-weight:600;white-space:nowrap}
@media (min-width:640px){.brand-title{font-size:1.15rem}
.brand-subtitle{font-size:var(--text-xs)}
}
.main-nav{display:none}
@media (min-width:1024px){.main-nav{display:block;flex-shrink:0}
.nav-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px}
.nav-link{display:inline-flex;align-items:center;padding:7px 11px;color:rgba(255, 255, 255, 0.94);text-decoration:none;font-size:13px;font-weight:600;border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap}
.nav-link:hover{color:#FFFFFF;background-color:rgba(255, 255, 255, 0.16)}
.nav-link[aria-current="page"]{color:#FFFFFF;background-color:rgba(0, 0, 0, 0.22);font-weight:700;box-shadow:inset 0 -3px 0 #FED7B7}
}
.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;background:rgba(255, 255, 255, 0.15);border:1px solid rgba(255, 255, 255, 0.35);border-radius:var(--radius-md);color:#FFFFFF;cursor:pointer;padding:0}
.mobile-nav-toggle:hover{background-color:rgba(255, 255, 255, 0.25)}
@media (min-width:1024px){.mobile-nav-toggle{display:none}
}
.nav-backdrop{display:none;position:fixed;inset:0;background-color:rgba(15, 30, 54, 0.6);z-index:199;backdrop-filter:blur(2px)}
.nav-backdrop.is-open{display:block}
.nav-drawer{visibility:hidden;position:fixed;top:0;right:0;bottom:0;width:85%;max-width:340px;background-color:var(--surface);z-index:200;transform:translateX(100%);transition:transform var(--transition-normal);display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0, 0, 0, 0.15);overflow-y:auto}
.nav-drawer.is-open{visibility:visible;transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background-color:#E8590C;border-bottom:2px solid #C2410C}
.drawer-title{font-size:var(--text-md);color:#FFFFFF}
.drawer-close{min-width:var(--touch-min);min-height:var(--touch-min);background:rgba(255, 255, 255, 0.15);border:none;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}
.drawer-close:hover{background-color:rgba(255, 255, 255, 0.25)}
.drawer-body{padding:var(--space-4);flex:1}
.drawer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.drawer-link{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);color:var(--ink-900);text-decoration:none;font-weight:600;font-size:var(--text-base);border-radius:var(--radius-md);border:1px solid transparent;min-height:var(--touch-min)}
.drawer-link:hover{background-color:var(--orange-50);color:var(--orange-700)}
.drawer-link[aria-current="page"]{background-color:#FFFFFF;color:var(--orange-700);border:1.5px solid var(--orange-600)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-min);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-sm);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all var(--transition-fast)}
.btn:hover{text-decoration:none}
.btn-primary{background-color:var(--orange-700);color:#FFFFFF;border-color:var(--orange-800)}
.btn-primary:hover{background-color:var(--orange-800);color:#FFFFFF}
.btn-secondary{background-color:var(--surface);color:var(--navy-800);border-color:var(--line-strong)}
.btn-secondary:hover{background-color:var(--orange-50);border-color:var(--orange-500);color:var(--orange-700)}
.btn-outline{background-color:transparent;color:var(--orange-700);border-color:var(--orange-700)}
.btn-outline:hover{background-color:var(--orange-100);color:var(--orange-800)}
.btn-sm{min-height:36px;padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
.btn-block{width:100%}
.card{background-color:#FFFFFF;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-subtle);transition:border-color var(--transition-fast)}
.card:hover{border-color:var(--orange-300)}
.card-highlight{background-color:#FFFFFF;border:2px solid var(--orange-600)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 10px;font-size:var(--text-xs);font-weight:700;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.03em;line-height:1.2}
.badge-orange{background-color:#FFFFFF;color:var(--orange-700);border:1.5px solid var(--orange-600)}
.badge-navy{background-color:#FFFFFF;color:var(--navy-800);border:1.5px solid var(--navy-800)}
.badge-success{background-color:#FFFFFF;color:var(--success-fg);border:1.5px solid var(--success-fg)}
.alert{padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);line-height:var(--leading-normal)}
.alert-info{background-color:#FFFFFF;border:2px solid var(--navy-800);color:var(--navy-900)}
.alert-warning{background-color:#FFFFFF;border:2px solid var(--orange-600);color:var(--ink-900)}
.accordion{border:1px solid var(--line);border-radius:var(--radius-md);background-color:var(--surface);margin-bottom:var(--space-3);overflow:hidden;transition:border-color var(--transition-fast)}
.accordion[open]{border-color:var(--orange-500)}
.accordion summary{padding:var(--space-4) var(--space-5);font-weight:700;color:var(--navy-800);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:var(--touch-min);user-select:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion-chevron{width:1.25rem;height:1.25rem;transition:transform var(--transition-fast);color:var(--orange-700)}
.accordion[open] .accordion-chevron{transform:rotate(180deg)}
.accordion-content{padding:var(--space-4) var(--space-5);border-top:1px solid var(--line);background-color:var(--surface);color:var(--ink-700);font-size:var(--text-base);line-height:var(--leading-loose)}
.form-group{margin-bottom:var(--space-5)}
.form-label{display:block;font-size:var(--text-sm);font-weight:700;color:var(--navy-800);margin-bottom:var(--space-2)}
.form-hint{display:block;font-size:var(--text-xs);color:var(--ink-600);margin-top:var(--space-1)}
.form-control, .form-select, .form-textarea{width:100%;padding:var(--space-3) var(--space-4);font-family:inherit;font-size:var(--text-base);color:var(--ink-900);background-color:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-md);min-height:var(--touch-min);transition:border-color var(--transition-fast)}
.form-control:focus, .form-select:focus, .form-textarea:focus{border-color:var(--orange-600);outline:2px solid var(--orange-500);outline-offset:1px}
.form-textarea{resize:vertical;min-height:120px}
.hp-field{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1}
.lightbox{display:none;position:fixed;inset:0;background-color:rgba(11, 21, 38, 0.92);z-index:999;align-items:center;justify-content:center;padding:var(--space-4)}
.lightbox.is-open{display:flex}
.lightbox-content{position:relative;max-width:900px;width:100%;background-color:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 10px 30px rgba(0, 0, 0, 0.5)}
.lightbox-img{width:100%;max-height:70vh;object-fit:contain;background-color:#0F1E36}
.lightbox-caption{padding:var(--space-4);background-color:var(--surface)}
.lightbox-caption h3{font-size:var(--text-md);color:var(--navy-800);margin-bottom:var(--space-1)}
.lightbox-caption p{font-size:var(--text-sm);color:var(--ink-600);margin-bottom:0}
.lightbox-close{position:absolute;top:var(--space-3);right:var(--space-3);min-width:var(--touch-min);min-height:var(--touch-min);background:rgba(255, 255, 255, 0.2);border:none;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full)}
.site-footer h3{color:#FFFFFF}.site-footer a{color:#FFFFFF;text-decoration:underline}.site-footer{background-color:#E8590C;color:#FFFFFF;padding-top:var(--space-10);padding-bottom:var(--space-6);border-top:4px solid #C2410C;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);margin-bottom:var(--space-8)}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1.2fr 1.2fr}
}
.footer-heading{font-size:var(--text-base);font-weight:700;color:#FFFFFF;margin-bottom:var(--space-3);border-bottom:2px solid rgba(255, 255, 255, 0.2);padding-bottom:var(--space-2);display:inline-block}
.footer-text{font-size:var(--text-sm);color:#FFFFFF;line-height:var(--leading-normal);margin-bottom:var(--space-3)}
.footer-nav{list-style:none;padding:0;margin:0}
.footer-nav li{margin-bottom:var(--space-2)}
.footer-nav a{color:#FFF4EB;text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-1)}
.footer-nav a:hover{color:#FFFFFF;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255, 255, 255, 0.15);padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-xs);color:#FFFFFF}
@media (min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center}
}