/*
 * FİYATOMATİK E4
 * Professional engine visual system.
 * Presentation only.
 */

/* ---------------------------------------------------------
   Engine card proportions
   --------------------------------------------------------- */

.ft-engine-card {
    min-height: 232px !important;
    grid-template-columns:
        minmax(0, 45%)
        minmax(0, 55%) !important;
}

.ft-e1-engine-left {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0,1fr) !important;
    grid-template-rows: auto auto 1fr auto !important;
    column-gap: 16px !important;
    align-items: start !important;
    padding: 20px 20px 17px !important;
}

/* ---------------------------------------------------------
   Professional visual
   --------------------------------------------------------- */

.ft-e4-engine-visual {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;

    width: 118px !important;
    height: 118px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 24px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.96),
            rgba(255,255,255,.42) 70%,
            transparent 71%
        ) !important;
}

.ft-e4-engine-visual img {
    display: block !important;
    width: 118px !important;
    height: 118px !important;
    object-fit: contain !important;

    filter:
        drop-shadow(
            0 12px 14px rgba(28,45,80,.08)
        );
}

/*
 * The old small icon is no longer needed visually.
 * It remains in DOM; only presentation is hidden.
 */

.ft-e1-engine-left .ft-engine-head {
    display: none !important;
}

.ft-e1-engine-left > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 10px 0 3px !important;
    min-height: auto !important;

    font-size: 19px !important;
    line-height: 1.15 !important;
}

.ft-e1-engine-left > small {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 0 8px !important;

    color: var(--engine-accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.ft-e1-engine-left > p {
    grid-column: 2 !important;
    grid-row: 3 !important;

    min-height: 0 !important;
    margin: 5px 0 10px !important;

    color: #657087 !important;
    font-size: 12px !important;
    line-height: 1.48 !important;
}

.ft-e1-engine-left .ft-engine-foot {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: 100% !important;
    min-height: 38px !important;
    margin-top: 7px !important;
    padding-top: 10px !important;
}

/* ---------------------------------------------------------
   Feed
   --------------------------------------------------------- */

.ft-e1-engine-feed {
    padding: 20px 22px 16px !important;
}

.ft-e1-feed-title {
    min-height: 31px !important;
}

.ft-e1-feed-row {
    min-height: 42px !important;
}

.ft-e1-feed-copy {
    font-size: 11.5px !important;
}

/* ---------------------------------------------------------
   Hero slightly closer to approved reference
   --------------------------------------------------------- */

.ft-e1-hero {
    min-height: 242px !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
}

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

/* ---------------------------------------------------------
   Trust strip remains vivid
   --------------------------------------------------------- */

.ft-e1-trust {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* ---------------------------------------------------------
   REMOVE GREEN FOOTER VISUAL LANGUAGE
   White corporate footer
   --------------------------------------------------------- */

.ft-footer {
    margin: 0 !important;
    padding: 0 !important;

    color: #526078 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        ) !important;

    border-top:
        1px solid rgba(28,45,78,.08) !important;
}

.ft-footer,
.ft-footer * {
    color: inherit;
}

.ft-footer-inner {
    min-height: 150px !important;
    padding-top: 34px !important;
    padding-bottom: 28px !important;
}

.ft-footer strong {
    color: #111a31 !important;
}

.ft-footer a {
    color: #637087 !important;
}

.ft-footer a:hover {
    color: #4f5cf2 !important;
}

.ft-footer .ft-brand-name,
.ft-footer .ft-logo-text,
.ft-footer h2,
.ft-footer h3 {
    color: #111a31 !important;
}

/*
 * Any nested green backgrounds inherited from previous
 * presentation layers are neutralized inside footer only.
 */

.ft-footer > *,
.ft-footer-inner,
.ft-footer-bottom {
    background-color: transparent !important;
}

.ft-footer-bottom {
    border-top:
        1px solid rgba(28,45,78,.08) !important;
}

/* ---------------------------------------------------------
   Desktop width / spacing
   --------------------------------------------------------- */

@media (min-width: 1200px) {
    .ft-engine-grid {
        gap: 17px 18px !important;
    }
}

/* ---------------------------------------------------------
   Tablet safety
   --------------------------------------------------------- */

@media (max-width: 1100px) {
    .ft-engine-card {
        grid-template-columns:
            minmax(0, 48%)
            minmax(0, 52%) !important;
    }

    .ft-e1-engine-left {
        grid-template-columns:
            92px minmax(0,1fr) !important;
    }

    .ft-e4-engine-visual,
    .ft-e4-engine-visual img {
        width: 92px !important;
        height: 92px !important;
    }
}

/* ---------------------------------------------------------
   Mobile safety
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .ft-engine-card {
        grid-template-columns: 1fr !important;
    }

    .ft-e1-engine-left {
        grid-template-columns:
            100px minmax(0,1fr) !important;
    }

    .ft-e4-engine-visual,
    .ft-e4-engine-visual img {
        width: 100px !important;
        height: 100px !important;
    }
}