/* Beyin sayfası (#/beyin): hafıza grafiği + canlı akış. Renk dili 8791 beyin görselinden (sablon.html), panel temasına uyarlı.
   Canvas renkleri buradaki --g-* değişkenlerinden okunur (beyin.js renkleriOku). Satır içi stil yok (CSP). */

.beyin-sayfa {
  --g-semantik: #0f8f83; --g-epizodik: #7348d6; --g-prosedurel: #2c68c9; --g-duygusal: #c83d88; --g-meta: #b07514;
  --g-varlik: #4a4843; --g-proje: var(--vurgu); --g-oturum: #64748b; --g-kanal: #4f8a10; --g-merkez: #1f1e1c;
  --g-yazi: var(--yazi); --g-hale: rgba(250, 249, 247, .92); --g-secim: var(--vurgu); --g-arama: #d18a00;
  --g-hayalet: #8c8a83; --g-ipucu: var(--yuzey); --g-cekirdek: #ffffff;
  --g-a-gelen: var(--yesil); --g-a-giden: var(--mavi); --g-a-is: var(--turuncu); --g-a-denetim: #7c3aed; --g-a-tur: var(--sari);
  --g-kenar-alfa: .2; --g-isik: source-over;
  --g-zemin: radial-gradient(ellipse at 50% 45%, var(--yuzey) 0%, var(--yuzey-2) 70%, var(--yuzey-3) 130%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .beyin-sayfa {
    --g-semantik: #5eead4; --g-epizodik: #a78bfa; --g-prosedurel: #60a5fa; --g-duygusal: #f472b6; --g-meta: #fbbf24;
    --g-varlik: #ffffff; --g-proje: #fb923c; --g-oturum: #94a3b8; --g-kanal: #a3e635; --g-merkez: #ffffff;
    --g-hale: rgba(4, 6, 13, .85); --g-secim: #fbbf24; --g-arama: #f9a8d4; --g-hayalet: #8b95b8; --g-ipucu: #11152a; --g-cekirdek: #ffffff;
    --g-a-denetim: #c4b5fd; --g-kenar-alfa: .16; --g-isik: lighter;
    --g-zemin: radial-gradient(ellipse at 50% 45%, rgba(60, 40, 140, .22) 0%, rgba(0, 0, 0, 0) 70%), #04060d;
  }
}
:root[data-theme="dark"] .beyin-sayfa {
  --g-semantik: #5eead4; --g-epizodik: #a78bfa; --g-prosedurel: #60a5fa; --g-duygusal: #f472b6; --g-meta: #fbbf24;
  --g-varlik: #ffffff; --g-proje: #fb923c; --g-oturum: #94a3b8; --g-kanal: #a3e635; --g-merkez: #ffffff;
  --g-hale: rgba(4, 6, 13, .85); --g-secim: #fbbf24; --g-arama: #f9a8d4; --g-hayalet: #8b95b8; --g-ipucu: #11152a; --g-cekirdek: #ffffff;
  --g-a-denetim: #c4b5fd; --g-kenar-alfa: .16; --g-isik: lighter;
  --g-zemin: radial-gradient(ellipse at 50% 45%, rgba(60, 40, 140, .22) 0%, rgba(0, 0, 0, 0) 70%), #04060d;
}

/* ───── yerleşim ───── */
.sayfa-ic.beyin-sayfa { max-width: none; padding: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.beyin-arac { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cizgi); background: var(--zemin); min-width: 0; }
.beyin-arac-satir { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.beyin-baslik { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.beyin-sayilar { white-space: nowrap; }
.beyin-ara { flex: 0 1 280px; min-width: 0; margin-left: auto; }
.beyin-ara-sonuc { white-space: nowrap; min-width: 0; }
.beyin-ara-sonuc:empty { display: none; }
.beyin-suzgecler { justify-content: space-between; }
.beyin-cipler { min-width: 0; }
.beyin-cipler .cip-dugme { height: 28px; padding: 0 10px; font-size: 12.5px; }
.beyin-cip-sayi { opacity: .65; font-variant-numeric: tabular-nums; }
.graf-yok .beyin-suzgecler, .graf-yok .beyin-ara, .graf-yok .beyin-yakinlik, .graf-yok .beyin-lejant { display: none; }

.beyin-govde { flex: 1; min-height: 0; display: flex; min-width: 0; }
.beyin-tuval-kap { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--g-zemin); }
.beyin-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.beyin-tuval.isaretci { cursor: pointer; }
.beyin-tuval.kaydiriliyor, .beyin-tuval.surukleniyor { cursor: grabbing; }

.beyin-bos {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px; text-align: center; color: var(--yazi);
}
.beyin-bos strong { font-size: 16px; }
.beyin-bos span { max-width: 380px; }

.beyin-yakinlik {
  position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 3px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r2); box-shadow: var(--golge-1);
}
.beyin-sigdir { font-size: 16px; line-height: 1; }
.beyin-lejant {
  position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; pointer-events: none;
  color: var(--soluk); font-size: 11.5px;
}
.beyin-lejant span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.beyin-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--g-hayalet); }
.beyin-nokta.n-semantik { background: var(--g-semantik); }
.beyin-nokta.n-epizodik { background: var(--g-epizodik); }
.beyin-nokta.n-prosedurel { background: var(--g-prosedurel); }
.beyin-nokta.n-duygusal { background: var(--g-duygusal); }
.beyin-nokta.n-meta { background: var(--g-meta); }
.beyin-nokta.n-varlik { background: var(--g-varlik); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.beyin-nokta.n-proje { background: var(--g-proje); }
.beyin-nokta.n-oturum { background: var(--g-oturum); }
.beyin-nokta.n-kanal { background: var(--g-kanal); }
.beyin-nokta.n-merkez { background: var(--g-merkez); box-shadow: 0 0 0 2px var(--vurgu-zemin); }

/* ───── düğüm ayrıntısı (sağ yan panel) ───── */
.beyin-detay {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(340px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r3); box-shadow: var(--golge-2); padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.beyin-detay[hidden] { display: none; }
.beyin-detay-bas { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.beyin-detay-bas .beyin-nokta { margin-top: 6px; width: 11px; height: 11px; }
.beyin-detay-bas h2 { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.beyin-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; }
.beyin-dl dt { color: var(--soluk); }
.beyin-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.beyin-ozet { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--yazi-2); }
.beyin-detay .dugme { align-self: flex-start; }
.beyin-detay-alt { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); }
.beyin-komsular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.beyin-komsu {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left; font: inherit; font-size: 13px; color: var(--yazi);
  background: none; border: 0; border-radius: var(--r1); padding: 5px 6px; cursor: pointer;
}
.beyin-komsu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beyin-komsu:hover, .beyin-komsu:focus-visible { background: var(--yuzey-2); }

/* ───── canlı akış ───── */
.beyin-akis { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--cizgi); background: var(--yuzey); min-width: 0; }
.beyin-akis-bas {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--cizgi);
  background: none; color: var(--yazi); font: inherit; cursor: pointer; text-align: left;
}
.beyin-akis-bas:hover { background: var(--yuzey-2); }
.beyin-akis-ok { margin-left: auto; display: inline-flex; color: var(--soluk); transition: transform var(--gecis); }
.beyin-akis.kapali .beyin-akis-ok { transform: rotate(-90deg); }
.beyin-akis.kapali .beyin-akis-liste { display: none; }
.beyin-akis.kapali { width: auto; }
.beyin-canli { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 0 var(--yesil); animation: beyin-canli 2s infinite; }
@keyframes beyin-canli { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yesil) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.beyin-akis-liste { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.beyin-akis-bos { padding: 16px 14px; }
.beyin-olay-kap { position: relative; border-bottom: 1px solid var(--cizgi); min-width: 0; }
.beyin-olay-kap.yeni { animation: beyin-yeni 1.6s ease-out; }
@keyframes beyin-yeni { from { background: var(--vurgu-zemin); } to { background: transparent; } }
.beyin-olay {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; padding: 8px 14px; border: 0; background: none;
  color: var(--yazi); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.beyin-olay:hover, .beyin-olay:focus-visible { background: var(--yuzey-2); }
.beyin-olay-ust { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 56px; }
.beyin-olay-ust time { font-variant-numeric: tabular-nums; }
.beyin-olay-yol { font-weight: 500; overflow-wrap: anywhere; }
.beyin-olay-ozet { font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.beyin-olay-git { position: absolute; top: 7px; right: 12px; }
.olay-rozet {
  --o: var(--soluk); display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600;
  color: var(--o); background: color-mix(in srgb, var(--o) 15%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.olay-rozet.o-gelen { --o: var(--g-a-gelen); }
.olay-rozet.o-giden { --o: var(--g-a-giden); }
.olay-rozet.o-is { --o: var(--g-a-is); }
.olay-rozet.o-denetim { --o: var(--g-a-denetim); }
.olay-rozet.o-tur { --o: var(--g-a-tur); }

/* ───── mobil: tam genişlik graf, liste altta ───── */
@media (max-width: 900px) {
  .sayfa-ic.beyin-sayfa { height: auto; min-height: 100%; }
  .beyin-arac { padding: 8px 12px; }
  .beyin-ara { flex: 1 1 100%; margin-left: 0; order: 3; }
  .beyin-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; padding-bottom: 2px; }
  .beyin-cipler::-webkit-scrollbar { display: none; }
  .beyin-cipler .cip-dugme { flex: none; height: 32px; }
  .beyin-govde { flex-direction: column; flex: none; }
  .beyin-tuval-kap { flex: none; height: 62vh; height: 62dvh; min-height: 300px; }
  .beyin-detay { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 50%; }
  .beyin-akis, .beyin-akis.kapali { width: auto; border-left: 0; border-top: 1px solid var(--cizgi); }
  .beyin-akis-liste { overflow: visible; flex: none; }
  .graf-yok .beyin-tuval-kap { height: auto; min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .beyin-canli, .beyin-olay-kap.yeni { animation: none; }
}