/* ---- Açık mod (light) — VARSAYILAN ve birincil tema (bare :root = güvenli düşüş, bkz. nexora.js v4).
   "Minimal" konsept: beyaz zemin, tek indigo vurgu rengi, ince nötr-gri çizgiler, düşük gölge.
   Kritik/uyarı/iyi anlamları (--danger/--alert/--success) marka rengiyle karışmasın diye kendi
   düz tonlarında. ---- */
:root {
    --ink: #F7F8FA;
    --panel: #FFFFFF;
    --panel-2: #F3F4F6;
    --line: #E5E7EB;
    --line-soft: #EEF0F2;
    --signal: #4F46E5;
    --signal-dim: #EEF0FF;
    --on-signal: #ffffff;
    --phosphor: #0D9488;
    --phosphor-dim: #E6FBF8;
    --alert: #B45309;
    --alert-dim: #FEF3E2;
    --danger: #DC2626;
    --danger-dim: #FEE7E7;
    --success: #16A34A;
    --success-dim: #DCFCE7;
    --on-success: #ffffff;
    --info: #2563EB;
    --info-dim: #DBEAFE;
    --potential: #7C3AED;
    --potential-dim: #EDE9FE;
    --text-hi: #111827;
    --text-mid: #6B7280;
    --text-low: #9CA3AF;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
    /* ---- "Komuta merkezi" katmanı (27.08.2026, Furkan talebi) — mevcut minimal dile EKLENİR,
       onu değiştirmez: yüzeyler artık hafif camsı (glass) + arka planda çok düşük opasiteli bir
       "aurora" dokusu var. Sinyal/fosfor/potansiyel renklerinden türetildiği için tema başına
       ayrı ayrı tanımlanır (bkz. dark blok) — sabit bir mor/mavi gradyanı kopyalamak yerine. ---- */
    --glass: color-mix(in srgb, var(--panel), transparent 26%);
    --glass-strong: color-mix(in srgb, var(--panel), transparent 10%);
    --shadow-glass: 0 14px 36px rgba(79, 70, 229, .10), 0 1px 2px rgba(16, 24, 40, .05);
    --aurora-a: rgba(79, 70, 229, .14);
    --aurora-b: rgba(13, 148, 136, .12);
    --aurora-c: rgba(124, 58, 237, .08);
}

/* ---- Koyu mod (dark) — isteğe bağlı ikincil tema (sağ-alt FAB, tercih localStorage'da).
   Aynı minimal dil: nötr antrasit zemin + aynı indigo vurgu rengi (ton açılmış, koyu zeminde
   kontrast için). Eskiden cam-göbeği "Ops Console/HUD" temasıydı; artık light ile aynı ailede. ---- */
:root[data-theme="dark"] {
    --ink: #0B0E14;
    --panel: #14161C;
    --panel-2: #1B1E26;
    --line: #2A2E38;
    --line-soft: #212530;
    --signal: #818CF8;
    --signal-dim: #22243A;
    --on-signal: #12131A;
    --phosphor: #2DD4BF;
    --phosphor-dim: #0F2624;
    --alert: #FBBF24;
    --alert-dim: #34290F;
    --danger: #F87171;
    --danger-dim: #3A1B1B;
    --success: #4ADE80;
    --success-dim: #17301F;
    --on-success: #0B1710;
    --info: #7DA6FF;
    --info-dim: #1B2540;
    --potential: #C4B5FD;
    --potential-dim: #2A2340;
    --text-hi: #F3F4F6;
    --text-mid: #9CA3AF;
    --text-low: #6B7280;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3);
    --glass: color-mix(in srgb, var(--panel), transparent 14%);
    --glass-strong: color-mix(in srgb, var(--panel), transparent 4%);
    --shadow-glass: 0 14px 36px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
    --aurora-a: rgba(129, 140, 248, .10);
    --aurora-b: rgba(45, 212, 191, .08);
    --aurora-c: rgba(196, 181, 253, .06);
}

.nexora-theme-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--panel); color: var(--text-mid);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .12); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0;
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.nexora-theme-fab:hover { transform: translateY(-2px); border-color: var(--signal); color: var(--signal); }
.nexora-theme-fab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 900px) { .nexora-theme-fab { right: 14px; bottom: 14px; width: 40px; height: 40px; } }

html, body { min-height: 100%; }
body { position: relative; margin: 0; color: var(--text-hi); background: var(--ink); font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: .91rem; }
/* Sabit "aurora" dokusu — çok düşük opasiteli, sayfayla birlikte KAYMAZ (fixed) ki uzun
   sayfalarda tekrar tekrar boyanmasın; z-index:-1 body'nin arkasında kalır, hiçbir öğenin
   tıklama/okunabilirliğini etkilemez. */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(640px 440px at 12% 4%, var(--aurora-a), transparent 60%),
        radial-gradient(700px 480px at 90% 2%, var(--aurora-b), transparent 62%),
        radial-gradient(760px 520px at 55% 32%, var(--aurora-c), transparent 65%);
}
a { color: var(--signal); }
h1, h2, h3, h4, h5 { color: var(--text-hi); font-family: 'Inter', 'Segoe UI Variable', sans-serif; font-weight: 700; letter-spacing: -.01em; }
h2 { margin-bottom: .35rem; font-size: clamp(1.4rem, 2vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p.text-muted { max-width: 850px; line-height: 1.7; }
.text-muted { color: var(--text-low) !important; }
code, .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.btn { min-height: 40px; padding: .52rem .92rem; border-radius: 8px; font-weight: 650; font-size: .82rem; box-shadow: none !important; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 34px; padding: .36rem .72rem; border-radius: 7px; font-size: .75rem; }
.btn-lg { min-height: 48px; }
.btn-primary { color: #ffffff; background: var(--signal); border-color: var(--signal); }
.btn-primary:hover, .btn-primary:focus { background: color-mix(in srgb, var(--signal), #fff 12%); border-color: color-mix(in srgb, var(--signal), #fff 12%); }
.btn-outline-primary { color: var(--signal); border-color: var(--signal-dim); background: transparent; }
.btn-outline-primary:hover { color: #ffffff; background: var(--signal); border-color: var(--signal); }
.btn-dark { color: var(--text-hi); background: var(--panel-2); border-color: var(--line); }
.btn-dark:hover { border-color: var(--text-low); }
.btn-outline-dark { color: var(--text-mid); border-color: var(--line); background: transparent; }
.btn-outline-dark:hover { color: var(--text-hi); border-color: var(--text-low); background: var(--panel-2); }
.btn-success { color: var(--on-success); background: var(--success); border-color: var(--success); }
.btn-success:hover { background: color-mix(in srgb, var(--success), #fff 12%); border-color: color-mix(in srgb, var(--success), #fff 12%); }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger), #000 12%); border-color: color-mix(in srgb, var(--danger), #000 12%); }

.form-label { margin-bottom: .42rem; color: var(--text-mid); font-size: .76rem; font-weight: 650; }
.form-control, .form-select {
    min-height: 44px;
    padding: .62rem .78rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-hi);
    background-color: var(--panel);
    font-size: .86rem;
}
.form-control-sm, .form-select-sm { min-height: 36px; padding: .38rem .65rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal), transparent 85%); }
.form-control::placeholder { color: var(--text-low); }
.form-check-input { background-color: var(--panel); border-color: var(--line); }
.form-check-input:checked { background-color: var(--signal); border-color: var(--signal); }
.form-check-label { color: var(--text-mid); }
select.form-select option { background: var(--panel); color: var(--text-hi); }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--shadow); }
.card-header { padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--text-hi); font-weight: 650; }
.card-body { padding: 20px; }

.alert { border: 0; border-radius: 9px; padding: 14px 16px; font-size: .84rem; }
.alert-success { color: var(--success); background: var(--success-dim); }
.alert-danger { color: var(--danger); background: var(--danger-dim); }
.alert-warning { color: var(--alert); background: var(--alert-dim); }
.alert-info { color: var(--signal); background: var(--signal-dim); }

.table-responsive { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass-strong); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--shadow); }
.table { margin-bottom: 0; color: var(--text-mid); font-size: .8rem; }
.table > :not(caption) > * > * { padding: .78rem .9rem; border-bottom-color: var(--line-soft); background: transparent; color: inherit; }
.table thead th { color: var(--text-low) !important; background: var(--panel-2) !important; border-bottom: 1px solid var(--line); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background .15s ease; color: var(--text-hi); }
.table-hover > tbody > tr:hover > * { background: var(--panel-2); }
.table code { padding: 4px 7px; border-radius: 6px; color: var(--signal); background: var(--signal-dim); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; }
.badge { padding: .43em .65em; border-radius: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .02em; }
.badge.bg-success { background: var(--success-dim) !important; color: var(--success) !important; }
.badge.bg-danger { background: var(--danger-dim) !important; color: var(--danger) !important; }
.badge.bg-warning { background: var(--alert-dim) !important; color: var(--alert) !important; }
.badge.bg-info { background: var(--signal-dim) !important; color: var(--signal) !important; }
.badge.bg-secondary { background: var(--panel-2) !important; color: var(--text-mid) !important; border: 1px solid var(--line); }
.badge.bg-light { background: var(--panel-2) !important; color: var(--text-mid) !important; }

.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--alert) !important; }
.text-info { color: var(--signal) !important; }

.nav-tabs { gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.nav-tabs .nav-link { border: 0 !important; border-radius: 7px; color: var(--text-mid); font-size: .8rem; font-weight: 650; }
.nav-tabs .nav-link.active { color: var(--on-signal); background: var(--signal); box-shadow: none; }
.nav-pills .nav-link { color: var(--text-mid); border-radius: 7px; font-weight: 650; }
.nav-pills .nav-link.active { color: var(--on-signal); background: var(--signal); }
.list-group { border-radius: 10px; overflow: hidden; }
.list-group-item { padding: .8rem .9rem; border-color: var(--line); background: var(--panel); color: var(--text-hi); font-size: .82rem; }
.list-group-item.active { color: var(--on-signal); background: var(--signal); border-color: var(--signal); }
.list-group-item-action:hover { background: var(--panel-2); color: var(--text-hi); }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading p { margin: 4px 0 0; color: var(--text-mid); }
.surface-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--shadow); }
.toolbar-panel { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); backdrop-filter: blur(14px) saturate(160%); box-shadow: var(--shadow); }

.metric-card { position: relative; min-height: 122px; overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--metric-color); border-radius: var(--radius); color: var(--text-hi); background: var(--panel); box-shadow: var(--shadow); }
.metric-card .card-body { position: relative; z-index: 1; padding: 20px; }
.metric-card .fs-3 { margin: 3px 0 0; color: var(--metric-color); font-size: 1.9rem !important; letter-spacing: -.03em; }

.recipient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.recipient-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.recipient-card > header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: var(--panel-2); }
.recipient-card > header > div { display: flex; align-items: center; gap: 11px; }
.recipient-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--signal); background: var(--signal-dim); font-size: .82rem; font-weight: 700; }
.recipient-body { padding: 18px; }
.recipient-body textarea { resize: vertical; }
.form-hint { margin-top: 5px; color: var(--text-low); font-size: .7rem; }
.recipient-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text-mid); font-size: .75rem; }
.recipient-message { padding: 10px 18px; font-size: .75rem; font-weight: 600; }
.recipient-message.success { color: var(--success); background: var(--success-dim); }
.recipient-message.error { color: var(--danger); background: var(--danger-dim); }

.mcp-panel { max-width: 920px; }
.section-kicker { display: block; margin-bottom: 5px; color: var(--signal); font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.form-switch .form-check-input { width: 2.6em; height: 1.35em; background-color: var(--panel-2); }
.mcp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcp-tools > div { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.mcp-tools code { color: var(--signal); font-weight: 700; }
.mcp-tools span { color: var(--text-low); font-size: .72rem; }

.login-shell { max-width: 440px; margin: 6vh auto 0; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.login-shell h1 { margin-bottom: 5px; }

/* Modül merkezi + komut çubuğu stilleri global tutulur; dağıtımda CSS izolasyon önbelleği eski
   kalsa da kartlar bozulmaz. "Big Shoulders Display" yalnız bu bölümde ve komut çubuğunda
   kullanılır — site geneli gövde yazı tipi (Inter) değişmez, kapsam bilinçli dar tutulur. */
@keyframes hub-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .hero-status i, .bt-led i, .dense-led.live, .dense-led.stale, .radar-dot.risk { animation:none !important; } }

.dashboard-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:24px; padding:12px 0 8px; flex-wrap:wrap; }
.dashboard-hero h1 { max-width:640px; margin:5px 0 9px; font-family:'Big Shoulders Display','Inter',sans-serif; font-weight:700; font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.04; letter-spacing:.005em; }
.dashboard-hero p { max-width:56ch; margin:0; color:var(--text-mid); font-size:.98rem; line-height:1.65; }
.hero-status { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }
.hero-status i { width:8px; height:8px; border-radius:50%; background:var(--success); animation:hub-pulse 2.4s ease-in-out infinite; }
.hero-status span { display:grid; }
.hero-status strong { font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:.78rem; color:var(--text-hi); letter-spacing:.02em; }
.hero-status small { color:var(--text-low); font-size:.65rem; }
.hero-status.warning i { background:var(--alert); }

/* Komut çubuğundaki sabitlenmiş modül/işlem düğmeleri — NavMenu.razor (sabit modüller) ve
   MainLayout.razor (çıkış düğmesi) birlikte kullanır; iki AYRI bileşenin scoped CSS'i (farklı
   b-xxxx özgüllüğü) arasında paylaşılamayacağı için burada, global düzeyde tanımlanır. */
.cb-pin { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-mid); flex: none; cursor: pointer; text-decoration: none; }
.cb-pin svg { width: 16px; height: 16px; }
.cb-pin:hover { border-color: var(--signal); color: var(--signal); }

/* ---- Buybox Radarı — 14 takip edilen carinin risk konumu; KayipUrunler'den hesaplanır
   (bkz. Dashboard.razor RadarNoktalariHesapla), dekoratif değil GERÇEK veriye bağlı.
   27.08.2026, 1. tur: nişangah gibi duran eksen çizgileri (.radar-axis) ve dönen "tarama ışını"
   (.radar-sweep) kaldırıldı, yerine sabit "halo" (nefes alan iç parlama) kondu.
   27.08.2026, 2. tur: risk noktalarındaki genişleyip kaybolan "radar-ping" halkası (sonar
   "contact" blip'i) kaldırıldı.
   27.08.2026, 3. tur (Furkan: "düzelt"): merkezi çevreleyen 3 iç halka (.radar-ring, r1/r2/r3)
   de kaldırıldı — bağımsız incelemede eksen/tarama/ping gitmiş olsa bile üç iç içe halka +
   ortadaki "Biz" noktasının tek başına nişangah/hedef tahtası (bullseye) gibi okunabileceği
   işaretlendi. Artık ortada yalnız halo + noktalar var; .radar-center bir "merkez düğüm" gibi
   duruyor (ağ/kümeleme hissi), nişan tahtası değil. HALKA+NOKTA'daki NOKTA yerleşimi (gerçek
   veri) aynı kalır — yalnız etraflarındaki hedef-tahtası çizgileri gitti. ---- */
.radar-block { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.radar-wrap { position:relative; width:180px; height:180px; border-radius:50%; background:var(--glass); backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--line); flex:none; box-shadow:var(--shadow-glass); }
.radar-halo { position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--phosphor), transparent 78%), transparent 72%); animation:radar-breathe 5s ease-in-out infinite; }
@keyframes radar-breathe { 0%,100% { opacity:.55; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
.radar-dot { position:absolute; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-dim); z-index:2; }
/* 27.08.2026: eskiden burada hub-pulse'a ek olarak "radar-ping" (genişleyip kaybolan halka —
   sonar/radar "contact" blip'i) de vardı; bağımsız gözden geçirme bunu askeri/gözetim çağrışımı
   olarak işaretledi. hub-pulse (uygulama genelinde canlı/acil göstergelerde kullanılan sade
   opaklık nabzı) TEK BAŞINA kalır — dikkat çekme işlevini korur, sonar hissi gitmiş olur. */
.radar-dot.risk { width:9px; height:9px; margin:-4.5px; background:var(--danger); box-shadow:0 0 0 4px var(--danger-dim); animation:hub-pulse 2.2s ease-in-out infinite; animation-delay:var(--pd,0s); z-index:3; }
.radar-dot.risk.mid { background:var(--alert); box-shadow:0 0 0 4px var(--alert-dim); }
.radar-tag { position:absolute; white-space:nowrap; font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; background:var(--panel); border:1px solid var(--line); color:var(--text-mid); z-index:4; }
.radar-center { position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px; border-radius:3px; background:var(--signal); box-shadow:0 0 0 5px var(--signal-dim); z-index:3; }
.radar-empty { display:grid; place-items:center; height:100%; padding:16px; text-align:center; color:var(--text-low); font-size:11px; }
.radar-status { display:flex; flex-direction:column; gap:8px; min-width:180px; }
.radar-status strong { font-family:'Big Shoulders Display','Inter',sans-serif; font-weight:700; font-size:15px; }
.radar-status > small { color:var(--text-low); font-size:11px; }
.radar-legend { display:flex; gap:12px; margin:2px 0 4px; }
.radar-legend span { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-mid); }
.radar-legend i { width:7px; height:7px; border-radius:50%; flex:none; }
.radar-legend i.risk { background:var(--danger); } .radar-legend i.safe { background:var(--success); }
@media (prefers-reduced-motion:reduce) { .radar-halo { animation:none; } }

/* ---- KPI şeridi — mevcut panel-kpi/kpi-ring temeli korunur; çentikli halka + doldurma
   animasyonu eklenir (bkz. aşağıdaki .panel-kpi-grid bloğu, DEĞİŞMEDİ). Sahte/örnek trend
   çizgisi EKLENMEDİ — Dashboard.razor'da KPI'lar için gerçek zaman serisi verisi yok; olmayan
   veriyi süsleme amaçlı uydurmak bu kod tabanının veri dürüstlüğü ilkesine aykırı olurdu. ---- */
@property --pct { syntax:'<number>'; inherits:true; initial-value:0; }
.kpi-ring .ring-gauge { --pct:0; transition:--pct 1.1s cubic-bezier(.22,.8,.25,1); }
.kpi-ring .ring-gauge::after { content:''; position:absolute; inset:-7px; border-radius:50%; background:repeating-conic-gradient(var(--line) 0deg .6deg, transparent .6deg 9deg); z-index:-1; }

/* ---- Öncelikli sinyaller (bento) — en etkili 3 modül; module-card'ın büyütülmüş, trend
   çizgili hali. Kalan modüller artık tek tip kart yerine yoğun listede (bkz. .dense-list). ---- */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-head h2 { margin:0; font-family:'Big Shoulders Display','Inter',sans-serif; font-weight:700; font-size:19px; }
.section-head span { font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:11px; color:var(--text-low); }
.bento-hero { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
.bento-tile { position:relative; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--shadow-glass); display:flex; flex-direction:column; min-height:196px; text-decoration:none; color:var(--text-hi); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; overflow:hidden; }
.bento-tile::before { content:''; position:absolute; top:0; left:16px; right:16px; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg, var(--signal), transparent); opacity:.7; }
.bento-tile:hover { color:var(--text-hi); transform:translateY(-3px); border-color:var(--signal); box-shadow:0 16px 32px rgba(79,70,229,.14); }
.bt-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bt-symbol { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--signal-dim); color:var(--signal); font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-weight:800; font-size:15px; }
.bt-led { display:flex; align-items:center; gap:5px; font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--phosphor); text-transform:uppercase; }
.bt-led i { width:5px; height:5px; border-radius:50%; background:var(--phosphor); animation:hub-pulse 2.4s ease-in-out infinite; }
.bt-led.stale { color:var(--alert); } .bt-led.stale i { background:var(--alert); }
.bt-led.waiting { color:var(--text-low); } .bt-led.waiting i { background:var(--text-low); animation:none; }
.bento-tile h3 { margin:0 0 6px; font-family:'Big Shoulders Display','Inter',sans-serif; font-weight:700; font-size:16.5px; }
.bento-tile p { margin:0 0 10px; color:var(--text-mid); font-size:12.5px; line-height:1.55; }
.bt-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:auto; }
.bt-metrics span { display:grid; padding:9px 10px; border:1px solid var(--line-soft); border-radius:9px; background:var(--panel-2); }
.bt-metrics strong { font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:1.05rem; color:var(--text-hi); }
.bt-metrics small { color:var(--text-low); font-size:.64rem; }
.bt-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:12px; font-weight:700; color:var(--signal); }

/* ---- Diğer modüller — yoğun liste; geri kalan ~22 modül için tekdüze büyük kart yerine
   taranabilir tek satır (sembol + ad + açıklama + metrik + tazelik + ok). ---- */
.dense-list { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--glass); backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--shadow-glass); margin-bottom:20px; }
.dense-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit; }
.dense-row:last-child { border-bottom:none; }
.dense-row:hover { background:var(--panel-2); color:inherit; }
.dense-symbol { width:30px; height:30px; border-radius:8px; background:var(--panel-2); color:var(--text-mid); display:grid; place-items:center; font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-weight:700; font-size:12px; flex:none; }
.dense-name { font-weight:650; font-size:13.5px; min-width:190px; color:var(--text-hi); }
.dense-desc { color:var(--text-mid); font-size:12px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dense-metric { font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-size:12px; color:var(--text-hi); flex:none; min-width:64px; text-align:right; }
.dense-led { width:6px; height:6px; border-radius:50%; background:var(--line); flex:none; }
.dense-led.live { background:var(--phosphor); animation:hub-pulse 2.4s ease-in-out infinite; }
.dense-led.stale { background:var(--alert); animation:hub-pulse 2.4s ease-in-out infinite; }
.dense-row .chev { color:var(--text-low); flex:none; }

.dashboard-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); box-shadow:var(--shadow-glass); }
.dashboard-strip>div { display:grid; gap:4px; padding:20px; background:var(--glass-strong); backdrop-filter:blur(14px) saturate(160%); }.dashboard-strip span { color:var(--phosphor); font-size:.59rem; font-weight:700; letter-spacing:.08em; }.dashboard-strip strong { font-size:.88rem; color:var(--text-hi); }.dashboard-strip small { color:var(--text-low); line-height:1.5; }

/* Panel hero (KPI + Bugun dikkat + Buybox hizli kart) */
.panel-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.panel-kpi { position:relative; background:var(--glass); backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 14px; box-shadow:var(--shadow-glass); overflow:hidden; }
.panel-kpi::before { content:''; position:absolute; top:0; left:14px; right:14px; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg, var(--kpi-color, var(--signal)), transparent); opacity:.7; }
.panel-kpi .label { font-size:12px; color:var(--text-mid); margin-bottom:10px; }
.panel-kpi .value { font-family:'Cascadia Mono','IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--text-hi); }
.panel-kpi .value .unit { font-size:13px; color:var(--text-mid); font-weight:400; margin-left:3px; }
.panel-kpi .delta { font-size:11.5px; margin-top:6px; color:var(--text-low); }
.panel-kpi .delta.up { color:var(--success); }
.panel-kpi .delta.down { color:var(--alert); }
/* Hero KPI (Buybox oranı) — düz sayı yerine gerçek veriye bağlı halka gösterge */
.panel-kpi.kpi-ring { display:flex; flex-direction:column; align-items:center; text-align:center; }
.panel-kpi.kpi-ring .label { margin-bottom:6px; }
.kpi-ring .ring-gauge { --pct:0; position:relative; width:74px; height:74px; margin:2px 0 6px; border-radius:50%; background:conic-gradient(var(--signal) calc(var(--pct)*1%), var(--line) 0); }
.kpi-ring .ring-gauge::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--panel); }
.kpi-ring .ring-gauge .value { position:relative; z-index:1; display:grid; place-items:center; width:100%; height:100%; font-size:1rem; }
.panel-row2 { display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-bottom:20px; }
.panel-card { position:relative; background:var(--glass); backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-glass); }
.panel-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.panel-card-head h2 { font-size:14.5px; }
.panel-card-head .meta { font-size:11px; color:var(--text-low); }
.panel-feed { display:flex; flex-direction:column; gap:0; max-height:280px; overflow:auto; }
.panel-feed-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.panel-feed-item:last-child { border-bottom:none; }
.panel-feed-empty { padding:18px 0; color:var(--text-low); font-size:12.5px; }
.panel-sev { width:7px; height:7px; border-radius:50%; margin-top:5px; flex:none; background:var(--danger); animation:hub-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .panel-sev { animation:none; } }
.panel-feed-item .t { font-size:13px; line-height:1.45; color:var(--text-hi); }
.panel-feed-item .t b { font-weight:600; }
.panel-feed-item .m { font-size:11px; color:var(--text-low); margin-top:2px; }
.panel-robot-status { display:flex; align-items:center; justify-content:space-between; background:var(--panel-2); border-radius:8px; padding:12px 14px; margin-bottom:12px; gap:10px; }
.panel-robot-status .k { font-size:11.5px; color:var(--text-mid); }
.panel-robot-status .v { font-family:'IBM Plex Mono',monospace; font-size:13px; margin-top:3px; color:var(--text-hi); }
.panel-mini-list { display:flex; flex-direction:column; gap:8px; }
.panel-mini-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--line-soft); color:var(--text-hi); }
.panel-mini-row:last-child { border-bottom:none; }
.panel-mini-row .gap { font-family:'IBM Plex Mono',monospace; color:var(--alert); flex:none; }
.panel-mini-empty { color:var(--text-low); font-size:12.5px; padding:6px 0; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: .75rem; }
.blazor-error-boundary { padding: 1rem; border-radius: 10px; color: #fff; background: var(--danger); }
h1:focus { outline: none; }

@media (max-width: 767px) {
    .page-heading { align-items: flex-start; flex-direction: column; }
    .btn-group { width: 100%; overflow-x: auto; }
    .table > :not(caption) > * > * { padding: .66rem .7rem; }
    .metric-card { min-height: 112px; }
    .mcp-tools { grid-template-columns: 1fr; }
    .panel-kpi-grid { grid-template-columns: repeat(2,1fr); }
    .panel-row2 { grid-template-columns: 1fr; }
}
@media (max-width:900px) { .bento-hero { grid-template-columns:1fr; } .dense-desc { display:none; } .dense-name { min-width:0; flex:1; } }
@media (max-width:700px) { .dashboard-hero { align-items:flex-start; flex-direction:column; } .dashboard-strip { grid-template-columns:1fr; } .radar-block { width:100%; } }

/* Bir bileşenin code bloğunda inşa edilip MarkupString ile basılan ham SVG, Blazor'ın derleme-zamanı
   CSS izolasyonundan (b-XXXXXXXX taranması) hiç geçmez; .razor.css'teki scoped kural bu yüzden
   SVG içeriğine asla ulaşamaz (yalnız .razor dosyasının kendi düz markup'ı ulaşır). Ürün Satış
   Trendi'ndeki hem satır içi seyir çizgisi (Sparkline()) hem paylaşılan aylık grafik bileşeni
   (AylikTrendGrafik.razor, Grafik() metodu) bu yüzden burada, genel sayfada tanımlanır; sınıf
   adları yeterince özgün (spark ve atg önekleri) olduğundan çakışma riski yok.
   (01.08.2026, üst grafik "anlaşılmıyor" şikayeti incelenirken bulundu: ızgara/çizgi/etiketler
   scoped CSS'e güvendiği için hiç boyanmıyordu; sparkline de aynı nedenle hep görünmezdi.) */
.spark{display:block;width:68px;height:20px;overflow:visible}
.spark polyline{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark line{stroke:var(--text-low);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
tbody tr.rising .spark polyline{stroke:var(--success)}
tbody tr.falling .spark polyline{stroke:var(--danger)}

.atg-svg{display:block;width:100%;height:auto;overflow:visible}
.atg-grid{stroke:var(--line-soft);stroke-width:1}
.atg-grid-base{stroke:var(--line)}
.atg-grid-etiket{font-size:13px;fill:var(--text-low);font-variant-numeric:tabular-nums}
.atg-hatch-bg{fill:var(--panel-2)}
.atg-hatch-line{stroke:var(--text-low);stroke-width:2;opacity:.55}
.atg-deger{font-size:14.5px;font-weight:800;fill:var(--text-mid);font-variant-numeric:tabular-nums}
.atg-ay-etiket{font-size:12.5px;font-weight:700;fill:var(--text-low)}
.atg-kismi-etiket{font-style:italic}
.atg-bar-g.atg-ref .atg-deger{fill:var(--signal)}
.atg-bar-g.atg-ref .atg-ay-etiket{fill:var(--signal);font-weight:900}
.atg-line{fill:none;stroke:var(--signal);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.atg-line-kismi{stroke-dasharray:5 5;opacity:.7}
.atg-nokta{fill:var(--panel);stroke:var(--signal);stroke-width:2.2}
.atg-grad-a{stop-color:var(--signal)}
.atg-grad-b{stop-color:color-mix(in srgb, var(--signal), #000 20%)}
@media (max-width:640px) { .atg-deger{display:none} }