/* Hizmetler (hizmetler.html; TASARIM-PLANI 3.2, sahibi P10; metinler kaynak/metin/hizmetler.md).
   META "css": ["sayfa-hizmetler"] ile yalnız bu sayfaya bağlanır. Yalnız token değişkenleri; yeni renk yok.
   Bileşenler (.cip, .kunye, .rozet, .onay-halkasi, .es-yukselti, .sss, .tablo) bilesenler.css ve site.css'tedir.
   Hareket (data-ciz, data-damga) P8'indir; burada her şeyin son (tam çizili, damgalı) hâli durur.
   Değer zinciri iki kipte okunur: canlı maket (JS + WebGL2 + hareket serbest; insaat.js köke data-hazir koyar) ve
   düz kip (hareket azaltma, WebGL yok, JS yok ya da data-hata): altı halka zinciri, maket alanı gizli. */

#icerik > .bolum { padding-block: clamp(72px, 9vw, 128px); }
.hiz-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; }
.hiz-baglanti:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.hiz-capa { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- 1 · Sayfa başı: H1 masaüstünde en çok iki satır (plan 3.0), içindekiler ---------- */
#sayfa-basi .sayfa-basi-ic { max-width: 1120px; }
#sayfa-basi .h1 { max-width: 31ch; }
#sayfa-basi .lead { max-width: 62ch; }
.hiz-icindekiler { margin-top: var(--space-4); }
.hiz-icindekiler a { background: var(--surface-card); }
@media (pointer: coarse) { .hiz-icindekiler a { min-height: 44px; } }

/* ---------- 2 · Ne yapıyoruz: dört ayak ---------- */
.hiz-ayaklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10) var(--grid-gutter); margin: 0; }
.hiz-ayaklar > li { position: relative; display: grid; align-content: start; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.hiz-ayaklar > li::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--green-600); }
.hiz-ayak-ad { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.hiz-ayak-alt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--green-800); }
.hiz-ayaklar > li > p:last-child { margin-top: var(--space-2); font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
@media (max-width: 1000px) { .hiz-ayaklar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hiz-ayaklar { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

/* ---------- 3 · Değer zinciri ---------- */
#icerik > .hiz-zincir { background: var(--green-50); --es-yukselti-opaklik: .07; }
.hiz-zincir-bas { margin-bottom: 0; }
.hiz-zincir .hikaye-adimlar .h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.hiz-zincir .hikaye-adimlar li::before { color: var(--green-700); }
/* Canlı maket kipi: sağda yapışkan tuval, rozet sağ üstte, dipnot altta */
/* Tuval, rozet ve ilerleme çubuğu aynı ızgara hücresinde üst üste; dipnot altta (sabit ofset yok) */
.hiz-maket { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.hiz-maket > .hikaye-tuval { grid-area: 1 / 1; height: auto; min-height: 0; background: var(--surface-card); box-shadow: var(--shadow-md); }
.hiz-maket-rozet { grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 2; margin: var(--space-4); }
.hiz-maket > .hikaye-ilerleme { grid-area: 1 / 1; align-self: end; position: relative; inset: auto; z-index: 2; margin: var(--space-4); }
.hiz-maket-not { grid-row: 2; margin-top: var(--space-3); }
.hiz-pencere { margin-top: var(--space-5, 20px); max-width: 440px; }
.hiz-pencere-kadraj { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--pus-kagit); box-shadow: var(--shadow-sm); }
.hiz-pencere-kadraj img { width: 100%; height: 100%; object-fit: cover; object-position: 47% 45%; }
.hiz-pencere figcaption { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.hiz-pencere-baslik { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
/* Düz kipte maket yok: "Maketten sahaya" başlığı gizlenir, fotoğraf ve künyesi kalır */
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-pencere-baslik, .hiz-zincir[data-hata] .hiz-pencere-baslik { display: none; }
/* Dar ekranda maket üstte 50svh, üst çubuğun hemen altında yapışkan; zemini, altından kayan adım metnini örter */
@media (max-width: 900px) {
  .hiz-zincir .hikaye-sahne { top: 77px; height: 50vh; height: 50svh; box-sizing: border-box; padding: var(--space-2) 0 var(--space-3); background: var(--green-50); }
}
@media (max-width: 479px) { .hiz-zincir .hikaye-sahne { top: 65px; } }

/* Düz kip: altı halka, halka düğümleri tek hatta. Maket alanı ve maketi anlatan cümle gizli. */
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-sahne,
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir-lead,
.hiz-zincir[data-hata] .hikaye-sahne, .hiz-zincir[data-hata] .hiz-zincir-lead { display: none; }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-ic, .hiz-zincir[data-hata] .hikaye-ic { display: block; }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar,
.hiz-zincir[data-hata] .hikaye-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--grid-gutter); margin-top: var(--space-12); }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li,
.hiz-zincir[data-hata] .hikaye-adimlar li { position: relative; min-height: 0; justify-content: flex-start; padding-top: 44px; opacity: 1; }
/* Hat: her halkanın üstünde yatay iletken, halka numarası düğümde */
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li::after,
.hiz-zincir[data-hata] .hikaye-adimlar li::after { content: ""; position: absolute; top: 19px; left: 0; right: calc(-1 * var(--grid-gutter)); height: 2px; background: var(--green-600); z-index: 0; }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li:nth-child(3n)::after,
.hiz-zincir[data-hata] .hikaye-adimlar li:nth-child(3n)::after { right: 0; }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li::before,
.hiz-zincir[data-hata] .hikaye-adimlar li::before { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border: 2px solid var(--green-600); border-radius: 50%; background: var(--surface-card); color: var(--green-800); font-size: 14px; line-height: 1; }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li:last-child::before,
.hiz-zincir[data-hata] .hikaye-adimlar li:last-child::before { background: var(--gold-100); border-color: var(--gold-500); color: var(--energy-ink); }
:is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar p,
.hiz-zincir[data-hata] .hikaye-adimlar p { font-size: 15px; line-height: 24px; }
@media (max-width: 1000px) {
  :is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar,
  .hiz-zincir[data-hata] .hikaye-adimlar { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  /* Dar ekranda hat dikey: düğümler solda, iletken bir sonraki halkaya iner */
  :is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li,
  .hiz-zincir[data-hata] .hikaye-adimlar li { padding: 8px 0 0 60px; }
  :is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li::after,
  .hiz-zincir[data-hata] .hikaye-adimlar li::after { top: 0; bottom: calc(-1 * var(--space-8)); left: 19px; right: auto; width: 2px; height: auto; }
  :is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li:nth-child(3n)::after,
  .hiz-zincir[data-hata] .hikaye-adimlar li:nth-child(3n)::after { right: auto; }
  :is(html.hareket-yok, html.gl-yok, html:not(.js)) .hiz-zincir .hikaye-adimlar li:last-child::after,
  .hiz-zincir[data-hata] .hikaye-adimlar li:last-child::after { display: none; }
}

/* ---------- 4 · Tek elden: yatırımcı ↔ Baykara Enerji ↔ kurumlar ---------- */
#icerik > .hiz-tek { background: var(--pus-gok); }
.hiz-tek-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10) clamp(40px, 5vw, 72px); align-items: center; }
.hiz-tek-metin .aciklama-buyuk { max-width: 34ch; margin-top: var(--space-5, 20px); color: var(--ink-secondary); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; }
.hiz-sema { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-subtle); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-md); }
/* Yelpaze sütunu 180 × 360 px: SVG görünüm kutusuyla birebir, çizgi kalınlığı ölçeklenmez (vector-effect gerekmez) */
.hiz-sema-cizim { display: grid; grid-template-columns: auto minmax(32px, 1fr) auto 180px auto; align-items: center; height: 360px; }
.hiz-sema-dugum { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-5, 20px); border-radius: var(--radius-full); font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.hiz-sema-yatirimci { border: 1.5px solid var(--line-strong); background: var(--surface-card); color: var(--ink); }
.hiz-sema-baykara { background: var(--action); color: var(--ink-on-action); box-shadow: 0 0 0 6px var(--green-100); }
.hiz-sema-hat { display: block; width: 100%; overflow: visible; }
.hiz-sema-hat path { fill: none; stroke: var(--green-600); stroke-width: 2; stroke-linecap: round; }
.hiz-sema-hat--tek { height: 10px; }
.hiz-sema-hat--yelpaze { height: 100%; }
.hiz-sema-kurumlar { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); align-items: center; height: 100%; margin: 0; }
.hiz-sema figcaption { margin-top: var(--space-5, 20px); }
@media (max-width: 1100px) { .hiz-tek-ic { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) {
  .hiz-sema-cizim { display: flex; flex-direction: column; align-items: flex-start; height: auto; }
  .hiz-sema-hat { display: none; }
  .hiz-sema-dugum { position: relative; margin-left: 0; }
  .hiz-sema-yatirimci { margin-bottom: 28px; }
  .hiz-sema-baykara { margin-bottom: 28px; }
  /* Dikey iletken: düğümden bir sonrakine */
  .hiz-sema-yatirimci::after, .hiz-sema-baykara::after { content: ""; position: absolute; left: 32px; top: 100%; width: 2px; height: 28px; background: var(--green-600); }
  .hiz-sema-baykara::after { top: calc(100% + 6px); height: 22px; }
  .hiz-sema-kurumlar { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); width: 100%; height: auto; padding-top: var(--space-4); border-top: 2px solid var(--green-600); }
}

/* ---------- 5 · Hizmet aşamaları: dikey süreç çizgisi ---------- */
.hiz-asama-liste { position: relative; display: grid; gap: clamp(56px, 7vw, 104px); }
.hiz-omurga { position: absolute; top: 36px; bottom: 36px; left: 35px; width: 2px; height: calc(100% - 72px); overflow: visible; }
.hiz-omurga path { fill: none; stroke: var(--green-300); stroke-width: 2; }
.hiz-asama { position: relative; display: grid; grid-template-columns: 72px minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-6) clamp(32px, 4vw, 64px); align-items: start; }
.hiz-asama-no { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; box-sizing: border-box; border: 2px solid var(--green-600); border-radius: 50%; background: var(--surface-card); font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 500; color: var(--green-800); font-variant-numeric: tabular-nums; }
.hiz-asama:last-child .hiz-asama-no { border-color: var(--gold-500); background: var(--gold-50); color: var(--energy-ink); }
.hiz-asama-metin { padding-top: var(--space-4); }
.hiz-asama-metin .h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.18; letter-spacing: -.01em; max-width: 22ch; }
.hiz-asama-metin > p { max-width: 52ch; margin-top: var(--space-3); color: var(--ink-secondary); font-size: 17px; line-height: 28px; }
.hiz-asama-metin .cip-liste { margin-top: var(--space-5, 20px); }
.hiz-asama-metin .cip { max-width: 100%; }
.hiz-asama-gorsel { margin: 0; min-width: 0; }
@media (max-width: 1000px) {
  .hiz-asama { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-5, 20px) var(--space-5, 20px); }
  .hiz-asama-no { width: 48px; height: 48px; font-size: 17px; }
  .hiz-omurga { left: 23px; top: 24px; bottom: 24px; height: calc(100% - 48px); }
  .hiz-asama-metin { padding-top: 6px; }
  .hiz-asama-gorsel { grid-column: 2; }
}

/* Görsel kadrajları (aşamalar, LÜY, depolama) */
.hiz-kadraj { --oran: 3 / 2; position: relative; overflow: hidden; aspect-ratio: var(--oran); border-radius: var(--radius-lg); background: var(--pus-kagit); }
.hiz-kadraj--3x2 { --oran: 3 / 2; }
.hiz-kadraj--4x3 { --oran: 4 / 3; }
.hiz-kadraj--3x4 { --oran: 3 / 4; }
.hiz-kadraj--16x9 { --oran: 16 / 9; }
.hiz-kadraj > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--konum, 50% 50%); }
.hiz-kadraj > .hiz-kadraj-katman { z-index: 1; }
.hiz-kadraj-rozet { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }
.hiz-kadraj--sema { border: 1px solid var(--line); background: var(--surface-card); }
.hiz-kadraj--sema .tek-hat { position: absolute; inset: 5% 4%; width: 92%; height: 90%; }
@media (max-width: 480px) { .hiz-kadraj-rozet { top: var(--space-2); right: var(--space-2); } }

/* Tek hat şeması (Aşama 02; Çalışma alanları Altyapı ile aynı çizim) */
.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: 26px; font-weight: 500; text-anchor: middle; }
.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-son { text-anchor: end; }

/* ---------- 6 · LÜY Madde 5.1.h / 5.1.ç ---------- */
#icerik > .hiz-luy-bolum { position: relative; padding-top: 0; }
.hiz-luy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-10) clamp(40px, 5vw, 80px); align-items: center; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--gold-100); border-radius: var(--radius-xl); background: var(--gold-50); }
.hiz-luy-metin .tip-ust { color: var(--energy-ink); }
.hiz-luy-metin .h2 { margin-top: var(--space-3); max-width: 18ch; }
.hiz-luy-metin .aciklama-buyuk { max-width: 40ch; margin-top: var(--space-5, 20px); color: var(--ink); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.42; }
.hiz-luy-metin .metin-ikincil { max-width: 60ch; margin-top: var(--space-4); }
.hiz-luy-metin .dugmeler { margin-top: var(--space-8); }
.hiz-luy-gorsel { margin: 0; min-width: 0; }
.hiz-luy-gorsel .hiz-kadraj { box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .hiz-luy { grid-template-columns: minmax(0, 1fr); } .hiz-luy-gorsel { max-width: 420px; } }

/* ---------- 7 · Teknoloji avantajı ---------- */
#icerik > .hiz-teknoloji { background: var(--green-50); }
.hiz-teknoloji-ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8) clamp(40px, 5vw, 80px); align-items: start; }
.hiz-teknoloji-bas { display: grid; justify-items: start; gap: var(--space-6); }
.hiz-teknoloji-ic > .aciklama-buyuk { color: var(--ink); max-width: 36ch; }
@media (max-width: 900px) { .hiz-teknoloji-ic { grid-template-columns: minmax(0, 1fr); } .hiz-teknoloji-ic > .aciklama-buyuk { order: -1; } .hiz-teknoloji-bas { order: -2; } }

/* ---------- 8 · Yatırımcı hizmetleri (ikincil) ---------- */
.hiz-yatirimci .bolum-bas .tip-ust { color: var(--ink-muted); }
.hiz-yatirimci-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); }
.hiz-yh { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.hiz-yh .h3 { max-width: 24ch; }
.hiz-yh > p:not([class]) { margin-top: var(--space-3); color: var(--ink-secondary); font-size: 15px; line-height: 24px; }
.hiz-liste { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5, 20px); }
.hiz-yh-baglanti { margin-top: auto; padding-top: var(--space-5, 20px); }
.hiz-yh-baglanti a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.hiz-yh--depolama { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.hiz-yh--depolama > :not(.hiz-yh-gorsel) { grid-column: 1; }
.hiz-yh--depolama .hiz-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hiz-yh-gorsel { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-width: 0; }
@media (max-width: 900px) {
  .hiz-yatirimci-izgara { grid-template-columns: minmax(0, 1fr); }
  .hiz-yh--depolama { display: flex; }
  .hiz-yh--depolama .hiz-liste { grid-template-columns: minmax(0, 1fr); }
  .hiz-yh-gorsel { margin-top: var(--space-6); }
}

/* ---------- 9 · Sık sorulan sorular ---------- */
#icerik > .hiz-sss { background: var(--pus-gok); }
.hiz-sss .sss { border-top-color: var(--line); }
.hiz-sss .sss-oge summary:hover { color: var(--link); }