/* ============================================================ layout.css — Kabuk, perde (act), ızgara, çizgiler, bölüm başlığı ve yumuşak kaydırma sargısı DESIGN.md §4'ün birebir uygulaması. Buradaki ilkeller tüm bileşen/bölüm/sayfa katmanlarının üzerine oturduğu iskelet: başka hiçbir dosya kendi kabuğunu ya da ızgarasını tanımlamaz. ============================================================ */ /* ------------------------------------------------------------ 1. Yumuşak kaydırma sargısı — #scroll-viewport / #scroll-content Varsayılan (ve yedek) durum: ikisi de sıradan, statik kapsayıcı. Sayfa native olarak kaydırılır; JS olmasa bile düzen birebir aynı görünür. MODE.engine lerp kaydırmayı devreye aldığında bu sarmalayıcılar DEĞİŞMEZ: içerik akışta kalır, sayfa native olarak üzerinde kaydırılır ve motor yalnızca küçük bir gecikme farkını translate3d ile yazar (lag = nativeY - smoothY). Kaydırma çubuğu bu yüzden her zaman doğru boyda ve doğru konumdadır. İçeriği `position: fixed` yapan bir model DENENDİ ve KALDIRILDI; gerekçesi aşağıda yazılı. ------------------------------------------------------------ */ #scroll-viewport { position: relative; width: 100%; } #scroll-content { position: relative; width: 100%; /* will-change YOK: motor artık içeriği hiç transform etmiyor (kaydırma gerçek konum üzerinden animasyonlanıyor), dolayısıyla sayfa boyutunda kalıcı bir GPU katmanı tutmanın anlamı da yok. */ } /* NOT: burada bir `html.is-smooth` bloğu VARDI ve #scroll-content'i `position: fixed` yapıyordu. Kaldırıldı, çünkü iki ayrı yumuşak kaydırma modelini karıştırıyordu: · sabitlenmiş (fixed) model → transform -smoothY olmalı · akış (in-flow) modeli → transform yalnızca gecikme düzeltmesi (nativeY - smoothY) js/engine.js akış modelini uygular. Sınıf eklenip içerik fixed olduğunda transform ~0 kaldığı için içerik tepede çakılıyor ve sayfa tamamen donuyordu. Ek olarak #scroll-viewport'a overflow:hidden vermek yatay hizmet perdesinin position:sticky panosunu da bozar — sticky kırpılmış bir atada çalışmaz. Sarmalayıcılar bu yüzden sade kalır; kaydırma üzerindedir, native kaydırma çubuğu her zaman doğrudur. */ /* ------------------------------------------------------------ 2. Kabuk — yatay ölçü ------------------------------------------------------------ */ .shell { width: 100%; max-width: var(--w-shell); margin-inline: auto; padding-inline: var(--pad-shell); } .shell--wide { max-width: var(--w-wide); } .shell--text { max-width: var(--w-text); } /* ------------------------------------------------------------ 3. Perde (act) — dikey ritim ve tema Rengi doğrudan almaz; data-act="dark|light" ile bildirilen temanın --bg/--fg değişkenlerini okur (bkz. tokens.css §2). ------------------------------------------------------------ */ .act { position: relative; padding-block: var(--act-pad); background: var(--bg); color: var(--fg); } .act--tight { padding-block: var(--act-pad-tight); } .act--flush { padding-block: 0; } .act--full { min-height: 100svh; display: grid; align-content: center; /* minmax(0, 1fr) şart: örtük kolon aksi hâlde içeriğin max-content genişliğine (.shell--wide → 1760px) büyür ve dar ekranlarda sayfayı yatay taşırır. Klasik grid blowout. */ grid-template-columns: minmax(0, 1fr); } /* Dekoratif çizgi katmanı her zaman içeriğin ALTINDA kalır */ .act > .shell { position: relative; z-index: 1; } /* ------------------------------------------------------------ 4. Izgara — 12 kolon Kolon yardımcıları yalnızca .col-1…12 ve .col-start-1…12. ------------------------------------------------------------ */ /* Grid çocukları asla kendi içeriğine göre şişmez: min-width:0 olmadan uzun bir kelime ya da 
 kolonu taşırır. */
.grid > * {
  min-width: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* 900px altında her .col-* tam genişliğe düşer —
   yanına .col-keep yazılmadıysa. */
@media (max-width: 899px) {
  .col-1:not(.col-keep),
  .col-2:not(.col-keep),
  .col-3:not(.col-keep),
  .col-4:not(.col-keep),
  .col-5:not(.col-keep),
  .col-6:not(.col-keep),
  .col-7:not(.col-keep),
  .col-8:not(.col-keep),
  .col-9:not(.col-keep),
  .col-10:not(.col-keep),
  .col-11:not(.col-keep),
  .col-12:not(.col-keep) {
    grid-column: 1 / -1;
  }

  /* DİKKAT: burada `grid-column-start: auto` YAZILMAZ.
     Yukarıdaki kural `grid-column: 1 / -1` ile başlangıcı 1'e
     çekiyor; ardından start'ı `auto`ya döndürmek `auto / -1`
     üretir ve öğe son çizgide bitmek zorunda olduğu için TEK
     kolona sıkışır (ölçüldü: 1200px'lik hero tuvali 13px'e
     düştü). Başlangıç ve bitiş birlikte sıfırlanır. */
  .col-start-1:not(.col-keep),
  .col-start-2:not(.col-keep),
  .col-start-3:not(.col-keep),
  .col-start-4:not(.col-keep),
  .col-start-5:not(.col-keep),
  .col-start-6:not(.col-keep),
  .col-start-7:not(.col-keep),
  .col-start-8:not(.col-keep),
  .col-start-9:not(.col-keep),
  .col-start-10:not(.col-keep),
  .col-start-11:not(.col-keep),
  .col-start-12:not(.col-keep) {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------
   5. Çizgiler
   .rule      → tek saç teli ayırıcı (hr veya div olabilir)
   .act-rules → perdeye dikey ritim veren dekoratif katman:
                1/6, 1/3, 2/3 ve 5/6 noktalarında dört hairline.
                Çocuk eleman gerektirmez, boş bir 
 yeter;
                işaretlemede aria-hidden="true" taşır.
   ------------------------------------------------------------ */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  border: 0;
}

.act-rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--line), var(--line)),
    linear-gradient(to bottom, var(--line), var(--line)),
    linear-gradient(to bottom, var(--line), var(--line)),
    linear-gradient(to bottom, var(--line), var(--line));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position:
    16.6667% 0,
    33.3333% 0,
    66.6667% 0,
    83.3333% 0;
}

/* Küçük ekranda dört çizgi gürültüye dönüşüyor: ortadaki
   ikisi kalır, kenardakiler susar. */
@media (max-width: 899px) {
  .act-rules {
    opacity: .32;
    background-image:
      linear-gradient(to bottom, var(--line), var(--line)),
      linear-gradient(to bottom, var(--line), var(--line));
    background-position:
      33.3333% 0,
      66.6667% 0;
  }
}

/* ------------------------------------------------------------
   6. Bölüm başlığı — .act-head
   

     
…

     
…

     
…
      (opsiyonel)
   

   ------------------------------------------------------------ */
.act-head {
  display: grid;
  gap: clamp(.75rem, 1.4vw, 1.35rem);
  margin-bottom: clamp(2.5rem, 4vw, 4.75rem);
}

/* Mono eyebrow'un önündeki kısa hairline indeks hissi verir;
   içerik taşımadığı için ekran okuyucuyu ilgilendirmez. */
.act-head__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--mute);
}

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

.act-head__title {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  /* --t-h2 ölçeği .u-display'in genel kademesinden bir tık
     daha iri okunuyor; tracking'i bir adım daha sıkıyoruz. */
  letter-spacing: -.028em;
  max-width: 22ch;
}

@media (max-width: 899px) {
  .act-head__title {
    letter-spacing: -.02em;
    max-width: none;
  }
}

.act-head__lead {
  font-size: var(--t-body-l);
  max-width: var(--w-text);
}

/* --split: sağ kenara, başlıkla aynı taban hizasına oturan
   bir aksiyon (genelde .link-arrow veya .btn). 900px altında
   dikey yığına döner. */
.act-head__aside {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

@media (min-width: 900px) {
  .act-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gap);
    align-items: end;
  }

  .act-head--split > * {
    grid-column: 1;
  }

  .act-head--split .act-head__aside {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: end;
    /* Display başlığın optik taban çizgisine oturtur */
    padding-bottom: .3em;
  }
}