/* Çalışma alanları (teknolojiler.html; TASARIM-PLANI 3.3, sahibi P10; metinler kaynak/metin/teknolojiler.md).
   META "css": ["sayfa-calisma"] ile yalnız bu sayfaya bağlanır. Yalnız token değişkenleri; yeni renk yok.
   Ayna üç kipte okunur:
   - Düz: JS yok ya da ayna kurulamadı (data-hata). Bütün paneller görselleriyle alt alta; GES'in üç karesi yan yana.
   - Sekme (JS var, ayna.js henüz kurulmadı): varsayılan GES paneli ve arazi karesi; adres çapası (#res, #altyapi,
     #ges-cati …) :target ile önceden seçilir, böylece modül kurulunca düzen kaymaz.
   - Hazır (data-ayna-hazir): seçimi ayna.js hidden öznitelikleriyle yönetir.
   K3'te aynı çerçeveye maket tarafı, kesit tutamacı ve güneş saati eklenir. */

#icerik > .bolum { padding-block: clamp(72px, 9vw, 128px); }
#icerik > .ayna { position: relative; padding-top: clamp(40px, 5vw, 64px); }
.ayna-capa { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Sekmeler ---------- */
.ayna-sekmeler { display: flex; flex-wrap: wrap; gap: var(--space-1); width: fit-content; max-width: 100%; margin-bottom: var(--space-8); padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ayna-sekme { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-secondary); font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; }
.ayna-sekme .bk-tech::before { width: 10px; height: 10px; }
.ayna-sekme:hover { background: var(--surface-tint); color: var(--ink); }
.ayna-sekme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ayna-sekme[aria-selected="true"] { background: var(--action); color: var(--ink-on-action); }
.ayna-sekme[aria-selected="true"] .bk-tech::before { box-shadow: 0 0 0 2px var(--surface-card); }
@media (max-width: 480px) {
  .ayna-sekmeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ayna-sekme { justify-content: center; padding: 0 var(--space-2); font-size: 16px; }
}

/* ---------- Sahne: tek çerçeve, künye altta ---------- */
.ayna-sahne { position: relative; display: flex; flex-direction: column; }
.ayna-kadraj { --ayna-oran: 16 / 10; position: relative; overflow: hidden; aspect-ratio: var(--ayna-oran); border-radius: var(--radius-lg); background: var(--pus-kagit); }
.ayna-kadraj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--konum, 50% 50%); }
.ayna-gorsel > .kunye { margin-top: var(--space-3); }
@media (max-width: 700px) { .ayna-kadraj { --ayna-oran: 4 / 3; border-radius: var(--radius-md); } }

/* GES alt seçimi (Arazi · Öz-tüketim · Çatı): masaüstünde çerçevenin sol üstünde düz beyaz denetim, dar ekranda
   çerçevenin üstünde satır. JS'siz sayfada yok (üç kare yan yana durur). */
.ayna-alt-secim { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ayna-alt { min-height: 40px; margin: 0; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-secondary); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.ayna-alt:hover { background: var(--surface-tint); color: var(--ink); }
.ayna-alt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ayna-alt[aria-pressed="true"] { background: var(--green-50); color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green-600); }
.ayna-alt[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--green-600), var(--focus-ring); }
@media (max-width: 700px) {
  .ayna-alt-secim { position: static; order: -1; align-self: flex-start; margin-bottom: var(--space-3); border: 1px solid var(--line); box-shadow: none; }
}
@media (max-width: 700px), (pointer: coarse) { .ayna-alt { min-height: 44px; } }

/* Altyapı: fotoğraf yok, tek hat şeması (sky-700 çizgi, beyaz zemin) */
.ayna-kadraj--sema { border: 1px solid var(--line); background: var(--surface-card); }
.ayna-kadraj--sema .tek-hat { position: absolute; inset: 4% 3%; width: 94%; height: 92%; }
.ayna-kadraj--sema .tek-hat--dar { display: none; }
@media (max-width: 700px) {
  .ayna-kadraj--sema .tek-hat--genis { display: none; }
  .ayna-kadraj--sema .tek-hat--dar { display: block; }
}
.tek-hat { display: block; overflow: visible; }
.tek-hat-cizgi { fill: none; stroke: var(--sky-700); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tek-hat-bara { fill: none; stroke: var(--sky-700); stroke-width: 7; stroke-linecap: round; }
.tek-hat-bolge { fill: var(--sky-50); stroke: var(--sky-300); stroke-width: 1.5; stroke-dasharray: 8 6; }
.tek-hat-yazi text { fill: var(--ink-secondary); font-family: var(--font-sans); font-size: 22px; font-weight: 500; text-anchor: middle; }
.tek-hat--dar .tek-hat-yazi text { font-size: 26px; }
.tek-hat-yazi .tek-hat-bas { fill: var(--ink); font-weight: 600; }
.tek-hat-yazi .tek-hat-bolge-ad { fill: var(--sky-800); text-anchor: start; letter-spacing: .04em; }
.tek-hat-yazi .tek-hat-sol { text-anchor: start; }
.tek-hat-yazi .tek-hat-son { text-anchor: end; }

/* ---------- Panel gövdesi: tanım solda, referanslar sağda ---------- */
.ayna-panel { outline: none; }
.ayna-panel:focus-visible { border-radius: var(--radius-lg); box-shadow: var(--focus-ring); }
.ayna-panel-govde { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10) clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.ayna-panel-tanim > p { max-width: 62ch; margin-top: var(--space-5, 20px); color: var(--ink-secondary); font-size: 17px; line-height: 28px; }
.ayna-panel-tanim .h2 { max-width: 20ch; }
.ayna-ara-baslik { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.ayna-panel-ref > .ayna-ara-baslik:first-child { margin-top: 0; }
.ayna-panel-ref { align-self: start; padding: var(--space-6) var(--space-6) var(--space-5, 20px); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ayna-ref { margin: 0; }
.ayna-ref li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line-subtle); }
.ayna-ref li:last-child { border-bottom: 1px solid var(--line-subtle); }
.ayna-ref-ad { grid-column: 1; font-weight: 600; color: var(--ink); line-height: 22px; }
.ayna-ref-ek { grid-column: 1; font-size: 14px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ayna-ref .bk-badge { grid-column: 2; grid-row: 1 / span 2; }
.ayna-panel-ref .dipnot { margin-top: var(--space-3); }
.ayna-ref-baglanti { margin-top: var(--space-4); }
.ayna-ref-baglanti a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 900px) { .ayna-panel-govde { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ayna-panel-ref { padding: var(--space-5, 20px) var(--space-4) var(--space-4); } }

/* Bileşen listesi (Altyapı ve Depolama) */
.bilesen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 20px) var(--space-8); margin-top: var(--space-8); }
.bilesen-liste > div { padding-top: var(--space-3); border-top: 2px solid var(--green-100); }
.bilesen-liste dt { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.bilesen-liste dd { margin: var(--space-1) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
@media (max-width: 600px) { .bilesen-liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sekme kipi: JS var, ayna.js kurulmadan önce (düzen kaymasın) ---------- */
html.js .ayna:not([data-ayna-hazir]):not([data-hata]) .ayna-panel:not(.ayna-panel--ges),
html.js .ayna:not([data-ayna-hazir]):not([data-hata]) .ayna-gorsel[data-alt-ad]:not([data-alt-ad="ges-arazi"]) { display: none; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#res, #panel-res):target) .ayna-panel--res,
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#altyapi, #panel-altyapi):target) .ayna-panel--altyapi { display: block; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#res, #panel-res, #altyapi, #panel-altyapi):target) .ayna-panel--ges { display: none; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(#ges-oz-tuketim:target) .ayna-gorsel[data-alt-ad="ges-oz-tuketim"],
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(#ges-cati:target) .ayna-gorsel[data-alt-ad="ges-cati"] { display: block; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#ges-oz-tuketim, #ges-cati):target) .ayna-gorsel[data-alt-ad="ges-arazi"] { display: none; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]) .ayna-alt-secim { visibility: hidden; }
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):not(:has(:is(#res, #panel-res, #altyapi, #panel-altyapi):target)) .ayna-sekme[data-tek="ges"],
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#res, #panel-res):target) .ayna-sekme[data-tek="res"],
html.js .ayna:not([data-ayna-hazir]):not([data-hata]):has(:is(#altyapi, #panel-altyapi):target) .ayna-sekme[data-tek="altyapi"] { background: var(--action); color: var(--ink-on-action); }

/* ---------- Düz kip: JS yok ya da ayna kurulamadı ---------- */
html:not(.js) .ayna-alt-secim, .ayna[data-hata] .ayna-alt-secim { display: none; }
html:not(.js) .ayna-panel + .ayna-panel, .ayna[data-hata] .ayna-panel + .ayna-panel { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
html:not(.js) .ayna-panel--ges .ayna-gorseller, .ayna[data-hata] .ayna-panel--ges .ayna-gorseller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gutter); }
html:not(.js) .ayna-panel--ges .ayna-kadraj, .ayna[data-hata] .ayna-panel--ges .ayna-kadraj { --ayna-oran: 4 / 3; border-radius: var(--radius-md); }
@media (max-width: 800px) {
  html:not(.js) .ayna-panel--ges .ayna-gorseller, .ayna[data-hata] .ayna-panel--ges .ayna-gorseller { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4 · Kapsam matrisi (masaüstü tablo, dar ekranda alan başına kart) ---------- */
.kapsam .tablo { min-width: 880px; }
.kapsam .tablo thead th { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.kapsam .tablo thead th .bk-tech::before { margin-right: 4px; transform: translateY(-1px); }
.kapsam .tablo tbody th { width: 22%; }
.kapsam .tablo tbody th a, .kapsam-kart dt a { display: inline-block; padding-block: 2px; font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration-color: var(--line-strong); }
.kapsam .tablo tbody th a:hover, .kapsam-kart dt a:hover { color: var(--link); text-decoration-color: currentColor; }
.kapsam .tablo td { width: 26%; }
.kapsam-ozet { font-weight: 600; color: var(--ink); }
.kapsam-ozet + .kapsam-liste { margin-top: var(--space-2); }
.kapsam-liste { display: grid; gap: 2px; margin: 0; }
.kapsam-liste li { position: relative; padding-left: 16px; }
.kapsam-liste li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); }
.kapsam-kartlar { display: none; }
.kapsam-dipnot { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .kapsam-tablo { display: none; }
  .kapsam-kartlar { display: grid; gap: var(--space-4); }
  .kapsam-kart { padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-card); }
  .kapsam-kart .h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 20px; line-height: 28px; }
  .kapsam-kart dl { margin-top: var(--space-2); }
  .kapsam-kart dl > div { padding-block: var(--space-3); border-top: 1px solid var(--line-subtle); }
  .kapsam-kart dt { font-size: 15px; line-height: 22px; }
  .kapsam-kart dd { margin: var(--space-2) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
  .kapsam-kart .kapsam-liste li::before { top: 8px; }
}
@media (max-width: 900px) and (pointer: coarse) { .kapsam-kart dt a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- 5 · Depolama (BESS): ikincil hizmet, temsili fotoğraf, 3B yok ---------- */
#icerik > .depolama { position: relative; }
.depolama-ic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-10) clamp(40px, 6vw, 96px); align-items: center; }
.depolama-kadraj { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--pus-kagit); }
.depolama-kadraj img { width: 100%; height: 100%; object-fit: cover; }
.depolama-metin > .tip-ust { color: var(--ink-muted); }
.depolama-metin > .h2 { margin-top: var(--space-3); }
.depolama-metin > p:not([class]) { max-width: 56ch; margin-top: var(--space-5, 20px); color: var(--ink-secondary); font-size: 17px; line-height: 28px; }
.depolama-metin .bilesen-liste { margin-top: var(--space-6); }
.depolama-cagri { margin-top: var(--space-8); }
@media (max-width: 1000px) { .depolama-ic { grid-template-columns: minmax(0, 1fr); } .depolama-gorsel { order: 2; } }

/* Hareket azaltmada geçiş yok */
@media (prefers-reduced-motion: reduce) { .ayna-sekme, .ayna-alt { transition: none; } }