/* /css/layout/header.css */
/* Bu dosya, ana site başlığının (header) stillerini içerecektir. */

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}

header {
    background: var(--background-alt);
    /* Light gray background for nav menu */
    border-bottom: none;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 100%;
}

/* Hide header on desktop - nav is now inline in site-top-bar */
@media (min-width: 901px) {
    header {
        display: none;
    }
}

@media (max-width: 900px) {
    header {
        display: block;
        /* Header görünür olmalı ki nav-links çalışsın */
        position: relative;
        height: 0;
        /* Yükseklik 0 ama display block */
        padding: 0;
        overflow: visible;
        /* Nav-links görünür olmalı */
    }

    /* Hamburger görünür olmalı */
    .site-top-bar .hamburger {
        display: block;
    }

    /* Nav-links mobilde fixed position ile görünür olmalı */
    .main-nav {
        position: static;
        height: 0;
        overflow: visible;
    }

    .nav-links {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 10000 !important;
        /* En üstte olmalı */
        background-color: var(--secondary) !important;
        transform: translateZ(0);
        /* GPU acceleration */
    }
}

.site-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    position: relative;
    /* Anchor absolute-centered search correctly */
    height: 69px;
    /* Fixed height for the top bar */
    background: var(--secondary);
    border-bottom: 1px solid var(--border);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header Actions Area */
.header-actions {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 15px;
}

/* Center navigation menu on desktop - Use flexbox on parent instead of transform */
@media (min-width: 901px) {
    .main-nav.desktop-nav-inline {
        position: static;
        /* Remove absolute positioning */
        /* Centering is handled by flexbox on .site-top-bar */
        transform: none;
        /* Critical: No transform = no containing block */
    }
}

/* Hamburger Menu Button */
.hamburger {
    display: none;
    /* Hidden by default on desktop */
    font-size: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    transition: color 0.2s ease;
}

.hamburger:hover {
    color: var(--accent);
}

@media (max-width: 900px) {
    .hamburger {
        display: block;
        margin: 0;
        padding: 8px 12px 8px 0;
        /* Space to the right */
    }

    /* Change top bar layout on mobile */
    .site-top-bar {
        justify-content: flex-start !important;
        /* Start from left instead of space-between */
        gap: 12px;
    }

    /* Push header-actions to the right */
    .header-actions {
        margin-left: auto;
    }

    /* Hide desktop navigation on mobile */
    .desktop-nav-inline {
        display: none !important;
    }
}

/* Desktop inline navigation */
@media (min-width: 901px) {
    .desktop-nav-inline {
        display: flex;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        margin: 0 24px;
    }

    .desktop-nav-inline .nav-links {
        display: flex;
        gap: 32px;
    }
}

/* Expand icon - ortada, başlangıçta görünmez */
.expand-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: var(--accent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 10;
    /* Hamburger'den (10001) çok düşük olmalı */
    animation: none;
    width: 30px;
    /* Tıklanabilir alanı sınırlandır */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-icon:hover {
    color: var(--accent-primary);
}

/* Logo Styles */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* General Logo Style from original file */
.logo {
    height: 207px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Responsive Logo Style from original file */
@media (max-width: 900px) {
    .logo {
        height: 115px;
        margin: -45px 0;
    }
}

/* Main Navigation */
.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Navigation Links */
.nav-links {
    display: flex;
    gap: 36px;
    position: relative;
    z-index: 10;
}

.nav-links .nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 11;
    /* Force reset of containing block creators */
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 400;
    font-size: 15px;
    position: relative;
    transition: var(--transition);
    padding: 15px 0;
    /* Increase hit area */
    cursor: pointer;
    pointer-events: auto;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--accent);
    bottom: 10px;
    /* Adjusted for padding */
    left: 0;
    transform: none;
    transition: var(--transition);
}

.nav-links .nav-item:hover a::after {
    width: 100%;
}

.nav-links .nav-item:hover>a {
    color: var(--accent);
}

/* Mega Menu Styles */
.mega-menu {
    position: fixed !important;
    /* Force fixed */
    top: 69px !important;
    /* Explicit top match */
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    /* Force full viewport */
    margin-left: 0 !important;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border-top: 1px solid var(--border);
    padding: 40px 0;
    display: none;
    pointer-events: none;
    margin-top: 0;
}

@media (min-width: 901px) {
    .mega-menu {
        display: block;
    }
}

.header-container:has(.site-top-bar) .mega-menu {
    top: 69px !important;
}

@media (min-width: 901px) {
    .nav-item:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


.mega-menu-container,
.mega-row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    /* Changed from grid to flex for recursive rows */
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 40px;
    padding: 0 24px;
}

.mega-column {
    flex: 1;
    /* Allow columns to grow */
    min-width: 150px;
    border-right: 1px solid #eee;
    /* Vertical Divider */
    padding: 0 20px;
    /* Spacing for divider */
}

/* Remove border from the last column */
.mega-column:last-child {
    border-right: none;
}

.mega-column h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Generic Link Style (no more strictly ul>li) */
.mega-link,
.mega-column ul li a {
    display: block;
    color: #444;
    /* Neutral dark gray */
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s;
    padding: 6px 0;
    margin-bottom: 2px;
}

.mega-menu a::after {
    display: none !important;
}

.mega-link:hover,
.mega-column ul li a:hover {
    color: var(--accent);
}

/* Recursive spacing */
.mega-column .mega-row {
    padding: 0;
    margin: 10px 0;
    gap: 20px;
    /* Smaller gap for nested rows */
}

/* Remove old strict UL/LI specific margins if using divs now */
.mega-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 900px) {
    .nav-links {
        display: none !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: var(--secondary) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: flex-start !important;
        z-index: 10003 !important;
        overflow: hidden !important;
    }

    /* Drill-down container */
    .menu-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100%;
        width: 100%;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .menu-panel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        height: 100%;
        overflow-y: auto;
        padding-top: 80px !important;
        padding-bottom: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background-color: var(--secondary) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .menu-panel li {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
    }

    .menu-panel a {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        text-align: left !important;
        /* Left align */
        border-bottom: 1px solid #eee !important;
        /* Visible border */
        box-sizing: border-box !important;
        color: #333 !important;
        /* Dark text */
        font-size: 14px !important;
        /* Match header size */
        text-transform: uppercase !important;
        /* Match header style */
        letter-spacing: 1px !important;
        /* Match header spacing */
        font-weight: 500 !important;
    }

    /* Main Menu (Depth 0) should be centered */
    .menu-panel.depth-0 a {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Fix for excessive spacing in mobile mega menu */
    .menu-panel .mega-column {
        flex: 0 0 auto !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border-right: none !important;
        /* Reset desktop divider */
    }

    /* Add spacing from the header "Services" / Back button */
    .menu-panel .mega-column:first-of-type {
        margin-top: 30px !important;
    }

    .menu-panel .mega-column h3 {
        padding: 15px 20px !important;
        margin: 0 !important;
        background: transparent;
        color: #333;
        /* Changed to dark for visibility on light bg */
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Swipe hint animation - ONLY for real mobile devices */
    .swipe-hint {
        display: none;
        /* Hidden by default in tablet range */
    }
}

/* Swipe hint - only for small mobile screens (<768px) */
@media (max-width: 768px) {
    .swipe-hint {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 10100;
        /* Above everything */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .swipe-hint.visible {
        opacity: 1;
        visibility: visible;
    }

    .swipe-hint i {
        animation: swipeAnim 2s infinite;
    }

    @keyframes swipeAnim {
        0% {
            transform: translateX(-10px);
            opacity: 0;
        }

        30% {
            transform: translateX(-10px);
            opacity: 1;
        }

        70% {
            transform: translateX(25px);
            opacity: 1;
        }

        100% {
            transform: translateX(25px);
            opacity: 0;
        }
    }

    /* Indicators for sub-menu */
    .nav-item.has-sub-mobile>a::after {
        content: '\f105';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
    }

    .back-btn {
        width: 100%;
        padding: 15px 24px;
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--accent);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .back-btn i {
        font-size: 14px;
    }

    .nav-links.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10003 !important;
        /* Hamburger'den (10004) düşük olmalı */
    }

    /* Scroll durumunda nav-links normal mobil kurallarını override etmeli */
    .header-container.scrolled .nav-links,
    .nav-links.scrolled {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        z-index: 10002 !important;
    }

    .nav-links.scrolled .menu-panel {
        padding-top: 20px !important;
    }

    .nav-links a {
        margin: 4px 0;
        font-size: 19px;
        padding: 10px 20px;
        width: auto;
        min-width: 200px;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* Header Actions (Language, Cart, etc.) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    /* Space between language and cart */
    z-index: 10;
    /* Ensure header actions are visible */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-switcher {
    position: relative;
    display: flex;
    /* Group language and cart button together */
    align-items: center;
    gap: 15px;
}

.language-button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 15px;
    color: var(--text);
    z-index: 10;
    /* Ensure button is visible */
    position: relative;
}

.language-button:hover {
    color: var(--accent);
}

.language-button .flag {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
    vertical-align: middle;
}

.language-dropdown {
    position: absolute;
    top: 120%;
    right: 0;
    background: var(--secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility 0s linear var(--transition);
    border: 1px solid var(--border);
    z-index: 100;
}

.language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition);
}

.language-option {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--secondary);
    color: var(--text);
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.language-option .flag {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
    vertical-align: middle;
}

.language-option:hover {
    background: var(--background-alt);
}

.language-option:active,
.language-option:focus {
    background: var(--secondary);
    color: var(--text);
}

.language-option.active {
    background: var(--accent);
    color: white;
}

/* NEW REGION SELECTOR STYLES */
.region-trigger {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
    border-right: 1px solid #ddd;
    /* Separator between region and language */
    padding-right: 15px;
    margin-right: 5px;
}

.region-trigger:hover {
    color: var(--accent);
}

.region-trigger i {
    font-size: 18px;
    margin-right: 6px;
}

/* Mega Menu Modal Overlay */
.region-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: start;
    padding-top: 80px;
    /* Distance from top */
}

.region-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.region-modal-container {
    background-color: white;
    width: 90%;
    max-width: 1200px;
    border-radius: 12px;
    padding: 40px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.region-modal-overlay.active .region-modal-container {
    transform: translateY(0);
}

/* Header Search Suggestions */
.header-search-suggestions {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: white;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: none;
    /* JS ile kontrol edilir */
    z-index: 1001;
    /* Navigasyonun üstünde */
    overflow: hidden;
    margin-top: 10px;
}

.header-search-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text);
    text-decoration: none;
    transition: background 0.2s ease;
    font-size: 14px;
}

.header-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.header-search-suggestions .suggestion-item:hover {
    background: var(--background-alt);
    color: var(--accent);
}

.header-search-suggestions .suggestion-icon {
    margin-right: 12px;
    color: #999;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.header-search-suggestions .suggestion-text {
    flex-grow: 1;
    font-weight: 500;
}

.header-search-suggestions .suggestion-text strong {
    color: var(--accent);
    font-weight: 700;
}

.header-search-suggestions .suggestion-category {
    font-size: 11px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    white-space: nowrap;
}

.header-search-suggestions .suggestion-no-results {
    padding: 15px;
    text-align: center;
    color: #777;
    font-style: italic;
    font-size: 14px;
}

/* Fix for search suggestions visibility */
.nav-search-trigger.expanded {
    overflow: visible !important;
}



.region-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f0f0f0;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.2s;
}

.region-modal-close:hover {
    background: #e0e0e0;
}

.region-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.region-column h3 {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.region-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.region-item {
    margin-bottom: 12px;
}

.region-link {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 8px 0;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.region-link:hover {
    color: var(--accent);
}

.region-link .country-name {
    font-weight: 500;
    font-size: 15px;
}

.region-link .language-name {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

.region-link.active .country-name {
    color: var(--accent);
    font-weight: 700;
}


/* Cart Button */
#goToCartBtn {
    position: relative;
    /* Başlangıçta gizle, JavaScript kontrol edip gösterecek */
    visibility: hidden;
    opacity: 0;
    display: none;
    /* Boşluk oluşmaması için display:none */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: nowrap;
    /* Prevent text from wrapping to second line */
}

/* JavaScript yüklendiğinde göster (cart-button-visible class'ı ile) */
#goToCartBtn.cart-button-visible {
    visibility: visible;
    opacity: 1;
    display: flex;
    /* Görünür olduğunda flex */
}

.cart-item-count {
    position: absolute;
    bottom: -8px;
    left: -8px;
    background-color: var(--accent-secondary);
    color: var(--secondary);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--secondary);
    transition: transform 0.2s ease;
    z-index: 10;
    /* Ensure it's visible above the button */
}

/* Hamburger Menu */
.hamburger {
    display: none;
    /* Hidden by default, shown in media query */
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    z-index: 10005;
    /* Nav-links'ten (10003) çok daha yüksek - X ikonu her zaman görünür olmalı */
    flex-shrink: 0;
    line-height: 1;
    position: relative;
    /* Z-index'in çalışması için */
}

/* Responsive styles for Header Actions */
@media (max-width: 900px) {
    .site-top-bar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        height: 69px;
        /* Sabit height - transition için gerekli */
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        /* Sepet butonunun absolute position için */
    }

    .hamburger {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        line-height: 1;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10005 !important;
        /* Nav-links'ten (10003) çok daha yüksek - X ikonu her zaman görünür */
        position: relative !important;
        /* Normal durumda relative */
    }

    /* Hamburger body'deyken (menü açıkken) fixed position - normal durum */
    body>.hamburger {
        position: fixed !important;
        top: 14.5px !important;
        /* Site-top-bar height: 69px, hamburger height: 40px, (69-40)/2 = 14.5px */
        left: 16px !important;
        /* Site-top-bar'ın padding'ine göre */
        z-index: 10005 !important;
        /* Nav-links'ten (10003) çok daha yüksek */
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
    }

    /* Hamburger body'deyken (menü açıkken) - scroll durumu */
    body>.hamburger.scrolled {
        top: 5px !important;
        /* Scroll durumunda top-bar height: 46px, hamburger height: 36px, (46-36)/2 = 5px */
        left: 16px !important;
        width: 36px !important;
        /* %10 küçük: 40px * 0.9 = 36px */
        height: 36px !important;
        /* %10 küçük: 40px * 0.9 = 36px */
        font-size: 22px !important;
        /* %10 küçük: 28px * 0.9 = 25.2px */
    }

    .logo-link {
        order: 2;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .header-actions {
        order: 3;
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
        width: auto;
        justify-content: flex-end;
    }

    .language-switcher {
        order: 1;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .region-switcher {
        order: 0;
        margin-right: 0 !important;
        padding-right: 8px !important;
        display: flex;
        align-items: center;
    }

    .region-trigger {
        border-right: 1px solid #ddd !important;
        padding-right: 8px !important;
        margin-right: 8px !important;
    }

    .language-button .language-name {
        display: none;
    }

    .language-button .flag {
        margin-right: 0;
    }

    /* Sepet butonunu mobilde en sağda ikon haline getir */
    /* Varsayılan: gizli - cart-button-visible veya scrolled modda görünür */
    #goToCartBtn {
        order: 99;
        /* En yüksek order = en sağda */
        padding: 8px 12px;
        min-width: auto;
        width: 40px;
        height: 40px;
        /* display: none zaten genel kuralda, burada override etmiyoruz */
        align-items: center;
        justify-content: center;
        position: relative;
        margin-left: 8px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mobilde cart-button-visible class'ı varsa göster */
    #goToCartBtn.cart-button-visible {
        display: flex;
    }

    #goToCartBtn span:not(.cart-item-count) {
        display: none;
    }

    #goToCartBtn::before {
        content: '\f07a';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 18px;
        display: block;
        transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cart-item-count {
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

}

/* Specific CTA button style for the header */
header .cta-button {
    position: relative;
    padding: 10px 20px;
    background-color: #3776DD;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
    overflow: visible;
}

header .cta-button:hover {
    background-color: #2a66bf;
}

/* Search Bar Styles (moved from page styles to component scope) */
.search-container {
    display: flex;
    align-items: center;
    padding: 12px var(--spacing);
    background-color: var(--secondary);
    border-bottom: 1px solid var(--border);
}

.search-container .search-input {
    width: 100%;
    border-radius: 8px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
    margin: 0;
}

.search-container .search-input:focus {
    border-color: var(--accent-primary);
}

.search-container .search-button {
    background: transparent;
    border: none;
    color: #333;
    padding: 10px 15px;
    border-radius: 8px;
    margin-left: -50px;
    /* Position inside the input */
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 16px;
}

.search-container .search-button:hover {
    color: var(--accent-primary);
}

.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--secondary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    z-index: 1001;
    max-height: 400px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background-color 0.2s ease;
    font-size: 15px;
    text-decoration: none;
    text-decoration: none;
    color: #333;
}

/* Prevent nav-links underline inheritance */
.suggestion-item::after {
    display: none !important;
    content: none !important;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f8f9fa;
}

.suggestion-icon {
    font-size: 14px;
    color: #666;
    opacity: 0.8;
    width: 16px;
    text-align: center;
}

.suggestion-text {
    flex: 1;
    font-weight: 500;
}

.suggestion-text strong {
    color: #0071E3;
    font-weight: 700;
}

.suggestion-category {
    font-size: 13px;
    color: #777;
    opacity: 0.9;
}

.suggestion-no-results {
    padding: 20px;
    text-align: center;
    color: #777;
}

@media (min-width: 901px) {
    .search-container {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 69px;
        /* Match site-top-bar height */
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 500px;
        z-index: 20;
        padding: 0;
        border-bottom: none;
        background: transparent;
    }

    header {
        display: flex;
    }

    /* Web'de expand butonu görünmesin */
    .header-expand-button {
        display: none !important;
    }
}

/* Media query for mobile - switch to vertical layout when needed */
@media (max-width: 900px) {
    .search-container {
        order: 4;
        /* Move search to bottom */
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 8px 16px;
        border-top: 1px solid var(--border);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 100px;
        overflow: hidden;
    }

    /* Scroll'da header küçültme animasyonları - sadece mobil için */

    .header-container.scrolled .site-top-bar {
        height: 46px !important;
        /* Daraltılmış: 40px * 1.15 = 46px */
        padding: 0 16px !important;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Logo ve header-actions smooth bir şekilde görünmez olacak */
    .header-container.scrolled .logo-link {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Scroll durumunda dil ve bölge seçicilerini gizle */
    .header-container.scrolled .language-switcher,
    .header-container.scrolled .region-switcher {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Scroll durumunda sepet butonu görünür kalmalı ve küçülmeli */
    /* cart-button-visible class'ı olmasa bile scrolled modda sepet görünür */
    .header-container.scrolled #goToCartBtn {
        display: flex !important;
        /* Scrolled modda her zaman görünür */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 32.4px !important;
        /* %10 daha küçük: 36px * 0.9 = 32.4px */
        height: 32.4px !important;
        /* %10 daha küçük: 36px * 0.9 = 32.4px */
        padding: 5px !important;
        margin: 0 !important;
        /* Margin'i sıfırla */
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .header-container.scrolled #goToCartBtn::before {
        font-size: 14.58px !important;
        /* %10 daha küçük: 16.2px * 0.9 = 14.58px */
        transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .header-container.scrolled .cart-item-count {
        width: 18px !important;
        /* %10 daha küçük: 20px * 0.9 = 18px */
        height: 18px !important;
        font-size: 10px !important;
        /* %10 daha küçük: 11px * 0.9 = 9.9px ≈ 10px */
        bottom: -5px !important;
        left: -5px !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Expand icon smooth bir şekilde görünür olacak */
    .header-container.scrolled .expand-icon {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: bounceDownCentered 1.5s infinite !important;
        z-index: 10 !important;
        /* Hamburger'den (10001) çok düşük kalmalı - sadece ortada tıklanabilir */
    }

    .header-container.scrolled .hamburger {
        font-size: 22px !important;
        /* %10 küçük: 28px * 0.9 = 25.2px */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        /* %10 küçük: 40px * 0.9 = 36px */
        width: 36px !important;
        /* %10 küçük: 40px * 0.9 = 36px */
        line-height: 1 !important;
        margin: 0 !important;
        align-self: center !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            top 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important;
        /* Tıklanabilir olmalı */
        z-index: 10005 !important;
        /* Nav-links'ten (10003) çok daha yüksek - X ikonu her zaman görünür olmalı */
        position: fixed !important;
        /* Stacking context sorununu çözmek için fixed */
        top: 5px !important;
        /* Scroll durumunda top-bar height: 46px, hamburger küçük */
        left: 16px !important;
        /* Site-top-bar'ın padding'ine göre */
        cursor: pointer !important;
        /* Cursor'ı açıkça belirt */
        background: transparent !important;
        /* Arka plan şeffaf */
    }

    /* Site-top-bar scroll'da hamburger'i engellemesin */
    .header-container.scrolled .site-top-bar {
        overflow: visible !important;
        /* Hamburger'in tıklanabilir olması için */
    }

    .header-container.scrolled .site-top-bar {
        align-items: center !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .header-container.scrolled header {
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
    }

    .header-container.scrolled .main-nav {
        height: auto !important;
        /* Nav-links için yeterli alan */
        max-height: none !important;
        overflow: visible !important;
        /* Nav-links görünür olabilmeli */
        position: static !important;
        /* Nav-links fixed olabilmeli */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Nav-links body'ye taşındığında - normal durum */
    body>#navLinks,
    body>.nav-links {
        position: fixed !important;
        top: 0 !important;
        /* Normal durumda en üstten başla */
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 10003 !important;
        /* Header-container'dan (1000) yüksek ama hamburger'den (10005) düşük */
        background-color: var(--secondary) !important;
        padding-top: 80px !important;
        align-items: center !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        margin: 0 !important;
        border: none !important;
        transform: none !important;
        clip-path: none !important;
        box-sizing: border-box !important;
    }

    /* Scroll durumunda body'deki nav-links - JavaScript'te scrolled class'ı eklenecek */
    body>#navLinks.scrolled,
    body>.nav-links.scrolled {
        top: 46px !important;
        /* Scroll durumunda top-bar height'ına göre */
        height: calc(100vh - 46px) !important;
        padding-top: 46px !important;
    }

    /* Scroll durumunda nav-links header içindeyse de aynı stiller */
    .header-container.scrolled .nav-links {
        position: fixed !important;
        top: 46px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 46px) !important;
        z-index: 10003 !important;
        /* Header-container'dan (1000) yüksek ama hamburger'den (10004) düşük */
        background-color: var(--secondary) !important;
        padding-top: 46px !important;
        align-items: center !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        margin: 0 !important;
        border: none !important;
        transform: none !important;
        clip-path: none !important;
        box-sizing: border-box !important;
    }

    /* Aktif olduğunda görünür */
    body>#navLinks.active,
    body>.nav-links.active,
    .header-container.scrolled .nav-links.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Aktif değilse gizli */
    body>#navLinks:not(.active),
    body>.nav-links:not(.active),
    .header-container.scrolled .nav-links:not(.active) {
        display: none !important;
        pointer-events: none !important;
    }

    .header-container.scrolled .search-container {
        max-height: 0 !important;
        padding: 0 16px !important;
        border-top: none !important;
        margin: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Expand icon için bounce animasyonu */
    @keyframes bounceDownCentered {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
        }

        50% {
            transform: translateX(-50%) translateY(8px);
        }
    }

    .expand-icon:active {
        animation: none !important;
        transform: translateX(-50%) scale(0.9) !important;
    }

    /* STATIC COMPACT MODE: Hide expand icon */
    body.static-compact .header-container.scrolled .expand-icon {
        display: none !important;
    }

    /* STATIC COMPACT MODE: Mobile Logo Text */
    .mobile-logo-text {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: var(--text);
        white-space: nowrap;
        pointer-events: none;
        z-index: 10006;
        /* Ensure it's above other elements but below modal overlays if any */
        letter-spacing: 0.5px;
    }

    /* Dark text for visibility on light/transparent bg */
    body.static-compact .mobile-logo-text {
        color: #333;
    }

    /* --- MENU OPEN STATE OVERRIDES for MOBILE --- */
    /* body.menu-open rules ensure consistent appearance */

    body.menu-open .header-container .site-top-bar {
        height: 69px !important;
        background-color: transparent !important;
        border-bottom: none !important;
        transition: none !important;
    }

    /* Hide elements user found distracting in menu */
    body.menu-open .header-container .logo-link,
    body.menu-open .header-container .language-switcher,
    body.menu-open .header-container .region-switcher,
    body.menu-open .header-container #goToCartBtn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Normalize Hamburger Size & Position */
    body.menu-open>.hamburger {
        top: 14.5px !important;
        /* (69-40)/2 */
        left: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
        padding: 8px !important;
        background: transparent !important;
        transition: all 0.3s ease !important;
    }

    /* Also ensure Scrolled Hamburger behaves */
    body.menu-open>.hamburger.scrolled {
        top: 14.5px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
    }

    /* Normalise Menu Position (Top 0) */
    body.menu-open>.nav-links,
    body.menu-open>#navLinks {
        top: 0 !important;
        height: 100vh !important;
        padding-top: 80px !important;
        /* Match the normal top padding */
    }

    /* Force consistent panel padding regardless of scroll state */
    body.menu-open .menu-panel,
    body.menu-open .nav-links.scrolled .menu-panel {
        padding-top: 10px !important;
    }
}

/* ========================================
   SEARCH MODAL & ICON STYLES
   ======================================== */

/* Search Icon/Trigger in Navigation */
.nav-search-item {
    display: flex;
    align-items: center;
    align-self: center;
    position: relative;
    z-index: 100;
    margin-left: auto;
    /* Push to right, expand left */
    width: 44px;
    /* Only collapsed width */
    height: 44px;
    /* Fixed height */
}

.nav-search-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align content to left for input */
    cursor: pointer;
    padding: 0;
    background: transparent;
    border: 1px solid #ccc;
    /* Thinner, lighter border */
    color: var(--text);
    font-size: 18px;
    font-weight: 400;
    width: 44px;
    height: 44px;
    position: absolute;
    /* Absolute for right anchoring */
    right: 0;
    /* Anchor to right */
    top: 50%;
    transform: translateY(-50%);
    overflow: visible;
    /* Show icon */
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-search-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--accent);
    color: var(--accent);
}

.nav-search-trigger i,
.nav-search-trigger .search-icon-wrapper {
    position: absolute;
    right: 13px;
    /* Fixed position on right */
    font-size: 18px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    /* Ensure wrapper behaves correctly */
    align-items: center;
    justify-content: center;
    color: var(--text);
    /* Ensure color inheritance */
}

/* Expanded state - match reference design */
.nav-search-trigger.expanded {
    width: 500px;
    background: #F5F5F5;
    /* Light gray background like reference */
    border: 1px solid #D0D0D0;
    /* Thin gray border */
    padding: 0 16px;
    justify-content: space-between;
    overflow: hidden;
    /* Hide overflow only when expanded */
}

.nav-search-trigger.expanded i,
.nav-search-trigger.expanded .search-icon-wrapper {
    transform: rotate(90deg);
    color: #333;
    /* Dark icon color */
    font-size: 20px;
}

/* Search input inside trigger */
.nav-search-trigger input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.2s;
}

.nav-search-trigger input::placeholder {
    color: #999;
    /* Gray placeholder text like reference */
}

.nav-search-trigger.expanded input {
    opacity: 1;
    pointer-events: auto;
}

/* Hide nav links when search is expanded */
body.search-expanded .nav-links .nav-item:not(.nav-search-item) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide search bar on products page (has its own search) */
body.products-page .nav-search-item {
    display: none !important;
}

/* Hide the text span */
.nav-search-trigger span {
    display: none;
}

/* Search Modal Overlay */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10005;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    pointer-events: none;
}

.search-modal-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* Search Modal Container */
.search-modal-container {
    background: white;
    width: 90%;
    max-width: 600px;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.search-modal-overlay.active .search-modal-container {
    transform: translateY(0);
}

/* Close button for modal */
.search-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.search-modal-close:hover {
    background: var(--background-alt);
    color: var(--text);
}

/* Modal search container adjustments */
.search-modal-overlay .search-container {
    padding: 0;
    background: transparent;
    border: none;
    position: relative;
}

.search-modal-overlay .search-suggestions {
    position: relative;
    top: 8px;
    left: 0;
    right: 0;
}

/* ========================================
   RESPONSIVE UTILITY CLASSES
   ======================================== */

@media (min-width: 901px) {
    .desktop-only {
        display: flex !important;
    }

    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }
}

/* FIX: Ensure suggestions are visible and positioned correctly */
/* We only want the CONTAINER to be relative so suggestions anchor to it.
   The TRIGGER must remain absolute (original design) to expand leftwards. */
.nav-search-item {
    position: relative !important;
}

/* Move suggestions out of overflow:hidden influence if possible, 
   but since we moved it in HTML, we target it here */
.header-search-suggestions {
    /* Fixed top offset to clear the search bar height (44px) */
    top: 45px;
    right: 0;
    margin-top: 5px;
    z-index: 10002;
    /* Higher than nav items */
    width: 500px;
    /* Match expanded width */
    display: none;
    /* Controlled by JS search-module */

    /* Visual Styles */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    color: #333;
    /* Ensure text is visible */
}

/* We do NOT need to override overflow on trigger anymore because suggestions are outside.
   So we remove the .nav-search-trigger rule modifications. */

/* UPDATE: Actually we DO need to ensure overflow is visible because the trigger 
   might still be clipping if the suggestions were somehow inside (they are sibling now via JS? No wait).
   
   Wait, in the HTML restructure (JS), I moved suggestions to `.nav-search-item`.
   `.nav-search-item` wraps `.nav-search-trigger`.
   
   If `nav-search-item` has `position: relative`, and suggestion is `absolute`, it anchors to item.
   The `nav-search-trigger` is absolute right 0.
   
   The issue is if `nav-search-item` (44x44) clips content? It shouldn't unless specified.
   
   However, let's look at the browser findings. "Trigger acts as a mask".
   This implies suggestions are still inside `nav-search-trigger` OR `nav-search-trigger` is on top?
   
   If the user says "results gone", and browser says "clipped by nav-search-trigger",
   it implies suggestions ARE inside nav-search-trigger?
   
   Let's check `header-loader.js` change again.
   I put logic: `if (trigger.parentElement) ... trigger.parentElement.appendChild ...`
   
   Maybe that JS didn't run effectively or cache issue? 
   OR `trigger.parentElement` is NOT `nav-search-item`?
   
   Safest fix is to FORCE overflow visible on trigger anyway.
*/
.nav-search-trigger.expanded {
    overflow: visible !important;
}