/**
 * Hesapis Market Data - Widget Styles
 * Based on hesapis.com widget design
 *
 * @package Hesapis_Market_Data
 */

/* ============================================
   CSS Variables (hesapis.com colors)
   ============================================ */
:root {
    /* Light Theme (default) */
    --hesapis-bg: #ffffff;
    --hesapis-text: #0f172a;
    --hesapis-muted: #64748b;
    --hesapis-border: #e2e8f0;
    --hesapis-divider: #f1f5f9;
    --hesapis-primary: #0f172a;
    --hesapis-accent: #f59e0b;
    --hesapis-up: #16a34a;
    --hesapis-down: #dc2626;
    --hesapis-radius: 14px;
    --hesapis-padding: 16px;
    --hesapis-gap: 8px;
    --hesapis-shadow: 0 8px 20px rgba(15,23,42,0.08);
    --hesapis-font: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ============================================
   Base Widget
   ============================================ */
.hesapis-widget {
    box-sizing: border-box;
    background: var(--hesapis-bg);
    color: var(--hesapis-text);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    padding: var(--hesapis-padding);
    font-family: var(--hesapis-font);
    box-shadow: var(--hesapis-shadow);
    font-size: 14px;
    line-height: 1.5;
}

.hesapis-widget *,
.hesapis-widget *::before,
.hesapis-widget *::after {
    box-sizing: border-box;
}

/* ============================================
   Cards Display
   ============================================ */
.hesapis-cards {
    display: grid;
    grid-template-columns: repeat(var(--hesapis-columns, 4), 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .hesapis-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .hesapis-cards { grid-template-columns: 1fr; }
}

.hesapis-card {
    background: var(--hesapis-card-bg, var(--hesapis-bg));
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    padding: var(--hesapis-padding);
    box-shadow: var(--hesapis-shadow);
    transition: all 0.2s ease;
}

.hesapis-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}

.hesapis-card-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hesapis-card-header .hesapis-card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hesapis-card-header .hesapis-change,
.hesapis-card-header .hesapis-change-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.hesapis-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.hesapis-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Hide icons option */
.hesapis-no-icons .hesapis-icon {
    display: none;
}

.hesapis-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--hesapis-text);
}

.hesapis-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--hesapis-gap);
}

.hesapis-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--hesapis-divider);
}

.hesapis-price:last-child {
    border-bottom: none;
}

.hesapis-label {
    font-size: 12px;
    color: var(--hesapis-muted);
    white-space: nowrap;
}

.hesapis-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Card footer - artık kullanılmıyor, header'da gösteriliyor */
.hesapis-card-footer {
    display: none;
}

/* ============================================
   Change Badge
   ============================================ */
.hesapis-change-badge,
.hesapis-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-change-badge.hesapis-positive,
.hesapis-change.hesapis-positive,
.hesapis-change.up {
    color: var(--hesapis-up);
}

.hesapis-change-badge.hesapis-negative,
.hesapis-change.hesapis-negative,
.hesapis-change.down {
    color: var(--hesapis-down);
}

.hesapis-change.neutral {
    color: var(--hesapis-muted);
}

.hesapis-arrow {
    font-size: 10px;
}

/* ============================================
   Table Display
   ============================================ */
.hesapis-widget.hesapis-display-table {
    padding: 0;
    overflow: hidden;
}

.hesapis-table {
    width: 100%;
    border-collapse: collapse;
}

.hesapis-table th {
    background: var(--hesapis-bg-secondary, var(--hesapis-divider));
    color: var(--hesapis-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--hesapis-border);
}

.hesapis-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hesapis-divider);
    vertical-align: middle;
}

.hesapis-table tbody tr:last-child td {
    border-bottom: none;
}

.hesapis-table tbody tr {
    transition: background 0.2s ease;
}

.hesapis-table tbody tr:hover {
    background: var(--hesapis-divider);
}

.hesapis-table td:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hesapis-table .hesapis-icon {
    width: 22px;
    height: 22px;
}

.hesapis-table .hesapis-price-buy,
.hesapis-table .hesapis-price-sell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-table .hesapis-change,
.hesapis-table .hesapis-change-badge {
    white-space: nowrap;
}

/* ============================================
   List Display
   ============================================ */
.hesapis-widget.hesapis-display-list {
    padding: 0;
    overflow: hidden;
}

.hesapis-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hesapis-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px var(--hesapis-padding);
    border-bottom: 1px solid var(--hesapis-divider);
    transition: background 0.2s ease;
}

.hesapis-list-item:last-child {
    border-bottom: none;
}

.hesapis-list-item:hover {
    background: var(--hesapis-divider);
}

.hesapis-list-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--hesapis-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hesapis-list .hesapis-icon {
    width: 22px;
    height: 22px;
}

.hesapis-list-values {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.hesapis-list-price {
    font-weight: 700;
    font-size: 14px;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: left;
}

.hesapis-list-values .hesapis-change,
.hesapis-list-values .hesapis-change-badge {
    min-width: 60px;
    text-align: left;
}

/* ============================================
   Mini Display (Pill Style)
   ============================================ */
.hesapis-widget.hesapis-display-mini {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.hesapis-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hesapis-mini-item {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 14px;
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: 50px;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: var(--hesapis-shadow);
}

.hesapis-mini-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.12);
}

.hesapis-mini-name {
    color: var(--hesapis-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hesapis-mini-price {
    font-weight: 700;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-mini-item .hesapis-change,
.hesapis-mini-item .hesapis-change-badge {
    white-space: nowrap;
}

/* ============================================
   Ticker (Kayan Bant)
   ============================================ */
.hesapis-ticker {
    /* Alt bosluk kisa koddan ayarlanabilir; varsayilan 0 cunku serit
       genelde baska bir kabin (widget alani) icinde duruyor ve o kap
       zaten kendi boslugunu veriyor. */
    margin-bottom: var(--hesapis-margin, 0);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: var(--hesapis-radius);
    overflow: hidden;
    position: relative;
}

.hesapis-ticker-track {
    /* Parmakla kaydirma icin overflow-x: auto sart. Onceki surumde
       "overflow: hidden" idi; serit sadece CSS animasyonuyla akiyordu ve
       dokunmatik cihazda kullanici bir sonraki fiyati gormek icin
       beklemek zorundaydi - parmagini kaydirmasi hicbir sey yapmiyordu. */
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    /* Dikey kaydirma sayfaya kalsin, yatay serit alsin. */
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    /* Cubuk gorunmesin - serit ince bir cizgi, cubuk yeri kaplar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hesapis-ticker-track::-webkit-scrollbar {
    display: none;
}

/* Kullanici seride dokundugu anda animasyon durur, boylece elle
   kaydirdigi konum altindan kaymaz. JS 'hesapis-elde' sinifini ekler. */
.hesapis-ticker.hesapis-elde .hesapis-ticker-content,
.hesapis-marquee.hesapis-elde .hesapis-marquee-content {
    animation-play-state: paused;
}

.hesapis-marquee::-webkit-scrollbar {
    display: none;
}

.hesapis-ticker::before,
.hesapis-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.hesapis-ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--hesapis-bg, #0f172a), transparent);
}

.hesapis-ticker::after {
    right: 0;
    background: linear-gradient(-90deg, var(--hesapis-bg, #1e293b), transparent);
}

.hesapis-ticker-content {
    display: flex;
    /* CSS animasyonu KALDIRILDI.
       Animasyon transform ile, elle kaydirma scrollLeft ile calisiyordu:
       iki ayri koordinat sistemi ayni anda hareket edince hizalama tutmuyor
       ve serit bos alana kayabiliyordu. Artik ikisi de scrollLeft uzerinden
       yurutuluyor (hesapis-script.js), boylece cakisacak iki sistem yok.
       JS calismazsa serit durur ama okunabilir ve elle kaydirilabilir kalir. */
    padding: var(--hesapis-padding, 12px) 0;
    /* transform ile yapilan hareket TASMA OLUSTURMAZ; kap
       overflow-x:auto olsa bile kaydirilacak alan dogmaz. Icerige
       gercek genislik verince serit fiilen tasiyor ve parmakla
       kaydirilabiliyor. */
    width: max-content;
}

/* Duraklatma artik JS tarafinda (rAF dongusu durduruluyor). */

@keyframes hesapis-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hesapis-ticker-item {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    white-space: nowrap;
    color: var(--hesapis-text, #e2e8f0);
    font-size: var(--hesapis-font-size, 13px);
    border-right: 1px solid var(--hesapis-border, rgba(255,255,255,0.1));
}

.hesapis-ticker-item:last-child {
    border-right: none;
}

.hesapis-ticker-name {
    color: #94a3b8;
    font-size: 12px;
}

.hesapis-ticker-price {
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.hesapis-ticker-change {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hesapis-ticker-change.hesapis-positive {
    color: #4ade80;
}

.hesapis-ticker-change.hesapis-negative {
    color: #f87171;
}

/* Ticker credit - gizle */
.hesapis-ticker-credit {
    display: none;
}

/* ============================================
   Combined Widget
   ============================================ */
.hesapis-combined {
    font-family: var(--hesapis-font);
    color: var(--hesapis-text);
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    padding: var(--hesapis-padding);
}

.hesapis-combined-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.hesapis-combined-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px;
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    transition: all 0.2s ease;
    box-shadow: var(--hesapis-shadow);
}

.hesapis-combined-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}

.hesapis-combined-item .hesapis-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hesapis-combined-name {
    flex: 1;
    font-size: 12px;
    color: var(--hesapis-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hesapis-combined-price {
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--hesapis-text);
    flex-shrink: 0;
    min-width: 80px;
    text-align: left;
}

.hesapis-combined-item .hesapis-change-badge,
.hesapis-combined-item .hesapis-change {
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 55px;
    text-align: left;
}

/* ============================================
   Footer
   ============================================ */
.hesapis-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hesapis-border);
    font-size: 11px;
    color: var(--hesapis-muted);
}

/* Footer for widgets with padding */
.hesapis-widget:not(.hesapis-display-table):not(.hesapis-display-list):not(.hesapis-display-mini) .hesapis-footer {
    margin: 12px 0 0;
}

.hesapis-footer .hesapis-updated {
    margin-right: auto;
    font-size: 11px;
}

.hesapis-credit {
    color: var(--hesapis-muted);
    text-decoration: none;
    font-size: 11px;
    opacity: 0.6;
}

.hesapis-credit:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Mini Credit - base style */
.hesapis-credit-mini {
    display: block;
    text-align: right;
    color: var(--hesapis-muted);
    text-decoration: none;
    font-size: 10px;
    opacity: 0.5;
    margin: 12px 16px 4px;
}

.hesapis-credit-mini:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Single widget credit */
.hesapis-single .hesapis-credit-mini {
    margin: 16px 0 0;
}

/* Vertical widget credit */
.hesapis-vertical .hesapis-credit-mini {
    margin: 0;
    padding: 10px 16px 8px;
    border-top: 1px solid var(--hesapis-divider);
}

/* Sparkline widget credit */
.hesapis-sparkline .hesapis-credit-mini {
    margin: 8px 16px 8px;
}

/* Marquee Credit */
.hesapis-marquee-credit {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    color: var(--hesapis-muted);
    text-decoration: none;
    font-size: 10px;
    opacity: 0.4;
    white-space: nowrap;
}

.hesapis-marquee-credit:hover {
    opacity: 0.8;
}

/* ============================================
   Error State
   ============================================ */
.hesapis-error {
    padding: 16px;
    font-size: 12px;
    color: var(--hesapis-muted);
    text-align: center;
}

.hesapis-error a {
    color: var(--hesapis-down);
    text-decoration: underline;
}

/* ============================================
   Single/Hero Widget
   ============================================ */
.hesapis-single {
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    padding: 24px;
    box-shadow: var(--hesapis-shadow);
    text-align: center;
    max-width: 320px;
}

.hesapis-single-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.hesapis-single-header .hesapis-icon {
    width: 32px;
    height: 32px;
}

.hesapis-single-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--hesapis-text);
}

.hesapis-single-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--hesapis-text);
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-single-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 16px;
    white-space: nowrap;
}

.hesapis-single-details {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--hesapis-divider);
}

.hesapis-single-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hesapis-single-detail .hesapis-label {
    font-size: 11px;
    color: var(--hesapis-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

.hesapis-single-detail .hesapis-value {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================
   Marquee Widget
   ============================================ */
.hesapis-marquee {
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0;
}

.hesapis-marquee-content {
    display: flex;
    animation: hesapis-scroll var(--hesapis-duration, 25s) linear infinite;
    white-space: nowrap;
    /* Seritte oldugu gibi: transform tasma olusturmadigi icin elle
       kaydirma calismaz; gercek genislik sart. */
    width: max-content;
}

.hesapis-marquee-item {
    flex-shrink: 0;
}

.hesapis-marquee:hover .hesapis-marquee-content {
    animation-play-state: paused;
}

.hesapis-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    font-size: 13px;
    color: var(--hesapis-text);
}

.hesapis-marquee-name {
    color: var(--hesapis-muted);
    font-size: 12px;
}

.hesapis-marquee-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hesapis-marquee .hesapis-change {
    font-size: 11px;
}

/* Speed variations */
.hesapis-speed-slow .hesapis-marquee-content,
.hesapis-speed-slow .hesapis-ticker-content,
.hesapis-speed-slow .hesapis-vertical-content {
    animation-duration: var(--hesapis-duration, 45s);
}

.hesapis-speed-fast .hesapis-marquee-content,
.hesapis-speed-fast .hesapis-ticker-content,
.hesapis-speed-fast .hesapis-vertical-content {
    animation-duration: var(--hesapis-duration, 15s);
}

/* ============================================
   Vertical Ticker Widget
   ============================================ */
.hesapis-vertical {
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
    max-width: 300px;
}

.hesapis-vertical-title {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--hesapis-text);
    border-bottom: 1px solid var(--hesapis-divider);
    background: var(--hesapis-divider);
}

.hesapis-vertical-track {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.hesapis-vertical-content {
    animation: hesapis-scroll-vertical var(--hesapis-duration, 20s) linear infinite;
}

.hesapis-vertical:hover .hesapis-vertical-content {
    animation-play-state: paused;
}

@keyframes hesapis-scroll-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.hesapis-vertical-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hesapis-divider);
}

.hesapis-vertical-item .hesapis-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hesapis-vertical-name {
    flex: 1;
    font-size: 13px;
    color: var(--hesapis-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hesapis-vertical-price {
    font-weight: 600;
    font-size: 13px;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 70px;
    text-align: left;
}

.hesapis-vertical .hesapis-change {
    font-size: 11px;
    min-width: 55px;
    text-align: left;
    flex-shrink: 0;
}

/* ============================================
   Compact Widget
   ============================================ */
.hesapis-compact {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: 50px;
    font-size: 13px;
    box-shadow: var(--hesapis-shadow);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.hesapis-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}

.hesapis-compact .hesapis-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hesapis-compact-name {
    color: var(--hesapis-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hesapis-compact-price {
    font-weight: 600;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-compact .hesapis-change {
    font-size: 11px;
    white-space: nowrap;
}

/* ============================================
   Sparkline Widget
   ============================================ */
.hesapis-sparkline {
    background: var(--hesapis-bg);
    border: 1px solid var(--hesapis-border);
    border-radius: var(--hesapis-radius);
}

.hesapis-sparkline-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hesapis-divider);
}

.hesapis-sparkline-item:last-child {
    border-bottom: none;
}

.hesapis-sparkline-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    flex-shrink: 0;
}

.hesapis-sparkline-info .hesapis-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hesapis-sparkline-name {
    font-size: 13px;
    color: var(--hesapis-muted);
    white-space: nowrap;
}

.hesapis-sparkline-chart {
    flex: 1;
    height: 40px;
    min-width: 80px;
}

.hesapis-sparkline-svg {
    width: 100%;
    height: 100%;
}

.hesapis-sparkline-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 90px;
    flex-shrink: 0;
}

.hesapis-sparkline-price {
    font-weight: 700;
    font-size: 14px;
    color: var(--hesapis-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hesapis-sparkline .hesapis-change {
    font-size: 11px;
    white-space: nowrap;
}

/* ============================================
   Dark Theme
   ============================================ */
.hesapis-widget.hesapis-dark,
.hesapis-combined.hesapis-dark,
.hesapis-single.hesapis-dark,
.hesapis-marquee.hesapis-dark,
.hesapis-vertical.hesapis-dark,
.hesapis-compact.hesapis-dark,
.hesapis-sparkline.hesapis-dark {
    --hesapis-bg: #0f172a;
    --hesapis-text: #e2e8f0;
    --hesapis-muted: #94a3b8;
    --hesapis-border: #1e293b;
    --hesapis-divider: #1e293b;
    --hesapis-primary: #e2e8f0;
    --hesapis-accent: #f59e0b;
    --hesapis-up: #22c55e;
    --hesapis-down: #f87171;
}

/* ============================================
   Animations
   ============================================ */
.hesapis-flash-up {
    animation: flash-green 0.5s ease;
}

.hesapis-flash-down {
    animation: flash-red 0.5s ease;
}

@keyframes flash-green {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(22, 163, 74, 0.15); }
}

@keyframes flash-red {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(220, 38, 38, 0.15); }
}

/* ============================================
   Print
   ============================================ */
@media print {
    .hesapis-ticker-content {
        animation: none;
    }
    .hesapis-credit {
        display: none;
    }
}

/* ============================================
   Erisilebilirlik: hareket azaltma tercihi
   ============================================
   Isletim sisteminde "hareketi azalt" secili kullanicilar icin
   animasyonu tamamen durduruyoruz. Durmadan kayan bir serit vestibuler
   rahatsizligi olan kisilerde bas donmesi yapabiliyor (WCAG 2.3.3).

   Bunu ancak serit ELLE KAYDIRILABILIR oldugu icin yapabiliyoruz:
   animasyon durunca veri erisilemez hale gelmiyor, kullanici parmagiyla
   veya fareyle geri kalanini goruyor. Kaydirma eklenmeden once bu kural
   yazilsaydi o kullanicilar yalnizca ilk birkac fiyati gorebilirdi. */
@media (prefers-reduced-motion: reduce) {
    .hesapis-ticker-content,
    .hesapis-marquee-content,
    .hesapis-vertical-content {
        animation: none !important;
    }
}

/* ============================================
   Vurgu rengi (accent_color)
   ============================================
   --hesapis-accent ve --hesapis-primary :root'ta TANIMLIYDI ama hicbir
   kural okumuyordu; yani kisa koddaki accent_color parametresi
   belgelenmis olmasina ragmen hicbir sey yapmiyordu. Vurgu artik
   baslik altindaki cizgide ve secili/one cikan ogelerde kullaniliyor. */
.hesapis-widget .hesapis-header{
    border-bottom: 2px solid var(--hesapis-accent, var(--hesapis-border));
}
.hesapis-ticker-name{
    color: var(--hesapis-accent, inherit);
}