/*
 * FİYATOMATİK
 * UI-A6.4-E3-B
 * Approved reference-match presentation layer.
 *
 * Presentation only.
 * No backend assumptions.
 * No fake commercial data.
 */

:root {
    --fte3-ink: #10182f;
    --fte3-muted: #69738a;
    --fte3-line: #e5e9f2;
    --fte3-page: #f8faff;
    --fte3-blue: #4361ee;
    --fte3-purple: #7657f6;
    --fte3-pink: #ed4d8d;
    --fte3-cyan: #13abc1;
    --fte3-green: #10ad8a;
    --fte3-orange: #ee9b20;
}

/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(70, 108, 255, .055),
            transparent 25rem
        ),
        radial-gradient(
            circle at 86% 18%,
            rgba(214, 74, 190, .045),
            transparent 27rem
        ),
        #fbfcff;
}

.ft-main {
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

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

.ft-header {
    background: rgba(255,255,255,.96);
}

.ft-main-nav {
    border-top: 1px solid rgba(16,24,47,.045);
    border-bottom: 1px solid rgba(16,24,47,.07);
    box-shadow: 0 5px 20px rgba(31,48,86,.035);
}

.ft-main-nav a {
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.ft-main-nav a[href="/piyasa-ui/urun-merkezi/"] {
    color: #fff !important;
    background: linear-gradient(
        135deg,
        #3d62f4 0%,
        #7256f5 100%
    ) !important;
    border-radius: 999px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-shadow: 0 8px 20px rgba(70,91,236,.20);
}

.ft-main-nav a:hover {
    transform: translateY(-1px);
}

/* =========================================================
   HERO
   ========================================================= */

.ft-e1-hero {
    position: relative;
    overflow: hidden;
    min-height: 252px !important;
    margin: 22px 0 28px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(
            circle at 72% 12%,
            rgba(236,86,199,.40),
            transparent 25%
        ),
        radial-gradient(
            circle at 51% 28%,
            rgba(78,108,255,.46),
            transparent 34%
        ),
        linear-gradient(
            118deg,
            #071b49 0%,
            #123d91 45%,
            #2867c4 100%
        ) !important;
    box-shadow:
        0 24px 60px rgba(27,61,133,.16),
        inset 0 1px 0 rgba(255,255,255,.13);
}

.ft-e1-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            116deg,
            transparent 0 52%,
            rgba(255,255,255,.035) 52% 65%,
            transparent 65%
        );
}

.ft-e1-hero::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -1px;
    height: 92px;
    pointer-events: none;
    opacity: .70;
    background:
        linear-gradient(
            150deg,
            transparent 0 15%,
            rgba(2,20,60,.54) 15% 30%,
            transparent 30%
        ),
        linear-gradient(
            210deg,
            transparent 0 20%,
            rgba(2,24,70,.50) 20% 40%,
            transparent 40%
        ),
        linear-gradient(
            160deg,
            transparent 0 45%,
            rgba(3,27,72,.55) 45% 63%,
            transparent 63%
        ),
        linear-gradient(
            200deg,
            transparent 0 61%,
            rgba(3,27,72,.60) 61% 78%,
            transparent 78%
        );
}

.ft-e1-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 252px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 470px !important;
    align-items: center !important;
    gap: 42px !important;
    padding: 30px 34px 30px 46px !important;
}

.ft-e1-hero-copy h1 {
    margin: 0 0 12px !important;
    max-width: 690px;
    color: #fff !important;
    font-size: clamp(38px, 3.25vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -2.5px !important;
    font-weight: 850 !important;
}

.ft-e1-hero-copy h1 span {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        #52d8ff 0%,
        #8b8cff 47%,
        #ff66b0 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.ft-e1-hero-copy p {
    max-width: 720px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

.ft-e1-hero-panel {
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 20px !important;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(59,46,143,.50),
            rgba(5,52,117,.57)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 42px rgba(0,18,63,.18);
    backdrop-filter: blur(10px);
}

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

.ft-e1-system-row + .ft-e1-system-row {
    border-top: 1px solid rgba(255,255,255,.12) !important;
}

.ft-e1-system-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.09);
    color: #fff !important;
}

.ft-e1-system-row strong {
    color: #fff !important;
    font-size: 14px !important;
}

.ft-e1-system-row span {
    color: rgba(255,255,255,.69) !important;
    font-size: 12px !important;
}

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

.ft-engine-section {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
}

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

.ft-section-heading h2 {
    color: var(--fte3-ink) !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    letter-spacing: -.7px !important;
}

.ft-engine-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
}

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

.ft-engine-card {
    --engine-accent: #25abc0;
    --engine-soft: #eefbfd;
    --engine-line: rgba(37,171,192,.22);

    position: relative !important;
    min-width: 0 !important;
    min-height: 218px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
    overflow: hidden !important;

    color: var(--fte3-ink) !important;
    text-decoration: none !important;

    border:
        1px solid var(--engine-line) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(
            110deg,
            var(--engine-soft) 0%,
            #fff 40%,
            #fff 100%
        ) !important;

    box-shadow:
        0 10px 26px rgba(33,52,92,.065),
        inset 0 1px 0 rgba(255,255,255,.85);

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

.ft-engine-card:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 17px 38px rgba(32,52,95,.105),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.ft-engine-card[data-engine="katip"] {
    --engine-accent: #16abc1;
    --engine-soft: #effbfd;
    --engine-line: rgba(22,171,193,.24);
}

.ft-engine-card[data-engine="oduncu"] {
    --engine-accent: #ed9617;
    --engine-soft: #fff9ee;
    --engine-line: rgba(237,150,23,.22);
}

.ft-engine-card[data-engine="kasif"] {
    --engine-accent: #7357ee;
    --engine-soft: #f6f3ff;
    --engine-line: rgba(115,87,238,.22);
}

.ft-engine-card[data-engine="tazi"] {
    --engine-accent: #0cae89;
    --engine-soft: #effcf8;
    --engine-line: rgba(12,174,137,.22);
}

.ft-engine-card[data-engine="tilki"] {
    --engine-accent: #ed4d80;
    --engine-soft: #fff2f6;
    --engine-line: rgba(237,77,128,.22);
}

.ft-engine-card[data-engine="altin-rehber"] {
    --engine-accent: #d9a117;
    --engine-soft: #fff9e9;
    --engine-line: rgba(217,161,23,.22);
}

.ft-engine-card[data-engine="aslan"] {
    --engine-accent: #3c80ba;
    --engine-soft: #f0f7fd;
    --engine-line: rgba(60,128,186,.22);
}

.ft-engine-card[data-engine="oyuncu"] {
    --engine-accent: #5669ee;
    --engine-soft: #f2f4ff;
    --engine-line: rgba(86,105,238,.22);
}

.ft-engine-card[data-engine="bilge"] {
    --engine-accent: #13aaa8;
    --engine-soft: #eefbf9;
    --engine-line: rgba(19,170,168,.22);
}

.ft-engine-card[data-engine="dedektif"] {
    --engine-accent: #5e718f;
    --engine-soft: #f3f6fa;
    --engine-line: rgba(94,113,143,.22);
}

/* =========================================================
   LEFT IDENTITY
   ========================================================= */

.ft-e1-engine-left {
    position: relative !important;
    min-width: 0 !important;
    padding: 22px 24px 19px !important;
    border-right: 1px solid rgba(25,42,73,.10) !important;
}

.ft-e1-engine-left .ft-engine-head {
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
}

.ft-engine-icon {
    flex: 0 0 auto;
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    color: var(--engine-accent) !important;
    background: color-mix(
        in srgb,
        var(--engine-accent) 9%,
        white
    ) !important;
    border: 1px solid color-mix(
        in srgb,
        var(--engine-accent) 14%,
        white
    ) !important;
}

.ft-engine-icon svg {
    width: 25px !important;
    height: 25px !important;
    stroke: currentColor !important;
}

.ft-engine-status {
    display: none !important;
}

.ft-e1-engine-left > strong {
    display: block !important;
    margin: 0 0 3px 68px !important;
    margin-top: -57px !important;
    min-height: 27px;
    color: var(--fte3-ink) !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    letter-spacing: -.35px !important;
}

.ft-e1-engine-left > small {
    display: block !important;
    margin: 0 0 22px 68px !important;
    color: var(--engine-accent) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
}

.ft-e1-engine-left > p {
    min-height: 52px !important;
    margin: 0 0 16px !important;
    color: #667187 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.ft-e1-engine-left .ft-engine-foot {
    min-height: 36px !important;
    margin-top: auto !important;
    padding-top: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(25,42,73,.08) !important;
}

.ft-engine-detail {
    color: #7b8496 !important;
    font-size: 11.5px !important;
}

.ft-engine-foot b {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: var(--engine-accent) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    box-shadow:
        0 7px 16px color-mix(
            in srgb,
            var(--engine-accent) 24%,
            transparent
        );
}

/* =========================================================
   RIGHT FEED
   ========================================================= */

.ft-e1-engine-feed {
    min-width: 0 !important;
    padding: 20px 22px 17px !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.84),
            rgba(255,255,255,.97)
        ) !important;
}

.ft-e1-feed-title {
    min-height: 28px !important;
    margin-bottom: 3px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(28,43,72,.08) !important;
}

.ft-e1-feed-title span:first-child {
    color: var(--engine-accent) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .15px !important;
    text-transform: uppercase;
}

.ft-e1-feed-title span:last-child {
    color: #5d6679 !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    letter-spacing: .25px !important;
}

.ft-e1-feed-row {
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: 9px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(28,43,72,.07) !important;
}

.ft-e1-feed-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--engine-accent) !important;
    box-shadow:
        0 0 0 5px color-mix(
            in srgb,
            var(--engine-accent) 8%,
            transparent
        );
}

.ft-e1-feed-copy {
    min-width: 0;
    color: #788195 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.ft-e1-feed-empty {
    opacity: .84;
}

.ft-e1-feed-link {
    min-height: 31px !important;
    display: flex !important;
    align-items: flex-end !important;
    color: var(--engine-accent) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

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

.ft-e1-trust {
    margin-top: 6px !important;
    background:
        linear-gradient(
            100deg,
            #8e155f 0%,
            #6d2bc4 31%,
            #324fd0 61%,
            #07528a 100%
        ) !important;
}

.ft-e1-trust-inner {
    min-height: 76px !important;
}

.ft-e1-trust-item {
    min-width: 0;
}

.ft-e1-trust-item strong {
    color: #fff !important;
}

.ft-e1-trust-item span {
    color: rgba(255,255,255,.70) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.ft-footer {
    margin-top: 0 !important;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {
    .ft-main {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .ft-engine-grid {
        gap: 17px 20px !important;
    }

    .ft-engine-card {
        min-height: 220px !important;
    }
}

/* =========================================================
   MID DESKTOP
   ========================================================= */

@media (max-width: 1180px) {
    .ft-e1-hero-inner {
        grid-template-columns: 1fr 390px !important;
        gap: 24px !important;
        padding-left: 32px !important;
    }

    .ft-engine-card {
        grid-template-columns: 46% 54% !important;
    }
}

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

@media (max-width: 900px) {
    .ft-main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ft-e1-hero-inner {
        grid-template-columns: 1fr !important;
    }

    .ft-engine-grid {
        grid-template-columns: 1fr !important;
    }

    .ft-engine-card {
        grid-template-columns: 1fr !important;
    }

    .ft-e1-engine-left {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(25,42,73,.10) !important;
    }
}