/* Baykara Enerji — site katmanı. Sıra: tokens.css (tasarım sistemi) > bilesenler.css (bk- bileşenleri) > site.css.
   Yalnız token değişkenleri kullanılır; yeni renk tanımlanmaz. */

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface-page); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { flex: 1 0 auto; }
main:focus { outline: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-on-inverse :focus-visible { outline-color: var(--focus-on-inverse); }
::selection { background: var(--green-200); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
abbr[title] { text-decoration: none; cursor: help; }
[hidden] { display: none !important; }
.gizli { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sayi, .tnum { font-variant-numeric: tabular-nums; }

/* Duyarlı yazı ölçeği: tasarım sistemi değerleri masaüstünde birebir, küçük ekranda daralır */
.display { font-size: clamp(2.25rem, 1.35rem + 3vw, 3.5rem); line-height: 1.08; }
.h1 { font-size: clamp(2rem, 1.45rem + 1.8vw, 2.5rem); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.75rem); line-height: 1.29; }
.metric { font-size: clamp(2.25rem, 1.65rem + 2vw, 3rem); line-height: 1.08; font-variant-numeric: tabular-nums; }
.lead { color: var(--ink-secondary); }

/* ---------- Düzen ---------- */
.kap { width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6); }
@media (max-width: 640px) { .kap { padding-inline: var(--space-4); } }
.bolum { padding-block: var(--space-24); }
.bolum-tint { background: var(--surface-tint); }
.bolum-kart { background: var(--surface-card); border-block: 1px solid var(--line); }
.bolum + .bolum:not(.bolum-tint):not(.bolum-kart) { padding-top: 0; }
@media (max-width: 900px) { .bolum { padding-block: var(--space-16); } }
.bolum-bas { display: grid; gap: var(--space-4); max-width: 760px; margin-bottom: var(--space-10); }
.bolum-bas-yan { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); }
.bolum-bas-yan .bolum-bas { margin-bottom: 0; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); }
@media (max-width: 1000px) { .izgara-3, .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; } }
.yan-yana { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
@media (max-width: 1000px) { .yan-yana { grid-template-columns: 1fr; gap: var(--space-10); } }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bk-btn { min-height: 44px; }
.bk-btn-sm { min-height: 32px; }
.metin-ikincil { color: var(--ink-secondary); }
.metin-soluk { color: var(--ink-muted); }
.dipnot { color: var(--ink-muted); font-size: 12px; line-height: 18px; }
.dipnot a { color: inherit; }

/* ---------- Atlama bağlantısı ---------- */
.atla { position: absolute; left: var(--space-4); top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--action); color: var(--ink-on-action); font-weight: 500; text-decoration: none; }
.atla:focus { top: var(--space-4); color: var(--ink-on-action); box-shadow: var(--focus-ring); outline: none; }

/* ---------- Üst menü ---------- */
.ust { position: sticky; top: 0; z-index: 40; background: var(--surface-page); border-bottom: 1px solid transparent; transition: border-color .15s ease-out, background-color .15s ease-out; view-transition-name: ust; }
.ust[data-kaydi] { background: var(--surface-card); border-bottom-color: var(--line); }
.ust-ic { display: flex; align-items: center; gap: var(--space-8); height: 76px; }
.logo { display: block; flex: none; padding-block: 6px; margin-block: -6px; border-radius: var(--radius-xs); }
.logo img { width: 158px; height: 32px; }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: var(--space-1); }
.menu a { position: relative; display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-secondary); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.menu a:hover { color: var(--ink); background: var(--surface-tint); }
.menu a[aria-current="page"] { color: var(--ink); }
.menu a[aria-current="page"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); }
.logo picture { display: block; }
/* "Projenizi konuşalım" her genişlikte görünür (plan 3.0, 1.3); menü 1200 px altında Menü düğmesine iner. */
.ust-cta { flex: none; }
.menu-ac { display: none; }
@media (max-width: 1299px) { .ust-ic { gap: var(--space-5); } .menu a { padding-inline: var(--space-2); } }
@media (max-width: 1199px) {
  .ust-ic { gap: var(--space-2); }
  .menu { display: none; }
  .ust-cta { margin-left: auto; }
  .menu-ac { display: inline-flex; }
}
@media (max-width: 479px) {
  .ust-ic { height: 64px; }
  .logo { padding-inline: 6px; margin-inline: -6px; }   /* 32 px amblem, 44 × 44 px dokunma alanı; yerleşim aynı kalır */
  .logo img { width: 32px; height: 32px; }
  .ust-cta, .menu-ac { padding-inline: var(--space-3); }
}
.mobil-menu { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--surface-page); color: var(--ink); }
.mobil-menu::backdrop { background: var(--scrim); }
.mobil-menu[open] { display: flex; flex-direction: column; }
.mobil-menu-ust { display: flex; align-items: center; justify-content: space-between; height: 76px; padding-inline: var(--space-4); border-bottom: 1px solid var(--line); }
.mobil-menu nav { padding: var(--space-4); overflow-y: auto; }
.mobil-menu ul { list-style: none; margin: 0; padding: 0; }
.mobil-menu li + li { border-top: 1px solid var(--line); }
.mobil-menu nav a { display: block; padding: var(--space-4) var(--space-2); color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; text-decoration: none; }
.mobil-menu nav a[aria-current="page"] { color: var(--link); }

/* ---------- Ana sayfa girişi ve 3B sahne ---------- */
.giris { padding-block: var(--space-16) var(--space-24); }
.giris-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); align-items: center; }
.giris-metin { display: grid; gap: var(--space-6); align-content: center; }
.giris-metin .lead { max-width: 34rem; }
.giris-not { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 1000px) { .giris { padding-block: var(--space-10) var(--space-16); } .giris-ic { grid-template-columns: 1fr; } }

.sahne { position: relative; margin: 0; }
.sahne-tuval { position: relative; aspect-ratio: 7 / 6; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); touch-action: pan-y; }
.sahne-tuval canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.sahne-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease-out; }
.sahne[data-hazir] .sahne-poster { opacity: 0; pointer-events: none; }
.sahne-panel { position: absolute; left: var(--space-4); bottom: var(--space-4); width: min(340px, calc(100% - 2 * var(--space-4))); display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-overlay); }
.sahne-kontrol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.sahne-kontrol label { grid-column: 1 / -1; }
.sahne-saat { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.sahne-veri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.sahne-veri dt { color: var(--ink-muted); }
.sahne-veri dd { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.sahne-egri { width: 100%; height: 72px; overflow: visible; }
.sahne-egri .izgara-cizgi { stroke: var(--line-subtle); stroke-width: 1; }
.sahne-egri .egri-takip { fill: none; stroke: var(--accent); stroke-width: 2; }
.sahne-egri .egri-alan { fill: var(--surface-tint); }
.sahne-egri .egri-sabit { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sahne-egri .egri-sinir { stroke: var(--energy); stroke-width: 1; stroke-dasharray: 2 3; }
.sahne-egri .egri-imlec { stroke: var(--ink); stroke-width: 1; }
.sahne-egri .egri-nokta { fill: var(--action); stroke: var(--surface-card); stroke-width: 2; }
.sahne-egri text { font-family: var(--font-sans); font-size: 10px; fill: var(--ink-muted); }
.sahne-lejant { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--ink-muted); }
.sahne-lejant span { display: inline-flex; align-items: center; gap: var(--space-2); }
.sahne-lejant i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--accent); }
.sahne-lejant i.kesik { border-top: 2px dashed var(--line-strong); }
.sahne-lejant i.sinir { border-top: 1px dashed var(--energy); }
.aralik { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.aralik::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.aralik::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.aralik::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--action); border: 2px solid var(--surface-card); box-shadow: 0 0 0 1px var(--action); }
.aralik::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--action); border: 2px solid var(--surface-card); }
.aralik:focus-visible { outline: none; }
.aralik:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.aralik:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.sahne-kaynak { margin-top: var(--space-3); }
@media (max-width: 1000px) {
  .sahne-tuval { aspect-ratio: 4 / 3; }
  .sahne-panel { position: static; width: auto; margin-top: var(--space-3); box-shadow: none; }
}
@media (max-width: 480px) { .sahne-veri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Metrik bandı ---------- */
.metrik-bolum { margin-top: calc(-1 * var(--space-10)); }
.bk-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .bk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-6); gap: var(--space-6); } }
.bk-metric-note { order: 3; color: var(--ink-on-inverse-muted); }

/* ---------- Tanıtım cümlesi ---------- */
.aciklama { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.aciklama-buyuk { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.dayanak { display: grid; gap: var(--space-6); }
.dayanak > div { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.dayanak h3 { font-size: 17px; line-height: 24px; }
@media (max-width: 900px) { .aciklama { grid-template-columns: 1fr; gap: var(--space-10); } }
/* Tanıtım yanındaki rakam bandı: dar sütunda birim alt satıra iner, telefonda tek sütun */
.aciklama .bk-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.aciklama .bk-metric-value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-1); }
.aciklama .bk-metric-unit { margin-left: 0; }

/* ---------- Hizmet listesi (dizin) ---------- */
.hizmet-liste { border-top: 1px solid var(--line); }
.hizmet-liste li { border-bottom: 1px solid var(--line); }
.hizmet-liste a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; gap: var(--space-2) var(--space-10); align-items: baseline; padding: var(--space-6) var(--space-2); color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.hizmet-liste a:hover { background: var(--surface-card); }
.hizmet-liste a:hover .h3 { color: var(--link); }
.hizmet-liste p { color: var(--ink-secondary); }
.hizmet-liste .hizmet-ok { color: var(--link); font-weight: 500; font-size: 14px; white-space: nowrap; }
@media (max-width: 800px) { .hizmet-liste a { grid-template-columns: 1fr; } }

/* ---------- Teknik föy tablosu ---------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.tablo { width: 100%; min-width: 640px; font-size: 14px; line-height: 22px; }
.tablo caption { padding: var(--space-4) var(--space-6) 0; text-align: left; color: var(--ink-muted); font-size: 12px; line-height: 16px; caption-side: bottom; padding-bottom: var(--space-4); }
.tablo th, .tablo td { padding: var(--space-3) var(--space-6); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-subtle); }
.tablo thead th { color: var(--ink-muted); font-weight: 500; font-size: 12px; line-height: 16px; background: var(--surface-card); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tablo tbody th { font-weight: 500; color: var(--ink); }
.tablo td { color: var(--ink-secondary); }
.tablo tbody tr:last-child > * { border-bottom: 0; }
.tablo .sayi { text-align: right; white-space: nowrap; }
.tablo-tek th[scope="col"] { font-family: var(--font-display); font-size: 15px; color: var(--ink); font-weight: 600; }

/* ---------- Süreç adımları (gerçek sıra) ---------- */
.adimlar { counter-reset: adim; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
.adimlar > li { counter-increment: adim; position: relative; display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-10); }
.adimlar > li::before { content: counter(adim); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--action); color: var(--ink-on-action); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.adimlar > li::after { content: ""; position: absolute; top: 16px; left: 44px; right: calc(-1 * var(--space-6) + 12px); height: 1px; background: var(--line-strong); }
.adimlar > li:last-child::after { display: none; }
.adimlar h3 { font-size: 17px; line-height: 24px; }
.adimlar p { color: var(--ink-secondary); font-size: 14px; line-height: 22px; }
.adimlar .adim-cikti { color: var(--ink-muted); font-size: 12px; line-height: 18px; }
@media (max-width: 1000px) {
  .adimlar { grid-template-columns: 1fr; gap: 0; }
  .adimlar > li { padding: 0 0 var(--space-8) var(--space-12, 48px); }
  .adimlar > li::after { top: 40px; left: 15px; right: auto; bottom: 8px; width: 1px; height: auto; }
}
.adimlar-dikey { grid-template-columns: 1fr; gap: 0; }
.adimlar-dikey > li { padding: 0 0 var(--space-8) 48px; }
.adimlar-dikey > li::after { top: 40px; left: 15px; right: auto; bottom: 8px; width: 1px; height: auto; }

/* ---------- Renk rampası (lejant). Hesaplayıcının 8.760 saat halısı sayfa-bilgi.css'te (hs- önekiyle, P13) ---------- */
.rampa { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rampa i { display: block; flex: 0 1 160px; min-width: 48px; height: 10px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: linear-gradient(90deg, var(--green-50), var(--green-200), var(--green-400), var(--green-600), var(--green-900)); }

/* ---------- Harita ---------- */
/* Kutu Türkiye'nin oranına uyar. Canlı harita kadrajı (harita.js kadrajKur) haritayı, sütunları ve etiket payını her en-boy oranında
   genişliğe sığdırır; yani ölü alan yalnız kutunun oranından gelir. Harita bandı (etiket ve sütunlarla) ≈ 2,6:1 olduğundan kutu 12:5
   (≤ 700 px: 11:5) alınır: üst ve alt boşluk masaüstünde ≈ 25–31 px, dar ekranda ≈ 18–21 px (eskiden 16:8 kutuda 57–65 px, 4:3 kutuda 71–74 px).
   Poster 2:1 (1400×700) ve kenarlarında kendi payı vardır: cover ile ortadan kırpılır (kutu poster oranından geniştir), boşluk kalmaz. */
.harita { position: relative; }
.harita-tuval { position: relative; aspect-ratio: 12 / 5; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); touch-action: pan-y; }
.harita-tuval canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.harita-tuval .sahne-poster { object-fit: cover; object-position: 50% 50%; }
.harita[data-hazir] .sahne-poster { opacity: 0; pointer-events: none; }
.harita-etiketler { position: absolute; inset: 0; pointer-events: none; }
.harita-etiket { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px)); padding: 2px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-card); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--ink); transition: opacity .15s ease-out; }
.harita-etiket span { font-weight: 400; color: var(--ink-muted); }
.harita-etiket[data-vurgu] { border-color: var(--viz-ges); }
.harita-etiket[data-sonuk] { opacity: 0; }
.harita-ipucu { position: absolute; z-index: 3; pointer-events: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: var(--shadow-overlay); font-size: 12px; line-height: 18px; }
.harita-ipucu b { font-family: var(--font-display); }
.harita-lejant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
@media (max-width: 700px) { .harita-tuval { aspect-ratio: 11 / 5; } .harita-etiket { display: none; } }

/* ---------- Süzgeç düğmeleri ---------- */
.filtre { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtre-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink-secondary); font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; }
.filtre-btn:hover { border-color: var(--action); color: var(--ink); }
.filtre-btn[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--ink-on-action); }
.filtre-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filtre-btn .bk-tech::before { margin: 0; }

/* ---------- Kart ızgaraları ---------- */
.makale-izgara, .proje-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
@media (max-width: 1000px) { .makale-izgara, .proje-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .makale-izgara, .proje-izgara { grid-template-columns: 1fr; } }
.makale-kart { display: flex; flex-direction: column; overflow: hidden; }
.makale-kart .bk-card-meta { margin-top: auto; padding-top: var(--space-4); }
/* Kapak ({{MAKALELER:n}}, build.py): eş yükselti SVG'si kartın üst kenarına taşar (kart dolgusu --space-6); süstür.
   overflow: hidden, en-boy kutusunun görselin kendi oranına büyümesini önler: üç kapak da 16:7 (SVG'lerin oranı farklı).
   Oranı sayfa CSS'i değiştirebilir (.bolum .makale-kart-kapak { aspect-ratio: ... }). */
.makale-kart-kapak { display: block; flex: none; overflow: hidden; aspect-ratio: 16 / 7; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5); background: var(--pus-gok); border-bottom: 1px solid var(--line-subtle); }
.makale-kart-kapak img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
/* Kartın kendi kapağı varken sayfa CSS'lerinin geçici ::before kapağı çizilmez (çift kapak olmasın) */
.makale-izgara > .makale-kart:has(> .makale-kart-kapak)::before { content: none; display: none; }
.makale-kart-ust { color: var(--ink-muted); }
.proje-kart { display: flex; flex-direction: column; }
.proje-kart-ust { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proje-konum { color: var(--ink-muted); }
.proje-rakam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: auto !important; padding-top: var(--space-4); border-top: 1px solid var(--line-subtle); }
.proje-rakam dt { color: var(--ink-muted); }
.proje-rakam dd { font-weight: 500; color: var(--ink); }
.proje-kart[data-gizli] { display: none; }
.kart-bos { padding: var(--space-6); color: var(--ink-secondary); }

/* ---------- Sayfa başı (iç sayfalar; plan 3.0) ----------
   Zemin pus-gok; eş yükselti motifi (green-700, %10) metnin karşı tarafında yoğunlaşır. Üst satır (tip-ust), H1 en çok
   iki satır, lead en çok üç satır. İsteğe bağlı derinlik penceresi: .sayfa-basi--pencere + .derinlik.derinlik--16x10. */
.sayfa-basi { position: relative; overflow: hidden; isolation: isolate; background: var(--pus-gok); border: 0; padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 88px); }
.sayfa-basi::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/ikiz/es-yukselti-motif.svg") 0 0 / 480px 480px repeat; opacity: .1; -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 72%); mask-image: linear-gradient(100deg, transparent 22%, #000 72%); pointer-events: none; }
.sayfa-basi-ic { position: relative; z-index: 1; display: grid; gap: var(--space-4); max-width: 780px; }
.sayfa-basi .tip-ust { color: var(--ink-muted); }
.sayfa-basi .lead { max-width: 60ch; }
.sayfa-basi--pencere .sayfa-basi-ic { max-width: none; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-6) var(--space-12); align-items: center; }
.sayfa-basi--pencere .sayfa-basi-ic > .derinlik { grid-column: 2; grid-row: 1 / span 6; }
@media (max-width: 1000px) { .sayfa-basi--pencere .sayfa-basi-ic { grid-template-columns: minmax(0, 1fr); } .sayfa-basi--pencere .sayfa-basi-ic > .derinlik { grid-column: auto; grid-row: auto; } }
.iz { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.iz a { color: var(--ink-secondary); }
.iz li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
/* Dokunmatikte kırıntı bağlantısı 44 px yüksekliğe uzar; dikey pay negatif kenar boşluğuyla geri alınır, yerleşim değişmez. */
@media (pointer: coarse), (max-width: 800px) { .iz a { display: inline-block; padding-block: 13px; margin-block: -13px; } }
@media (max-width: 900px) { .sayfa-basi::after { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 30%, #000 100%); } }

/* ---------- Hizmet ayrıntısı ---------- */
.hizmet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-10); padding-block: var(--space-16); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.hizmet:first-of-type { border-top: 0; padding-top: 0; }
.hizmet-bas { display: grid; gap: var(--space-3); align-content: start; position: sticky; top: 108px; }
.hizmet-govde { display: grid; gap: var(--space-6); }
.hizmet-govde > p { max-width: var(--measure); color: var(--ink-secondary); }
.cikti-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.cikti-liste li { position: relative; padding-left: var(--space-6); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.cikti-liste li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 900px) { .hizmet { grid-template-columns: 1fr; gap: var(--space-6); } .hizmet-bas { position: static; } .cikti-liste { grid-template-columns: 1fr; } }
.icindekiler { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.icindekiler a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink-secondary); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.icindekiler a:hover { border-color: var(--action); color: var(--link); }

/* ---------- SSS ---------- */
.sss { border-top: 1px solid var(--line); max-width: 860px; }
.sss-oge { border-bottom: 1px solid var(--line); }
.sss-oge summary { position: relative; display: block; padding: var(--space-5, 20px) var(--space-10) var(--space-5, 20px) 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 26px; cursor: pointer; list-style: none; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::before, .sss-oge summary::after { content: ""; position: absolute; right: var(--space-2); top: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--accent); transition: transform .15s ease-out; }
.sss-oge summary::after { transform: rotate(90deg); }
.sss-oge[open] summary::after { transform: rotate(0deg); }
.sss-oge summary:focus-visible { outline-offset: 4px; }
.sss-yanit { padding: 0 var(--space-10) var(--space-6) 0; color: var(--ink-secondary); max-width: var(--measure); }
.sss-yanit p + p { margin-top: var(--space-3); }

/* ---------- Metin (makale, yasal, anlatı) ---------- */
.metin { max-width: var(--measure); font-size: 17px; line-height: 29px; color: var(--ink); }
.metin > * + * { margin-top: var(--space-4); }
.metin h2 { margin-top: var(--space-12, 48px); font-size: 24px; line-height: 32px; }
.metin h3 { margin-top: var(--space-8); font-size: 19px; line-height: 28px; }
.metin h2 + *, .metin h3 + * { margin-top: var(--space-3); }
.metin ul, .metin ol { padding-left: 1.3em; }
.metin li + li { margin-top: var(--space-2); }
.metin li::marker { color: var(--accent); }
.metin strong { font-weight: 600; }
.metin blockquote { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); color: var(--ink); }
.metin .tablo-kap { margin-block: var(--space-6); }
.metin figure figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.not { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--info-soft); color: var(--ink); font-size: 15px; line-height: 24px; }
.not strong { color: var(--info); }
.not-uyari { background: var(--warning-soft); }
.not-uyari strong { color: var(--warning); }
.makale-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-16); align-items: start; }
.makale-yan { position: sticky; top: 108px; display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.makale-yan ol { display: grid; gap: var(--space-2); padding-left: 1.2em; margin: 0; font-size: 14px; line-height: 20px; }
/* Yalnız metin bağlantıları: yan sütundaki düğmenin (.bk-btn-primary) yazı rengi ezilmesin (kontrast ≥ 4,5) */
.makale-yan a:not(.bk-btn) { color: var(--ink-secondary); text-decoration: none; }
.makale-yan a:not(.bk-btn):hover { color: var(--link); text-decoration: underline; }
@media (max-width: 1000px) { .makale-duzen { grid-template-columns: minmax(0, 1fr); } .makale-yan { position: static; } }
.metin { min-width: 0; }
.makale-bilgi { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.okuma-ilerleme { display: none; }
@supports (animation-timeline: scroll()) {
  .okuma-ilerleme { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: okuma linear both; animation-timeline: scroll(root); }
  @keyframes okuma { to { transform: scaleX(1); } }
}

/* ---------- Sekmeler ve bileşen listesi ---------- */
.sekmeler { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); width: fit-content; max-width: 100%; }
.sekme { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-secondary); font-weight: 500; font-size: 14px; cursor: pointer; }
.sekme:hover { background: var(--surface-tint); color: var(--ink); }
.sekme[aria-selected="true"] { background: var(--action); color: var(--ink-on-action); }
.sekme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bilesen-liste { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bilesen-liste > div { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); }
.bilesen-liste dt { grid-column: 2; font-weight: 500; font-size: 15px; line-height: 22px; }
.bilesen-liste dd { grid-column: 2; color: var(--ink-secondary); font-size: 14px; line-height: 22px; }
.bilesen-liste .no { grid-row: 1 / span 2; grid-column: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface-tint); color: var(--link); font-family: var(--font-display); font-size: 12px; font-weight: 600; }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--space-5, 20px); }
.form-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 20px) var(--space-4); }
@media (max-width: 640px) { .form-satir { grid-template-columns: 1fr; } }
.alan { display: grid; gap: var(--space-2); align-content: start; }
.alan > label, .alan > legend, .alan-etiket { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.alan .yardim { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.girdi, .secim, .alan textarea { width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink); font-size: 16px; line-height: 24px; }
.alan textarea { min-height: 140px; padding: var(--space-3); resize: vertical; }
.secim { appearance: none; -webkit-appearance: none; padding-right: var(--space-10); background-image: url("../img/ok-asagi.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.girdi:hover, .secim:hover, .alan textarea:hover { border-color: var(--ink-secondary); }
.girdi:focus-visible, .secim:focus-visible, .alan textarea:focus-visible { outline: none; border-color: var(--action); box-shadow: var(--focus-ring); }
.girdi[aria-invalid="true"], .secim[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-color: var(--danger); }
.hata { color: var(--danger); font-size: 13px; line-height: 18px; }
.birimli { position: relative; }
.birimli .girdi { padding-right: 76px; font-variant-numeric: tabular-nums; }
.birimli .birim { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 14px; pointer-events: none; }
.onay { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.onay input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.secenekler { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.secenekler legend { padding: 0; margin-bottom: var(--space-2); }
.secenek { position: relative; }
.secenek input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secenek span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink-secondary); font-size: 14px; font-weight: 500; }
.secenek input:checked + span { border-color: var(--action); background: var(--surface-tint); color: var(--link); box-shadow: inset 0 0 0 1px var(--action); }
.secenek input:focus-visible + span { box-shadow: var(--focus-ring); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-durum { padding: var(--space-4); border-radius: var(--radius-md); font-size: 15px; line-height: 24px; }
.form-durum[data-tur="basari"] { background: var(--success-soft); color: var(--ink); }
.form-durum[data-tur="basari"] strong { color: var(--success); }
.form-durum[data-tur="hata"] { background: var(--danger-soft); color: var(--ink); }
.form-durum[data-tur="hata"] strong { color: var(--danger); }
.iletisim-bilgi { display: grid; gap: var(--space-6); }
.iletisim-bilgi dl { display: grid; gap: var(--space-4); }
.iletisim-bilgi dd { font-size: 16px; line-height: 24px; }

/* ---------- Kontrol listesi (yatırım) ---------- */
.kontrol { display: grid; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.kontrol-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
@media (max-width: 800px) { .kontrol-liste { grid-template-columns: 1fr; } }
.ilerleme { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-tint); overflow: hidden; }
.ilerleme span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); transition: width .2s ease-out; }
.kontrol-durum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: 14px; line-height: 20px; }

/* ---------- Alıntı / ölçüt kutuları ---------- */
.olcut { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); }
.olcut ol, .olcut ul { display: grid; gap: var(--space-2); padding-left: 1.2em; margin: 0; color: var(--ink-secondary); font-size: 15px; line-height: 24px; }
.olcut li::marker { color: var(--accent); font-weight: 600; }
.kitle { display: grid; gap: var(--space-3); align-content: start; }
.kitle ul { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: 1.2em; color: var(--ink-secondary); font-size: 14px; line-height: 22px; }
.kitle .dugmeler { margin-top: auto; padding-top: var(--space-4); }

/* ---------- Değerler / zaman çizelgesi ---------- */
.deger-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-10); }
.deger-liste > div { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--accent); }
.deger-liste dd { color: var(--ink-secondary); }
@media (max-width: 800px) { .deger-liste { grid-template-columns: 1fr; } }
.arac-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Çağrı bandı ---------- */
.cagri { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; padding: var(--space-16) var(--space-16); border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--ink-on-inverse); }
.cagri h2 { color: var(--ink-on-inverse); }
.cagri p { color: var(--ink-on-inverse-muted); margin-top: var(--space-3); }
.cagri .dugmeler { justify-content: flex-end; }
@media (max-width: 900px) { .cagri { grid-template-columns: 1fr; padding: var(--space-10) var(--space-6); } .cagri .dugmeler { justify-content: flex-start; } }

/* ---------- Alt bilgi (plan 3.8): green-950, sitenin tek koyu yüzeyi ---------- */
.alt { margin-top: var(--space-24); background: var(--surface-inverse-deep); color: var(--ink-on-inverse); }
.alt-ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); padding-block: var(--space-16) var(--space-12); }
.alt-marka { display: grid; gap: var(--space-4); align-content: start; }
.alt-marka p { color: var(--ink-on-inverse-muted); max-width: 30rem; }
/* Üç sütun: her sütun kırılmaz; ayırıcı "·" iki sütunun arasındaki boşluğa ::before ile konur. Satır başına düşen
   sütunun ayırıcısı kapsayıcının sol kenarının dışında kalır ve kırpılır: satır hiçbir kırılımda "·" ile bitmez ya da başlamaz. */
.alt-sutunlar { display: flex; flex-wrap: wrap; column-gap: 1.75em; overflow: hidden; overflow: clip; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.alt-sutunlar span { position: relative; white-space: nowrap; }
.alt-sutunlar span::before { content: "·"; position: absolute; right: 100%; width: 1.75em; text-align: center; text-indent: .14em; }
.alt-metin { font-size: 15px; line-height: 24px; }
.alt .alt-kapanis { margin-top: var(--space-2); font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-on-inverse); }
.alt-kolonlar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr); gap: var(--space-8); }
.alt-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.alt-kolonlar h2 { color: var(--ink-on-inverse); margin-bottom: var(--space-3); }
.alt-kolonlar ul { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-on-inverse-muted); }
.alt-iletisim ul { overflow-wrap: anywhere; }
.alt a { color: var(--ink-on-inverse-muted); text-decoration: none; }
.alt a:hover { color: var(--ink-on-inverse); text-decoration: underline; }
.alt-yasal { border-top: 1px solid var(--green-900); }
.alt-yasal-ic { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5); color: var(--ink-on-inverse-muted); }
.alt-yasal ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (max-width: 1100px) { .alt-ic { grid-template-columns: 1fr; gap: var(--space-10); } }
@media (max-width: 800px) { .alt-kolonlar { grid-template-columns: 1fr; gap: var(--space-8); } }
@media (max-width: 640px) { .alt-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
/* Dokunma hedefi ≥ 44 px (plan 10.1): herhangi bir kaba işaretçide ve dar ekranda (ince işaretçili dar pencere dahil).
   Satır aralığını bağlantının kendi yüksekliği taşır; bağlantısız adres satırları aynı ritimde durur. */
@media (any-pointer: coarse), (max-width: 800px) {
  .alt-kolonlar ul, .alt-yasal ul { gap: 0 var(--space-6); }
  .alt-kolonlar h2 { margin-bottom: var(--space-1); }
  .alt-kolonlar a, .alt-yasal a { display: inline-flex; align-items: center; min-height: 44px; }
  .alt-iletisim li:not(:has(a)) { padding-block: 12px; }
}
.bolum-son { margin-top: var(--space-8); }

/* ---------- 404 (plan 3.8): kopuk iletkenli ENH direği ---------- */
.yok { padding-block: clamp(56px, 8vw, 120px); background: var(--pus-gok); }
.yok-ic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); align-items: center; }
.yok-metin { display: grid; gap: var(--space-6); max-width: 620px; }
.yok-kod { font-family: var(--font-display); font-size: clamp(64px, 8vw, 112px); line-height: 1; font-weight: 400; letter-spacing: -.02em; color: var(--line-strong); font-variant-numeric: tabular-nums; }
.yok .h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.025em; font-weight: 500; max-width: 16ch; }
.yok-direk { justify-self: center; width: 100%; max-width: 400px; height: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 95%, transparent); }
.yok-direk .govde { fill: none; stroke: var(--graphite-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.yok-direk .kafes { fill: none; stroke: var(--graphite-400); stroke-width: 1.1; stroke-linecap: round; }
.yok-direk .izolator { fill: none; stroke: var(--graphite-700); stroke-width: 2.4; stroke-linecap: round; }
.yok-direk .iletken { fill: none; stroke: var(--graphite-500); stroke-width: 1.6; stroke-linecap: round; }
.yok-direk .toprak-teli { fill: none; stroke: var(--graphite-400); stroke-width: 1.1; }
.yok-direk .zemin { fill: none; stroke: var(--graphite-300); stroke-width: 1.5; stroke-linecap: round; }
.yok-direk .kopuk-uc { stroke: var(--gold-600); }
.yok-kopuk { transform-box: view-box; transform-origin: 274px 162px; animation: yok-salin 3.6s cubic-bezier(.37, 0, .63, 1) .4s 1 both; }
/* Üç salınım, sonra durur (toplam 4 sn; kendiliğinden hareket 5 sn'yi aşmaz, plan 1.4/6) */
@keyframes yok-salin { 0% { transform: rotate(9deg); } 16% { transform: rotate(-6.5deg); } 32% { transform: rotate(4.5deg); } 48% { transform: rotate(-3deg); } 64% { transform: rotate(1.8deg); } 80% { transform: rotate(-.8deg); } 100% { transform: rotate(0deg); } }
html.hareket-yok .yok-kopuk { animation: none; }
@media (prefers-reduced-motion: reduce) { .yok-kopuk { animation: none; } }
@media (max-width: 800px) {
  .yok-ic { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .yok-direk { order: -1; justify-self: start; max-width: 220px; }
}

/* ---------- Hareket azaltma ----------
   Sayfalar arası pus silmesi (plan 5.7) hareket.css'te (P8) ve yalnız hareket serbestken tanımlıdır; burada yalnız
   genel hareket azaltma kuralları durur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .okuma-ilerleme { display: none !important; }
}
@media print {
  .ust, .alt, .mobil-menu, .sahne, .harita, .cagri, .okuma-ilerleme { display: none !important; }
  body { background: #fff; }
}

/* Düzeltmeler: menü işaretleri, giriş sahnesi yerleşimi */
.menu ul, .mobil-menu ul { list-style: none; margin: 0; padding: 0; }
.giris-ic { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
.sahne-cerceve { position: relative; }
.sahne-panel { width: min(292px, calc(100% - 2 * var(--space-4))); gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.sahne-veri { gap: var(--space-1) var(--space-3); }
.sahne-egri { height: 60px; }
.giris-not:not(:has(span:not([hidden]))) { display: none; }
.sahne-alt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-3); }
.sahne-alt .dipnot { max-width: 52ch; }
@media (max-width: 1120px) { .giris-ic { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .sahne-panel { position: static; width: auto; margin-top: var(--space-3); box-shadow: none; }
  .sahne-tuval { aspect-ratio: 5 / 4; }
}
/* Dokunmatik ekranlarda en az 44 px dokunma hedefi */
@media (pointer: coarse) {
  .bk-btn-sm, .filtre-btn { min-height: 44px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
}

/* Kaydırma hikâyesi: araziden şebekeye */
.hikaye { padding-block: var(--space-24); }
.hikaye-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.hikaye-adimlar { list-style: none; margin: var(--space-8) 0 0; padding: 0; counter-reset: adim; }
.hikaye-adimlar li { counter-increment: adim; min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); transition: opacity .3s ease-out; }
.hikaye-adimlar li::before { content: counter(adim, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.hikaye-adimlar p { max-width: 42ch; color: var(--ink-secondary); }
.hikaye[data-hazir] .hikaye-adimlar li:not([data-aktif]) { opacity: .8; }   /* etkin olmayan adım metni yine 4,5:1 (ikincil metin .8 opaklıkta 4,9:1) */
.hikaye-sahne { position: sticky; top: 12vh; height: 76vh; }
.hikaye-tuval { position: relative; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-page); }
.hikaye-tuval canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hikaye[data-hazir] .sahne-poster { opacity: 0; pointer-events: none; }
.hikaye-ilerleme { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); height: 4px; border-radius: 2px; background: var(--line-subtle); overflow: hidden; }
.hikaye-ilerleme span { display: block; height: 100%; width: 0; background: var(--action); }
@media (max-width: 900px) {
  .hikaye-ic { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hikaye-sahne { order: -1; top: 72px; height: 42vh; z-index: 2; }
  .hikaye-adimlar li { min-height: 52vh; }
}
@media (prefers-reduced-motion: reduce) { .hikaye-adimlar li { opacity: 1 !important; } }
/* Sahadan kareler ({{SAHA_GALERI}}): 6 sütunlu mozaik; dikey kare bir yatayla aynı satırda (4 + 2), diğerleri 3 + 3.
   Satırdaki kareler alt ızgarayla (subgrid) aynı fotoğraf yüksekliğini ve künye satırını paylaşır. */
.saha-mozaik { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gutter); }
.saha-kare { grid-column: span 3; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; }
.saha-kare--genis { grid-column: span 4; }
.saha-kare--dikey { grid-column: span 2; }
.saha-kare--tam { grid-column: 1 / -1; }
.saha-kare > .kunye { margin-top: 0; align-self: start; }
.saha-kare .derinlik-tuval { --derinlik-oran: 3 / 2; }
.saha-kare--dikey .derinlik-tuval { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 700px) {
  .saha-mozaik { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .saha-kare, .saha-kare--genis, .saha-kare--dikey { grid-column: auto; }
  .saha-kare--dikey .derinlik-tuval { aspect-ratio: 4 / 5; min-height: 0; }
}
@media (pointer: coarse) { .sekme { min-height: 44px; } }

/* Teknoloji vitrini: koyu, kaydırmalı sahne (Codrops gürültü geçişi uyarlaması) */
.vitrin { position: relative; background: var(--green-950); color: #fff; }
html.js .vitrin { height: 420vh; }
html.gl-yok .vitrin { height: auto; }
.vitrin-yapiskan { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.gl-yok .vitrin-yapiskan { position: static; height: auto; overflow: visible; }
.vitrin-tuval { position: absolute; inset: 0; }
.vitrin-tuval canvas { display: block; width: 100% !important; height: 100% !important; }
.vitrin-ic { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(72px + var(--space-6)) var(--space-8); pointer-events: none; }
.vitrin-ic a, .vitrin-ic button { pointer-events: auto; }
.vitrin-baslik { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--green-200); }
.vitrin-ogeler { display: grid; align-self: center; max-width: 34rem; }
.vitrin-oge { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .22s ease-in, transform .3s ease-in, visibility 0s .3s; }
.vitrin-oge:not([data-aktif]) { transform: translateY(-12px); }
.vitrin-oge[data-aktif] { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease-out .32s, transform .7s cubic-bezier(.2,.7,.2,1) .32s, visibility 0s; }
.vitrin-oge[data-aktif] { animation: vitrin-gir .7s cubic-bezier(.2,.7,.2,1) .32s both; }
@keyframes vitrin-gir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vitrin-oge, .vitrin-oge[data-aktif] { transition: none; animation: none; } }
.vitrin-ad { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 9.5vw, 136px); line-height: .92; letter-spacing: -.035em; color: #fff; }
.vitrin-oge .lead { color: var(--green-100); max-width: 30rem; margin: 0; }
.vitrin-rakam { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: var(--space-6) 0; }
.vitrin-rakam dt { font-size: 12px; line-height: 16px; color: var(--green-200); }
.vitrin-rakam dd { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vitrin-btn { background: #fff; color: var(--green-950); border-color: #fff; }
.vitrin-btn:hover { background: var(--green-100); border-color: var(--green-100); }
.vitrin-alt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.vitrin-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.vitrin-nav button { min-height: 40px; padding: 0 var(--space-4); border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: 500 14px/20px var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.vitrin-nav button:hover { border-color: #fff; }
.vitrin-nav button[aria-pressed="true"] { background: #fff; color: var(--green-950); border-color: #fff; }
.vitrin-nav button:focus-visible, .vitrin-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vitrin-ipucu { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--green-200); font-size: 12px; line-height: 16px; }
.vitrin-ipucu i { position: relative; display: block; width: 120px; height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.vitrin-ipucu b { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; }
html.gl-yok .vitrin-ogeler { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-10); max-width: none; }
html.gl-yok .vitrin-oge { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
html.gl-yok .vitrin-ad { font-size: 48px; }
html.gl-yok .vitrin-alt { display: none; }
@media (max-width: 900px) {
  .vitrin-ic { padding-bottom: var(--space-6); }
  .vitrin-ogeler { align-self: end; }
  .vitrin-ad { font-size: clamp(44px, 15vw, 84px); margin-bottom: var(--space-2); }
  .vitrin-rakam { margin: var(--space-4) 0; gap: var(--space-2) var(--space-6); }
  .vitrin-ipucu { display: none; }
}
@media (pointer: coarse) { .vitrin-nav button { min-height: 44px; } }

/* Yumuşak kaydırma (Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ======================= Tema: Baykara Enerji Ferah (açık, havadar, güneşli) ======================= */
/* Görünüm geçişi (@view-transition) yalnız hareket.css'te (P8). */
body { background: var(--surface-page); }
/* Üst çubuk: opak düz zemin; kaydırılan başlık ve fotoğraf arkasından görünmez (JS'siz sayfada data-kaydi hiç konmaz).
   Yalnız JS'li sayfanın en üstünde (data-kaydi yokken) hafif saydam. backdrop-filter yok (altta çizen WebGL tuvalinin
   her karesini yeniden bulanıklaştırmasın). */
.ust { background: var(--surface-page); border-bottom: 1px solid var(--line-subtle); }
html.js .ust:not([data-kaydi]) { background: color-mix(in srgb, var(--surface-page) 94%, transparent); }
.bolum { padding-block: clamp(80px, 10vw, 144px); }
.h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.satir { padding-bottom: .08em; }
.bolum-tint { background: var(--surface-tint); }
.bolum-kart { background: var(--surface-sky); }
.sekme[aria-selected="true"], .filtre-btn[aria-pressed="true"] { border-radius: var(--radius-full); }
/* İç sayfa başı H1'i (plan 3.0): clamp(36px, 4.6vw, 64px), en çok iki satır */
.sayfa-basi .h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.025em; font-weight: 500; max-width: 20ch; color: var(--ink); }
@media (max-width: 380px) { .sayfa-basi .h1 { font-size: clamp(30px, 9vw, 36px); } }
.hizmet .h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.kaydir-ipucu { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 12px; letter-spacing: .06em; }
/* Kaydırma ipucu: çizgi girişte bir kez yukarıdan aşağı çizilir ve durur. Gecikme + süre = 2,4 sn, giriş açılışı bütçesinde
   (plan 1.4/6, 5.2 sure-acilis); sonsuz döngü yok. */
.kaydir-ipucu i { width: 1px; height: 32px; background: linear-gradient(var(--accent), transparent); transform-origin: top; animation: ipucu 1.8s var(--ease-giris, cubic-bezier(.16, 1, .3, 1)) .6s 1 backwards; }
@keyframes ipucu { from { transform: scaleY(0); } }
html.hareket-yok .kaydir-ipucu i { animation: none; }
/* Kayan yazı: CSS'te kendiliğinden kayma yok (plan 1.4/6, 2.3/07). Bant yalnız kaydırma hızıyla ilerler; bunu P8'in
   hareket.js'i [data-kayan] kalıbıyla sürer (5.4). JS'siz ve hareket azaltmada bant durağandır. */
.kayan { background: var(--surface-card); color: var(--green-600); overflow: hidden; padding-block: clamp(16px, 2.4vw, 32px); border-block: 1px solid var(--line-subtle); }
.kayan-ic { display: flex; width: max-content; }
.kayan-ic span { font: 500 clamp(44px, 7vw, 112px)/1 var(--font-display); letter-spacing: -.035em; padding-right: .45em; white-space: nowrap; }
.kayan-ic span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--sky-400); }
/* Manifesto ve rakamlar */
.koyu { background: var(--surface-page); color: var(--ink); }
.manifesto { padding-block: clamp(80px, 11vw, 160px) clamp(48px, 6vw, 96px); }
.manifesto-metin { margin: 0; max-width: 24ch; font: 500 clamp(30px, 4.2vw, 60px)/1.14 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.manifesto-metin em { font-style: normal; color: var(--green-700); }
.manifesto-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); padding-top: var(--space-8); }
.manifesto-alt h3 { margin: 0 0 var(--space-2); font: 600 20px/28px var(--font-display); color: var(--ink); }
.manifesto-alt p { margin: 0; color: var(--ink-secondary); }
.sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: clamp(80px, 10vw, 140px); padding: clamp(32px, 4vw, 56px); background: var(--surface-sky); border-radius: var(--radius-xl); }
.sayi { min-width: 0; }
.sayi b { display: block; font: 500 clamp(40px, 5vw, 80px)/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: normal; }
.sayi b small { display: inline-block; white-space: nowrap; font-size: .34em; letter-spacing: 0; color: var(--sky-ink); margin-left: .12em; }
.sayi span { display: block; margin-top: var(--space-2); color: var(--ink-secondary); font-size: 15px; line-height: 22px; max-width: 22ch; }
.sayi:first-child b { color: var(--energy-ink); }
/* Hizmet galerisi: fotoğraf üstte, metin beyaz kartta */
.yatay { background: linear-gradient(180deg, var(--surface-page) 0%, var(--green-50) 100%); overflow: hidden; }
.yatay-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); margin-bottom: clamp(40px, 5vw, 64px); }
.yatay-iz { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.hkart { display: grid; grid-template-rows: auto auto 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); border: 1px solid var(--line-subtle); transition: box-shadow .28s, transform .28s; }
.hkart:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.hkart img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hkart-no { padding: 20px var(--space-6) 0; font: 600 14px/20px var(--font-display); color: var(--accent); }
.hkart-ic { padding: var(--space-2) var(--space-6) var(--space-6); display: grid; gap: var(--space-2); }
.hkart h3 { margin: 0; font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.hkart p { margin: 0; color: var(--ink-secondary); font-size: 15px; line-height: 23px; }
@media (min-width: 1000px) {
  html.js:not(.hareket-yok) .yatay-iz { display: flex; width: max-content; }
  html.js:not(.hareket-yok) .hkart { width: clamp(300px, 24vw, 360px); }
}
/* Hikâye, harita ve çağrı */
.harita-vitrin { background: linear-gradient(180deg, var(--sky-100) 0%, var(--surface-page) 78%); color: var(--ink); }
.harita-vitrin img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cagri-dev { position: relative; overflow: hidden; background: var(--surface-sun); color: var(--ink); padding-block: clamp(88px, 11vw, 168px); }
.cagri-dev::before { content: ""; position: absolute; width: clamp(240px, 32vw, 480px); aspect-ratio: 1; border-radius: 50%; background: var(--gold-100); right: -6%; top: -30%; }
.cagri-dev .kap { position: relative; }
.cagri-dev h2 { margin: 0; font: 500 clamp(48px, 8vw, 124px)/.96 var(--font-display); letter-spacing: -.04em; max-width: 12ch; color: var(--ink); }
.cagri-dev p { max-width: 46ch; font-size: 19px; line-height: 30px; color: var(--ink-secondary); margin: var(--space-8) 0; }
.cagri-dev .eposta { display: inline-block; font: 500 clamp(22px, 2.6vw, 38px)/1.1 var(--font-display); color: var(--link); text-decoration: none; border-bottom: 2px solid currentColor; margin-right: var(--space-8); }
.cagri-dev .bk-btn-primary { min-height: 52px; padding-inline: 28px; }
/* İç sayfaların alt çağrı bandı: koyu yerine şafak */
.cagri.bk-on-inverse { background: linear-gradient(160deg, var(--sky-50) 0%, var(--green-50) 60%, var(--gold-50) 100%); color: var(--ink); border: 1px solid var(--line-subtle); border-radius: var(--radius-xl); }
.cagri.bk-on-inverse :is(h2, .h2) { color: var(--ink); }
.cagri.bk-on-inverse p { color: var(--ink-secondary); }
.cagri.bk-on-inverse .bk-btn-primary { background: var(--action); border-color: var(--action); color: var(--ink-on-action); }
.cagri.bk-on-inverse .bk-btn-secondary { background: var(--surface-card); border-color: var(--line-strong); color: var(--ink); }
@media (max-width: 900px) { .manifesto-alt, .sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .manifesto-alt { grid-template-columns: minmax(0, 1fr); } }
/* Referans logo duvarı: bilesenler.css (.logo-duvar) */

/* ======================= Revizyon 5 iskeleti (plan 9.4 P2) ======================= */
/* Bölüm zeminleri (plan 2.1): pus = sayfa zemini */
.zemin-gok { background: var(--pus-gok); }
.zemin-kagit { background: var(--pus-kagit); }
.zemin-yesil { background: var(--green-50); }
.zemin-gunes { background: var(--gold-50); }
.zemin-ikiz { background: var(--ikiz-kagit); }

/* Sabitlenmiş sahne kalıbı: CSS sticky (ScrollTrigger pin yok, plan 5.1). Hareket azaltmada, WebGL yokken ve JS'siz
   sabitleme kapanır; içerik aynı sırayla akar (plan 5.8). */
.sahne-yapiskan { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.hareket-yok .sahne-yapiskan, html.gl-yok .sahne-yapiskan, html:not(.js) .sahne-yapiskan { position: relative; height: auto; overflow: visible; }
/* Derinlik tuvali yalnız JS + WebGL2 + hareket serbestken kurulur; aksi hâlde poster ve künye kalır */
html.hareket-yok [data-derinlik-foto] canvas, html.gl-yok [data-derinlik-foto] canvas { display: none !important; }
html.hareket-yok [data-derinlik-foto] img, html.gl-yok [data-derinlik-foto] img, html:not(.js) [data-derinlik-foto] img { opacity: 1 !important; }
/* Yalnız JS ile çalışan denetimler JS'siz gizlenir */
html:not(.js) .yalniz-js { display: none !important; }

/* Filtre düğmesi seçiliyken tür noktası action zemininde kaybolmasın (P1 kontrast ölçümü: halka 6,17:1) */
.filtre-btn[aria-pressed="true"] .bk-tech::before { box-shadow: 0 0 0 2px var(--surface-card); }

/* ---------- Görsel kaynakları ({{GORSEL_KAYNAKLARI}}) ---------- */
.gk-bolum + .gk-bolum { margin-top: var(--space-16); }
.gk-bolum > .h2 { margin-bottom: var(--space-6); }
.gk-bolum > .dipnot { margin-top: var(--space-4); max-width: var(--measure); font-size: 13px; line-height: 20px; }
.gk-tablo tbody th a, .gk-tablo td a { overflow-wrap: anywhere; }
.gk-etiket { display: none; }
@media (max-width: 700px) {
  .gk-bolum .tablo-kap { overflow: visible; }
  .gk-tablo { min-width: 0; }
  .gk-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gk-tablo, .gk-tablo tbody, .gk-tablo tr, .gk-tablo th, .gk-tablo td { display: block; }
  .gk-tablo tbody tr { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-subtle); }
  .gk-tablo tbody tr:last-child { border-bottom: 0; }
  .gk-tablo tbody th, .gk-tablo td { padding: 0; border: 0; }
  .gk-tablo td { margin-top: var(--space-2); }
  .gk-etiket { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
  .gk-tablo td a, .gk-tablo tbody th a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}
.gk-notlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-10); margin: 0; padding: 0; list-style: none; }
.gk-notlar li { padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-secondary); font-size: 15px; line-height: 24px; }
.gk-notlar strong { font-weight: 600; color: var(--ink); }
@media (max-width: 800px) { .gk-notlar { grid-template-columns: minmax(0, 1fr); } }