/* Hakkımızda (TASARIM-PLANI 3.1; metinler kaynak/metin/hakkimizda.md). Sahibi P12.
   Yalnız token değişkenleri; yeni renk yok. Bileşenler (.olcu, .kunye, .rozet, .derinlik, .onay-halkasi, .logo-duvar)
   bilesenler.css'tedir; burada yalnız sayfa düzeni ve yolculuk hattı durur. Hareket hareket.js ve yolculuk.js'tedir;
   buradaki her şey hattın son (tam çizili) hâlidir: JS'siz, WebGL'siz ve hareket azaltmada aynı okunur. */

/* ---------- Bölüm ritmi ----------
   site.css'teki ".bolum + .bolum" kuralı ardışık beyaz bölümlerin üst boşluğunu sıfırlar; bu sayfada zeminler dönüşümlü
   olduğu için her bölüm kendi boşluğunu taşır (#icerik öneki o kuralı ezer). */
#icerik > .bolum { padding-block: clamp(72px, 9vw, 128px); }
.hak-zemin-yesil { background: var(--green-50); }
.hak-zemin-gok { background: var(--pus-gok); }
.hak-baglanti { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.hak-baglanti:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.hak-baglanti-satir { margin-top: var(--space-8); }
.hak-nobr { white-space: nowrap; }

/* ---------- 1 · Sayfa başı: kablo penceresi ---------- */
.hak-pencere .derinlik-tuval { box-shadow: var(--shadow-md); }
/* Yakın taşma (data-tasma): motor tuvali pencereden 48 px büyük yazar (inset/width/height satır içi); site.css'teki
   "canvas { max-width: 100% }" genişliği pencereye kırpıp resmi sıkıştırıyordu. Bu yuvada sınır kalkar. */
.hak-pencere .derinlik-tuval canvas { max-width: none; }
/* Taşan kürek sapı (≈ 23 px, en çok 48 px) künye rozetine binmesin: künye taşma payının altından başlar */
.hak-pencere .kunye { margin-top: 36px; }

/* ---------- 2 · Ölçüler ---------- */
#icerik > .hak-olculer { padding-block: clamp(64px, 7vw, 104px); }
.hak-olculer .olcu-izgara { row-gap: clamp(40px, 5vw, 64px); }
.hak-olcu-dipnot { margin-top: var(--space-10); }

/* ---------- 3 · Vizyon: tek büyük alıntı ---------- */
.hak-vizyon .tip-ust { color: var(--green-800); }
.hak-alinti { margin: var(--space-6) 0 0; padding: 0; }
.hak-alinti p { max-width: 30ch; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 50px); line-height: 1.16; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

/* ---------- 4 · Yolculuğumuz: gerilimi dönem dönem artan hat ----------
   Sözleşme: düzen bu dosyada, ilerleme yolculuk.js'te. Bu blok her zaman hattın SON (tam çizili) hâlini
   verir; gizleme yalnız JS çalışırken hareket.css'te yapılır. Her dönemin kendi SVG bölütü vardır (viewBox 100 × 100, en/boy
   serbest): x = hat boyu, y = kesit (--hat-y yükseklik: statikte 96 px, yatay kipte 116–280 px). Dikeyde (dar ekran) .yol-g x ile y'yi takas eder, aynı
   çizim sol rayda aşağı akar. Çizgi kalınlıkları ekranda sabittir (non-scaling-stroke); düğümler yuvarlak uçlu sıfır uzunluklu
   çizgidir. Direkler: dönem 1, 2, 3, 5 kil maket plakalarıdır (<img>), dönem 4 sayfa içi çelik monopoldur (SVG); hepsinin ekseni hattaki x = 3'e hizalı. */
.hak-yolculuk { --ust-y: 77px; --hat-y: 96px; }   /* --hat-y: hat bandı ve direk yüksekliği (yatay kipte ekrana göre büyür) */
/* ol.yol: site.css'teki "ul[class], ol[class] { padding: 0 }" (0,1,1) kuralını yenmek için etiketli */
ol.yol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-6)); margin: 0 auto; padding: 0 var(--space-6); list-style: none; }
.yol-donem { position: relative; display: grid; grid-template-rows: var(--hat-y) auto; min-width: 0; }
.yol-hat { display: block; width: 100%; height: var(--hat-y); overflow: visible; }
.yol-hat path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.yol-iletken { stroke: var(--graphite-400); stroke-width: 1.5; }
.yol-donem--2 .yol-iletken { stroke: var(--graphite-500); }
.yol-donem--3 .yol-iletken { stroke: var(--green-700); }
.yol-dal { stroke: var(--green-500); stroke-width: 1; }
.yol-dugum { stroke: var(--green-700); stroke-width: 4.5; }
/* 2022–2026: dallar altına döner (düğüm sayımı yalnız 2015–2020'nin 50 [data-dugum] düğümündedir) */
.yol-dal--altin { stroke: var(--gold-400); }
.yol-dugum--altin { stroke: var(--gold-500); stroke-width: 4.5; }
.yol-donem--4 .yol-iletken, .yol-donem--5 .yol-iletken { stroke: var(--gold-500); stroke-width: 1.75; }
/* "Bugün": üç faz portaldan sonra da ayrı ve paralel kalır (faz birleşmesi kısa devredir); enerji, iletkenlerden ayrı duran şebeke okuna akar */
.yol-ok { stroke: var(--gold-500); stroke-width: 3; }
.yol-isik { stroke: var(--gold-100); stroke-width: 14; }
.yol-uc { stroke: var(--gold-200); stroke-width: 22; }
.yol-uc-ic { stroke: var(--gold-500); stroke-width: 10; }
.yol-sebeke { display: none; }   /* yalnız ≥ 1100 px (aşağıda): dikey rayda yer yok */
.yol-direk { stroke: none; }   /* kalem referansı (x = 3); görünür direk .yol-direk-sil */

/* Direkler: dönem 1, 2, 3, 5 kil maket plakalarıdır (assets/img/maket/direk-*.svg; <img>, süs); dönem 4 sayfa içi çelik monopoldur (altın yalıtkanlı,
   kafes kule değil). Dönem başında (x = 3%) durur; boyutu ve dikey konumu aşağıdaki ≥ 1100 px bloğunda iletkenlerin bağlandığı noktaya göre ayarlıdır.
   Dikey kipte yerine ray üzerinde üstten görünüm gliflenir (.yol-direk-ust, satır içi SVG: aşağıdaki .sil-* sınıfları). */
.yol-direk-sil { position: absolute; z-index: 1; left: 3%; top: 0; width: auto; max-width: none; height: var(--hat-y); transform: translateX(-50%); pointer-events: none; }
.yol-direk-sil--4 { overflow: visible; }
.yol-direk-sil--4 * { vector-effect: non-scaling-stroke; }
.sil-kil { fill: var(--maket-kil); stroke: var(--graphite-500); stroke-width: 1; }
.sil-golge { fill: var(--maket-golge); stroke: none; }
.sil-celik { fill: var(--graphite-200); stroke: var(--graphite-600); stroke-width: 1; stroke-linejoin: round; }
.sil-tel { fill: none; stroke: var(--graphite-400); stroke-width: .8; }
.sil-yalitkan { fill: var(--graphite-200); stroke: var(--graphite-600); stroke-width: .8; }
.sil-trafo { fill: var(--maket-trafo); stroke: var(--graphite-600); stroke-width: 1; }
.sil-altin { fill: var(--gold-300); stroke: var(--gold-700); stroke-width: .9; }
.sil-altin-ic { fill: var(--gold-600); stroke: none; }
.sil-altin-cizgi { fill: none; stroke: var(--gold-700); stroke-width: .8; }
.yol-direk-ust { display: none; }   /* dikey kipte üstten görünüm gliflenir */

:is(.yol-kart, .yol-kart-ilk) { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4) var(--space-6) 0 0; }
.yol-h { display: grid; gap: var(--space-2); margin: 0; }
.yol-tarih { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--green-800); }
.yol-baslik { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink); }
.yol-metin { font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.yol-donem--5 .yol-tarih { font-size: 19px; line-height: 26px; color: var(--energy-ink); }
.yol-metin--bugun { font-family: var(--font-display); font-size: 19px; line-height: 28px; font-weight: 500; color: var(--ink); }
/* Sayı plakası (dönem 5): "Bugün" cümlesindeki iki rakam büyük gösterilir (süs, aria-hidden; cümlenin kendisi kartta) */
.yol-say { display: grid; align-content: center; gap: var(--space-2); aspect-ratio: 3 / 2; padding: var(--space-2) var(--space-5); border: 1px solid var(--gold-200); border-radius: var(--radius-md); background: var(--gold-50); }
.yol-say p { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-3); margin: 0; }
.yol-say b { font-family: var(--font-display); font-size: clamp(30px, 4.2vh, 42px); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--energy-ink); }
.yol-say small { margin-left: 5px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.yol-say span { flex-basis: 100%; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); }
.yol-gorsel { margin: var(--space-2) 0 0; }
/* Kırpım: her görsel dönemin konusuna yaklaştırılır. --z yakınlaştırma, --cx/--cy kırpım merkezi (görselin oranı), --yc görsel oranı ÷ 3
   (çerçeve 3:2): görsel çerçeve genişliğinde durur, sol üst kökenli ölçek ve kaydırmayla merkez çerçevenin ortasına gelir. */
.yol-kirp { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ikiz-kagit); }
.yol-kirp img { display: block; width: 100%; height: auto; max-width: none; transform-origin: 0 0; transform: translate(calc((.5 - var(--z, 1) * var(--cx, .5)) * 100%), calc((var(--yc, .5) - var(--z, 1) * var(--cy, .5)) * 100%)) scale(var(--z, 1)); }
.yol-gorsel .kunye { font-size: 11px; line-height: 15px; }
.yol-gorsel .kunye .rozet { font-size: 10px; letter-spacing: .1em; min-height: 22px; }

/* Hat düzeyi ve direk boyutları (≥ 1100 px; statik ve yatay kip ortak). İletkenler bandın %38'inde (viewBox 28 / 38 / 48: .yol-g 12 birim yukarı kayar) ve her
   direk, iletkenlerin bağlandığı noktalar (dönem 2 ve 4: travers uçları; dönem 1, 3: iğne tepesi; dönem 5: portal kirişi) bu düzeye gelecek, zemin de bandın
   altına oturacak biçimde boyutlanır: iletken gövdeden ya da traversin altından değil, uçtan çıkar. Ölçüler plakaların viewBox'larından: örn. 154 kV kule,
   tam gövde yüksekliğinin %91,7'si; orta travers ucu (yalıtkan alt ucu) gövdenin %28,7'sinde. Dönem 2 ve 4'te iletkenler x = 6,1–7,2'den başlar (travers ucu). */
@media (min-width: 1100px) {
  .yol-g { transform: translateY(-12px); }
  .yol-direk-sil--1, .yol-direk-sil--3 { top: calc(var(--hat-y) * .355); height: calc(var(--hat-y) * .67); }
  .yol-direk-sil--2 { top: calc(var(--hat-y) * .117); height: calc(var(--hat-y) * .917); }
  .yol-direk-sil--4 { top: calc(var(--hat-y) * .12); height: calc(var(--hat-y) * .92); aspect-ratio: 22 / 92; }
  .yol-direk-sil--5 { top: calc(var(--hat-y) * .18); height: calc(var(--hat-y) * .85); }
  /* Şebeke etiketi: okun (x = 84,5–90,5; kalem x = 92'de durur, ok ondan önce biter) altında, ok ucuna hizalı; yazı SVG'nin dışındadır (SVG en/boyu serbest, yazı bozulmasın). .yol-g 12 px yukarı kayar */
  .yol-sebeke { display: block; position: absolute; z-index: 1; right: 7%; top: calc(var(--hat-y) * .62 - 4px); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--energy-ink); pointer-events: none; }
}

/* Finalin iki eşiği (yalnız .yol-pencere'de hesaplanır; --yol-p orada kalıtımsız yazılır, sözleşme Sürüm 2): --e p ≥ 0,9'da (kalem uca vardı: hat altına geçer, rakamların üstünden altın ışık geçer),
   --ze p ≥ 0,93'te (şerit uzaklaşıp bütün hat görünür) 0 → 1 olur; 0,0025 genişliğinde, yani fiilen bir ADIMDIR: asıl hareket hedef özelliklerin CSS geçişleridir (zaman tabanlı; scale kompozitörde koşar).
   Kaydırmayla kare kare eşleseydi her karede boyama ve alt ağaç stili gerekirdi (ölçüm: son %12'de 32 kare/sn); böylece kaydırma bütçesine yük bindirmez.
   Kayıtlı <number> oldukları için değer değişmedikçe alt ağaç yeniden stil hesabına girmez. --ms (sol maske uzunluğu) yalnız şeridin kaydığı dar aralıkta (≈ 135 px kaydırma) değişir. */
@property --e { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ze { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ms { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mk { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --maske { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --maske-sag { syntax: "<length>"; inherits: false; initial-value: 24px; }

/* Yatay kip (≥ 1100 px): yolculuk.js bölüme data-yol-kip="yatay" yazar; bölüm 100svh + 300vh olur, sahne sabitlenir. transform'u yolculuk.js yazar (burada yazılmaz).
   Modül yoksa/hareket azaltmada bu blok devreye girmez (kartlar şeritte, statik düzen).
   Sahne üç katmandır: (1) şerit: yalnız hat, direkler ve yıl etiketleri; kaydırmayla soldan sağa kayar (kenarları maskeli). (2) dönem paneli: kartlar şeritle KAYMAZ, sahnede
   sabit durur (sol metin, sağ maket kırpımı) ve kalem bir direğe vardığında (yolculuk.js data-yol-donem yazar) yerinde çapraz geçer. Şerit kartları bu kipte gizlidir
   (aynı içerik bir kez erişilebilir). (3) ilerleme ve yıl ölçeği.
   Kartın şeritle kayması sol-alt yarıyı her durakta boş bırakıyordu ve dönem geçişinde (eski kart söner, yeni kart henüz girmemiş) okunur kart kalmıyordu. */
@media (min-width: 1100px) {
  .hak-yolculuk[data-yol-kip="yatay"] { --hat-y: clamp(150px, 24vh, 280px); --don-w: clamp(260px, 22vw, 340px); height: calc(100vh + 300vh); height: calc(100svh + 300vh); }
  #icerik > .hak-yolculuk[data-yol-kip="yatay"] { padding-block: 0; }   /* "#icerik > .bolum" özgüllüğünü (1,1,0) aşar */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-sahne { position: sticky; top: 0; box-sizing: border-box; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding-top: calc(var(--ust-y) + var(--space-6)); padding-bottom: var(--space-4); overflow: hidden; overflow: clip; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas { flex: none; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .bolum-bas-yan { margin-bottom: var(--space-5); }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .bolum-bas { gap: var(--space-2); }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .h2 { font-size: clamp(34px, 5vh, 46px); line-height: 1.1; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .bolum-bas { max-width: none; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .lead { max-width: 80ch; font-size: 18px; line-height: 27px; }

  /* Pencere: şerit + panel; --yol-p (P8) burada yazılır, --e/--ze/--ms buradan alt ağaca kalıtılır */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-pencere { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; container-type: inline-size;
    --e: clamp(0, calc((var(--yol-p, 0) - .9) * 400), 1);
    --ms: clamp(0px, calc((var(--yol-p, 0) - .47) * 2800px), 140px); }
  /* Şerit penceresi: sağ kenar hep solar; sol kenar şerit kaymaya başlayınca (kalem sahnenin %58'ini geçince; dar şeritte ≈ p 0,48) 140 px'e açılır, kayan direkler kenarda erir. Final (--ze) iki maskeyi de açar. */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-serit { flex: none; min-width: 0; overflow: hidden;
    --mk: calc(1 - var(--ze, 0)); transition: --mk .9s cubic-bezier(.4, 0, .2, 1);
    --maske: calc(max(var(--space-6), (100vw - var(--container-max)) / 2) * .8 * var(--mk)); --maske-sol: calc(var(--ms, 0px) * var(--mk)); --maske-sag: calc(24px * var(--mk));
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--maske-sol) * .5), #000 var(--maske-sol), #000 calc(100% - var(--maske)), transparent calc(100% - var(--maske-sag)));
    mask-image: linear-gradient(90deg, transparent calc(var(--maske-sol) * .5), #000 var(--maske-sol), #000 calc(100% - var(--maske)), transparent calc(100% - var(--maske-sag))); }
  .hak-yolculuk[data-yol-kip="yatay"] .yol { display: flex; width: max-content; max-width: none; margin: 0; padding-inline: max(var(--space-6), calc((100% - var(--container-max)) / 2)); padding-bottom: 46px; will-change: transform; }   /* alt pay: yıl etiketleri */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-donem { flex: none; width: var(--don-w); }
  .yol-hat { position: relative; z-index: 1; }   /* hayalet hattın (aşağıda) üstünde çizilir */

  /* Hayalet hat: JS çalışırken (data-yol-etkin) çizilmemiş hattın soluk kesikli izi ve direk yerleri; kalem geçtikçe gerçek hat üstünü örter */
  .yol[data-yol-etkin] .yol-donem::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--hat-y) * .38 - 1px); height: 2px; background: repeating-linear-gradient(90deg, var(--graphite-300) 0 7px, transparent 7px 15px); opacity: .75; }
  .yol[data-yol-etkin] .yol-donem--5::before { right: 19%; }   /* hayalet hat okun başladığı yerde (x = 81) biter */
  .yol[data-yol-etkin] .yol-donem::after { content: ""; position: absolute; z-index: 0; left: 3%; top: calc(var(--hat-y) * .38 - 6px); width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; border: 2px solid var(--graphite-300); border-radius: 50%; background: var(--surface-page); }

  /* Şerit kartları gizli: içerik panelde (statik düzende ve JS'siz bu kural yok, kartlar yerinde) */
  .hak-yolculuk[data-yol-kip="yatay"] :is(.yol-kart, .yol-kart-ilk) { display: none; }

  /* Yıl etiketi: direğin altında, dönem durumuna göre solar/yanar (yolculuk.js li.etkin / li.gecti). Süs (aria-hidden); gerçek tarih panelde. Etiketler finalde de aynı yerde kalır (şeritle birlikte ölçeklenir). */
  .hak-yolculuk[data-yol-kip="yatay"] .yol[data-yol-etkin] .yol-hayalet { display: block; position: absolute; z-index: 2; left: 3%; top: calc(var(--hat-y) + 14px); translate: -8px 0; font-family: var(--font-display); font-size: clamp(18px, 2.6vh, 23px); line-height: 1; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; pointer-events: none; user-select: none; transition: color .3s ease, opacity .3s ease; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-donem.gecti .yol-hayalet { color: var(--ink-secondary); font-weight: 600; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-donem.etkin .yol-hayalet { color: var(--green-800); font-weight: 600; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--5.etkin .yol-hayalet { color: var(--energy-ink); }
  /* Şeridin solundan çıkan eski dönemlerin etiketi (kalem iki dönem ilerlediyse) sönük kenar maskesinde kesik sözcük bırakmasın diye gizlenir; final (--ze) hepsini geri getirir */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-sahne[data-yol-donem="3"] .yol-donem--1 .yol-hayalet,
  .hak-yolculuk[data-yol-kip="yatay"] .yol-sahne[data-yol-donem="4"] :is(.yol-donem--1, .yol-donem--2) .yol-hayalet,
  .hak-yolculuk[data-yol-kip="yatay"] .yol-sahne[data-yol-donem="5"] :is(.yol-donem--1, .yol-donem--2, .yol-donem--3) .yol-hayalet { opacity: var(--ze, 0); }
  /* Şebeke etiketi kalem uca varınca (--e, p ≥ 0,9) belirir */
  .hak-yolculuk[data-yol-kip="yatay"] .yol[data-yol-etkin] .yol-sebeke { opacity: var(--e, 0); transition: opacity .4s ease, scale .9s cubic-bezier(.4, 0, .2, 1); }

  /* ---- Dönem paneli: beş kart aynı hücrede; etkin olan sahnenin data-yol-donem değerine göre seçilir. Giriş ve çıkış AYNI süre ve eğriyle oynar: eski kart 1 − f(t), yeni kart f(t),
     yani her an iki opaklığın toplamı 1'dir ve kalem direğe vardığı an başlar (kartlar boş kalmadan yerinde çapraz geçer). ---- */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-panel { --r: 2.2; display: grid; flex: 1 1 0; min-height: 0; margin-top: var(--space-3); container-type: size; }
  .yol-panel-kart { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); column-gap: var(--space-8); align-items: start; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1); }
  .yol-sahne[data-yol-donem="1"] .yol-panel-kart--1, .yol-sahne[data-yol-donem="2"] .yol-panel-kart--2, .yol-sahne[data-yol-donem="3"] .yol-panel-kart--3,
  .yol-sahne[data-yol-donem="4"] .yol-panel-kart--4, .yol-sahne[data-yol-donem="5"] .yol-panel-kart--5 { opacity: 1; transform: none; pointer-events: auto; }
  .yol-panel-metin { display: grid; gap: var(--space-3); align-content: start; max-width: 35rem; padding-top: var(--space-2); }
  .yol-panel .yol-h { gap: var(--space-2); }
  .yol-panel .yol-tarih { font-size: clamp(40px, 7.2vh, 84px); line-height: 1; letter-spacing: -.025em; }
  .yol-panel .yol-baslik { font-size: clamp(24px, 3.6vh, 42px); line-height: 1.2; }
  .yol-panel .yol-metin { font-size: clamp(17px, 2.3vh, 24px); line-height: 1.6; }
  .yol-panel :is(.yol-metin--bugun, .yol-metin--ana) { font-family: var(--font-display); font-size: clamp(21px, 3.2vh, 36px); line-height: 1.38; font-weight: 500; color: var(--ink); }   /* kısa içerikli kartlar (dönem 1, Bugün) cümleyi büyük yazar */
  .yol-panel .yol-metin--ana { font-size: clamp(26px, 4vh, 44px); line-height: 1.3; }
  .yol-panel-kart--5 .yol-tarih { color: var(--energy-ink); }
  /* Görsel sütunu: 2,2:1 geniş kırpım (maket plakaları panoramiktir), panelin yüksekliğine göre (künye payı 46 px) ve sütuna sığacak biçimde; metin ile görsel arasında boş orta şerit kalmaz.
     1440×900'de ≈ 650 × 295 px, 1280×720'de ≈ 560 × 255 px (en az 420 px geniş). Metin sütunu 35 rem'de biter, görsel sütunu kalanı doldurur: ikisi arasında geniş boş şerit kalmaz. */
  .yol-panel .yol-gorsel { justify-self: end; width: min(100%, calc((100cqh - 46px) * var(--r))); margin: 0; }
  .yol-panel .yol-kirp { width: 100%; aspect-ratio: var(--r) / 1; --yc: calc(var(--ar, 1.5) / (2 * var(--r))); }
  .yol-panel .yol-say { justify-self: end; width: min(100%, calc((100cqh - 46px) * var(--r))); aspect-ratio: var(--r) / 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: center; column-gap: var(--space-5); padding: var(--space-4) var(--space-6); }
  .yol-panel .yol-say p { display: grid; align-content: center; gap: var(--space-2); }
  .yol-panel .yol-say b { font-size: clamp(48px, 9.5vh, 120px); line-height: 1; }
  .yol-panel .yol-say small { margin-left: 6px; font-size: clamp(16px, 2.3vh, 22px); }
  .yol-panel .yol-say span { font-size: clamp(14px, 1.9vh, 17px); line-height: 1.3; }
  /* Altın darbe: kalem uca varınca (--e) kartın ARKASINDAN yumuşak bir ışık bandı geçer (::after, z-index -1; yalnız `translate` geçişi, bileşik katmanda). Rakamlar her zaman düz, tam kontrastlı metindir
     (eski sürüm rakamlara kırpılmış degradeydi: yazdırmada/zorunlu renklerde ve ölçümde okunurluğu belirsizdi). Durağan hâlde bant kartın dışında kalır (rakamlar önceden okunur). */
  .yol-panel .yol-say { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
  .yol-panel .yol-say::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0 36%, rgb(255 229 138 / .6) 50%, transparent 64% 100%); translate: calc(-100% + var(--e, 0) * 200%) 0; transition: translate 1.4s cubic-bezier(.4, 0, .2, 1); }

  /* İlerleme ve yıl ölçeği: çizgi --yol-p (0–1; kalem 0,9'da biter) ile dolar, dönem işaretleri .etkin/.gecti ile yanar, sayaç "01 / 05" */
  .hak-yolculuk[data-yol-kip="yatay"] .yol-olcek { display: block; flex: none; margin-top: var(--space-4); }
  .yol-olcek-ic { position: relative; }
  .yol-sayac { position: absolute; right: 0; top: 14px; margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
  .yol-sayac b { font-weight: 600; color: var(--ink); }
  .yol-sayac b::before { content: "01"; }
  .yol-sahne[data-yol-donem="2"] .yol-sayac b::before { content: "02"; }
  .yol-sahne[data-yol-donem="3"] .yol-sayac b::before { content: "03"; }
  .yol-sahne[data-yol-donem="4"] .yol-sayac b::before { content: "04"; }
  .yol-sahne[data-yol-donem="5"] .yol-sayac b::before { content: "05"; color: var(--energy-ink); }
  .yol-olcek-cizgi { position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--graphite-200); }
  .yol-olcek-cizgi i { position: absolute; inset: 0; border-radius: inherit; background: var(--gold-500); transform-origin: 0 50%; transform: scaleX(min(1, calc(var(--yol-p, 0) / .9))); }
  .yol-olcek-liste { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
  .yol-olcek-liste li { position: relative; display: flex; align-items: baseline; gap: var(--space-2); padding-top: 18px; font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
  .yol-olcek-liste li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--graphite-300); border-radius: 50%; background: var(--surface-page); }
  .yol-olcek-liste b { font-weight: 500; }   /* numara gerçek bilgi: opaklıkla soluklaştırılmaz (renk zaten --ink-muted, ≥ 4,5:1) */
  /* Dönem işaretleri sahnenin data-yol-donem değerinden (yolculuk.js; 1–5): etkin dönem ve önceki dönemler yanar */
  .yol-sahne:is([data-yol-donem="2"], [data-yol-donem="3"], [data-yol-donem="4"], [data-yol-donem="5"]) .yol-olcek-d1::before,
  .yol-sahne:is([data-yol-donem="3"], [data-yol-donem="4"], [data-yol-donem="5"]) .yol-olcek-d2::before,
  .yol-sahne:is([data-yol-donem="4"], [data-yol-donem="5"]) .yol-olcek-d3::before,
  .yol-sahne[data-yol-donem="5"] .yol-olcek-d4::before { border-color: var(--gold-500); background: var(--gold-300); }
  .yol-sahne[data-yol-donem="1"] .yol-olcek-d1::before, .yol-sahne[data-yol-donem="2"] .yol-olcek-d2::before, .yol-sahne[data-yol-donem="3"] .yol-olcek-d3::before,
  .yol-sahne[data-yol-donem="4"] .yol-olcek-d4::before, .yol-sahne[data-yol-donem="5"] .yol-olcek-d5::before { border-color: var(--gold-600); background: var(--gold-400); box-shadow: 0 0 0 4px var(--gold-100); }
  .yol-sahne[data-yol-donem="1"] .yol-olcek-d1, .yol-sahne[data-yol-donem="2"] .yol-olcek-d2, .yol-sahne[data-yol-donem="3"] .yol-olcek-d3,
  .yol-sahne[data-yol-donem="4"] .yol-olcek-d4, .yol-sahne[data-yol-donem="5"] .yol-olcek-d5 { color: var(--ink); font-weight: 600; }
}
.yol-olcek { display: none; }
/* Yıl etiketi: yalnız yatay kipte (JS çalışırken) çizilir; statikte ve dikeyde gerçek tarih kartta tam görünür */
.yol-hayalet { display: none; }
.yol-panel { display: none; }
@media (min-width: 1100px) {
  /* Final (p ≥ 0,9): hattın tamamı enerjilenir, sonra şerit uzaklaşıp bütün hat görünür. Her ikisi de eşikte başlayan CSS geçişleridir (yukarıdaki @property notu).
     --e iletkenleri altına geçirir (dönem 3'ün dalları ve düğümleri de) ve panelde rakam kartının arkasından altın ışık bandı geçirir. --ze şeridi sağ kenar etrafında küçültür: bağımsız `scale`
     özelliği yolculuk.js'in satır içi `transform: translate3d()`'ine dokunmaz (sıra: translate → scale → transform); sağ uç sahnenin sağ kenarında kalır; ölçek, sahne genişliğinin
     şerit genişliğine oranıdır (tan(atan2(sahne, şerit)): saf CSS, %4 pay; şerit = 5 dönem + iki kenar payı). Şerit artık yalnız hat olduğu için dönem genişliği dardır (--don-w):
     ölçek ≈ 0,67 (kartlı geniş şeritte 0,35 idi) ve direkler finalde 95–150 px kalır. Kenar maskeleri açılır. Destek yoksa (eski tarayıcı) hiçbiri uygulanmaz: final kalemin bittiği hâlde kalır. */
  @supports (stroke: color-mix(in srgb, red calc(.5 * 100%), blue)) {
    .hak-yolculuk[data-yol-kip="yatay"] .yol-iletken { transition: stroke .7s ease; }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--1 .yol-iletken { stroke: color-mix(in srgb, var(--gold-500) calc(var(--e, 0) * 100%), var(--graphite-400)); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--2 .yol-iletken { stroke: color-mix(in srgb, var(--gold-500) calc(var(--e, 0) * 100%), var(--graphite-500)); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--3 .yol-iletken { stroke: color-mix(in srgb, var(--gold-500) calc(var(--e, 0) * 100%), var(--green-700)); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--3 .yol-dal { stroke: color-mix(in srgb, var(--gold-400) calc(var(--e, 0) * 100%), var(--green-500)); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-donem--3 .yol-dugum { stroke: color-mix(in srgb, var(--gold-500) calc(var(--e, 0) * 100%), var(--green-700)); }
  }
  @supports (scale: tan(atan2(1px, 2px))) {
    .hak-yolculuk[data-yol-kip="yatay"] .yol-pencere { --ze: clamp(0, calc((var(--yol-p, 0) - .93) * 400), 1); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol { --ols: calc(.96 * tan(atan2(100cqw, calc(5 * var(--don-w) + 2 * max(var(--space-6), calc((100cqw - var(--container-max)) / 2)))))); --kucul: calc(1 - var(--ze, 0) * (1 - var(--ols))); transform-origin: 100cqw 50%; scale: var(--kucul, 1); transition: scale .9s cubic-bezier(.4, 0, .2, 1); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-sebeke { transform-origin: 100% 0; scale: calc(1 / var(--kucul, 1)); }
    /* Çizgi kalınlıkları: non-scaling-stroke CSS dönüşümünü (üst öğenin scale'i) telafi etmez; küçülünce iletkenler ve ok kılla incelmesin diye eşikte tek adımda 1 / ölçek kat
       kalınlaşır (kalınlık geçişi her karede SVG boyaması isterdi: ölçüm −10 kare/sn). Dallar ve düğümler orantılı küçülür (50 düğüm üst üste binmesin). Hayalet (kesikli) hat ve direk yerleri bütün hat çizili olduğundan söner. */
    .hak-yolculuk[data-yol-kip="yatay"] .yol-iletken { stroke-width: calc(1.5px * (1 + (1 / var(--ols, 1) - 1) * .85 * var(--ze, 0))); }
    .hak-yolculuk[data-yol-kip="yatay"] :is(.yol-donem--4, .yol-donem--5) .yol-iletken { stroke-width: calc(1.75px * (1 + (1 / var(--ols, 1) - 1) * .85 * var(--ze, 0))); }
    .hak-yolculuk[data-yol-kip="yatay"] .yol-ok { stroke-width: calc(3px * (1 + (1 / var(--ols, 1) - 1) * .85 * var(--ze, 0))); }
    .yol[data-yol-etkin] .yol-donem::before { opacity: calc(.75 * (1 - var(--ze, 0))); transition: opacity .4s ease; }
    .yol[data-yol-etkin] .yol-donem::after { opacity: calc(1 - var(--ze, 0)); transition: opacity .4s ease; }
  }
}
/* Kısa pencere (≤ 800 px): sıkı başlık, küçük hat; panel yüksekliği 300 px civarında kalır */
@media (min-width: 1100px) and (max-height: 800px) {
  .hak-yolculuk[data-yol-kip="yatay"] { --hat-y: clamp(116px, 20vh, 160px); }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .bolum-bas-yan { margin-bottom: var(--space-3); }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .h2 { font-size: 32px; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-bas .lead { font-size: 16px; line-height: 24px; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol { padding-bottom: 38px; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol[data-yol-etkin] .yol-hayalet { top: calc(var(--hat-y) + 10px); font-size: 17px; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-panel { --r: 2.7; margin-top: var(--space-2); }
  .yol-panel .yol-tarih { font-size: clamp(46px, 8.2vh, 60px); }
  .yol-panel .yol-baslik { font-size: 28px; }
  .yol-panel .yol-metin { font-size: 19px; line-height: 29px; }
  .yol-panel :is(.yol-metin--bugun, .yol-metin--ana) { font-size: 25px; line-height: 34px; }
  .yol-panel .yol-metin--ana { font-size: 31px; line-height: 40px; }
  .yol-say { padding: 6px var(--space-4); }
  .yol-say b { font-size: 28px; }
  .yol-say small { font-size: 13px; }
  .yol-say span { font-size: 12px; line-height: 15px; }
  .yol-panel .yol-say b { font-size: clamp(44px, 9vh, 64px); }
  .yol-panel .yol-say small { font-size: 16px; }
  .yol-panel .yol-say span { font-size: 14px; }
  .hak-yolculuk[data-yol-kip="yatay"] .yol-olcek { margin-top: var(--space-3); }
}
/* Uzun pencere (≥ 1000 px; 1920×1080 ve üstü): sütun genişliği sınırlı (1240 px) olduğundan görsel daha az geniş kesilir (oran düşer), panelin yüksekliğini doldurur */
@media (min-width: 1100px) and (min-height: 1000px) { .hak-yolculuk[data-yol-kip="yatay"] .yol-panel { --r: 1.75; } }
@media (min-width: 1100px) and (min-height: 1250px) { .hak-yolculuk[data-yol-kip="yatay"] .yol-panel { --r: 1.45; } }
/* Çok kısa pencerede (≈ 690 px altı) panelin görsel sütunu gizlenir; metin, hat ve ölçek tam kalır */
@media (min-width: 1100px) and (max-height: 690px) {
  .yol-panel-kart { grid-template-columns: minmax(0, 1fr); }
  .yol-panel .yol-gorsel, .yol-panel .yol-say { display: none; }
}

/* Dikey (< 1100 px): direkler solda, kartlar sağda. Yan görünüm siluetleri yerine ray üzerinde üstten görünüm gliflenir
   (direk = daire, kol = raya dik çubuk): hat .yol-g takasıyla aynı eksen değişimini alır, glif ray ekseninde (x = 28) durur. */
@media (max-width: 1099px) {
  ol.yol { grid-template-columns: minmax(0, 1fr); max-width: calc(44rem + 2 * var(--space-6)); margin: 0; }
  .yol-donem { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: none; }
  .yol-hat { width: 56px; height: 100%; min-height: 96px; }
  .yol-g { transform: matrix(0, 1, 1, 0, 0, 0); }
  .yol-direk-sil { display: none; }
  .yol-direk-ust { display: block; position: absolute; z-index: 1; left: 0; top: 0; width: 56px; height: 24px; overflow: visible; pointer-events: none; }
  :is(.yol-kart, .yol-kart-ilk) { padding: 0 0 var(--space-10) var(--space-4); }
  .yol-gorsel { max-width: 420px; }
  .yol-donem--5 :is(.yol-kart, .yol-kart-ilk) { padding-bottom: var(--space-4); }
}

/* Tablet (768–1099 px, dikey kip): kart iki sütun (metin | görsel), ray içeriğe biraz uzaklaşır ve liste ortalanır; sağ üçte bir boş kalmaz. */
@media (min-width: 768px) and (max-width: 1099px) {
  ol.yol { max-width: calc(60rem + 2 * var(--space-8)); margin-inline: auto; padding-inline: var(--space-8); }
  :is(.yol-kart, .yol-kart-ilk) { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); column-gap: var(--space-10); align-items: start; padding-left: var(--space-6); }
  :is(.yol-kart, .yol-kart-ilk) > :is(.yol-h, .yol-metin) { grid-column: 1; }
  :is(.yol-kart, .yol-kart-ilk) > .yol-gorsel { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin-top: 0; }
  :is(.yol-kart, .yol-kart-ilk) .yol-baslik { font-size: 21px; line-height: 28px; }
  :is(.yol-kart, .yol-kart-ilk) .yol-metin { font-size: 16px; line-height: 25px; }
  .yol-metin--bugun { font-size: 20px; line-height: 30px; }
}

/* ---------- 5 · Ekibimiz ---------- */
/* Galeri: üç kare, ritim 3:4 + 3:4 + 3:2. Izgara 1fr / 1fr / 2fr: yatay kare (2u genişlik, 3:2 → 4u/3) ve dikey kareler (u genişlik, 3:4 → 4u/3) aynı yüksekliktedir
   (sütun aralığından bağımsız). Önde insanlı iki kare (çatıda montaj; sayfa başındaki kablo karesinin dar, yakın kırpımı: çalışan ve kürek), büyük karede devam eden
   sahanın havadan görüntüsü. Jeton (SAHA_GALERI) fotoğrafın başka kırpımını sunamadığı için mozaik elle kurulur; kırpımın aynı fotoğraf olduğu künyede yazar. */
.hak-mozaik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6) var(--grid-gutter); align-items: start; }
.hak-kare { margin: 0; min-width: 0; }
.hak-kare-cerceve { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ikiz-kagit); }
.hak-kare--dikey .hak-kare-cerceve { aspect-ratio: 3 / 4; }
.hak-kare--yatay .hak-kare-cerceve { aspect-ratio: 3 / 2; }
.hak-kare-cerceve img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Eller ve kürek sapı kırpımı: sayfa başındaki kablo penceresiyle aynı arşiv fotoğrafı, farklı kadraj (≈ 4,6×; kürek sapını tutan eldivenli eller ve hendek).
   Dosya önceden kırpılmıştır (ges-insaat-kablo-kanali-detay-392.webp, 392×523 = 3:4, ≈ 46 KB; arsiv-yayin.json "detay"): çerçeve onu olduğu gibi örter.
   Önceden 1800 px dosyanın tamamı inip CSS ile 4,6× büyütülüp kırpılıyordu (327 KB). */
.hak-kare--yatay img { transform-origin: 30% 62%; transform: scale(1.3); }
@media (max-width: 700px) {
  .hak-mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .hak-kare--yatay { grid-column: 1 / -1; }
  /* İki dar sütunda arşiv rozeti sığmaz (nowrap ≈ 190 px > sütun ≈ 170 px): küçülür ve gerekirse iki satıra kırılır */
  .hak-kare .rozet { max-width: 100%; padding-inline: 8px; font-size: 10px; letter-spacing: .06em; line-height: 14px; white-space: normal; }
  .hak-kare .kunye { font-size: 11px; line-height: 15px; letter-spacing: .08em; }
}
.hak-galeri-baslik { margin: var(--space-8) 0 var(--space-4); }
.hak-ekip-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-8); margin-top: var(--space-8); }

/* ---------- 6 · Teknoloji & AR-GE: parsel paftası ---------- */
.hak-arge-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.hak-arge-metin { display: grid; gap: var(--space-5); justify-items: start; }
.hak-pafta { margin: 0; }
.hak-pafta-cizim { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ikiz-kagit); }
.hak-pafta-cizim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hak-pafta-cizim img:first-child { opacity: .55; }
.hak-pafta-rozet { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1; }
.hak-pafta figcaption { margin-top: var(--space-3); }
@media (max-width: 1000px) { .hak-arge-ic { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }
@media (max-width: 480px) { .hak-pafta-rozet { top: var(--space-3); right: var(--space-3); letter-spacing: .08em; } }

/* ---------- 7 · Neden Baykara ---------- */
.hak-sutunlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10) var(--grid-gutter); margin: 0; padding: 0; list-style: none; }
.hak-sutunlar li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--accent); }
.hak-sutunlar .h3 { font-size: 20px; line-height: 28px; }
.hak-sutunlar p { font-size: 16px; line-height: 26px; color: var(--ink-secondary); }
.hak-neden .hak-guvenceler { margin-top: clamp(48px, 6vw, 72px); padding-top: var(--space-8); border-top: 1px solid var(--line); gap: var(--space-6) var(--space-10); }
.hak-guvenceler .onay-halkasi span { display: grid; }
.hak-guvenceler .onay-halkasi small { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); }
.hak-neden-dipnot { margin-top: var(--space-8); }
@media (max-width: 1000px) { .hak-sutunlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hak-sutunlar { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .hak-guvenceler { display: grid; justify-items: start; } }

/* ---------- 8 · Ofislerimiz ---------- */
.hak-ofis address { font-style: normal; }
.hak-ofis-yer { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }

/* ---------- 9 · Referanslar (mini şerit) ---------- */
.hak-referanslar .bolum-bas-yan { align-items: center; }
.hak-referanslar .logo-duvar { grid-template-columns: repeat(auto-fit, minmax(min(132px, 40%), 1fr)); gap: var(--space-3); }
.hak-referanslar .logo-duvar > li { min-height: 88px; padding: var(--space-4); }