/* ============================================================
   sections.css — ANA SAYFA BÖLÜMLERİ
   DESIGN.md §9'un birebir uygulaması.

   Sekiz perdelik anlatı, sırası korunarak:
     1. .hero          — .act--full, koyu, --t-mega display
     2. .client-band   — .act--tight, koyu, marka marquee'si
     3. .svc-act       — koyu, SABİTLENMİŞ (pinned) yatay altı panel
     4. .manifesto     — TEK AÇIK PERDE, sert kesme
     5. .work-list     — koyu, editoryal proje listesi
     6. .sector-strip  — koyu, numaralı sektör listesi
     7. .step-list     — koyu, scroll ile çizilen ilerleme çizgisi
     8. .cta-act       — koyu kapanış bandı (bileşen; burada yalnızca kullanım)
   Ayrıca .stat-band (hakkımızda sayfası da kullanır).

   BU DOSYANIN İKİ DEĞİŞMEZİ VAR:

   A) JS KAPALIYKEN HER BÖLÜM DOĞRU GÖRÜNÜR (§13.2).
      Varsayılan (kancasız) yazım her zaman bitmiş düzendir:
      hiçbir kural "JS gelip transform uygulayacak" varsayımına
      dayanmaz. Sabitlemeye (pin) bağlı düzen YALNIZCA
      `html.is-motion` altında kurulur — bu sınıfı engine.js
      ekler ve azaltılmış harekette ASLA eklemez. Yani:
        · JS yok            → yatay scroll-snap şeridi
        · azaltılmış hareket → yatay scroll-snap şeridi
        · < 900px           → yatay scroll-snap şeridi
        · JS + hareket + ≥900px → sabitlenmiş yatay sürüş
      Bu dört yol da tek başına tam kullanılabilir.

   B) SİNYAL NADİRDİR (sanat yönü).
      Gradient bu dosyada TEK bir yerde geçer: hero'nun son
      display satırı (.u-signal-text, base.css'te tanımlı) ve
      #hero-canvas kenarları (figures.js çizer). Bölümlerin
      hiçbirinde dekoratif gradient, parıltı veya renkli kart
      yoktur. Eski sitenin ana hatası buydu.
   ============================================================ */


/* ============================================================
   1. HERO — .act--full, koyu perde
   ------------------------------------------------------------
   <section class="act act--full hero" data-act="dark">
     <div class="act-rules" aria-hidden="true"></div>
     <div class="shell">
       <p  class="act-head__eyebrow u-mono">…</p>
       <h1 class="hero__type u-display">
         <span class="hero__line" data-split="lines">…</span>
         <span class="hero__line" data-split="lines">…</span>
         <span class="hero__line u-signal-text" data-split="lines">…</span>
       </h1>
       <p   class="hero__lead">…</p>
       <div class="hero__actions">… .btn …</div>
       <div class="hero__canvas" aria-hidden="true"><canvas id="hero-canvas"></canvas></div>
       <div class="hero__foot">
         <a class="hero__scroll u-mono" href="#…">…</a>
         <div class="hero__ticker marquee" data-marquee>…</div>
       </div>
     </div>
   </section>
   ============================================================ */

.hero {
  /* Masthead hero'nun üzerine biner: üstte ona pay bırakılır.
     .act--full dikeyde ortaladığı için bu pay kompozisyonu
     aşağı doğru optik olarak dengeler. */
  padding-block: clamp(7rem, 18vh, 12rem) var(--act-pad-tight);
}

/* ------------------------------------------------------------
   1.1 Display tipografi — sayfanın taşıyıcı kararı
   --t-mega, --lh-mega ve negatif tracking. .u-display zaten
   'WONK' aksını ve kademeli tracking'i getiriyor; mega ölçek
   bir adım daha sıkı yazılır (punto büyüdükçe boşluk büyür).
   ------------------------------------------------------------ */
.hero__type {
  /* ÖLÇÜ KARARI: başlık --t-mega (≈208px) DEĞİL, kendi ölçeğini
     kullanır. En uzun satır "dünyadaki tüm ihtiyaçları," 26
     karakterdir ve Fraunces'te ~12.5em yer ister; 208px'te bu
     2600px eder, yani hiçbir masaüstü kolonuna sığmaz ve satır
     kendi içinde tekrar kırılırdı (elle verilen üç satırlık
     tipografik karar bozulur). 6.4rem tavanı ile en uzun satır
     ~1275px'te kalır ve 12 kolonluk ölçüye oturur.
     --t-mega kısa ifadelere ayrılmıştır (404, .footer__statement). */
  font-size: clamp(2.4rem, 1rem + 5.6vw, 6.4rem);

  /* Satır aralığı --lh-mega (.86) DEĞİL: Türkçe aksanlar
     (Ş/ç kuyrukları, ü/İ noktaları) .86'da üst satırın
     çıkıntılarıyla çakışıyordu — ölçülmüş bir hataydı.
     .98 aksanlara pay bırakır, sıkı editoryal duruşu korur. */
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--fg-strong);
  margin-block: clamp(1.1rem, 2.4vw, 2.25rem) 0;
  /* Fraunces'in büyük puntoda daha ince/net çizilmesi */
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 1;
  text-wrap: nowrap;
}

/* Satırlar elle kırıldığı için nowrap doğrudur; ancak çok dar
   ekranda taşmayı önlemek adına orada tekrar sarmaya izin verilir. */
@media (max-width: 599px) {
  .hero__type {
    text-wrap: wrap;
  }
}

/* Üç satır bilinçli olarak elle kırılır: kırılma noktası
   tipografik bir karardır, satır sayısı ekrana bırakılmaz. */
.hero__line {
  display: block;
}

/* Sinyal satırı: gradient metnin kendi genişliğine oturur,
   blok genişliğine yayılmaz — aksi hâlde kısa satırda
   gradyanın yalnızca sol ucu görünür. */
.hero__line.u-signal-text {
  width: fit-content;
  max-width: 100%;
  /* Alt uzantılar (ş, ç, y) kırpılmasın: background-clip: text
     kutusu satır kutusuyla sınırlıdır. */
  padding-bottom: .06em;
}

.hero__lead {
  margin-top: clamp(1.25rem, 2.4vw, 2.1rem);
  max-width: 52ch;
  font-size: var(--t-body-l);
  color: var(--mute);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
}

/* ------------------------------------------------------------
   1.2 #hero-canvas — yakınsama sistemi (§9)
   KONTRAST KURALI (§13.9): tuval, mega tipografinin ARKASINA
   değil YANINA konur. Kenarlarında sinyal gradyanı çizildiği
   için metinle üst üste gelmesi kontrastı 4.5:1'in altına
   düşürebilir; bu yüzden geometri ile ayrılırlar:
     ≥1100px → sağ kolona mutlak konumlanır, tip %58'e sığar
     <1100px → akışta, kendi bandında; metin asla üstünde değil
   CLS yok: her iki durumda kutunun boyu belirlidir
   (mutlakta explicit height, akışta aspect-ratio).
   ------------------------------------------------------------ */
.hero__canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  margin-top: clamp(2rem, 4vh, 3rem);
  aspect-ratio: 16 / 10;
  max-height: 32svh;
  pointer-events: none;
}

/* Sarmalayıcı ile tek eleman kullanımının ikisi de desteklenir:
   bu seçici yalnızca canvas .hero__canvas'ın İÇİNDE olduğunda
   eşleşir; birleşik kullanımda ölçüyü aspect-ratio verir. */
.hero__canvas #hero-canvas {
  width: 100%;
  height: 100%;
}

#hero-canvas {
  display: block;
}

/* ------------------------------------------------------------
   1.3 Alt satır — scroll ipucu + disiplin ticker'ı
   Altı disiplin adı ticker'da GERÇEK METİN olarak durur (§9):
   bilgi hiçbir zaman yalnızca tuvalde yaşamaz.
   ------------------------------------------------------------ */
.hero__foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-top: clamp(.9rem, 1.6vw, 1.4rem);
  border-top: 1px solid var(--line);
}

.hero__scroll {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--mute);
  transition: color var(--d-fast) var(--ease);
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--fg-strong);
}

/* İnce dikey çubuk aşağı doğru akar — "kaydır" jesti.
   Azaltılmış harekette base.css süreyi .01ms'e düşürür,
   ayrıca aşağıda animasyon açıkça kapatılır. */
.hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, var(--fg), transparent);
  transform-origin: top center;
  animation: hero-scroll-cue 2.4s var(--ease-inout) infinite;
}

@keyframes hero-scroll-cue {
  0%   { transform: scaleY(.2); opacity: .25; }
  45%  { transform: scaleY(1);  opacity: 1; }
  100% { transform: scaleY(.2); opacity: .25; }
}

.hero__ticker {
  flex: 1 1 auto;
  min-width: 0;
  /* marquee bileşeni zaten kırpıyor; burada da kırpmak sayfanın
     yatay kaymasını her koşulda engeller (JS yokken de). */
  overflow: clip;
  color: var(--mute);
  /* Kenarlarda yumuşak bitiş — şerit sayfa kenarına çarpmaz. */
  mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

/* JS yokken .marquee__track akışta durur: öğeler yatayda sıralanır
   ve taşan kısım kırpılır — okunur, hareketsiz bir şerit. */
.hero__ticker .marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  white-space: nowrap;
}

/* Ekran daraldığında ticker ile scroll ipucu yan yana sıkışıyor:
   ipucu üstte, şerit altta. */
@media (max-width: 699px) {
  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .hero__ticker {
    width: 100%;
    mask-image: linear-gradient(to right, #000 70%, transparent);
  }
}

/* Geniş ekran: tuval sağa geçer, tipografi soldaki kolona sığar.
   Üst üste gelme YOK — kontrast garantisi geometriktir. */
@media (min-width: 1100px) {
  .hero__type {
    letter-spacing: -.04em;
    /* %58 → %72: en uzun satır ("dünyadaki tüm ihtiyaçları,")
       Fraunces'te ~12.2em yer ister. %58'te ölçü 854px'e
       düşüyor ve satır kendi içinde ikinci kez kırılıyordu;
       elle verilen üç satırlık karar bozuluyordu. Tuval de
       buna göre daralır — geometrik ayrım korunur. */
    max-width: 72%;
  }

  .hero__lead {
    max-width: min(46ch, 58%);
  }

  .hero__canvas {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    /* Ortalama `transform` ile yapılır; `translate` özelliği
       motion.js'in (parallax vb.) kullanımına açık kalır. */
    transform: translateY(-50%);
    width: min(26%, 26rem);
    height: min(48svh, 26rem);
    max-height: none;
    aspect-ratio: auto;
    margin-top: 0;
  }
}

/* Azaltılmış hareket: tek karelik tuval (figures.js), ipucu sabit. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    animation: none;
    transform: none;
    opacity: .6;
  }
}


/* ============================================================
   2. CLIENT-BAND — .act--tight, koyu perde
   ------------------------------------------------------------
   <section class="act act--tight client-band" data-act="dark">
     <div class="shell">
       <p class="client-band__label u-mono">Birlikte çalıştığımız markalar</p>
       <div class="client-band__list marquee" data-marquee>
         <div class="marquee__track">
           <span class="marquee__item client">
             <span class="client__name u-display">ÇELİK</span>
             <span class="client__sub u-mono">LLC</span>
           </span>…
   NOT (§13.5): bunlar yer tutucu kelime işaretleridir; şablon
   etiketi ("… markalar") her zaman görünür kalır.
   ============================================================ */

.client-band {
  border-block: 1px solid var(--line);
  /* Şerit kabuk boşluğunun dışına taşıyor: taşma bandın içinde
     kesilir, sayfa hiçbir koşulda yatay kaymaz. */
  overflow-x: clip;
  overflow-y: visible;
}

.client-band__label {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--mute);
  margin-bottom: clamp(1.25rem, 2.6vw, 2.1rem);
}

/* Etiketten sonra uzayan saç teli — bandın ritmini kurar. */
.client-band__label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.client-band__list {
  /* Şeridi kabuk boşluğunun kenarlarına kadar taşır: marquee
     kesilmiş değil, sayfanın içinden akıyor gibi okunur. */
  margin-inline: calc(var(--pad-shell) * -1);
  overflow: clip;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.client-band__list .marquee__track {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.client {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  /* Marka isimleri sıralı bir alfabe gibi okunur: mono alt ek
     display isme yapışır, ikisi aynı taban çizgisinde durur. */
  color: var(--fg);
}

.client__name {
  font-size: clamp(1.55rem, 1rem + 1.9vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg-strong);
}

.client__sub {
  color: var(--mute);
}


/* ============================================================
   3. SVC-ACT — koyu perde, SABİTLENMİŞ YATAY SÜRÜŞ
   ------------------------------------------------------------
   <section class="act svc-act" data-act="dark"
            data-pin data-pin-length="3">
     <div class="act-rules" aria-hidden="true"></div>
     <div>                              <!-- PANO: pin bunu sticky yapar -->
       <header class="svc-act__head">…</header>
       <div class="svc-act__track" data-pin-track>
         <article class="svc-panel">…</article> ×6
       </div>
       <div class="svc-act__rail" aria-hidden="true">
         <span class="svc-act__rail-bar"></span>
       </div>
       <p class="svc-act__counter u-mono" data-pin-counter>01</p>
     </div>
   </section>

   PANO = track'in, .svc-act'ın DOĞRUDAN çocuğu olan atası
   (motion.js §7 böyle bulur). Sınıf adı sözleşmede olmadığı
   için burada yapısal seçiciyle (`:has`) hedeflenir; hiçbir
   yeni sınıf adı uydurulmaz. `:has` desteklenmese bile panoya
   stil GEREKMEZ: paneller kendi yüksekliğini taşır.

   YEDEK DÜZEN ÖNCE YAZILIR (varsayılan): yerel yatay
   scroll-snap şeridi. Sabitlenmiş düzen yalnızca
   `html.is-motion` + ≥900px altında devreye girer.
   ============================================================ */

.svc-act {
  /* Kabuk hizası: pano tam genişlik (şerit kenardan kenara akar),
     içindeki başlık/ray/sayaç ise .shell ile aynı hizada durur. */
  --svc-inset: max(var(--pad-shell), calc((100% - var(--w-shell)) / 2 + var(--pad-shell)));
  /* .act--flush yazılmış olsa da bu bölüm kendi ritmini kurar:
     yedek düzende normal perde boşluğu, sabitlenmiş düzende sıfır. */
  padding-block: var(--act-pad);
  /* Sabitlenmiş modda ötelenen şerit dışa taşar. `clip`
     BİLİNÇLİ tercih: `hidden` kaydırma kabı yaratır, position:
     sticky'yi ve odak (focus) davranışını bozar. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Bu başlık .act-head--split'i kullanır (layout.css): eyebrow /
   başlık / lead 1. kolonda dikey akar, .act-head__aside 2. kolonda
   taban çizgisine oturur. Buraya `display: flex` yazmak o grid'i
   eziyordu — sections.css layout.css'ten SONRA yüklendiği için
   dört çocuk yan yana bir satıra dizilip üst üste biniyordu.
   Ölçülmüş bir hataydı: yalnızca boşluk ayarları kalır, düzen
   kararı layout.css'te tek yerde durur. */
.svc-act__head {
  padding-inline: var(--svc-inset);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* Başlık bloğu bu bölümde ekran yüksekliğini paylaştığı için
   .act-head'in alt boşluğu geri alınır. */
.svc-act__head .act-head {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   3.1 YEDEK DÜZEN — yerel yatay scroll-snap şeridi
   JS yok / azaltılmış hareket / <900px. Tam kullanılabilir:
   parmakla veya klavyeyle (Tab odağı kabı kendisi kaydırır)
   altı panele de erişilir.
   ------------------------------------------------------------ */
.svc-act__track {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--svc-inset);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--svc-inset);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Snap kabında odak kayması sıçramasın */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.svc-act__track::-webkit-scrollbar {
  height: 3px;
}

.svc-act__track::-webkit-scrollbar-track {
  background: var(--line-soft);
}

.svc-act__track::-webkit-scrollbar-thumb {
  background: var(--line);
}

/* Ray ve sayaç yalnızca sabitlenmiş sürüşün göstergeleridir:
   yerel şeritte anlamları yoktur (tarayıcının kendi kaydırma
   çubuğu o işi görür), bu yüzden yedek düzende gösterilmezler. */
.svc-act__rail,
.svc-act__counter {
  display: none;
}

/* ------------------------------------------------------------
   3.2 PANEL — altı hizmetin biri
   ------------------------------------------------------------ */
.svc-panel {
  flex: 0 0 min(85%, 26rem);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1.4vw, 1.1rem);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}

.svc-panel:hover,
.svc-panel:focus-within {
  background: var(--bg-raise-2);
  border-color: var(--line);
}

.svc-panel__index {
  color: var(--mute);
}

.svc-panel__title {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: -.026em;
  color: var(--fg-strong);
  max-width: 18ch;
}

.svc-panel > .u-mute {
  font-size: var(--t-body);
  max-width: 34ch;
}

/* Hizmet kalemleri saç teli ile ayrılmış mono liste — kart
   değil, künye. Panelin boş alanını bu liste doldurur. */
.svc-panel__list {
  margin-top: auto;
  color: var(--mute);
}

.svc-panel__list > li {
  padding-block: .5rem;
  border-top: 1px solid var(--line-soft);
}

.svc-panel__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(.75rem, 1.5vw, 1.25rem);
  padding-block: .35rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-strong);
}

.svc-panel__link > span:last-child {
  display: inline-flex;
  transition: transform var(--d-fast) var(--ease-out);
}

.svc-panel__link svg {
  width: 1em;
  height: 1em;
}

/* Buton konvansiyonuyla aynı jest: 4px ok itmesi, translateY yok. */
.svc-panel__link:hover > span:last-child,
.svc-panel__link:focus-visible > span:last-child,
.svc-panel:hover .svc-panel__link > span:last-child {
  transform: translateX(4px);
}

/* Dokunmatikte ≥46px hedef (§13.8) */
@media (pointer: coarse) {
  .svc-panel__link {
    min-height: 46px;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   3.3 SABİTLENMİŞ DÜZEN — yalnızca JS + hareket + ≥900px
   motion.js: panoyu position:sticky yapar, .svc-act'a satır içi
   height (1+len)×vh yazar, track'i ötelenir ve şu özellikleri
   günceller: --pin-progress (0–1), --pin-index, --pin-count.
   ------------------------------------------------------------ */
/* YÜKSEKLİK EŞİĞİ de şart. Pano `height: 100svh` + `overflow: clip`
   olduğu için başlık + şerit + ray bir ekrana SIĞMAK zorunda. Kısa
   pencerelerde (dizüstü ~780px) toplam ~795px'i aşıyor ve
   justify-content:center yüzünden hem başlığın üstü hem kartların altı
   kırpılıyordu. 760px altında hiç sabitlenmez: tamamen kullanılabilir
   yatay scroll-snap şeridine düşer. Eşik motion.js'teki pinAllowed()
   ile birebir aynı olmalı. */
@media (min-width: 900px) and (min-height: 760px) {
  html.is-motion .svc-act.is-pinned {
    /* Yükseklik motion.js tarafından satır içi yazılır;
       perde boşluğu panonun içine taşınır. */
    padding-block: 0;
  }

  /* PANO: track'i saran doğrudan çocuk. Ekran yüksekliğini
     paylaştıran dikey flex — başlık, şerit, ray ve sayaç
     birlikte tam olarak bir ekrana sığar. */
  html.is-motion .svc-act.is-pinned > :has(.svc-act__track) {
    height: 100svh;
    display: flex;
    flex-direction: column;
    /* flex-start, center DEĞİL: içerik bir şekilde taşarsa fazlalık
       yalnızca ALTA gider; center'da hem üst hem alt kırpılıyor ve
       bölüm başlığının tepesi kesiliyordu. */
    justify-content: flex-start;
    gap: clamp(1.25rem, 2.6vh, 2.25rem);
    padding-block: clamp(4.5rem, 11vh, 7rem) clamp(1.5rem, 4vh, 3rem);
    /* Taşan şeridi pano kırpar. Yine `clip`: kaydırma kabı
       yaratmaz, dolayısıyla odak sıçraması olmaz. */
    overflow: clip;
  }

  html.is-motion .svc-act.is-pinned .svc-act__head {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* Sabitlenmiş perdede lead gizlenir: dikey bütçeden ~65px kazandırır
     ve altı panel zaten aynı şeyi anlatıyor. DOM'dan KALDIRILMAZ —
     yedek (şerit) düzende ve JS'siz görünümde okunmaya devam eder,
     dolayısıyla içerik kaybı yoktur. */
  html.is-motion .svc-act.is-pinned .svc-act__head .act-head__lead {
    display: none;
  }

  /* Şerit: yerel kaydırma kapatılır, genişlik içeriğe açılır.
     motion.js maxX'i track.scrollWidth − pano.clientWidth ile
     hesapladığı için track'in kaydırma kabı OLMAMASI şart. */
  html.is-motion .svc-act.is-pinned .svc-act__track {
    flex: 1 1 auto;
    min-height: 0;
    width: max-content;
    max-width: none;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  html.is-motion .svc-act.is-pinned .svc-panel {
    flex: 0 0 min(30rem, 44vw);
    height: 100%;
    scroll-snap-align: none;
  }

  /* Ray + sayaç: sürüşün göstergeleri, sabitlenmiş modda görünür. */
  html.is-motion .svc-act.is-pinned .svc-act__rail {
    display: block;
    position: relative;
    flex: 0 0 auto;
    height: 2px;
    margin-inline: var(--svc-inset);
    background: var(--line);
    overflow: clip;
  }

  html.is-motion .svc-act .svc-act__rail-bar {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: var(--fg);
    transform-origin: left center;
    /* --pin-progress'i motion.js her karede yazar; yoksa 0. */
    transform: scaleX(var(--pin-progress, 0));
  }

  html.is-motion .svc-act .svc-act__counter {
    display: block;
    flex: 0 0 auto;
    padding-inline: var(--svc-inset);
    color: var(--mute);
  }

  /* Sayaçtaki mevcut değer "aktif durum" göstergesidir:
     sinyalin görünmesine izin verilen az sayıdaki yerden biri
     olmasına rağmen burada bilinçle kullanılmıyor — bölüm
     zaten altı panelle konuşuyor, fazlası gürültü olur. */
}


/* ============================================================
   4. MANIFESTO — TEK AÇIK PERDE, SERT KESME
   ------------------------------------------------------------
   <section class="act manifesto" data-act="light">
     <div class="shell">
       <blockquote class="manifesto__quote u-display" data-split="lines">…</blockquote>
       <p class="manifesto__cite u-mono">…</p>
     </div>
   </section>

   İşi karanlığı TAM BİR KEZ kırmak. Bu yüzden:
     · geçiş yok, gradient yok, yumuşama yok — kenar sert kesme
     · gölge/parıltı yok; renk yalnızca perde temasından gelir
   ============================================================ */

.manifesto {
  /* Renk .act'tan (data-act="light") gelir. Burada tek iş,
     kesmenin sert kalmasını GARANTİLEMEK: hiçbir mülkte
     geçiş yok. */
  transition: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Işık perdesinde tipografi bir tık daha ince optik ister */
  padding-block: clamp(6rem, 5rem + 8vw, 13rem);
}

.manifesto__quote {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  color: var(--fg-strong);
  max-width: 26ch;
  /* Alıntı işaretleri tipografik olarak asılır: metin bloğu
     optik olarak sola hizalı kalır. */
  hanging-punctuation: first last;
  /* Alıntının altındaki gövde metni yapışık duruyordu: display
     ölçeğinde satır kutusu dar olduğu için iki blok optik olarak
     birbirine değiyor. Ölçüyle büyüyen net bir ara verilir. */
  margin-bottom: clamp(1.5rem, 2.8vw, 2.5rem);
}

@media (max-width: 899px) {
  .manifesto__quote {
    letter-spacing: -.022em;
    max-width: none;
  }
}

.manifesto__cite {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
  color: var(--mute);
  /* <cite> varsayılan italiği istenmiyor */
  font-style: normal;
}

.manifesto__cite::before {
  content: '';
  flex: 0 0 auto;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--line);
}


/* ============================================================
   5. WORK-LIST — koyu perde, EDİTORYAL LİSTE (kart ızgarası DEĞİL)
   ------------------------------------------------------------
   <a class="work-row" href="…" data-cursor="view" data-cursor-label="Görüntüle">
     <span class="work-row__index u-mono">01</span>
     <span class="work-row__title u-display">Çelik LLC</span>
     <span class="work-row__meta u-mono">Kurumsal Kimlik · …</span>
     <span class="work-row__year u-mono">2025</span>
     <span class="work-hover" aria-hidden="true">
       <span class="work-hover__inner"><figure class="figure" …></figure></span>
     </span>
   </a>

   Cömert satır yüksekliği, saç teli ayırıcı, mono indeks + yıl,
   iri display isim ve satır üzerinde imleci takip eden üretilen
   figür. Figür MUTLAK konumlu ve pointer-events:none; dokunmatikte
   ve azaltılmış harekette satır içi SABİT figüre döner.
   ============================================================ */

.work-list {
  display: grid;
}

.work-row {
  position: relative;
  /* Satır kendi yığın bağlamını kurar: figür (0) metnin (1)
     altında, zemin tonu (-1) figürün altında kalır ve bu sıra
     sayfanın geri kalanını etkilemez. */
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  column-gap: clamp(1rem, 2.6vw, 3rem);
  row-gap: clamp(.75rem, 1.6vw, 1.25rem);
  padding-block: clamp(1.75rem, 3.6vw, 3.5rem);
  border-top: 1px solid var(--line);
  color: var(--fg);
}

/* Listenin alt sınırı son satıra yazılır: .work-list bölümün
   kendisi de olsa, kabuk içindeki de olsa hiza bozulmaz. */
.work-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* Hover zemin tonu — gradient DEĞİL, yalnızca bir kademe
   yükseltilmiş ink. */
.work-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-raise);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
}

.work-row:hover::before,
.work-row:focus-visible::before {
  opacity: .55;
}

/* Metin her zaman figürün ÜSTÜNDE: kontrast hiçbir koşulda
   figüre bağımlı olmaz (§13.9). */
.work-row__index,
.work-row__title,
.work-row__meta,
.work-row__year {
  position: relative;
  z-index: 1;
}

.work-row__index {
  color: var(--mute);
  transition: color var(--d-fast) var(--ease);
}

.work-row__title {
  font-size: clamp(2rem, 1rem + 4.6vw, 5.5rem);
  line-height: .96;
  letter-spacing: -.032em;
  color: var(--fg-strong);
  /* Hero'dan sonraki en iri punto: optik boy büyütülür,
     'WONK' aksı korunur (§2.3). */
  font-variation-settings: 'opsz' 144, 'SOFT' 24, 'WONK' 1;
  /* Hover'da satır adı sağa doğru bir adım atar — layout
     özelliği değil, yalnızca transform. */
  transition: transform var(--d-base) var(--ease-out);
}

.work-row__meta {
  color: var(--mute);
  text-align: right;
  text-wrap: balance;
}

.work-row__year {
  color: var(--mute);
  justify-self: end;
}

.work-row:hover .work-row__index,
.work-row:focus-visible .work-row__index {
  color: var(--fg-strong);
}

.work-row:hover .work-row__title {
  transform: translateX(clamp(.25rem, 1vw, .85rem));
}

/* ------------------------------------------------------------
   5.1 .work-hover — imleci takip eden üretilen figür
   Varsayılan olarak satırın sağ üçlüsünde, dikeyde ortada
   DURUR (JS yokken de doğru görünür). ui.js figürü işaretçiye
   göre ötelerken `transform`/`translate` kullanır; bu yüzden
   ortalama negatif margin ile yapılır ve iki transform özelliği
   de JS'e bırakılır.
   ------------------------------------------------------------ */
.work-hover {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 66%;
  width: clamp(11rem, 19vw, 21rem);
  aspect-ratio: 4 / 3;
  /* Kutuyu kendi merkezine oturtur — transform boş kalır. */
  margin-top: calc(clamp(11rem, 19vw, 21rem) * -.375);
  margin-left: calc(clamp(11rem, 19vw, 21rem) * -.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
}

.work-hover__inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: clip;
  border-radius: var(--r-sm);
  /* Aşağıdan yukarı silinerek açılır. Ölçek/transform
     KULLANILMAZ: figures.js tuvali getBoundingClientRect ile
     ölçüyor, transform ölçüyü bozar. */
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-base) var(--ease-out);
}

.work-hover .figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.work-hover .figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Yalnızca ince işaretçide (fare) açılır. Klavyeyle gezinende
   de gösterilir: odaklanan satır aynı bilgiyi almalı. */
@media (hover: hover) and (pointer: fine) {
  .work-row:hover .work-hover,
  .work-row:focus-visible .work-hover {
    opacity: 1;
  }

  .work-row:hover .work-hover__inner,
  .work-row:focus-visible .work-hover__inner {
    clip-path: inset(0 0 0 0);
  }
}

/* ------------------------------------------------------------
   5.2 Dokunmatik / azaltılmış hareket → SATIR İÇİ SABİT FİGÜR
   İmleci takip eden figür kapanır, aynı üretilen görsel satırın
   içinde akışa girer. Hiçbir şey kaybolmaz.
   ------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  .work-hover {
    position: static;
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 22rem);
    margin: 0;
    opacity: 1;
  }

  .work-hover__inner {
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-hover {
    position: static;
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 22rem);
    margin: 0;
    opacity: 1;
  }

  .work-hover__inner {
    clip-path: none;
  }

  .work-row__title,
  .work-row:hover .work-row__title {
    transform: none;
  }
}

/* Dar ekran: satır dikey bir künyeye döner. İndeks ve yıl aynı
   hatta, isim tam genişlikte, hizmetler altta sola hizalı. */
@media (max-width: 899px) {
  .work-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    padding-block: clamp(1.5rem, 5vw, 2.25rem);
  }

  .work-row__title {
    grid-column: 1 / -1;
    letter-spacing: -.024em;
  }

  .work-row__meta {
    grid-column: 1 / -1;
    text-align: left;
  }

  .work-row__year {
    grid-column: 2;
    grid-row: 1;
  }
}


/* ============================================================
   6. SECTOR-STRIP — koyu perde, numaralı saç teli listesi
   ------------------------------------------------------------
   <a class="sector-item" href="sectors.html#…">
     <span class="sector-item__index u-mono">01</span>
     <span class="sector-item__title u-display">İnşaat ve Gayrimenkul</span>
     <ul class="sector-item__tags"><li class="u-mono">…</li>…</ul>
   </a>
   ============================================================ */

.sector-strip {
  display: grid;
}

.sector-item {
  display: grid;
  grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  column-gap: clamp(1rem, 2.6vw, 2.5rem);
  row-gap: .75rem;
  padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--line-soft);
  color: var(--fg);
  transition: background-color var(--d-base) var(--ease);
}

.sector-item:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.sector-item__index {
  color: var(--mute);
  transition: color var(--d-fast) var(--ease);
}

.sector-item__title {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: -.026em;
  color: var(--fg-strong);
  transition: transform var(--d-base) var(--ease-out);
}

/* Etiketler: mono, aralarında dikey saç teli. Renkli "chip"
   değil — bu perdede tek renk vardır. */
.sector-item__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem .9rem;
  color: var(--mute);
}

.sector-item__tags > li + li {
  padding-inline-start: .9rem;
  border-inline-start: 1px solid var(--line);
}

.sector-item:hover .sector-item__index,
.sector-item:focus-visible .sector-item__index {
  color: var(--fg-strong);
}

.sector-item:hover .sector-item__title {
  transform: translateX(clamp(.2rem, .8vw, .6rem));
}

@media (max-width: 899px) {
  .sector-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sector-item__tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-item:hover .sector-item__title {
    transform: none;
  }
}


/* ============================================================
   7. STEP-LIST — koyu perde, scroll ile ÇİZİLEN ilerleme çizgisi
   ------------------------------------------------------------
   <ol class="step-list" data-reveal-stagger>
     <li class="step">
       <p  class="step__index u-mono">01</p>
       <h3 class="step__title u-display">…</h3>
       <p  class="step__text u-mute">…</p>
       <span class="step__rule" aria-hidden="true" data-reveal="rule"></span>
     </li>…
   </ol>

   İlerleme çizgisi: her adımın .step__rule'u kolonunun tam
   genişliğinde bir saç telidir ve data-reveal="rule" ile soldan
   sağa scaleX(0→1) çizilir (base.css §5). Dört adım yan yana
   dizildiğinde çizgi sayfa boyunca sırayla tamamlanır. JS yokken
   dördü de baştan çizilidir — düzen aynı, hareket yok.
   Kural işaretlemede EN SONDA durur ama görsel olarak adımın
   ÜSTÜNDEDİR: sırayı `order` belirler, DOM'a dokunulmaz.
   ============================================================ */

.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem) var(--gap);
}

.step {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.step__rule {
  order: -1;
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  background: var(--line);
  /* data-reveal="rule" soldan çizer; origin base.css'te de
     tanımlı, burada yedek olarak yineleniyor. */
  transform-origin: left center;
}

.step__index {
  color: var(--mute);
}

.step__title {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: -.018em;
  color: var(--fg-strong);
}

.step__text {
  font-size: var(--t-body);
  max-width: 34ch;
}


/* ============================================================
   8. STAT-BAND — koyu perde
   ------------------------------------------------------------
   <div class="stat-band">
     <div class="stat">
       <p class="stat__value u-display" data-count="6">6</p>
       <p class="stat__label u-mono u-mute">Ana hizmet alanı</p>
     </div>…

   Ayırıcılar `gap: 1px` + zemin rengiyle kurulur: hücreler
   sarmaladığında (2×2) bile saç teli ızgarası doğru kalır,
   :first-child hesabına ihtiyaç duyulmaz.
   ============================================================ */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.stat {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  background: var(--bg);
}

/* Savunma: .stat-band bir bölüm olarak (içinde doğrudan .stat
   olmadan) kullanılırsa ızgara ve çizgi zemini devre dışı kalır —
   perde zemini asla çizgi rengiyle boyanmaz. */
.stat-band:not(:has(> .stat)) {
  display: block;
  gap: 0;
  background: var(--bg);
}

.stat__value {
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);
  line-height: var(--lh-mega);
  letter-spacing: -.03em;
  color: var(--fg-strong);
  /* data-count sayarken rakam genişliği sabit kalır: zıplama
     ve dolayısıyla CLS yok (§13.6). */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.stat__label {
  margin-top: .6rem;
}


/* ============================================================
   9. CTA-ACT — ana sayfa kullanımı
   ------------------------------------------------------------
   Bandın kendisi bir bileşendir (components.css §8); burada
   yalnızca anlatı içindeki KULLANIMI ayarlanır: kapanış bandı
   sayfanın son perdesi olduğunda araya bir saç teli girer,
   böylece bant kendi perdesi gibi okunur ve bir önceki bölümün
   son satırına yapışmaz.
   ============================================================ */

.cta-act:last-child {
  border-top: 1px solid var(--line-soft);
}


/* ------------------------------------------------------------
   ANA SAYFA GÖRSEL YUVALARI
   ------------------------------------------------------------ */

/* Sektör şeridindeki küçük thumbnail — dördüncü kolon.
   Mobilde gizlenir: şerit orada zaten sıkışık ve satır başına
   bir görsel listeyi okunmaz hâle getiriyor. */
.sector-item__figure {
  display: none;
}

@media (min-width: 900px) {
  .sector-item {
    position: relative;
    grid-template-columns:
      minmax(2.5rem, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, 13rem);
  }

  /* Thumbnail satırın sağ ucunda durur ve İMLEÇ ÜZERİNE GELİNCE
     1.75× büyür. transform-origin sağ-orta: büyüme sola doğru açılır,
     satırın kendi içeriğini itmez ve sayfa dışına taşmaz. Sadece
     transform animasyonlanır — layout'a hiç dokunulmaz. */
  .sector-item__figure {
    display: block;
    align-self: center;
    aspect-ratio: 9 / 7;
    overflow: clip;
    border-radius: var(--r-sm);
    background: var(--bg-raise);
    transform-origin: 100% 50%;
    transition: transform var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease);
    will-change: transform;
  }

  .sector-item:hover .sector-item__figure,
  .sector-item:focus-visible .sector-item__figure {
    transform: scale(1.75);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
    z-index: 3;
  }

  /* Büyüyen thumbnail komşu satırların ÜSTÜNDE kalmalı */
  .sector-item:hover {
    z-index: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-item:hover .sector-item__figure {
    transform: none;
  }
}

/* Açık perdedeki (manifesto) görsel */
.manifesto__figure {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  aspect-ratio: 16 / 9;
  overflow: clip;
  border-radius: var(--r-lg);
  background: var(--bg-raise-2);
}

@media (prefers-reduced-motion: reduce) {
  .sector-item:hover .sector-item__figure .figure__img {
    transform: none;
  }
}


/* ============================================================
   GÖRSEL AĞIRLIKLI ANA SAYFA (locomotive/noomo register)
   Küçük dekoratif görsel yerine ÖLÇEK: hero tam-kanama, panellerde
   gerçek fotoğraf, sektör şeridinde hover'da büyüyen thumbnail.
   ============================================================ */

/* ---- HERO tam-kanama fotoğrafı ---- */
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* components.css'teki 4/3 kuralını ez: burada kutuyu doldurmalı */
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* İKİ gradyan: yatayda sol taraf neredeyse siyah (tipografi orada),
   dikeyde üst ve alt kenar koyulaşır. Metin kontrastı böylece
   fotoğrafın parlaklığından bağımsız garanti altına alınır. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--ink-900) 0%,
      rgba(8, 8, 10, .94) 34%,
      rgba(8, 8, 10, .68) 62%,
      rgba(8, 8, 10, .42) 100%),
    linear-gradient(180deg,
      rgba(8, 8, 10, .88) 0%,
      rgba(8, 8, 10, .25) 34%,
      rgba(8, 8, 10, .70) 100%);
}

/* İçerik her zaman scrim'in ÜSTÜNDE */
.hero > .shell {
  position: relative;
  z-index: 1;
}

/* Dar ekranda fotoğraf daha da koyulaşır: tipografi tüm genişliği
   kullandığı için yatay gradyan tek başına yetmez. */
@media (max-width: 899px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 8, 10, .90) 0%,
        rgba(8, 8, 10, .78) 45%,
        rgba(8, 8, 10, .92) 100%);
  }
}

/* ---- HİZMET PANELİ görseli ---- */
/* 2:1 bilinçli: sabitlenmiş pano bir ekrana sığmak zorunda. 16/9
   panel genişliğinde ~270px yer alıyor ve metinle birlikte bütçeyi
   aşıyordu; 2:1 ~240px'te kalıyor. Kırpmayı object-fit yapar. */
/* flex: 1 1 auto — SIKIŞMAYI GÖRSEL ÜSTLENİR.
   Sabitlenmiş pano bir ekrana sığmak zorunda; kısa pencerede (760px
   eşiğinin hemen üstünde) panel yüksekliği ~385px'e düşüyor ve metin
   410px yer istiyordu. Görsel esner, metin sabit kalır: okunabilirlik
   hiçbir yükseklikte bozulmaz. min-height güvenlik tabanı. */
.svc-panel__figure {
  display: block;
  flex: 1 1 auto;
  min-height: 5.5rem;
  aspect-ratio: 2 / 1;
  overflow: clip;
  border-radius: var(--r-sm);
  background: var(--bg-raise-2);
  margin-bottom: .35rem;
}

/* Metin blokları sıkışmaz */
.svc-panel__index,
.svc-panel__title,
.svc-panel > p.u-mute,
.svc-panel__link {
  flex: 0 0 auto;
}

/* Görsel sarmalayıcısı da kutuyu tam doldurur (araya giren .figure
   grid'i yüzünden yüksekliği zincirlemek gerekiyor) */
.svc-panel__figure > .figure {
  height: 100%;
  gap: 0;
}

.svc-panel__figure .figure__img,
.svc-panel__figure .figure__canvas {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  transition: transform var(--d-slow) var(--ease-out);
}

.svc-panel:hover .svc-panel__figure .figure__img {
  transform: scale(1.04);
}

/* ---- TAM-KANAMA BANT ---- */
.home-band__figure {
  margin: 0;
  aspect-ratio: 21 / 9;
  overflow: clip;
  background: var(--bg-raise);
}

.home-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 699px) {
  .home-band__figure {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-panel:hover .svc-panel__figure .figure__img {
    transform: none;
  }
}