/* ==========================================================================
   1. BÖLÜM: TEMA KURULUMU (FONTS, RENK DEĞİŞKENLERİ, TEMEL STİLLER)
   ========================================================================== */

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




/* Google Fonts'tan Inter ve Roboto Mono fontlarını içe aktar */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

/* CSS Custom Properties (Tema Değişkenleri) */
:root {
    /* Renk Paleti */
    --bg-main: #0D1117; /* Ana Arka Plan (Çok Koyu Gri/Siyah) */
    --bg-secondary: #161B22; /* İkincil Arka Plan (Kartlar, Paneller) */
    --border-color: #30363D; /* Kenarlık ve Ayırıcı Çizgi Rengi */
    --accent-primary: #3B82F6; /* Vurgu Rengi (Butonlar, Linkler, Aktif Elemanlar) */
    --accent-hover: #60A5FA; /* Vurgu Renginin Hover Hali */
    --color-positive: #22C55E; /* Kâr, Alış, Pozitif Değişim Rengi */
    --color-negative: #EF4444; /* Zarar, Satış, Negatif Değişim Rengi */
    --color-warning: #FBBF24; /* Uyarı Rengi */
    /* Metin Renkleri */
    --text-primary: #E6EDF3; /* Ana Başlıklar, Önemli Metinler */
    --text-secondary: #B0BAC6; /* Normal Paragraf Metinleri */
    --text-tertiary: #7D8590; /* İkincil Bilgiler, Zaman Damgaları */
    /* Font Aileleri */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --border-color: #374151;
}

/* Genel Sayfa Stilleri */
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Özel Scrollbar Tasarımı */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #484F58;
    }

/* ==========================================================================
   2. BÖLÜM: GENEL AMAÇLI YARDIMCI SINIFLAR (UTILITIES)
   ========================================================================== */

.text-positive {
    color: var(--color-positive);
}

.text-negative {
    color: var(--color-negative);
}

.text-warning {
    color: var(--color-warning);
}

.font-mono {
    font-family: var(--font-mono);
}
.brb{
    border-bottom:1px !important;
    border-bottom-color:aliceblue;
}

/* ==========================================================================
   3. BÖLÜM: KARTLAR VE PANELLER (CARDS & PANELS)
   ========================================================================== */

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem; /* 20px */
    width: 100%;
}

.card-header {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* ==========================================================================
   4. BÖLÜM: FORM ELEMANLARI (INPUT, SELECT)
   ========================================================================== */

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem; /* 12px */
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
}

    .form-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Mavi odaklanma gölgesi */
    }

    .form-input[readonly] {
        background-color: #20262E; /* Okunabilir alan için biraz farklı arka plan */
        cursor: not-allowed;
    }


/* ==========================================================================
   5. BÖLÜM: BUTONLAR (BUTTONS)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    width: 100%;
}

    .btn i { /* Buton içindeki ikonlar için boşluk */
        margin-right: 0.5rem;
    }

.btn-primary {
    background-color: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

    .btn-primary:hover {
        background-color: var(--accent-hover);
        border-color: var(--accent-hover);
    }

.btn-buy {
    background-color: var(--color-positive);
    color: #ffffff;
}

    .btn-buy:hover {
        background-color: #1a9e4a; /* Yeşilin biraz koyusu */
    }

.btn-sell {
    background-color: var(--color-negative);
    color: #ffffff;
}

    .btn-sell:hover {
        background-color: #d13a3a; /* Kırmızının biraz koyusu */
    }

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

    .btn-secondary:hover {
        background-color: #20262E;
        border-color: var(--text-secondary);
    }


/* ==========================================================================
   6. BÖLÜM: TABLOLAR (TABLES)
   ========================================================================== */

.table-pro {
    width: 100%;
    border-collapse: collapse; /* Kenar boşluklarını birleştir */
}

    .table-pro thead {
        text-align: left;
        color: var(--text-tertiary);
        font-size: 0.75rem; /* 12px */
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .table-pro th,
    .table-pro td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap; /* Satırların kaymasını engelle */
    }

    .table-pro tbody tr {
        transition: background-color 0.15s ease-in-out;
    }

        .table-pro tbody tr:hover {
            background-color: #1A1F26; /* Hover için çok hafif bir ton farkı */
        }

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

/* ==========================================================================
   7. BÖLÜM: ÖZEL BİLEŞENLER (CUSTOM COMPONENTS)
   ========================================================================== */

/* Sağ sütundaki büyük anlık fiyat göstergesi için */
.price-display-lg {
    font-family: var(--font-mono);
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    line-height: 1;
}

/* Yüzdesel değişim göstergesi için */
.percentage-change {
    font-family: var(--font-mono);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}



.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
    height: 60px;
}

.header-logo-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}

.header-actions-group {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* 24px */
}

.balance-display {
    text-align: right;
}

.user-menu-button {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .user-menu-button:hover {
        color: var(--text-primary);
    }

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 240px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 100;
    padding: 0.5rem 0;
    /* Başlangıçta gizli olması için */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}

/* "group" hover ile dropdown'u görünür yap */
.group:hover .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

    .user-menu-item:hover {
        background-color: var(--accent-primary);
        color: white;
    }

    .user-menu-item.text-negative:hover {
        background-color: var(--color-negative);
    }



/* Sağ taraftaki aksiyon grubunun aralıklarını düzenle */
.header-actions-group {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* 20px */
}

/* Yeni Bakiye Kartı */
.balance-card {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    background-color: var(--bg-main); /* Ana arka plandan bir ton farklı */
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .balance-card:hover {
        border-color: var(--accent-primary);
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
    }

/* Bakiye kartı içindeki dikey ayırıcı çizgi */
.balance-card-divider {
    height: 20px;
    width: 1px;
    background-color: var(--border-color);
}

/* Durum İkonları ve Tooltip (Bilgi Kutucuğu) */
#status-indicators [data-tooltip] {
    position: relative;
    cursor: pointer;
}

    /* Tooltip'in görünümü (YENİ - YANDA GÖZÜKEN VERSİYON) */
    #status-indicators [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        /* --- YENİ KONUMLANDIRMA --- */
        left: calc(100% + 12px); /* İkonun 12px sağına konumlandır */
        top: 50%; /* İkona dikey olarak ortala */
        transform: translateY(-50%); /* Dikey ortalamayı tamamla */
        /* -------------------------- */

        background-color: #010409;
        color: var(--text-primary); /* Daha okunaklı olması için rengi açtım */
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.5rem 0.8rem;
        font-size: 0.875rem; /* 14px */
        font-weight: 500;
        white-space: nowrap;
        /* Başlangıçta gizle */
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* Tooltip'in fare olaylarını engellemesi için */
        transition: opacity 0.2s ease, transform 0.2s ease; /* Geçişe transform ekledim */
        z-index: 10;
    }

    /* Hover durumunda tooltip'i göster */
    #status-indicators [data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }



.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Tam bir daire yapar */
    transition: background-color 0.3s ease;
}

.dot-positive {
    background-color: var(--color-positive);
    box-shadow: 0 0 8px var(--color-positive); /* Parlama efekti */
    animation: pulse-positive 2s infinite; /* Canlılık animasyonu */
}

.dot-negative {
    background-color: var(--color-negative);
}

/* Çalışma durumundaki nokta için nabız animasyonu */
keyframes pulse-positive {
    0% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
    }

    50% {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
    }
}


/* Okunmamış bildirim öğesi */
.notification-item-unread {
 
    color: var(--text-primary);
    background-color: #20262E;
}

    .notification-item-unread:hover {
        background-color: #20262E; /* bg-secondary'den biraz daha koyu */
    }

/* Okunmuş bildirim öğesi */
.notification-item-read {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    opacity: 0.6; /* Okunduysa soluk göster */
}

/* Her bildirimin altına ayırıcı çizgi */
.notification-item-divider {
    border: none;
    border-bottom: 1px solid var(--border-color);
    margin: 1rem 0;
}

/* Son bildirimin altında çizgi olmaması için */
#notificationList .notification-item-divider:last-child {
    display: none;
}


.modal-overlay {
    transition: opacity 0.3s ease;
    opacity: 1; /* Varsayılan olarak görünür, gizlemek için 'hidden' sınıfı kullanılır */
}
/* Modal içeriği - Ana kutu */
.modal-content {
    background-color: var(--bg-secondary); /* Kartlarınızla aynı arka plan */
    border: 1px solid var(--border-color); /* Kartlarınızla aynı kenarlık */
    border-radius: 1rem; /* 16px - rounded-xl */
    padding: 1.5rem; /* 24px */
    width: 100%;
    max-width: 400px; /* Daha küçük ve kompakt bir görünüm */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Derin bir gölge */
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylı bir animasyon */
}

/* Modal başlığı */
.modal-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Modal mesajı */
.modal-message {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Modal aksiyon (buton) grubu */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Modal içindeki butonlar */
.modal-button {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

    /* Modal'daki iptal/vazgeç butonu */
    .modal-button.cancel {
        background-color: transparent;
        color: var(--text-secondary);
        border-color: var(--border-color);
    }

        .modal-button.cancel:hover {
            background-color: var(--border-color);
            color: var(--text-primary);
        }

    /* Modal'daki onay butonu */
    .modal-button.confirm, .modal-button.ok {
        background-color: var(--accent-primary);
        color: white;
    }

        .modal-button.confirm:hover, .modal-button.ok:hover {
            background-color: var(--accent-hover);
        }




/* Flash animasyonu - Yenilenen hücreler için */
.cell-flash {
    animation: flash-animation 0.7s ease-out;
}

@keyframes flash-animation {
    0% {
        background-color: var(--accent-primary);
        opacity: 0.3;
    }

    100% {
        background-color: transparent;
        opacity: 1;
    }
}

/* Aktif zaman dilimi butonu */
.timeframe-btn.active {
    background-color: var(--accent-primary);
    color: var(--bg-main); /* Ana arka plan rengiyle zıt renk */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

/* Tablo hücrelerinde kazananı vurgulayan sınıf */
.bg-color-positive-dimmed {
    background-color: rgba(34, 197, 94, 0.15); /* Pozitif rengin saydam hali */
}

/* Özel kaydırma çubuğu */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: #4B5563;
    }


.form-input-readonly {
    background-color: var(--bg-main);
    cursor: not-allowed;
    opacity: 0.8;
}

/* ==========================================================================
   7. BÖLÜM: ÖZEL BİLEŞENLER (CUSTOM COMPONENTS) - Modal Tab Butonları
   ========================================================================== */

/* Ayarlar modalındaki sekme butonları */
.setting-tab {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

    .setting-tab:hover {
        color: var(--text-primary);
        background-color: var(--bg-main);
    }

    .setting-tab.active-tab {
        color: var(--text-primary);
        border-color: var(--accent-primary);
        background-color: var(--bg-secondary);
    }

.accordion-summary-profit {
    /* Kâr için var(--color-positive) renginin %10 opaklığı */
    color: var(--color-positive); /* Metin rengi yeşil */
    transition: background-color 0.2s ease;
}

.accordion-summary-loss {
   /* Zarar için var(--color-negative) renginin %10 opaklığı */
    color: var(--color-negative); /* Metin rengi kırmızı */
    transition: background-color 0.2s ease;
}

.accordion-summary-profit:hover {
  
}

.accordion-summary-loss:hover {

}

.price-flash-up {
    color: #22c55e !important; /* yeşil */
    transition: color 0.2s;
}

.price-flash-down {
    color: #ef4444 !important; /* kırmızı */
    transition: color 0.2s;
}

.price-flash-same {
    color: #f4f4f5 !important; /* beyaz/grimsi */
    transition: color 0.2s;
}

/* Tailwind CSS direktifleri ve özel renk tanımlamaları */
.setting-tab {
    padding: 0.5rem 1rem;
    color: #9ca3af; /* Gri */
    border-bottom: 2px solid transparent;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .setting-tab.active-tab {
        color: #3b82f6; /* Mavi */
        border-color: #3b82f6;
        font-weight: 700;
    }

@layer base {
    :root {
        --bg-main: #131722;
        --bg-secondary: #1e222d;
        --border-color: #2a2e39;
        --text-primary: #d1d4dc;
        --text-secondary: #8c929c;
        --accent-primary: #2962ff;
        --color-positive: #26a69a;
        --color-negative: #ef5350;
    }

    body {
        @apply bg-main text-text-primary font-sans;
    }
}

@layer components {
    .card {
        @apply bg-bg-secondary border border-border-color rounded-lg p-4 shadow-lg;
    }

    .card-header {
        @apply text-xl font-bold text-text-primary pb-3 mb-3 border-b border-border-color;
    }

    .table-pro {
        @apply w-full text-sm text-left;
    }

        .table-pro th {
            @apply px-6 py-3 text-xs text-text-secondary uppercase tracking-wider;
        }

        .table-pro td {
            @apply px-6 py-4 whitespace-nowrap;
        }

        .table-pro tbody tr {
            @apply border-b border-border-color;
        }

            .table-pro tbody tr:last-of-type {
                @apply border-none;
            }

            .table-pro tbody tr:hover {
                @apply bg-border-color;
            }
}