:root {
    --bg-dark: #0a0e17;
    --bg-panel: rgba(16, 23, 38, 0.6);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.5);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --long-color: #00b894;
    --short-color: #ff7675;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Background Effects */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.orb-1 {
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}

.orb-2 {
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

/* Layout */
.dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Ana içerikteki kartlar arası boşluk — hepsi birbirine yakın, tek tip küçük boşluk */
.dashboard-main > section:not(:last-child) {
    margin-bottom: 0.6rem;
}

/* Üst 3 blok (widget satırı, TCMB, Haftalık/Aylık Başarı %) — .dashboard-main flex/grid OLMADIĞI
   için üst seviye <section>'lara CSS "order" uygulamak işe yaramıyordu; bu 3 blok artık bir flex
   sarmalayıcı (.top-widgets-wrapper, bkz. index.html) içinde, böylece masaüstünde/mobilde FARKLI
   sıralarda gösterilebiliyorlar. Varsayılan (bu kural + mobil): doğal DOM sırası — widgets-row →
   TCMB → profit-widgets-row. Boşluk değerleri yukarıdaki ".dashboard-main > section" kuralıyla
   birebir aynı (gap ile aynı görünüm sağlanıyor, artık bunlar dashboard-main'in DOĞRUDAN çocuğu
   olmadığı için o kural onları kapsamıyor). */
.top-widgets-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.6rem; /* wrapper artık dashboard-main'in DOĞRUDAN section çocuğu değil, o yüzden
                              kendinden sonraki bölümle (Açık İşlemler) arayı burada elle veriyoruz */
}

/* İşlem Tipleri dış paneli — mobilde de başlık ("Aktif AIBot İşlem Paketleri") ve kartlar aynı
   çerçeveli kutunun içinde birlikte görünür. Bu taban kural hem mobil hem masaüstü için geçerli;
   @media (min-width:769px) bloğu sadece padding/gap/font büyüklüğünü masaüstünde büyütüyor. */
.tt-outer-panel {
    background: rgba(16, 23, 38, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 10px;
}

.tt-outer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--text-main);
    font-size: 0.7rem;
    font-weight: 700;
}

    .tt-outer-title i {
        color: #60a5fa;
        font-size: 0.75rem;
    }
/* İç kartlar bir dış panelin içinde olduğu için kendi arka plan/kenarlığı daha hafif —
   aksi halde "kutu içinde kutu" görünümü ağır kaçıyordu (mobil + masaüstü ortak). */
.tt-outer-panel .tt-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

@media (min-width: 769px) {
    /* Masaüstünde istenen sıra: Widget satırı (BTC/Hacim/Sinyaller) → İşlem Tipleriniz → Haftalık/Aylık
       Başarı % → TCMB. .tt-outer-panel (İşlem Tipleri'ni saran dış panel) bu sarmalayıcının doğrudan
       çocuğu olduğu için (bkz. index.html) buraya order verilmezse varsayılan (0) ile en başa,
       widgets-row'un bile üstüne düşüyordu — bu yüzden açıkça sıraya eklendi. */
    .top-widgets-wrapper > .widgets-row {
        order: 1;
    }

    .top-widgets-wrapper > .tt-outer-panel {
        order: 2;
    }

    .top-widgets-wrapper > .profit-widgets-row {
        order: 3;
    }

    .top-widgets-wrapper > .tcmb-section {
        order: 4;
    }

    /* Extreme/Trend mini toggle sadece mobil tasarımına ait — masaüstünde iki kart zaten
       yan yana aynı anda görünüyor, JS ne yaparsa yapsın burada kesin gizli kalır. */
    .tt-mini-toggle {
        display: none !important;
    }

    /* İşlem Tipleri dış paneli — masaüstünde taban değerlerden (mobil) daha büyük padding/font/gap.
       Panel arka planı, border'ı, .tt-outer-title'ın display:flex'i ve .tt-card hafifletmesi zaten
       taban kuralda (bkz. yukarıda, medya sorgusu dışında) tanımlı, burada sadece boyutlar büyüyor. */
    .tt-outer-panel {
        border-radius: 14px;
        padding: 14px 16px;
    }

    .tt-outer-title {
        gap: 8px;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

        .tt-outer-title i {
            font-size: 1.05rem;
        }
}

/* Extreme/Trend arası mini ikon toggle — kartın başlık satırının içine gömülü, ayrı bir satır
   kaplamıyor. Varsayılan (JS açılışta ikisi de aktifse flex yapar). */
.tt-mini-toggle {
    display: none;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.tt-tab-btn {
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: transparent;
    border: none;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
}

    .tt-tab-btn.active {
        background: rgba(59, 130, 246, 0.3);
        opacity: 1;
    }

/* Günlük Rapor "Canlı" / "Bir Gün Öncesi" ikon toggle — .tt-mini-toggle/.tt-tab-btn ile aynı görsel
   dilde ama ayrı sınıf isimleri kullanıyor, çünkü .tt-mini-toggle'ın masaüstünde display:none!important
   ve mobilde .tt-tab-hidden gibi kendine özel kuralları var — aynı ismi paylaşsaydı bu kurallar
   yanlışlıkla Günlük Rapor toggle'ını da etkilerdi. Bu toggle hem mobil hem masaüstünde her zaman görünür. */
.dr-toggle {
    display: flex;
    gap: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 2px;
    flex-shrink: 0;
}

.dr-toggle-btn {
    width: 28px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: transparent;
    border: none;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.5;
}

    .dr-toggle-btn.active {
        background: rgba(59, 130, 246, 0.3);
        color: #93c5fd;
        opacity: 1;
    }

@media (max-width: 768px) {
    .dashboard-main > section:not(:last-child) {
        margin-bottom: 0.45rem;
    }

    .top-widgets-wrapper {
        gap: 0.45rem;
        margin-bottom: 0.45rem;
    }

    /* .widgets-row mobilde her zaman boş kalıyor artık — BTC widget'ı JS ile dışarı taşınıyor
       (_relocateBtcWidgetForViewport), Hacim/Sinyal kartları zaten ayrıca gizli. Boş ama hâlâ DOM'da
       duran bir flex öğesi .top-widgets-wrapper'ın "gap"ine dahil olmaya devam edip BTC ile Extreme
       kartı arasına fazladan bir boşluk daha ekliyordu (diğer aralardan farklı görünüyordu) —
       tamamen gizleyerek bu fazladan boşluğu kaldırıyoruz. */
    .widgets-row {
        display: none !important;
    }

    /* Ayarlar modalı mobilde ekrana tam sığması için padding/margin daraltılıyor;
       kart artık kendi içinde dikey kaydırılabiliyor (max-height ile sınırlı) */
    .settings-modal-card {
        padding: 1.25rem !important;
        margin: 0.75rem auto !important;
        max-height: calc(100vh - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
    }

    /* Binance hesabı eşlenmemiş kullanıcıya gösterilen bilgi mesajları (Günlük Rapor / Açık İşlemler) —
       mobilde ortalanmış yerine sola yaslı gösterilsin */
    .unlinked-info-block,
    .unlinked-info-cell {
        text-align: left !important;
    }
}

/* Bazı mobil tarayıcılar (iOS Safari / Chrome), içinde link bulunan uzunca paragrafları
   "okunabilir" varsayıp otomatik olarak yazı boyutunu büyütüyor (text autosizing).
   Bu bloklardaki font boyutu zaten inline stille belirlendiği için otomatik büyütmeyi kapatıyoruz. */
.unlinked-info-block,
.unlinked-info-cell {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

    .unlinked-info-block a,
    .unlinked-info-cell a {
        font-size: inherit;
        font-weight: inherit;
    }

/* Glassmorphism Panel */
.glass-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
    flex-wrap: nowrap;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}

    .logo i {
        color: var(--accent);
        font-size: 1.8rem;
        filter: drop-shadow(0 0 8px var(--accent-glow));
    }

    .logo span {
        color: var(--accent);
        font-weight: 300;
    }

.status-indicators {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

    .indicator.active {
        color: var(--text-main);
    }

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-muted);
}

.indicator.active .dot {
    background-color: var(--success);
    box-shadow: 0 0 10px var(--success);
}

/* Standart Mod göstergesi için .active ile aynı görünüm, ama mobil gizleme kuralını tetiklemesin diye ayrı sınıf */
.indicator.standard-glow {
    color: var(--text-main);
}

    .indicator.standard-glow .dot {
        background-color: var(--success);
        box-shadow: 0 0 10px var(--success);
    }

.indicator.danger .dot {
    background-color: var(--danger);
    box-shadow: 0 0 10px var(--danger);
}

.indicator.danger {
    color: var(--danger);
    font-weight: 600;
}

/* "Sistem Aktif" göstergesi Güvenlik Kilidi / Stop Mode durumundayken — .active sınıfı mobil gizleme
   kuralını tetiklememesi için korunur, sadece renk kırmızıya döner. */
.indicator.active.system-danger {
    color: var(--danger);
    font-weight: 600;
}

    .indicator.active.system-danger .dot {
        background-color: var(--danger);
        box-shadow: 0 0 10px var(--danger);
    }

/* ── Gün Sonu Raporu istatistik kutuları — mobilde sığmayanlar alt satıra sarsın ── */
.rpt-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 8px;
}

.rpt-stat-card {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

    .rpt-stat-card.wide {
        grid-column: span 2;
    }

.rpt-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.rpt-stat-value {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .rpt-stat-value.wide-value {
        font-size: 14px;
    }

@media (max-width: 600px) {
    .rpt-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
        gap: 6px;
    }

    .rpt-stat-card {
        padding: 0.5rem 0.6rem;
    }

    .rpt-stat-label {
        font-size: 9.5px;
        margin-bottom: 3px;
    }

    .rpt-stat-value {
        font-size: 16px;
    }

        .rpt-stat-value.wide-value {
            font-size: 12px;
        }
}

/* Mobilde Extreme, En İyi, En Kötü kutuları kaldırılıyor — kalan 5 kutu (Toplam, Başarılı,
   Zarar, Z. Aşımı, Başarı %) tek satıra sığıyor, .rpt-stats-grid grid olduğu için "order" ile
   DOM'a dokunmadan sıralanabiliyor. Etiketler artık kısaltılmıyor/".." ile kesilmiyor — sığmazsa
   tek satır yerine 2 satıra sarıyor (white-space:normal), böylece hiçbir zaman "..." görünmüyor. */
@media (max-width: 768px) {
    .rpt-stat-extreme,
    .rpt-stat-best,
    .rpt-stat-worst {
        display: none !important;
    }

    .rpt-stats-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .rpt-stat-card {
        padding: 0.5rem 0.3rem !important;
    }

    .rpt-stat-timeout {
        order: 4;
    }

    .rpt-stat-success-rate {
        order: 5;
    }

    .rpt-stat-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 9.5px !important;
        line-height: 1.15;
        word-break: keep-all;
    }

    .rpt-stat-value {
        font-size: 15px !important;
    }
}

@media (max-width: 380px) {
    .rpt-stats-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
    }

    .rpt-stat-card {
        padding: 0.4rem 0.2rem !important;
    }

    .rpt-stat-label {
        font-size: 8.5px !important;
    }

    .rpt-stat-value {
        font-size: 13px !important;
    }
}

.pulsing {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.time-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.3);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Widgets */
.widgets-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Masaüstünde JS (_relocateProfitWidgetsForViewport) Haftalık/Aylık kartlarını Aktif Sinyaller'in
   sağına, bu satırın içine taşıyor — 3 sütun yerine 5 sütun gerekiyor. Mobilde .widgets-row zaten
   !important ile tek sütuna zorlanıyor (bkz. aşağıdaki mobil medya sorgusu) ve JS bu iki kartı
   mobilde tekrar .profit-widgets-row'a geri koyuyor, bu yüzden bu kural sadece masaüstünde etkili. */
@media (min-width: 769px) {
    .widgets-row:has(#widget-weekly-profit) {
        grid-template-columns: 1.3fr 1fr 0.85fr 0.85fr 0.85fr;
    }
}

/* Haftalık/Aylık Kar % kartları — widgets-row'dan AYRI, kendi satırı (bkz. index.html: TCMB
   bölümünden hemen sonra yerleştirildi). Her zaman (mobil dahil) yan yana, 2 sütun. Masaüstünde
   JS ile boşaltılınca bu section 0 yüksekliğe düşer, mobilde iki kart geri buraya taşınır. */
.profit-widgets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.widget {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.3s ease;
}

    /* Küçültülmüş kart varyantı — Aktif Sinyaller, Haftalık Kar %, Aylık Kar % kartları için */
    .widget.widget-compact {
        padding: 1rem;
        gap: 0.85rem;
    }

        .widget.widget-compact .widget-icon {
            width: 44px;
            height: 44px;
            font-size: 1.3rem;
        }

        .widget.widget-compact .widget-data h3 {
            font-size: 0.78rem;
        }

        .widget.widget-compact .widget-data .value {
            font-size: 1.35rem;
        }

    .widget:hover {
        transform: translateY(-5px);
    }

.widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    background: rgba(255,255,255,0.03);
}

.btc-icon {
    color: #f7931a;
    background: rgba(247, 147, 26, 0.1);
}

.vol-icon {
    color: var(--accent);
    background: var(--accent-glow);
}

.signal-icon {
    color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.widget-data h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 5px;
}

.widget-data .value {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

/* Active Trades Section */
.trades-section {
    padding: 1.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    .section-header h2 {
        font-size: 1.2rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .section-header h2 i {
            color: var(--accent);
        }

.badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Table */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th, td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background 0.2s ease;
}

    tbody tr:hover {
        background: rgba(255,255,255,0.02);
    }

.symbol-col {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.side-long {
    background: rgba(0, 184, 148, 0.15);
    color: var(--long-color);
}

.side-short {
    background: rgba(255, 118, 117, 0.15);
    color: var(--short-color);
}

.type-extreme {
    color: #d63031;
}

.type-breakout {
    color: #0984e3;
}

.type-trend {
    color: #fdcb6e;
}

.price-up {
    color: var(--success);
}

.price-down {
    color: var(--danger);
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-style: italic;
    display: none;
}

/* History Section */
.history-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.history-col {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.terminal-box {
    flex: 1;
    background: #05080f;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #a0aec0;
    overflow-y: auto;
    max-height: 350px;
    border: 1px solid rgba(255,255,255,0.02);
}

    .terminal-box::-webkit-scrollbar {
        width: 6px;
    }

    .terminal-box::-webkit-scrollbar-track {
        background: transparent;
    }

    .terminal-box::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }

.terminal-line {
    margin-bottom: 6px;
    line-height: 1.4;
    word-break: break-all;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

tbody tr {
    animation: fadeIn 0.4s ease forwards;
}

/* BTC Performance Grid */
.perf-grid-OLD {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.perf-card-OLD {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: transform 0.2s;
}

    .perf-card-OLD:hover {
        transform: translateY(-2px);
    }

.perf-val-OLD {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

.perf-lbl-OLD {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Dominance Bar */
.dominance-bar-wrap-OLD {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.dominance-bar-fill-OLD {
    height: 100%;
    background: linear-gradient(90deg, #f7931a, #e67e22);
    border-radius: 999px;
    transition: width 0.8s ease;
}

.dominance-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Liquidation Bias */
.liq-box-OLD {
    display: flex;
    justify-content: space-around;
    padding: 1rem 0 0.5rem;
}

.liq-stat-OLD {
    text-align: center;
}

.liq-val-OLD {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.8rem;
    font-weight: 800;
}

.long-stat-OLD .liq-val {
    color: var(--long-color);
}

.short-stat-OLD .liq-val {
    color: var(--short-color);
}

.liq-lbl-OLD {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 4px;
}

.liq-bar-wrap {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.75rem 0 0.3rem;
}

.liq-bar-long {
    background: linear-gradient(90deg, var(--long-color), #00cec9);
    height: 100%;
    transition: width 0.8s ease;
}

.liq-bar-short {
    background: linear-gradient(90deg, #e17055, var(--short-color));
    height: 100%;
    transition: width 0.8s ease;
}

.liq-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}


/* Chart Wrap */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    margin-top: 0.75rem;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.04);
}

    .chart-wrap canvas {
        width: 100% !important;
        height: 100% !important;
    }


/* Market Panel - Yeni Dikey Dizayn */
.market-panel {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Performans Listesi - Dikey */
.perf-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.75rem;
}

.perf-row {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .perf-row .perf-val {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .perf-row .perf-lbl {
        font-size: 0.72rem;
        color: var(--text-muted);
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

/* B y k Grafik Alan  */
.chart-wrap-lg {
    position: relative;
    width: 100%;
    height: 200px;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

    .chart-wrap-lg canvas {
        width: 100% !important;
        height: 100% !important;
    }

/* Dominance B y k De er */
.dom-section {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.dom-value-row {
    padding: 0.3rem 0;
}

.dom-big {
    font-family: "JetBrains Mono", monospace;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-main);
}

/* Liquidation Dikey Liste */
.liq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.liq-list-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.liq-list-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.liq-list-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.long-color {
    color: var(--long-color);
}

.short-color {
    color: var(--short-color);
}


/* EXPLICIT FLEX ORDERING - MARKET PANELS */
.market-panel {
    display: flex !important;
    flex-direction: column !important;
}

    .market-panel > .section-header {
        order: 1 !important;
    }

    .market-panel > .perf-list {
        order: 2 !important;
    }

    .market-panel > .liq-list {
        order: 2 !important;
    }

    .market-panel > .chart-wrap-lg {
        order: 3 !important;
    }

    .market-panel > .dom-section {
        order: 4 !important;
    }

/* Dom section stacked layout */
.dom-section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

    .dom-section > .section-header {
        width: 100% !important;
    }

    .dom-section > .dom-value-row {
        display: block !important;
        width: 100% !important;
    }

.dom-big {
    display: block !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    font-family: "JetBrains Mono", monospace !important;
    line-height: 1.1 !important;
}

.dom-section > .dominance-labels {
    display: flex !important;
    width: 100% !important;
}

/* Perf list explicit vertical */
.perf-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.perf-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Liq list explicit vertical */
.liq-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}


/* Yatay Performans Listesi (Grafi in Alt nda) */
.perf-list.horizontal-perf {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
}

.horizontal-perf .perf-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
}

.horizontal-perf .perf-lbl {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}


/* ── Tarama Tablosu Kompakt Mod ──
   table-layout:fixed kullanıldığında sütun genişlikleri SADECE başlık (th) satırındaki
   "width" değerinden belirlenir — td'ye min/max-width vermek sütunun gerçek payını
   değiştirmez, sadece içeriği görsel olarak kırpar/taşırır. Bu yüzden her sütun grubuna
   hem th hem td üzerinde aynı "width" değeri veriyoruz; ayrıca her hücreye evrensel
   overflow:hidden + ellipsis ekleyerek, pay yetmediğinde metnin komşu hücreye taşıp
   üst üste binmesini (görülen "yazılar birbirine girdi" sorunu) tamamen engelliyoruz. */
#scan-table,
#hot-table {
    font-size: 0.72rem !important;
    white-space: nowrap;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    min-width: 1000px;
}

    #scan-table th,
    #scan-table td,
    #hot-table th,
    #hot-table td {
        padding: 0.45rem 0.5rem !important;
        font-size: 0.72rem !important;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #scan-table th,
    #hot-table th {
        font-size: 0.65rem !important;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

        /* İlk sütun (SYMBOL) */
        #scan-table th:first-child,
        #hot-table th:first-child,
        #scan-table td:first-child,
        #hot-table td:first-child {
            width: 105px;
        }

        /* 2. PRICE */
        #scan-table th:nth-child(2), #hot-table th:nth-child(2),
        #scan-table td:nth-child(2), #hot-table td:nth-child(2) {
            width: 85px;
        }
        /* 3. R15 */
        #scan-table th:nth-child(3), #hot-table th:nth-child(3),
        #scan-table td:nth-child(3), #hot-table td:nth-child(3) {
            width: 48px;
        }
        /* 4. R5 */
        #scan-table th:nth-child(4), #hot-table th:nth-child(4),
        #scan-table td:nth-child(4), #hot-table td:nth-child(4) {
            width: 48px;
        }
        /* 5. R2 */
        #scan-table th:nth-child(5), #hot-table th:nth-child(5),
        #scan-table td:nth-child(5), #hot-table td:nth-child(5) {
            width: 38px;
        }
        /* 6. PADX */
        #scan-table th:nth-child(6), #hot-table th:nth-child(6),
        #scan-table td:nth-child(6), #hot-table td:nth-child(6) {
            width: 48px;
        }
        /* 7. ADX */
        #scan-table th:nth-child(7), #hot-table th:nth-child(7),
        #scan-table td:nth-child(7), #hot-table td:nth-child(7) {
            width: 45px;
        }
        /* 8. VOL-R */
        #scan-table th:nth-child(8), #hot-table th:nth-child(8),
        #scan-table td:nth-child(8), #hot-table td:nth-child(8) {
            width: 52px;
        }
        /* 9. P-VOL */
        #scan-table th:nth-child(9), #hot-table th:nth-child(9),
        #scan-table td:nth-child(9), #hot-table td:nth-child(9) {
            width: 52px;
        }
        /* 10. VWAP */
        #scan-table th:nth-child(10), #hot-table th:nth-child(10),
        #scan-table td:nth-child(10), #hot-table td:nth-child(10) {
            width: 40px;
        }
        /* 11. ATR */
        #scan-table th:nth-child(11), #hot-table th:nth-child(11),
        #scan-table td:nth-child(11), #hot-table td:nth-child(11) {
            width: 42px;
        }
        /* 12. G-VOL */
        #scan-table th:nth-child(12), #hot-table th:nth-child(12),
        #scan-table td:nth-child(12), #hot-table td:nth-child(12) {
            width: 58px;
        }

        /* DI sütunları (13, 14) */
        #scan-table th:nth-last-child(n+4):nth-last-child(-n+5),
        #hot-table th:nth-last-child(n+4):nth-last-child(-n+5),
        #scan-table td:nth-last-child(n+4):nth-last-child(-n+5),
        #hot-table td:nth-last-child(n+4):nth-last-child(-n+5) {
            width: 95px;
        }

        /* Son 3 sütun (E-15D, E-1H, BTC) — dar ve ortalı */
        #scan-table th:nth-last-child(-n+3),
        #hot-table th:nth-last-child(-n+3),
        #scan-table td:nth-last-child(-n+3),
        #hot-table td:nth-last-child(-n+3) {
            text-align: center;
            width: 46px;
        }

        /* NOT: "E-15D" başlığı 42px'lik sütunda genel th padding'i (0.45rem 0.5rem) ile birlikte
   sığmıyor, "E-1..." / "E-..." şeklinde kesiliyordu (table-layout:fixed altında th/td aynı
   sütun genişliğini paylaşıyor, sadece padding farklılaştırılabiliyor). Sütunu biraz
   genişletip (42→46px) SADECE başlık (th) yatay padding'ini daraltarak metne daha fazla
   yer açıyoruz; veri hücreleri (▲/▼ ok simgeleri) zaten dar yer kaplıyor, onlara dokunmadık. */
        #scan-table th:nth-last-child(-n+3),
        #hot-table th:nth-last-child(-n+3) {
            padding-left: 0.2rem !important;
            padding-right: 0.2rem !important;
        }

/* Dashboard max-width genişlet */
.dashboard {
    max-width: 1600px !important;
}

/* Footer'daki dil butonu sadece mobilde görünür (masaüstünde header'dakini kullanıyoruz) */
.footer-lang-btn {
    display: none;
}

/* EKLENDİ (24.08.2026, kullanıcı talebi: "sütunları alt alta gelecek şekilde hizalar mısın") —
   İşlem Detayları (Günlük Rapor) satırlarında .trade-detail-sym/-price/-time sınıfları şimdiye
   kadar SADECE mobil medya sorgusunda (ve orada da sadece sym/time — price zaten gizli) min-width
   alıyordu. Masaüstünde price sütunu görünür olduğundan ve sembol uzunlukları (STORJUSDT/TUTUSDT
   gibi) farklı olduğundan sonraki sütunlar satırdan satıra hizasız duruyordu. Bu blok masaüstünde
   aynı üç sütuna sabit min-width veriyor — app.js'teki inline style'a dokunulmadı (orada zaten
   min-width yok), bu yüzden hiçbir özgüllük/!important çakışması yok. */
@media (min-width: 769px) {
    .trade-detail-sym {
        min-width: 82px;
    }

    .trade-detail-price {
        min-width: 132px;
    }

    .trade-detail-time {
        min-width: 56px;
    }
}

/* ═══════════════════════════════════════════════════════
   MOBİL RESPONSIVE — 768px ve altı
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Dashboard padding küçült.
       GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "yukarıda işaretlediğim boşluk aşağıda
       işaretlediğim ile aynı olsun" — header ile BTC widget kartı arasındaki boşluk, BTC widget
       ile mobil fiyat şeridi arasındaki boşlukla eşleşmiyordu) — header/dashboard-main arası boşluk
       bu "gap" değerinden geliyor (0.75rem), oysa sayfadaki DİĞER TÜM kart arası boşluklar
       (.dashboard-main > section, .top-widgets-wrapper, #widget-btc'nin kendi margin-bottom'u)
       zaten tutarlı şekilde 0.45rem kullanıyor. Buradaki gap de aynı standarda (0.45rem) çekildi. */
    .dashboard {
        padding: 0.75rem !important;
        gap: 0.45rem !important;
    }

    /* ── Header ── */
    header {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .logo {
        font-size: 1.1rem;
        gap: 8px;
    }

        .logo i {
            font-size: 1.3rem;
        }

    #version-tag {
        display: none;
    }

    .status-indicators {
        width: 100%;
        gap: 0.6rem;
        flex-wrap: wrap;
        font-size: 0.78rem;
    }

    .indicator {
        font-size: 0.78rem;
        gap: 5px;
    }

    .time-display {
        font-size: 0.72rem;
        padding: 4px 8px;
    }

    /* TCMB kurları — USD sola EUR sağa */
    #tcmb-rates {
        font-size: 0.62rem !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        width: 100%;
        gap: 0;
    }

        #tcmb-rates #tcmb-usd {
            text-align: left;
        }

        #tcmb-rates #tcmb-eur {
            text-align: right;
        }

    /* İşlem Detayları (Günlük Rapor) — mobilde giriş→çıkış fiyat sütunu kaldırılıyor, kalan
       sütunlar (sembol, saat, PNL) yatay kaydırmaya gerek kalmadan hizalı sığıyor. Sembol
       sütununa sabit min-width verildi ki farklı uzunluktaki semboller (LABUSDT/BCHUSDT gibi)
       sonraki sütunları kaydırmasın.
       GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "mobilde sütunları biraz sıkıştır, sığmadı
       ekrana") — masaüstü hizalama için app.js'e eklenen WIN/SL rozeti, Extreme/Trend rozeti,
       yön oku ve PNL min-width'leri (26/60/14/52px) mobilde satırı ekrana sığmaz hale getirdi
       (PNL değeri kırpılıyordu). Bu öğelere şimdi sınıf var (trade-detail-badge/-type/-arrow/-pnl,
       satırın kendisi de trade-detail-row) — inline min-width'ler masaüstü değeri olarak kalıyor,
       burada !important ile daha dar mobil değerlere düşürülüyor; satır gap/padding'i de sıkılaştı. */
    .trade-detail-row {
        gap: 4px !important;
        padding: 4px 5px !important;
    }

    .trade-detail-badge {
        min-width: 20px !important;
    }

    .trade-detail-type {
        min-width: 42px !important;
        padding: 1px 4px !important;
    }

    .trade-detail-arrow {
        min-width: 10px !important;
    }

    .trade-detail-pnl {
        min-width: 42px !important;
    }

    .trade-detail-price {
        display: none !important;
    }

    .trade-detail-sym {
        min-width: 68px;
    }

    .trade-detail-time {
        min-width: 46px;
    }

    /* ── Widget Row: tek sütun ── */
    .widgets-row {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    .widget {
        padding: 1rem;
        gap: 1rem;
    }

    .widget-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .widget-data .value {
        font-size: 1.4rem !important;
    }

    .widget-data h3 {
        font-size: 0.78rem;
    }

    /* Mobilde Haftalık/Aylık Başarı (ve Aktif Sinyaller) kartları daha da küçültülüyor — yukarıdaki
       genel ".widget-data .value" kuralı !important olduğu için buradaki de !important olmak zorunda,
       aksi halde kazanamaz. */
    .widget.widget-compact {
        padding: 0.7rem !important;
        gap: 0.6rem !important;
    }

        .widget.widget-compact .widget-icon {
            width: 32px !important;
            height: 32px !important;
            font-size: 1rem !important;
        }

        .widget.widget-compact .widget-data h3 {
            font-size: 0.68rem !important;
        }

        .widget.widget-compact .widget-data .value {
            font-size: 1.05rem !important;
        }

    /* ── Aktif İşlemler Tablosu: yatay kaydır ── */
    .trades-section {
        padding: 1rem;
    }

    .section-header h2 {
        font-size: 1rem;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    th, td {
        padding: 0.6rem 0.5rem;
        font-size: 0.78rem;
    }

    th {
        font-size: 0.65rem;
    }

    /* ── Scan / Hızlı Radar Tablosu ──
       table-layout:fixed + width:100% birlikteyken bazı mobil taray覺c覺larda tablo
       min-width'i görmezden gelip container genişliğine (viewport) sığdırıyor, bu da
       tüm hücrelerin aşırı daralıp "..." ile kesilmesine sebep oluyordu ve yatay kaydırma
       hiç çalışmıyordu. width'i yüzde yerine SABİT piksel yaparak bu belirsizliği kaldırıyoruz —
       böylece tablo container'ından taşmak ZORUNDA kalır ve overflow-x:auto devreye girer. */
    #scan-table,
    #hot-table {
        width: 1000px;
        min-width: 1000px;
    }

    /* Scan container scroll */
    .trades-section .table-container[style*="max-height"] {
        max-height: 400px !important;
    }

    /* Sync status gizle */
    #sync-status-container {
        display: none !important;
    }

    /* ── Günlük Rapor ── */
    .glass-panel[style*="padding: 1.5rem"] {
        padding: 1rem !important;
    }

    #daily-report-content {
        font-size: 0.8rem !important;
    }

    /* EKLENDİ (20.08.2026, kullanıcı talebi: "mobilde de güncelleyelim") — Günlük Rapor'daki
       "🏦 BİNANCE BORSASI" hesap kartları (.acct-row-card / .acct-row-name / .acct-row-stats /
       .acct-row-profit, bkz. app.js renderDailyReport). Masaüstünde (bkz. "web tarafında tek satır
       yapabilir miyiz" talebi) kart tek satır flex-row olarak tasarlandı (isim + Net/Brüt/Fee +
       Bakiye/Günlük Kâr yan yana), ancak dar ekranda bu tek satır sığmayıp taşacağı için mobilde
       tekrar alt alta (column) düzene dönülüyor. Inline style ile aynı özellikler zaten set
       edildiği için !important gerekiyor.
       GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "tüm sütunlar alt alta gelecek şekilde
       hizalayalım") — masaüstü tasarım artık inline style'da display:flex değil display:grid
       (sabit sütun genişlikleriyle satırlar arası hizalama için). Bu yüzden mobildeki
       flex-direction/gap override'ları artık grid bağlamında hiçbir şey yapmaz — mobilde eski
       (dar ekranda taşmayan, alt alta dizilen) davranışı korumak için display:flex !important
       eklendi, grid-template-columns'u geçersiz kılmaya gerek yok çünkü display değişince zaten
       kullanılmıyor. */
    .acct-row-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.4rem 0.5rem !important;
        margin-bottom: 0.35rem !important;
        row-gap: 0.25rem !important;
    }

    .acct-row-name {
        max-width: 100% !important;
        font-size: 0.75rem !important;
    }

    .acct-row-stats,
    .acct-row-profit {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.55rem !important;
        font-size: 0.7rem !important;
    }

    /* ── Market Overview: mobilde tamamen gizli (BTC Performance + Bitcoin Dominance + Liquidation
       Bias) — kullanıcı isteği üzerine. Alttaki grid kuralları artık görünmüyor ama zararsız,
       silinmedi. Elemanlar DOM'da kalmaya devam ediyor (JS hâlâ dolduruyor), sadece görsel gizli. */
    .history-section {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .history-col {
        padding: 1rem;
    }

    /* BTC grafik boyutu */
    .chart-wrap-lg {
        height: 150px !important;
    }

    /* Performans listesi daha sıkışık */
    .horizontal-perf .perf-val {
        font-size: 0.85rem !important;
    }

    .horizontal-perf .perf-lbl {
        font-size: 0.65rem !important;
    }

    /* Dominance büyük rakam küçült */
    .dom-big {
        font-size: 2rem !important;
    }

    /* Liq values */
    .liq-list-val {
        font-size: 1.1rem !important;
    }

    /* Footer */
    footer {
        padding: 1rem !important;
        font-size: 0.75rem !important;
    }
}

/* ═══════════════════════════════════════════════════════
   KÜÇÜK MOBİL — 480px ve altı
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .logo h1 {
        font-size: 1rem;
    }

    /* Header sadece logo + zaman göster */
    .indicator:not(.active) {
        display: none;
    }

    /* Widget tek sütun, daha küçük */
    .widget-data .value {
        font-size: 1.2rem !important;
    }

    /* Scan tablo badge */
    #scan-badge {
        font-size: 0.7rem;
        padding: 3px 7px;
    }

    /* Section header düzelt */
    .section-header {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

        .section-header > div[style*="margin-left: auto"] {
            margin-left: 0 !important;
            width: 100%;
        }

    /* EKLENDİ (20.08.2026) — çok dar ekranlarda (≤480px) Bakiye ve Günlük Kâr öğeleri aynı satırda
       sıkışmasın diye alt alta iner; ilerleme çubuğu satırı da kendi genişliğinde kalır. */
    .acct-row-profit {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
    }
}

/* ── Mobil Element Sıralama (main flex column) ── */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Desktop: normal akış */
#widgets-row {
    order: 1;
}

.trades-section {
    order: 2;
}

#daily-report-section {
    order: 3;
}

.history-section {
    order: 4;
}

@media (max-width: 768px) {
    .main-content {
        gap: 0.75rem;
    }

    /* BTC widget'ı en üstte kalır */
    #widget-btc {
        order: 1;
    }
    /* Hacim ve Sinyal widget'ları rapor'un altına iner */
    #widget-vol {
        order: 2;
    }

    #widget-signals {
        order: 3;
    }

    /* Mobil sıralama:
       1. BTC widget (tek başına)
       2. Açık İşlemler
       3. Tarama Listesi
       4. Günlük Rapor
       5. Hacim + Sinyal (widgets-row'dan)
       6. Market Panels
    */
    #widgets-row {
        display: flex !important;
        flex-direction: column !important;
        order: 1;
    }

    /* BTC widget normal, diğer ikisi rapor sonrasına gider */
    #widget-btc {
        order: 1;
    }

    #widget-vol {
        order: 10;
    }

    #widget-signals {
        order: 11;
    }

    /* Ama widgets-row bir bütün olarak taşındığı için
       sadece aktif işlemler + tarama + raporu önce gösterelim */
    #widgets-row {
        order: 5;
    }

    .trades-section:nth-of-type(1) {
        order: 1;
    }

    .trades-section:nth-of-type(2) {
        order: 2;
    }

    #daily-report-section {
        order: 3;
    }

    .history-section {
        order: 6;
    }
}

/* ═══════════════════════════════════════════════════════
   MOBİL SIRALAMA — main-content flex column
   ═══════════════════════════════════════════════════════ */

.main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Desktop: ikincil widget row ve mobile-hidden gizli */
.desktop-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .main-content {
        gap: 0.75rem;
    }

    /* Sıralama:
       1. BTC Widget (sadece BTC, hacim+sinyal gizli)
       2. Açık İşlemler
       3. Tarama Listesi
       4. Günlük Rapor
       5. Hacim + Sinyal (ikincil widgets-row, mobilde göster)
       6. BTC Performance + Liquidation
    */
    .mobile-order-1 {
        order: 1;
    }

    .mobile-order-2 {
        order: 2;
    }

    .mobile-order-3 {
        order: 3;
    }

    .mobile-order-4 {
        order: 4;
    }

    .mobile-order-5 {
        order: 5;
    }

    .mobile-order-6 {
        order: 6;
    }

    /* Desktop'ta gizli, mobilde göster */
    .desktop-hidden {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.6rem !important;
    }

    /* Orijinal widgets-row'daki hacim+sinyal gizle */
    .mobile-hidden {
        display: none !important;
    }

    /* BTC widget tek başına tam genişlik */
    .mobile-btc-only {
        width: 100%;
    }

    /* İkincil widget row: 2 sütun */
    .mobile-secondary-widgets {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (min-width: 769px) {
    /* Desktop'ta mobile-hidden göster */
    .mobile-hidden {
        display: flex !important;
    }

    .mobile-order-1, .mobile-order-2, .mobile-order-3,
    .mobile-order-4, .mobile-order-5, .mobile-order-6 {
        order: unset;
    }
}

/* ── USD/EUR Mobil: BTC widget altına taşı ── */
@media (max-width: 768px) {

    #tcmb-rates-mobile {
        display: flex !important;
        gap: 1rem;
        font-size: 0.75rem;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-muted);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        width: 100%;
    }

        #tcmb-rates-mobile span {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        #tcmb-rates-mobile .rate-label {
            font-size: 0.65rem;
            opacity: 0.6;
            letter-spacing: 0.5px;
        }

        #tcmb-rates-mobile .rate-val {
            font-size: 0.82rem;
            color: var(--text-main);
            font-weight: 600;
        }
}

@media (min-width: 769px) {
    #tcmb-rates-mobile {
        display: none !important;
    }
}

/* ── BTC Widget Mobil Düzeltme ── */
@media (max-width: 768px) {
    #widget-btc {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    /* JS (_relocateBtcWidgetForViewport) BTC kartını mobilde en üste, "İşlem Tipleriniz" kutusunun
       üstüne, .dashboard-main'in doğrudan çocuğu olarak taşıyor — <section> olmadığı için otomatik
       section-margin kuralı ona uygulanmıyor, burada elle ekliyoruz. */
    .dashboard-main > #widget-btc {
        margin-bottom: 0.45rem;
    }

    #widget-btc .widget-icon {
        margin-top: 2px;
    }

    #tcmb-rates-mobile {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.2rem;
        margin-top: 0.6rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        width: 100%;
    }

        #tcmb-rates-mobile span {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        #tcmb-rates-mobile .rate-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            letter-spacing: 0.3px;
        }

        #tcmb-rates-mobile .rate-val {
            font-size: 0.78rem;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
            font-weight: 600;
        }
}

/* tcmb-rates-mobile: desktop'ta gizle, mobilde göster */
#tcmb-rates-mobile {
    display: none;
}

@media (max-width: 768px) {
    #tcmb-rates-mobile {
        display: flex !important;
    }
}

/* Hızlı Radar mobil sıralaması */
@media (max-width: 768px) {
    .mobile-order-2b {
        order: 2;
    }

    .trades-section.mobile-order-3 {
        order: 3;
    }

    .trades-section.mobile-order-2 {
        order: 1;
    }
}

/* Hot table sütun boşluk düzeltmesi — unified kurallar yukarıda */

/* ── Özel Scrollbar Stilleri ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.22);
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

/* DI ve son sütun kuralları unified yukarıda */

/* Scan tablosu son sütun kuralları unified yukarıda */

/* ── Mobil: Widget ve Header Düzenlemeleri ── */
@media (max-width: 768px) {

    /* BTC Hacim Oranı ve Aktif Sinyaller gizle */
    #widget-vol,
    #widget-signals {
        display: none !important;
    }

    /* AI Console başlığı ortala ve büyüt */
    .logo {
        width: 100%;
        justify-content: center !important;
        font-size: 1.4rem !important;
        gap: 10px !important;
    }

        .logo h1 {
            font-size: 1.4rem !important;
        }

        .logo i {
            font-size: 1.6rem !important;
        }

    /* Header flex-wrap ile logo tam satır */
    header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ── Mobil Header 3 satır ── */
@media (max-width: 768px) {
    header {
        flex-direction: column !important;
        align-items: stretch !important;
        /* En üstte bir satır kadar ekstra boşluk — padding-top diğerlerinden fazla */
        padding: 1.6rem 1rem 0.75rem;
        gap: 0.4rem;
    }

    /* Satır 1: Logo — AI BotConsole'dan sonra bir satır daha boşluk.
       GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "Trading Dashboard'dan sonra 1 satır daha
       boşluk ekleyelim") — logo bloğu robot ikonu + marka adı + başlık + "Trading Dashboard"
       alt yazısıyla bitiyor (version-tag mobilde zaten gizli), bu yüzden bu margin-bottom zaten
       doğrudan alt yazının hemen altındaki boşluk. Bir satır daha eklemek için 0.75rem'den
       1.75rem'e çıkarıldı. */
    .logo {
        margin-bottom: 1.75rem;
    }

    /* Satır 2: Durum göstergeleri + kullanıcı tek satır */
    .status-indicators {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem;
        font-size: 0.78rem;
    }

    .indicator {
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    .time-display {
        font-size: 0.72rem !important;
        padding: 3px 7px !important;
        white-space: nowrap;
    }

    #user-info {
        margin-left: auto !important;
        border-left: none !important;
        padding-left: 0 !important;
        gap: 5px !important;
        flex-shrink: 0;
    }

        #user-info #user-name {
            font-size: 0.75rem !important;
        }

        #user-info #user-role {
            font-size: 0.62rem !important;
        }

        #user-info button, #user-info a {
            padding: 2px 6px !important;
            font-size: 0.7rem !important;
        }

        /* EN/TR dil butonu mobilde header'dan kaldırılıp footer'a taşındı */
        #user-info .lang-toggle-btn {
            display: none !important;
        }

    /* "Hakkında" (ℹ️) ikonu mobilde header satırına sığmıyordu, başlığın yanına taşıma denemesi
       de büyük/uygunsuz göründü — mobilde tamamen kaldırıldı, sadece masaüstünde görünür kalır. */
    #header-about-bot-btn {
        display: none !important;
    }

    /* "İşlem Tipleriniz" kutuları artık mobilde de gösteriliyor — TCMB'nin yerine geçiyor
       (tek kart + Extreme/Trend arası sekmeli geçiş, bkz. .tt-mobile-tabs). Görünürlük hâlâ
       JS'teki loadTradeTypeCards() tarafından yönetiliyor (section.style.display), burada
       sadece mobil düzen (dikey, tam genişlik) ayarlanıyor — display zorlanmıyor. */
    .trade-type-cards-section {
        flex-direction: column;
    }

        .trade-type-cards-section > div[id^="trade-type-card-"] {
            min-width: 0 !important;
            width: 100%;
        }

    /* TCMB Döviz Kurları — mobilde yerini "İşlem Tipleriniz" kutusuna bıraktı */
    .tcmb-section {
        display: none !important;
    }

    /* Liquidation Bias (Market Overview'ın sağ paneli) — mobilde kaldırıldı, BTC Performance
       tek başına tam genişlikte kalıyor. Öğeler DOM'da kalmaya devam ediyor (JS hâlâ dolduruyor),
       sadece görsel olarak gizli. */
    .liq-bias-panel {
        display: none !important;
    }

    /* Likidasyon Haritası (heatmap) bölümü — mobilde gizlendi, kullanıcı isteği üzerine. Öğeler
       DOM'da kalmaya devam ediyor (JS hâlâ dolduruyor/toggleSectionCollapse çalışıyor), sadece
       görsel olarak gizli. */
    .liq-heatmap-section {
        display: none !important;
    }

    /* Extreme/Trend arası sekmeli geçiş — sadece ikisi de aktifse JS ile flex yapılıyor */
    .tt-tab-hidden {
        display: none !important;
    }

    /* İşlem Tipleri kartı — mobilde az yer kaplayan sıkı yerleşim (Tasarım 3): ayrı sekme satırı
       yok, geçiş kartın başlığına gömülü mini toggle ile yapılıyor (bkz. .tt-mini-toggle). */
    .tt-card {
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    .tt-card-head {
        margin-bottom: 6px !important;
        gap: 6px !important;
    }

    .tt-card-icon {
        font-size: 0.9rem !important;
    }

    .tt-card-title {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    .tt-card-badge {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
    }

    .tt-card-info-btn {
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }

    .tt-card-stats {
        gap: 5px !important;
    }

    .tt-stat-box {
        padding: 5px 6px !important;
        border-radius: 7px !important;
    }

    .tt-stat-label {
        font-size: 0.6rem !important;
    }

    .tt-stat-value {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    .footer-lang-btn {
        display: inline-block !important;
    }

    /* Satır 3: TCMB kurları tek satır */
    #tcmb-rates {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.2rem;
        font-size: 0.72rem !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
        width: 100%;
    }

        #tcmb-rates span {
            display: inline !important;
            white-space: nowrap;
        }

    /* Çıkış butonu taşmasın */
    #user-info {
        flex-shrink: 0;
        max-width: fit-content;
    }
}

@media (max-width: 768px) {
    #last-update {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #tcmb-rates {
        font-size: 0.62rem !important;
        gap: 0.6rem !important;
        letter-spacing: -0.2px;
    }
}

@media (max-width: 768px) {
    #user-role {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .logo h1 {
        font-size: 1.6rem !important;
    }

    .logo i {
        font-size: 1.8rem !important;
    }

    .logo {
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .mobile-hide-text {
        display: none !important;
    }

    /* BTC widget mobilde yatay kompakt */
    #widget-btc {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0.9rem 1rem !important;
    }

        #widget-btc .widget-icon {
            width: 44px !important;
            height: 44px !important;
            flex-shrink: 0;
        }

        #widget-btc .widget-data {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }

        #widget-btc .value {
            font-size: 1.4rem !important;
        }

        /* % / fiyat / Live+grafik satırı: sıra hep aynı, sığmazsa alt satıra sarar (kırpılmaz) */
        #widget-btc .btc-live-row {
            flex-wrap: wrap !important;
            gap: 0.5rem !important;
            row-gap: 4px !important;
        }

        #widget-btc .value {
            order: 1 !important;
        }

        #widget-btc #btc-price {
            order: 2 !important;
            font-size: 1rem !important;
        }

        #widget-btc .btc-live-row > div {
            order: 3 !important;
        }
}

@media (max-width: 480px) {
    #widget-btc .value {
        font-size: 1.15rem !important;
    }

    #widget-btc #btc-price {
        font-size: 0.9rem !important;
    }
    /* Sabit genişlik kaldırıldı — grafik burada da satırın kalan boşluğunu doldursun */
    #widget-btc #btc-sparkline {
        height: 20px !important;
    }
}

@media (max-width: 768px) {
    .section-header {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.4rem;
    }
        /* GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "Açık İşlemler, Coin Sorgula, Hızlı Radar, Canlı
       Tarama Listesi, Günlük Rapor yazılarını biraz ufaltır mısın") — bu kural, Günlük Rapor da dahil
       tüm bölüm başlıklarını (section-header h2) tek noktadan yönetiyor (hepsi aynı class yapısını
       kullanıyor), bu yüzden tek satırlık değişiklik hepsini birden küçültüyor.
       GÜNCELLENDİ (24.08.2026, kullanıcı talebi: "info butonları çok ayrık kaldı onları yaklaştır")
       — başlık metni küçülünce, .section-header h2'nin masaüstü için tasarlanmış sabit gap:10px'i
       (bkz. üstteki temel kural, satır ~618) artık orantısız/geniş görünüyordu; info ikonunun
       KENDİ inline "margin-left:6px"i de bu gap'in üstüne binip onu asıl komşularından daha da
       ayırıyordu. Mobilde gap küçültüldü ve h2 içindeki TÜM ikonların (baştaki + info) inline
       margin-left'i sıfırlandı — aralık artık sadece gap'ten geliyor, tutarlı ve daha sıkı. */
        .section-header h2 {
            font-size: 0.86rem !important;
            white-space: nowrap;
            min-width: 0;
            flex-shrink: 1;
            overflow: hidden;
            gap: 5px !important;
        }

            .section-header h2 i {
                margin-left: 0 !important;
            }
            /* Daralt/Genişlet butonu eklendikten sonra: başlık metni mobilde gerekirse
       "..." ile kısalsın, böylece rozet (badge) ve buton hiçbir zaman dışarı
       taşmaz/kesilmez — .section-header nowrap kaldığı için bu şart. */
            .section-header h2 span[data-i18n] {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                min-width: 0;
            }

            .section-header h2 > i {
                flex-shrink: 0;
            }

        .section-header .badge,
        .section-header > button[onclick*="toggleSectionCollapse"] {
            flex-shrink: 0;
        }
}

/* ── Mobil: Açık İşlemler sadeleştirme ── */
@media (max-width: 768px) {
    /* Stop(6), TP2(8), TP3(9) gizle — SEMBOL|YÖN|GİRİŞ|DURUM|PNL|TP1|HESAP kalır */
    #active-trades-table th:nth-child(6),
    #active-trades-table td:nth-child(6),
    #active-trades-table th:nth-child(8),
    #active-trades-table td:nth-child(8),
    #active-trades-table th:nth-child(9),
    #active-trades-table td:nth-child(9) {
        display: none !important;
    }

    /* Font küçült */
    #active-trades-table th,
    #active-trades-table td {
        font-size: 0.70rem !important;
        padding: 0.4rem 0.35rem !important;
    }
}

@media (max-width: 768px) {
    /* Aktif işlemler % bilgilerini gizle */
    #active-trades-table .pct-info {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .pct-info {
        display: none !important;
    }

    /* SEMBOL sütunu overflow fix */
    #active-trades-table td:first-child,
    #active-trades-table th:first-child {
        max-width: 55px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Açık İşlemler — Hızlı Radar ile aynı font boyutları */
#active-trades-table {
    font-size: 0.72rem !important;
    white-space: nowrap;
}

    #active-trades-table th,
    #active-trades-table td {
        padding: 0.45rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    #active-trades-table th {
        font-size: 0.65rem !important;
        letter-spacing: 0.3px;
    }

@media (max-width: 768px) {
    #active-trades-table td:first-child {
        font-size: 0.68rem !important;
        max-width: 50px !important;
        font-weight: 600;
    }

    #active-trades-table .symbol-col i {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* İkon boyutu "Extreme İşlem Ayarları" başlığındaki ikonla (.tt-card-icon, 0.9rem) aynı yapıldı */
    #widget-btc .btc-icon {
        background: none !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Logo yazısını değiştir */
    .logo h1 .logo-text-web {
        display: none;
    }

    .logo h1 .logo-text-mobile {
        display: inline;
    }

    /* Satır boşluğu */
    .logo {
        margin-bottom: 0.4rem;
    }
}

@media (min-width: 769px) {
    .logo h1 .logo-text-mobile {
        display: none;
    }

    .logo h1 .logo-text-web {
        display: inline;
    }
}

@media (max-width: 768px) {
    /* Açık işlem yoksa bölümü küçült */
    .trades-section:has(#active-trades-body tr.empty-row),
    .trades-section:has(#active-trades-body td[colspan]) {
        padding-bottom: 0.5rem !important;
    }

    #active-trades-body td[colspan] {
        padding: 0.6rem !important;
        font-size: 0.75rem !important;
    }

    .table-container:has(#active-trades-body td[colspan]) {
        min-height: unset !important;
        max-height: 60px !important;
    }
}

/* market overview mobile - visible */

/* ── Safari Scroll Fix ──
   html/body artık kendisi kaydırılmıyor (overflow:hidden) — gerçek kaydırma
   #login-overlay ve #dashboard-scroll-wrapper gibi sabit (position:fixed)
   iç kapsayıcılar üzerinden yapılıyor. Böylece belge (document) seviyesinde
   "rubber-band" (esneme) oluşmuyor ve Safari'nin sayfayı yenileyen
   pull-to-refresh hareketi tetiklenemiyor. */
html {
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body {
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overscroll-behavior: contain;
}

/* Safari elastic scroll çöküşünü önle */
.dashboard {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
    overscroll-behavior: contain;
}

/* Table container overflow Safari fix */
.table-container {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    -webkit-transform: translateZ(0);
    overscroll-behavior: contain;
}

/* Canvas Safari fix */
canvas {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fixed/sticky elementlerin Safari'de titremesini önle */
header {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}