:root {
    --akuajae-header-surface: rgba(255, 255, 255, 0.14);
    --akuajae-header-surface-hover: rgba(255, 255, 255, 0.22);
    --akuajae-header-text: #1E293B;
    --akuajae-header-text-muted: rgba(30, 41, 59, 0.65);
    --akuajae-header-action: #8C7EFF;
    
    --akuajae-header-blur-standard: blur(20px);
    --akuajae-header-blur-dense: blur(24px);
    --akuajae-header-border: 1px solid rgba(255, 255, 255, 0.25);
    
    --akuajae-header-shadow-1: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
    --akuajae-header-shadow-2: 0 12px 32px 0 rgba(0, 0, 0, 0.08);
    --akuajae-header-shadow-3: 0 20px 48px 0 rgba(0, 0, 0, 0.14);
    
    --akuajae-header-radius-full: 999px;
    --akuajae-header-radius-lg: 24px;
    
    --akuajae-header-transition-base: 220ms ease;
    --akuajae-header-transition-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.akuajae-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--akuajae-header-width, 100%);
    box-sizing: border-box;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--akuajae-header-height, auto);
    padding: var(--akuajae-header-pad-top, 24px) var(--akuajae-header-pad-right, 32px) var(--akuajae-header-pad-bottom, 24px) var(--akuajae-header-pad-left, 32px);
    margin: var(--akuajae-header-margin, 0);
    gap: var(--akuajae-header-inner-gap, 16px);
    pointer-events: none;
    background: transparent !important;
}

/* Adjust header position when WordPress Admin Bar is present */
.admin-bar .akuajae-header-wrapper {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .akuajae-header-wrapper {
        top: 46px;
    }
}

.akuajae-header-zone {
    pointer-events: auto;
    display: flex;
    align-items: center;
}

.akuajae-header-zone-left {
    flex: 1;
    gap: var(--akuajae-header-zone-left-gap, 16px);
    padding: var(--akuajae-header-zone-left-padding, 0px);
}

.akuajae-header-zone-center {
    flex: 2;
    justify-content: center;
    gap: var(--akuajae-header-zone-center-gap, 16px);
    padding: var(--akuajae-header-zone-center-padding, 0px);
}

.akuajae-header-zone-right {
    flex: 1;
    justify-content: flex-end;
    gap: var(--akuajae-header-zone-right-gap, 16px);
    padding: var(--akuajae-header-zone-right-padding, 0px);
}

.akuajae-header-title {
    font-family: var(--akuajae-theme-font-main, 'Inter', sans-serif);
    font-size: var(--akuajae-header-title-size, 22px);
    font-weight: var(--akuajae-header-title-weight, 700);
    color: var(--akuajae-header-title-color, #1E293B);
    letter-spacing: var(--akuajae-header-title-spacing, 0px);
    text-decoration: none;
    line-height: 1.15;
}

.akuajae-header-logo img {
    max-height: 40px;
    width: auto;
}

/* Center Area - Search */
.akuajae-header-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--akuajae-header-search-width, 500px);
    height: var(--akuajae-header-search-height, 48px);
    background: var(--akuajae-header-transparency, rgba(255, 255, 255, 0.14));
    backdrop-filter: blur(var(--akuajae-header-search-blur, 20px));
    -webkit-backdrop-filter: blur(var(--akuajae-header-search-blur, 20px));
    border: var(--akuajae-header-border-thick, 1px) solid var(--akuajae-header-search-border-color, rgba(255, 255, 255, 0.25));
    border-radius: var(--akuajae-header-search-radius, 999px);
    padding: 0 20px;
    box-shadow: var(--akuajae-header-shadow, 0 8px 32px 0 rgba(31,38,135,0.04));
    transition: var(--akuajae-header-transition-base);
}

.akuajae-header-search:hover {
    transform: var(--akuajae-header-hover-anim, scale(1.018));
    background: var(--akuajae-header-search-hover, rgba(255, 255, 255, 0.22));
}

.akuajae-header-search:focus-within {
    transform: var(--akuajae-header-focus-anim, scale(1.02));
    outline: var(--akuajae-header-search-focus, 2px solid #8C7EFF);
    outline-offset: 3px;
}

.akuajae-header-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--akuajae-header-search-text-color, #1E293B);
    font-size: 14px;
    font-family: inherit;
    padding: 0;
}

.akuajae-header-search-input::placeholder {
    color: var(--akuajae-header-search-placeholder-color, rgba(30, 41, 59, 0.65));
}

.akuajae-header-search-submit {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--akuajae-header-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 8px;
}

/* Right Area - Trigger */
.daftarmenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--akuajae-header-trigger-size, 48px);
    padding: 0 20px;
    border-radius: var(--akuajae-header-trigger-radius, 999px);
    border: var(--akuajae-header-trigger-border, 1px) solid rgba(255, 255, 255, 0.25);
    background: var(--akuajae-header-transparency, rgba(255, 255, 255, 0.14));
    color: var(--akuajae-header-trigger-color, #1E293B);
    box-shadow: var(--akuajae-header-trigger-shadow, 0 12px 32px 0 rgba(0, 0, 0, 0.08));
    backdrop-filter: blur(var(--akuajae-header-blur, 20px));
    -webkit-backdrop-filter: blur(var(--akuajae-header-blur, 20px));
    cursor: pointer;
    transition: var(--akuajae-header-transition-base);
    font-family: inherit;
}

.daftarmenu-trigger svg {
    width: var(--akuajae-header-trigger-icon-size, 24px);
    height: var(--akuajae-header-trigger-icon-size, 24px);
}

.daftarmenu-trigger:hover,
.daftarmenu-trigger.is-active {
    background: var(--akuajae-header-surface-hover);
    box-shadow: var(--akuajae-header-shadow-2);
}

.daftarmenu-trigger:active {
    transform: scale(0.97);
}

.daftarmenu-label {
    font-size: 14px;
    font-weight: 650;
}

/* Navigation Panel */
.daftarmenu-panel {
    position: fixed;
    top: 88px;
    right: 32px;
    z-index: 9997;
    width: min(380px, calc(100vw - 64px));
    padding: 18px;
    border-radius: var(--akuajae-header-radius-lg);
    border: var(--akuajae-header-border);
    background: var(--akuajae-header-surface);
    backdrop-filter: var(--akuajae-header-blur-dense);
    -webkit-backdrop-filter: var(--akuajae-header-blur-dense);
    box-shadow: var(--akuajae-header-shadow-2);
    
    /* Animation defaults */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transform-origin: top right;
    transition: opacity var(--akuajae-header-transition-base), 
                visibility var(--akuajae-header-transition-base), 
                transform var(--akuajae-header-transition-slow);
}

.daftarmenu-panel:hover {
    transform: scale(1.018);
    box-shadow: var(--akuajae-header-shadow-3);
}

.daftarmenu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* WP Menu formatting inside panel */
.daftarmenu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daftarmenu-nav li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--akuajae-header-radius-full);
    text-decoration: none;
    color: var(--akuajae-header-text);
    font-size: 14px;
    font-weight: 650;
    transition: var(--akuajae-header-transition-base);
    border: 1px solid transparent;
}

.daftarmenu-nav li a:hover,
.daftarmenu-nav li a:focus {
    background: var(--akuajae-header-surface-hover);
    border: var(--akuajae-header-border);
    outline: none;
}

/* Staggered Items - Base state for intersection observer */
.daftarmenu-nav li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--akuajae-header-transition-slow), 
                transform var(--akuajae-header-transition-slow);
}

.daftarmenu-nav li.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .akuajae-header-wrapper {
        padding: 16px;
    }
    .akuajae-header-zone-left {
        display: none;
    }
    .daftarmenu-label {
        display: none;
    }
    .daftarmenu-panel {
        top: 80px;
        right: 16px;
    }
}