/* ==========================================================================
   Grey Enerji — koruma sahnesi
   Tek kompozisyon: fotoğraf + enerji akışı + tipografi + tek kontrol.
   Ayrı panel, veri şeridi ya da kutu yok; bölüm sitenin parçası gibi okunur.

   Katman sırası (.ks__ic içinde): fotoğraf → perde → enerji → künyeler.
   Perde enerjinin ALTINDA; böylece tipografinin zemini kararırken akış tam
   parlaklığında kalıyor. Metin sütunu sol alta demirlendi, üst yarı sahneye
   bırakıldı: darbe tipografiye çarpmadan soldan orta direğe geçiyor.
   ========================================================================== */

.ks {
  position: relative;
  background: var(--void);
  border-block: 1px solid var(--hair);
}

.ks__kadraj {
  position: relative;
  width: 100%;
  height: clamp(540px, 80vh, 780px);
  overflow: clip;
  isolation: isolate;
}

/* İç çerçeve kaynağın oranını birebir korur; fotoğraf, enerji ve künyeler aynı
   kutuda olduğu için kadraj kırpılsa da hizalama bozulmaz. Genişlik kadraj
   yüksekliğini dolduracak kadar büyütülür (2,4881 = 1978/795). */
.ks__ic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(2.4881 * clamp(540px, 80vh, 780px)));
  aspect-ratio: 1978 / 795;
}

.ks__foto,
.ks__akim,
.ks__perde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ks__foto { object-fit: fill; }
.ks__akim { pointer-events: none; z-index: 2; }

/* Perde sol alta demirli bir elips: metin sütununu taşır, sahnenin üst yarısını
   ve sağ tarafını serbest bırakır. */
.ks__perde {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(86% 88% at 0% 92%,
      rgba(4, 18, 29, 0.96) 0%,
      rgba(4, 18, 29, 0.9) 26%,
      rgba(4, 18, 29, 0.5) 50%,
      rgba(4, 18, 29, 0.12) 70%,
      transparent 82%);
}

/* Bölümü komşularına bağlayan ince üst/alt geçiş — enerjinin üstünde ama çok
   zayıf, akışı bastırmıyor. */
.ks__kenar {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(4, 18, 29, 0.55) 0%,
    transparent 16%,
    transparent 78%,
    rgba(4, 18, 29, 0.55) 100%);
}

/* --- içerik: sahnenin içinde, ayrı bir panelde değil -------------------- */
.ks__icerik {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: clamp(38px, 6vh, 64px);
}

.ks__kicker { color: var(--chalk-2); }

.ks__baslik {
  margin-top: clamp(12px, 1.6vw, 18px);
  font-size: clamp(2.1rem, 4.3vw, 4.1rem);
  line-height: 0.97;
  font-weight: 700;
  letter-spacing: -0.042em;
  color: var(--white);
  text-shadow: 0 2px 32px rgba(4, 18, 29, 0.6);
}
.ks__baslik span {
  color: transparent;
  background: linear-gradient(98deg, var(--live-glow) 0%, var(--live-bright) 52%, var(--live) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ks[data-mod='korumasiz'] .ks__baslik span {
  background: linear-gradient(98deg, #ffc9c1 0%, var(--fault-bright) 52%, var(--fault) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.ks__lead {
  margin-top: clamp(14px, 1.7vw, 20px);
  font-size: clamp(0.94rem, 1.04vw, 1.05rem);
  line-height: 1.64;
  color: var(--chalk);
  max-width: 34ch;
}

/* --- tek kontrol: iki parçalı segment ----------------------------------- */
.ks__seg {
  display: inline-flex;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: 4px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: rgba(3, 14, 23, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ks__seg-b {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-2);
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ks__seg-b:hover { color: var(--chalk-2); }
.ks__seg-b[aria-pressed='true'] {
  color: var(--void);
  background: var(--live-bright);
  box-shadow: 0 4px 18px -8px rgba(74, 168, 240, 0.9);
}
.ks[data-mod='korumasiz'] .ks__seg-b[data-ks-seg='kapali'][aria-pressed='true'] {
  background: var(--fault-bright);
  box-shadow: 0 4px 18px -8px rgba(232, 88, 74, 0.9);
}

/* --- iki büyük sonuç; tablo, kutu ya da minik veri şeridi değil --------- */
.ks__olcumler {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 58px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.ks__olcum { display: grid; gap: 5px; }
.ks__olcum-deger {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3vw, 2.85rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--white);
  transition: color 0.45s var(--ease);
}
.ks__olcum[data-hal='fault'] .ks__olcum-deger { color: var(--fault-bright); }
.ks__olcum[data-hal='earth'] .ks__olcum-deger { color: var(--earth-bright); }
.ks__olcum[data-hal='warn'] .ks__olcum-deger { color: var(--chalk-2); }
.ks__olcum-etiket {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel-2);
}

/* --- sahnedeki iki künye ------------------------------------------------ */
.ks__pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: rgba(3, 14, 23, 0.62);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-2);
  white-space: nowrap;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
}
.ks__pin i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--steel-2);
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* Konumlar kaynak görselin koordinatlarından: parafudr (891, 207),
   trafo buşingi (1640, 318). */
.ks__pin--parafudr { left: 45%; top: 26%; transform: translateX(-104%); }
.ks__pin--ekipman { left: 82.9%; top: 40%; transform: translate(-50%, -140%); }

.ks[data-mod='korumali'] .ks__pin--parafudr i {
  background: var(--earth-bright);
  box-shadow: 0 0 10px rgba(143, 216, 107, 0.9);
}
.ks[data-mod='korumasiz'] .ks__pin--parafudr { color: var(--steel); border-color: var(--hair); }
.ks[data-mod='korumasiz'] .ks__pin--parafudr i { background: var(--steel); box-shadow: none; }
.ks[data-mod='korumali'] .ks__pin--ekipman i {
  background: var(--live-bright);
  box-shadow: 0 0 10px rgba(74, 168, 240, 0.8);
}
.ks[data-mod='korumasiz'] .ks__pin--ekipman {
  color: var(--fault-bright);
  border-color: rgba(232, 88, 74, 0.5);
}
.ks[data-mod='korumasiz'] .ks__pin--ekipman i {
  background: var(--fault-bright);
  box-shadow: 0 0 11px rgba(255, 138, 125, 0.95);
}

/* ==========================================================================
   TABLET / MOBİL
   Kaynak 2,49 oranında; dar ekranda iç çerçeve büyütülüp orta direk ile trafo
   yakınlaştırılır, metin sahnenin altına iner.
   ========================================================================== */
@media (max-width: 1080px) {
  .ks__kadraj { height: auto; }
  .ks__ic {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 132%;
    margin-left: -16%;
  }
  .ks__perde {
    background: linear-gradient(to bottom,
      rgba(4, 18, 29, 0.35) 0%,
      transparent 24%,
      rgba(4, 18, 29, 0.55) 68%,
      var(--void) 98%);
  }
  .ks__kenar { display: none; }
  .ks__icerik {
    height: auto;
    padding-bottom: clamp(34px, 6vw, 52px);
    margin-top: -15%;
  }
  .ks__lead { max-width: 46ch; }
  .ks__olcumler {
    width: 100%;
    gap: clamp(20px, 5vw, 40px);
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--hair);
  }
  .ks__pin--parafudr { top: 22%; }
  .ks__pin--ekipman { top: 38%; }
}

@media (max-width: 680px) {
  .ks__ic { width: 184%; margin-left: -50%; }
  .ks__icerik { margin-top: -22%; }
  .ks__baslik { font-size: clamp(1.85rem, 8.8vw, 2.6rem); }
  .ks__pin { font-size: 0.4375rem; padding: 4px 8px; }
  .ks__seg { width: 100%; }
  .ks__seg-b { flex: 1; padding: 10px 8px; font-size: 0.5625rem; letter-spacing: 0.08em; }
  .ks__olcum-deger { font-size: clamp(1.55rem, 7.6vw, 2rem); }
}