/* Drill-down detay overlay. Paylaşılan WebGL canvas (#scene-canvas) z-index 5
   ile en üstte ve şeffaf; overlay z-index 2 ile onun ALTINDA. Böylece canvas,
   detay 3D sahnesini .detail-scene bölgesine üstten çizer; overlay arka planı
   ise alttaki kartları (z-index 1) örter. */

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 9, 14, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.detail-overlay.detail-visible { opacity: 1; }
.detail-overlay[hidden] { display: none; }

/* overlay açıkken arka plan kaymasın */
body.detail-open { overflow: hidden; }

/* tıklanabilir kart ipucu */
.card[data-detail] { cursor: pointer; transition: border-color .2s, transform .2s; }
.card[data-detail]:hover { border-color: var(--line-2); }
.card[data-detail]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.detail-panel {
  --accent: var(--teal);
  width: min(1180px, 96vw);
  max-height: 92dvh;
  overflow: auto;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  will-change: transform;
}

/* ---- başlık ---- */
.detail-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.detail-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 10px;
}
.detail-title::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.detail-sub { display: block; color: var(--tx-mut); font-size: 13px; margin-top: 4px; }
.detail-close {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  color: var(--tx-dim); font-size: 16px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.detail-close:hover { color: var(--tx); border-color: var(--line-2); background: rgba(255,255,255,0.09); }

/* ---- yerleşim: sol 3D + sağ veri ---- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 18px;
}
.detail-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.detail-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-grid[hidden], .detail-bd[hidden] { display: none; }  /* author display'i [hidden]'ı ezmesin */

/* 3D viewport — ŞEFFAF; üstteki paylaşılan canvas buraya çizer */
.detail-scene {
  position: relative;
  min-height: 320px; flex: 1 1 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 260px at 50% 12%, rgba(126,240,200,0.06), transparent 70%),
    rgba(255,255,255,0.015);
}
.detail-scene-fallback {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  color: var(--tx-mut); font-size: 13px; text-align: center; padding: 20px;
}
.detail-scene:not(.has-3d):not(.is-icon):not(.is-flow) .detail-scene-fallback { display: flex; }
body.no-webgl .detail-scene:not(.is-icon):not(.is-flow) .detail-scene-fallback { display: flex; }

/* düz ikon modu (3D yerine) */
.detail-scene.is-icon .detail-scene-fallback { display: none; }
.detail-scene-icon {
  position: absolute; inset: 0; margin: auto;
  width: clamp(120px, 42%, 240px); height: auto;
  filter: invert(1) drop-shadow(0 8px 26px rgba(126, 240, 200, 0.28));
  opacity: 0.95;
}
/* kendi renkleri olan SVG ikonlar (ör. saha-uretim) — invert uygulama */
.detail-scene-icon.colored {
  width: clamp(220px, 60%, 420px);
  filter: drop-shadow(0 8px 26px rgba(74, 168, 255, 0.25));
}

/* ---- enerji-akış şeması (Tesis Tüketim detayı) ---- */
.detail-scene.is-flow .detail-scene-fallback { display: none; }
.flow-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; }
.flow-svg { width: 100%; height: 100%; max-width: 720px; }
.flow-svg text { font-family: "Space Grotesk", system-ui, sans-serif; }
.flow-svg .mono { font-family: "JetBrains Mono", monospace; fill: #fbbf24; } /* düğüm isimleri amber */
.fl-lab { fill: var(--tx-mut); font-size: 11px; letter-spacing: .08em; font-family: "JetBrains Mono", monospace; }
.fl-val { font-size: 23px; font-weight: 700; font-family: "JetBrains Mono", monospace; }
.fl-u { fill: var(--tx-mut); font-size: 11px; }
.flow-line { fill: none; stroke-width: 3; stroke-dasharray: 6 9; stroke-linecap: round; opacity: .9; }
@keyframes flow-move { to { stroke-dashoffset: -30; } }
.flow-anim { animation: flow-move 1s linear infinite; }
.flow-up { animation-direction: reverse; }

/* ---- akış düzeni (Tüketim / Saha Üretim detayı) ---- */
/* Üstte büyük akış görseli tek ekrana sığar; alta eklenen içerik (metrikler,
   grafik, İNVERTER listesi) taşarsa panel KAYDIRILIR (eskiden overflow:hidden
   ile kırpılıp inverter paneli görünmüyordu). */
.detail-panel.flow-layout { width: min(1560px, 97vw); height: 96dvh; max-height: 96dvh; overflow: auto; display: flex; flex-direction: column; }
.detail-panel.flow-layout .detail-grid { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; }
.detail-panel.flow-layout .detail-left { flex: 0 0 auto; gap: 8px; } /* akış: büyük üst alan */
.detail-panel.flow-layout .detail-scene { flex: 0 0 auto; min-height: 300px; height: 42vh; }
.detail-panel.flow-layout .flow-svg { max-width: 100%; }
.detail-panel.flow-layout .detail-right { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.detail-panel.flow-layout .detail-metrics { grid-template-columns: repeat(2, 1fr); gap: 7px; align-content: start; }
.detail-panel.flow-layout .detail-charts .detail-metrics { gap: 7px; } /* boşalan sağ alana taşınan alt-4 metrik */
.detail-panel.flow-layout .metric { padding: 6px 10px; gap: 3px; }
.detail-panel.flow-layout .metric-l { color: var(--amber); }  /* 8 metrik ismi amber */
.detail-panel.flow-layout .metric-v { font-size: 16px; }
.detail-panel.flow-layout .detail-charts { gap: 8px; }
.detail-panel.flow-layout .chart { height: 150px; }

/* ---- manuel yük kontrolü (Aç / Kapat) ---- */
.detail-control {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.detail-control.confirm { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.07); }
.ctrl-confirm-msg { font-size: 13.5px; color: var(--red); font-weight: 500; }
.ctrl-info { display: flex; flex-direction: column; gap: 3px; }
.ctrl-ttl { font-size: 12px; color: var(--tx-mut); letter-spacing: .03em; }
.ctrl-state { font-size: 13px; font-weight: 600; font-family: "JetBrains Mono", monospace; }
.ctrl-state.on { color: var(--green); }
.ctrl-state.off { color: var(--red); }
.ctrl-btns { display: flex; gap: 8px; }
.ctrl-btn {
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--tx-dim); font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 30px; border-radius: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.ctrl-btn:hover { transform: translateY(-1px); }
.ctrl-btn:active { transform: translateY(0); }
.ctrl-btn:disabled { opacity: .5; cursor: default; }
.ctrl-btn.ac.active { background: var(--green); border-color: var(--green); color: #07120c; }
.ctrl-btn.kapat.active { background: var(--red); border-color: var(--red); color: #1a0707; }
.ctrl-btn.ac:hover { border-color: var(--green); color: var(--green); }
.ctrl-btn.ac.active:hover { color: #07120c; }
.ctrl-btn.kapat:hover { border-color: var(--red); color: var(--red); }
.ctrl-btn.kapat.active:hover { color: #1a0707; }

/* ---- tahmini fatura ---- */
.bill .bill-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--tx-dim); }
.bill .bill-row:first-of-type { border-top: none; }
.bill .bill-row b { color: var(--tx); font-family: "JetBrains Mono", monospace; font-weight: 600; }

.detail-livechips { display: flex; gap: 8px; flex-wrap: wrap; }
.dchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--tx-dim);
}
.dchip b { color: var(--tx); font-family: "JetBrains Mono", monospace; font-weight: 600; }

/* ---- özet metrik karoları ---- */
.detail-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.metric {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.metric-l { font-size: 11px; color: var(--tx-mut); text-transform: uppercase; letter-spacing: .05em; }
.metric-v {
  font-size: 20px; font-weight: 600; color: var(--tx);
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.metric-v small { font-size: 11px; color: var(--tx-mut); margin-left: 4px; font-weight: 500; }
.metric.good .metric-v { color: var(--green); }
.metric.warn .metric-v { color: var(--amber); }
.metric.bad .metric-v  { color: var(--red); }

/* ---- grafikler ---- */
.detail-charts { display: flex; flex-direction: column; gap: 14px; }
.chart-block {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px 8px;
}
.chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; color: var(--tx-dim); margin-bottom: 6px;
}
.chart-head b { color: var(--tx); font-family: "JetBrains Mono", monospace; font-size: 13px; }

/* grafik sekmeleri (Saatlik / Aylık) */
.ctabs { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.ctab { border: none; background: transparent; color: var(--tx-mut); font: inherit; font-size: 11px; padding: 4px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.ctab:hover { color: var(--tx-dim); }
.ctab.is-active { background: var(--accent); color: #0a0f17; font-weight: 600; }
.chart { width: 100%; height: 150px; display: block; }
.cax { fill: var(--tx-mut); font-size: 11px; font-family: "JetBrains Mono", monospace; }

.detail-error { color: var(--red); font-size: 13px; grid-column: 1 / -1; }

/* ---- canlı inverter listesi (FusionSolar) ---- */
.inv-plant + .inv-plant { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.inv-phead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--tx-dim); margin-bottom: 6px; }
.inv-phead b { color: var(--tx); font-family: "JetBrains Mono", monospace; font-size: 12px; }
.inv-row { display: grid; grid-template-columns: 1.4fr .9fr .9fr .6fr 1fr; gap: 8px; align-items: center;
  padding: 6px 0; border-top: 1px dashed rgba(255,255,255,.05); font-size: 12.5px; }
.inv-row:first-of-type { border-top: none; }
.inv-name { color: var(--tx-dim); }
.inv-pow, .inv-day, .inv-temp { font-family: "JetBrains Mono", monospace; color: var(--tx);
  text-align: right; font-variant-numeric: tabular-nums; }
.inv-pow small, .inv-day small { font-size: 10px; color: var(--tx-mut); margin-left: 2px; }
.inv-st { font-size: 11px; font-weight: 600; text-align: right; white-space: nowrap; }
.inv-st.good { color: var(--green); }
.inv-st.warn { color: var(--amber); }
.inv-st.bad { color: var(--red); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .detail-scene { min-height: 240px; }
  .detail-panel { padding: 16px; border-radius: var(--radius-sm); }
}

/* ---- Batarya detay gövdesi (.detail-bd / .bd) ---- */
.detail-panel.battery-layout { max-height: 94dvh; overflow: auto; }
.detail-bd { --g: #37e0a6; --c: #5ad1ff; --a: #ffc46b; }
.bd .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.bd .kpi { background: #0e1828; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 16px; }
.bd .kpi .l { font-size: 11px; letter-spacing: .1em; color: var(--a); font-family: "JetBrains Mono", monospace; }
.bd .kpi .v { font-size: 26px; font-weight: 600; margin-top: 8px; letter-spacing: -.02em; }
.bd .kpi .v small { font-size: .5em; color: #9fb4c8; font-weight: 400; margin-left: 3px; }
.bd .kpi .s { font-size: 12px; color: #8fa3b8; margin-top: 3px; }
.bd .grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 14px; }
.bd .card { background: #0e1828; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 18px; }
.bd .card h3 { font-size: 13px; color: var(--a); font-weight: 600; letter-spacing: .04em; margin-bottom: 14px; font-family: "JetBrains Mono", monospace; text-transform: uppercase; }
.bd .chartlab { display: flex; justify-content: space-between; font-size: 11px; color: #6b7c92; margin-top: 6px; font-family: "JetBrains Mono", monospace; }
.bd .row { display: flex; align-items: center; gap: 14px; }
.bd .miniStat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.bd .miniStat .l { font-size: 12px; color: #8fa3b8; }
.bd .miniStat .v { font-size: 18px; font-weight: 600; margin-top: 2px; }
.bd .bar { height: 8px; border-radius: 6px; background: #1a2638; overflow: hidden; margin-top: 8px; }
.bd .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #37e0a6, #7ef0c8); }
.bd .tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(126,240,200,.12); border: 1px solid rgba(126,240,200,.32); color: #7ef0c8; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-family: "JetBrains Mono", monospace; letter-spacing: .12em; }
@media (max-width: 760px) { .bd .kpis { grid-template-columns: repeat(2, 1fr); } .bd .grid2 { grid-template-columns: 1fr; } }

/* ---- tablet / kısa ekran: tek-ekran akış düzenini bırak, KAYDIR ----
   flow-layout sabit yükseklik (94dvh) + overflow:hidden kullanıyor; bu, tablet
   landscape (≈1024×768) gibi alçak ekranlarda içeriği kırpıyordu → Aç/Kapat
   butonlarına basılamıyor, metinler üst üste biniyordu. Bu ekranlarda panel
   kaydırılır ve sol görsel + sağ veri sütunları dikey yığılır. (OR koşulu:
   dar VEYA kısa ekran; tam-boy masaüstü dokunulmaz.) */
@media (max-width: 1024px), (max-height: 800px) {
  .detail-panel.flow-layout {
    height: auto;
    max-height: 92dvh;
    overflow: auto;
  }
  .detail-panel.flow-layout .detail-grid {
    display: flex; flex-direction: column; gap: 14px;
  }
  .detail-panel.flow-layout .detail-left { flex: 0 0 auto; }
  .detail-panel.flow-layout .detail-scene { flex: 0 0 auto; min-height: 300px; }
  .detail-panel.flow-layout .detail-right {
    display: grid; grid-template-columns: 1fr; gap: 14px;
  }
  .detail-panel.flow-layout .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .detail-panel.flow-layout .metric-v { font-size: 18px; }
  /* manuel kontrol satırı: dar ekranda buton bloğu tam genişlik, dokunması kolay */
  .detail-control { gap: 14px; }
  .detail-control .ctrl-btns { flex: 1 1 100%; }
  .detail-control .ctrl-btn { flex: 1 1 0; padding: 13px 0; font-size: 16px; }
}

/* batarya VAR/YOK sekmesi */
.bd .seg { display: flex; gap: 8px; margin-bottom: 16px; }
.bd .seg button { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #cfe0ee;
  background: #121826; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 8px 14px; cursor: pointer;
  transition: background .15s, color .15s; }
.bd .seg button:hover { border-color: rgba(255,255,255,.22); }
.bd .seg button.on { color: #06121b; background: var(--g); font-weight: 600; border-color: var(--g); }

/* ---- PTF · Maliyet detay gövdesi (.detail-bd.ptf) — kaynaktan scope'lanmış ---- */
.bd.ptf { --r: #ff7a8a; }
.bd.ptf .ptf-top { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-bottom: 10px; }
.bd.ptf .live { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .18em; color: #9fb4c8; }
.bd.ptf .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); }
.bd.ptf .period { appearance: none; font-family: ui-monospace, monospace; font-size: 13px; color: #ffd591; background: #121826;
  border: 1px solid rgba(255,196,107,.3); border-radius: 10px; padding: 8px 30px 8px 12px; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, #ffd591 50%), linear-gradient(135deg, #ffd591 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.bd.ptf .hero { background: linear-gradient(180deg, rgba(55,224,166,.10), rgba(55,224,166,.02)); border: 1px solid rgba(55,224,166,.3); border-radius: 18px; padding: 18px 24px; margin-bottom: 16px; }
.bd.ptf .hero .heroval { font-size: 42px; font-weight: 600; color: var(--g); letter-spacing: -.02em; margin-top: 4px; }
.bd.ptf .rl { font-size: 12px; color: #8fa3b8; }
.bd.ptf .s { font-size: 12px; color: #8fa3b8; margin-top: 4px; }
.bd.ptf .proj { font-size: 12px; color: #ffd591; margin-top: 4px; font-family: ui-monospace, monospace; }

.bd.ptf .sectit { font-size: 12px; letter-spacing: .14em; color: var(--a); font-family: ui-monospace, monospace; margin: 18px 2px 12px; text-transform: uppercase; }
.bd.ptf .card { background: #0e1828; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 18px; margin: 0; }
.bd.ptf .card h3 { font-size: 12px; color: var(--a); font-weight: 600; letter-spacing: .04em; margin-bottom: 10px; font-family: ui-monospace, monospace; text-transform: uppercase; }
.bd.ptf .big { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.bd.ptf .big small { font-size: .42em; color: #9fb4c8; font-weight: 400; margin-left: 4px; }
.bd.ptf .spark { display: block; width: 100%; height: 36px; margin-top: 10px; }

.bd.ptf .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.bd.ptf .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bd.ptf .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bd.ptf .gi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bd.ptf .net { background: linear-gradient(180deg, rgba(55,224,166,.10), rgba(55,224,166,.02)); border-color: rgba(55,224,166,.3); }

.bd.ptf .priceCard { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bd.ptf .brk { display: flex; gap: 18px; font-size: 13px; color: #9fb4c8; margin-top: 10px; flex-wrap: wrap; }
.bd.ptf .brk b { color: #eef3f8; }
.bd.ptf .inrow { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bd.ptf .inrow input { width: 190px; background: #0a121e; border: 1.5px solid rgba(255,196,107,.4); border-radius: 12px;
  color: var(--a); font-family: "Space Grotesk", system-ui; font-size: 30px; font-weight: 600; padding: 7px 14px; outline: none; }
.bd.ptf .inrow input:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(255,196,107,.15); }
.bd.ptf .inrow .unit { font-size: 14px; color: #9fb4c8; }

.bd.ptf .rbar { position: relative; height: 8px; border-radius: 6px; background: #1a2638; margin-top: 9px; }
.bd.ptf .rbar i { display: block; height: 100%; border-radius: 6px; }
.bd.ptf .rbar .lim { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #cfe0ee; opacity: .7; border-radius: 2px; }
.bd.ptf .meter { margin-top: 14px; }
.bd.ptf .mrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 7px; }
.bd.ptf .mrow .mname { color: #cfe0ee; } .bd.ptf .mrow .mval { font-weight: 600; }
@media (max-width: 780px) { .bd.ptf .grid4 { grid-template-columns: repeat(2, 1fr); } .bd.ptf .grid3, .bd.ptf .grid2, .bd.ptf .gi2 { grid-template-columns: 1fr; } }
.bd.ptf .seg { display: flex; gap: 8px; margin: 4px 0 0; }
.bd.ptf .seg button.on { color: #06121b; background: var(--a); border-color: var(--a); }

/* ============================================================
   Tesis Tüketim · Enerji Akışı board (bara düzeni, tek-hat).
   Tüm kurallar .tesis-flow altına scope'lu; keyframe'ler tf- önekli.
   ============================================================ */
/* Akış board'u = 1. ekran: başlık altındaki alanı tümüyle doldurur.
   Kontrol (TEİAŞ) + metrik kutuları + inverter listesi 2. ekrana (scroll) düşer. */
.detail-panel.flow-layout .detail-scene.tesis-board {
  height: calc(96dvh - 104px); min-height: 460px;
  border: none; background: none; overflow: visible;
}
.detail-scene.tesis-board .flow-wrap { position: relative; inset: auto; padding: 0; display: block; height: 100%; }

.tesis-flow {
  --tf-cyan:#40d9ff; --tf-green:#5ff2a0; --tf-amber:#ffcb66; --tf-red:#ff7777;
  position: relative; width: 100%; height: 100%;  /* sahneyi tümüyle doldur (tam ekran) */
  color: #edf6ff; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.tesis-flow .board {
  position: absolute; inset: 0; border: 1px solid #20344d; border-radius: 20px;
  background: linear-gradient(180deg,#0c1929dd,#091522ee); box-shadow: 0 20px 50px #0006; overflow: hidden;
}
.tesis-flow .board:before {
  content:""; position:absolute; inset:0; opacity:.22;
  background-image: radial-gradient(#7592ab 1px, transparent 1px); background-size: 25px 25px;
  -webkit-mask-image: linear-gradient(to bottom,#000,transparent);
  mask-image: linear-gradient(to bottom,#000,transparent);
}
.tesis-flow svg.wires { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.tesis-flow .wire-base { fill:none; stroke:#29405a; stroke-width:5; stroke-linecap:round; }
.tesis-flow .main-bus { stroke:#4d7597; stroke-width:14; filter:drop-shadow(0 0 10px #2cbce755); }
.tesis-flow .bus-live { fill:none; stroke:var(--tf-cyan); stroke-width:4; stroke-linecap:round; stroke-dasharray:3 18; animation:tfMove 1s linear infinite; filter:drop-shadow(0 0 5px var(--tf-cyan)); }
.tesis-flow .flow { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:3 18; animation:tfMove 1s linear infinite; filter:drop-shadow(0 0 5px currentColor); transition:opacity .3s; }
.tesis-flow .flow.reverse { animation-direction:reverse; }
.tesis-flow .junction { fill:#0b1928; stroke:#70dfff; stroke-width:4; filter:drop-shadow(0 0 7px #3ed5ff); }
@keyframes tfMove { to { stroke-dashoffset:-42; } }

.tesis-flow .node {
  position:absolute; width:184px; min-height:112px; z-index:3; transform:translate(-50%,-50%);
  background:linear-gradient(145deg,#14263a,#0d1a2a); border:1px solid #29415c; border-radius:16px;
  padding:12px 13px; box-shadow:0 12px 28px #0005; transition:transform .25s, border-color .25s;
}
.tesis-flow .node:hover { transform:translate(-50%,-50%) scale(1.025); border-color:#4c6d8e; }
.tesis-flow .n-grid{left:10%;top:24%}.tesis-flow .n-solar{left:68%;top:25%}
.tesis-flow .n-battery{left:36%;top:86%}.tesis-flow .n-gen{left:64%;top:86%}  /* jeneratör yüke yakın (sağ) */
.tesis-flow .n-load{left:auto;right:16px;top:76%;transform:translate(0,-50%)}  /* sağ kenara yasla */
.tesis-flow .n-load:hover{transform:translate(0,-50%) scale(1.025)}
.tesis-flow .node-head{display:flex;align-items:center;justify-content:flex-end}
.tesis-flow .tag{font-size:9px;padding:4px 7px;border-radius:99px;background:#17364b;color:#77dff8;letter-spacing:.04em}
.tesis-flow .tag.off{color:#8fa0b0;background:#1b2735}
.tesis-flow .name{margin-top:7px;color:#9fb0c1;font-size:11px}
.tesis-flow .power{font-size:21px;font-weight:750;margin-top:1px;font-family:"JetBrains Mono",ui-monospace,monospace}
.tesis-flow .n-grid .power{font-size:19px}
/* Şebeke direği kartı — veriş: yeşil, çekiş: amber (canlı yön vurgusu) */
.tesis-flow .n-grid.export{border-color:rgba(95,242,160,.55);box-shadow:0 12px 28px #0005,0 0 18px rgba(95,242,160,.22)}
.tesis-flow .n-grid.export .tag{background:rgba(95,242,160,.16);color:var(--tf-green)}
.tesis-flow .n-grid.export .power{color:var(--tf-green)}
.tesis-flow .n-grid.import{border-color:rgba(255,203,102,.45)}
.tesis-flow .n-grid.import .tag{background:rgba(255,203,102,.16);color:var(--tf-amber)}
.tesis-flow .n-grid.import .power{color:var(--tf-amber)}
.tesis-flow .sub{display:flex;justify-content:space-between;color:#70869c;font-size:10px;margin-top:6px}
.tesis-flow .bar{height:3px;background:#203146;border-radius:5px;margin-top:6px;overflow:hidden}
.tesis-flow .bar i{display:block;height:100%;border-radius:5px;background:var(--tf-cyan);transition:width .4s}
/* düğüm kartı istatistik satırları (8 kutu buraya taşındı) */
.tesis-flow .nstat{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;margin-top:8px;padding-top:7px;border-top:1px solid #22344a;font-size:10.5px}
.tesis-flow .nstat span{color:#70869c}
.tesis-flow .nstat b{color:#dbe7f2;text-align:right;font-weight:650;font-family:"JetBrains Mono",ui-monospace,monospace}

.tesis-flow .irradiance-card{position:absolute;left:86.5%;top:25%;width:184px;min-height:112px;z-index:3;transform:translate(-50%,-50%);padding:13px 15px 10px;border:1px solid #2c665c;border-radius:16px;background:linear-gradient(145deg,#142b31,#10222c);box-shadow:0 12px 28px #0005}
.tesis-flow .irr-title{display:flex;align-items:center;gap:7px;color:#a9bbc6;font-size:11px;letter-spacing:.03em}
.tesis-flow .irr-sun{color:var(--tf-amber);font-size:18px;line-height:1;text-shadow:0 0 10px #ffc85c88}
.tesis-flow .irr-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;color:#8fa3b0;font-size:13px;font-weight:650}
.tesis-flow .irr-row strong{color:#63f0be;font-size:21px;line-height:1}
.tesis-flow .irr-note{margin-top:7px;color:#607985;font-size:8px}

.tesis-flow .asset-symbol{position:absolute;z-index:4;transform:translate(-50%,-50%);display:grid;place-items:center;filter:drop-shadow(0 0 10px #3dd7ff66)}
.tesis-flow .asset-symbol svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tesis-flow .asset-symbol:after{position:absolute;top:100%;font-size:8px;letter-spacing:.13em;color:currentColor;white-space:nowrap}
.tesis-flow .grid-symbol{left:7.5%;top:50%;width:124px;height:126px;color:#63ddff}
.tesis-flow .grid-symbol svg{stroke-width:1.25;fill:#0b1928;fill-opacity:.5}
.tesis-flow .grid-symbol:after{content:none}
.tesis-flow .grid-label{position:absolute;left:50%;top:calc(100% + 25px);transform:translateX(-50%);z-index:6;color:#63ddff;font-size:8px;letter-spacing:.13em;white-space:nowrap;text-shadow:0 0 7px #63ddff}
.tesis-flow .renewable-symbol{left:50%;top:25%;width:210px;height:150px;color:var(--tf-green);filter:drop-shadow(0 0 14px #5ff2a088)}
.tesis-flow .renewable-symbol svg{stroke-width:1.55}
.tesis-flow .renewable-symbol:after{content:"YENİLENEBİLİR ENERJİ";font-size:9px}
/* Tesis üretim düğümü: özgün eko-fabrika sahnesi (renkli, geniş, türbinler döner) */
.tesis-flow .renewable-symbol.eco{left:44%;width:230px;height:108px;color:#eef3f8;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.tesis-flow .renewable-symbol.eco svg{stroke:none}
.tesis-flow .renewable-symbol.eco:after{content:"YENİLENEBİLİR ÜRETİM";font-size:8px;color:#eef3f8;left:50%;transform:translateX(calc(-50% - 78px));top:calc(100% + 4px)}
.tesis-flow .renewable-symbol.eco .turb1{transform-box:view-box;transform-origin:72px 50px;animation:tfWindSpin 3.6s linear infinite}
.tesis-flow .renewable-symbol.eco .turb2{transform-box:view-box;transform-origin:108px 42px;animation:tfWindSpin 4.4s linear infinite}
.tesis-flow .renewable-symbol.eco .turb3{transform-box:view-box;transform-origin:278.5px 62px;animation:tfWindSpin 3.2s linear infinite}
.tesis-flow .wind-blades{transform-box:view-box;transform-origin:80px 25px;animation:tfWindSpin 3.2s linear infinite}
@keyframes tfWindSpin{to{transform:rotate(360deg)}}
.tesis-flow .generator-symbol{left:64%;top:66.5%;width:180px;height:105px;color:#ff7777;opacity:.78;transition:color .35s,opacity .35s;filter:drop-shadow(0 0 8px #ff5e6a55)}
.tesis-flow .generator-symbol svg{stroke-width:1.45}
.tesis-flow .generator-symbol:after{content:"JENERATÖR"}
.tesis-flow .generator-body{fill:#321721;fill-opacity:.82}
.tesis-flow .generator-panel{fill:#46202a;fill-opacity:.92}
.tesis-flow .generator-light{fill:currentColor;stroke:none}
.tesis-flow .generator-symbol.active{color:#ff4f5d;opacity:1;filter:drop-shadow(0 0 13px #ff4f5d88)}
.tesis-flow .n-gen .tag:not(.off){color:#ff9ca4;background:#48202a}
.tesis-flow .generator-rotor{transform-box:fill-box;transform-origin:center}
.tesis-flow .generator-symbol.active .generator-rotor{animation:tfGeneratorSpin 1.4s linear infinite}
@keyframes tfGeneratorSpin{to{transform:rotate(360deg)}}
.tesis-flow .battery-symbol{left:36%;top:66.5%;width:120px;height:90px;color:#55ddff}
/* Saha tüketimi düğümü: çok renkli GES+RES sahne (özgün SVG) — monokrom stroke'u ez */
.tesis-flow .site-symbol{left:94%;top:50%;width:184px;height:148px;color:#aebccd;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.tesis-flow .site-symbol svg{stroke:none}
/* etiket: ikonla kart arasında, ortalı ve beyaz */
.tesis-flow .site-symbol:after{content:"SAHA TÜKETİMİ";left:50%;transform:translateX(-50%);top:calc(100% + 10px);text-align:center;color:#eef3f8}
/* iki türbin de dönsün — kanatlar göbek etrafında (viewBox koordinatı) */
.tesis-flow .site-symbol .wind-a{transform-box:view-box;transform-origin:74px 50px;animation:tfWindSpin 3.4s linear infinite}
.tesis-flow .site-symbol .wind-b{transform-box:view-box;transform-origin:128px 42px;animation:tfWindSpin 4.2s linear infinite}
/* Saha ÜRETİM: bara üzerinde N santral düğümü — küçük ikon + kompakt kart, eşit aralıklı.
   Yatay konum (left%) JS'te inline verilir; buradaki kurallar boyut/dikey hiza. */
.tesis-flow.saha .n-plant{top:13%;width:150px;min-height:0;padding:9px 11px;text-align:center}
.tesis-flow.saha .n-plant .node-head{justify-content:center}
.tesis-flow.saha .n-plant .name{margin-top:5px}
.tesis-flow.saha .n-plant .power{font-size:18px}
.tesis-flow.saha .n-plant .sub{justify-content:center;gap:6px}
.tesis-flow.saha .n-plant .sub b{color:#dbe7f2;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:650}
/* Santral ikonu: GES+RES farm sahnesi, sığması için küçültülmüş; türbinler döner */
.tesis-flow.saha .plant-symbol{top:33%;width:88px;height:70px;color:#aebccd;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.tesis-flow.saha .plant-symbol svg{stroke:none;stroke-width:0}
.tesis-flow.saha .plant-symbol:after{content:none}
.tesis-flow.saha .plant-symbol .wind-a{transform-box:view-box;transform-origin:74px 50px;animation:tfWindSpin 3.4s linear infinite}
.tesis-flow.saha .plant-symbol .wind-b{transform-box:view-box;transform-origin:128px 42px;animation:tfWindSpin 4.2s linear infinite}
/* Saha bara akışı sola (şebekeye) doğru aksın */
.tesis-flow.saha .bus-live{animation-direction:reverse}
/* Tüm saha içeriği OFF=5% sağa kaydırıldı (sola yakın ortalama) → şebeke direği/kartı da kaysın */
.tesis-flow.saha .grid-symbol{left:12.5%}
.tesis-flow.saha .n-grid{left:15%}
/* AC ana bara etiketi: üst iki santral (Eldivan↔Gümerdiğin) bağlantıları arasında (orta≈55%),
   baranın hemen üstünde (alt-orta santral birleşim noktasına binmesin) — biraz küçük */
.tesis-flow.saha .bus-label{left:55%;top:43%;gap:8px;padding:6px 12px}
.tesis-flow.saha .bus-label span{font-size:9px}
.tesis-flow.saha .bus-label strong{font-size:12.5px}
/* Santral kartı: Bugün + Aylık + Işınım satırları sığsın (kompakt nstat) */
.tesis-flow.saha .n-plant .power{font-size:17px}
.tesis-flow.saha .n-plant .nstat{margin-top:6px;padding-top:6px;gap:2px 8px;font-size:10px;text-align:left}
/* aylık elektrik kesintisi satırı — kırmızı (adet + süre) */
.tesis-flow.saha .n-plant .nstat .out-l{color:#ff7b7b}
.tesis-flow.saha .n-plant .nstat .out-v{color:#ff7b7b}
.tesis-flow .battery-symbol svg{stroke-width:2}
.tesis-flow .battery-symbol:after{content:"ENERJİ DEPOLAMA"}
.tesis-flow .battery-fill{fill:#4ed8f2;stroke:none;transform-box:fill-box;transform-origin:left center;animation:tfBatteryCharge 4s ease-in-out infinite}
@keyframes tfBatteryCharge{0%,10%{transform:scaleX(.18);opacity:.65}75%,100%{transform:scaleX(1);opacity:1}}
.tesis-flow .factory-symbol{left:94%;top:50%;width:100px;height:77px;color:var(--tf-amber);filter:drop-shadow(0 0 11px #ffc85c70)}
.tesis-flow .factory-symbol svg{stroke-width:1.8}
.tesis-flow .factory-symbol:after{content:"TESİS YÜKÜ"}
.tesis-flow .factory-window{fill:var(--tf-amber);stroke:none;animation:tfWindowPulse 1.8s ease-in-out infinite alternate}
@keyframes tfWindowPulse{to{opacity:.3}}
.tesis-flow .factory-smoke{fill:#90a9b9;stroke:none;animation:tfSmokeUp 2.5s ease-in-out infinite}
@keyframes tfSmokeUp{50%{transform:translateY(-5px);opacity:.25}}
.tesis-flow .bus-label{position:absolute;z-index:5;left:50%;top:49%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:8px 15px;border:1px solid #397293;border-radius:9px;background:#0a1a2a;box-shadow:0 0 25px #24bee133}
.tesis-flow .bus-label span{font-size:10px;color:#77dff8;letter-spacing:.1em}
.tesis-flow .bus-label strong{font-size:14px}
.tesis-flow .bus-label i{width:7px;height:7px;border-radius:50%;background:var(--tf-green);box-shadow:0 0 9px var(--tf-green)}
.tesis-flow .legend{position:absolute;left:20px;bottom:17px;z-index:6;color:#8296aa;font-size:11px;display:flex;gap:14px}
.tesis-flow .key:before{content:"";display:inline-block;width:19px;height:3px;border-radius:3px;margin-right:6px;vertical-align:middle;background:var(--tf-cyan)}
.tesis-flow .key.green:before{background:var(--tf-green)}
.tesis-flow .key.amber:before{background:var(--tf-amber)}
.tesis-flow .controls{position:absolute;right:20px;bottom:14px;z-index:8;display:flex;gap:7px}
.tesis-flow .controls button{border:1px solid #2b435d;color:#aabccc;background:#112338;padding:8px 11px;border-radius:9px;cursor:pointer;font:inherit;font-size:12px}
.tesis-flow .controls button:hover,.tesis-flow .controls button.active{color:#fff;border-color:#35c9ee;background:#15334a}

/* ============================================================
   MOBİL: tesis-flow akış şeması — sabit-oranlı sahneyi tek parça
   küçült. Node'lar %-konumlu + sabit-px boyutlu olduğundan dar
   ekranda binerdi; tüm sahneyi 980×520 stage kabul edip transform:
   scale ile genişliğe sığdırıyoruz (hizalar korunur, binme yok).
   ============================================================ */
@media (max-width: 760px) {
  .detail-panel.flow-layout .detail-scene.tesis-board {
    height: auto; min-height: 0;
    aspect-ratio: 980 / 520;   /* stage oranı → doğru yükseklik ayrılır */
    overflow: hidden;
  }
  .detail-scene.tesis-board .flow-wrap { position: relative; inset: auto; height: auto; padding: 0; }
  .detail-scene.tesis-board .tesis-flow {
    width: 980px; height: 520px;
    transform-origin: top left;
    transform: scale(var(--flow-scale, 0.4));   /* JS: --flow-scale = sahneW/980 (CSS uzunluk/uzunluk bölemez) */
  }
}