:root {
        --mx-navy: #0f2a4a;
        --mx-navy-2: #163a63;
        --mx-brand: #0b6bcb;
        --mx-brand-d: #095aaa;
        --mx-accent: #ff9f1c;
        --mx-hot: #ff6b00;
        --mx-soft: #f3f7fb;
        --mx-line: #e3ebf3;
        --mx-text: #1f2d3d;
        --mx-muted: #6b7a8c;
        --mx-h: 100px;
        --mx-pop: cubic-bezier(.175, .885, .32, 1.275);
        --mx-smooth: cubic-bezier(.22, .8, .3, 1);
    }

    .mx-spacer, .mx-header, .mx-header *, .mx-scrim, .mx-drawer, .mx-drawer *, .mx-find, .mx-find *, .mx-fab {
        box-sizing: border-box;
    }

    /* Yalnızca mobilde görünür (masaüstünde tamamen gizli) */
    @media (min-width: 769px) {
        .mx-spacer, .mx-header, .mx-scrim, .mx-drawer, .mx-find, .mx-fab {
            display: none !important;
        }
    }

    /* ---------- Sabit header için yer tutucu ---------- */
    .mx-spacer {
        height: calc(var(--mx-h) + env(safe-area-inset-top, 0px));
    }
    .mx-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        overflow: hidden;
        padding-top: env(safe-area-inset-top, 0px);
        background: linear-gradient(135deg, var(--mx-navy) 0%, var(--mx-brand) 60%, #2f9bff 100%);
        box-shadow: inset 0 -3px 0 var(--mx-accent);
        transition: box-shadow .3s ease;
    }

        .mx-header.is-scrolled {
            box-shadow: inset 0 -3px 0 var(--mx-accent), 0 6px 20px rgba(15, 42, 74, .35);
        }

    .mx-header-inner {
        height: var(--mx-h);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
    }

    .mx-side {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mx-side-end {
        justify-content: flex-end;
    }

    .mx-brand {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Logo: kutu yok; arkasında yuvarlak beyaz ışık + kenarlarında beyaz hale */
        .mx-brand picture {
            position: relative;
            display: flex;
        }

        .mx-brand img {
            position: relative;
            z-index: 1;
            display: block;
            height: 110px;
            width: auto;
            max-width: min(190px, calc(100vw - 226px));
            object-fit: contain;
            filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 5px rgba(255, 255, 255, .9));
        }

    /* Yuvarlak köşeli ikon butonları */
    .mx-icon-btn {
        position: relative;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 14px;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .25s, transform .3s var(--mx-pop), color .25s;
    }

        .mx-icon-btn svg {
            width: 22px;
            height: 22px;
        }

        .mx-icon-btn:active {
            transform: scale(.88);
            background: rgba(255, 255, 255, .32);
        }

        /* Sepet butonu (marka rengi) + adet rozeti */
        .mx-icon-btn.mx-cart {
            background: linear-gradient(135deg, var(--mx-hot), var(--mx-accent));
            color: #fff;
            border-color: rgba(255, 255, 255, .55);
            box-shadow: 0 4px 12px rgba(255, 107, 0, .4);
        }

            .mx-icon-btn.mx-cart:active {
                background: var(--mx-hot);
            }

    .mx-cart-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--mx-navy);
        color: #fff;
        font-size: 10.5px;
        font-weight: 800;
        line-height: 1;
        border: 2px solid #fff;
        border-radius: 12px;
        animation: mxBadgePop .55s var(--mx-pop);
    }

    /* Hamburger -> X animasyonu */
    .mx-burger {
        flex-direction: column;
        gap: 4px;
    }

    .mx-burger-line {
        display: block;
        width: 20px;
        height: 2.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .4s var(--mx-pop), opacity .2s ease, width .3s ease;
    }

        .mx-burger-line:nth-child(2) {
            width: 13px;
            align-self: flex-start;
            margin-left: 11px;
        }

    .mx-burger.is-active {
        background: #fff;
        color: var(--mx-navy);
    }

        .mx-burger.is-active .mx-burger-line:nth-child(1) {
            transform: translateY(6.5px) rotate(45deg);
        }

        .mx-burger.is-active .mx-burger-line:nth-child(2) {
            opacity: 0;
        }

        .mx-burger.is-active .mx-burger-line:nth-child(3) {
            transform: translateY(-6.5px) rotate(-45deg);
        }

    /* =====================================================
               2) YAN MENÜ (DRAWER)
               ===================================================== */
    .mx-scrim {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(15, 42, 74, .55);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility 0s linear .35s;
    }

        .mx-scrim.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity .35s ease, visibility 0s;
        }

    .mx-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1300;
        width: min(88vw, 380px);
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 0 26px 26px 0;
        box-shadow: 12px 0 40px rgba(15, 42, 74, .3);
        transform: translateX(-104%);
        visibility: hidden;
        transition: transform .45s var(--mx-smooth), visibility 0s linear .45s;
    }

        .mx-drawer.is-open {
            transform: none;
            visibility: visible;
            transition: transform .45s var(--mx-smooth), visibility 0s;
        }

    .mx-drawer-head {
        flex: none;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        gap: 12px;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
        background: linear-gradient(135deg, var(--mx-navy), var(--mx-brand));
        border-radius: 0 26px 0 0;
    }

    .mx-drawer-logo {
        display: flex;
        border-radius: 18px;
    }

        .mx-drawer-logo img {
            display: block;
            height: 105px;
            width: auto;
            max-width: 170px;
            object-fit: contain;
            filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 3px rgba(255, 255, 255, .9));
        }

    .mx-drawer-close {
        position: absolute;
        top: calc(16px + env(safe-area-inset-top, 0px) + 13px);
        right: 14px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #fff;
        background: rgba(255, 255, 255, .18);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .35s var(--mx-pop), background .25s;
    }

        .mx-drawer-close svg {
            width: 18px;
            height: 18px;
        }

        .mx-drawer-close:active {
            transform: rotate(90deg) scale(.9);
            background: rgba(255, 255, 255, .3);
        }

    /* ---------- Paneller (ana liste + alt kategori sayfaları) ---------- */
    .mx-drawer-body {
        position: relative;
        flex: 1;
        overflow: hidden;
    }

    .mx-pane {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transition: transform .45s var(--mx-smooth), opacity .35s ease, visibility 0s;
    }

    .mx-pane-main {
        padding: 16px 14px 24px;
    }

        .mx-pane-main.is-away {
            transform: translateX(-28%);
            opacity: 0;
            pointer-events: none;
        }

    .mx-pane-sub {
        padding: 0;
        background: #fff;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform .45s var(--mx-smooth), opacity .35s ease, visibility 0s linear .45s;
    }

        .mx-pane-sub.is-open {
            transform: none;
            opacity: 1;
            visibility: visible;
            transition: transform .45s var(--mx-smooth), opacity .35s ease, visibility 0s;
        }

    /* ---------- Ana liste ---------- */
    .mx-nav-title {
        margin: 2px 6px 10px;
        color: var(--mx-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mx-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 8px;
        padding: 9px 12px 9px 9px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        text-decoration: none;
        color: var(--mx-text);
        background: var(--mx-soft);
        border: 1px solid var(--mx-line);
        border-radius: 18px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .25s, border-color .25s, transform .3s var(--mx-pop);
    }

        .mx-row:active {
            background: #e6f0fb;
            border-color: var(--mx-brand);
            transform: scale(.98);
        }

    .mx-drawer.is-open .mx-row {
        animation: mxSlideIn .5s var(--mx-smooth) both;
        animation-delay: calc(var(--i) * 45ms + 150ms);
    }

    .mx-row-ico,
    .mx-row-thumb {
        flex: none;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .mx-row-ico {
        color: #fff;
        background: linear-gradient(135deg, var(--mx-brand), var(--mx-navy-2));
    }

        .mx-row-ico svg {
            width: 22px;
            height: 22px;
        }

    .mx-row-thumb {
        background: #fff;
        border: 1px solid var(--mx-line);
        overflow: hidden;
    }

        .mx-row-thumb img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

    .mx-row-label {
        flex: 1;
        min-width: 0;
        line-height: 1.25;
    }

    .mx-row-chev {
        flex: none;
        display: flex;
        color: var(--mx-muted);
    }

        .mx-row-chev svg {
            width: 18px;
            height: 18px;
        }

    /* WhatsApp butonu (kategorilerin altında, tam genişlik) */
    .mx-wa {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 4px 0 0;
        padding: 10px 14px 10px 10px;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, #25d366, #128c7e);
        border-radius: 18px;
        box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop);
    }

        .mx-wa:active {
            transform: scale(.97);
        }

    .mx-drawer.is-open .mx-wa {
        animation: mxSlideIn .5s var(--mx-smooth) both;
        animation-delay: calc(var(--i) * 45ms + 150ms);
    }

    .mx-wa-ico {
        flex: none;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .22);
        border-radius: 50%;
    }

        .mx-wa-ico svg {
            width: 26px;
            height: 26px;
        }

    .mx-wa-txt {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.25;
    }

        .mx-wa-txt strong {
            font-size: 15px;
            font-weight: 800;
        }

        .mx-wa-txt small {
            font-size: 12px;
            font-weight: 600;
            opacity: .95;
        }

    .mx-wa .mx-row-chev {
        color: #fff;
    }

    /* Hızlı erişim linkleri */
    .mx-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .mx-drawer.is-open .mx-links {
        animation: mxSlideIn .5s var(--mx-smooth) both;
        animation-delay: .55s;
    }

    .mx-link {
        display: block;
        padding: 12px 8px;
        color: var(--mx-navy);
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        background: #fff;
        border: 1px solid var(--mx-line);
        border-radius: 14px;
        -webkit-tap-highlight-color: transparent;
        transition: background .25s, color .25s, border-color .25s;
    }

        .mx-link:active {
            background: var(--mx-soft);
            color: var(--mx-brand);
            border-color: var(--mx-brand);
        }

        .mx-link:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

    /* ---------- Alt kategori sayfası ---------- */
    .mx-sub-bar {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--mx-line);
    }

    .mx-back {
        flex: none;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 8px 14px 8px 8px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        color: var(--mx-navy);
        background: var(--mx-soft);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop), background .25s;
    }

        .mx-back svg {
            width: 18px;
            height: 18px;
        }

        .mx-back:active {
            transform: scale(.92);
            background: var(--mx-line);
        }

    .mx-sub-title {
        margin: 0;
        min-width: 0;
        overflow: hidden;
        color: var(--mx-navy);
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mx-sub-body {
        padding: 14px 14px 28px;
    }

    .mx-all-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 14px 16px;
        color: #fff;
        font-size: 13.5px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        background: linear-gradient(90deg, var(--mx-hot), var(--mx-accent));
        border-radius: 16px;
        box-shadow: 0 6px 16px rgba(255, 107, 0, .3);
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop);
    }

        .mx-all-btn svg {
            flex: none;
            width: 18px;
            height: 18px;
        }

        .mx-all-btn:active {
            transform: scale(.97);
        }

    .mx-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mx-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 8px 10px;
        color: var(--mx-text);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
        background: #fff;
        border: 1px solid var(--mx-line);
        border-radius: 18px;
        box-shadow: 0 2px 8px rgba(15, 42, 74, .05);
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop), border-color .25s, box-shadow .25s;
    }

        .mx-card img {
            display: block;
            width: 90px;
            height: 90px;
            object-fit: contain;
        }

        .mx-card span {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mx-card:active {
            transform: scale(.95);
            border-color: var(--mx-brand);
            box-shadow: 0 6px 16px rgba(11, 107, 203, .18);
        }

    .mx-pane-sub.is-open .mx-card {
        animation: mxPopIn .45s var(--mx-pop) both;
        animation-delay: calc(var(--i) * 40ms + 150ms);
    }

    /* ---------- Drawer alt kısmı (sosyal medya) ---------- */
    .mx-drawer-foot {
        flex: none;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--mx-soft);
        border-top: 1px solid var(--mx-line);
    }

    .mx-social {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .mx-social li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .mx-social a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mx-social img, .mx-social svg {
            max-width: 28px;
            max-height: 28px;
        }

    /* =====================================================
               3) ARAMA PENCERESİ (yukarıdan açılan panel)
               ===================================================== */
    .mx-find {
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(15, 42, 74, .5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

        .mx-find.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity .3s ease, visibility 0s;
        }

    .mx-find-sheet {
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 20px;
        background: #fff;
        border-radius: 0 0 26px 26px;
        box-shadow: 0 20px 50px rgba(15, 42, 74, .35);
        transform: translateY(-100%);
        transition: transform .45s var(--mx-smooth);
    }

    .mx-find.is-open .mx-find-sheet {
        transform: none;
    }

    .mx-find-bar {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .mx-find-field {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 5px 4px 14px;
        background: var(--mx-soft);
        border: 2px solid var(--mx-line);
        border-radius: 50px;
        transition: border-color .3s, box-shadow .3s, background .3s;
    }

        .mx-find-field:focus-within {
            background: #fff;
            border-color: var(--mx-brand);
            box-shadow: 0 4px 14px rgba(11, 107, 203, .18);
        }

        .mx-find-field > svg {
            flex: none;
            width: 20px;
            height: 20px;
            color: var(--mx-muted);
        }

    .mx-find-input {
        flex: 1;
        min-width: 0;
        padding: 11px 4px;
        font-family: inherit;
        font-size: 16px; /* iOS'ta yakınlaşmayı engeller */
        color: var(--mx-text);
        background: transparent;
        border: none;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .mx-find-go {
        flex: none;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #fff;
        background: var(--mx-brand);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop), background .25s;
    }

        .mx-find-go svg {
            width: 18px;
            height: 18px;
        }

        .mx-find-go:active {
            transform: scale(.88);
            background: var(--mx-brand-d);
        }

    .mx-find-close {
        flex: none;
        padding: 8px 2px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        color: var(--mx-muted);
        background: none;
        border: none;
        cursor: pointer;
    }

    .mx-find-label {
        flex: none;
        margin: 0 0 12px;
        color: var(--mx-muted);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .mx-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mx-chip {
        padding: 9px 15px;
        font-size: 13px;
        text-decoration: none;
        border-radius: 50px;
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop), background .25s, color .25s;
    }

        .mx-chip:active {
            transform: scale(.93);
        }

    .mx-chip-main {
        color: #fff;
        font-weight: 700;
        background: var(--mx-navy);
    }

    .mx-chip-sub {
        color: #3d4b5c;
        font-weight: 600;
        background: var(--mx-soft);
        border: 1px solid var(--mx-line);
    }

        .mx-chip-sub:active {
            background: #e6f0fb;
            color: var(--mx-brand);
        }

    .mx-find.is-open .mx-chip {
        animation: mxPopIn .4s var(--mx-pop) both;
        animation-delay: min(calc(var(--i) * 18ms + 200ms), .7s);
    }

    /* =====================================================
               4) TELEFON BUTONU (09:00 - 20:59 arası görünür)
               ===================================================== */
    .mx-fab {
        position: fixed;
        top: calc(var(--mx-h) + 14px + env(safe-area-inset-top, 0px));
        right: 12px;
        z-index: 1000;
        width: 41px;
        height: 41px;
        display: none;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, var(--mx-brand), var(--mx-brand-d));
        border-radius: 50%;
        box-shadow: 0 6px 18px rgba(11, 107, 203, .4);
        animation: mxPulse 2.2s infinite;
        -webkit-tap-highlight-color: transparent;
        transition: transform .3s var(--mx-pop);
    }

        .mx-fab.is-on {
            display: flex;
        }

        .mx-fab svg {
            width: 22px;
            height: 22px;
        }

        .mx-fab:active {
            transform: scale(.9);
        }

    /* =====================================================
               ANİMASYONLAR
               ===================================================== */
    @keyframes mxSlideIn {
        from {
            opacity: 0;
            transform: translateX(-18px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes mxPopIn {
        from {
            opacity: 0;
            transform: translateY(14px) scale(.88);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes mxBadgePop {
        0% {
            transform: scale(0);
        }

        70% {
            transform: scale(1.25);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes mxPulse {
        0% {
            box-shadow: 0 6px 18px rgba(11, 107, 203, .4), 0 0 0 0 rgba(11, 107, 203, .35);
        }

        70% {
            box-shadow: 0 6px 18px rgba(11, 107, 203, .4), 0 0 0 16px rgba(11, 107, 203, 0);
        }

        100% {
            box-shadow: 0 6px 18px rgba(11, 107, 203, .4), 0 0 0 0 rgba(11, 107, 203, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mx-header *, .mx-drawer, .mx-drawer *, .mx-find, .mx-find *, .mx-fab {
            animation: none !important;
            transition-duration: .01s !important;
        }
    }