/* ============================================
   MOBILE HAMBURGER MENU BUTTON - CRITICAL FIX
   ============================================ */

/* ============================================
   1. HAMBURGER BUTTON BASE STYLES - REBUILT
   ============================================ */
/* Override ALL existing styles - Highest specificity */
.hamburger,
#mobile-menu-toggle,
body #header .header-actions .nav-opener,
body #header .header-actions .menu-opener,
body #header .header-actions #mobile-menu-toggle,
body #header .header-actions .mobile-hamburger-btn,
#header .nav-opener,
#header .menu-opener,
#header #mobile-menu-toggle,
.header-actions .nav-opener,
.header-actions .menu-opener,
.header-actions #mobile-menu-toggle,
.nav-opener,
.menu-opener,
.mobile-hamburger-btn {
    width: 28px !important;
    height: 22px !important;
    min-width: 28px !important;
    min-height: 22px !important;
    max-width: 28px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 99999 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* ============================================
   2. HAMBURGER LINES - REBUILT (3 LINES)
   ============================================ */
.hamburger span,
#mobile-menu-toggle span:not(.sr-only),
.hamburger-icon,
body #header .header-actions .nav-opener span:not(.sr-only),
body #header .header-actions .menu-opener span:not(.sr-only),
body #header .header-actions #mobile-menu-toggle span:not(.sr-only),
#header .nav-opener span:not(.sr-only),
#header .menu-opener span:not(.sr-only),
#header #mobile-menu-toggle span:not(.sr-only),
.header-actions .nav-opener span:not(.sr-only),
.header-actions .menu-opener span:not(.sr-only),
.header-actions #mobile-menu-toggle span:not(.sr-only) {
    width: 100% !important;
    height: 3px !important;
    min-width: 100% !important;
    min-height: 3px !important;
    max-width: 100% !important;
    max-height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Remove any pseudo-elements that might interfere - CRITICAL */
.hamburger::before,
.hamburger::after,
#mobile-menu-toggle::before,
#mobile-menu-toggle::after,
.hamburger span::before,
.hamburger span::after,
#mobile-menu-toggle span:not(.sr-only)::before,
#mobile-menu-toggle span:not(.sr-only)::after,
.hamburger-icon::before,
.hamburger-icon::after,
body #header .header-actions .nav-opener::before,
body #header .header-actions .menu-opener::before,
body #header .header-actions #mobile-menu-toggle::before,
#header .nav-opener::before,
#header .menu-opener::before,
#header #mobile-menu-toggle::before,
.header-actions .nav-opener::before,
.header-actions .menu-opener::before,
.header-actions #mobile-menu-toggle::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Remove any text labels - CRITICAL */
.hamburger-text,
.menu-label,
.hamburger .txt,
#mobile-menu-toggle .txt,
.nav-opener .txt,
.menu-opener .txt,
body #header .header-actions .nav-opener .txt,
body #header .header-actions .menu-opener .txt,
body #header .header-actions #mobile-menu-toggle .txt,
#header .nav-opener .txt,
#header .menu-opener .txt,
#header #mobile-menu-toggle .txt,
.header-actions .nav-opener .txt,
.header-actions .menu-opener .txt,
.header-actions #mobile-menu-toggle .txt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
}

/* ============================================
   3. FIX CONTAINER CLIPPING
   ============================================ */
header,
nav,
.navbar,
.menu-wrapper,
#header,
.header-actions,
.header-holder,
.container-fluid {
    overflow: visible !important;
}

#header .header-actions,
.header-actions {
    overflow: visible !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 99998 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   4. DESKTOP: HIDDEN
   ============================================ */
@media screen and (min-width: 992px) {
    .hamburger,
    #mobile-menu-toggle,
    body #header .header-actions .nav-opener,
    body #header .header-actions .menu-opener,
    body #header .header-actions #mobile-menu-toggle,
    body #header .header-actions .mobile-hamburger-btn,
    #header .nav-opener,
    #header .menu-opener,
    #header #mobile-menu-toggle,
    .nav-opener,
    .menu-opener,
    .mobile-hamburger-btn,
    .header-actions .nav-opener,
    .header-actions .menu-opener,
    .header-actions #mobile-menu-toggle,
    .header-actions .mobile-hamburger-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Header actions container'ı da desktop'ta gizle */
    body #header .header-actions,
    #header .header-actions,
    .header-actions {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ============================================
   5. MOBILE: ALWAYS VISIBLE
   ============================================ */
@media screen and (max-width: 991px) {
    .hamburger,
    #mobile-menu-toggle,
    body #header .header-actions .nav-opener,
    body #header .header-actions .menu-opener,
    body #header .header-actions #mobile-menu-toggle,
    body #header .header-actions .mobile-hamburger-btn,
    #header .nav-opener,
    #header .menu-opener,
    #header #mobile-menu-toggle,
    .mobile-hamburger-btn,
    .header-actions .nav-opener,
    .header-actions .menu-opener,
    .header-actions #mobile-menu-toggle,
    .header-actions .mobile-hamburger-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        z-index: 99999 !important;
        width: 28px !important;
        height: 22px !important;
        min-width: 28px !important;
        min-height: 22px !important;
        max-width: 28px !important;
        max-height: 22px !important;
        overflow: visible !important;
    }
    
    /* Header actions container - TAM GÖRÜNÜR */
    body #header .header-actions,
    #header .header-actions,
    .header-actions {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 99998 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Ensure hamburger lines are visible - CLEAN 3 LINES */
    .hamburger span:not(.sr-only),
    #mobile-menu-toggle span:not(.sr-only) {
        width: 100% !important;
        height: 3px !important;
        background-color: #ffffff !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
        text-indent: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }
}

/* ============================================
   6. HAMBURGER ACTIVE STATE (CLEAN X TRANSFORMATION)
   ============================================ */
.mobile-menu-active .hamburger span:not(.sr-only):nth-child(1),
.mobile-menu-active #mobile-menu-toggle span:not(.sr-only):nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
    -webkit-transform: rotate(45deg) translate(6px, 6px) !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    margin-top: -1.5px !important;
}

.mobile-menu-active .hamburger span:not(.sr-only):nth-child(2),
.mobile-menu-active #mobile-menu-toggle span:not(.sr-only):nth-child(2) {
    opacity: 0 !important;
    visibility: hidden !important;
}

.mobile-menu-active .hamburger span:not(.sr-only):nth-child(3),
.mobile-menu-active #mobile-menu-toggle span:not(.sr-only):nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
    -webkit-transform: rotate(-45deg) translate(6px, -6px) !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    margin-top: -1.5px !important;
}

/* ============================================
   7. ACCESSIBILITY - SCREEN READER TEXT
   ============================================ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ============================================
   8. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 480px) {
    .hamburger,
    #mobile-menu-toggle {
        width: 28px !important;
        height: 22px !important;
        top: 15px !important;
        right: 15px !important;
    }
}