/* ==========================================================================
   Grey Enerji — laboratuvar arayüzü (osiloskop, şema, kaçak yolu)
   ========================================================================== */

.lab__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: var(--rule) solid var(--hair);
  background: color-mix(in srgb, var(--void) 55%, transparent);
}
.lab__bar .t-label { color: var(--chalk-2); }
.lab__led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live-bright);
  box-shadow: 0 0 10px var(--live-bright);
  animation: led 2.2s var(--ease) infinite;
}
@keyframes led { 50% { opacity: 0.35; } }

.lab__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
}
@media (max-width: 1040px) { .lab__grid { grid-template-columns: 1fr; } }

/* --- osiloskop ------------------------------------------------------------ */
.scope {
  position: relative;
  min-height: 330px;
  padding: 10px 6px 4px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(31, 127, 212, 0.07), transparent 66%),
    var(--void);
  border-right: var(--rule) solid var(--hair);
}
@media (max-width: 1040px) { .scope { border-right: none; border-bottom: var(--rule) solid var(--hair); } }
.scope canvas { width: 100%; height: clamp(300px, 40vh, 400px); }

.scope__legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 6px 14px 10px;
}
.scope__legend span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--steel-2);
}
.scope__legend i { width: 14px; height: 2px; border-radius: 2px; flex: none; }
.scope__legend i.v { background: var(--live-bright); }
.scope__legend i.a { background: var(--earth); }
.scope__legend i.w { background: var(--fault); }

input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px;
  background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px; background: var(--hair-2); border-radius: 2px;
}
input[type='range']::-moz-range-track {
  height: 2px; background: var(--hair-2); border-radius: 2px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  background: var(--live-bright);
  border: 2px solid var(--void);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--live);
  transition: transform 0.16s var(--ease-snap);
}
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--live-bright);
  border: 2px solid var(--void);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--live);
}
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.18); }
input[type='range']:disabled { cursor: not-allowed; }

/* parafudr anahtarı */
.switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: var(--rule) solid var(--hair-2);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}
.switch:hover { border-color: var(--hair-live); }
.switch__txt { display: grid; gap: 2px; }
.switch__txt b { font-size: 0.8125rem; font-weight: 600; color: var(--white); }
.switch__txt span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--steel-2); }
.switch__box {
  flex: none;
  width: 42px; height: 23px;
  border-radius: 999px;
  background: var(--plate-2);
  border: var(--rule) solid var(--hair-2);
  position: relative;
  transition: background 0.26s var(--ease), border-color 0.26s var(--ease);
}
.switch__box::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--steel);
  transition: transform 0.28s var(--ease-snap), background 0.26s var(--ease);
}
.switch[aria-pressed='true'] { border-color: rgba(103, 180, 69, 0.44); background: rgba(103, 180, 69, 0.06); }
.switch[aria-pressed='true'] .switch__box { background: rgba(103, 180, 69, 0.24); border-color: var(--earth-deep); }
.switch[aria-pressed='true'] .switch__box::after { transform: translateX(19px); background: var(--earth-bright); }
.switch[aria-pressed='true'] .switch__txt span { color: var(--earth); }

/* --- devre şeması --------------------------------------------------------- */
.stage {
  padding: 16px 18px 20px;
  border-top: var(--rule) solid var(--hair);
  background: color-mix(in srgb, var(--void) 60%, transparent);
}
.stage svg { width: 100%; height: auto; }

.stage .wire { stroke: var(--steel); stroke-width: 1.6; fill: none; }
.stage .wire-live { stroke: var(--live); stroke-width: 2; fill: none; }
.stage .glyph { fill: none; stroke: var(--steel-2); stroke-width: 1.5; }
.stage .glyph-fill { fill: var(--plate-2); stroke: var(--steel-2); stroke-width: 1.5; }
.stage .lbl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  fill: var(--steel-2);
}

/* akım akışı: kesikli çizgi kayar */
.stage .flow {
  stroke-dasharray: 5 7;
  animation: flow 0.9s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -12; } }

/* parafudr kolu devrede değilken açıkça sönük — arıza durumunda da geçerli */
.stage [data-arr] { transition: opacity 0.3s var(--ease); }
.stage[data-arr-on='false'] [data-arr] { opacity: 0.2; }

/* toprağa akan akım yeşil */
.stage[data-state='ok'] .arr-wire { stroke: var(--earth); }
.stage[data-state='ok'] .arr-body { stroke: var(--earth); fill: rgba(103, 180, 69, 0.14); }
.stage[data-state='ok'] .eq-body { stroke: var(--earth-deep); }

/* yalıtım aşıldığında ekipman kırmızıya döner */
.stage[data-state='fault'] .eq-body { stroke: var(--fault); fill: rgba(232, 88, 74, 0.16); }
.stage .eq-arc {
  opacity: 0;
  stroke: var(--fault-bright);
  stroke-width: 1.4;
  fill: none;
  transition: opacity 0.2s;
}
/* Titreşim animasyonu YALNIZCA arıza durumunda çalışmalı: çalışan bir animasyon
   keyframe'deki opacity'yi kuralın kendi opacity:0 değerinin önüne geçirir, bu
   yüzden koşulsuz tanımlandığında arklar korumalı durumda da görünür kalıyordu. */
.stage[data-state='fault'] .eq-arc {
  opacity: 1;
  animation: arc-flick 0.42s steps(2) infinite;
}
@keyframes arc-flick { 50% { opacity: 0.25; } }

/* --- kaçak yolu aracı ------------------------------------------------------ */
.creep { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 1040px) { .creep { grid-template-columns: 1fr; } }
.creep__view {
  position: relative;
  background: var(--void);
  border-right: var(--rule) solid var(--hair);
  padding: 18px;
  display: grid; place-items: center;
  min-height: 330px;
}
@media (max-width: 1040px) { .creep__view { border-right: none; border-bottom: var(--rule) solid var(--hair); } }
.creep__view svg { width: 100%; max-width: 380px; height: auto; }

.creep .profile {
  fill: rgba(86, 128, 158, 0.52);
  stroke: var(--steel-2);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.creep .core { fill: var(--plate-3); stroke: none; }
.creep .metal { fill: var(--plate-3); stroke: var(--steel-2); stroke-width: 1.2; }

/* yüzeydeki kaçak yolu — kirlilikle birlikte renk değiştirir */
.creep .creep-path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 0.9s var(--ease), stroke 0.4s var(--ease);
}
.creep.is-traced .creep-path { stroke-dashoffset: 0; }

.creep .direct {
  stroke: var(--steel);
  stroke-width: 1.1;
  stroke-dasharray: 3 4;
  fill: none;
}
.creep .arc-band { opacity: 0; transition: opacity 0.3s; }