/* header.css - header & navigasi utama */
@import url('./design-tokens.css');
.site-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(18px);box-shadow:0 2px 6px rgba(0,0,0,.05);border-bottom:1px solid var(--gray-200);} 
.site-header[data-scrolled=true]{box-shadow:0 4px 16px rgba(0,0,0,.08);} 
.header-inner{display:flex;align-items:center;gap:var(--space-6);min-height:68px;} 
.brand img{height:52px;width:auto;display:block;} 
.nav-primary{flex:1 1 auto;} .nav-primary ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center;} 
.nav-primary li{position:relative;} 
.nav-primary a{display:inline-flex;padding:10px 16px;font-weight:500;font-size:14px;color:var(--gray-700);border-radius:var(--radius-md);transition:var(--transition-fast);} 
.nav-primary a:hover,.nav-primary a:focus{background:var(--gray-100);color:var(--color-brand-primary);} 
.nav-primary ul.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#fff;padding:8px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(6px);transition:var(--transition-fast);z-index:60;} 
.nav-primary li:hover>ul.submenu{opacity:1;visibility:visible;transform:translateY(0);} 
.action-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--gray-100);border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;transition:var(--transition-fast);} .action-btn:hover{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff;} 
.nav-toggle{display:none;width:44px;height:44px;border:0;background:var(--gray-100);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;gap:6px;align-items:center;justify-content:center;} 
.nav-toggle span{width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:var(--transition-fast);} 
.nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg);} .nav-toggle.active span:nth-child(2){opacity:0;} .nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} 
.mobile-nav-panel{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);z-index:65;} .mobile-nav-panel .panel{position:absolute;top:0;right:0;width:320px;height:100%;background:var(--gray-0);padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);box-shadow:var(--shadow-lg);} 
.mobile-nav-panel nav ul{flex-direction:column;align-items:stretch;} 
.mobile-nav-panel nav a{background:transparent;} 
@media(max-width:992px){.nav-primary{display:none;}.nav-toggle{display:flex;}.mobile-nav-panel{display:block;}}