/* Sürdürülebilirlik sayfası.
   İmza "arazi okuması": arazi fotoğrafı kaydırdıkça yakından uzağa eş yükselti çizimine çözülür. Çözülmeyi derinlik motoru yürütür
   (.surd-foto[data-derinlik-foto]: yapışkan yuva, ikiz kaydırmaya bağlı, yakından uzağa; cephe derinlik haritasına oturur). Bu dosya
   sahnenin yerleşimini, DOM etiketlerini ve rozeti; motor yokken görünen yedek kareleri taşır. Üç durum vardır:
   1) Motor hazır (data-hazir): fotoğraf yuvası çözülür; SVG yedeğin gövdesi kalkar, etiketler cephe geçince belirir, rozet ikiz baskınken açılır.
   2) Motor yok ama kaydırma zaman çizelgesi var (WebGL sonrası indirme, yavaş ağ): iki kare üst üste biner; tarama cephesi alttan üste çıkar,
      geçtiği yerde fotoğraf %85 kâğıtla örtülür ve eş yükselti çizgileri belirir. JS gerekmez.
   3) Varsayılan ("bölünmüş durum"; hareket azaltma, WebGL yok, zaman çizelgesi yok): solda fotoğraf, sağda aynı arazinin SVG ikizi.
   Yalnız token değişkenleri; yeni renk yok. */

/* ---------- Bölüm ritmi (site.css'teki ".bolum + .bolum" sıfırlamasını ezer) ---------- */
#icerik > .bolum { padding-block: clamp(72px, 9vw, 128px); }
#icerik > .surd-guvence { padding-top: 0; }
.surd-govde { max-width: var(--measure); font-size: 17px; line-height: 28px; color: var(--ink-secondary); }
.surd-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; }
.surd-baglanti:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.surd-baglanti-satir { margin-top: var(--space-6); }

/* ---------- 1 · Sayfa başı ve imza sahnesi ---------- */
.surd-bas { padding-bottom: clamp(24px, 2.4vw, 32px); }
/* Başlığın eş yükselti motifi imza zeminine (aynı pus-gok) kesintisiz erisin: alt kenarda söner */
.surd-bas::after { -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 72%), linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(100deg, transparent 22%, #000 72%), linear-gradient(180deg, #000 45%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) { .surd-bas::after { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 30%, #000 70%, transparent 100%); } }
.surd-imza { position: relative; background: var(--pus-gok); padding-bottom: clamp(64px, 8vw, 112px); }
.surd-sahne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gutter); align-items: start; }
.surd-foto, .surd-ikiz { position: relative; margin: 0; min-width: 0; }
.surd-cerceve { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); background: var(--ikiz-kagit); }
.surd-cerceve > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.surd-foto .kunye, .surd-ikiz .kunye { margin-top: var(--space-3); }
.surd-ikiz-not { min-height: 24px; }   /* fotoğraf künyesindeki rozetle aynı satır yüksekliği: iki künye üst üste bindiğinde aynı yerde durur */
.surd-ikiz .surd-cerceve { border: 1px solid var(--line); }
.surd-ikiz-rozet { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3; }
.surd-cephe, .surd-ipucu { display: none; }

/* Sahne etiketleri (aria-hidden; aynı bilgiler "İzinler ve paydaşlar"da metin olarak var). --x, --y: SVG ikizin (fotoğrafın) oranı;
   etiketler gerçek öğelere iğnelidir: marjinal tarım arazisi yazısı GES parselinin içine, ÇED santral sınırı çizgisinin üstüne.
   --olcek: kırpımda (mobil bindirme) fotoğrafın çerçeveye göre yatay ölçeği; etiket aynı noktada kalır.
   .surd-dosya iğnesiz izin dosyası künyesidir (fotoğrafta orman yok: orman izni bir alana değil dosyaya bağlıdır). */
.surd-etiketler { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.surd-etiketler li { position: absolute; left: calc(((var(--x) - .5) * var(--olcek, 1) + .5) * 100%); top: calc(var(--y) * 100%); display: flex; align-items: center; gap: 6px; transform: translate(-5px, -50%); }
.surd-etiketler li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-card); box-shadow: inset 0 0 0 2.5px var(--ikiz-secili), 0 0 0 2px color-mix(in srgb, var(--surface-card) 60%, transparent); }
.surd-etiketler span { padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--green-800); white-space: nowrap; }
/* İzin dosyası künyesi: belge glifi hapın içinde ve dolgulu (dışarıda kalan boş kutu gibi okunmasın) */
.surd-etiketler li.surd-dosya { --y: .92; left: var(--space-4); top: auto; bottom: var(--space-4); gap: 8px; padding: 2px 12px 2px 9px; border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); transform: none; }
.surd-etiketler li.surd-dosya::before { width: 12px; height: 16px; border-radius: 2px 5px 2px 2px; background: linear-gradient(var(--ikiz-secili), var(--ikiz-secili)) 2.5px 6px / 7px 1.5px no-repeat, linear-gradient(var(--ikiz-secili), var(--ikiz-secili)) 2.5px 9.5px / 7px 1.5px no-repeat, var(--green-100); box-shadow: inset 0 0 0 1.5px var(--ikiz-secili); }
.surd-etiketler li.surd-dosya span { padding: 0; background: none; box-shadow: none; }

@media (max-width: 900px) {
  .surd-sahne { grid-template-columns: minmax(0, 1fr); }
  .surd-ikiz-rozet { top: var(--space-3); right: var(--space-3); letter-spacing: .08em; }
  /* Bölünmüş durumda dar karede rozet "ÇED" etiketine binmesin: karenin altında, açıklamanın önünde */
  .surd-ikiz-rozet { position: static; margin-top: var(--space-3); }
  .surd-etiketler li.surd-dosya { left: var(--space-3); bottom: var(--space-3); }
  /* Dar bölünmüş karede iki etiket aynı yükseklikte çarpışmasın: parsel etiketinin yazısı noktasının altına iner */
  .surd-etiketler li:nth-child(1) { flex-direction: column; align-items: flex-start; gap: 3px; transform: translate(-5px, -5px); }
}

/* Çözülme: iki kare üst üste, --coz 0 → 1. Masaüstü 120vh, mobil 80vh sabitlenir. Sahne sabitleme üst çubuğun altında (top) başlar;
   böylece sayfa başından sonra fotoğrafın üst kenarı ilk ekranda görünür (boşluk bandı yok). Kamera durağandır, bu yüzden etiketler
   sabit oranla iğnelenir. WebGL yokken (html.gl-yok) bölünmüş durum kalır. */
@property --coz { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes surd-coz { from { --coz: 0; } to { --coz: 1; } }
@supports (animation-timeline: view()) and (mask-image: linear-gradient(#000, #000)) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.gl-yok) .surd-imza { height: calc(100vh + 120vh); height: calc(100svh + 120vh); padding-bottom: 0; view-timeline: --surd-imza block; }
    html:not(.gl-yok) .surd-imza-yapiskan { position: sticky; top: 84px; display: grid; align-content: start; height: calc(100vh - 84px); height: calc(100svh - 84px); animation: surd-coz linear both; animation-timeline: --surd-imza; animation-range: contain 0% contain 100%;
      /* DOM katmanının (etiket, rozet, künye) saati: motor kendi ilerlemesini --ikiz-p olarak yayımlarsa (#imza üzerine; data-ikiz-p-hedef) --coz eşdeğeri buradan türer (--coz ≈ 0,08 + 0,92·p), yoksa
         değişken geçersiz olur ve tüketiciler var(--cz, var(--coz)) ile kaydırma saatine düşer. Motorun çizimi kendi saatindedir (süzülmeli ilerleme, GPU geri basıncı); DOM metni önde gitmesin. */
      --cz: calc(.08 + .92 * var(--ikiz-p)); }
    html:not(.gl-yok) .surd-sahne { grid-template-columns: minmax(0, 1fr); width: min(100%, calc((100svh - 150px) * 1.5)); margin-inline: auto; }
    html:not(.gl-yok) .surd-foto, html:not(.gl-yok) .surd-ikiz { grid-area: 1 / 1; }
    html:not(.gl-yok) .surd-ikiz { pointer-events: none; }
    html:not(.gl-yok) .surd-ikiz .surd-cerceve { border-color: transparent; background: color-mix(in srgb, var(--ikiz-kagit) 85%, transparent);
      -webkit-mask-image: linear-gradient(180deg, transparent calc(105% - var(--coz) * 110% - 3%), #000 calc(105% - var(--coz) * 110% + 3%));
      mask-image: linear-gradient(180deg, transparent calc(105% - var(--coz) * 110% - 3%), #000 calc(105% - var(--coz) * 110% + 3%)); }
    html:not(.gl-yok) .surd-cephe { position: absolute; left: 0; right: 0; top: calc(105% - var(--coz) * 110%); z-index: 2; display: block; height: 2px; margin-top: -1px; background: var(--ikiz-secili); box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-card) 70%, transparent); opacity: min(1, var(--coz) * 25, (1 - var(--coz)) * 25); }
    html:not(.gl-yok) .surd-etiketler li { opacity: clamp(0, (var(--y) - 1.05 + var(--coz) * 1.1) * 14, 1); }
    html:not(.gl-yok) .surd-etiketler span { font-size: 13px; }   /* bindirmede çerçeve tam genişlik: etiket büyür */
    html:not(.gl-yok) .surd-etiketler li:not(.surd-dosya) span { padding: 3px 10px; }
    html:not(.gl-yok) .surd-etiketler li.surd-dosya { padding: 3px 14px 3px 10px; }
    /* Rozet çerçevenin alt kenarına iğnelidir: yakından uzağa çözülmede ilk ikize dönen bölge orasıdır (ölçüm: alt bölge --coz .1–.2'de açılır).
       Opaklık .27 → .35'te açılır (alt bölge dönüştükten SONRA: motor süzülmeyle geriden geldiği için .07 pay); fotoğraf ağır basarken (p = 0) yalnız
       "Baykara Enerji arşivi" künyesi görünür. Üç DOM öğesinin (etiket, rozet, künye) opaklığı 0,25 sn'lik geçişle gider: motorun ilerlemesi (süzülme, zaman sabiti ≈ 130 ms) kaydırmayı
       bu kadar geriden izler; DOM metni çizimin önüne geçmesin. */
    html:not(.gl-yok) .surd-ikiz-rozet { top: auto; bottom: var(--space-4); opacity: clamp(0, (var(--cz, var(--coz)) - .27) * 12, 1); transition: opacity .25s ease-out; }
    /* Motor hazır: çözülmeyi fotoğraf yuvası çizer. SVG yedeğin gövdesi ve tarama kalkar; etiketler kalır ve derinlik sırasına göre
       (--v: etiketin bulunduğu yerin sırasında cephenin geçtiği --coz değeri + .05 pay; ölçüm: --coz ≈ 0,08 + 0,92 · p, çünkü kaydırma zaman çizelgesi
       kaydırma dolgusu kadar önce başlar) belirir; cephe etiketin yerini tam geçmeden etiket açılmaz. */
    html:not(.gl-yok) .surd-imza:has(.surd-foto[data-hazir]) .surd-ikiz .surd-cerceve { background: none; -webkit-mask-image: none; mask-image: none; }
    html:not(.gl-yok) .surd-imza:has(.surd-foto[data-hazir]) .surd-ikiz .surd-cerceve > img,
    html:not(.gl-yok) .surd-imza:has(.surd-foto[data-hazir]) .surd-cephe { display: none; }
    html:not(.gl-yok) .surd-imza:has(.surd-foto[data-hazir]) .surd-etiketler li { opacity: clamp(0, (var(--cz, var(--coz)) - var(--v, 0)) * 14, 1); transition: opacity .25s ease-out; }
    /* Künyeler art arda soldurulur: çizim kareyi kaplarken "Baykara Enerji arşivi · GES arazi santrali" fotoğrafı anlatmaya devam etmesin. Fotoğraf künyesi
       --coz .467 → .55'te söner (ölçüm: p = .5'te kare yarı çizim), ikizin künyesi .66 → .74'te aynı yerde belirir (.07'lik pay: motor geriden gelir); .55–.66 arasında ikisi de yok, böylece
       iki metin hiç üst üste okunmaz. Rozet ("Mühendislik görselleştirmesi") ve künye çizim baskınken aynı şeyi söyler. Fotoğraf künyesi kayıtlı değişkene
       bağlıdır (@property --coz). */
    html:not(.gl-yok) .surd-foto .kunye { opacity: clamp(0, calc((.55 - var(--cz, var(--coz))) * 12), 1); transition: opacity .25s ease-out; }
    html:not(.gl-yok) .surd-ikiz-not { opacity: clamp(0, calc((var(--cz, var(--coz)) - .66) * 12), 1); transition: opacity .25s ease-out; }
    /* İkizin künyesi akıştan çıkar: figürün yüksekliği çerçeveyle sınırlı kalır (rozet ve izin dosyası etiketi figürün altına göre iğnelidir; künye akışta olsaydı
       rozet çerçevenin altına kayardı). Künye çerçevenin hemen altında, fotoğraf künyesinin tam üstünde durur (fotoğraf künyesi akışta kalır: sahne yüksekliğini o belirler). */
    html:not(.gl-yok) .surd-ikiz-not { position: absolute; top: 100%; left: 0; right: 0; }
  }
  /* Mobil: kare 5:7 kırpım (fotoğrafın ortası), sahne üste yaslı ve ekran yüksekliğine sığar; etiketler --olcek ile aynı noktada kalır */
  @media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    html:not(.gl-yok) .surd-imza { height: calc(100svh + 80vh); }
    html:not(.gl-yok) .surd-imza-yapiskan { top: 76px; height: calc(100vh - 76px); height: calc(100svh - 76px); }
    html:not(.gl-yok) .surd-sahne { width: min(100%, calc((100svh - 76px - 104px) * 5 / 7)); }
    html:not(.gl-yok) .surd-cerceve { aspect-ratio: 5 / 7; --olcek: 2.1; }
    html:not(.gl-yok) .surd-ikiz-rozet { position: absolute; margin-top: 0; top: auto; right: auto; left: var(--space-3); bottom: 44px; }   /* izin dosyası künyesinin üstünde */
    html:not(.gl-yok) .surd-etiketler span { font-size: 12px; }
    html:not(.gl-yok) .surd-etiketler li:not(.surd-dosya) span { padding: 2px 8px; }
    html:not(.gl-yok) .surd-etiketler li.surd-dosya { padding: 2px 12px 2px 9px; }
    html:not(.gl-yok) .surd-etiketler li:nth-child(1) { flex-direction: row; align-items: center; gap: 6px; transform: translate(-5px, -50%); }
    /* Bindirmede sahnenin altına kaydırma ipucu (yalnız çözülme gerçekten kaydırmayla yürürken doğrudur; masaüstünde ekran dışıdır) */
    html:not(.gl-yok) .surd-ipucu { display: block; grid-area: 2 / 1; max-width: 32ch; margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-secondary); }
  }
}

/* Kaydırma zaman çizelgesi yoksa bölünmüş durum sürer (SVG ikiz yan yanadır ve çözülmeyi tek başına gösterir): motor yuvayı çizse de
   fotoğraf yuvası poster olarak kalır, ikinci bir çözülme oynamaz. */
@supports not ((animation-timeline: view()) and (mask-image: linear-gradient(#000, #000))) {
  .surd-foto[data-hazir] .surd-cerceve > img { opacity: 1; }
  .surd-foto canvas { visibility: hidden; }
}

/* ---------- 2 · Çevre dostu ---------- */
.surd-cevre-ic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8) var(--space-16); align-items: end; }
.surd-alinti { margin: 0; padding: 0; }
.surd-alinti p { max-width: 24ch; font-family: var(--font-display); font-size: clamp(26px, 3vw, 42px); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
@media (max-width: 900px) { .surd-cevre-ic { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 3 · İzinler ve paydaşlar ---------- */
.surd-izinler { background: var(--green-50); }
.surd-izin-liste .cip { background: var(--surface-card); color: var(--ink); }
.surd-izin-liste .cip::before { background: var(--ikiz-secili); }
.surd-izin-metin { margin-top: var(--space-8); }

/* ---------- 4 · İSG, 5 · TÜV SÜD, 6 · O&M ---------- */
.surd-isg-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8) var(--space-16); align-items: center; }
.surd-isg-metin { display: grid; gap: var(--space-5); }
.surd-gorsel { margin: 0; min-width: 0; }
.surd-gorsel-cerceve { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ikiz-kagit); }
.surd-gorsel-cerceve--4x3 { aspect-ratio: 4 / 3; }
.surd-gorsel-cerceve--3x4 { aspect-ratio: 3 / 4; }
.surd-gorsel-cerceve > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.surd-gorsel .kunye { margin-top: var(--space-3); }

.surd-guvence-ic { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10) var(--space-16); align-items: start; padding-top: clamp(48px, 6vw, 80px); }
/* Ayırıcı çizgi içerik genişliğinde (kap iç boşluğuna taşmaz) */
.surd-guvence-ic::before { content: ""; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .surd-guvence-ic::before { left: var(--space-4); right: var(--space-4); } }
.surd-tuv { display: grid; gap: var(--space-4); align-content: start; }
.surd-tuv-halka { position: relative; width: 56px; height: 56px; border: 2px solid var(--ikiz-secili); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--surface-page), inset 0 0 0 5px var(--green-200); }
.surd-tuv-halka::after { content: ""; position: absolute; left: 18px; top: 19px; width: 17px; height: 9px; border-left: 2.5px solid var(--ikiz-secili); border-bottom: 2.5px solid var(--ikiz-secili); transform: rotate(-45deg); }
.surd-tuv .h2, .surd-om .h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.surd-om { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--space-6) var(--space-10); align-items: start; }
.surd-om-metin { display: grid; gap: var(--space-4); }
@media (max-width: 1000px) {
  .surd-isg-ic, .surd-guvence-ic { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .surd-om { grid-template-columns: minmax(0, 1fr); }
  .surd-om-gorsel { max-width: 320px; }
}

/* ---------- 7 · Emisyon ---------- */
.surd-emisyon { background: var(--pus-gok); }
.surd-emisyon-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6) var(--space-16); align-items: start; }
.surd-emisyon-govde { display: grid; gap: var(--space-5); justify-items: start; }
.surd-baglam { font-size: 15px; line-height: 25px; }
@media (max-width: 900px) { .surd-emisyon-ic { grid-template-columns: minmax(0, 1fr); } }