/*
 * HerkesMemnun 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
 * ---------------------------------------------------------------------- */
.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;
}

/*
 * Giriş/Hesabım butonundaki kullanıcı ikonu Font Awesome regular setine
 * bağlı kalmasın. Bazı istemcilerde regular glyph yanlış karakter gibi
 * görünebildiği için aynı fa-user glyph'ini Free solid ağırlıkta zorlarız.
 */
.hm-header-actions .hm-action-button i.fa-user {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1 !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ı.
 * Menü öğeleri HerkesMemnun içerik çizgisinden soldan başlar; marka/kategori
 * bağlantıları ekran boyunca gereksiz biçimde dağıtılmaz.
 */
@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;
        justify-content: flex-start !important;
        gap: 20px !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: max-content !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        gap: 28px !important;
    }

    .hm-main-nav a {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 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: 6px !important;
        left: 6px !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;
    }
}