/* =========================================================
   SeoGuide Finans Ticker
   ========================================================= */

.sg-finance-ticker {
    --sg-finance-bg: #0f172a;
    --sg-finance-border: rgba(255, 255, 255, 0.08);
    --sg-finance-text: #f8fafc;
    --sg-finance-muted: #94a3b8;
    --sg-finance-green: #22c55e;
    --sg-finance-red: #ef4444;
    --sg-finance-accent: #38bdf8;

    position: relative;
    width: 100%;
    height: 42px;

    background:
        linear-gradient(
            90deg,
            #0b1220 0%,
            var(--sg-finance-bg) 50%,
            #0b1220 100%
        );

    border-top: 1px solid var(--sg-finance-border);
    border-bottom: 1px solid var(--sg-finance-border);

    overflow: hidden;

    z-index: 50;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


/* ---------------------------------------------------------
   İç alan
   --------------------------------------------------------- */

.sg-finance-ticker__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 4%,
            #000 96%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0,
            #000 4%,
            #000 96%,
            transparent 100%
        );
}


/* ---------------------------------------------------------
   Kayan alan
   --------------------------------------------------------- */

.sg-finance-ticker__track {
    display: flex;
    align-items: center;

    width: max-content;
    min-width: 100%;

    height: 100%;

    will-change: transform;

    animation:
        sgFinanceTickerMove
        40s
        linear
        infinite;
}


/*
 * JS tarafından ikinci kopya oluşturulduğunda
 * ticker'ın kesintisiz devam etmesini sağlar.
 */

.sg-finance-ticker__track:hover {
    animation-play-state: paused;
}

.sg-finance-ticker:hover .sg-finance-ticker__track {
    animation-play-state: paused;
}


/* ---------------------------------------------------------
   Eleman
   --------------------------------------------------------- */

.sg-finance-item {
    display: inline-flex;
    align-items: center;

    height: 100%;

    padding: 0 22px;

    white-space: nowrap;

    color: var(--sg-finance-text);

    font-size: 13px;
    line-height: 1;
}

.sg-finance-item + .sg-finance-item {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}


/* ---------------------------------------------------------
   İkon
   --------------------------------------------------------- */

.sg-finance-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    margin-right: 8px;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.06);

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   İsim
   --------------------------------------------------------- */

.sg-finance-item__name {
    margin-right: 8px;

    color: #cbd5e1;

    font-weight: 600;
}


/* ---------------------------------------------------------
   Değer
   --------------------------------------------------------- */

.sg-finance-item__value {
    color: #ffffff;

    font-weight: 700;

    letter-spacing: 0.1px;
}


/* ---------------------------------------------------------
   Değişim
   --------------------------------------------------------- */

.sg-finance-item__change {
    display: inline-flex;
    align-items: center;

    margin-left: 8px;

    font-size: 12px;
    font-weight: 700;
}

.sg-finance-item__change.up {
    color: var(--sg-finance-green);
}

.sg-finance-item__change.down {
    color: var(--sg-finance-red);
}

.sg-finance-item__change.flat {
    color: var(--sg-finance-muted);
}


/* ---------------------------------------------------------
   Ayraç
   --------------------------------------------------------- */

.sg-finance-separator {
    display: inline-block;

    width: 4px;
    height: 4px;

    margin: 0 2px;

    border-radius: 50%;

    background: rgba(148, 163, 184, 0.45);
}


/* ---------------------------------------------------------
   Yükleniyor
   --------------------------------------------------------- */

.sg-finance-ticker__loading {
    display: flex;
    align-items: center;

    height: 100%;

    padding: 0 22px;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 500;
}

.sg-finance-ticker__pulse {
    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background: var(--sg-finance-accent);

    animation: sgFinancePulse 1.2s ease-in-out infinite;
}


/* ---------------------------------------------------------
   Kaynak
   --------------------------------------------------------- */

.sg-finance-ticker__source {
    position: absolute;

    right: 0;
    top: 0;

    display: flex;
    align-items: center;

    height: 100%;

    padding: 0 12px;

    background:
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0),
            #0f172a 28%
        );

    color: #64748b;

    font-size: 9px;

    pointer-events: none;

    z-index: 5;
}


/* ---------------------------------------------------------
   Animasyon
   --------------------------------------------------------- */

@keyframes sgFinanceTickerMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


@keyframes sgFinancePulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

}


/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .sg-finance-ticker {
        height: 38px;
    }

    .sg-finance-item {
        padding: 0 15px;

        font-size: 12px;
    }

    .sg-finance-item__icon {
        width: 22px;
        height: 22px;

        margin-right: 6px;
    }

    .sg-finance-item__name {
        margin-right: 6px;
    }

    .sg-finance-item__change {
        margin-left: 6px;

        font-size: 11px;
    }

    .sg-finance-ticker__source {
        display: none;
    }

}


/* ---------------------------------------------------------
   Hareket azaltma
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sg-finance-ticker__track {
        animation: none;
    }

}