/*
=============================================================
FİYATOMATİK
UI-A6.24-F22 FINAL NAVIGATION

HEADER / FOOTER ONLY

FINAL ORDER:
LOGO
10 COLORED ENGINE BUTTONS
ARAMA MERKEZİ
ÇALIŞMALARIM
HESABIM

ENGINE CARDS ARE HARD LOCKED.
=============================================================
*/


/* =========================================================
   LEGACY COLLISION ISOLATION
   ========================================================= */

html body .ft-f22-header
> .ft-f22-header-legacy {
    display: none !important;
}

html body .ft-f22-header
> .ft-f22-header-host {
    display: block !important;
}


html body .ft-f22-footer
> .ft-f22-footer-legacy {
    display: none !important;
}

html body .ft-f22-footer
> .ft-f22-footer-host {
    display: block !important;
}


/* =========================================================
   HEADER + FOOTER SHARED SURFACE
   ========================================================= */

html body .ft-f22-header,
html body .ft-f22-footer {
    width: 100% !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99) 0%,
            rgba(248,251,255,.985) 100%
        ) !important;

    backdrop-filter:
        blur(18px)
        saturate(140%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%) !important;
}


html body .ft-f22-header {
    position: relative !important;

    z-index: 100 !important;

    border-bottom:
        1px solid rgba(23,45,84,.075) !important;

    box-shadow:
        0 9px 30px rgba(38,73,145,.055) !important;
}


html body .ft-f22-footer {
    margin-top: 34px !important;

    border-top:
        1px solid rgba(23,45,84,.075) !important;

    box-shadow:
        0 -8px 28px rgba(38,73,145,.045) !important;
}


/* =========================================================
   SHARED NAVIGATION SHELL
   ========================================================= */

html body .ft-f22-shell {
    width:
        min(1580px, calc(100% - 42px)) !important;

    min-height: 100px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        190px
        minmax(0,1fr)
        auto !important;

    align-items: center !important;

    gap: 20px !important;
}


/* =========================================================
   LOGO
   ========================================================= */

html body .ft-f22-brand {
    width: 190px !important;

    height: 70px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    text-decoration: none !important;
}


html body .ft-f22-brand-image {
    display: block !important;

    width: 184px !important;

    max-width: 184px !important;

    height: auto !important;

    object-fit: contain !important;

    transition:
        transform .18s ease,
        filter .18s ease !important;
}


html body .ft-f22-brand:hover
.ft-f22-brand-image {
    transform:
        translateY(-1px)
        scale(1.025) !important;

    filter:
        drop-shadow(
            0 7px 10px rgba(59,80,180,.10)
        ) !important;
}


/* =========================================================
   ENGINE NAV
   ========================================================= */

html body .ft-f22-engine-nav {
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(10, minmax(68px,1fr)) !important;

    gap: 8px !important;

    align-items: stretch !important;
}


/* =========================================================
   ENGINE BUTTON — COMMON
   ========================================================= */

html body .ft-f22-engine {
    position: relative !important;

    min-width: 0 !important;

    height: 66px !important;

    padding:
        5px 5px 6px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 2px !important;

    overflow: hidden !important;

    border-radius: 15px !important;

    text-decoration: none !important;

    border:
        1px solid var(--f22-border) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.93),
            var(--f22-bg)
        ) !important;

    box-shadow:
        0 6px 14px var(--f22-shadow),
        inset 0 1px 1px rgba(255,255,255,.92) !important;

    backdrop-filter:
        blur(12px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(135%) !important;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        border-color .17s ease,
        filter .17s ease !important;
}


html body .ft-f22-engine::before {
    content: "" !important;

    position: absolute !important;

    inset:
        0 !important;

    pointer-events:
        none !important;

    background:
        linear-gradient(
            130deg,
            rgba(255,255,255,.55),
            transparent 43%
        ) !important;

    opacity:
        .78 !important;
}


html body .ft-f22-engine:hover {
    transform:
        translateY(-4px)
        scale(1.025) !important;

    filter:
        saturate(1.08)
        brightness(1.025) !important;

    border-color:
        var(--f22-border-hover) !important;

    box-shadow:
        0 12px 23px var(--f22-shadow-hover),
        0 4px 9px rgba(15,23,42,.06),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


html body .ft-f22-engine:active {
    transform:
        translateY(-1px)
        scale(.985) !important;
}


/* =========================================================
   SMALL CANONICAL ENGINE IMAGE
   ========================================================= */

html body .ft-f22-engine-visual {
    position: relative !important;

    z-index: 1 !important;

    width: 34px !important;

    height: 34px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    background:
        rgba(255,255,255,.56) !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.85) !important;
}


html body .ft-f22-engine-image {
    display: block !important;

    width: 32px !important;

    height: 32px !important;

    object-fit: cover !important;

    border-radius: 9px !important;
}


/* =========================================================
   ENGINE LABEL
   ========================================================= */

html body .ft-f22-engine-label {
    position: relative !important;

    z-index: 1 !important;

    display: block !important;

    max-width: 100% !important;

    color:
        var(--f22-text) !important;

    font-size: 10.5px !important;

    font-weight: 900 !important;

    line-height: 1.05 !important;

    letter-spacing: -.18px !important;

    text-align: center !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
}


/* =========================================================
   ENGINE COLORS
   ========================================================= */

html body .ft-f22-tone-cyan {
    --f22-bg: rgba(207,244,255,.88);
    --f22-border: rgba(29,178,220,.24);
    --f22-border-hover: rgba(18,170,220,.48);
    --f22-shadow: rgba(15,172,211,.09);
    --f22-shadow-hover: rgba(15,172,211,.20);
    --f22-text: #087f9f;
}


html body .ft-f22-tone-orange {
    --f22-bg: rgba(255,235,207,.90);
    --f22-border: rgba(232,145,38,.25);
    --f22-border-hover: rgba(225,129,17,.50);
    --f22-shadow: rgba(225,129,17,.09);
    --f22-shadow-hover: rgba(225,129,17,.21);
    --f22-text: #a55208;
}


html body .ft-f22-tone-violet {
    --f22-bg: rgba(237,225,255,.91);
    --f22-border: rgba(132,76,232,.24);
    --f22-border-hover: rgba(121,62,225,.49);
    --f22-shadow: rgba(121,62,225,.09);
    --f22-shadow-hover: rgba(121,62,225,.20);
    --f22-text: #6530c8;
}


html body .ft-f22-tone-green {
    --f22-bg: rgba(213,249,238,.91);
    --f22-border: rgba(20,170,130,.24);
    --f22-border-hover: rgba(13,156,116,.48);
    --f22-shadow: rgba(13,156,116,.09);
    --f22-shadow-hover: rgba(13,156,116,.20);
    --f22-text: #087b60;
}


html body .ft-f22-tone-rose {
    --f22-bg: rgba(255,222,230,.91);
    --f22-border: rgba(235,69,106,.23);
    --f22-border-hover: rgba(226,48,91,.48);
    --f22-shadow: rgba(226,48,91,.09);
    --f22-shadow-hover: rgba(226,48,91,.20);
    --f22-text: #c8244e;
}


html body .ft-f22-tone-gold {
    --f22-bg: rgba(255,240,197,.93);
    --f22-border: rgba(223,165,20,.25);
    --f22-border-hover: rgba(213,148,4,.50);
    --f22-shadow: rgba(213,148,4,.09);
    --f22-shadow-hover: rgba(213,148,4,.20);
    --f22-text: #a66c00;
}


html body .ft-f22-tone-blue {
    --f22-bg: rgba(216,237,255,.92);
    --f22-border: rgba(48,133,229,.23);
    --f22-border-hover: rgba(35,116,215,.48);
    --f22-shadow: rgba(35,116,215,.09);
    --f22-shadow-hover: rgba(35,116,215,.20);
    --f22-text: #1463bd;
}


html body .ft-f22-tone-purple {
    --f22-bg: rgba(235,221,255,.92);
    --f22-border: rgba(130,64,221,.23);
    --f22-border-hover: rgba(113,45,210,.48);
    --f22-shadow: rgba(113,45,210,.09);
    --f22-shadow-hover: rgba(113,45,210,.20);
    --f22-text: #6724bc;
}


html body .ft-f22-tone-slate {
    --f22-bg: rgba(228,236,246,.94);
    --f22-border: rgba(89,111,143,.22);
    --f22-border-hover: rgba(75,96,128,.44);
    --f22-shadow: rgba(75,96,128,.08);
    --f22-shadow-hover: rgba(75,96,128,.18);
    --f22-text: #405775;
}


html body .ft-f22-tone-red {
    --f22-bg: rgba(255,220,220,.92);
    --f22-border: rgba(220,67,67,.23);
    --f22-border-hover: rgba(204,46,46,.48);
    --f22-shadow: rgba(204,46,46,.09);
    --f22-shadow-hover: rgba(204,46,46,.20);
    --f22-text: #a92929;
}


/* =========================================================
   RIGHT UTILITIES
   ========================================================= */

html body .ft-f22-utilities {
    display: grid !important;

    grid-template-columns:
        repeat(3, auto) !important;

    gap: 8px !important;

    align-items: center !important;
}


/* =========================================================
   ALL UTILITY BUTTONS
   ========================================================= */

html body .ft-f22-utility {
    height: 46px !important;

    padding:
        0 13px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    border-radius: 14px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    font-size: 11.5px !important;

    font-weight: 850 !important;

    line-height: 1 !important;

    border:
        1px solid rgba(83,106,170,.17) !important;

    background:
        rgba(255,255,255,.78) !important;

    box-shadow:
        0 6px 16px rgba(40,65,130,.075),
        inset 0 1px 1px rgba(255,255,255,.95) !important;

    backdrop-filter:
        blur(12px)
        saturate(140%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(140%) !important;

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        filter .17s ease !important;
}


html body .ft-f22-utility:hover {
    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.03)
        saturate(1.06) !important;
}


/* =========================================================
   ARAMA MERKEZİ — SMALLER
   ========================================================= */

html body .ft-f22-search {
    padding:
        0 12px !important;

    color:
        #205bd5 !important;

    background:
        linear-gradient(
            135deg,
            rgba(244,250,255,.96),
            rgba(235,239,255,.91)
        ) !important;

    border:
        1px solid rgba(67,105,230,.24) !important;

    box-shadow:
        0 6px 16px rgba(52,89,225,.10),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


html body .ft-f22-search:hover {
    box-shadow:
        0 11px 22px rgba(52,89,225,.17),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


/* =========================================================
   ÇALIŞMALARIM
   ========================================================= */

html body .ft-f22-works {
    color:
        #087f59 !important;

    background:
        linear-gradient(
            135deg,
            rgba(231,255,245,.95),
            rgba(210,248,231,.90)
        ) !important;

    border:
        1px solid rgba(16,164,108,.23) !important;

    box-shadow:
        0 6px 16px rgba(16,164,108,.10),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


html body .ft-f22-works:hover {
    box-shadow:
        0 11px 22px rgba(16,164,108,.18),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


/* =========================================================
   HESABIM
   ========================================================= */

html body .ft-f22-account {
    color:
        #6430c8 !important;

    background:
        linear-gradient(
            135deg,
            rgba(245,237,255,.96),
            rgba(231,216,255,.91)
        ) !important;

    border:
        1px solid rgba(117,64,219,.23) !important;

    box-shadow:
        0 6px 16px rgba(117,64,219,.10),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


html body .ft-f22-account:hover {
    box-shadow:
        0 11px 22px rgba(117,64,219,.18),
        inset 0 1px 1px rgba(255,255,255,1) !important;
}


/* =========================================================
   UTILITY ICON
   ========================================================= */

html body .ft-f22-utility-icon {
    width: 23px !important;

    height: 23px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 7px !important;

    font-size: 14px !important;

    font-weight: 900 !important;
}


html body .ft-f22-search-icon {
    font-size:
        21px !important;
}


/* =========================================================
   FOOTER = SAME NAVIGATION
   ========================================================= */

html body .ft-f22-footer
.ft-f22-shell {
    min-height:
        94px !important;
}


/*
 * Footer stays deliberately simple.
 * Same buttons, same order, same colors.
 */


/* =========================================================
   1600 / 1500 DESKTOP FIT
   ========================================================= */

@media (max-width: 1550px) {

    html body .ft-f22-shell {
        width:
            calc(100% - 28px) !important;

        grid-template-columns:
            164px
            minmax(0,1fr)
            auto !important;

        gap:
            12px !important;
    }

    html body .ft-f22-brand {
        width:
            164px !important;
    }

    html body .ft-f22-brand-image {
        width:
            160px !important;
    }

    html body .ft-f22-engine-nav {
        grid-template-columns:
            repeat(10, minmax(62px,1fr)) !important;

        gap:
            6px !important;
    }

    html body .ft-f22-engine {
        height:
            62px !important;
    }

    html body .ft-f22-engine-visual {
        width:
            31px !important;

        height:
            31px !important;
    }

    html body .ft-f22-engine-image {
        width:
            29px !important;

        height:
            29px !important;
    }

    html body .ft-f22-engine-label {
        font-size:
            9.5px !important;
    }

    html body .ft-f22-utility {
        height:
            44px !important;

        padding:
            0 10px !important;

        font-size:
            10.5px !important;
    }
}


/* =========================================================
   LOWER DESKTOP SAFETY
   ========================================================= */

@media (max-width: 1280px) {

    html body .ft-f22-shell {
        grid-template-columns:
            160px
            minmax(0,1fr) !important;

        padding:
            11px 0 !important;

        row-gap:
            8px !important;
    }

    html body .ft-f22-utilities {
        grid-column:
            2 !important;

        grid-row:
            1 !important;

        justify-self:
            end !important;
    }

    html body .ft-f22-engine-nav {
        grid-column:
            1 / -1 !important;

        grid-row:
            2 !important;
    }
}


/* =========================================================
   TABLET / MOBILE SAFETY
   ========================================================= */

@media (max-width: 820px) {

    html body .ft-f22-shell {
        width:
            calc(100% - 20px) !important;

        grid-template-columns:
            1fr !important;
    }

    html body .ft-f22-brand {
        width:
            170px !important;
    }

    html body .ft-f22-brand-image {
        width:
            166px !important;
    }

    html body .ft-f22-utilities {
        grid-column:
            1 !important;

        grid-row:
            2 !important;

        justify-self:
            stretch !important;

        grid-template-columns:
            repeat(3,1fr) !important;
    }

    html body .ft-f22-engine-nav {
        grid-row:
            3 !important;

        display:
            flex !important;

        overflow-x:
            auto !important;

        padding:
            4px 0 8px !important;

        scrollbar-width:
            none !important;
    }

    html body .ft-f22-engine-nav::-webkit-scrollbar {
        display:
            none !important;
    }

    html body .ft-f22-engine {
        min-width:
            72px !important;
    }
}