/* Projeler & Referanslar (TASARIM-PLANI 3.4, sahibi P11). META "css": ["sayfa-projeler"] ile yalnız projeler.html'e
   bağlanır; tokens > bilesenler > site > hareket'ten sonra yüklenir. Yalnız token değişkenleri kullanılır.
   Bileşenler (ölçü, künye, rozet, derinlik, logo duvarı, harita, filtre, tablo) bilesenler.css ve site.css'tedir;
   burada yalnız bu sayfanın düzeni durur. Her şey JS'siz, WebGL'siz ve hareket azaltmada son hâliyle okunur. */

/* ---------- 1 · Sayfa başı: portföy üçlüsü ---------- */
.pr-olcu { --olcu-sutun: 3; max-width: 1040px; margin-top: clamp(40px, 5vw, 64px); }
/* "1.600+ MW": artı sayı gövdesinde kalır (sayaç yalnız ilk metin düğümünü yazar); birim artıdan biraz açılır */
.pr-olcu .olcu-sayi > span:not(.sayac-sayi) + small { margin-left: .4em; }
.pr-bas-not { display: grid; gap: var(--space-1); margin-top: var(--space-8); max-width: 72ch; }
/* bilesenler.css 900 px altında 2 sütuna iner; üçlü burada 560 px'e kadar tek satırda kalır, altında alt alta dizilir */
@media (min-width: 561px) and (max-width: 900px) { .pr-olcu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pr-olcu { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .pr-olcu .olcu-sayi { font-size: clamp(40px, 12vw, 52px); }
}
/* Geniş ekranda (≥ 1100 px) sayfa başı iki sütundur: solda başlık, lead ve dipnotlar; sağda üç ölçü satır satır (sayı solda,
   açıklama sağda). Böylece sayfa başı ~ 430 px'e iner ve imza olan harita ilk ekranda başlar (1440 × 900'de tuvalin
   yarıdan fazlası görünür). DOM sırası aynı kalır: başlık, ölçüler, dipnotlar. */
@media (min-width: 1100px) {
  .pr-bas { padding-block: clamp(48px, 4.4vw, 64px) clamp(32px, 3vw, 44px); }
  .pr-bas > .kap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: end; }
  .pr-bas .sayfa-basi-ic { grid-column: 1; grid-row: 1; max-width: none; }
  .pr-bas .pr-bas-not { grid-column: 1; grid-row: 2; margin-top: var(--space-6); }
  .pr-bas .pr-olcu { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: none; margin-top: 0; }
  .pr-bas .pr-olcu > .olcu { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "sayi etiket" "cizgi cizgi"; column-gap: var(--space-5); align-items: end; }
  .pr-bas .pr-olcu .olcu-sayi { grid-area: sayi; font-size: min(clamp(36px, 3.4vw, 48px), 25cqi); }
  .pr-bas .pr-olcu .olcu-etiket { grid-area: etiket; padding-bottom: 6px; }
  .pr-bas .pr-olcu .olcu-cizgi { grid-area: cizgi; margin-top: var(--space-2); }
}

/* ---------- 2 · Harita ve filtre ---------- */
.pr-harita-bolum { padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: clamp(56px, 6vw, 88px); }
/* Süzgeç: iki grup, her birinin görünür başlığı var (Tür, Durum: aria-labelledby ile bağlı) ve iki grup da aynı düzendedir:
   geniş ekranda başlık üstte, düğmeler hap satırı; 560 px altında başlık solda, düğmeler yatay kaydırılan tek satır. */
.pr-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-6); }
.pr-filtre-grup { display: grid; gap: var(--space-2); }
.pr-filtre-grup + .pr-filtre-grup { padding-left: var(--space-8); border-left: 1px solid var(--line); }
.pr-filtre-baslik { margin: 0; color: var(--ink-muted); }
.pr-filtre-durum { margin-left: auto; }
.pr-bos { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sky); color: var(--ink); font-size: 15px; line-height: 24px; }
/* Harita tam kap genişliğindedir (1240 px; tuval oranı site.css'teki 12:5, yatay posterin oranıyla aynı: posterden canlıya geçişte kadraj kaymaz); altında lejant ile işaretli proje listesi yan yana, en altta
   konumu belirtilmemiş projelerin yatay şeridi durur (boşluk kalmaz: her satır tam genişliği kullanır). */
.pr-harita-duzen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.pr-harita { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1001px) {
  .pr-harita { row-gap: var(--space-6); }
  .pr-harita .pr-lejant, .pr-harita .pr-harita-liste { margin-top: 0; }
}
/* Lejant ile liste yan yana yalnız ≥ 1200 px'te (liste sütunları ~ 280 px'ten dar olursa metin üç satıra sarılır) */
@media (min-width: 1200px) {
  .pr-harita { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 4vw, 64px); }
  .pr-harita .harita-tuval { grid-column: 1 / -1; grid-row: 1; }
  .pr-harita .pr-lejant { grid-column: 1; grid-row: 2; }
  .pr-harita .pr-harita-liste { grid-column: 2; grid-row: 2; }
}
.pr-semboller { position: absolute; width: 0; height: 0; overflow: hidden; }
.pr-lejant { display: grid; justify-content: stretch; gap: var(--space-2); }
.pr-lejant .caption { max-width: 78ch; }
/* İpucu tek cümledir; harita tıklanamadığında (hareket azaltma: harita modülü yüklenmez) gizlenir */
.pr-ipucu { color: var(--ink-secondary); }
html.hareket-yok .pr-ipucu { display: none; }

/* Durum anahtarı: haritadaki üç işaretin biçimi ve rengi (harita.js: dolu küre = tamamlandı, halka = portföy, ışık sütunu =
   devam eden). Renk türü verir (viz-<tür>); haritadaki bütün konumlu projeler GES olduğu için altın. */
.pr-anahtar { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.pr-anahtar li { display: flex; align-items: center; gap: var(--space-3); }
.pr-anahtar span { display: grid; }
.pr-anahtar b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pr-anahtar i { font-size: 13px; line-height: 18px; font-style: normal; color: var(--ink-secondary); }
.pr-anahtar-isaret { flex: none; color: var(--viz-ges); }

/* Harita üstü not: süzgeç sonucunda haritada 0 işaret kalırsa (kontrol.js). Canlı harita, poster (dar ekran, hareket azaltma,
   WebGL yok) ve nokta kümesi süzgeci aynı biçimde izler: poster, süzgeç dışı işaretleri işaretsiz posterden yamayarak siler
   (harita-poster.js), bu yüzden not her kipte aynı cümleyi söyler. */
.pr-harita-not { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 4; margin: 0; pointer-events: none; }
.pr-harita-not > span { display: block; max-width: 46ch; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-sm); color: var(--ink); font-size: 14px; line-height: 20px; }
.pr-harita-not > span[hidden] { display: none; }
@media (max-width: 699px) {
  .pr-harita-not { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); }
  .pr-harita-not > span { padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; }
}

/* Konumsuz liste ve haritadaki proje listesi süzgece uyar (kontrol.js bk:filtre'yi dinler): süzgeç açıkken eşleşen satır
   vurgulanır, ötekiler solar; hiçbiri eşleşmezse listenin altında ileti çıkar. Süzgeç yokken (JS'siz) hepsi olağan durur. */
.pr-konumsuz { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6) var(--space-8); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.pr-konumsuz .h3 { font-size: 20px; line-height: 28px; }
.pr-konumsuz-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.pr-konumsuz-liste li { display: flex; align-items: baseline; gap: var(--space-3); margin-inline: calc(var(--space-3) * -1); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-subtle); font-size: 15px; line-height: 22px; }
.pr-konumsuz-liste li:last-child { border-bottom: 1px solid var(--line-subtle); }
/* ≥ 1001 px: yatay şerit. Solda başlık ve açıklamalar, sağda beş proje iki sütunda (3 + 2, soldan sağa okunur) */
@media (min-width: 1001px) {
  .pr-konumsuz { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "baslik liste" "not liste" "kisalt liste" "bos liste"; column-gap: clamp(40px, 5vw, 80px); row-gap: var(--space-2); align-items: start; }
  .pr-konumsuz > .h3 { grid-area: baslik; }
  .pr-konumsuz > .pr-konumsuz-liste { grid-area: liste; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--space-8); margin-top: 0; align-self: start; }
  .pr-konumsuz > .pr-eslik-bos { grid-area: bos; }
  .pr-konumsuz > .small { grid-area: not; }
  .pr-konumsuz > .dipnot { grid-area: kisalt; margin-top: var(--space-3); }
  .pr-konumsuz-liste li:nth-child(3), .pr-konumsuz-liste li:nth-child(5) { border-bottom: 1px solid var(--line-subtle); }
  .pr-konumsuz-liste li:last-child { border-bottom: 1px solid var(--line-subtle); }
}
.pr-konumsuz-liste .bk-tech { transform: translateY(-1px); }
.pr-konumsuz-liste a { color: var(--ink); text-decoration-color: var(--line-strong); }
.pr-konumsuz-liste a:hover { color: var(--link); text-decoration-color: currentColor; }
[data-eslik-liste] > li { transition: opacity var(--sure-etiket) var(--ease-etiket), background-color var(--sure-etiket) var(--ease-etiket); }
[data-eslik-liste] > li[data-soluk] { opacity: .5; }
[data-eslik-liste] > li[data-eslesme] { background: var(--gold-50); box-shadow: inset 3px 0 0 var(--enerji-darbe); }
.pr-harita-liste li[data-vurgu] { background: var(--gold-100); box-shadow: inset 3px 0 0 var(--enerji-darbe); }
.pr-eslik-bos { padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) { [data-eslik-liste] > li { transition: none; } }
/* İki süzgeç grubu 900 px altında alt alta sarılır: ayırıcı çizgi yalnız aynı satırdayken anlamlıdır */
@media (max-width: 900px) { .pr-filtre-grup + .pr-filtre-grup { padding-left: 0; border-left: 0; } .pr-filtre-grup { width: 100%; } }
@media (max-width: 700px) { .pr-filtre-durum { width: 100%; margin-left: 0; } }
/* Dar telefonda her grup tek satırdır: solda görünür başlık (Tür, Durum; aria-labelledby bağı sürer), sağda 44 px'lik hapların yatay
   kaydırılan şeridi. Süzgeç iki satır + durum satırı (~ 120 px) tutar, harita bölümün ilk ekranında başlar. Şerit: kaydırma
   yakalama (proximity), sağ kenarda soluklaşma (daha öteye kayan düğme olduğunu söyler); sağdaki dolgu soluklaşma genişliği kadardır,
   böylece kaydırma sonunda son düğme soluk kalmaz. Kaydırma başlayınca sol kenar da soluklaşır (CSS kaydırma zaman çizelgesi; kullanıcının kaydırmasını izler,
   kendiliğinden hareket etmez; zaman çizelgesi yoksa yalnız sağ soluklaşma). Odak halkası (5 px) kırpılmasın diye şeridin dikey ve sol dolgusu 6 px, negatif kenar boşluğuyla geri alınır. */
@property --pr-sol { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes pr-sol-ac { from { --pr-sol: 0px; } to { --pr-sol: 24px; } }
@media (max-width: 560px) {
  .pr-filtre { gap: var(--space-2); margin-bottom: var(--space-4); }
  .pr-filtre-grup { grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: var(--space-2); }
  .pr-filtre .filtre {
    --pr-sol: 0px; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px 24px; scrollbar-width: none;
    margin: -6px 0 -6px -6px; padding: 6px 24px 6px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pr-sol), #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--pr-sol), #000 calc(100% - 24px), transparent);
  }
  .pr-filtre .filtre::-webkit-scrollbar { display: none; }
  .pr-filtre .filtre-btn { flex: none; min-height: 44px; scroll-snap-align: start; white-space: nowrap; }
  .pr-filtre-durum { margin: 0; font-size: 13px; line-height: 18px; }
  @supports (animation-timeline: scroll()) {
    .pr-filtre .filtre { animation: pr-sol-ac linear both; animation-timeline: scroll(self inline); animation-range: 0px 24px; }
  }
}
/* Dokunmatikte liste bağlantısı 44 px yüksekliğinde tam satır hedefidir (satır boşluğu bağlantının içine alınır) */
@media (pointer: coarse) { .pr-konumsuz-liste li { padding-block: 0; } .pr-konumsuz-liste a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Dar ekran (699 px altı): dikey poster (etiketsiz; projeler.html <picture>) yalnız haritanın bulunduğu orta bant kadar
   gösterilir (--kes-a başlangıç, --kes-o oran; ana sayfadaki kırpımla aynı; açılan nokta kartı tuvalin altına taşmaz). İşaret
   adları posterde olmadığından altında haritadaki beş projenin HTML listesi durur (ad 16 px); nabız noktaları dokunmayla
   aynı adları kart olarak açar. Bu düzen JS'siz ve hareket azaltmada olduğu gibi kalır; JS açık ve dar ekrandaysa harita.js
   kendi adlı sıcak noktalarını kurar ve bu nokta grubunu gizler. Canlı harita (≥ 700 px, WebGL hazır) poster söner. */
.pr-harita { --kes-a: 21%; --kes-o: .58; }
.pr-noktalar { display: none; position: absolute; inset: 0; z-index: 2; }
@media (max-width: 699px) {
  .pr-harita .harita-tuval { aspect-ratio: 78 / 58; height: auto; min-height: 0; }
  .pr-harita .harita-tuval .sahne-poster { object-fit: cover; object-position: 50% 50%; }
  .harita:not([data-hazir]) .pr-noktalar { display: block; }
}
@media (min-width: 700px) and (max-width: 700px) { .pr-harita .harita-tuval { aspect-ratio: 16 / 8; height: auto; min-height: 320px; } }
/* Haritada işaretli projeler: her genişlikte görünür. Dar ekranda poster noktalarının, geniş ekranda klavyenin ve yardımcı
   teknolojilerin yolu; her satır proje kartına bağlanır. Satıra odaklanınca ya da üstüne gelince (kontrol.js, bk:proje-vurgu)
   haritadaki işaret vurgulanır; işarete gelince satır vurgulanır. ≥ 700 px'te iki sütun (3 + 2, batıdan doğuya). */
.pr-harita-liste { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.pr-harita-liste .tip-ust { margin: 0; color: var(--ink-muted); }
@media (min-width: 700px) {
  .pr-harita-liste ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--space-8); }
  .pr-harita-liste li:nth-child(3), .pr-harita-liste li:nth-child(5) { border-bottom: 1px solid var(--line-subtle); }
}
.pr-harita-liste ul { display: grid; margin: 0; padding: 0; list-style: none; }
.pr-harita-liste li { margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); border-top: 1px solid var(--line-subtle); }
.pr-harita-liste li:last-child { border-bottom: 1px solid var(--line-subtle); }
.pr-harita-liste a { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; min-height: 56px; padding-block: var(--space-2); color: var(--ink); text-decoration: none; }
.pr-harita-liste a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.pr-harita-liste .pr-anahtar-isaret { grid-row: 1 / span 2; justify-self: center; }
.pr-liste-ad { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; }
.pr-liste-alt { grid-column: 2; font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
/* Nabız noktaları: <details name> dokununca kartı açar, başkası açılınca öncekini kapatır (JS'siz). Konum, dikey posterdeki
   pin tabanıdır ve YALNIZ harita-poster.js > POSTER['harita-poster-dikey.webp'].pin tablosundan (tabanX, tabanY; % poster boyutu)
   alınır: aşağıdaki tablo o değerlerin kopyasıdır (poster 12:27'de yenilendi; değerler o tablodan). P6 posteri yenileyince tablo da değişir; burası aynı anda güncellenmezse
   noktalar pinlerin üstünden kayar (kabul: nokta merkezi ile pin tabanı ≤ 2 px). Bant kırpımına göre çevrilir (--kes-a, --kes-o).
   Doğu kümesinde üç pin birbirine ~32 px (390 px genişlikte) uzaktadır: bu üçünde (--dar) dokunma alanı genişliği tuvale göre
   küçülür (yanındakinin yarısını aşmaz), yüksekliği 44 px kalır. Halka kaydırmayla bir kez yayılıp durur. */
.pr-nokta[data-pin="bergama-ges"]      { --x: 8.19%;  --y: 45.72%; }
.pr-nokta[data-pin="insuyu-ges"]       { --x: 33.33%; --y: 54.32%; }
.pr-nokta[data-pin="konuklu-ges"]      { --x: 60.65%; --y: 58.51%; }
.pr-nokta[data-pin="alpedo-cati-ges"]  { --x: 52%;    --y: 58.99%; }
.pr-nokta[data-pin="ulacli-ges"]       { --x: 69.01%; --y: 56.11%; }
.pr-noktalar { container-type: inline-size; }
.pr-nokta { --zw: 44px; --zh: 44px; pointer-events: none; position: absolute; left: var(--x); top: calc((var(--y) - var(--kes-a)) / var(--kes-o)); }
.pr-nokta--dar { --zw: clamp(24px, 8.2cqw, 44px); }
.pr-nokta--dar .pr-nokta-isaret { width: 10px; height: 10px; }
.pr-nokta[open] { z-index: 5; }
.pr-nokta[hidden] { display: none; }
.pr-nokta > summary { pointer-events: auto; min-height: 0; position: relative; left: calc(var(--zw) / -2); top: calc(var(--zh) / -2); display: grid; place-items: center; width: var(--zw); height: var(--zh); border-radius: 50%; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.pr-nokta > summary::-webkit-details-marker { display: none; }
.pr-nokta > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pr-nokta-isaret { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--energy); box-shadow: 0 0 0 3px var(--surface-card), var(--shadow-sm); transition: transform .25s var(--ease-giris); }
.pr-nokta-isaret::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--energy); border-radius: 50%; opacity: .5; }
.pr-nokta[open] .pr-nokta-isaret { transform: scale(1.3); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pr-nokta-isaret::after { animation: pr-nabiz linear both; animation-timeline: view(); animation-range: entry 25% cover 50%; }
  }
}
@keyframes pr-nabiz { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.7); opacity: .6; } 100% { transform: scale(1); opacity: .5; } }
/* Kart noktanın altında açılır; alt kenara yakın noktalarda (--kuzey) üstünde. Sol uçtaki (--sol) ve sağ uçtaki (--sag)
   nokta kartı tuvalin dışına taşmasın diye kenara hizalanır. */
.pr-nokta-kart { position: absolute; left: 0; top: 24px; pointer-events: none; display: grid; gap: 2px; width: max-content; max-width: 210px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: var(--shadow-overlay); transform: translateX(-50%); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.pr-nokta-kart b { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pr-nokta-guc { font-weight: 600; color: var(--energy-ink); }
.pr-nokta--sol .pr-nokta-kart { left: -22px; transform: none; }
.pr-nokta--sag .pr-nokta-kart { left: auto; right: -22px; transform: none; }
.pr-nokta--kuzey .pr-nokta-kart { top: auto; bottom: 100%; margin-bottom: 14px; }

/* ---------- 3–5 · Proje kayıtları (filtre hedefi) ----------
   Süzülen kayıt data-gizli alır (filtre.js); bütün kayıtları gizlenen bölüm de gizlenir. Bölümler arası boşluk
   kenar boşluğuyla verilir: komşu iki bölümün boşlukları çakışır, biri gizlenince öteki yine ayrı durur. */
[data-filtre-hedef] [data-gizli] { display: none !important; }
.pr-kayit:not(:has([data-tur]:not([data-gizli]))) { display: none; }
.pr-kayitlar > .bolum:not(.bolum-tint) { margin-block: clamp(64px, 8vw, 112px); padding-block: 0; }
[id^="proje-"]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Başlıkta tireli sözcük satır sonunda bölünmez ("öz-" / "tüketim") */
.pr-bolunmez { white-space: nowrap; }

/* 3 · Devam eden öz-tüketim GES: 21:9 derinlik şeridi ve orantılı çubuklu tablo */
.pr-serit { margin-bottom: var(--space-10); }
.pr-serit .kunye, .pr-vaka-foto .kunye { margin-top: var(--space-3); }
.pr-serit .derinlik-tuval, .pr-vaka-foto .derinlik-tuval { box-shadow: var(--shadow-md); }
.pr-tablo-kap { border-color: var(--line-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pr-tablo th, .pr-tablo td { vertical-align: middle; padding-block: var(--space-4); }
.pr-tablo tbody th { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.pr-tablo .pr-guc { width: 46%; }
/* Değer sütunu sağa yaslı ve her satırda aynı genişlikte: 10,0 · 9,27 · 7,49 ve Toplam aynı sağ kenarda biter */
.pr-guc-ic { --olcu-renk: var(--olcu-enerji); --pr-deger: 168px; display: grid; grid-template-columns: var(--pr-deger) minmax(0, 1fr); align-items: center; gap: var(--space-5); }
/* Sütun başlığı da aynı ızgaranın ilk sütunundadır ve sağa yaslıdır: "AC güç" değerlerle (10,0 · 9,27 · 7,49 · 62) aynı sağ kenarda biter */
.pr-guc-baslik { grid-column: 1; text-align: right; white-space: nowrap; }
.pr-guc-deger > [aria-hidden] { color: var(--ink-muted); }
.pr-guc-deger { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
/* Çubuk: ölçü çizgisi bileşeni (bilesenler.css .olcu-cizgi), genişlik AC güçle orantılı (10,0 : 9,27 : 7,49) */
.pr-tablo .pr-cubuk { width: calc(var(--oran, 1) * (100% - 14px)); margin: 0 7px; }
.pr-tablo tfoot th, .pr-tablo tfoot td { border-top: 1px solid var(--line); background: var(--surface-sun); }
.pr-tablo tfoot th { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.pr-toplam { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-toplam .pr-guc-deger { font-weight: 600; }
/* MWe çubukları kaydırmayla soldan dolar (ana sayfa 06 ile aynı dil): tablo görünümün alt çeyreğine girerken çubuklar
   sırayla uzar. Yalnız CSS kaydırma zaman çizelgesi olan tarayıcıda, JS ve hareket serbestken; aksi hâlde (JS yok, hareket
   azaltma, eski tarayıcı) çubuklar orantılı uzunluklarında tam durur. Kırpım uç çentiklerini de kapsar (8 px pay);
   başlangıçta sağ kenar sol kenara iner, çentik bile görünmez.
   Masaüstünde .tablo-kap (overflow-x: auto) kaydırma kapsayıcısıdır: çubuğun kendi view()'u ona bağlanırdı ve hiç
   ilerlemezdi. Bu yüzden zaman çizelgesi kapsayıcıda adlandırılır (görünüme göre), çubuklar adıyla kullanır. 700 px altında
   kapsayıcı görünürdür (satırlar kart olur); orada her çubuk kendi view()'unu kullanır. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.hareket-yok) .pr-tablo-kap { view-timeline: --pr-tablo block; }
    html.js:not(.hareket-yok) .pr-tablo .pr-cubuk { animation: pr-cubuk-dol linear both; animation-timeline: --pr-tablo; animation-range: cover 8% cover 26%; }
    html.js:not(.hareket-yok) .pr-tablo tbody tr:nth-child(2) .pr-cubuk { animation-range: cover 12% cover 30%; }
    html.js:not(.hareket-yok) .pr-tablo tbody tr:nth-child(3) .pr-cubuk { animation-range: cover 16% cover 34%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
    html.js:not(.hareket-yok) .pr-tablo .pr-cubuk, html.js:not(.hareket-yok) .pr-tablo tbody tr:nth-child(n) .pr-cubuk { animation-timeline: view(); animation-range: cover 4% cover 26%; }
  }
}
@keyframes pr-cubuk-dol { from { clip-path: inset(-2px calc(100% + 8px) -2px -8px); } to { clip-path: inset(-2px -8px -2px -8px); } }
/* Satır ile harita işareti arasında iki yönlü vurgu (bk:proje-vurgu; harita.js satıra data-vurgu koyar) */
.pr-tablo tbody tr { transition: background-color var(--sure-etiket) var(--ease-etiket); }
.pr-tablo tbody tr:hover, .pr-tablo tbody tr[data-vurgu] { background: var(--gold-100); box-shadow: inset 3px 0 0 var(--enerji-darbe); }
.pr-etiket { display: none; }
@media (max-width: 700px) {
  /* Mobilde tablo karta döner: her satır bir kart, hücre adları görünür etiketle */
  .pr-tablo-kap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pr-tablo { min-width: 0; }
  .pr-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-tablo, .pr-tablo tbody, .pr-tablo tfoot, .pr-tablo tr, .pr-tablo th, .pr-tablo td, .pr-tablo caption { display: block; }
  .pr-tablo caption { padding: 0 0 var(--space-3); text-align: left; }
  .pr-tablo tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--line-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
  .pr-tablo tr > * { padding: 0; border: 0 !important; background: none !important; }
  .pr-tablo th[scope="row"] { grid-column: 1 / -1; font-size: 18px; line-height: 24px; }
  .pr-tablo .pr-guc { grid-column: 1 / -1; width: auto; }
  .pr-tablo td:empty { display: none; }
  .pr-tablo tfoot tr { background: var(--surface-sun); border-color: var(--gold-100); }
  .pr-etiket { display: block; margin-bottom: 2px; color: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
  .pr-guc-ic { grid-template-columns: auto minmax(0, 1fr); }
  .pr-guc-deger { text-align: left; }
  .derinlik.pr-serit { --derinlik-oran: 3 / 2; }
}

/* 4–5 · Tamamlanan ve portföy kartları */
.pr-kartlar { align-items: stretch; }
.pr-kart { position: relative; display: flex; flex-direction: column; }
.pr-kart-ust { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pr-kart > .h3 { margin-top: var(--space-4); font-size: 20px; line-height: 28px; }
/* Haritada işaretin üstüne gelince kart da vurgulanır (bk:proje-vurgu; harita.js karta data-vurgu koyar, tablo satırıyla aynı altın ton) */
.pr-kart { transition: background-color var(--sure-etiket) var(--ease-etiket), border-color var(--sure-etiket) var(--ease-etiket), box-shadow .28s; }
.pr-kart[data-vurgu] { border-color: var(--gold-200); background: var(--gold-50); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .pr-kart { transition: none; } }
/* Bağlantının kendi kutusu da ≥ 44 px (dokunma hedefi denetimi bağlantı kutusunu ölçer): satır yüksekliği 28 px olduğundan
   dikeyde 8 px iç boşluk eklenir, eksi dış boşlukla geri alınır; başlığın yüksekliği ve kartın ritmi değişmez, çok satıra
   inse de boşluk satır sayısından bağımsız kalır. Başlık (h3) esnek öğe olduğundan eksi boşluk dışarı taşmaz. */
.pr-kart-baglanti { display: flex; padding-block: 8px; margin-block: -8px; color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.pr-kart-baglanti:hover { color: var(--link); text-decoration-color: currentColor; }
/* Başlık bağlantısı kartın tamamını kaplar (dokunma hedefi ≥ 44 px; kartta başka etkileşim yok); odak halkası kartı sarar */
.pr-kart-baglanti::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pr-kart-baglanti:focus-visible { outline: none; }
.pr-kart-baglanti:focus-visible::after { box-shadow: var(--focus-ring); }
.pr-kart:has(.pr-kart-baglanti) { cursor: pointer; }
/* Veri satırı kartın dibine oturur (eşit yükseklikte kartlarda satırlar hizalı); üstündeki öğe en az boşluğu verir */
.pr-kart-veri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-top: auto !important; padding-top: var(--space-4); border-top: 1px solid var(--line-subtle); }
.pr-kart > :has(+ .pr-kart-veri) { margin-bottom: var(--space-6); }
.pr-kart-veri > div { display: grid; gap: 2px; align-content: start; }
.pr-kart-veri dt { color: var(--ink-muted); font-size: 12px; line-height: 18px; }
.pr-kart-veri dd { color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-veri-guc dd { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
/* Sunumda güç yazmayan proje: dev tire yerine küçük punto "belirtilmemiş"; ana rakam gibi durmaz */
.pr-kart-veri dd.pr-veri-yok { color: var(--ink-muted); font-weight: 400; }
.izgara-2.pr-kartlar .pr-kart { padding: var(--space-8); }
/* TEİAŞ TM kartında "3B maket" posteri (plan 3.4/4; P5 plakası `maket-sebeke`, TM kırpımı). Poster durağandır: canlı
   sahne değil. Yeşil çerçeveli "3B maket · temsili" rozeti ve "gerçek bir tesisi göstermez" künyesi zorunludur (plan 1.4).
   Kırpım: görsel tuvalde --maket-olcek kadar büyür, (--fx, --fy) noktası (TM sahasının merkezi) tuvalin ortasına gelir.
   Çözünürlük bütçesi (plan 1.4/4, en çok 1,3 kat): <img sizes> genişliği ölçek/1,3 olarak bildirir; 1280 px dosya 1× ve 2×
   ekranda en çok ~ 1,2 kat büyür, 2560 px dosya daha yoğun ekranlara gider. */
.pr-kart-maket { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }
.pr-kart-maket-tuval { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--pus-kagit); }
.pr-kart-maket-tuval > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: var(--fx, 50%) var(--fy, 50%); transform: translate(calc(50% - var(--fx, 50%)), calc(50% - var(--fy, 50%))) scale(var(--maket-olcek, 1)); }
/* Künye rozet + tek cümle: cümle okunur olsun diye büyük harf ve harf aralığı yalnız rozette kalır */
.pr-kart-maket .kunye { margin: 0; gap: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-secondary); }
/* Tamamlanan bölümü: 1200 px altında kartlar alt alta tam genişlikte, ≥ 1200 px'te 5 : 7. TEİAŞ kartı (≥ 700 px) içeride iki
   sütundur: poster solda, metin sağda; böylece iki kart benzer yüksekliktedir ve Bergama kartı boş kalmaz. 700 px altında
   poster metnin altında, veri satırının üstündedir. */
.pr-kartlar--tamam { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .pr-kartlar--tamam { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 700px) {
  .pr-kart--maket { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--space-6); align-content: start; }
  .pr-kart--maket > .pr-kart-ust { grid-column: 2; grid-row: 1; }
  .pr-kart--maket > .h3 { grid-column: 2; grid-row: 2; }
  .pr-kart--maket > .bk-card-text { grid-column: 2; grid-row: 3; align-self: start; }
  .pr-kart--maket > .pr-kart-maket { grid-column: 1; grid-row: 1 / span 4; margin: 0; align-self: start; }
  .pr-kart--maket .pr-kart-maket-tuval { aspect-ratio: 2 / 1; }
  .pr-kart--maket > .pr-kart-veri { grid-column: 2; grid-row: 4; }
}
/* 50 adet 33/0,4 kV TR merkezi: tam 50 noktalı mini ızgara (25 × 2 şerit; kart yüksekliğini komşularından ayırmaz) */
.pr-elli { flex: none; display: block; width: 150px; height: auto; margin-left: auto; fill: var(--viz-altyapi); }
/* Portföy: 2 × 2, kartlar içerik kadar yüksektir (veri satırı başlığın hemen altında değil, kartın dibinde; TR ızgarası rozet
   satırında olduğundan dört kart aynı yüksekliktedir, başlık ile veri arasında boşluk oluşmaz). */
.pr-kartlar--portfoy .pr-kart { padding: var(--space-6) var(--space-8); }
.pr-kartlar--portfoy .pr-kart > .h3 { margin-top: var(--space-3); }
.pr-kartlar--portfoy .pr-kart > :has(+ .pr-kart-veri) { margin-bottom: 0; }
.pr-kartlar--portfoy .pr-kart-veri { margin-top: var(--space-5) !important; }
.pr-kart-ust { align-items: center; }

/* ---------- 6 · Vaka: Alpedo ---------- */
.pr-vaka-ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-10) clamp(40px, 6vw, 96px); align-items: center; }
.pr-vaka-metin { display: grid; gap: var(--space-5); justify-items: start; max-width: 560px; }
.pr-vaka-metin .tip-ust { color: var(--ink-muted); }
.pr-vaka-govde { color: var(--ink-secondary); font-size: 18px; line-height: 30px; }
.pr-vaka-foto { width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 900px) {
  .pr-vaka-ic { grid-template-columns: minmax(0, 1fr); }
  .pr-vaka-foto { justify-self: start; max-width: 520px; }
}

/* ---------- 7 · Referanslar ---------- */
/* site.css ardışık düz bölümlerin üst boşluğunu kaldırır; vaka bandından (bolum-kart) sonra boşluk geri verilir */
.pr-vaka.bolum + .bolum:not(.bolum-tint):not(.bolum-kart) { padding-top: clamp(80px, 10vw, 144px); }
.pr-logo-not { margin-top: var(--space-5); max-width: 72ch; }
/* Logodan sahaya: duvarda vakaya bağlanan tek kart (Alpedo) köşesinde yeşil nokta taşır; üzerine gelince ya da odakta
   "Vakayı inceleyin" yazısı belirir. Erişilebilir ad bağlantının aria-label'ındadır; yazı yalnız görsel ipucudur (boş
   alternatif metin). Nokta durağandır, kendiliğinden hareket yok. */
#referanslar .logo-duvar > li:has(.logo-duvar-baglanti)::before { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); pointer-events: none; }
#referanslar .logo-duvar > li:has(.logo-duvar-baglanti)::after { content: "Vakayı inceleyin" / ""; position: absolute; left: 50%; bottom: 7px; transform: translate(-50%, 4px); color: var(--green-800); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--sure-etiket) var(--ease-etiket), transform var(--sure-etiket) var(--ease-etiket); }
#referanslar .logo-duvar > li:has(.logo-duvar-baglanti):hover::after, #referanslar .logo-duvar > li:has(.logo-duvar-baglanti:focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #referanslar .logo-duvar > li:has(.logo-duvar-baglanti)::after { transition: none; } }
/* 390 px: 7 logo 2 sütunda; son (yedinci) kart tek başına kalmasın diye tam genişlik alır, kart içi boşluk sıkılaşır */
@media (max-width: 560px) {
  #referanslar .logo-duvar > li { min-height: 88px; padding: var(--space-4) var(--space-3); }
  #referanslar .logo-duvar > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}