/**
 * Header chrome — mesaj, bildirim, sepet
 * Arama kutusu ile uyumlu yüzey
 */

header {
    /* Arama kutusu ile aynı yüzey tokenları */
    --header-nav-icon-bg: var(--chrome-control-bg, #1a1c23);
    --header-nav-icon-hover-bg: var(--surface-hover, #22252e);
    --header-nav-icon-border: var(--header-strip-border, #2d3139);
}

body.light-mode header {
    --header-nav-icon-bg: #f4f6f9;
    --header-nav-icon-hover-bg: #ffffff;
    --header-nav-icon-border: var(--header-strip-border, rgba(74, 158, 255, 0.15));
}

@media (min-width: 1025px) {
    header {
        --header-nav-icon-h: 44px;
    }
}

@media (min-width: 1025px) {

    header .nav-section.header-nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        min-height: var(--header-nav-icon-h, 44px);
    }

    header .nav-section.header-nav-actions .divider {
        display: none !important;
    }

    header .nav-section.header-nav-actions .header-nav-pill,
    header .nav-section.header-nav-actions .header-nav-pill.nav-item {
        position: relative;
        flex-shrink: 0;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    header .nav-section.header-nav-actions .header-nav-pill:hover,
    header .nav-section.header-nav-actions .messages-wrapper.nav-item:hover,
    header .nav-section.header-nav-actions .notification-wrapper.nav-item:hover {
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Eski mavi hover katmanları kapalı */
    header .nav-section.header-nav-actions .messages-icon-container > div,
    header .nav-section.header-nav-actions .notification-icon-container > div {
        display: none !important;
    }

    header .nav-section.header-nav-actions .messages-wrapper:hover .messages-icon-container div,
    header .nav-section.header-nav-actions .notification-wrapper:hover .notification-icon-container div {
        width: 0 !important;
        height: 0 !important;
    }

    /* Mesaj / bildirim kutusu */
    header .nav-section.header-nav-actions .header-action-icon-box,
    header .nav-section.header-nav-actions .messages-icon-container.header-action-icon-box,
    header .nav-section.header-nav-actions .notification-icon-container.header-action-icon-box {
        box-sizing: border-box;
        width: var(--header-nav-icon-h, 44px) !important;
        height: var(--header-nav-icon-h, 44px) !important;
        min-width: var(--header-nav-icon-h, 44px) !important;
        min-height: var(--header-nav-icon-h, 44px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background: var(--header-nav-icon-bg, #1a1c23) !important;
        background-color: var(--header-nav-icon-bg, #1a1c23) !important;
        border: 1px solid var(--header-nav-icon-border, #2d3139) !important;
        overflow: hidden !important;
        transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
        box-shadow: none !important;
    }

    header .nav-section.header-nav-actions .messages-wrapper:hover .header-action-icon-box,
    header .nav-section.header-nav-actions .notification-wrapper:hover .header-action-icon-box {
        background: var(--header-nav-icon-hover-bg, #22252e) !important;
        background-color: var(--header-nav-icon-hover-bg, #22252e) !important;
        border-color: rgba(74, 158, 255, 0.35) !important;
        box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.12) !important;
    }

    header .nav-section.header-nav-actions .header-action-icon-box .messages-icon,
    header .nav-section.header-nav-actions .header-action-icon-box .notification-icon {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        max-width: 17px !important;
        max-height: 17px !important;
        color: rgba(255, 255, 255, 0.72) !important;
        stroke: rgba(255, 255, 255, 0.72) !important;
        transition: color 0.18s ease, stroke 0.18s ease !important;
    }

    header .nav-section.header-nav-actions .messages-wrapper:hover .messages-icon,
    header .nav-section.header-nav-actions .notification-wrapper:hover .notification-icon {
        color: #4a9eff !important;
        stroke: #4a9eff !important;
    }

    body.light-mode header .nav-section.header-nav-actions .header-action-icon-box .messages-icon,
    body.light-mode header .nav-section.header-nav-actions .header-action-icon-box .notification-icon {
        color: #9ca3af !important;
        stroke: #9ca3af !important;
    }

    body.light-mode header .nav-section.header-nav-actions .messages-wrapper:hover .messages-icon,
    body.light-mode header .nav-section.header-nav-actions .notification-wrapper:hover .notification-icon {
        color: #4a9eff !important;
        stroke: #4a9eff !important;
    }

    /* Sepet */
    header .nav-section.header-nav-actions .header-cart-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    header .nav-section.header-nav-actions button.header-cart-link,
    header .nav-section.header-nav-actions a.header-cart-link {
        width: var(--header-nav-icon-h, 44px) !important;
        height: var(--header-nav-icon-h, 44px) !important;
        min-width: var(--header-nav-icon-h, 44px) !important;
        min-height: var(--header-nav-icon-h, 44px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: var(--header-nav-icon-bg, #1a1c23) !important;
        background-color: var(--header-nav-icon-bg, #1a1c23) !important;
        border: 1px solid var(--header-nav-icon-border, #2d3139) !important;
        box-shadow: none !important;
        color: #facc15 !important;
        transform: none !important;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
    }

    header .nav-section.header-nav-actions button.header-cart-link .header-cart-link__icon,
    header .nav-section.header-nav-actions a.header-cart-link .header-cart-link__icon,
    header .nav-section.header-nav-actions button.header-cart-link i,
    header .nav-section.header-nav-actions a.header-cart-link i {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        color: #facc15 !important;
        stroke: #facc15 !important;
        fill: none !important;
        flex-shrink: 0;
        transition: color 0.18s ease, stroke 0.18s ease !important;
    }

    header .nav-section.header-nav-actions button.header-cart-link:hover,
    header .nav-section.header-nav-actions a.header-cart-link:hover {
        background: var(--header-nav-icon-hover-bg, #22252e) !important;
        background-color: var(--header-nav-icon-hover-bg, #22252e) !important;
        border-color: rgba(74, 158, 255, 0.35) !important;
        color: #ef4444 !important;
        transform: none !important;
        box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.12) !important;
    }

    header .nav-section.header-nav-actions button.header-cart-link:hover .header-cart-link__icon,
    header .nav-section.header-nav-actions a.header-cart-link:hover .header-cart-link__icon,
    header .nav-section.header-nav-actions button.header-cart-link:hover i,
    header .nav-section.header-nav-actions a.header-cart-link:hover i {
        color: #ef4444 !important;
        stroke: #ef4444 !important;
    }

    body.light-mode header .nav-section.header-nav-actions button.header-cart-link,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link {
        background: var(--header-nav-icon-bg, #f4f6f9) !important;
        border: 1px solid var(--header-nav-icon-border, rgba(74, 158, 255, 0.15)) !important;
        color: #eab308 !important;
    }

    body.light-mode header .nav-section.header-nav-actions button.header-cart-link .header-cart-link__icon,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link .header-cart-link__icon,
    body.light-mode header .nav-section.header-nav-actions button.header-cart-link i,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link i {
        color: #eab308 !important;
        stroke: #eab308 !important;
    }

    body.light-mode header .nav-section.header-nav-actions button.header-cart-link:hover,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link:hover {
        background: var(--header-nav-icon-hover-bg, #ffffff) !important;
        border-color: rgba(74, 158, 255, 0.28) !important;
        color: #ef4444 !important;
        box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.1) !important;
    }

    body.light-mode header .nav-section.header-nav-actions .messages-wrapper:hover .header-action-icon-box,
    body.light-mode header .nav-section.header-nav-actions .notification-wrapper:hover .header-action-icon-box {
        border-color: rgba(74, 158, 255, 0.28) !important;
        box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.1) !important;
    }

    body.light-mode header .nav-section.header-nav-actions button.header-cart-link:hover .header-cart-link__icon,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link:hover .header-cart-link__icon,
    body.light-mode header .nav-section.header-nav-actions button.header-cart-link:hover i,
    body.light-mode header .nav-section.header-nav-actions a.header-cart-link:hover i {
        color: #ef4444 !important;
        stroke: #ef4444 !important;
    }

    /* Rozetler */
    header .nav-section.header-nav-actions .message-count,
    header .nav-section.header-nav-actions .notification-count {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 17px;
        border-radius: 999px;
        border: 2px solid var(--header-strip-bg, #2a2a2a);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        background: #ef4444;
        color: #fff;
        font-weight: 600;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    header .nav-section.header-nav-actions .message-count[style*="display: block"],
    header .nav-section.header-nav-actions .notification-count.active {
        display: flex !important;
    }

    body.light-mode header .nav-section.header-nav-actions .message-count,
    body.light-mode header .nav-section.header-nav-actions .notification-count {
        border-color: var(--header-strip-bg, #ffffff);
    }

    header .nav-section.header-nav-actions .yer6-header-cart-badge {
        top: 2px;
        right: 2px;
        border: 2px solid var(--header-strip-bg, #2a2a2a);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    body.light-mode header .nav-section.header-nav-actions .yer6-header-cart-badge {
        border-color: var(--header-strip-bg, #ffffff);
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    header {
        --header-nav-icon-h: 42px;
    }

    header .nav-section.header-nav-actions {
        gap: 8px;
    }
}