/* static/css/style.css - Tum stiller */

/* ==================== CSS DEĞİŞKENLERİ ==================== */
:root {
    --bg: #0c0c1e;
    --bg2: #1a1a3e;
    --text: #e4e4e7;
    --text-muted: #71717a;
    --text-secondary: #a1a1aa;
    --kart: rgba(25,25,50,0.9);
    --kart2: rgba(30,30,60,0.8);
    --border: #3b3b5c;
    --border2: #2a2a4a;
    --header-bg: rgba(15,15,35,0.95);
    --tab-bg: rgba(20,20,40,0.9);
    --input-bg: #1a1a3e;
    --mavi: #3b82f6;
    --yesil: #22c55e;
    --kirmizi: #ef4444;
    --sari: #eab308;
}

.light-mode {
    --bg: #f0f4f8;
    --bg2: #e2e8f0;
    --text: #1a1a2e;
    --text-muted: #64748b;
    --text-secondary: #475569;
    --kart: rgba(255,255,255,0.95);
    --kart2: rgba(240,244,248,0.9);
    --border: #cbd5e1;
    --border2: #e2e8f0;
    --header-bg: rgba(255,255,255,0.95);
    --tab-bg: rgba(241,245,249,0.95);
    --input-bg: #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%); color: var(--text); min-height: 100vh; transition: background 0.3s, color 0.3s; }

.header { background: var(--header-bg); padding: 15px 20px; text-align: center; border-bottom: 2px solid #3b82f6; position: sticky; top: 0; z-index: 100; }
.header-ust { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px; }
.header h1 { color: #3b82f6; font-size: 24px; text-shadow: 0 0 20px rgba(59,130,246,0.5); }
.header p { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.auto-refresh { background: #22c55e; color: #000; padding: 3px 8px; border-radius: 4px; font-size: 10px; margin-left: 10px; }

/* Tema toggle */
.tema-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 18px; padding: 4px 8px; transition: all 0.2s; }
.tema-btn:hover { border-color: #3b82f6; }

/* Header widget satiri */
.header-widget-satir { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.doviz-widget, .bist-widget { display: flex; align-items: center; gap: 6px; background: var(--kart2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.dw-label { color: var(--text-muted); }
.dw-deger { font-weight: bold; color: var(--text); }
.dw-degisim { font-weight: bold; font-size: 11px; }
.dw-yukselis { color: #22c55e; }
.dw-dusus { color: #ef4444; }

.tabs { display: flex; justify-content: center; gap: 8px; padding: 15px; background: var(--tab-bg); flex-wrap: wrap; position: sticky; top: 110px; z-index: 99; }
.tab { padding: 10px 18px; background: var(--kart2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text-secondary); font-size: 13px; transition: all 0.3s; }
.tab:hover { background: rgba(59,130,246,0.2); border-color: #3b82f6; }
.tab.aktif { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; box-shadow: 0 4px 15px rgba(59,130,246,0.4); }

.icerik { display: none; padding: 20px; max-width: 1400px; margin: 0 auto; }
.icerik.aktif { display: block; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
.stat { background: linear-gradient(135deg, rgba(30,30,60,0.9), rgba(20,20,50,0.9)); padding: 20px; border-radius: 15px; text-align: center; border: 1px solid #3b3b5c; cursor: pointer; transition: all 0.3s; }
.stat:hover { transform: scale(1.02); border-color: #3b82f6; }
.stat h3 { font-size: 32px; margin-bottom: 5px; }
.stat p { font-size: 12px; color: #71717a; }

.yesil { color: #22c55e; }
.kirmizi { color: #ef4444; }
.sari { color: #eab308; }
.mavi { color: #3b82f6; }

.bolum { background: var(--kart); border: 1px solid var(--border); border-radius: 15px; padding: 20px; margin-bottom: 20px; }
.bolum-baslik { font-size: 18px; margin-bottom: 15px; color: #fff; display: flex; align-items: center; gap: 10px; }
.mod-c-baslik { color: #f59e0b !important; }

.populer-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #2a2a4a; cursor: pointer; transition: all 0.2s; }
.populer-item:hover { background: rgba(59,130,246,0.1); }
.populer-item .sira { width: 30px; color: #f59e0b; font-weight: bold; }
.populer-item .sembol { flex: 1; font-weight: bold; font-size: 15px; }
.populer-item .fiyat { width: 100px; color: #a1a1aa; }
.populer-item .degisim { width: 80px; font-weight: bold; text-align: right; }
.populer-item .guven { width: 40px; text-align: center; padding: 4px 8px; border-radius: 6px; font-size: 11px; color: #000; font-weight: bold; margin-left: 10px; }

.kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.kat-card { background: rgba(30,30,60,0.8); border: 2px solid #3b3b5c; border-radius: 12px; padding: 15px; cursor: pointer; transition: all 0.3s; }
.kat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.kat-card.tavan { border-color: #22c55e; }
.kat-card.guclu { border-color: #84cc16; }
.kat-card.taban { border-color: #ef4444; }
.kat-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kat-baslik .sembol { font-size: 18px; font-weight: bold; }
.etiket { padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: bold; color: #000; }
.tavan-e { background: #22c55e; }
.guclu-e { background: #84cc16; }
.taban-e { background: #ef4444; }
.kat-fiyat { font-size: 16px; margin-bottom: 8px; }
.kat-bilgi { font-size: 12px; color: #a1a1aa; }

.pot-card { background: linear-gradient(135deg, rgba(30,30,70,0.9), rgba(40,40,80,0.9)); border: 2px solid #6366f1; border-radius: 15px; padding: 18px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s; }
.pot-card:hover { border-color: #818cf8; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99,102,241,0.3); }
.pot-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.pot-sol { display: flex; align-items: center; gap: 15px; }
.pot-sembol { font-size: 20px; font-weight: bold; color: #a5b4fc; }
.pot-fiyat { color: #a1a1aa; }
.pot-sag { display: flex; align-items: center; gap: 10px; }
.pot-degisim { font-size: 18px; font-weight: bold; }
.pot-guven { padding: 5px 12px; border-radius: 8px; font-size: 11px; color: #000; font-weight: bold; }
.pot-orta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.pot-gosterge { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; text-align: center; }
.pot-gosterge span { display: block; font-size: 10px; color: #71717a; margin-bottom: 3px; }
.pot-gosterge strong { font-size: 14px; }
.pot-alt { font-size: 12px; color: #a5b4fc; padding: 10px; background: rgba(99,102,241,0.1); border-radius: 8px; }

.sektor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.sektor-card { background: rgba(30,30,60,0.8); border: 1px solid #3b3b5c; border-radius: 12px; padding: 15px; cursor: pointer; transition: all 0.3s; }
.sektor-card:hover { border-color: #3b82f6; transform: translateY(-2px); }
.sektor-baslik { display: flex; justify-content: space-between; margin-bottom: 10px; }
.sektor-ad { font-weight: bold; font-size: 14px; }
.sektor-sayi { color: #71717a; font-size: 12px; }
.sektor-degisim { font-size: 24px; font-weight: bold; margin-bottom: 8px; }
.sektor-bilgi { font-size: 12px; color: #a1a1aa; margin-bottom: 5px; }
.sektor-eniyi { font-size: 11px; color: #22c55e; }

.arama { width: 100%; padding: 14px 20px; background: rgba(30,30,60,0.8); border: 2px solid #3b3b5c; border-radius: 12px; color: #fff; font-size: 14px; margin-bottom: 15px; }
.arama:focus { outline: none; border-color: #3b82f6; }

.filtreler { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filtre { padding: 10px 18px; background: rgba(30,30,60,0.8); border: 1px solid #3b3b5c; border-radius: 8px; cursor: pointer; color: #a1a1aa; font-size: 12px; transition: all 0.2s; }
.filtre.aktif { background: #3b82f6; color: #fff; border-color: #3b82f6; }

.hisse-satir { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #2a2a4a; cursor: pointer; transition: background 0.2s; }
.hisse-satir:hover { background: rgba(59,130,246,0.1); }
.hs-sembol { width: 80px; font-weight: bold; }
.hs-fiyat { width: 100px; color: #a1a1aa; }
.hs-degisim { width: 80px; font-weight: bold; }
.hs-rsi { width: 80px; font-size: 12px; color: #71717a; }
.hs-sinyal { padding: 4px 10px; border-radius: 5px; font-size: 11px; color: #fff; font-weight: bold; }
.hs-sektor { width: 80px; font-size: 11px; color: #71717a; text-align: right; }

.p-ozet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; }
.p-ozet > div { background: rgba(30,30,60,0.8); padding: 25px; border-radius: 15px; text-align: center; border: 1px solid #3b3b5c; }
.p-ozet h3 { font-size: 26px; margin-bottom: 5px; }

.ph-satir { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #2a2a4a; cursor: pointer; }
.ph-satir:hover { background: rgba(59,130,246,0.1); }
.ph-sembol { font-weight: bold; }
.ph-sembol small { color: #71717a; font-weight: normal; }
.ph-fiyat { color: #a1a1aa; font-size: 13px; }
.ph-kar { font-weight: bold; }

.wl-satir { display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid #2a2a4a; cursor: pointer; }
.wl-satir:hover { background: rgba(59,130,246,0.1); }

.wl-satir-detay { background: rgba(30,30,60,0.8); border: 1px solid #3b3b5c; border-radius: 10px; padding: 15px; margin-bottom: 10px; cursor: pointer; }
.wl-satir-detay:hover { border-color: #3b82f6; }
.wl-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wl-sembol { font-weight: bold; font-size: 16px; }
.wl-sonuc { padding: 3px 8px; border-radius: 4px; font-size: 10px; color: #000; font-weight: bold; }
.wl-fiyatlar { font-size: 12px; color: #a1a1aa; margin-bottom: 5px; }
.wl-degisim { font-size: 18px; font-weight: bold; }
.wl-not { font-size: 11px; color: #71717a; margin-top: 8px; font-style: italic; }

.haber { padding: 12px 0; border-bottom: 1px solid #2a2a4a; }
.haber a { color: #60a5fa; text-decoration: none; font-size: 13px; }
.haber a:hover { color: #93c5fd; }

.bos { color: #71717a; text-align: center; padding: 30px; }
.uyari { background: rgba(245,158,11,0.1); border: 1px solid #f59e0b; border-radius: 10px; padding: 15px; margin-bottom: 20px; color: #fbbf24; font-size: 12px; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; overflow-y: auto; }
.modal.aktif { display: block; }
.modal-icerik { background: linear-gradient(135deg, #1a1a3e, #0c0c1e); border: 1px solid #3b3b5c; border-radius: 20px; padding: 0; width: 95%; max-width: 900px; margin: 20px auto; overflow: hidden; }
.modal-header { background: linear-gradient(135deg, #3b82f6, #2563eb); padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { font-size: 24px; }
.modal-kapat { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; }
.modal-body { padding: 25px; }

.grafik-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.grafik-box { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 15px; }
.grafik-baslik { font-size: 14px; color: #a1a1aa; margin-bottom: 10px; text-align: center; }
.grafik-alan { height: 200px; position: relative; }

.gosterge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.gosterge-kart { background: rgba(30,30,60,0.8); border-radius: 12px; padding: 15px; text-align: center; border: 1px solid #3b3b5c; }
.gosterge-kart .baslik { font-size: 11px; color: #71717a; margin-bottom: 5px; }
.gosterge-kart .deger { font-size: 20px; font-weight: bold; margin-bottom: 3px; }
.gosterge-kart .durum { font-size: 11px; padding: 3px 8px; border-radius: 4px; display: inline-block; }

.analiz-kutu { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(37,99,235,0.1)); border: 1px solid #3b82f6; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.analiz-kutu h4 { color: #60a5fa; margin-bottom: 10px; }
.analiz-kutu p { font-size: 13px; line-height: 1.6; }

.hedef-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; }
.hedef-kart { background: rgba(30,30,60,0.8); border-radius: 12px; padding: 20px; text-align: center; }
.hedef-kart.yukari { border: 2px solid #22c55e; }
.hedef-kart.asagi { border: 2px solid #ef4444; }
.hedef-kart .yon { font-size: 12px; color: #71717a; margin-bottom: 5px; }
.hedef-kart .fiyat { font-size: 24px; font-weight: bold; }
.hedef-kart .oran { font-size: 14px; margin-top: 5px; }

.sinyal-kutu { padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 20px; }
.sinyal-kutu.al { background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(22,163,74,0.1)); border: 2px solid #22c55e; }
.sinyal-kutu.sat { background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(220,38,38,0.1)); border: 2px solid #ef4444; }
.sinyal-kutu.bekle { background: linear-gradient(135deg, rgba(234,179,8,0.2), rgba(202,138,4,0.1)); border: 2px solid #eab308; }
.sinyal-kutu h3 { font-size: 28px; margin-bottom: 5px; }
.sinyal-kutu p { color: #a1a1aa; font-size: 13px; }

.islem-btn { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
.islem-btn button { padding: 15px 40px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.3s; }
.btn-al { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.btn-sat { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.btn-izle { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.btn-al:hover, .btn-sat:hover, .btn-izle:hover { transform: scale(1.05); }

.perf-ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.perf-stat { background: rgba(30,30,60,0.8); padding: 20px; border-radius: 12px; text-align: center; }
.perf-stat h3 { font-size: 28px; margin-bottom: 5px; }
.perf-stat p { font-size: 11px; color: #71717a; }
.perf-stat.yesil h3 { color: #22c55e; }
.perf-stat.kirmizi h3 { color: #ef4444; }
.perf-gun { padding: 10px; border-bottom: 1px solid #2a2a4a; font-size: 13px; }

.tavan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.ts-item { background: rgba(30,30,60,0.8); padding: 15px; border-radius: 10px; text-align: center; }
.ts-item span { display: block; font-size: 11px; color: #71717a; margin-bottom: 5px; }
.ts-item strong { font-size: 20px; }
.ts-item.yesil strong { color: #22c55e; }
.ts-item.kirmizi strong { color: #ef4444; }
.tavan-gecmis-satir { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #2a2a4a; font-size: 13px; }

.alarm-satir { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #2a2a4a; }
.alarm-satir button { background: none; border: none; cursor: pointer; font-size: 16px; }
.alarm-ekle-form { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.alarm-ekle-form input, .alarm-ekle-form select { padding: 10px; background: #1a1a3e; border: 1px solid #3b3b5c; border-radius: 8px; color: #fff; }
.alarm-ekle-form button { padding: 10px 20px; background: #3b82f6; border: none; border-radius: 8px; color: #fff; cursor: pointer; }

.export-btn { padding: 12px 25px; background: linear-gradient(135deg, #22c55e, #16a34a); border: none; border-radius: 10px; color: #fff; cursor: pointer; font-weight: bold; margin-bottom: 20px; }

.haber-kutu { background: rgba(30,30,60,0.8); border: 1px solid #3b3b5c; border-radius: 12px; padding: 15px; margin-bottom: 20px; }
.haber-kutu h4 { color: #60a5fa; margin-bottom: 10px; font-size: 14px; }
.haber-kutu .haber-item { padding: 8px 0; border-bottom: 1px solid #2a2a4a; font-size: 12px; }
.haber-kutu .haber-item:last-child { border-bottom: none; }
.haber-kutu a { color: #93c5fd; text-decoration: none; }
.haber-item-top { display: flex; align-items: flex-start; gap: 5px; }
.haber-duygu { font-size: 10px; margin-top: 2px; flex-shrink: 0; }
.haber-meta { font-size: 10px; color: #52525b; margin-top: 3px; padding-left: 14px; }

.karsilastir-kutu { background: rgba(30,30,60,0.8); border: 1px solid #3b3b5c; border-radius: 15px; padding: 20px; margin-bottom: 20px; }
.karsilastir-secim { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.karsilastir-secim select { padding: 12px; background: #1a1a3e; border: 1px solid #3b3b5c; border-radius: 8px; color: #fff; font-size: 14px; min-width: 150px; }
.karsilastir-secim button { padding: 12px 25px; background: #3b82f6; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-weight: bold; }
.karsilastir-sonuc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.karsilastir-hisse { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 20px; }
.karsilastir-hisse h3 { margin-bottom: 15px; color: #3b82f6; }

@media (max-width: 768px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .grafik-container { grid-template-columns: 1fr; }
    .gosterge-grid { grid-template-columns: repeat(2, 1fr); }
    .pot-orta { grid-template-columns: repeat(2, 1fr); }
    .karsilastir-sonuc { grid-template-columns: 1fr; }
    .perf-ozet { grid-template-columns: repeat(2, 1fr); }
    .tavan-stats { grid-template-columns: repeat(2, 1fr); }
}
/* Sektor Modal Stilleri */
.sektor-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.sektor-hisse-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #1a1a2e;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.sektor-hisse-satir:hover {
    background: #252542;
}

.shisse-sembol {
    font-weight: bold;
    color: #fff;
    min-width: 80px;
}

.shisse-fiyat {
    color: #a1a1aa;
}

.shisse-degisim {
    font-weight: bold;
    min-width: 70px;
    text-align: right;
}

/* Grafik Container */
.grafik-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.grafik-container canvas {
    background: #1a1a2e;
    border-radius: 8px;
}

/* Gosterge Grid */
.gosterge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gosterge {
    background: #1a1a2e;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.gosterge span {
    display: block;
    font-size: 11px;
    color: #71717a;
    margin-bottom: 5px;
}

.gosterge strong {
    color: #fff;
    font-size: 14px;
}

/* Modal Fiyat */
.modal-fiyat {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.modal-fiyat .fiyat {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}

.modal-fiyat .skor {
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
}

/* Modal Butonlar */
.modal-butonlar {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-butonlar button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.2s;
}

.modal-butonlar button:hover {
    opacity: 0.8;
}

.modal-butonlar button:nth-child(1) {
    background: #3b82f6;
    color: #fff;
}

.modal-butonlar button:nth-child(2) {
    background: #22c55e;
    color: #fff;
}

.modal-butonlar button:nth-child(3) {
    background: #ef4444;
    color: #fff;
}

/* Haber Link */
.haber-link {
    display: block;
    padding: 10px;
    background: #1a1a2e;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #3b82f6;
    text-decoration: none;
    font-size: 13px;
}

.haber-link:hover {
    background: #252542;
}
/* Piyasa Durumu Kutusu */
.piyasa-kutu {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #2d2d4a;
}

.piyasa-kutu span:first-child {
    color: #a1a1aa;
    font-size: 14px;
}

.piyasa-badge {
    padding: 8px 16px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
/* Risk Yönetimi Stilleri */
.risk-kutu {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #2d2d4a;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
}

.risk-kutu h4 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 16px;
}

.risk-karar {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.risk-detay {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 15px 0;
}

.risk-item {
    background: #252542;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.risk-item span {
    display: block;
    font-size: 11px;
    color: #71717a;
    margin-bottom: 5px;
}

.risk-item strong {
    font-size: 14px;
    color: #fff;
}

.pozisyon-oneri {
    background: #22c55e22;
    border: 1px solid #22c55e;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}

.pozisyon-oneri p {
    margin: 0;
    color: #22c55e;
}

.cikis-seviyeleri {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.cikis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: 8px;
}

.cikis-item.stop {
    background: #ef444422;
    border: 1px solid #ef4444;
}

.cikis-item.stop span { color: #ef4444; }
.cikis-item.stop strong { color: #ef4444; }

.cikis-item.kar {
    background: #22c55e22;
    border: 1px solid #22c55e;
}

.cikis-item.kar span { color: #22c55e; }
.cikis-item.kar strong { color: #22c55e; }

/* ==================== OTOMATIK TARAMA ==================== */

.tarama-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    animation: tarama-pulse 1s infinite;
}

@keyframes tarama-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tarama-badge-yesil {
    background: #22c55e22;
    color: #22c55e;
    border: 1px solid #22c55e;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
}

.tarama-badge-sari {
    background: #eab30822;
    color: #eab308;
    border: 1px solid #eab308;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
}

.tarama-durum-kart {
    background: rgba(20, 20, 50, 0.8);
    border: 1px solid #3b3b5c;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tarama-durum-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #a1a1aa;
}

.tarama-progress-bar {
    background: #1a1a3e;
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin-top: 4px;
}

.tarama-progress-ic {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    border-radius: 6px;
    transition: width 1s linear;
}

.btn-tarama-simdi {
    background: #22c55e;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-tarama-simdi:hover { opacity: 0.85; transform: scale(1.02); }
.btn-tarama-simdi:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.tarama-sinyal-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #2a2a4a;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 6px;
}

.tarama-sinyal-satir:hover { background: rgba(59, 130, 246, 0.1); }

.ts-saat { color: #71717a; font-size: 12px; min-width: 75px; }
.ts-sembol { font-weight: bold; font-size: 15px; min-width: 70px; }
.ts-degisim { flex: 1; font-size: 13px; }
.ts-skor { padding: 3px 8px; border-radius: 6px; font-size: 11px; color: #000; font-weight: bold; min-width: 32px; text-align: center; }
.ts-fiyat { color: #a1a1aa; font-size: 13px; min-width: 70px; text-align: right; }
/* ==================== YENİ STİLLER ==================== */

/* Portfoy grafik grid */
.portfoy-grafikler { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.pasta-container { display: flex; justify-content: center; padding: 10px; }
.pasta-container canvas { max-width: 280px; max-height: 280px; }
.perf-canvas-container { padding: 10px; }
.perf-canvas-container canvas { width: 100%; }

/* Rapor stilleri */
.rapor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0; }
.rapor-kart { background: var(--kart2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.rapor-kart span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.rapor-kart strong { font-size: 18px; display: block; }
.rapor-not { background: rgba(59,130,246,0.1); border: 1px solid #3b82f6; border-radius: 8px; padding: 12px; font-size: 13px; color: #60a5fa; margin-top: 10px; }

/* Ekonomik takvim */
.takvim-satir { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border2); flex-wrap: wrap; }
.takvim-tarih { font-size: 13px; color: var(--text-muted); min-width: 90px; }
.takvim-olay { font-weight: bold; flex: 1; }
.takvim-onem { font-size: 11px; font-weight: bold; min-width: 60px; }
.takvim-aciklama { font-size: 12px; color: var(--text-secondary); width: 100%; margin-top: 4px; padding-left: 102px; }

/* btn-sil */
.btn-sil { background: rgba(239,68,68,0.2); border: 1px solid #ef4444; color: #ef4444; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.btn-sil:hover { background: #ef4444; color: #fff; }

/* Mobile iyilestirmeler */
@media (max-width: 768px) {
    .portfoy-grafikler { grid-template-columns: 1fr; }
    .rapor-grid { grid-template-columns: repeat(2, 1fr); }
    .header-widget-satir { gap: 8px; }
    .doviz-widget, .bist-widget { padding: 4px 8px; font-size: 11px; }
    .tabs { top: 130px; }
}

@media (max-width: 480px) {
    .header h1 { font-size: 18px; }
    .header-widget-satir { flex-direction: column; align-items: center; gap: 6px; }
    .rapor-grid { grid-template-columns: repeat(2, 1fr); }
    .tabs { gap: 5px; padding: 10px; }
    .tab { padding: 8px 12px; font-size: 11px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .karsilastir-sonuc { grid-template-columns: 1fr; }
    .perf-ozet { grid-template-columns: repeat(2, 1fr); }
    .en-iyiler-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TAHMİN v2 + ML STILLERI
   ============================================================ */

/* En iyi 3 rozet grid */
.en-iyiler-grid { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; }

.rozet-kart {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    background: var(--kart);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: transform 0.2s;
}
.rozet-kart:hover { transform: translateY(-2px); }
.rozet-icon { font-size: 28px; margin-bottom: 6px; }
.rozet-sembol { font-size: 18px; font-weight: bold; color: var(--text); }
.rozet-etiket { font-size: 11px; margin-top: 4px; font-weight: bold; }
.rozet-skor { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.rozet-fiyat { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Dün sonuçları tablosu */
.dun-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.dun-tablo th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--border2); text-align: left; }
.dun-tablo td { padding: 8px 10px; border-bottom: 1px solid var(--border2); }
.dun-tablo tr:hover td { background: rgba(255,255,255,0.03); }

/* Tahmin kartları (MOD-A / MOD-B listesi) */
.tahmin-kart {
    background: var(--kart);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: background 0.2s;
}
.tahmin-kart:hover { background: rgba(255,255,255,0.05); }

/* Öğrenme durumu bar */
.ogrenme-satir { display: flex; align-items: center; gap: 10px; }
.ogrenme-etiket { min-width: 130px; font-size: 12px; color: var(--text-secondary); text-transform: capitalize; }
.ogrenme-bar-kap { flex: 1; background: rgba(255,255,255,0.08); border-radius: 4px; height: 10px; overflow: hidden; }
.ogrenme-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ogrenme-oran { min-width: 80px; text-align: right; font-size: 12px; font-weight: bold; }

/* ML Kart */
.ml-kart { background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.2); }

/* btn-mini */
.btn-mini { background: rgba(99,102,241,0.2); border: 1px solid #6366f1; color: #818cf8; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.btn-mini:hover { background: rgba(99,102,241,0.4); }

/* filtre-chip — performans sinyal geçmişi filtresi */
.filtre-chip { display: inline-block; padding: 2px 10px; border: 1px solid #3b3b5c; border-radius: 12px; cursor: pointer; color: #71717a; margin-left: 6px; transition: all 0.15s; }
.filtre-chip:hover { color: #a1a1aa; border-color: #71717a; }
.filtre-chip.aktif { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Toast bildirimi animasyonu */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Interaktif grafik container */
#interaktifGrafikContainer { width: 100%; overflow: hidden; }
#interaktifGrafikContainer > div { margin-bottom: 2px; }

/* Light mode grafik düzeltmesi */
.light-mode .grafik-baslik { color: #374151; }

/* Auth modal input light mode */
.light-mode #authModal input { border-color: #d1d5db; }
.light-mode #authModal input:focus { border-color: #7c3aed; outline: none; }

/* Kullanici panel */
#kullaniciPanel button:hover { opacity: 0.85; }