/*
 * FİYATOMATİK
 * UI-A6.4-E2
 *
 * FINAL DESKTOP VISUAL REFINEMENT
 *
 * IMPORTANT:
 * - presentation only
 * - no engine behavior changes
 * - no API changes
 * - no product-context changes
 * - no fake metrics
 * - no fake news
 */

:root {
    --e2-page: #f6f8fd;
    --e2-ink: #11182c;
    --e2-muted: #687286;
    --e2-line: rgba(29, 44, 78, .10);
    --e2-shadow: 0 9px 28px rgba(31, 47, 85, .055);
}


/* =========================================================
   GLOBAL DESKTOP POLISH
   ========================================================= */

body {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(76, 99, 255, .055),
            transparent 30rem
        ),
        radial-gradient(
            circle at 94% 12%,
            rgba(32, 188, 205, .045),
            transparent 28rem
        ),
        var(--e2-page) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.ft-header {
    box-shadow:
        0 1px 0 rgba(20, 31, 58, .055),
        0 7px 24px rgba(29, 43, 78, .035) !important;
}

.ft-brand-mark {
    border-radius: 16px !important;
}

.ft-product-link {
    box-shadow:
        0 6px 16px rgba(65, 76, 235, .17) !important;
}


/* =========================================================
   HERO
   Keep current concept, improve proportion.
   ========================================================= */

.ft-e1-hero {
    width: min(1540px, calc(100% - 52px)) !important;

    min-height: 214px !important;

    margin-top: 20px !important;
    margin-bottom: 24px !important;

    border-radius: 22px !important;

    box-shadow:
        0 15px 38px rgba(20, 43, 103, .14) !important;
}

.ft-e1-hero-inner {
    min-height: 214px !important;
}

.ft-e1-hero-copy {
    padding:
        31px
        44px
        43px !important;
}

.ft-e1-hero-copy h1 {
    max-width: 700px !important;

    font-size:
        clamp(38px, 3.05vw, 54px) !important;

    line-height: .99 !important;
}

.ft-e1-hero-copy p {
    max-width: 690px !important;

    margin-top: 14px !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
}

.ft-e1-hero-panel {
    margin: 17px !important;

    border-radius: 17px !important;
}

.ft-e1-system-row {
    padding: 13px 18px !important;
}

.ft-e1-system-icon {
    width: 34px !important;
    height: 34px !important;

    border-radius: 11px !important;
}


/* =========================================================
   ENGINE SECTION
   ========================================================= */

.ft-engine-section {
    padding:
        12px
        0
        38px !important;
}

.ft-engine-section > .ft-shell {
    width: min(1540px, calc(100% - 52px)) !important;
    max-width: none !important;
}

.ft-section-heading {
    margin-bottom: 16px !important;
}

.ft-section-heading h2 {
    font-size: 24px !important;
    font-weight: 800 !important;

    letter-spacing: -.035em !important;

    color: var(--e2-ink) !important;
}


/* =========================================================
   DESKTOP 2 x 5 GRID
   ========================================================= */

@media (min-width: 1051px) {

    .ft-engine-section .ft-engine-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            14px
            16px !important;

        align-items: stretch !important;
    }


    /* =====================================================
       CARD
       ===================================================== */

    .ft-engine-section
    .ft-engine-grid
    > .ft-engine-card {

        width: 100% !important;
        min-width: 0 !important;

        min-height: 190px !important;
        height: auto !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 43%)
            minmax(0, 57%) !important;

        overflow: hidden !important;

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

        border-radius: 18px !important;

        box-shadow:
            var(--e2-shadow) !important;

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

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

    .ft-engine-section
    .ft-engine-card:hover {

        transform:
            translateY(-2px) !important;

        box-shadow:
            0 15px 34px rgba(27, 42, 82, .095) !important;
    }


    /* =====================================================
       LEFT SIDE
       ===================================================== */

    .ft-engine-card
    .ft-e1-engine-left {

        padding:
            18px
            19px
            16px !important;

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

        grid-template-rows:
            auto
            auto
            minmax(43px, 1fr)
            auto !important;

        column-gap:
            13px !important;

        border-right:
            1px solid rgba(27, 41, 76, .075) !important;
    }

    .ft-e1-engine-left
    .ft-engine-head {

        width: 48px !important;
        min-width: 48px !important;
    }

    .ft-e1-engine-left
    .ft-engine-icon {

        width: 46px !important;
        height: 46px !important;

        border-radius:
            14px !important;
    }

    .ft-e1-engine-left
    .ft-engine-icon svg {

        width: 22px !important;
        height: 22px !important;
    }

    .ft-e1-engine-left
    > strong {

        margin-top:
            2px !important;

        font-size:
            17px !important;

        line-height:
            1.1 !important;

        letter-spacing:
            -.015em !important;
    }

    .ft-e1-engine-left
    > small {

        margin-top:
            4px !important;

        font-size:
            10.5px !important;

        line-height:
            1.28 !important;
    }

    .ft-e1-engine-left
    > p {

        margin-top:
            12px !important;

        font-size:
            11.5px !important;

        line-height:
            1.48 !important;

        color:
            var(--e2-muted) !important;
    }

    .ft-e1-engine-left
    .ft-engine-foot {

        margin-top:
            11px !important;

        padding-top:
            10px !important;
    }

    .ft-e1-engine-left
    .ft-engine-detail {

        font-size:
            10.5px !important;

        color:
            #81899a !important;
    }

    .ft-e1-engine-left
    .ft-engine-foot b {

        width:
            28px !important;

        height:
            28px !important;

        flex-basis:
            28px !important;

        font-size:
            13px !important;
    }


    /* =====================================================
       RIGHT SUMMARY / NEWS AREA
       ===================================================== */

    .ft-engine-card
    .ft-e1-engine-feed {

        padding:
            14px
            18px !important;

        background:
            linear-gradient(
                110deg,
                rgba(255,255,255,.80),
                rgba(250,251,255,.98)
            ) !important;
    }

    .ft-e1-feed-title {

        margin-bottom:
            5px !important;

        padding-bottom:
            5px !important;

        font-size:
            9.5px !important;

        letter-spacing:
            .075em !important;

        border-bottom:
            1px solid rgba(24, 39, 74, .055);
    }

    .ft-e1-feed-row {

        min-height:
            34px !important;

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

        gap:
            9px !important;
    }

    .ft-e1-feed-dot {

        width:
            6px !important;

        height:
            6px !important;

        box-shadow:
            0 0 0 3px
            var(--accent-soft) !important;
    }

    .ft-e1-feed-copy {

        font-size:
            10.5px !important;

        line-height:
            1.35 !important;

        color:
            #596276 !important;
    }

    .ft-e1-feed-empty {

        color:
            #858d9d !important;
    }

    .ft-e1-feed-link {

        margin-top:
            5px !important;

        padding-top:
            6px !important;

        border-top:
            1px solid rgba(24, 39, 74, .055);

        font-size:
            10.5px !important;
    }
}


/* =========================================================
   ENGINE ACCENT REFINEMENT
   ========================================================= */

.ft-engine-card[data-engine="katip"] {
    --accent: #12a8c7;
    --accent-soft: #eafafd;
}

.ft-engine-card[data-engine="oduncu"] {
    --accent: #e18a21;
    --accent-soft: #fff5e7;
}

.ft-engine-card[data-engine="kasif"] {
    --accent: #7656ed;
    --accent-soft: #f1edff;
}

.ft-engine-card[data-engine="tazi"] {
    --accent: #0ca77f;
    --accent-soft: #eafaf5;
}

.ft-engine-card[data-engine="tilki"] {
    --accent: #ec4d7e;
    --accent-soft: #fff0f5;
}

.ft-engine-card[data-engine="altin-rehber"] {
    --accent: #d99c13;
    --accent-soft: #fff8e5;
}

.ft-engine-card[data-engine="aslan"] {
    --accent: #3978b8;
    --accent-soft: #edf5fd;
}

.ft-engine-card[data-engine="oyuncu"] {
    --accent: #5967e9;
    --accent-soft: #eff1ff;
}

.ft-engine-card[data-engine="bilge"] {
    --accent: #10a9a5;
    --accent-soft: #eafafa;
}

.ft-engine-card[data-engine="dedektif"] {
    --accent: #596b88;
    --accent-soft: #f0f3f7;
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.ft-e1-trust {
    margin-top:
        0 !important;

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

.ft-e1-trust-inner {
    width:
        min(1540px, calc(100% - 52px)) !important;
}

.ft-e1-trust-item {
    padding:
        16px
        22px !important;
}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (min-width: 721px) and (max-width: 1050px) {

    .ft-engine-section
    .ft-engine-grid {

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

    .ft-engine-section
    .ft-engine-card {

        grid-template-columns:
            minmax(0, 43%)
            minmax(0, 57%) !important;

        min-height:
            190px !important;
    }
}


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

@media (max-width: 720px) {

    .ft-e1-hero,
    .ft-engine-section > .ft-shell,
    .ft-e1-trust-inner {

        width:
            calc(100% - 24px) !important;
    }

    .ft-engine-section
    .ft-engine-grid {

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

    .ft-engine-section
    .ft-engine-card {

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