/* ==========================================================================
   Grey Enerji — temel katman: jetonlar, sıfırlama, tipografi

   Renk sistemi anlamlıdır, dekoratif değildir:
     --live-*   enerjili taraf     (marka mavisi, logodan)
     --earth-*  topraklanmış taraf (katalog yeşili)
     --fault-*  yalıtımın delindiği an
   Bir öğe mavi ise gerilim taşıyor, yeşil ise toprağa bağlı demektir.
   ========================================================================== */

:root {
  /* -- zemin: topraklanmış taraf ------------------------------------------ */
  --void: #04121d;
  --ground: #071a29;
  --plate: #0c2434;
  --plate-2: #113044;
  --plate-3: #17405a;

  /* -- enerjili taraf (logo: #003060 lacivert, #1860a0 şimşek) ------------- */
  --live-deep: #003060;
  --live: #1f7fd4;
  --live-bright: #4aa8f0;
  --live-glow: #8fd0ff;

  /* -- topraklanmış / korunan (katalog yeşili) ---------------------------- */
  --earth-deep: #3e7d2d;
  --earth: #67b445;
  --earth-bright: #8fd86b;

  /* -- arıza -------------------------------------------------------------- */
  --fault: #e8584a;
  --fault-bright: #ff8a7d;

  /* -- nötrler (logo grisi #505050 ailesinden) ---------------------------- */
  --steel: #64798a;
  --steel-2: #8ca0ae;
  --chalk: #c2d2dc;
  --chalk-2: #dce7ed;
  --white: #f2f7fa;

  /* -- çizgiler ----------------------------------------------------------- */
  --hair: rgba(140, 170, 190, 0.16);
  --hair-2: rgba(140, 170, 190, 0.28);
  --hair-live: rgba(74, 168, 240, 0.34);

  /* -- tipografi ---------------------------------------------------------- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* -- ölçü --------------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1440px;
  --rule: 1px;

  /* -- hareket ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--live); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--live-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- tipografik ölçek ------------------------------------------------------
   Başlıklar sıkı harf aralığıyla dizilir; sayılar daima monospace ve tabular
   olur, böylece teknik değerler bir ölçüm cihazındaymış gibi hizalanır. */

.t-display {
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
}

.t-h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--white);
  text-wrap: balance;
}

.t-h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}

.t-h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--chalk-2);
}

.t-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--chalk);
  text-wrap: pretty;
}

.t-body { font-size: 1rem; line-height: 1.68; color: var(--chalk); text-wrap: pretty; }
.t-small { font-size: 0.875rem; line-height: 1.6; color: var(--steel-2); }

/* Mono mikro-etiket: teknik çizimlerdeki not yazıları gibi. */
.t-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
}

.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

.u-live { color: var(--live-bright); }
.u-earth { color: var(--earth); }
.u-fault { color: var(--fault); }
.u-white { color: var(--white); }
.u-steel { color: var(--steel-2); }

.u-hide { display: none !important; }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--live-bright); color: var(--void);
  padding: 10px 18px; border-radius: 3px;
  font-size: 0.875rem; font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- düzen yardımcıları ---------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 11vh, 132px); position: relative; }

/* Bölüm başlığı: numara + ince kural + etiket. Teknik doküman başlığı hissi. */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: clamp(28px, 5vw, 56px);
  border-bottom: var(--rule) solid var(--hair);
}
.sec-head__no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--live-bright);
  flex: none;
}
.sec-head__text { flex: 1 1 auto; min-width: 0; }

/* Çapa hedefleri sabit başlığın altında kalmasın: bölüme atlandığında üst
   etiket ve başlık ekranda tam görünür olmalı. */
:target,
section[id],
[id]:is(h1, h2, h3) {
  scroll-margin-top: clamp(88px, 11vh, 124px);
}