/*
 * EnFavori Design System — Public Shell Bridge
 * --------------------------------------------
 * Header ve footer eski hm-* selector'larından yeni ef-* token sistemine
 * aşamalı geçerken kullanılan geçici uyumluluk katmanıdır.
 *
 * Neden !important?
 * Header/footer Blade dosyalarında halen sayfa içinde ve bu dosyadan sonra
 * yüklenen inline stil blokları var. Migrasyon tamamlanana kadar ortak
 * tokenların tek merkezden söz sahibi olabilmesi için yalnızca shell
 * seviyesindeki temel görsel kurallarda !important kullanılır.
 *
 * Bu dosya işlevsel JS davranışlarını, görünürlük kurallarını veya menü
 * aç/kapa mantığını değiştirmez.
 */

:root {
    /* Header legacy token -> Design System */
    --hm-navy: var(--ef-color-navy) !important;
    --hm-navy-dark: var(--ef-color-navy-dark) !important;
    --hm-navy-soft: #1a3150 !important;
    --hm-blue: var(--ef-color-blue) !important;
    --hm-blue-hover: var(--ef-color-blue-dark) !important;
    --hm-turquoise: var(--ef-color-turquoise) !important;
    --hm-turquoise-hover: var(--ef-color-turquoise-dark) !important;
    --hm-white: var(--ef-color-white) !important;
    --hm-page: var(--ef-color-page) !important;
    --hm-border: var(--ef-color-border) !important;
    --hm-text: var(--ef-color-text) !important;
    --hm-muted: var(--ef-color-muted) !important;
    --hm-danger: var(--ef-color-danger) !important;

    /* Footer legacy token -> Design System */
    --hm-footer-navy: var(--ef-color-navy) !important;
    --hm-footer-navy-dark: var(--ef-color-navy-dark) !important;
    --hm-footer-blue: var(--ef-color-blue) !important;
    --hm-footer-blue-hover: var(--ef-color-blue-dark) !important;
    --hm-footer-turquoise: var(--ef-color-turquoise) !important;
    --hm-footer-turquoise-hover: var(--ef-color-turquoise-dark) !important;
    --hm-footer-white: var(--ef-color-white) !important;
}

/* -------------------------------------------------------------------------
 * Ortak tipografi / kutu modeli
 * ---------------------------------------------------------------------- */
/*
 * Font yalnızca shell köklerine verilir ve doğal inheritance kullanılır.
 * Tüm alt elemanlara !important ile font basmak Font Awesome'ın kendi
 * ikon font-family tanımını ezer ve ikonların kare kutu görünmesine yol açar.
 */
.hm-sticky-wrapper,
.hm-footer-container {
    font-family: var(--ef-font-sans);
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.hm-sticky-wrapper {
    margin-bottom: var(--ef-space-4) !important;
}

.hm-header-container {
    background-color: var(--ef-color-navy) !important;
    border-bottom-color: var(--ef-color-turquoise) !important;
    box-shadow: 0 4px 14px rgba(13, 27, 45, 0.13) !important;
}

.hm-site-header,
.hm-header-row {
    min-height: 62px !important;
}

.hm-site-logo {
    max-width: 214px !important;
    max-height: 34px !important;
}

.hm-header-actions {
    gap: var(--ef-space-2) !important;
}

.hm-action-button,
.hm-mobile-menu-button,
.hm-close-button {
    border-radius: var(--ef-radius-sm) !important;
}

.hm-action-button,
.hm-mobile-menu-button {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
}

.hm-action-button:hover,
.hm-action-button:focus,
.hm-mobile-menu-button:hover,
.hm-mobile-menu-button:focus {
    background-color: var(--ef-color-turquoise-dark) !important;
    border-color: var(--ef-color-turquoise-dark) !important;
}

/*
 * Hesap ikonunda Font Awesome glyph'ini tamamen kapatıyoruz.
 * Bazı cihazlarda regular font dosyasındaki glyph kullanıcı ikonunun yanında
 * E benzeri bir karakter üretiyordu. Butonun kendi pseudo-elementleriyle
 * tek, temiz ve fonttan bağımsız bir profil ikonu çizilir.
 */
.hm-account-action-button {
    position: relative !important;
}

.hm-account-action-button > i.fa-user {
    display: none !important;
}

.hm-account-action-button:has(> i.fa-user)::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.hm-account-action-button:has(> i.fa-user)::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 7px !important;
    width: 17px !important;
    height: 9px !important;
    border: 2px solid currentColor !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.hm-nav-container {
    border-bottom-color: var(--ef-color-border) !important;
    box-shadow: var(--ef-shadow-sm) !important;
}

.hm-main-nav {
    min-height: 52px !important;
}

.hm-main-nav a {
    min-height: 52px !important;
    padding-inline: var(--ef-space-4) !important;
    color: var(--ef-color-text) !important;
    font-size: var(--ef-font-size-md) !important;
    font-weight: 700 !important;
}

.hm-main-nav a:hover,
.hm-main-nav a:focus {
    color: var(--ef-color-turquoise-dark) !important;
    background-color: var(--ef-color-surface-soft) !important;
}

.hm-main-nav a::after {
    right: var(--ef-space-4) !important;
    left: var(--ef-space-4) !important;
    background-color: transparent !important;
}

.hm-main-nav a:hover::after,
.hm-main-nav a:focus::after {
    background-color: var(--ef-color-turquoise) !important;
}

/*
 * Masaüstü navigasyon standardı.
 * Header ve navigasyon aynı Bootstrap .container genişliğini kullanır.
 * Geniş ekranda menü bu container içinde dengeli dağılır; tablet aralığında
 * içerik kesilmek yerine güvenli biçimde yatay kayabilir.
 */
@media (min-width: 768px) {
    .hm-nav-container > .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .hm-nav-scroller {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .hm-main-nav {
        min-width: 100% !important;
        width: max-content !important;
    }

    .hm-main-nav a {
        flex: 0 0 auto !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    .hm-main-nav a:first-child {
        padding-left: 0 !important;
    }

    .hm-main-nav a:last-child {
        padding-right: 0 !important;
    }

    .hm-main-nav a::after {
        right: 8px !important;
        left: 8px !important;
    }

    .hm-main-nav a:first-child::after {
        left: 0 !important;
    }

    .hm-main-nav a:last-child::after {
        right: 0 !important;
    }
}

@media (min-width: 1200px) {
    .hm-nav-scroller {
        overflow-x: hidden !important;
    }

    .hm-main-nav {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: space-between !important;
    }

    .hm-main-nav a {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding-right: clamp(4px, 0.35vw, 7px) !important;
        padding-left: clamp(4px, 0.35vw, 7px) !important;
        font-size: clamp(13px, 0.9vw, 14px) !important;
    }

    .hm-main-nav a:first-child {
        padding-left: 0 !important;
    }

    .hm-main-nav a:last-child {
        padding-right: 0 !important;
    }

    .hm-main-nav a::after {
        right: clamp(4px, 0.35vw, 7px) !important;
        left: clamp(4px, 0.35vw, 7px) !important;
    }
}

/* Mobil yan menü de aynı kart/spacing sistemine yaklaşır. */
.hm-sidenav {
    box-shadow: -12px 0 36px rgba(15, 23, 42, 0.18) !important;
}

.hm-sidenav-header {
    background-color: var(--ef-color-navy) !important;
    border-bottom-color: var(--ef-color-turquoise) !important;
}

.hm-sidenav-content {
    padding: var(--ef-space-3) !important;
}

.hm-mobile-nav-item {
    min-height: var(--ef-control-height) !important;
    margin-bottom: var(--ef-space-1) !important;
    padding: 10px var(--ef-space-3) !important;
    color: var(--ef-color-text-soft) !important;
    border-radius: var(--ef-radius-sm) !important;
}

.hm-mobile-nav-icon {
    border-radius: var(--ef-radius-sm) !important;
}

/* Arama paneli de shell radius/elevation standardını kullanır. */
.hm-search-panel {
    border-top-color: var(--ef-color-turquoise) !important;
    border-radius: var(--ef-radius-lg) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
}

.hm-search-heading-icon,
.hm-search-close,
.hm-search-input,
.hm-search-submit,
.hm-search-section,
.hm-search-chip,
.hm-live-search-results,
.hm-live-search-item,
.hm-live-search-all {
    border-radius: var(--ef-radius-md) !important;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.hm-footer-container {
    margin-top: var(--ef-space-6) !important;
    color: #d8e3ef !important;
    background: linear-gradient(
        180deg,
        var(--ef-color-navy) 0%,
        var(--ef-color-navy-dark) 100%
    ) !important;
    border-top-color: var(--ef-color-turquoise) !important;
}

.hm-footer-main {
    padding-top: var(--ef-space-7) !important;
    padding-bottom: var(--ef-space-6) !important;
}

.hm-footer-row {
    row-gap: var(--ef-space-6) !important;
}

.hm-footer-brand-box {
    padding-right: var(--ef-space-6) !important;
}

.hm-footer-logo-link {
    margin-bottom: var(--ef-space-4) !important;
}

.hm-footer-description {
    max-width: 360px !important;
    font-size: 14px !important;
    line-height: var(--ef-line-height-relaxed) !important;
}

.hm-footer-socials {
    gap: var(--ef-space-2) !important;
    margin-top: var(--ef-space-4) !important;
}

.hm-footer-social-link,
.hm-footer-share-button {
    border-radius: var(--ef-radius-sm) !important;
}

.hm-footer-social-link:hover,
.hm-footer-social-link:focus {
    background-color: var(--ef-color-turquoise-dark) !important;
    border-color: var(--ef-color-turquoise-dark) !important;
}

.hm-footer-share-area {
    margin-top: var(--ef-space-4) !important;
}

.hm-footer-card-box {
    border-radius: var(--ef-radius-lg) !important;
}

.hm-footer-list a,
.hm-footer-link-button {
    border-radius: var(--ef-radius-sm) !important;
}

.hm-footer-copyright {
    line-height: var(--ef-line-height-relaxed) !important;
}

/* -------------------------------------------------------------------------
 * Responsive shell standardı
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hm-sticky-wrapper {
        margin-bottom: var(--ef-space-3) !important;
    }

    .hm-site-header,
    .hm-header-row {
        min-height: 52px !important;
    }

    .hm-header-actions {
        gap: 6px !important;
    }

    .hm-action-button,
    .hm-mobile-menu-button {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .hm-footer-container {
        margin-top: var(--ef-space-5) !important;
    }

    .hm-footer-main {
        padding-top: var(--ef-space-5) !important;
        padding-bottom: var(--ef-space-5) !important;
    }

    .hm-footer-row {
        row-gap: var(--ef-space-4) !important;
    }

    .hm-footer-brand-box {
        padding-right: var(--ef-space-4) !important;
    }

    .hm-footer-card-box {
        border-radius: var(--ef-radius-md) !important;
    }
}

@media (max-width: 390px) {
    .hm-action-button,
    .hm-mobile-menu-button {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .hm-footer-main {
        padding-right: var(--ef-space-2) !important;
        padding-left: var(--ef-space-2) !important;
    }
}

/* -------------------------------------------------------------------------
 * Hesap ikonu — temiz ve sabit profil sembolü
 * ----------------------------------------------------------------------
 * Font Awesome glyph'ine bağlı kalmadan, tüm cihazlarda aynı görünen dolu
 * kullanıcı sembolü kullanılır. Buton ölçüsü diğer header ikonlarıyla birebir
 * aynı tutulur; böylece mobilde hesap butonu daha büyük/küçük görünmez.
 */
html body .hm-header-actions .hm-account-action-button {
    position: relative !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
}

html body .hm-header-actions .hm-account-action-button:not(:has(.hm-header-profile-image)) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024'%3E%3Cpath fill='%23ffffff' d='M12%2012c2.21%200%204-1.79%204-4s-1.79-4-4-4-4%201.79-4%204%201.79%204%204%204zm0%202c-2.67%200-8%201.34-8%204v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
}

html body .hm-header-actions .hm-account-action-button > i,
html body .hm-header-actions .hm-account-action-button > i::before,
html body .hm-header-actions .hm-account-action-button > i::after,
html body .hm-header-actions .hm-account-action-button::before,
html body .hm-header-actions .hm-account-action-button::after,
html body .hm-header-actions .hm-account-action-button .ef-account-svg {
    content: none !important;
    display: none !important;
}

html body .hm-header-actions .hm-account-action-button:hover,
html body .hm-header-actions .hm-account-action-button:focus,
html body .hm-header-actions .hm-account-action-button:active,
html body .hm-header-actions .hm-account-action-button:focus-visible {
    background-size: 18px 18px !important;
    background-position: center !important;
    transform: none !important;
    animation: none !important;
}

@media (max-width: 767.98px) {
    html body .hm-header-actions .hm-account-action-button,
    html body .hm-header-actions .hm-account-action-button:hover,
    html body .hm-header-actions .hm-account-action-button:focus,
    html body .hm-header-actions .hm-account-action-button:active,
    html body .hm-header-actions .hm-account-action-button:focus-visible {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        background-size: 18px 18px !important;
    }
}

@media (max-width: 390px) {
    html body .hm-header-actions .hm-account-action-button,
    html body .hm-header-actions .hm-account-action-button:hover,
    html body .hm-header-actions .hm-account-action-button:focus,
    html body .hm-header-actions .hm-account-action-button:active,
    html body .hm-header-actions .hm-account-action-button:focus-visible {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        background-size: 17px 17px !important;
    }
}