: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);
    }

/* ── Onay Bekleyenler Tablosu (13.09.2026, kullanıcı talebi: "tablodaki verileri birbirine
   yaklaştır") ── Sadece 3 sütunlu (SEMBOL/YÖN/MUM TAKİBİ) bu tablo, genel "table { width:100%; }"
   kuralı yüzünden masaüstünde TÜM kart genişliğine yayılıp sütunlar arasında dev boşluklar
   oluşturuyordu (bkz. ekran görüntüsü). table-layout:fixed + her sütuna sabit, İÇERİĞE YETECEK
   KADAR piksel genişlik verilerek sütunlar sola, birbirine yakın toplanıyor; width:auto olduğu
   için tablo kartın tamamını KAPLAMIYOR.
   GÜNCELLEME (13.09.2026, kullanıcı talebi: "sağ tarafına kriterleri onaylandığında ki değerlerini
   sırası ile buraya dizelim") — sağda ayrılan boşluk artık 4. sütun (KRİTERLER: RSI15/ADX/VOL-R
   eşik çubukları + kayıt saati + Grafik butonu, bkz. renderConfirmPendingTable app.js) tarafından
   kullanılıyor. Mobilde (bkz. @media max-width:768px altındaki #confirm-pending-table kuralı, SONRA
   tanımlandığı için kazanır) yüzdesel/tam-genişlik davranış korunuyor, 4. sütun orada sadece
   Grafik ikonuna indirgeniyor (bkz. .cpk-bars mobil gizleme kuralı). */
#confirm-pending-table {
    width: auto;
    table-layout: fixed;
}

    #confirm-pending-table th:nth-child(1), #confirm-pending-table td:nth-child(1) {
        width: 170px;
    }

    #confirm-pending-table th:nth-child(2), #confirm-pending-table td:nth-child(2) {
        width: 110px;
    }

    #confirm-pending-table th:nth-child(3), #confirm-pending-table td:nth-child(3) {
        width: 260px;
    }
    /* GÜNCELLEME (13.09.2026, kullanıcı talebi: "kriterlere RSI5 ide ekler misin") — 3. göstergeden
   4. göstergeye çıkınca aynı tek satırda yer açmak için genişlik artırıldı (330px -> 400px). */
    #confirm-pending-table th:nth-child(4), #confirm-pending-table td:nth-child(4) {
        width: 400px;
    }
    /* Mobil "detay aç/kapa" oku (.cpk-mobile-chevron) ve onun açtığı tam-genişlik satır (.cpk-detail-row)
   masaüstünde hiç kullanılmıyor — kriterler zaten satırın kendi hücresinde görünür durumda. */
    #confirm-pending-table .cpk-mobile-chevron {
        display: none;
    }

    #confirm-pending-table .cpk-detail-row {
        display: none;
    }

.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;
    }

    /* ── Onay Bekleyenler Tablosu (12.09.2026, kullanıcı talebi: "mobilde hücreleri
       yaklaştırır mısın sağa kaydırmaya gerek kalmadan ekrana sığsın") ──
       Yukarıdaki genel "table { min-width: 600px; }" kuralı TÜM tablolara uygulanıyor —
       bu, sadece 3 sütunlu (SEMBOL/YÖN/MUM TAKİBİ) bu küçük tabloyu da gereksiz yere 600px
       genişliğe zorlayıp dar mobil ekranlarda yatay kaydırma gerektiriyordu. Bu tablo
       Hızlı Radar/Scan gibi çok sütunlu DEĞİL — table-layout:fixed + yüzdesel sütun
       genişlikleriyle HER ZAMAN viewport'a (container genişliğine) sığması sağlanıyor,
       kaydırmaya hiç gerek kalmıyor. */
    #confirm-pending-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

        #confirm-pending-table th,
        #confirm-pending-table td {
            padding: 0.5rem 0.35rem;
            font-size: 0.7rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            #confirm-pending-table th:first-child,
            #confirm-pending-table td:first-child {
                width: 26%;
            }

            #confirm-pending-table th:nth-child(2),
            #confirm-pending-table td:nth-child(2) {
                width: 18%;
            }

            #confirm-pending-table th:nth-child(3),
            #confirm-pending-table td:nth-child(3) {
                width: 40%;
            }
            /* GÜNCELLEME (13.09.2026, kullanıcı talebi: "mobilde kriterler için detayları coin sorgulada ki
       gibi bir ok ile aşağı doğru açacak bir yöntem uygulayalım") — 4. sütun (KRİTERLER) mobilde artık
       eşik çubukları/saat/Grafik butonunu (.cpk-bars, .cpk-chart-btn) DOĞRUDAN göstermiyor (dar sütuna
       sığmıyorlardı, bkz. önceki ekran görüntüsü) — sadece küçük bir aşağı ok (.cpk-mobile-chevron)
       gösteriliyor. Tıklanınca Coin Sorgula'daki "detay aç/kapa" deseniyle (bkz. pubCoinQueryRenderMobileStat/
       pubCoinQueryToggleStatDetail, index_son_v242.html) BİREBİR aynı mantıkla, satırın ALTINA eklenen
       tam genişlikte ayrı bir satır (.cpk-detail-row, bkz. renderConfirmPendingTable/toggleCpkDetail
       app.js) açılıp kriter değerlerini + Grafik butonunu düz metin olarak gösteriyor. */
            #confirm-pending-table th:nth-child(4),
            #confirm-pending-table td:nth-child(4) {
                width: 16%;
                white-space: normal;
                text-align: center;
            }

        #confirm-pending-table .cpk-bars {
            display: none;
        }

        #confirm-pending-table .cpk-chart-btn {
            display: none;
        }

        #confirm-pending-table .cpk-mobile-chevron {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 5px;
            color: var(--text-muted, #94a3b8);
            cursor: pointer;
        }

        #confirm-pending-table .cpk-detail-row td {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            text-align: left;
        }

    /* 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, kullanıcı talebi: "ç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;
    }

    /* 07.10.2026: mobilde "Sistem Aktif" göstergesi kaldırıldı (e-posta için yer açar). DOM'da kalıyor,
       app.js yazmaya devam edebilir. Şok Modu göstergesi (#shock-mode-indicator) etkilenmez. */
    #system-status-indicator {
        display: none !important;
    }

    #user-info {
        margin-left: auto !important;
        border-left: none !important;
        padding-left: 0 !important;
        gap: 5px !important;
        /* 07.10.2026: uzun e-posta sığmıyordu — sadece MOBİL: kullanıcı alanı kalan genişliği alır,
           e-posta "…" ile kısalır, ikon/butonlar sabit kalır. Masaüstü etkilenmez. */
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }

        #user-info > * {
            flex: none;
        }

        #user-info #user-name {
            font-size: 0.75rem !important;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }

        #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 */
    /* 07.10.2026: eski "fit-content" kuralı kullanıcı alanını içerik genişliğine sıkıştırıp sağa
       yaslıyordu (e-posta sola, butonlar sağ kenara hizalanamıyordu). Tam genişlik: */
    #user-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        justify-content: space-between !important;
    }
}

@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) {
    /* GÜNCELLEME (16.09.2026, kullanıcı bulgusu: "mobilde açık işlemlerin içindeki işlemler eskisi
       gibi satır sayısına göre otomatik genişlemiyor, kontrol eder misin?" araştırması sırasında
       ayrıca bulunan ikinci bir hata) — bu kural STOP, TP2, TP3 sütunlarını mobilde gizlemek için
       yazılmıştı ve o zaman doğru index'ler 6/8/9 idi. Sonradan bu oturumda Açık İşlemler tablosuna
       Kademeli, Açılış Saati ve Grafik sütunları eklenince (bkz. app_v38.js renderActiveTrades)
       nth-child index'leri kaydı; bu kural fark edilmeden PNL(6)/STOP(8)/TP1(9)'i gizlemeye
       başlamıştı. Güncel sütun sırasına göre (1-SEMBOL,2-YÖN,3-GİRİŞ,4-Kademeli,5-Açılış Saati,
       6-PNL,7-DURUM,8-STOP,9-TP1,10-TP2,11-TP3,12-HESAP,13-Grafik,14-action) doğru hedefler
       STOP=8, TP2=10, TP3=11 olarak düzeltildi. */
    /* Stop(8), TP2(10), TP3(11) gizle — SEMBOL|YÖN|GİRİŞ|Kademeli|Açılış Saati|PNL|DURUM|TP1|HESAP|Grafik kalır */
    #active-trades-table th:nth-child(8),
    #active-trades-table td:nth-child(8),
    #active-trades-table th:nth-child(10),
    #active-trades-table td:nth-child(10),
    #active-trades-table th:nth-child(11),
    #active-trades-table td:nth-child(11) {
        display: none !important;
    }

    /* KALDIRILDI (17.09.2026, kullanıcı bulgusu: "açık işlemler içindeki satırlar... otomatik
       büyütülmemiş") — bu "Font küçült" kuralı zaten HİÇBİR etkisi olmayan ölü koddu: dosyada daha
       aşağıda (bkz. "#active-trades-table th, td { font-size:0.72rem !important; }" satırı) AYNI
       özgüllükte, medya sorgusuz (yani her genişlikte geçerli) bir kural var ve kaynak sırasında
       ondan SONRA geldiği için CSS her zaman o kuralı kazandırıyordu — burada tanımlanan 0.70rem
       hiçbir zaman uygulanmadı. Asıl büyütme düzeltmesi aşağıda, dosyanın en altına eklenen tek ve
       baskın mobil kuralda yapıldı (bkz. "Mobilde satır fontlarını büyüt" bloğu). */
}

@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;
    }
}

/* EKLENDİ (17.09.2026, kullanıcı bulgusu: "mobilde açık işlemler içindeki satırlar kadar otomatik
   büyütülmemiş, kontrol eder misin?") — Haftalık/Aylık Başarı gibi widget-compact kartlarında
   mobilde değer fontu belirgin şekilde büyütülüyordu (.widget-compact .widget-data .value: 1.05rem)
   ama Açık İşlemler tablosunda böyle bir büyütme hiç yoktu, üstelik yukarıdaki "font küçült" kuralı
   da (KALDIRILDI, bkz. üstteki not) zaten devre dışıydı. Bu blok, dosyanın en sonunda yer aldığı için
   (aynı özgüllükteki önceki "#active-trades-table th, td { font-size:0.72rem !important; }" kuralını
   kaynak sırası gereği ezerek) mobilde tek ve baskın font boyutunu belirliyor. Hücre içindeki JS
   kaynaklı inline font-size'lı span/div'ler (Kademeli tutar, Tetik satırı, PNL) normal inline stilden
   daha düşük özgüllükte olsa da !important sayesinde bunları da büyütüyor. */
@media (max-width: 768px) {
    /* 09.10.2026 (kullanıcı talebi): İşlemler tablosu yazıları Onay Süreci tablosu boyutuna (~0.72rem) indirildi, PNL tam sığsın. */
    #active-trades-table th,
    #active-trades-table td {
        font-size: 0.72rem !important;
        padding: 0.4rem 0.3rem !important;
    }

    #active-trades-table th {
        font-size: 0.6rem !important;
    }

    #active-trades-table td:first-child {
        font-size: 0.72rem !important;
        max-width: 64px !important;
    }

    #active-trades-table td span,
    #active-trades-table td div {
        font-size: 0.68rem !important;
    }

    #active-trades-table .side-badge {
        font-size: 0.64rem !important;
        padding: 3px 7px !important;
    }

    #active-trades-table td button[onclick^="toggleActiveTradeChart"] {
        height: 20px !important;
        padding: 0 6px !important;
        font-size: 0.62rem !important;
        gap: 3px !important;
    }

    #active-trades-table .close-sel-cb {
        width: 13px !important;
        height: 13px !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) {
    /* DÜZELTME (16.09.2026, kullanıcı bulgusu: "mobilde açık işlemlerin içindeki işlemler eskisi
       gibi satır sayısına göre otomatik genişlemiyor, kontrol eder misin?") — bu kural aslında
       "açık işlem yoksa bölümü küçült" amacıyla yazılmıştı: eskiden boş durumda tabloya
       tr.empty-row veya td[colspan] içeren bir satır ekleniyordu. Artık boş durum ayrı bir
       #active-empty div'i ile gösteriliyor (tr.empty-row DOM'da hiç yok) ve tabloya td[colspan]
       içeren TEK satır, bu oturumda eklenen Grafik akordeon satırı (bkz. app_v38.js
       renderActiveTrades, id="${chartElId}-row"). Sonuç: mobilde HERHANGİ bir işlemin grafiğini
       açmak bu "boş durum" kuralını yanlışlıkla tetikleyip .table-container'ı max-height:60px'e
       sıkıştırıyor, bu da "satır sayısına göre otomatik genişlemiyor" şikayetinin sebebiydi.
       Akordeon hücresine app_v38.js'te ayırt edici bir sınıf (.achart-colspan-cell) eklendi,
       buradaki üç seçici de bu sınıfı :not() ile dışlayacak şekilde güncellendi — artık kural
       SADECE gerçek boş durumda (ileride tekrar tr.empty-row kullanılırsa) tetiklenir, grafik
       satırını tetiklemez. */
    /* 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]:not(.achart-colspan-cell):not(.unlinked-info-cell)) {
        padding-bottom: 0.5rem !important;
    }

    #active-trades-body td[colspan]:not(.achart-colspan-cell):not(.unlinked-info-cell) {
        padding: 0.6rem !important;
        font-size: 0.75rem !important;
    }

    .table-container:has(#active-trades-body td[colspan]:not(.achart-colspan-cell):not(.unlinked-info-cell)) {
        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;
}

/* Piyasa Yönü paneli — sakin bölge rozeti nabzı */
@keyframes btcCalmPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56,189,248,.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(56,189,248,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(56,189,248,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #btc-calm-dot {
        animation: none !important;
    }
}

/* Piyasa Yönü (BTC) başlığı + daralt butonu: üstteki AI yorumundan biraz aşağıda dursun */
.liq-bias-panel > .section-header {
    margin-top: 1.4rem !important;
}

/* Mobil — Açık İşlemler başlığı (05.10.2026, kullanıcı talebi: "mobilde burayı düzenle sağa doğru kayabilir yap"):
   başlık + rozet + daralt butonu ilk satırda tam görünür (eskiden toplu kapatma kontrolleri yer açmak için
   başlığı "A..." diye kırpıyordu). Toplu kapatma / harici kayıt kontrolleri ALT satıra alınır ve tek satırda
   YATAY kaydırılabilir olur (kayan çubuk gizli, parmakla sağa-sola kaydırılır). */
@media (max-width: 768px) {
    #active-trades-section .section-header {
        flex-wrap: nowrap !important; /* toplu kontroller artık menüde — başlık, ok ve daralt düğmesi tek satırda kalır */
        row-gap: 8px;
    }

        #active-trades-section .section-header h2 {
            flex-shrink: 0 !important;
            overflow: visible !important;
        }

            #active-trades-section .section-header h2 span[data-i18n] {
                overflow: visible !important;
                text-overflow: clip !important;
            }

    #active-trades-section #bulk-close-controls,
    #active-trades-section #bulk-delete-external-btn {
        order: 10;
        margin-left: 0 !important;
    }

    #active-trades-section #bulk-close-controls {
        flex: 0 0 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

        #active-trades-section #bulk-close-controls::-webkit-scrollbar {
            display: none;
        }

        #active-trades-section #bulk-close-controls > * {
            flex-shrink: 0;
        }

    #active-trades-section #bulk-delete-external-btn {
        flex: 0 0 auto;
    }
}

/* Mobil toplu kapatma menüsü (06.10.2026) — İkon B (çoklu seç) + açılır menü */
#bulk-close-menu-btn {
    display: none;
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #e2e8f0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

#bulk-close-menu {
    position: fixed;
    z-index: 100000;
    width: 220px;
    background: #162036;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

    #bulk-close-menu .bcm-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 11px;
        font-size: 0.82rem;
        color: #e2e8f0;
        border-radius: 7px;
        cursor: pointer;
    }

    #bulk-close-menu .bcm-cb {
        width: 15px;
        height: 15px;
        border: 1.5px solid #94a3b8;
        border-radius: 4px;
        background: #0b1120;
        position: relative;
        flex-shrink: 0;
    }

        #bulk-close-menu .bcm-cb.on {
            background: #60a5fa;
            border-color: #60a5fa;
        }

            #bulk-close-menu .bcm-cb.on::after {
                content: "";
                position: absolute;
                left: 4px;
                top: 1px;
                width: 4px;
                height: 8px;
                border: solid #0b1120;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        #bulk-close-menu .bcm-cb.part {
            background: #60a5fa;
            border-color: #60a5fa;
        }

            #bulk-close-menu .bcm-cb.part::after {
                content: "";
                position: absolute;
                left: 2.5px;
                top: 5.5px;
                width: 7px;
                height: 2px;
                background: #0b1120;
            }

    #bulk-close-menu .bcm-ico {
        width: 15px;
        text-align: center;
        font-weight: 700;
        flex-shrink: 0;
    }

    #bulk-close-menu .bcm-sel {
        color: #f87171;
    }

        #bulk-close-menu .bcm-sel.off {
            opacity: 0.45;
            pointer-events: none;
        }

    #bulk-close-menu .bcm-all {
        color: #fca5a5;
        background: rgba(239,68,68,0.18);
        font-weight: 600;
    }
/* 06.10.2026, kullanıcı talebi: "aynı yapıyı web tarafında da uygula" — menü HER genişlikte kullanılır,
   eski buton satırı (Tümü / Seçilenleri Kapat / Tümünü Kapat) artık hiçbir ekranda gösterilmez. */
#bulk-close-menu-btn[data-on="1"] {
    display: flex;
}

    #bulk-close-menu-btn[data-on="1"] + button[onclick*="toggleSectionCollapse"] {
        margin-left: 2px !important;
    }

#active-trades-section #bulk-close-controls {
    display: none !important;
}

/* Günlük Rapor › Binance Borsası hesap satırı — web: Tasarım C (.acct-c-card), mobil: Tasarım 1 (.acct-m-card) */
.acct-m-card {
    display: none;
}

@media (max-width: 768px) {
    .acct-c-card {
        display: none !important;
    }

    .acct-m-card {
        display: block;
    }
}

/* İşlem Detayları — kaydırma okları (mobil, 06.10.2026): başlık satırının sağında ‹ ›, basınca en sola / en sağa gider */
.td-nav {
    display: none;
}

@media (max-width: 768px) {
    .td-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 26px;
        padding: 0 0 2px;
        border-radius: 7px;
        cursor: pointer;
        background: rgba(96,165,250,0.18);
        border: 1px solid rgba(96,165,250,0.5);
        color: #93c5fd;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        flex-shrink: 0;
    }

    .td-nav {
        transition: opacity .25s;
    }

        .td-nav.td-nav-off {
            opacity: 0.3;
            pointer-events: none;
        }
}

/* Bölüm başlığı okları (Hızlı Radar / Canlı Tarama / Haber Akışı / İşlemler) — yalnızca MOBİLDE yerleşim:
   ok çifti daralt/menü düğmelerinin soluna yaslanır. Masaüstünde oklar gizli olduğundan başlık satırı eskisi gibidir. */
@media (max-width: 768px) {
    .section-header > .td-nav[data-first="1"][data-dir="left"] {
        margin-left: auto !important;
    }

    .section-header > .td-nav[data-first="1"] ~ button[onclick*="toggleSectionCollapse"] {
        margin-left: 4px !important;
    }

    .section-header > .td-nav ~ #bulk-close-menu-btn {
        margin-left: 4px !important;
    }

    .section-header > .td-nav[data-dir="left"]:not([data-first]) {
        margin-left: 8px;
    }

    .section-header > .td-nav:not([data-first]) ~ button[onclick*="toggleSectionCollapse"] {
        margin-left: 4px !important;
    }
}

/* Mobil: kenardan kaydırarak geri gitme / yatay overscroll'u engelle (06.10.2026) */
html, body {
    overscroll-behavior-x: none;
}

/* 08.10.2026 (kullanıcı talebi): BTC Performance + Bitcoin Dominance paneli kaldırıldı; Piyasa Yönü (BTC)
   paneli tüm genişliğe yayıldı. Panel DOM'da duruyor (JS hâlâ dolduruyor), sadece gizli. Geri almak için
   bu bloğu silmek yeterli. */
.history-section {
    grid-template-columns: 1fr !important;
}

    .history-section > .history-col:not(.liq-bias-panel) {
        display: none !important;
    }

    .history-section > .liq-bias-panel #btc-trend-gauge {
        max-width: 100%;
    }

/* 08.10.2026 (kullanıcı talebi): Piyasa Yönü paneli mobilde de görünsün — yarım daire gösterge + zaman dilimleri
   mobilde GİZLİ; rejim rozeti, fiyat grafiği/şerit, BTC fiyatı ve AI yorumu görünür. Geri almak için bu bloğu sil. */
@media (max-width: 768px) {
    .history-section {
        display: block !important;
    }

        .history-section > .liq-bias-panel {
            display: block !important;
            padding: 0.75rem !important;
        }

    #btc-trend-gauge > svg:first-child,
    #btc-trend-gauge > #btc-gauge-tfs {
        display: none !important;
    }
}

/* 08.10.2026 (kullanıcı talebi, mobil): "Sakin bölge" rozeti BTC/USDT kutusunun hemen üstüne alındı; BTC/USDT yazıları küçültüldü. */
@media (max-width: 768px) {
    #btc-trend-gauge {
        display: flex !important;
        flex-direction: column;
    }

        #btc-trend-gauge > #btc-regime-strip {
            order: 1;
        }

        #btc-trend-gauge > div:not([id]) {
            order: 2;
        }

        #btc-trend-gauge > #btc-calm-badge {
            order: 3;
            margin-top: 12px !important;
        }

        #btc-trend-gauge > #btc-live-price {
            order: 4;
            padding: 7px 10px !important;
            gap: 6px;
            margin-top: 8px !important;
        }

        #btc-trend-gauge > #btc-gauge-comment {
            order: 5;
        }

    #btc-live-price > span:first-child {
        font-size: 12px !important;
        gap: 5px !important;
        white-space: nowrap;
    }

        #btc-live-price > span:first-child i {
            font-size: 15px !important;
        }

    #btc-live-price > span:last-child {
        white-space: nowrap;
        text-align: right;
    }

    #btc-live-price-val {
        font-size: 15px !important;
    }

    #btc-live-price-chg {
        font-size: 10px !important;
    }
}

/* 08.10.2026 (kullanıcı talebi, web): üstteki yarım daire gösterge kaldırıldı; skor + zaman dilimleri + parçalı ölçek
   "Sakin bölge" rozetinin sağına taşındı (#btc-calm-right). Mobilde sağ blok gizli. Geri almak için bu bloğu sil. */
@media (min-width: 769px) {
    #btc-trend-gauge > svg:first-child,
    #btc-trend-gauge > #btc-gauge-tfs {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #btc-calm-right {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #btc-calm-badge {
        padding: 8px 12px !important;
    }
}

/* 08.10.2026 (kullanıcı talebi): "Sistem Aktif" göstergesi tüm cihazlarda gizli (DOM'da duruyor, JS dokunmuyor). Geri almak için sil. */
#system-status-indicator {
    display: none !important;
}

/* 08.10.2026 (kullanıcı talebi): "Piyasa Yönü (BTC)" başlığı, Haber Akışı gibi panelin SOL ÜSTÜNDE dursun.
   Kök neden: .market-panel > .section-header {order:1} iken #liq-bias-body'nin order'ı yoktu (0) → içerik başlığın önüne geçiyordu. */
.liq-bias-panel > .section-header {
    order: 1 !important;
    margin-top: 0 !important;
}

.liq-bias-panel > #liq-bias-body {
    order: 2 !important;
}


/* 09.10.2026 (kullanıcı talebi): "Binance hesap eşlemesi yapılmadı" mesajı TÜM panellerde (İşlemler, Onay Süreci, Günlük Rapor) aynı kart —
   amber çerçeve, başlık + 3 adım + "Ayarlar'a git" butonu. app.js unlinkedNoticeHtml() üretir. */
.unlinked-notice {
    border: 1px solid rgba(245,158,11,0.45);
    background: rgba(245,158,11,0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0.75rem 0;
    text-align: left;
    font-family: inherit;
    font-style: normal;
}

    .unlinked-notice .un-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #f1f5f9;
    }

        .unlinked-notice .un-head i {
            font-size: 1.1rem;
            color: #fbbf24;
        }

    .unlinked-notice .un-steps {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        font-size: 0.8rem;
        color: #cbd5e1;
    }

    .unlinked-notice .un-step {
        background: rgba(255,255,255,0.06);
        border-radius: 8px;
        padding: 6px 12px;
        white-space: nowrap;
    }

        .unlinked-notice .un-step b {
            color: #fbbf24;
            font-weight: 600;
            margin-right: 6px;
        }

    .unlinked-notice .un-go {
        margin-left: auto;
        background: #3b82f6;
        color: #fff;
        font-weight: 600;
        font-size: 0.8rem;
        padding: 7px 14px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
    }

        .unlinked-notice .un-go:hover {
            background: #2563eb;
        }

@media (max-width: 768px) {
    .unlinked-notice {
        padding: 14px;
    }

        .unlinked-notice .un-step {
            white-space: normal;
        }

        .unlinked-notice .un-go {
            margin-left: 0;
            width: 100%;
        }
}

/* 09.10.2026: kart tüm panellerde AYNI genişlik/hizada + sans yazı tipi (Günlük Rapor'da monospace miras alınıyordu), İşlemler satırı animasyonsuz. */
.unlinked-notice, .unlinked-notice * {
    font-family: 'Inter', system-ui, sans-serif !important;
}

.unlinked-notice {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

tbody tr.unlinked-row {
    animation: none !important;
}

    tbody tr.unlinked-row:hover {
        background: transparent !important;
    }

.empty-state:has(.unlinked-notice) {
    padding: 0.75rem 0 !important;
    font-style: normal !important;
    text-align: left !important;
}

#daily-report-content:has(.unlinked-notice) {
    line-height: normal;
}


/* 09.10.2026 (kullanıcı talebi — başlık tasarımı: ikon kutulu, kompakt; boş panel soluk, dolu panel vurgulu).
   Başlıktaki ilk ikon renkli bir kutuya girer (kutu zemini ikonun kendi renginden türer). Sayaç (rozet) 0 ise panel "boş" (soluk),
   >0 ise "dolu" (çerçeve vurgulu) — app.js updatePanelEmptyState() panel-empty / panel-full sınıflarını yönetir. */
.section-header h2 {
    font-size: 1.05rem;
}

    .section-header h2 > i:first-child {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 0.95rem;
        background: color-mix(in srgb, currentColor 16%, transparent);
    }

        .section-header h2 > i:first-child.fa-brands {
            font-size: 1.05rem;
        }

@media (max-width: 768px) {
    .section-header h2 > i:first-child {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 0.8rem;
    }
}
/* Standart başlık rengi (tüm paneller aynı): metin açık gri, ikon kutusu nötr gri. Boş paneller daha soluk. */
.section-header h2 {
    color: #cbd5e1;
}

    .section-header h2 > i:first-child {
        color: #94a3b8 !important;
        background: rgba(148,163,184,0.14);
    }

.section-header .badge {
    background: rgba(148,163,184,0.16);
    color: #cbd5e1;
}

.glass-panel.panel-empty .section-header h2,
.glass-panel.panel-empty .section-header .badge {
    color: #64748b !important;
}

    .glass-panel.panel-empty .section-header h2 > i:first-child {
        color: #64748b !important;
        background: rgba(148,163,184,0.08);
    }

.glass-panel.panel-empty .section-header h2,
.glass-panel.panel-empty .section-header .badge {
    opacity: 0.7;
}

.glass-panel.panel-full {
    border-color: rgba(96,165,250,0.35);
}

/* 09.10.2026: mobilde "Binance hesap eşlemesi yapılmadı" kartı İşlemler panelinde kesiliyordu (boş durum kuralı tabloyu 60px'e sıkıştırıyor,
   tablo başlığı yatay kayıyordu). Kart varken başlık gizlenir, tablo/satır/hücre tam genişlik blok olur. */
@media (max-width: 768px) {
    .table-container:has(.unlinked-info-cell) {
        overflow-x: hidden !important;
        max-height: none !important;
        min-height: unset !important;
    }

        .table-container:has(.unlinked-info-cell) thead {
            display: none !important;
        }

        .table-container:has(.unlinked-info-cell) table,
        .table-container:has(.unlinked-info-cell) tbody,
        #active-trades-body tr.unlinked-row,
        #active-trades-body tr.unlinked-row > td.unlinked-info-cell {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
        }
}

/* Düzeltme: "#active-trades-table td:first-child { max-width:50px; overflow:hidden; nowrap }" (SEMBOL sütunu kuralı) kartın hücresini de 50px'e sıkıştırıyordu. */
@media (max-width: 768px) {
    #active-trades-table #active-trades-body tr.unlinked-row > td.unlinked-info-cell:first-child {
        max-width: none !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        padding: 0.5rem 0 !important;
        font-size: 0.85rem !important;
    }

    #active-trades-table .unlinked-notice, #active-trades-table .unlinked-notice * {
        white-space: normal;
    }

        #active-trades-table .unlinked-notice .un-head {
            font-size: 0.95rem !important;
        }

        #active-trades-table .unlinked-notice .un-steps, #active-trades-table .unlinked-notice .un-step {
            font-size: 0.8rem !important;
        }

        #active-trades-table .unlinked-notice .un-step {
            white-space: nowrap;
        }
}

/* Onay Süreci halka sayaç nabzı (app.js renderConfirmPendingTable) */
@keyframes cpkPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

.cpk-pulse {
    animation: cpkPulse 1.6s ease-out infinite;
    pointer-events: none;
}