/* =============================================================================
   Sazak Yemek — Mobile Navigation v2 (modern, full-width)
   ============================================================================= */

@media (max-width: 1200px) {
    :root {
        --mnav-navy: #11194e;
        --mnav-blue: #142487;
        --mnav-red: #e8000a;
        --mnav-muted: rgba(17, 25, 78, 0.55);
        --mnav-line: rgba(17, 25, 78, 0.08);
        --mnav-surface: #f7f8fc;
        --mnav-ease: cubic-bezier(0.32, 0.72, 0, 1);
        --mnav-bar-h: 60px;
    }

    /* Full-width sticky header — no floating pill */
    #pxl-header-elementor {
        position: sticky !important;
        top: 0 !important;
        z-index: 1100 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        pointer-events: auto !important;
    }

    #pxl-header-mobile.sy-mnav {
        pointer-events: auto;
        display: block !important;
        position: relative !important;
        z-index: 1101 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--mnav-line) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 24px rgba(17, 25, 78, 0.04) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
    }

    #pxl-header-elementor #pxl-header-mobile.sy-mnav {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    body.page-home #pxl-header-mobile.sy-mnav,
    body.page-inner #pxl-header-mobile.sy-mnav {
        background: #fff !important;
    }

    /* Top bar */
    .sy-mnav__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: max(var(--mnav-bar-h), calc(var(--mnav-logo-h, 44px) + 18px));
        height: auto;
        padding: 0.5rem max(18px, env(safe-area-inset-right, 0px)) 0.5rem max(18px, env(safe-area-inset-left, 0px));
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    }

    .sy-mnav__brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        flex: 1;
        text-decoration: none !important;
    }

    .sy-mnav__brand img {
        display: block;
        max-height: var(--mnav-logo-h, 44px);
        width: auto;
        height: auto;
    }

    .sy-mnav__brand-text {
        font-size: 1rem;
        font-weight: 700;
        color: var(--mnav-navy);
        letter-spacing: -0.02em;
    }

    /* Minimal menu trigger */
    .sy-mnav__toggle {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease;
    }

    .sy-mnav__toggle:active,
    .sy-mnav__toggle:hover {
        background: var(--mnav-surface);
    }

    .sy-mnav__burger {
        position: relative;
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--mnav-navy);
        border-radius: 2px;
        transition: background 0.2s ease;
    }

    .sy-mnav__burger::before,
    .sy-mnav__burger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 1.5px;
        background: var(--mnav-navy);
        border-radius: 2px;
        transition: transform 0.3s var(--mnav-ease), top 0.3s var(--mnav-ease), width 0.2s ease;
    }

    .sy-mnav__burger::before {
        top: -7px;
    }

    .sy-mnav__burger::after {
        top: 7px;
        width: 16px;
        right: 0;
        left: auto;
    }

    .sy-mnav.is-open .sy-mnav__toggle {
        background: var(--mnav-surface);
    }

    .sy-mnav.is-open .sy-mnav__burger {
        background: transparent;
    }

    .sy-mnav.is-open .sy-mnav__burger::before {
        top: 0;
        width: 22px;
        transform: rotate(45deg);
    }

    .sy-mnav.is-open .sy-mnav__burger::after {
        top: 0;
        width: 22px;
        left: 0;
        transform: rotate(-45deg);
    }

    /* Backdrop */
    .sy-mnav__backdrop {
        position: fixed;
        inset: 0;
        z-index: 10050;
        background: rgba(17, 25, 78, 0.35);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .sy-mnav.is-open .sy-mnav__backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Drawer — full-height, sağdan */
    .sy-mnav__panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10051;
        display: flex;
        flex-direction: column;
        width: min(100%, 400px);
        max-width: 400px;
        background: #fff;
        box-shadow: -8px 0 40px rgba(17, 25, 78, 0.12);
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        transition: transform 0.4s var(--mnav-ease), visibility 0.4s ease;
        overflow: hidden;
    }

    .sy-mnav.is-open .sy-mnav__panel {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    /* Panel header */
    .sy-mnav__panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-shrink: 0;
        min-height: var(--mnav-bar-h);
        padding: max(10px, env(safe-area-inset-top, 0px)) 20px 10px 20px;
        border-bottom: 1px solid var(--mnav-line);
        background: #fff;
    }

    .sy-mnav__panel-logo img {
        display: block;
        max-height: calc(var(--mnav-logo-h, 44px) - 4px);
        width: auto;
    }

    .sy-mnav__panel-title {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--mnav-navy);
        letter-spacing: -0.02em;
    }

    .sy-mnav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--mnav-surface);
        color: var(--mnav-navy);
        font-size: 1.125rem;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__close:hover {
        background: rgba(17, 25, 78, 0.1);
    }

    /* Nav area */
    .sy-mnav__nav {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0.5rem 0 1rem;
    }

    .sy-mnav__nav-label {
        margin: 0;
        padding: 0.75rem 20px 0.5rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--mnav-muted);
    }

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

    .sy-mnav__item {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--mnav-line);
    }

    .sy-mnav__item:last-child {
        border-bottom: none;
    }

    .sy-mnav__row {
        display: flex;
        align-items: center;
        min-height: 52px;
    }

    .sy-mnav__link {
        display: flex;
        align-items: center;
        flex: 1;
        min-height: 52px;
        padding: 0.875rem 20px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: var(--mnav-navy) !important;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none !important;
        letter-spacing: -0.015em;
        transition: color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__link--solo {
        justify-content: space-between;
    }

    .sy-mnav__link--solo::after {
        content: "";
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        margin-left: 0.75rem;
        border-top: 1.5px solid rgba(17, 25, 78, 0.2);
        border-right: 1.5px solid rgba(17, 25, 78, 0.2);
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sy-mnav__link:active,
    .sy-mnav__link:hover {
        background: var(--mnav-surface);
        color: var(--mnav-blue) !important;
    }

    .sy-mnav__item.is-active > .sy-mnav__link,
    .sy-mnav__item.is-active > .sy-mnav__row > .sy-mnav__link,
    .sy-mnav__item.is-parent-active > .sy-mnav__row > .sy-mnav__link {
        color: var(--mnav-red) !important;
        font-weight: 600;
    }

    .sy-mnav__item.is-active > .sy-mnav__link--solo::after,
    .sy-mnav__item.is-parent-active > .sy-mnav__row > .sy-mnav__link::after {
        opacity: 1;
        border-color: var(--mnav-red);
    }

    .sy-mnav__expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        padding: 0;
        margin: 0;
        border: none;
        border-left: 1px solid var(--mnav-line);
        border-radius: 0;
        background: transparent;
        color: var(--mnav-muted);
        font-size: 0.875rem;
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__expand:hover,
    .sy-mnav__expand:active {
        background: var(--mnav-surface);
        color: var(--mnav-navy);
    }

    .sy-mnav__item.is-expanded .sy-mnav__expand {
        color: var(--mnav-red);
    }

    .sy-mnav__expand i {
        display: block;
        transition: transform 0.3s var(--mnav-ease);
    }

    .sy-mnav__item.is-expanded .sy-mnav__expand i {
        transform: rotate(180deg);
    }

    /* Submenu */
    .sy-mnav__sub {
        list-style: none;
        margin: 0;
        padding: 0 20px 0.5rem 20px;
        background: var(--mnav-surface);
        border-top: 1px solid var(--mnav-line);
    }

    .sy-mnav__sub-item {
        margin: 0;
        border-bottom: 1px solid rgba(17, 25, 78, 0.05);
    }

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

    .sy-mnav__sub-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.625rem 0 0.625rem 0.75rem;
        color: var(--mnav-muted) !important;
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none !important;
        border-left: 2px solid transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__sub-link:hover,
    .sy-mnav__sub-link:active,
    .sy-mnav__sub-item.is-active .sy-mnav__sub-link {
        color: var(--mnav-navy) !important;
        border-left-color: var(--mnav-red);
    }

    /* Footer */
    .sy-mnav__panel-foot {
        flex-shrink: 0;
        padding: 1rem 20px max(1.25rem, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--mnav-line);
        background: #fff;
    }

    .sy-mnav__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 50px;
        padding: 0.875rem 1.25rem;
        border: none;
        border-radius: 12px;
        background: var(--mnav-red);
        color: #fff !important;
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none !important;
        letter-spacing: -0.01em;
        transition: background 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__cta:hover,
    .sy-mnav__cta:active {
        background: #c90009;
        color: #fff !important;
        transform: scale(0.99);
    }

    .sy-mnav__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .sy-mnav__phone {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-height: 44px;
        padding: 0.5rem 0;
        color: var(--mnav-navy) !important;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .sy-mnav__phone i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--mnav-surface);
        color: var(--mnav-red);
        font-size: 0.875rem;
    }

    .sy-mnav__lang {
        display: inline-flex;
        gap: 0.25rem;
        padding: 3px;
        border-radius: 999px;
        background: var(--mnav-surface);
    }

    .sy-mnav__lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 32px;
        padding: 0.25rem 0.625rem;
        border-radius: 999px;
        border: none;
        background: transparent;
        color: var(--mnav-muted) !important;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-decoration: none !important;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .sy-mnav__lang-btn.is-active {
        background: #fff;
        color: var(--mnav-navy) !important;
        box-shadow: 0 1px 4px rgba(17, 25, 78, 0.1);
        pointer-events: none;
    }

    .sy-mnav__lang-btn:not(.is-active):hover {
        color: var(--mnav-navy) !important;
    }

    body.page-home #pxl-header-mobile.sy-mnav,
    body.page-inner #pxl-header-mobile.sy-mnav {
        background: #fff !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 24px rgba(17, 25, 78, 0.04) !important;
    }

    body.sy-mnav-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

@media (min-width: 1201px) {
    #pxl-header-mobile.sy-mnav {
        display: none !important;
    }
}