/* ============================================================
   KONONENKO KLONU — ölçü sistemi

   Referans: kononenkogroup.com (Awwwards SOTD 23.08.2026, 7.27)
   Çözümleme: hyperstudio/inceleme/kononenko/CALISMA-MANTIGI.md
   Bütün sayılar ORADAN ÖLÇÜLDÜ, göz kararı değil.

   İÇERİK BİZİM: fotoğraflar, metinler ve marka Arda Mimarlık'ın.
   Referanstan alınan şey ÖLÇÜ ve HAREKET sistemi.
   ============================================================ */

/* ---------- 1) KÖK ÖLÇEK — sitenin bel kemiği ----------
   Referansta clamp() hiç yok. Onun yerine kök yazı boyutu ekran
   genişliğine bağlanmış:

     1920 × 0.0520833333% = 1.000 px   ->  1rem = 1px @1920
      375 × 0.2666666667% = 1.000 px   ->  1rem = 1px @375

   Sonuç: tasarımdaki piksel değeri DOĞRUDAN rem olarak yazılıyor
   (80rem = "tasarımda 80px") ve ekranla oransal büyüyor. Bu yüzden
   ara kırılım noktasına gerek kalmıyor — TEK kırılım var.

   ÖDÜNÜ BİLEREK VERİYORUZ: kullanıcının tarayıcı yazı boyutu tercihi
   bu yöntemde eziliyor. Referans da öyle yapıyor; not düşülmüştür. */
:root {
  font-size: 0.0520833333vw;

  --siyah: #000;
  --beyaz: #fff;
  --gri:   #929292;   /* ikincil metin */
  --acik:  #eee;      /* ayraç / zemin */

  /* satır maskesinin alt çıkıntı payı (g, y, p kırpılmasın) */
  --off: .5em;
}

@media (max-width: 767.98px) {
  :root { font-size: 0.2666666667vw; }
}

/* ---------- 2) SIFIRLAMA ----------
   Referansın başarım kararları birebir alındı; her birinin sebebi var. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* TEK AĞIRLIK: 400. Referansta ÖLÇÜLDÜ — h1'den 16rem etikete kadar
   her yazı 400. Başlık etiketlerinin tarayıcı varsayılanı 700 olduğu
   için buradan kapatılıyor; ilk ölçümde klon 700 çıkmıştı, referans
   400'dü. Kalınlık farkı bu sitede tipografinin bütün karakterini
   değiştiriyor (kalın grotesk bambaşka bir ses). */
h1, h2, h3, h4, h5, h6, strong, b { font-weight: 400; }

html {
  /* Lenis kaydırmayı kendi sürüyor; tarayıcının yumuşatması kapalı. */
  scroll-behavior: auto;
  /* Telefonun yazıyı kendiliğinden şişirmesi kapalı — kök vw ölçeği
     zaten oranı tutuyor, şişirme sistemi bozardı. */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kaydırma çubuğu gizli (yumuşak kaydırma devrede). */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--beyaz);
  color: var(--siyah);
  font-family: var(--govde-font);
  line-height: 1;              /* referansta da böyle; satır yüksekliği öğede veriliyor */
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* ---------- 3) YAZI TİPLERİ ----------
   Referansta iki aile var: "n" (gövde) ve "h" (geniş başlık kesimi).
   İkisi de lisanslı ve dosyaları bize ait değil. Yerlerine ÖLÇÜLEREK
   seçilmiş serbest karşılıklar kondu (arac/font-olc.cjs, 100px punto,
   "Handgloves architectural bureau" örneği):

     n  -> örnek/punto 13.839 | H 0.72 | x 0.51
     Archivo             14.327  (+%3.5)  <- seçildi, en yakını

     h  -> örnek/punto 15.004 | H 0.70 | x 0.52 | H eni 0.834
     Schibsted Grotesk   15.074  (+%0.5)  <- seçildi (genel oran)

   KALAN FARK: referansın "h" ailesinin büyük harfleri alışılmadık
   geniş (H eni 0.834); hiçbir serbest aday oraya oturmadı, en yakını
   Public Sans 0.766'ydı. Genel oran uyumu tercih edildi. */
:root {
  --govde-font:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --baslik-font: 'Schibsted Grotesk', 'Archivo', system-ui, sans-serif;
}

/* ---------- 4) TİPOGRAFİ ÖLÇEĞİ ----------
   Ölçülen değerler (tasarım pikseli = rem). Harf aralığı referansta
   iki kademe: küçük boylarda -0.02em, büyük boylarda -0.03em. */
.y-16  { font-size: 16rem;  line-height: 1.2; letter-spacing: -.02em; }
.y-19  { font-size: 19rem;  line-height: 1;   letter-spacing: -.02em; }
.y-40  { font-size: 40rem;  line-height: 1.1; letter-spacing: -.03em; }
.y-80  { font-size: 80rem;  line-height: .8;  letter-spacing: -.03em; }
.y-118 { font-size: 118rem; line-height: .9;  letter-spacing: -.03em; }
.y-175 { font-size: 175rem; line-height: .7;  letter-spacing: -.03em; }

.f-h { font-family: var(--baslik-font); }
.f-n { font-family: var(--govde-font); }
.gri { color: var(--gri); }
.beyaz { color: var(--beyaz); }

/* Telefonda ölçek: referansın 375 tuvalindeki değerleri. */
@media (max-width: 767.98px) {
  .y-175 { font-size: 64rem;  line-height: .85; }
  .y-118 { font-size: 46rem;  line-height: .95; }
  .y-80  { font-size: 40rem;  line-height: .95; }
  .y-40  { font-size: 24rem;  line-height: 1.15; }
  .y-19  { font-size: 16rem; }
  .y-16  { font-size: 14rem; }
}

/* ---------- 5) ⭐ SATIR MASKESİ — sitenin imza hareketi ----------
   Referansta 173 yerde kullanılmış. Üç ayrıntısı var ve klonların
   çoğu tam burada hata yapıyor:

   1. translateY(101%) — 100% DEĞİL. %100'de harfin ucu alt pikselde
      görünüp kirli bir çizgi bırakıyor.
   2. padding-bottom: .5em — overflow:hidden kutusu g/y/p gibi alt
      çıkıntıları kırpıyordu; yarım em nefes payı bırakılıyor.
   3. Erişilebilirlik: bölünen parçaların hepsi aria-hidden, gerçek
      metin ebeveynde aria-label olarak duruyor. Yoksa ekran okuyucu
      metni parça parça okuyor. (Jüri puanının %30'u kullanılabilirlik.)

   4. DÖRDÜNCÜSÜ, ölçümle sonradan bulundu: o yarım em SADECE nefes
      payı, YÜKSEKLİK DEĞİL. Referansta her .ln'de aynı kadar
      NEGATİF alt kenar var (ölçüldü: 118rem başlıkta padding 59,
      kenar -59; son satırda -29.5). Yoksa her satır yarım em
      şişiyor ve dört satırlık başlık 236px uzuyor — bizde tam bu
      oluyordu, bölüm yükseklikleri referansı tutturmuyordu.
      Sonuç: bir metin bloğunun yüksekliği tam olarak
      satır sayısı × satır yüksekliği oluyor — ölçüyü tutturmak
      için gereken tek şey bu. */
.ln-mask {
  display: block;
  overflow: hidden;
}
.ln {
  display: block;
  transform: translateY(101%);
  padding-bottom: calc(var(--off) * 1);
  margin-bottom: calc(var(--off) * -1);
}
.ln-mask .ln,
.ln-mask .wd,
.ln-mask .ch { will-change: transform; }

/* Hareket açılmadıysa (JS yok / az hareket) metin GÖRÜNÜR kalsın —
   yoksa sayfa bomboş açılır. */
html:not(.hareket) .ln { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ln { transform: none !important; }
}

/* ---------- 6) DÜZEN ----------
   ÖLÇÜLDÜ (arac/ic-olcu.cjs, 1920x1080): iç kutular sol 30, genişlik
   1860 -> kenar boşluğu 30rem. İlk yazdığımda 40 sanmıştım, ölçüm
   düzeltti. */
.kap {
  width: 100%;
  padding-left: 30rem;
  padding-right: 30rem;
}
@media (max-width: 767.98px) {
  .kap { padding-left: 20rem; padding-right: 20rem; }
}

.izgara {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 20rem;
}
@media (max-width: 767.98px) {
  .izgara { grid-template-columns: repeat(4, 1fr); gap: 12rem; }
}

/* ---------- 7) ÜST ÇUBUK ----------
   Ölçüldü: 97px yüksek, logo 19rem, bağlar 16rem, kahramanın
   üstünde beyaz. */
.ust {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  height: 97rem;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--beyaz);
  mix-blend-mode: difference;   /* zemin değişince yazı okunur kalsın */
}
.ust__bag { display: flex; gap: 24rem; }

@media (max-width: 767.98px) {
  .ust { height: 64rem; }
  .ust__bag { gap: 16rem; }
  /* Telefonda dokunma hedefi: 44px'in altına düşmesin. */
  .ust a, .ust button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 8) BÖLÜMLER ----------
   ÖLÇÜLDÜ (arac/iskelet.cjs http://localhost:4900/ "main" 1920 1080 1).
   Referansın bölüm haritası — üst / yükseklik, tasarım pikseli:

     kahraman (ean)        0     1080
     ifade    (phv)   1256.3   1513.1     arada 176.3
     künye    (aie)   2903.4    797.4     arada 134
     hizmet   (lmr)   3860.8   1205.4     arada 160
     süreç    (pvg)   5246.2   4596.4     arada 180
     projeler (lxo)  10122.6   4659.9     arada 280
     kadran   (nmc)  14782.5   2160       arada 0
     ekip     (nwv)  16942.5   5652.1     arada 0
     kapanış  (uod)  22594.7   1203.4     arada 0
     alt bilgi       23798.1   1221.5     arada 0
                             --------
                     toplam   25019.6

   Aşağıdaki kenar boşlukları bu tablodan çıkarıldı. Bölüm yüksekliği
   İÇERİKTEN geliyor; tutmayan yerde açıkça yükseklik veriliyor ve
   yanına hangi ölçümden geldiği yazılıyor. */
.bolum { position: relative; }

.kahraman {
  height: 100vh;
  min-height: 600rem;
  display: flex; align-items: flex-end;
  padding-bottom: 80rem;
  background: var(--siyah);
  color: var(--beyaz);
  overflow: hidden;
}
.kahraman__gorsel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ÖLÇÜLDÜ: referansın ilk ekranı ortalama 138 parlaklık; bizimki
     .55 opaklıkla 48'de kalıyordu — aynı fotoğraf çok daha karanlık
     görünüyordu. Opaklık ölçüye göre açıldı. */
  opacity: .92;
}
.kahraman__yazi { position: relative; z-index: 2; }
.kahraman__gorsel { will-change: transform; }

/* phv — büyük ifade bölümü.  1513.1 şöyle dağılıyor:
     başlık (175rem, ÜÇ satır)     356.5
     not (16rem, iki satır)         38.4   kenar 70 / 132
     tam genişlik görsel           960     <- yüksekliğin çoğu bu
   Bölüm dolgusu SIFIR; yükseklik içerikten. */
.ifade { padding: 0; margin-top: 176.3rem; }
.ifade__metin h2 { max-width: 1100rem; }   /* ÜÇ satıra kırılsın diye (referansta da üç blokluk bir kütle) */
/* ÖLÇÜLDÜ: not tek blok değil, İKİ sütun — sol 530.5 ve 1033.5,
   her biri 356 geniş, ikişer satır. 15'lik ızgarada 5. ve 9. sütun. */
/* Alt kenar 121 -> 170: baslik uc satirdan iki satira dusunce bolum
   49px kisaldi (1513.2 -> 1464.2) ve sayfa boyu kapisi kaydi. Fark
   olculup buraya eklendi; bolum yine 1513.2. */
.ifade__not   { margin: 26.3rem 0 170rem; }
.ifade__n1 { grid-column: 5 / 8; }
.ifade__n2 { grid-column: 9 / 12; }
.ifade__gorsel {
  width: 100%; height: 960rem;
  object-fit: cover; background: var(--acik);
}
@media (max-width: 767.98px) {
  .ifade { margin-top: 70rem; }
  .ifade__metin h2 { max-width: none; }
  .ifade__not { margin: 40rem 0 60rem; row-gap: 20rem; }
  .ifade__n1, .ifade__n2 { grid-column: 1 / 5; }
  .ifade__gorsel { height: 420rem; }
}

/* aie — künye / başarım tablosu.  797.4 = 220 (üst blok)
   + 160 (kenar) + 417.4 (alt blok). */
.kunye { padding: 0; margin-top: 134rem; }
.kunye__ust {
  display: grid;
  grid-template-columns: 355rem 1fr;
  column-gap: 270rem;      /* 655 - 355 - 30 = 270 */
  min-height: 220rem;
}
.kunye__kimlik { display: flex; flex-direction: column; gap: 20rem; }
.kunye__satir  { display: flex; gap: 20rem; align-items: flex-start; }
.kunye__satir p + p { max-width: 230rem; }
.kunye__etiket { width: 105rem; flex: 0 0 105rem; }
.kunye__alt {
  margin-top: 160rem;
  min-height: 417.4rem;    /* ölçüldü: .zlz 417.4 */
  align-content: start;
}
/* 15 sütunluk ızgarada ölçülen yerler:
   Başarı 1/2 · Ödüller 5/6 · ödül listesi 6/8 ·
   Yayınlar 10/11 · yayın listesi 11/13 */
.kunye__b1 { grid-column: 1 / 2; }
.kunye__b2 { grid-column: 5 / 6; }
.kunye__s1 { grid-column: 6 / 8; }
.kunye__b3 { grid-column: 10 / 11; }
.kunye__s2 { grid-column: 11 / 13; }
.kunye__s1, .kunye__s2 { display: flex; flex-direction: column; gap: 14rem; }
.kunye__oge--uzak { margin-top: 70rem; }   /* ölçüldü: .wlp .hbt.nyl */
@media (max-width: 767.98px) {
  .kunye { margin-top: 60rem; }
  .kunye__ust { grid-template-columns: 1fr; row-gap: 28rem; min-height: 0; }
  .kunye__alt { margin-top: 60rem; min-height: 0; row-gap: 28rem; }
  .kunye__b1, .kunye__b2, .kunye__b3 { grid-column: 1 / 5; }
  .kunye__s1, .kunye__s2 { grid-column: 1 / 5; }
}

/* lmr — hizmet + ofis bölümü.  1205.4 = 424.8 (118rem DÖRT satır)
   + 120 (boşluk) + 660.6 (ofis listesi). Bölüm dolgusu sıfır. */
.hizmet { padding: 0; margin-top: 160rem; }
.hizmet__baslik { min-height: 424.8rem; margin-bottom: 120rem; }
.hizmet__etiket { grid-column: 5 / 6; }
.hizmet__ofis   { grid-column: 6 / 13; min-height: 660.6rem;
                  display: flex; flex-direction: column; gap: 60rem; }
.hizmet__oge p + p { margin-top: 4rem; }
@media (max-width: 767.98px) {
  .hizmet { margin-top: 70rem; }
  .hizmet__baslik { min-height: 0; margin-bottom: 40rem; }
  .hizmet__etiket, .hizmet__ofis { grid-column: 1 / 5; }
  .hizmet__ofis { min-height: 0; margin-top: 24rem; gap: 36rem; }
}

.aralik-16 { margin-top: 16rem; }
.aralik-24 { margin-top: 24rem; }
.aralik-40 { margin-top: 40rem; }
.aralik-80 { margin-top: 80rem; }

/* ---------- 9) SÜREÇ (pvg) ----------
   ÖLÇÜLDÜ: 4596.4 iki bloktan geliyor.
     blok 1  2686.4 : başlık 168 · görsel 1100 (üstten 80) ·
                      118rem üç satır 377.6 · ızgara 764.9 (kenar-üst 97)
     blok 2  1700   : kenar-üst 210 · başlık 168 · görsel 1100 · ızgara 352
   Başlık ortada ve SABİT 450 geniş (kenar 0 705). */
.surec { padding: 0; margin-top: 180rem; }
.surec__blok { position: relative; }
.surec__blok--iki { margin-top: 210rem; min-height: 1700rem; }
/* ÖLÇÜLDÜ: ortalanmış başlığın ÜSTÜNDE iki sütunlu küçük not var
   (referans karesi). 15'lik ızgarada 5. ve 9. sütun. */
/* AKIŞA GİRMEZ: notu normal akışta koyunca sayfa 204px uzadı ve
   bölüm haritası bozuldu (4596.4 -> 4801.2). Referansta da yükseklik
   eklemiyor; bloğun üstünde duruyor. */
.surec__ustnot { position: absolute; top: -104rem; left: 0; right: 0; }
.surec__un1 { grid-column: 5 / 8; }
.surec__un2 { grid-column: 9 / 12; }
.surec__ustnot p + p { margin-top: 4rem; }
.surec__ad { width: 450rem; margin: 0 705rem; min-height: 168rem; }
.surec__gorsel {
  width: 100%; height: 1100rem; object-fit: cover;
  margin-top: 80rem; background: var(--acik);
}
.surec__ifade { margin-top: 128.5rem; min-height: 377.6rem; }
.surec__izgara { margin-top: 67.5rem; }
.surec__e1 { grid-column: 1 / 5; }
.surec__m1 { grid-column: 5 / 12; }
.surec__m2 { grid-column: 12 / 16; display: flex; flex-direction: column; gap: 60rem; }
.surec__blok .surec__izgara { min-height: 764.9rem; align-content: start; }
.surec__blok--iki .surec__izgara { min-height: 352rem; margin-top: 0; }
.surec__adim p + p { margin-top: 8rem; }
@media (max-width: 767.98px) {
  .surec { margin-top: 80rem; }
  .surec__ad { width: 100%; margin: 0; min-height: 0; }
  .surec__gorsel { height: 380rem; margin-top: 40rem; }
  .surec__ifade { margin-top: 40rem; min-height: 0; }
  .surec__blok--iki { margin-top: 80rem; min-height: 0; }
  .surec__izgara, .surec__blok .surec__izgara,
  .surec__blok--iki .surec__izgara { min-height: 0; margin-top: 40rem; }
  .surec__e1, .surec__m1, .surec__m2 { grid-column: 1 / 5; }
  .surec__m1, .surec__m2 { margin-top: 24rem; }
  .surec__m2 { gap: 36rem; }
}

/* ---------- 10) PROJELER (lxo) — DAĞINIK IZGARA ----------
   ÖLÇÜLDÜ: kartlar düzenli bir ızgarada değil; her biri kendi
   (sol, üst) konumunda duruyor ve üst üste binen boşluklar
   ritmi kırıyor. Referansın sol/üst değerleri --x / --y olarak
   HTML'de, tasarım pikseli cinsinden veriliyor.
     başlık 176.8 · ızgara kenar-üst 65, yükseklik 4158.9
     "Tümünü gör" kenar-üst 140 · bölüm alt dolgusu 120
   Toplam 176.8 + 65 + 4158.9 + 140 + 19.2 + 120 = 4679.9 -> 4659.9
   (bağ, ızgaranın son 20'sine biniyor; kenar 140'tan ölçüldü) */
.projeler { padding: 0 0 120rem; margin-top: 280rem; }
.projeler__baslik { max-width: 500rem; min-height: 156.8rem; }
.projeler__alan {
  position: relative;
  margin-top: 65rem;        /* ölçüldü: kenar 65px 0 0 */
  height: 4158.9rem;
}
.pkart {
  position: absolute;
  left: var(--x); top: var(--y);
  display: block;
}
.pkart--a { width: 857rem; }
.pkart--b { width: 481rem; }
.pkart--c { width: 732rem; }
/* Üzerine gelince görsel hafifçe büyüyor — referansın kart
   davranışı. Kutu değişmiyor (overflow gizli), sadece görsel. */
.pkart { overflow: hidden; }
.pkart img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.pkart:hover img { transform: scale(1.045); }
.pkart img {
  width: 100%; height: 100%;
  object-fit: cover; background: var(--acik);
}
.pkart--a img { height: 577rem; }
.pkart--b img { height: 737rem; }
.pkart--c img { height: 577rem; }
.pkart__ad { display: block; margin-top: 16rem; }
.pkart__m2 { display: block; margin-top: 6rem; }

.projeler__tumu { display: inline-block; margin-top: 140rem; }

/* Alt çizgi: referansın .link davranışı — üstüne gelince soldan
   siliniyor, sağdan geri geliyor. */
.link { position: relative; }
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4rem;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: right center;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.link:hover::after { transform: scaleX(0); }

@media (max-width: 767.98px) {
  /* Telefonda dağınık yerleşim işe yaramaz: tek sütuna iniyor.
     Mutlak konum kapatılıyor, --x/--y yok sayılıyor. */
  .projeler { padding: 0 0 60rem; margin-top: 80rem; }
  .projeler__baslik { min-height: 0; }
  .projeler__alan { height: auto; margin-top: 32rem;
                    display: flex; flex-direction: column; gap: 40rem; }
  .pkart { position: static; width: 100%; }
  .pkart--a img, .pkart--b img, .pkart--c img { height: 300rem; }
  .projeler__tumu { margin-top: 48rem; min-height: 44px; }
}

/* ---------- 11) KADRAN (nmc) — YAPIŞKAN, İKİ EKRAN ----------
   ÖLÇÜLDÜ, referansın kendi kurallarından:
     .xhv{position:sticky;top:0;height:100vh}
     .eta{left:50%;top:50%;transform:translate(-50%,-50%);width:600rem;
          text-align:center;line-height:.875}   <- başlık TAM ORTADA
     .ctw{width:80vh;height:80vh;left:50%;top:50%;translate(-50%,-50%);
          pointer-events:none}                  <- 1080'de 864×864
     .lhr{font-size:12rem}                      <- numaralar KÜÇÜK
   Referansta ÇEMBER ÇİZGİSİ YOK: görünen tek şey dairesel dizilmiş
   sekiz küçük numara. Ben iki adet stroke'lu halka çizmiştim ve
   başlığı sola 900px genişlikte koymuştum -> ekran boş bir kasnak
   gibi duruyordu, yazı da halkanın üstüne biniyordu. */
.kadran { height: 2160rem; }
/* Zemin beyazdan siyaha dönüyor (ölçüldü: referansın ikinci kadran
   ekranı ortalama 5 parlaklık = tam siyah; bizimki 136 idi).
   Devri betik.js kaydırmaya bağlı yapıyor. */
.kadran__yapiskan {
  background: var(--beyaz); color: var(--siyah);
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}
.kadran__yazi {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 600rem; text-align: center;
  line-height: .875;          /* ölçüldü: .eta */
  z-index: 2;
}
.kadran__yazi--iki { opacity: 0; }
/* DİKKAT: buraya transform YAZILMAZ. Çarkı GSAP döndürüyor; GSAP
   elemanın transform'unu tamamen kendi matrisiyle değiştirir ve
   translate(-50%,-50%) ile ortalarsak o ortalama SİLİNİR (çark
   ekranın sağ altına kayar). Ortalama bu yüzden kenar boşluğuyla
   yapılıyor -- transform GSAP'a ait. */
/* Zemini backgroundColor ile boyamak pahali: 100vh kutunun her karede
   yeniden boyanmasi demek, olcumde en kotu kare 11 -> 61 ms'ye cikti ve
   bir takilma dogdu. Onun yerine SIYAH PERDE'nin opakligi degisiyor --
   opaklik bestecide (compositor) calisir, boyama yok. */
.kadran__perde {
  position: absolute; inset: 0;
  background: var(--siyah);
  opacity: 0; z-index: 0;
  pointer-events: none;
}
.kadran__cark {
  position: absolute; left: 50%; top: 50%;
  margin-left: -40vh; margin-top: -40vh;
  width: 80vh; height: 80vh;
  pointer-events: none;
  z-index: 1;
}
/* Her numara önce merkeze oturuyor, sonra kendi açısında yarıçap
   kadar dışarı itiliyor (40vh = halkanın yarısı). */
/* Her numara merkeze ince bir çizgiyle bağlı — referansta kadranı
   "mekanizma" yapan şey bu. Çizgi numaranın ALTINDAN başlıyor; span
   zaten döndürülmüş olduğu için "aşağı" = merkeze doğru. */
.kadran__cark span::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: calc(40vh - 90rem);
  background: currentColor; opacity: .28;
  transform: translateX(-50%);
}
.kadran__cark span {
  position: absolute; left: 50%; top: 50%;
  font-size: 12rem; letter-spacing: -.02em;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-40vh);
}
@media (max-width: 767.98px) {
  /* ⭐ OLCULDU (arac/cark-olc.cjs 375 812): burada IKI kusur vardi.
     1) Yapiskan blok 450rem = ekranin YARISI. Telefonda kadranin
        altindaki 362px'te bir sonraki bolum sizip duruyordu
        (elementFromPoint 600/780: .bolum, sonra .ln-mask).
     2) Bolum 900rem, ekran 812 -> kadranin donme yolu 900-812 = 88px.
        360 derecelik donus ve beyazdan siyaha gecis SEKSEN SEKIZ
        pikselde bitiyordu; tek parmak hareketi 300-800px oldugu icin
        animasyon "hic calismamis" gibi gorunuyordu. Olcum: p degeri
        10401'de 1'e vurup takili kaliyordu.
     Referansin orani 2160/1080 = IKI EKRAN (yol = bir ekran). Masaustu
     zaten oyle; telefon da artik oyle: yapiskan 100vh (masaustuyle ayni,
     ozel kural kaldirildi), bolum 200vh. Boylece betikteki
     -r.top/(r.height-innerHeight) hesabi da kendiliginden dogru olur. */
  .kadran { height: 200vh; }
  .kadran__yazi { width: 300rem; }
  .kadran__cark { width: 380rem; height: 380rem;
                  margin-left: -190rem; margin-top: -190rem; }
  /* Cizgiler merkeze kadar gidiyordu -- OLCULDU: boy 234.8, yaricap 190,
     yani merkezi 45px ASIYORLARDI (ortada dagilmis bir yildiz lekesi).
     Masaustunde ayni cizgi merkezden 90px once bitiyor (asim -90).
     Telefonda ayni orani kuruyoruz: 190 yaricapin ~%21'i bosluk. */
  .kadran__cark span::before { height: calc(190rem - 40rem); }
  .kadran__cark span {
    /* Referansta 9rem. TEK BILEREK SAPMA: 12px altina inmiyoruz --
       kendi esigimiz. 3px fark dekoratif numarada gorunmez, ama
       "12px alti yazi 0" kaydini bozuyordu. */
    font-size: 12rem;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-190rem);
  }
}

/* ---------- 12) EKİP & SÜREÇ (nwv) ----------
   ÖLÇÜLDÜ, siyah zemin, bölüm 5652.1. İç blokların bölüm üstünden
   uzaklıkları (bunlar AKIŞTAN gelmiyor — bloklar birbirine biniyor,
   yıl başlığı şeridin 43.8px yukarısından başlıyor):
     giriş    256      454.3   (16rem etiket ilk satırın girintisinde)
     yıl     1880.8    405.9   (377px kare şerit + üstünde 175rem başlık)
     not     2248.3     38.4   (iki sütun: sol 564 ve 1000, genişlik 356)
     sayılar 3486.6   1909.5   (sağ sütun, kenar-sol 1003, genişlik 857)
   Masaüstünde bu koordinatlar mutlak konumla birebir veriliyor;
   telefonda (tek kırılım) akışa dönüyor. */
.ekip { background: var(--siyah); color: var(--beyaz); overflow: hidden; }
.ekip__cumle  { text-indent: 125rem; max-width: 1130rem; }
.ekip__etiket { width: 105rem; }
/* ⭐ ŞERİT — referansın yaptığı şey burada.
   DOM'da düz bir sıra var (17 × 377; ölçüldü: .vnj 6409 geniş) ama
   EKRANDA düz durmuyorlar: her kare bir YAY üzerine taşınıp eğiliyor.
   Kanıt: aynı kaydırma noktasında referansın karesinde fotoğraflar bir
   kavis boyunca dizili, bizimki bomboş siyahtı (referans ort 13 /
   sapma 40 — bizde 1 / sapma 11).
   ÖNEMLİ: bu iş TRANSFORM ile yapılıyor, yerleşimle değil — ölçülen
   kutu yükseklikleri (.uwg 405.9, .vrc 297.5) hiç değişmiyor, bölüm
   haritası birebir kalıyor, sadece görüntü doğru oluyor. */
/* ⭐ ŞERİT BİR HALKA. Referansın karesinde 17 fotoğraf "2011 Kuruluş
   Yılı" başlığının ETRAFINDA dönen bir çember kuruyor; her kare
   teğete göre eğik. Önce sinüs yayı yapmıştım — halkanın sadece bir
   parçasıydı, ölçüm yakaladı (ref 24/51.1, bizde 45/66.8).
   Merkez margin ile veriliyor, transform GSAP'a ait (halkayı o
   döndürüyor); kutu ölçüleri değişmiyor. */
.ekip__serit { display: block; overflow: visible; }
.ekip__serit img {
  position: absolute; left: 0; top: 0;
  /* ⭐ max-width: none ŞART — HALKANIN GÖRÜNMEME SEBEBİ BUYDU.
     Sıfırlamada `img { max-width: 100% }` var. Bu yüzdelik, ebeveynin
     genişliğine göre çözülüyor; .ekip__serit ise bilerek `width: 0`
     (halkanın merkezi bir NOKTA). Yani max-width: 0 oluyor ve her
     fotoğrafın hesaplanan genişliği 0px'e düşüyor.
     NASIL GÖZDEN KAÇTI: getBoundingClientRect sıfır DÖNDÜRMÜYOR —
     0x575'lik kutu ±7° döndürülünce 314x482'lik bir sınır kutusu
     veriyor. DOM'a "görünür müsün" diye sorulunca "17/17 görünür"
     diyordu; ekrana bakılınca renkli piksel %0'dı (referans %13.9).
     Ders: görünürlüğü kutudan değil KAREDEN sor.
     Ölçüm: arac/halka-olc.cjs (doygunluk maskesi). */
  max-width: none;
  /* Boy referans karesinden ölçüldü: fotoğraflar kare genişliğinin
     ~1/8'i (1920'de ~240px), oran 660x470 kırpımıyla aynı (1.40). */
  width: 240rem; height: 170rem; margin: -85rem 0 0 -120rem;
  /* Kirpimlar tam 660x470 uretildi -> object-fit gereksiz; olcek de
     kaldirildi. Az donusum = bassiz Chrome'un rasterleyebildigi katman. */
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1))
             rotate(calc(var(--a) * -1 + var(--t)));
}
.ekip__ad { opacity: .8; text-indent: 130rem; margin-top: 30rem; }

@media (min-width: 767.99px) {
  .ekip { height: 5652.1rem; }
  .ekip__giris   { position: absolute; top: 256rem;    left: 0; right: 0; }
  .ekip__etiket  { position: absolute; top: 6rem; left: 30rem; }
  .ekip__yil     { position: absolute; top: 1880.8rem; left: 0; right: 0;
                   height: 405.9rem; }
  /* Halkanın merkezi: yıl başlığının ortası (ölçüldü 2028.8 —
     bölüm başından 148 aşağıda). */
  /* ÖLÇÜLDÜ (referansın üç karesinden): fotoğraf bandı bölüm başından
     ~800 ile ~3600 arasını kaplıyor -> merkez 2200, yarıçap 1400.
     Önce 2029/950 yazmıştım; halka ekranın çok altında kalıyordu ve
     bölümün üst yarısı bomboş siyahtı (ref 34/58 — bizde 0/1.6). */
  /* ÖLÇÜLDÜ (gerçek tarayıcı): merkez 2200 / R 1050 iken fotoğraflar
     bölümün üst yarısında ekranın EN ALTINDA kalıyordu (810 yükseklikte
     ilk kare y=684). Referansın iki karesi birden bandın ~600 ile ~3000
     arasını kapladığını söylüyor -> merkez 1800, yarıçap 1200. */
  /* ⭐ YARIÇAP ÖLÇÜLEREK KÜÇÜLTÜLDÜ: 1150 -> 700.
     SORUN: halka ekranda HİÇ görünmüyordu. Karedeki renkli piksel
     oranı ölçüldü (arac/halka-olc.cjs, doygunluk maskesi):
       referans @17710  %16.5   bizde  %0
       referans @18770  % 9.5   bizde  %0
     DOM ise "17/17 görünür" diyordu — çelişki buradaydı: kutular
     vardı ama ekranda değillerdi.
     SEBEBİ geometri: R=1150 ile çemberin çapı 2726px, ekran 1904px.
     Çember ekranın görünür yatay bandını ancak x=952±1150'de, yani
     -198 ve 2102'de kesiyor — ikisi de ekran dışı. Görünür kalan tek
     yer tepe yayının ince bir dilimiydi.
     R=700 ile çember ekranın içine giriyor ve referansın renkli
     ağırlık merkezleriyle örtüşüyor (ref: (1115,561) ve (1036,581)). */
  /* Merkezin YÜKSEKLİĞİ de kareden ölçüldü. max-width düzeldikten
     sonra halka çizilmeye başladı ve renkli kaplama referansı tuttu
     (%8.8 / ref %9.5) ama ağırlık merkezi 225px yukarıdaydı:
       ref-17 merkez y=591   bizde y=366
     Merkez o kadar aşağı alındı: -81 + 225 = 144. */
  .ekip__serit   { position: absolute; top: 144rem; left: 50%;
                   width: 0; height: 0; --R: 700rem; }
  .ekip__yilbasligi { position: absolute; top: -43.8rem; left: 465rem;
                      width: 990rem; text-align: center; }
  .ekip__not     { position: absolute; top: 2248.3rem; left: 564rem;
                   display: flex; gap: 80rem; padding: 0; }
  .ekip__n1, .ekip__n2 { width: 356rem; }
  .ekip__sayilar { position: absolute; top: 3486.6rem; left: 0; right: 0; }
  .ekip__sutun   { margin-left: 1003rem; width: 857rem; }
  /* ölçüldü: 122.5 (sayı) + 30 + 212.4 (etiket) + 150 = 514.9 */
  .ekip__sayi       { padding-bottom: 150rem; }
  .ekip__sayi--son  { padding-bottom: 0; }
}
@media (max-width: 767.98px) {
  .ekip { padding: 70rem 0; }
  .ekip__cumle { text-indent: 0; max-width: none; margin-top: 24rem; }
  .ekip__etiket { width: auto; }
  .ekip__yil { margin-top: 60rem; }
  /* Telefonda da aynı iki hata vardı: genişliği 0 olan kutuya konan
     overflow:hidden bütün halkayı kırpıyordu, max-width ise
     fotoğrafları 0 genişliğe düşürüyordu. Kırpmayı zaten .ekip
     yapıyor (onda overflow:hidden var), burada gereksiz. */
  .ekip__serit { --R: 150rem; }
  .ekip__serit img { max-width: none;
                     width: 120rem; height: 85rem; margin: -42.5rem 0 0 -60rem; }
  .ekip__yilbasligi { margin-top: 40rem; }
  .ekip__not { margin-top: 60rem; row-gap: 24rem; }
  .ekip__n1, .ekip__n2 { grid-column: 1 / 5; }
  .ekip__sayilar { margin-top: 60rem; }
  .ekip__sayi { margin-top: 40rem; }
  .ekip__ad { text-indent: 40rem; margin-top: 16rem; }
}

/* ---------- 13) KAPANIŞ (uod) ----------
   ÖLÇÜLDÜ: siyah, dolgu 90 / 256, ortada 175rem başlık ALTI satır.
   Satır yüksekliği .8166666667 -> 6 × 142.9 = 857.4.
   90 + 857.4 + 256 = 1203.4.
   Arkasında 170px çaplı yuvarlaklardan halka (referansta ortak
   markalar; bizde proje kareleri). */
.kapanis { background: var(--siyah); color: var(--beyaz);
           padding: 90rem 0 256rem; overflow: hidden; }
.kapanis__yazi {
  max-width: 1107rem; margin: 0 auto; text-align: center;
  line-height: .8166666667; position: relative; z-index: 2;
}
.kapanis__halka { position: absolute; inset: 0; z-index: 1; }
/* ÖLÇÜLDÜ: referansta ~15 açık gri yuvarlak, FARKLI boylarda ve
   yazının üstüne binmiş durumda. Her biri kendi açısında (--a),
   kendi yarıçapında (--r) ve kendi boyunda (--b). */
.kapanis__yuvarlak {
  position: absolute; left: 50%; top: 50%;
  width: var(--b); height: var(--b);
  margin-left: calc(var(--b) / -2); margin-top: calc(var(--b) / -2);
  border-radius: 50%;
  background: #d9d9d9; color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--baslik-font);
  font-size: calc(var(--b) * .2); letter-spacing: -.02em;
  box-shadow: 0 0 1.5vw #0006;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))
             translateY(var(--s, 0));
  will-change: transform, opacity;
}
@media (max-width: 767.98px) {
  .kapanis { padding: 100rem 15rem; }
  .kapanis__yazi { max-width: none; }
  .kapanis__halka { display: none; }
}

/* ---------- 14) ALT BİLGİ ----------
   ÖLÇÜLDÜ: siyah, dolgu 160 / 12, toplam 1221.5.
     üst şerit    154.3   (beş sütun, 15'lik ızgarada 1 · 4 · 8 · 11 · 14)
     kelime-logo  556     (kenar-üst 300)
     dip satırı   19.2    (kenar-üst 20)
   160 + 154.3 + 300 + 556 + 20 + 19.2 + 12 = 1221.5 */
.altbilgi { padding: 160rem 0 12rem; }
.altbilgi--siyah { background: var(--siyah); color: var(--beyaz); }
.altbilgi__ust { min-height: 154.3rem; align-content: start; }
.altbilgi__marka { grid-column: 1 / 4; }
.altbilgi__b1 { grid-column: 4 / 5; }
.altbilgi__l1 { grid-column: 5 / 8; }
.altbilgi__b2 { grid-column: 8 / 9; }
.altbilgi__l2 { grid-column: 9 / 11; }
.altbilgi__b3 { grid-column: 11 / 12; }
.altbilgi__l3 { grid-column: 12 / 14; }
.altbilgi__b4 { grid-column: 14 / 15; }
.altbilgi__l4 { grid-column: 15 / 16; }
.altbilgi__ust ul { list-style: none; display: flex; flex-direction: column; gap: 8rem; }
.altbilgi__logo { margin-top: 300rem; height: 556rem; }
.altbilgi__logo svg { width: 100%; height: 100%; display: block; }
.altbilgi__dip { margin-top: 20rem; }
.altbilgi__d1 { grid-column: 1 / 4; }
.altbilgi__d2 { grid-column: 4 / 8; }
.altbilgi__d3 { grid-column: 8 / 11; }
.altbilgi__d4 { grid-column: 11 / 14; }
.altbilgi__d5 { grid-column: 14 / 16; }
@media (max-width: 767.98px) {
  .altbilgi { padding: 70rem 0 24rem; }
  .altbilgi__ust { min-height: 0; row-gap: 28rem; }
  .altbilgi__marka, .altbilgi__b1, .altbilgi__l1, .altbilgi__b2,
  .altbilgi__l2, .altbilgi__b3, .altbilgi__l3, .altbilgi__b4,
  .altbilgi__l4 { grid-column: 1 / 5; }
  .altbilgi__logo { margin-top: 70rem; height: 140rem; }
  .altbilgi__dip { margin-top: 40rem; row-gap: 12rem; }
  .altbilgi__d1, .altbilgi__d2, .altbilgi__d3,
  .altbilgi__d4, .altbilgi__d5 { grid-column: 1 / 5; }
  /* Dokunma hedefi 44px: dip satırındaki tek bağ da dahil —
     ölçümde o bir tane gözden kaçmıştı (1 kaldı, 0 oldu). */
  .altbilgi__ust ul a, .altbilgi__l3 a, .altbilgi__dip a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* ---------- 15) WEBGL KATMANI ----------
   ÖLÇÜLDÜ (referans): tek tuval, .wglw sarmalı içinde, tam ekran.
   Konum fixed: sayfa kayarken tuval yerinde duruyor, düzlemler
   tuvalin İÇİNDE hareket ediyor. Böylece tuvali her karede yeniden
   boyutlandırmak gerekmiyor.

   pointer-events yok: tıklama/seçim altındaki gerçek DOM'a gidiyor —
   bağlantılar ve metin seçimi çalışmaya devam ediyor. */
.wglw {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.wgl-c { width: 100%; height: 100%; display: block; }

/* WebGL devredeyken görselin DOM kopyası gizlenir (wgl.js yapar).
   Ama YÜKLENEMEZSE gizlenmez — sayfa görselsiz kalmasın. */
[data-wgl] { transition: opacity .2s; }

/* Metin tuvalin ÜSTÜNDE kalsın.
   DİKKAT: üst çubuk buraya KONMAZ. Konunca position:relative,
   yukarıdaki position:fixed'i eziyordu (ikisi de tek sınıf, sonra
   yazılan kazanır); çubuk akışta 97px yer kaplayıp bütün sayfayı
   97px aşağı itiyordu. Gözle görünmüyordu, ölçüm yakaladı:
   klon 25116.6 / referans 25019.6. Çubuğun kendi z-index'i 50. */
main, .altbilgi { position: relative; z-index: 2; }

/* ============================================================
   15) PROJE DETAY SAYFASI
   Alan yapısı referanstan okundu (work/<slug>/_payload.json):
   title · title_second · location · area · services · hero · slices.
   Ölçüler ana sayfanın sistemiyle aynı; yeni ölçü icat edilmiyor.
   ============================================================ */
.is-kahraman { padding: 180rem 0 0; }
.is-geri { margin-bottom: 40rem; }
.is-baslik { max-width: 1400rem; }
.is-alt { margin-top: 24rem; }
.is-kapak { width: 100%; height: 900rem; object-fit: cover; margin-top: 90rem; background: var(--acik); }

.is-kunye { padding: 120rem 0 0; }
.is-kunye__izgara {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40rem;
  padding-bottom: 60rem; border-bottom: 1px solid var(--acik);
}
.is-giris { margin-top: 80rem; max-width: 1200rem; }

/* Galeri: iki görsel + aralarında künye sütunu. Referansın dağınık
   ritmini koruyor — iki görsel aynı hizada değil. */
.is-galeri {
  padding: 140rem 0;
  display: grid; grid-template-columns: 857rem 1fr 481rem; gap: 60rem;
  align-items: start;
}
.is-galeri__a { width: 100%; height: 577rem; object-fit: cover; background: var(--acik); }
.is-galeri__b { width: 100%; height: 737rem; object-fit: cover; background: var(--acik); margin-top: 160rem; }
.is-galeri__yazi { padding-top: 40rem; }

.is-metin { padding: 0 0 180rem; }
.is-metin p { max-width: 1200rem; }

.is-sonraki { padding: 120rem 0 200rem; border-top: 1px solid var(--acik); }
.is-sonraki__bag { display: block; margin-top: 24rem; }

@media (max-width: 767.98px) {
  .is-kahraman { padding: 80rem 0 0; }
  .is-geri { margin-bottom: 24rem; }
  .is-geri a { min-height: 44px; display: inline-flex; align-items: center; }
  .is-kapak { height: 380rem; margin-top: 40rem; }
  .is-kunye { padding: 60rem 0 0; }
  .is-kunye__izgara { grid-template-columns: 1fr 1fr; gap: 28rem; padding-bottom: 36rem; }
  .is-giris { margin-top: 40rem; }
  .is-galeri { padding: 70rem 0; grid-template-columns: 1fr; gap: 32rem; }
  .is-galeri__a { height: 300rem; }
  .is-galeri__b { height: 380rem; margin-top: 0; }
  .is-galeri__yazi { padding-top: 0; }
  .is-metin { padding: 0 0 80rem; }
  .is-sonraki { padding: 60rem 0 90rem; }
  .is-sonraki__bag { min-height: 44px; }
}

/* ============================================================
   16) İŞLER LİSTESİ
   Ana sayfadaki dağınık ızgaranın aksine burası düzenli: arşiv
   sayfasının işi taramak, etkilemek değil.
   ============================================================ */
.liste-ust { padding: 180rem 0 100rem; }
.liste { padding: 0 0 180rem; }
.liste__izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80rem 40rem; }
.liste-kart img { width: 100%; height: 577rem; object-fit: cover; background: var(--acik); }
.liste-kart__ad { display: block; margin-top: 24rem; }
.liste-kart__bilgi { display: block; margin-top: 8rem; }

@media (max-width: 767.98px) {
  .liste-ust { padding: 80rem 0 48rem; }
  .liste { padding: 0 0 80rem; }
  .liste__izgara { grid-template-columns: 1fr; gap: 48rem; }
  .liste-kart img { height: 300rem; }
}

/* ============================================================
   17) DÜZ İÇERİK SAYFASI (büro / iletişim / yasal)
   ============================================================ */
.duz { padding: 180rem 0 200rem; }
.duz__baslik { max-width: 1400rem; }
.duz__govde { margin-top: 100rem; display: grid; grid-template-columns: 1fr 1fr; gap: 80rem; }
.duz__govde p + p { margin-top: 24rem; }
.duz__satir {
  display: grid; grid-template-columns: 240rem 1fr; gap: 24rem;
  padding: 20rem 0; border-bottom: 1px solid var(--acik);
}
@media (max-width: 767.98px) {
  .duz { padding: 80rem 0 90rem; }
  .duz__govde { margin-top: 48rem; grid-template-columns: 1fr; gap: 40rem; }
  .duz__satir { grid-template-columns: 1fr; gap: 6rem; padding: 16rem 0; }
  /* İletişim sayfasındaki e-posta ve telefon bağları 29px ölçüldü;
     sayfanın en çok basılan iki hedefi. */
  .duz__govde a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   18) SAYFA GEÇİŞİ
   Referansta sayfalar arası geçiş var. Perde: yeni sayfa gelene
   kadar ekranı kapatıyor, gelince açılıyor. JS kapalıysa perde hiç
   görünmez (aşağıdaki .acik sınıfı olmadan görünmez).
   ============================================================ */
.perde {
  position: fixed; inset: 0; z-index: 90;
  background: var(--siyah);
  transform: translateY(100%);
  pointer-events: none;
}
.perde.acik { pointer-events: auto; }

/* ============================================================
   19) HIZ — WebGL yokken açılma + katman disiplini
   (2026-09-15 optimizasyon turu; hepsi ölçülerek kondu)
   ============================================================ */

/* WebGL yüklenmeyen cihazda (bkz. varliklar/js/yukle.js) görseller
   yine açılarak gelsin. SADECE opacity + transform: ikisi de
   besteci katmanında çalışır, yerleşim ve boyama tetiklenmez.
   Açılma bir kez olur, sonra will-change kaldırılır. */
html.wgl-yedek [data-wgl] {
  opacity: 0;
  transform: translateY(24px) scale(1.02);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
html.wgl-yedek [data-wgl].wgl-acik {
  opacity: 1;
  transform: none;
  will-change: auto;      /* açıldı: katmanı GPU belleğinde tutma */
}
/* TELEFONDA ÖLÇEK YOK (2026-09-28). Yedek yol telefonda HER ZAMAN açık
   (yukle.js: dar + kaba işaretçi) ve görseller tam genişlik; açılmadan
   önceki scale(1.02) 375 px'lik ekranda 383 px ediyordu -> sayfa 379 px'e
   genişliyor, tarayıcı görünümü uzaklaştırıp yana kaydırılabilir yapıyordu
   (portfolyo denetimi, mimarlik/ ifade__gorsel + surec__gorsel). */
@media (max-width: 900px) {
  html.wgl-yedek [data-wgl]:not(.wgl-acik) { transform: translateY(24px); }
}
/* Hareket azaltılmışsa geçiş yok, görsel doğrudan yerinde. */
@media (prefers-reduced-motion: reduce) {
  html.wgl-yedek [data-wgl] { opacity: 1; transform: none; transition: none; }
}

/* ÜST ÇUBUK — mix-blend-mode: difference pahalı (her karede
   arkasındaki sayfayla harmanlanıyor) ama SİTENİN KENDİSİ: zemin
   siyaha dönünce yazı okunur kalsın diye var. Kaldırılmıyor.
   `will-change`/`translateZ` ile katmana zorlamak DENENMEDİ bilerek:
   harmanlı öğede katman zorlaması arkadaki yüzeyi ayrıca
   rasterletebiliyor, yani ölçmeden konursa yavaşlatabilir.
   Ölçüm (akicilik.cjs) burayı darboğaz göstermediği sürece elleme. */

/* ⚠ .ekip__serit'e contain KONMAZ. Halkanın 17 fotoğrafı kutusunun
   ÇOK dışına taşıyor (merkez margin -290rem, yarıçap 1200rem) ve CSS
   bunu bilerek `overflow: visible` ile bırakıyor. contain:paint
   taşanı kırpar — halka bir dilime düşer. Ölçüm değil kural: taşması
   tasarımın kendisi olan kutuya boyama kısıtı konmaz.

   .ekip'e konabilir: onun zaten `overflow: hidden`'ı var, yani
   kırpma sınırı hâlihazırda orada. Tarayıcıya "bu bölümün boyaması
   dışarı sızmaz" demek görüntüyü değiştirmiyor, sadece ekran dışında
   kalan 25020px'lik sayfanın yeniden boyanma alanını daraltıyor. */
.ekip { contain: paint; }

/* ---------- SÜREÇ: eksik metin kütlesi (2026-09-15) ----------
   Ölçüldü (arac/karsilastir.cjs satır 06, y=6922): referansın o
   ekranında sapma 40.2, bizde 15.6 — yani bizim ekran neredeyse boş
   beyazdı. Referansta orada uzun bir gövde paragrafı ve sol sütunda
   bir yayın listesi var. İkisi de eklendi.
   YÜKSEKLİK RİSKİ YOK: .surec__blok .surec__izgara zaten
   min-height:764.9rem ile referansın ölçüsüne sabitli; eklenen içerik
   o payın içinde kalıyor, sayfa boyu değişmiyor (kapıda 0px). */
/* Liste referansta sütunun ALTINDA duruyor (ref-06 karesi), bizde
   tepeye yapışmıştı. 765rem'lik ayrılmış kutunun alt yarısına
   indiriliyor. */
.surec__liste { margin-top: 380rem; }
.surec__liste__b { margin-bottom: 20rem; }
.surec__oge + .surec__oge { margin-top: 14rem; }
/* Referansın gövde paragrafı bizimkinden belirgin büyük ve sütunu
   dolduruyor; y-16 ile yazınca ekranın sapması 18.4'te kalıyordu
   (referans 34.9) — yani mürekkep yetmiyordu. Boy kareden ölçüldü. */
.surec__govde { max-width: none; margin-top: 40rem;
                font-size: 26rem; line-height: 1.36; letter-spacing: -.02em; }
.surec__govde + .surec__govde { margin-top: 20rem; }
@media (max-width: 767.98px) {
  .surec__liste { margin-top: 32rem; }
  .surec__govde { max-width: none; margin-top: 24rem; }
}

/* ============================================================
   20) AÇILMA BİTİNCE KIRPMA KALKAR  (2026-09-15)

   SORUN (ölçüldü, arac/kesik-yazi.cjs): büyük puntolarda harfin
   MÜREKKEBİ satır kutusundan taşıyor ve .ln-mask'ın overflow:hidden'ı
   onu kesiyordu. Masaüstünde 34, telefonda 29 satır kesikti:
     y-175 (satır yüksekliği .7)  "Ölçülü Açıklık"  üstte 32.3 altta 28.3
     y-118 (.9)                   iş sayfası başlıkları  altta 13.4
     y-80  (.8)                   kahraman başlığı  üstte 11.5
   Sebebi tasarımın kendisi: referansın satır yükseklikleri 1'in
   ALTINDA (ölçülerek alındı, değiştirilemez — bölüm yükseklikleri
   onlara bağlı).

   NEDEN DOLGU/KENAR İLE ÇÖZÜLMEDİ: maskeye nefes payı verip negatif
   kenarla geri çekmek denenebilirdi ama (a) komşu maskelerin negatif
   kenarları ÇÖKÜŞÜR (toplanmaz), yani sayfa boyu bozulur; (b) maske
   büyüyünce açılma öncesi translateY(101%) satırı tam gizleyemez,
   yazı alttan sızar.

   ÇÖZÜM: kırpma SADECE açılma sürerken gerekli. Bitince kalkıyor.
   Sınıfı GSAP'in onComplete'i koyuyor (betik.js). Yükseklik hiç
   değişmiyor — overflow yerleşimi etkilemez. */
/* ⚠ display: flow-root ŞART, yoksa YERLEŞİM DEĞİŞİR.
   overflow:hidden maskeyi bir blok biçimlendirme bağlamı (BFC) yapar
   ve .ln'in yarım em negatif alt kenarının dışarı SIZMASINI engeller.
   Sadece overflow:visible yazınca BFC kalkıyor, kenar çöküşüyor ve
   bölümler kısalıyor — ÖLÇÜLDÜ: süreç 4596.5 -> 4556.5, projeler
   4659.9 -> 4631.1, sayfa boyu 25020 -> 24951 (kapı kırmızıya döndü).
   flow-root BFC'yi kırpma olmadan geri veriyor: yükseklik birebir
   aynı kalıyor, mürekkep de kesilmiyor. */
.ln-mask.acildi { overflow: visible; display: flow-root; }

/* Hareket yoksa açılma da yok: kırpacak bir şey kalmıyor. */
html:not(.hareket) .ln-mask { overflow: visible; display: flow-root; }
@media (prefers-reduced-motion: reduce) {
  .ln-mask { overflow: visible; display: flow-root; }
}

/* ---------- İFADE BAŞLIĞI: satırlar birbirine giriyordu ----------
   ÖLÇÜLDÜ (arac/kesik-yazi.cjs, GIRME satırları): 175px puntoda ardışık
   satırların mürekkebi 35.5 ve 36.5 px ÜST ÜSTE biniyordu — "Ölçülü
   Açıklık"ın ç kuyruğu "& Kurgulu"nun K'sinin içinden geçiyordu.
   Sebebi satır yüksekliği .7 (122.5px) ile Türkçe mürekkebin
   (Ö tepesi + ç kuyruğu ≈ 0.97em = 170px) uyuşmaması.

   Kırpma kaldırılmadan önce bu çakışma maskenin içinde saklıydı; yani
   site ya kesiyordu ya da iç içe geçiriyordu. İkisi de kusur.

   REFERANSA BAKILDI: aynı başlık orada İKİ satır ve satır araları
   rahat (ölçülen taban-taban ≈ 153px, yani ~.91). Bizde üç satıra
   kırılsın diye kutu 1100rem'e daraltılmıştı. Referansın kurgusuna
   dönülüyor: kutu genişliyor, satır yüksekliği .91 oluyor.
   Bölüm yüksekliği .ifade__not'un alt kenarıyla dengeleniyor
   (ölçülerek; sayfa boyu kapısı 0px kalmalı). */
.ifade__metin h2 { line-height: .91; max-width: 1500rem; }
@media (max-width: 767.98px) {
  .ifade__metin h2 { line-height: .95; max-width: none; }
}

/* "2019 Kuruluş / Yılı" başlığı: ölçüldü, satırlar 42.5px (%24) iç içe
   geçiyordu — "Kuruluş"un ş kuyruğu "Yılı"nın içinden geçiyor.
   .ekip__yil MUTLAK konumlu, yani yüksekliği sayfa boyunu etkilemiyor;
   satır aralığını rahatlatmak burada bedelsiz. Halka da bu kutunun
   ÜSTÜNDEN (top: 144rem) konumlandığı için yerinden oynamıyor. */
.ekip__yil h2 { line-height: .95; }