/* ══════════════════════════════════════════════════════════════
   İKALA MİMARLIK — tasarım sistemi

   Karakter referansı: yoointerior.com (20 Ağustos 2026'da değişti;
   önceki referans houseofhoney.com idi, yerleşim sistemi ondan kaldı).

   yoointerior.com üstünde getComputedStyle ile ÖLÇÜLEN değerler:
   · zemin #FBFAF9 kırık beyaz · bölüm zemini #F9F9F9 · bloklar saf siyah
   · mürekkep #000, ikincil #1D2434
   · aksan #A63437 şarap kırmızısı — YALNIZCA serif italik kelimelerde
   · büyük cümle: sans AĞIRLIK 300, 77.6px / satır 1.16, aralık −0.08em
   · aksan kelime: Fraunces italic 400, aynı punto, satır 1.0, −0.067em
   · bölüm başlığı: sans 700 VERSAL, 43px / satır 0.81, aralık −0.056em
   · dev ayraç yazısı: sans 700 versal, İÇİ BOŞ (yalnız kontur)

   Fontlar: referansın gövde fontu Maison Neue ticari, kullanılamaz;
   ücretsiz en yakın karşılık Inter (300 Light dahil). Aksan fontu
   Fraunces ise Google Fonts'ta ücretsiz — birebir aynısı alındı.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Palet — ölçülen değerler. Sıcak kil paleti 20 Ağustos'ta bırakıldı:
     iç mimari render'ları kirli beyaz zeminde galeri gibi duruyor,
     renkli zeminde birbirine karışıyordu. */
  --alan:#FBFAF9;          /* ana alan — kırık beyaz */
  --alan-2:#F1EFEC;        /* bölüm değişimi */
  --murekkep:#000;         /* siyah */
  --orta:#5C6068;          /* ikincil metin (referansta #1D2434 / #8A8A8A) */
  --cizgi:#E3E1DE;
  --aksan:#A63437;         /* şarap kırmızısı — ölçüldü */
  --kabuk:#000;            /* kabuk / giriş katmanı / alt bilgi */

  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Fraunces YALNIZCA italik aksan kelimeler için. Gövde veya başlık
     olarak kullanılmıyor — referansta da öyle: sans cümlenin içinde
     iki üç kelime serif italiğe düşüyor, tonu o taşıyor. */
  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;

  /* ── Yerleşim sistemi — houseofhoney.com'dan ölçülmüştü, korundu ──
     Sayfa payı 8px (neredeyse kenardan kenara), 12 kolon, boşluk 16px.
     Bölüm ritmi: içerik 102px, ayraç 264px.
     İşler ızgarası: kolon arası 8px, satır arası 96px. */
  --pay:8px;
  --k-bosluk:16px;
  --bosluk:clamp(48px,7vw,102px);
  --ayrac-bosluk:clamp(90px,17vw,264px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--alan);color:var(--murekkep);
  font:400 18px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.011em;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ⚠ 21 Ağustos'ta bulunan özgüllük hatası:
   burada `padding:0 var(--pay)` yazıyordu. Kısayol dört kenarı da
   yazdığı için ve `.sar` bir SINIF (0,1,0), `section` ise tür seçicisi
   (0,0,1) olduğu için, aşağıdaki bölüm ritmi `<section class="sar">`
   öğelerinde HİÇ uygulanmıyordu — sıra ne olursa olsun sınıf kazanıyor.
   Sonuç: dört bölümün dikey payı sıfırdı, metin bir sonraki bölümün
   zeminine dayanıyordu. Yalnız yatay pay yazılınca ikisi birlikte
   çalışıyor: dikey `section`'dan, yatay buradan. */
.sar{width:100%;padding-left:var(--pay);padding-right:var(--pay)}
section{padding:var(--bosluk) 0}
.koyu-zemin{background:var(--alan-2)}

/* 12 kolonluk ızgara — metin blokları kolon aralığıyla konumlanıyor */
.k12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--k-bosluk)}
/* ⚠ Genişlik `grid-column-end` ile veriliyor, kısayolla değil.
   `grid-column:span 4` başlangıcı da yazıyor; yanına bir `.b8`
   (grid-column-start) geldiğinde uç "auto"ya düşüyor ve kart tek
   kolona iniyordu. Uç ayrı yazılınca ikisi yan yana çalışıyor. */
.s3{grid-column-end:span 3}
.s4{grid-column-end:span 4}
.s5{grid-column-end:span 5}
.s6{grid-column-end:span 6}
.s7{grid-column-end:span 7}
.s8{grid-column-end:span 8}
.s12{grid-column-end:span 12}
.b2{grid-column-start:2}
.b4{grid-column-start:4}
.b7{grid-column-start:7}
.b8{grid-column-start:8}
@media(max-width:860px){
  .k12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s3,.s4,.s5{grid-column-end:span 3}
  .s6,.s7,.s8,.s12{grid-column-end:span 6}
  .b2,.b4,.b7,.b8{grid-column-start:auto}
}
@media(max-width:560px){
  .k12>*{grid-column:auto/span 6!important}
}

/* ══ Bölüm ayracı ══════════════════════════════════════════════
   Bölümler arasındaki nefes: küçük etiket + dev cümle.

   ⚠ 21 Ağustos (altıncı tur): dev KAYAN İÇİ BOŞ yazı KALDIRILDI.
   Başlığın altında aynı cümlenin konturu kayıyordu — cümle ekranda iki
   kez görünüyordu ve Inter 700 versalin konturu düz dikey çizgilerden
   oluştuğu için tel kafes gibi duruyordu. Kullanıcı: "çok amatör".

   Referansın kendi bölüm ayracı (`mod-title--chapter`) ölçüldü:
     · bölüm etiketi: ultralight serif 26.4px / satır 35.2px, "(Contacta)"
     · dev başlık: Juana Regular 400, **192px / satır 168px** (0.875),
       aralık −1.32px, VERSAL, ORTALI — ve **İÇİ DOLU**. Kontur yok,
       kayan yazı yok.
   Yani hem kontur hem kayma bizim kendi uydurmamızdı.

   Bizdeki karşılığı kendi tipografimiz: dev cümle sans Light (sitenin
   omurgası), aksan kelime Fraunces italik şarap. Versal değil — 192px
   ölçekte Türkçe versal cümle okunmuyor, üstelik büyük cümle kuralımız
   zaten Light + küçük harf. Sola yaslı: sayfanın geri kalanı öyle. */
.ayrac{padding:var(--ayrac-bosluk) 0;overflow:hidden}
/* Sınıf adı bilerek `.ust` değil: o yapışkan menünün sınıfı, çakışıyordu. */
.ayrac-basi{
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px);
  padding:0 var(--pay);text-align:left;
}
/* ⚠ Bölüm etiketi 13px tracked versal SANS değil, SERİF İTALİK.
   Kullanıcı: "başlıklar çok sıradan bir yazı tipine sahip, cümleler
   başlıklara oranla çok büyük puntolu." İkisi de doğruydu:
   13px : 132px = 1/10 oranı etiketi cümlenin dibinde bir dipnot
   hâline getiriyordu, üstelik tracked versal sans sitenin en
   karaktersiz tipografisiydi.

   Referansın kendi bölüm etiketi ÖLÇÜLDÜ: ultralight serif **26.4px /
   satır 35.2px**, versal değil, tracking yok — "(Contacta)".
   Punto birebir alındı (26px), yazı tipi bizim aksan fontumuz.
   Oran artık 26 : 120 ≈ 1/4,6 (referansta 26,4 : 192 ≈ 1/7,3;
   bizim cümlelerimiz daha uzun olduğu için başlık biraz daha küçük). */
.ayrac .kucuk-etiket{
  margin:0;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,2vw,26px);line-height:1.33;
  letter-spacing:normal;text-transform:none;color:var(--aksan);
}
/* Referanstaki 192px/168px oranı (satır .875) alındı, punto ekrana
   göre ölçekleniyor. Ağırlık 300: bu boyutta 700 duvar gibi duruyor. */
.ayrac h2{
  margin:0;font-weight:300;text-transform:none;
  font-size:clamp(36px,7.8vw,120px);line-height:.875;letter-spacing:-.055em;
  max-width:16ch;
}

/* ══ İmleç noktası ═════════════════════════════════════════════
   Gerçek imlecin ucunda duran lacivert üç nokta. Renk ve geometri
   `../imlac.png`den ölçüldü (index.html'deki nota bak).

   ⚠ Varsayılan `display:none`. Yalnız giris.js açıyor (`body.imlecli`)
   ve yalnız gerçek fare olan cihazlarda: dokunmatikte imleç diye bir
   şey yok, orada ekranın köşesinde asılı kalan bir nokta olurdu.
   `pointer-events:none` — hiçbir tıklamayı yemiyor. */
.imlec{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:861px)
       and (prefers-reduced-motion:no-preference){
  body.imlecli .imlec{
    display:block;position:fixed;left:0;top:0;z-index:9998;
    width:17px;height:16px;pointer-events:none;
    opacity:0;transition:opacity .3s ease;
  }
  /* Fare sayfaya girene kadar görünmüyor: yoksa sol üst köşede
     bir nokta duruyor ve ilk bakışta arıza gibi görünüyor. */
  body.imlecli.imlec-acik .imlec{opacity:1}
}
.imlec svg{width:100%;height:100%;display:block;fill:#00357A}

/* ══ AÇILIŞ — merkez kilit → köşe çerçevesi ════════════════════
   YALNIZ ANASAYFA. normalisboring.es'ten ölçülerek alındı (21 Ağustos).
   Marka ekranın ortasında harf harf kuruluyor, sonra ikiye ayrılıp
   karşı köşelere uçuyor; sayfa kalan çerçevenin içinde beliriyor.
   Koreografi giris.js'te, konumlar burada.

   ⚠ Varsayılan `display:none`. Katmanı yalnız giris.js açıyor
   (`body.acilis-var`). JS düşerse katman hiç görünmez, sayfa eksiksiz
   açılır — açılış bir süs, içeriğin önünde duran bir kapı değil.

   ⚠ Köşe konumları BURADA yazılı, JS'te değil: öğenin doğal hâli bitiş
   hâli olmalı (koreografi.js 2. kural). JS yalnız başlangıcı (merkez)
   hesaplayıp oraya taşıyor, sonra 0'a döndürüyor. */
.acilis{display:none}
body.acilis-var .acilis{
  display:block;position:fixed;inset:0;z-index:9990;
  pointer-events:none;background:var(--alan);
  transition:background-color .85s cubic-bezier(.7,0,.3,1);
}
/* Kelimeler köşelere uçarken zemin saydamlaşıyor: sayfa altından çıkıyor */
body.acilis-var.acilis-bitti .acilis{background:transparent}
/* Kapak geçilince çerçeve sönüyor — fotoğraf %44'e açılırken sağ alttaki
   kelimenin üstüne biniyordu. Menü logosu tam bu anda beliriyor. */
body.cerceve-kapali .acilis{opacity:0;transition:opacity .4s ease}
/* 861px altında hiç kurulmuyor: köşeler için yer yok, menüyle çakışıyor */
@media(max-width:860px){ body.acilis-var .acilis{display:none} }

/* ── Ölçüler ──
   --tam : logonun TAM genişliği. Harf öbeklerinin hepsi buna oranlı.
   Köşedeki dinlenme boyu burada; merkezdeki kilit .kilit'te büyütüyor.
   Logo oranları (2215×574 kaynaktan ölçüldü):
     tam yükseklik   574/2215 = .25914
     "ikala" kutusu  1331/2215 = .60090
     "mimarlık" kutusu        = .39910
     "mimarlık"nın logo içindeki üst payı  95/2215 = .04289
     "mimarlık" mürekkep yüksekliği       337/2215 = .15214 */
.acilis{--tam:clamp(200px,21vw,330px)}

/* Merkezdeki kilit. left/top %50 + translate(-50%,-50%): harfler
   yazıldıkça kutu genişliyor ama merkez sabit kalıyor — referansta da
   yazı ortadan iki yana doğru büyüyor. */
.acilis .kilit{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:flex-start;
  --tam:clamp(320px,46vw,700px);
}
.acilis .kilit .mc{position:static}
/* Kelime, logodaki kendi dikey yerine otursun */
.acilis .kilit .mc-alt{margin-top:calc(var(--tam) * .04289)}

.mc{position:absolute;white-space:nowrap;font-size:0}
/* Sol üst köşe. Menünün ALTINDAN başlıyor: 0'da menü bağlantılarının
   üstüne biniyordu (referansta yatay menü yok, bizde var). */
.mc-ad{
  left:clamp(10px,1.6vw,24px);
  top:calc(var(--menu-y,61px) + clamp(8px,1.4vw,20px));
}
/* Sağ alt köşe. Sağ kenarı fotoğraf şeridine (%24) dayanıyor — referansta
   da kelime şeridin soluna yaslıydı; altta WhatsApp balonu var. */
.mc-alt{
  right:calc(24% + clamp(12px,1.6vw,24px));
  bottom:clamp(12px,2.4vh,28px);
}

/* ── Harf öbeği ──
   .h maske: genişliği sıfırdan açılınca harf SOLDAN SAĞA yazılıyor.
   İçindeki <i> tam logoyu taşıyor, öbeğin soluna hizalı duruyor;
   maske daralınca sağdan kırpılıyor, harf yerinden oynamıyor. */
.mc .h{display:inline-block;vertical-align:top;overflow:hidden;
  width:calc(var(--tam) * var(--w))}
.mc-ad  .h{height:calc(var(--tam) * .25914)}
.mc-alt .h{height:calc(var(--tam) * .15214)}
.mc .h i{
  display:block;height:100%;
  width:calc(var(--tam) * var(--w));
  background-image:url(gorseller/logo-yatay-koyu.png);
  background-repeat:no-repeat;
  background-size:var(--tam) auto;
  background-position:calc(var(--tam) * var(--x) * -1) 0;
}
/* "mimarlık" logonun ortasında duruyor, üstündeki boşluk kırpılıyor */
.mc-alt .h i{background-position-y:calc(var(--tam) * -.04289)}

/* Kapaktayken menü logosu gizli: aynı isim ekranda iki kez görünmesin.
   Kaydırılınca çerçeve söner, logo belirir — yer değiştiriyorlar.
   visibility değil opacity: yerleşim korunuyor, menü zıplamıyor. */
@media(min-width:861px){
  .ust .marka img{transition:opacity .4s ease}
  body.acilis-var:not(.cerceve-kapali) .ust .marka img{opacity:0}
}

/* ══ Açılış katmanı — ALT SAYFALAR ═════════════════════════════
   Koyu katman 1.2 sn'de sönüyor; katman boş değil, logo içinde beliriyor.
   Anasayfada artık kullanılmıyor (yukarıdaki .acilis onun yerini aldı),
   hizmet sayfalarında duruyor: alt sayfa sakin açılmalı. */
.giris-katman{
  position:fixed;inset:0;z-index:9999;background:var(--kabuk);
  display:grid;place-items:center;pointer-events:none;
  animation:girisSon 1.5s cubic-bezier(.7,0,.3,1) .55s forwards;
}
.giris-katman span,.giris-katman img{
  opacity:0;transform:translateY(.28em);
  animation:girisAd .8s cubic-bezier(.2,.7,.2,1) .12s forwards;
}
.giris-katman span{
  color:var(--alan);font-weight:300;
  font-size:clamp(34px,7vw,92px);line-height:1;letter-spacing:-.06em;
}
.giris-katman img{width:min(58vw,420px);height:auto}
@keyframes girisSon{ to{ opacity:0; visibility:hidden } }
@keyframes girisAd{ to{ opacity:1; transform:none } }

/* ⚠ Kayan isim şeridi (.serit-yazi) ve @keyframes kay 21 Ağustos'ta
   (altıncı tur) SİLİNDİ. Şerit hiçbir sayfada kullanılmıyordu; kayan
   dev ayraç yazısı da kaldırılınca `kay` animasyonunun tek kullanıcısı
   kalmadı. Sitede artık kendi kendine kayan hiçbir yazı yok — kullanıcı
   kararı: "çok amatör duruyor". */

/* ══ Üst menü ══════════════════════════════════════════════════ */
.ust{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  padding:18px clamp(20px,4vw,44px);
  background:var(--alan);
}
.ust .marka{
  font-size:23px;letter-spacing:-.03em;
  text-decoration:none;margin-right:6px;display:flex;align-items:center;
}
.ust .marka img{height:22px;width:auto}   /* yatay kilit tek satır: alçak ama okunur */
.ust nav{display:flex;gap:clamp(12px,1.8vw,26px);flex-wrap:wrap}
.ust nav a{text-decoration:none;font-size:15px;font-weight:500;
  letter-spacing:.01em;color:var(--orta)}
.ust nav a:hover{color:var(--murekkep)}
.ust nav a[aria-current]{color:var(--murekkep);text-decoration:underline;
  text-underline-offset:5px}
.ust .sag{margin-left:auto;text-decoration:none;font-size:15px;font-weight:500;
  border-bottom:1.5px solid var(--murekkep);padding-bottom:2px}

/* ══ Kapak ═════════════════════════════════════════════════════
   Dev logo + hemen altında tam genişlik görsel. Yazı görselin üstüne
   binmiyor, önünde duruyor. */
.kapak{background:var(--alan)}
.kapak .dev{padding:0 0 clamp(14px,2vw,26px)}
.kapak .bant{height:min(66vh,730px);overflow:hidden;margin-top:clamp(20px,3vw,44px)}
.kapak .bant img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ Kapak: yan şerit → tam ekran ══════════════════════════════
   normalisboring.es'in açılış hamlesi. Fotoğraf sağda dar bir dikey
   şerit olarak başlıyor, kaydırdıkça sola doğru açılıyor.

   Açılma `clip-path: inset()` ile yapılıyor, `width` veya `scaleX` ile
   DEĞİL: width her karede yerleşimi yeniden hesaplatır, scaleX görseli
   gerer. clip-path ikisini de yapmaz, GPU'da çalışır.

   Yalnız masaüstünde ve hareket kısıtı yokken kuruluyor; onun dışında
   yukarıdaki iki bant yerleşimi (logo üstte, tam genişlik fotoğraf
   altta) aynen geçerli — o yerleşim 18 Ağustos'ta bilerek seçilmişti. */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  /* Yapışkan menü akışta yer kaplıyor; kapak kalan yüksekliği alıyor ki
     başlık görünümün altından taşmasın. Pin de menünün altına kuruluyor
     (koreografi.js, start: 'top <menü yüksekliği>'). */
  .kapak{position:relative;height:calc(100svh - var(--menu-y,61px));overflow:hidden}
  /* Başlık bloğu ekranın solundan değil, ORTASINA yakın başlıyor —
     referansta ölçülen değer: 1536px görünümde x=470, yani %30,6.
     Sol taraftaki boşluk bilerek boş: köşe çerçevesi orayı taşıyor. */
  .kapak-ic{
    position:absolute;z-index:2;padding:0;
    left:clamp(120px,28vw,470px);
    top:clamp(60px,17vh,150px);
    width:min(44vw,600px);
  }
  /* Referansın sol alt köşe künyesi */
  .kapak-kunye{position:absolute;z-index:2;left:var(--pay);
    bottom:clamp(14px,2.4vh,28px);padding:0}
  .kapak .bant{
    position:absolute;inset:0;z-index:1;
    height:100%;margin:0;
    /* --ac: soldan ne kadarı kırpılıyor. GSAP 76% → 24% arası sürüyor. */
    clip-path:inset(0 0 0 var(--ac,76%));
  }
}

/* ══ Kapak başlığı — kademeli üç blok ══════════════════════════
   Referansta ölçülen kompozisyon: üç blok, her biri bir satır aşağı ve
   yana kaçık, son kelime serif italik.
   "ESPACIOS DE VIDA / QUE DESAFÍAN / LO *ORDINARIO*"
   Ölçülen: versal, ağırlık 400, satır 0.9, punto 56px (1536px'te).

   ⚠ Her satır kendi maskesinin içinde (.kb overflow:hidden). Açılışta
   içteki span alttan yükseliyor. Maskeye .06em alt payı veriliyor:
   italik "kalem." kelimesinin kuyruğu kırpılmasın. */
.kapak-ic{padding:clamp(28px,5vw,72px) var(--pay) 0}
.kapak-baslik{
  margin:0;font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5vw,72px);line-height:.92;letter-spacing:-.052em;
}
.kapak-baslik .kb{
  display:block;overflow:hidden;
  padding-bottom:.06em;margin-bottom:-.06em;
}
.kapak-baslik .kb > span{display:block}
.kb-2{padding-left:clamp(28px,9vw,150px)}
.kb-3{padding-left:clamp(8px,3vw,48px)}
/* Aksan kelime: h1 em kuralı zaten şarap + italik veriyor, burada yalnız
   versal dönüşümü geri alınıyor — italik serif küçük harfle okunuyor. */
.kapak-baslik em{text-transform:none}

.kapak-not{
  margin:clamp(20px,2.8vw,38px) 0 0;
  padding-left:clamp(28px,9vw,150px);
  max-width:36ch;font-size:15px;line-height:1.5;color:var(--orta);
}
.kapak-kunye{
  margin:0;padding:16px var(--pay) 0;
  font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orta);
}

/* Dev isim — tipografik sürüm. Logo kullanılan yerde devre dışı, ama
   logosuz bir sayfa gerekirse (ör. yazdırma) duruyor. */
.dev{
  font-weight:300;
  font-size:clamp(52px,12.4vw,196px);
  line-height:.92;letter-spacing:-.075em;margin:0;
  text-transform:uppercase;
}
.dev em{font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--aksan);text-transform:none;letter-spacing:-.05em;word-spacing:.14em}

.kapak-alt{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  padding:22px 0 0;font-size:16.5px;color:var(--orta);
}
.kapak-alt b{color:var(--murekkep);font-weight:500}

/* ══ Tipografi ═════════════════════════════════════════════════
   Referansın omurgası: BÜYÜK CÜMLE = sans Light + sıkı harf aralığı.
   Serif yalnız aksan kelimede, italik ve şarap renginde. */
h1,h2,h3{margin:0}
h1,h2{font-weight:300;letter-spacing:-.062em;line-height:1.16}
h1{font-size:clamp(36px,6.2vw,78px)}
h2{font-size:clamp(29px,4.4vw,62px)}
/* ⚠ word-spacing bilerek var. Negatif letter-spacing BOŞLUK karakterini
   de daraltıyor; italik kelimeler birbirine giriyordu. Harf aralığına
   dokunmadan yalnız kelime araları açılıyor — sıkı tracking'in verdiği
   display görünümü korunuyor. Aynı düzeltme .hizmet-bas em ve .dev em'de. */
h1 em,h2 em,.soz em,.soz-hucre p em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--aksan);letter-spacing:-.067em;word-spacing:.14em;
}
h3{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.35}

.etiket{
  font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aksan);margin:0 0 22px;
}
.giris{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--orta);
  max-width:58ch;margin:24px 0 0}
.dar{max-width:20ch}

/* Büyük söz — satır satır beliriyor. Ölçülen: 300, satır 1.16, −0.08em */
.soz{
  font-weight:300;
  font-size:clamp(30px,5vw,77.6px);
  line-height:1.16;letter-spacing:-.079em;max-width:18ch;margin:0;
}

/* Kademeli söz — referansın imza hamlesi: satırlar tek hizada değil,
   her biri bir öncekinden içeride. Ölçülen 77.6px temel değeri .soz'da
   duruyor; bu varyant onun üstüne çıkıyor, referansın dev tipografisi
   gibi. Yalnız girinti veriliyor — transform'a dokunulmuyor, çünkü
   .satir.gor'un beliriş animasyonu transform kullanıyor. */
.soz.kademeli{font-size:clamp(32px,7vw,112px);max-width:none}
.soz.kademeli .satir:nth-child(2){margin-left:8%}
.soz.kademeli .satir:nth-child(3){margin-left:22%}
@media(max-width:860px){
  .soz.kademeli{font-size:clamp(30px,7.6vw,52px)}
  /* ⚠ `:nth-child(n)` bilerek duruyor, süs değil. Üstteki girinti
     kuralları `.soz.kademeli .satir:nth-child(2)` biçiminde, yani
     özgüllüğü (0,4,0). Buraya düz `.soz.kademeli .satir` yazılırsa
     (0,3,0) kalıyor ve medya sorgusunun içinde olmasına rağmen
     KAYBEDİYOR — dar ekranda girintiler duruyordu. `:nth-child(n)`
     eşitliyor, sonra gelen kural kazanıyor. !important'a gerek yok. */
  .soz.kademeli .satir:nth-child(n){margin-left:0}
}

.satir{display:block;opacity:0;transform:translateY(.34em);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.satir.gor{opacity:1;transform:none}
.satir:nth-child(2){transition-delay:.09s}
.satir:nth-child(3){transition-delay:.18s}
.satir:nth-child(4){transition-delay:.27s}

/* ══ Izgaralar ═════════════════════════════════════════════════ */
.izgara{display:grid;gap:clamp(22px,2.8vw,40px)}
.i2{grid-template-columns:repeat(2,minmax(0,1fr))}
.i3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){ .i2,.i3{grid-template-columns:minmax(0,1fr)} }

/* İşler şeridi. Kolon arası 8px, satır arası 96px (ölçüldü).
   Referansta kartlar aynı hizada durmuyor — bazıları aşağıya kayık.
   `.kaydir` o ritmi veriyor; dar ekranda kapanıyor. */
.serit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:8px;row-gap:clamp(48px,7vw,96px)}
@media(max-width:900px){ .serit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .serit{grid-template-columns:minmax(0,1fr)} }

/* Kart — ad KALIN DEĞİL: versal, gövdeyle aynı punto.
   Üstünde minik kategori etiketi (referansta "F&B", bizde İÇ MİMARİ /
   RUHSAT): iki iş kolunu aynı ızgarada ayırt eden şey bu. */
.kart{text-decoration:none;color:inherit;display:block}
.kart .gorsel{aspect-ratio:4/5;background:var(--alan-2);overflow:hidden}
.kart .gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kart:hover .gorsel img{transform:scale(1.035)}
/* ⚠ 20 Ağustos kararı: TEK KARE ORANI — her kart 4:5, kaydırma yok,
   geniş/çift kolon kart yok. Kaynak görseller 0.75'ten 2.05'e kadar
   dağınık; tutarlılık ancak tek kutuya oturtmakla sağlanıyor.
   · tasarım kartı → cover (fotoğraf/render kırpılır)
   · kroki kartı   → contain, beyaz zemin (ÇİZİM ASLA KIRPILMAZ) */
.kart.cizim .gorsel{background:#fff;display:grid;place-items:center;padding:12px}
.kart.cizim .gorsel img{width:100%;height:100%;object-fit:contain}
.kart.cizim:hover .gorsel img{transform:none}

/* ── ÇEVRİLEN KART · aynı işin iki katı tek kutuda ────────────────
   22 Ağustos. Diş kliniği ızgarada iki kart yer kaplıyordu; ikisi
   AYNI dosya. Tek karta indirildi, ikinci kat kartın arka yüzü oldu.
   ⚠ Bu kurallar `.kart.cizim` kurallarıyla AYNI özgüllükte (0,3,0) —
   kazanmalarının tek sebebi dosyada SONRA gelmeleri. Yukarı taşıma. */
.kart.cevir .gorsel{background:transparent;padding:0;display:block;
  position:relative;perspective:1400px}
.kart.cevir .cevirici{position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Her yüz kendi beyaz kutusunu taşıyor: dönerken arkada zemin kalmazsa
   çizim havada asılı duruyor. Dolgu `.cizim`in 12px'iyle aynı. */
.kart.cevir .yuz{position:absolute;inset:0;background:#fff;
  display:grid;place-items:center;padding:12px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kart.cevir .yuz.arka{transform:rotateY(180deg)}
/* Kat adı — hangi yüze bakıldığını yüzün kendisi söylüyor */
.kart.cevir .kat{position:absolute;top:10px;right:12px;
  font-size:13.4px;font-weight:400;line-height:1;letter-spacing:normal;
  color:var(--aksan);font-style:italic;font-family:var(--serif)}
/* İpucu yalnız fare olan cihazda: dokunmatikte çevirme çalışmıyor,
   orada yazması yalan olurdu. Kart dönünce ipucu da gidiyor. */
.kart.cevir .ipucu{display:none}
.kart.cevir .yuz img{width:100%;height:100%;object-fit:contain}

@media(hover:hover){
  .kart.cevir:hover .cevirici,
  .kart.cevir:focus-visible .cevirici{transform:rotateY(180deg)}
  .kart.cevir .ipucu{display:block;position:absolute;left:12px;bottom:10px;
    font-size:13.4px;font-weight:400;line-height:1;letter-spacing:normal;
    color:var(--murekkep);opacity:.45;
    transition:opacity .3s}
  .kart.cevir:hover .ipucu{opacity:0}
}

/* Hareket kısıtı: 180° dönme tam da bu ayarın kapattığı şey.
   Bilgi kaybolmasın diye dönme yerine yumuşak geçiş kalıyor. */
@media(prefers-reduced-motion:reduce){
  .kart.cevir .cevirici{transform-style:flat;transition:none}
  .kart.cevir:hover .cevirici,
  .kart.cevir:focus-visible .cevirici{transform:none}
  .kart.cevir .yuz{backface-visibility:visible;-webkit-backface-visibility:visible}
  .kart.cevir .yuz.arka{transform:none;opacity:0;transition:opacity .25s linear}
  .kart.cevir:hover .yuz.arka,
  .kart.cevir:focus-visible .yuz.arka{opacity:1}
}

/* Izgara içi grup başlığı — TASARIM / RUHSAT ayrımı.
   Ayraç değil, çok daha sessiz: tek satır, ince çizgi. */
/* Izgara grubu başlığı — "Tasarım · iç mimari proje ve uygulama".
   ⚠ Ayraç etiketiyle AYNI düzeltme: 13px tracked versal sans idi,
   ızgaranın üstünde neredeyse görünmüyordu. Grup adı ayraç etiketiyle
   aynı dilde (serif italik, şarap), açıklaması sans Light gri.
   Ayraçtan bir tık küçük: ayraç bölüm açıyor, bu yalnız grup ayırıyor. */
.grup-basi{
  margin:0 0 clamp(18px,2.4vw,30px);padding:0 var(--pay) 14px;
  border-bottom:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;
  letter-spacing:normal;text-transform:none;
}
.grup-basi b{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.9vw,26px);line-height:1.2;color:var(--aksan);
}
.grup-basi span{
  font-weight:300;font-size:clamp(17px,1.5vw,22px);line-height:1.3;
  letter-spacing:-.02em;color:var(--orta);
}

/* Panorama bandı — 1.8–2.05 oranlı görseller hiçbir dikey kutuya
   sığmıyor; ızgaranın dışına çıkıp kenardan kenara bant oluyorlar. */
.bant-tam{margin:clamp(48px,7vw,96px) 0;overflow:hidden}
.bant-tam img{width:100%;height:auto;display:block}
.bant-tam figcaption{padding:16px var(--pay) 0}
/* Alt yazı bloğu: padding 16px 0 0 · gap 8px · yatay dolgu YOK
   (görselin kenarıyla hizalı). Künye aynı mürekkep + opaklık .6. */
.kart .alt{padding:16px 0 0;display:flex;flex-direction:column;gap:6px}
/* Kart üstünde kategori etiketi YOK — iki iş kolu artık grup başlığıyla
   ayrılıyor (`.grup-basi`), kartta tekrar etmesi gürültü olurdu. */
.kart h3{
  margin:0;font-size:17.9px;font-weight:500;line-height:1.3;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--murekkep);
}
.kart .kunye{
  font-size:15.9px;font-weight:400;line-height:1.3;letter-spacing:normal;
  color:var(--murekkep);opacity:.6;font-variant-numeric:tabular-nums;
}

/* Izgarayı bölen söz hücresi — bir hücrede görsel yerine cümle */
.soz-hucre{display:grid;place-items:center;text-align:center;aspect-ratio:4/5;
  padding:clamp(20px,3vw,48px)}
.soz-hucre p{font-weight:300;
  font-size:clamp(24px,2.8vw,46px);line-height:1.16;letter-spacing:-.075em;
  max-width:14ch;margin:0}
@media(max-width:600px){ .soz-hucre{aspect-ratio:auto;padding:56px 24px} }

/* ══ Bileşenler ════════════════════════════════════════════════ */
.blok{border-top:1.5px solid var(--murekkep);padding-top:24px;
  display:flex;flex-direction:column;height:100%}
.blok p{color:var(--orta);margin:14px 0 24px}
.blok .devam{margin-top:auto;text-decoration:none;color:var(--aksan);
  border-bottom:1.5px solid var(--aksan);align-self:flex-start;padding-bottom:2px}

/* ══ İki hizmet — yatay pinli sahne ════════════════════════════
   Referansın VALORES bölümünün karşılığı. Masaüstünde iki tam ekran
   panel yan yana duruyor (ray 200vw), GSAP rayı yatay sürüyor.

   Mobil ve hareket kısıtı: ray dikeye düşüyor, paneller alt alta normal
   bölüm gibi akıyor. Pin yok, yatay yok — dar ekranda ikisi de kötü
   çalışıyor ve trafiğin çoğu oradan geliyor. */
.hizmet-sahne{padding:0;overflow:hidden}
.hizmet-ray{display:grid;gap:0}
.hizmet-panel{padding:var(--bosluk) var(--pay)}
.hizmet-ic{max-width:52ch}
.panel-01{background:var(--alan-2)}
/* Tek doygun renk anı — palete yeni renk girmedi, mevcut --aksan. */
.panel-02{background:var(--aksan);color:var(--alan)}

.hizmet-no{
  display:block;font-weight:300;
  font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.06em;
  color:var(--aksan);margin:18px 0 14px;font-variant-numeric:tabular-nums;
}
/* Referansın dev tipografisi: sans Light, çok büyük, sıkı aralık;
   vurgu kelimesi Fraunces italik — İkala'nın zaten kurulu sistemi. */
.hizmet-bas{
  font-weight:300;font-size:clamp(34px,5.4vw,86px);
  line-height:1.08;letter-spacing:-.065em;margin:0;
}
.hizmet-bas em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.055em;word-spacing:.14em;color:var(--aksan);
}
.hizmet-metin{color:var(--orta);margin:24px 0 30px;
  font-size:clamp(17px,1.5vw,20px);line-height:1.5}

/* 21 Ağustos: üçüncü panel eklendi. Yatay sahne artık kırık beyaz →
   şarap → siyah diye ilerliyor; üçü de mevcut palet tokenları. */
.panel-03{background:var(--kabuk);color:var(--alan)}

/* Koyu zeminlerde (şarap ve siyah) kontrastlar dönüyor */
.panel-02 .etiket,.panel-03 .etiket{color:var(--alan);opacity:.75}
.panel-02 .hizmet-no,.panel-03 .hizmet-no{color:var(--alan);opacity:.55}
.panel-02 .hizmet-bas em,.panel-03 .hizmet-bas em{color:var(--alan)}
.panel-02 .hizmet-metin,.panel-03 .hizmet-metin{color:var(--alan);opacity:.88}
.panel-02 .devam,.panel-03 .devam{color:var(--alan);border-bottom-color:var(--alan)}

@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  /* Panel sayısı değişirse BURASI da değişmeli. koreografi.js yatay
     mesafeyi ray.scrollWidth'ten okuduğu için JS'e dokunmak gerekmiyor. */
  .hizmet-ray{display:flex;width:300vw}
  .hizmet-panel{
    width:100vw;flex:none;min-height:100svh;
    display:grid;align-content:center;
    padding:0 clamp(44px,7vw,120px);
  }
  .hizmet-ic{max-width:min(46ch,52vw)}
}

.fark{border-top:1px solid var(--cizgi);padding-top:22px}
/* Ruhsat kök sayfasında sektör kartları LİNK. Alt çizgi kalkıyor; üst
   çizgi ve başlık hover'da şaraba dönerek tıklanabilirliği söylüyor. */
a.fark{display:block;text-decoration:none;transition:border-color .2s}
a.fark:hover{border-top-color:var(--aksan)}
a.fark:hover h3{color:var(--aksan)}
.fark .no{font-weight:300;font-size:40px;line-height:1;letter-spacing:-.06em;
  color:var(--aksan);margin-bottom:14px}
.fark p{color:var(--orta);margin:10px 0 0;font-size:17px}

.surec{list-style:none;padding:0;margin:0;counter-reset:s}
.surec li{counter-increment:s;display:grid;
  grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:26px 0;border-top:1px solid var(--cizgi)}
.surec li::before{content:counter(s,decimal-leading-zero);
  font-weight:300;font-size:30px;letter-spacing:-.05em;
  color:var(--aksan);line-height:1}
.surec b{font-weight:300;
  font-size:clamp(22px,2.4vw,34px);line-height:1.1;letter-spacing:-.055em}
.surec span{color:var(--orta);white-space:nowrap}
@media(max-width:640px){ .surec li{grid-template-columns:auto 1fr}
  .surec span{grid-column:2;white-space:normal} }

.madde{list-style:none;padding:0;margin:0}
.madde li{padding:17px 0 17px 38px;border-top:1px solid var(--cizgi);position:relative;
  font-size:19px}
.madde li::before{content:"";position:absolute;left:0;top:26px;
  width:22px;height:3px;background:var(--aksan)}

/* Çizim gösterimi — kroki hiçbir zaman kırpılmıyor, beyaz zeminde
   tam görünüyor. (Kendi elimizle çizilmiş "temsili plan" kullanılmıyor;
   yalnızca gerçek, müşteri adı maskelenmiş çizimler.) */
.cizim-kutu{margin:0;background:#fff;border:1px solid var(--cizgi);
  padding:clamp(14px,2vw,26px)}
.cizim-kutu img{width:100%;height:auto}
/* Alt yazı kutunun İÇİNDE kalıyor — çizim paftasının künye şeridi gibi.
   İnce çizgi bunu kazara içeride kalmış gibi değil, kasıtlı gösteriyor. */
.cizim-kutu figcaption{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--cizgi)}

/* Görsel alt yazısı — kart künyesiyle aynı sistem. */
.altyazi{
  margin:16px 0 0;font-size:15.9px;font-weight:400;line-height:1.35;
  letter-spacing:normal;color:var(--murekkep);opacity:.6;
}
.altyazi b{
  display:block;font-size:17.9px;line-height:1.3;margin-bottom:6px;
  font-weight:500;text-transform:uppercase;letter-spacing:-.01em;opacity:1;
}

.dugme{display:inline-block;background:var(--murekkep);color:#fff;
  padding:16px 30px;border-radius:999px;text-decoration:none;
  font-size:16px;font-weight:500;letter-spacing:-.01em;margin-top:30px}
.dugme:hover{background:var(--aksan)}
/* Tanıtım bölümündeki "Bir konuşalım" butonu üstündeki paragrafa göre
   ortalanıyor (kullanıcı isteği). Kural bu kolona KAPSAMLI: ruhsat
   sayfasındaki ve kapanıştaki butonlar sola yaslı kalıyor. */
.k12 .s4.b8 > p:last-child{text-align:center}
.dugme.ikincil{background:transparent;color:var(--murekkep);
  box-shadow:inset 0 0 0 1.5px var(--murekkep);margin-left:8px}
.dugme.ikincil:hover{background:var(--murekkep);color:#fff}

.fiyat{border-top:1.5px solid var(--murekkep);padding:clamp(26px,3.2vw,46px) 0 0;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start}
@media(max-width:700px){ .fiyat{grid-template-columns:1fr} }
.fiyat .rakam{font-weight:300;font-size:clamp(30px,3.8vw,54px);
  line-height:1.1;letter-spacing:-.06em;white-space:nowrap}
.fiyat h3{font-weight:300;font-size:clamp(24px,2.8vw,42px);
  line-height:1.16;letter-spacing:-.06em;text-transform:none}
/* Rakamın üstündeki kalem etiketi ("Ruhsat projesi · 40 m²"). Rakam
   .rakam'dan nowrap devralıyor; etiket kendi satırında ve normal akışta.
   21 Ağustos: ikinci kalem (iç mimari proje) kaldırıldığı için
   .rakam.cift ve .ikinci kuralları da silindi — kullanan kalmamıştı. */
.fiyat .ust-etiket{display:block;white-space:normal;
  font-size:12.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orta);margin-bottom:10px;line-height:1.3}
/* Ruhsat sayfasındaki tek rakamın altındaki kapsam satırı */
.fiyat .kapsam{margin:14px 0 0;font-size:15px;line-height:1.45;
  letter-spacing:normal;color:var(--orta);max-width:34ch;white-space:normal}

/* Doldurulmamış alan — canlıya kazara çıkmasın diye göze batıyor */
.doldur{background:#FFE08A;color:#5A3E00;padding:2px 10px;
  font:500 15px/1.5 var(--sans);border-radius:4px;letter-spacing:0}

.sss details{border-top:1px solid var(--cizgi);padding:20px 0}
.sss summary{cursor:pointer;font-weight:400;
  font-size:clamp(20px,2.1vw,29px);line-height:1.25;letter-spacing:-.045em;
  list-style:none;display:flex;justify-content:space-between;gap:22px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";color:var(--aksan);font-size:26px;line-height:1}
.sss details[open] summary::after{content:"–"}
.sss p{color:var(--orta);margin:16px 0 0;max-width:68ch}

/* ══ Rölöve → tasarım karşılaştırması ══════════════════════════
   Üst üste bindiren sürgü bileşeni duruyor ama şu an kullanılmıyor:
   kroki bir PLAN, tasarım bir PERSPEKTİF; aynı bakış olmadığı için
   kıyas üretmiyor. Doğru yeri aynı açıdan "boş mekân → tasarım" çifti. */
.karsilastir{position:relative;overflow:hidden;margin:0;
  aspect-ratio:16/10;background:var(--alan-2);touch-action:none;cursor:ew-resize}
.karsilastir img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.karsilastir .ust-kat{clip-path:inset(0 0 0 var(--bol,50%))}
.karsilastir .kol{position:absolute;top:0;bottom:0;left:var(--bol,50%);
  width:2px;background:var(--alan);transform:translateX(-1px);pointer-events:none}
.karsilastir .kol::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--alan);box-shadow:0 2px 14px #0004;
}
.karsilastir .kol::before{
  content:"‹ ›";position:absolute;top:50%;left:50%;z-index:1;
  transform:translate(-50%,-50%);color:var(--murekkep);
  font:400 19px/1 var(--sans);letter-spacing:2px;
}
.karsilastir .rozet{
  position:absolute;bottom:14px;z-index:2;
  background:rgba(0,0,0,.82);color:#fff;
  padding:7px 13px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;
}
.karsilastir .rozet.sol{left:14px}
.karsilastir .rozet.sag{right:14px}

.yer-tutucu{display:grid;place-items:center;height:100%;min-height:inherit;
  background:var(--alan-2);
  color:var(--orta);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:24px;position:relative}
.yer-tutucu::before{content:"";position:absolute;top:16px;left:16px;
  width:9px;height:9px;border-radius:50%;background:var(--aksan)}

footer{background:var(--kabuk);color:#9A9A9A;padding:var(--bosluk) 0 46px}
footer a{color:#9A9A9A}
footer h2{color:var(--alan);margin-bottom:12px}
footer .giris{color:#9A9A9A}
footer .etiket{color:var(--aksan)}
footer .satir-alt{display:flex;flex-wrap:wrap;gap:44px;margin-top:44px;
  padding-top:30px;border-top:1px solid #222;font-size:16px}
footer .satir-alt div{min-width:180px}
footer strong{color:var(--alan);font-weight:500}
/* HTML'deki width/height öznitelikleri boy oranını korumak için duruyor;
   CSS'te genişlik verilen her logoya height:auto şart, yoksa öznitelikteki
   yükseklik kalıyor ve görsel geriliyor. */
footer .logo-alt{width:180px;height:auto;margin-top:44px;opacity:.85}
footer .kucuk{color:#5E5E5E;font-size:14px;margin-top:28px}

/* ══ ScrollSmoother sarmalayıcısı ══════════════════════════════
   Yumuşak kaydırma içeriği transform ederek çalışıyor. Transform edilen
   bir öğe kendi içindeki fixed/sticky öğelere "containing block" olduğu
   için yapışkan menü sarmalayıcının DIŞINA çıkarıldı ve fixed'e döndü;
   akıştan çıkınca kapladığı yeri #smooth-content'in üst payı veriyor.

   .akisli yalnız anasayfada. Ruhsat sayfasında menü eskisi gibi
   akış içinde sticky — orada koreografi ve sarmalayıcı yok. */
.akisli .ust{position:fixed;top:0;left:0;right:0}
.akisli #smooth-content{padding-top:var(--menu-y,61px)}

/* ══ Bölüm adı okuması ═════════════════════════════════════════
   Sağ kenarda sabit, döndürülmüş, kaydırdıkça değişen bölüm adı.
   Referansta soldaki mod-scroll__section'ın karşılığı.

   Neden SAĞ kenar: sol kenarda işler ızgarasının künye satırları
   (kartlar --pay ile kenara dayanıyor) çakışıyordu. WhatsApp balonu
   sağ ALTTA, bu dikeyde ORTADA — 56px daire ile kesişmiyorlar.
   Neden döndürülmüş: yalnız ~16px yatay yer kaplıyor.

   .ton-acik sınıfını koreografi.js koyup kaldırıyor: şarap ve siyah
   zeminli bölümlerin üstünden geçerken yazı açık renge dönüyor. */
.bolum-adi{
  position:fixed;z-index:40;
  right:0;top:50%;transform:translateY(-50%);
  padding:0 6px;pointer-events:none;
  writing-mode:vertical-rl;
  font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orta);
  transition:color .35s ease;
}
.bolum-adi span{display:block;transition:opacity .28s ease}
.bolum-adi.ton-acik{color:var(--alan)}
/* Dar ekranda kaldırılıyor: yer yok, üstelik mobilde sayfa zaten
   koreografisiz normal belge olarak akıyor. */
@media(max-width:860px){ .bolum-adi{display:none} }

/* ══ Kapanış — şarap kırmızısı ═════════════════════════════════
   Referansın bg-red cierre'sinin karşılığı. Sayfanın sonundaki tek
   doygun renk anı; rengi referanstan değil kendi paletimizden alıyor. */
.kapanis{
  background:var(--aksan);color:var(--alan);
  min-height:72svh;display:grid;align-content:center;
  padding:var(--bosluk) 0;
}
.kapanis .etiket{color:var(--alan);opacity:.7}
.kapanis .soz{color:var(--alan);max-width:16ch}
.kapanis .soz em{font-family:var(--serif);font-style:italic;color:var(--alan)}
.kapanis .dugme{background:var(--alan);color:var(--aksan)}
.kapanis .dugme:hover{background:var(--murekkep);color:var(--alan)}

/* ══ WhatsApp balonu ═══════════════════════════════════════════
   Birincil iletişim kanalı. Gerekçe: rölöve/ruhsat acele iş — müşteri
   elindeki tapuyu ya da eski projeyi anında fotoğraflayıp atıyor,
   biz m²'yi görüp fiyatı söylüyoruz. Form bunu yapamaz.

   z-index 60 bilerek: yapışkan menü 50'de, açılış katmanı 9999'da.
   Arada durmazsa ya menünün altında kalıyor ya açılış animasyonunun
   siyah katmanının önüne çıkıyor.

   Renk WhatsApp yeşili DEĞİL — palet üç renkli (kırık beyaz / siyah /
   şarap kırmızısı) ve yeşil balon üstüne yapıştırılmış gibi duruyordu.
   Glifin kendisi zaten tanınır. Hover .dugme ile aynı davranıyor.

   Etiketli hap biçimi denendi ve bırakıldı: işler ızgarası sayfa
   kutusunun dışında, kartlar sağ kenara --pay (8px) ile dayanıyor.
   216px genişliğindeki hap, üçüncü kartın künye satırının ("1/100 ölçek ·
   MEB dosyası") üstüne biniyordu. 56px daire o metnin sağında kalıyor.
   Glif zaten tanınır; etiket aria-label ve title'da duruyor. */
.wa{
  position:fixed;z-index:60;
  right:20px;bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--murekkep);color:#fff;text-decoration:none;
  /* İkinci gölge bir tel kontur: alt bilgi zemini de siyah (--kabuk),
     orada daire zemine karışıp ortada uçan bir glif gibi duruyordu.
     Kırık beyaz zeminde bu kontur görünmüyor. */
  box-shadow:0 6px 24px rgba(0,0,0,.22),0 0 0 1.5px rgba(255,255,255,.22);
  transition:background .2s
}
.wa:hover{background:var(--aksan)}
.wa svg{width:26px;height:26px;flex:none;fill:currentColor}
/* Etiket ekran okuyucularda kalıyor, gözle görünmüyor. */
.wa span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .satir{opacity:1;transform:none}
  .giris-katman{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   PROJE GALERİSİ  (24 Ağustos 2026, dokuzuncu tur)
   Anasayfadaki iş kartları artık `is-*.html` proje sayfalarına gidiyor;
   orada fotoğraf kütüphanesi bu sınıflarla kuruluyor.

   ⚠ ÖZGÜLLÜK: bütün kurallar `.galeri` / `.buyutec` ile başlıyor ve
   dosyanın EN SONUNDA duruyor. Bu blok yukarı taşınmamalı — `.kart`
   ve `.gorsel` gibi genel adlarla çakışmasın diye bilerek ayrı
   isimlendirildi. (Bu sitede üç kez özgüllük kazası oldu: `.sar`,
   `.soz.kademeli`, `.kart.cevir`.)

   ⚠ JS OLMADAN DA ÇALIŞIR: her küçük görsel, büyük görsele giden
   gerçek bir <a href> içinde. `galeri.js` yoksa tıklayınca tarayıcı
   büyük görseli açar; büyüteç yalnız bunun üstüne biniyor.
   ══════════════════════════════════════════════════════════════════ */

/* Yüksekliği sabitlemiyoruz: iç mekân kareleri dikey ve yatay karışık,
   4/5 kutuya sokmak hepsini kırpardı. Sütun (masonry) düzeni doğal
   oranı koruyor ve JS istemiyor. */
.galeri{columns:3;column-gap:var(--k-bosluk);margin:0}
@media(max-width:1000px){ .galeri{columns:2} }
@media(max-width:620px){  .galeri{columns:1} }

.galeri figure{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 var(--k-bosluk);page-break-inside:avoid}
.galeri a{display:block;text-decoration:none;color:inherit;
  background:var(--alan-2);overflow:hidden}
.galeri img{width:100%;height:auto;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){ .galeri a:hover img{transform:scale(1.03)} }
.galeri a:focus-visible{outline:2px solid var(--murekkep);outline-offset:3px}

.galeri figcaption{margin-top:10px;font-size:14px;line-height:1.45;
  color:var(--orta)}
/* Görselleştirme mi, çekilmiş fotoğraf mı, düzenlenmiş mi — künye
   burada. Uydurma yok: hangi karenin ne olduğu açıkça yazılıyor. */
.galeri figcaption i{font-style:normal;color:var(--murekkep)}
.galeri .rozet{display:inline-block;margin-left:8px;padding:2px 8px;
  border:1px solid var(--cizgi);border-radius:999px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orta);vertical-align:1px}

/* ── Büyüteç ───────────────────────────────────────────────────── */
.buyutec{position:fixed;inset:0;z-index:9000;display:none;
  background:rgba(12,12,12,.94);
  align-items:center;justify-content:center;padding:48px 64px 96px}
.buyutec[open],.buyutec.acik{display:flex}
body.buyutec-acik{overflow:hidden}

.buyutec img{max-width:100%;max-height:100%;width:auto;height:auto;
  display:block;object-fit:contain}
.buyutec .yazi{position:absolute;left:0;right:0;bottom:34px;
  text-align:center;color:#EDEBE8;font-size:14px;padding:0 64px}
.buyutec .yazi b{color:#fff;font-weight:500}
.buyutec .sayac{display:block;margin-top:6px;font-size:12px;
  letter-spacing:.08em;color:#9A9A97}

.buyutec button{position:absolute;background:none;border:0;cursor:pointer;
  color:#EDEBE8;padding:14px;line-height:0;border-radius:999px}
.buyutec button:hover{background:rgba(255,255,255,.10)}
.buyutec button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.buyutec .kapat{top:18px;right:22px}
.buyutec .onceki{left:14px;top:50%;transform:translateY(-50%)}
.buyutec .sonraki{right:14px;top:50%;transform:translateY(-50%)}
.buyutec svg{width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:700px){
  .buyutec{padding:56px 10px 96px}
  .buyutec .onceki{left:2px} .buyutec .sonraki{right:2px}
  .buyutec .yazi{padding:0 18px;bottom:26px}
}

/* ── Proje sayfası künye şeridi ─────────────────────────────────── */
.proje-kunye{display:flex;flex-wrap:wrap;gap:10px 40px;margin:34px 0 0;
  padding:22px 0 0;border-top:1.5px solid var(--murekkep);list-style:none}
.proje-kunye div{min-width:120px}
.proje-kunye b{display:block;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orta);font-weight:500;margin-bottom:4px}
.proje-kunye span{font-size:18px}

/* Diğer projelere geçiş */
.proje-gezinme{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
  padding:0;list-style:none}
.proje-gezinme a{display:inline-block;padding:9px 16px;
  border:1px solid var(--cizgi);border-radius:999px;
  text-decoration:none;color:inherit;font-size:15px}
.proje-gezinme a:hover{border-color:var(--murekkep)}

@media(prefers-reduced-motion:reduce){
  .galeri img{transition:none}
  .galeri a:hover img{transform:none}
}

/* Panorama bandı artık proje sayfasına gidiyor (24 Ağustos).
   `.bant-tam` zaten overflow:hidden — büyütme kırpılıyor, taşma yok. */
.bant-tam a{display:block;text-decoration:none;color:inherit}
.bant-tam a img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){ .bant-tam a:hover img{transform:scale(1.02)} }
.bant-tam figcaption a{text-decoration:none;color:inherit}
.bant-tam figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .bant-tam a img{transition:none}
  .bant-tam a:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   GALERİ — AKIŞ DÜZENİ  (.galeri.akis)   24 Ağustos 2026
   Kullanıcı: "görseller kütüphanesi biraz daha normalisboring'deki gibi
   hareketli akışta olsa, böyle çok monoton duruyor."

   İki şey değişti:
   1. YERLEŞİM — eşit sütunlu masonry yerine 12 kolonluk ızgarada
      DEĞİŞEN genişlik ve başlangıç. Kareler aynı hizada durmuyor,
      aralarda bilinçli boşluk kalıyor. Ritim `--kol` / `--bas` / `--ust`
      ile taşınıyor; sayılar HTML'de, sayfa üreticisi yazıyor.
   2. HAREKET — kaydırınca maske açılıyor (bkz. galeri.js).

   ⚠ `.galeri` (sütun/masonry) hâlâ duruyor: diğer beş proje sayfası
   onu kullanıyor. `.akis` yalnız üstüne biniyor.
   ══════════════════════════════════════════════════════════════════ */
/* Kapsayıcı düz blok: yerleşimi içindeki modüller taşıyor.
   ⚠ 12 kolonluk dağınık ızgara DENENDİ VE BIRAKILDI (24 Ağustos).
   Kullanıcı: "fotoğraflar arasında çok fazla boşluk var, iyi durmuyor."
   Haklıydı: değişen başlangıç/genişlik ızgarada delikler bırakıyordu.
   normalisboring.es/lasolana ölçüldü — orada görseller ya TAM genişlik
   ya YARIM; ortada boşluk bırakan küçük kutu yok. Metin aralara kendi
   bloğu olarak giriyor. Aşağıdaki modüller o mantığın dikey
   fotoğraflara uyarlanmış hâli. */
.galeri.akis{columns:auto;display:block}

/* Ölçülen boşluk skalası (lasolana): 25,6 / 96 / 144 / 192 px */
.mod-ikili,.mod-tek,.mod-genis{margin:0 0 clamp(16px,2vw,26px)}

/* ══ KARE EKRANA SIĞAR ══════════════════════════════════════════
   Kullanıcı: "masaüstünde görselleri tek seferde göremiyorum, scroll
   yaptığımda görselin tamamını görüyorum ve bu seyir zevkini düşürüyor."

   Sebep ölçüldü: fotoğrafların hepsi DİKEY (3:4). Genişlik kolonu
   dolduruyordu — 744 px genişlik 998 px yükseklik demek, görüntü
   alanı ise 730 px. Yani hiçbir kare tek seferde sığmıyordu.

   Çözüm: yüksekliği TAVANLA, genişlik ondan türesin. Artık ölçüyü
   veren kenar genişlik değil YÜKSEKLİK.
   Yapışkan menü çıkarılıyor (`--menu-y`, giris.js ölçüp yazıyor;
   o çalışmazsa 61 px yedek). */
.galeri.akis{--kare-boy:calc(92vh - var(--menu-y,61px))}

/* ⚠ TAVAN GÖRSELE DEĞİL, FİGÜRE UYGULANIYOR.
   Önce `img{max-height:...;width:auto}` denendi — ÇALIŞMADI: `width:auto`
   olunca lazy görseller yüklenmeden yer kaplamıyor, hepsi 0×0'a düşüyor
   (ölçüldü) ve yer ayırma / CLS düzeltmesi de bozuluyor.

   Doğrusu: görsel `width:100%` kalıyor (en/boy nitelikleriyle yeri
   önceden ayrılıyor), FİGÜRÜN genişliği kareye izin verilen yükseklikten
   TÜRETİLİYOR. `--oran` = görselin eni / boyu; sayfa üreticisi üretilmiş
   dosyadan ölçüp yazıyor. genişlik = izin verilen yükseklik × oran. */
.galeri.akis figure{max-width:calc(var(--kare-boy) * var(--oran,.75))}

/* İKİLİ — iki dikey kare yan yana, ÖBEK ORTALANMIŞ.
   Kareler artık yüksekliğe göre daraldığı için kolon ızgarası
   (1fr 1fr) yerine esnek satır: yanlardaki boşluk simetrik kalıyor,
   eski dağınık ızgaradaki gibi delik oluşmuyor. */
.mod-ikili{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:var(--k-bosluk)}
.mod-ikili figure{flex:1 1 0;min-width:0}

/* TEK — tek kare, soldan hizalı. Ritmi kıran duraklama.
   ⚠ FLEX DEĞİL, BLOK. Tek öğeli flex satırında figürün genişliği
   içeriğe, görselin genişliği (`width:100%`) figüre bağlı olunca
   döngü oluşuyor ve figür çöküyordu (ölçüldü: 47×63 px). Blokta
   figür doğal olarak satırı dolduruyor, `max-width` tavanı kesiyor.

   ⚠ ORTALANIYOR. Yükseklik tavanı gelince kare 455 px'e indi; sola
   yaslı bırakılınca sağında ~600 px tek yanlı boşluk kalıyordu —
   "bir şey eksik" gibi duruyor. Ortalanınca boşluk iki yana simetrik
   dağılıyor ve kompozisyon bilinçli okunuyor. */
.mod-tek{display:block}
/* ⚠ ÖZGÜLLÜK: `.galeri.akis figure{margin:0}` (0,2,1) bu kuralı
   `.mod-tek figure` (0,1,1) yazılırsa EZİYOR ve ortalama çalışmıyor
   (ölçüldü). Seçici `.galeri.akis` ile başlatılarak (0,3,1) yapıldı.
   Bu dosyada dördüncü özgüllük olayı — bkz. `.sar`, `.soz.kademeli`,
   `.kart.cevir`. Medya sorgusu veya yeni kural yazarken özgüllüğü say. */
.galeri.akis .mod-tek figure{margin-left:auto;margin-right:auto}

/* GENİŞ — kenardan kenara. Yalnız YATAY fotoğraf için; dikeyde
   kullanılmıyor. (Şu an kullanan bölüm yok — giyinme köşesi
   24 Ağustos'ta kaldırıldı — ama kural duruyor.) */
.mod-genis{margin-left:calc(var(--pay)*-1);margin-right:calc(var(--pay)*-1)}
.mod-genis figure{max-width:none}
.mod-genis img{max-width:none;width:100%}

.galeri.akis figure{margin:0}

/* ⚠ clip-path'in DOĞAL değeri `inset(0%)` — `none` DEĞİL.
   `none` ile `inset(...)` arasında ara değer üretilemiyor, maske
   animasyon yerine ZIPLIYOR. (Bu hata bir kez düzeltilmiş, modül
   düzenine geçerken yanlışlıkla geri gelmişti.)
   `inset(0%)` aynı zamanda görselin tam açık hâli — JS çalışmazsa
   da doğru görünüyor (2. kural: doğal hâl = bitiş hâli). */
.galeri.akis a{clip-path:inset(0%)}
/* ── Bölüm başlığı — oda adı ─────────────────────────────────────
   lasolana'daki `mod-title--chapter` karşılığı: küçük sıra etiketi +
   büyük ad. Kullanıcı: "görseller mekanlara göre bölünsün, salon vs
   gibi sıralı olsun." */
.blok-basi{padding:clamp(64px,9vw,144px) 0 clamp(20px,2.6vw,38px)}
.blok-basi .no{display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.5vw,21px);color:var(--aksan);margin-bottom:10px}
.blok-basi h2{font-weight:300;font-size:clamp(30px,4.6vw,62px);
  line-height:1.02;letter-spacing:-.02em;margin:0;text-transform:uppercase}

/* ── Tasarım kararı cümlesi ──────────────────────────────────────
   Görsellerin ARASINA giren metin. Sayfayı akışkan yapan şey bu. */
.blok-soz{max-width:64ch;margin:0 0 clamp(28px,3.4vw,52px);
  font-weight:300;font-size:clamp(18px,1.9vw,26px);line-height:1.42;
  color:var(--murekkep)}
.blok-soz em{font-family:var(--serif);font-style:italic;color:var(--aksan)}

@media(max-width:760px){
  /* Dar ekranda ikili alt alta iner ve yükseklik tavanı kalkar:
     telefonda genişlik zaten kısıtlı, tavanı korumak kareyi
     gereksiz küçültürdü. */
  .mod-ikili{flex-direction:column;gap:clamp(16px,4vw,26px)}
  .galeri.akis figure{max-width:100%}
  .blok-basi{padding:clamp(48px,11vw,80px) 0 18px}
}
/* ── Kaydırınca açılan maske ────────────────────────────────────────
   Hareket normalisboring.es'ten ÖLÇÜLDÜ (kendi animations.js'inden):
     maske   clip-path inset(100% 0 0 0) → inset(0)   1.2s  power3.out
     içerik  y karşı hareket              1.33s power3.out, EŞZAMANLI
   `power3.out` = easeOutCubic = cubic-bezier(.215,.61,.355,1).

   ⚠ GSAP KULLANILMIYOR. Önce GSAP+ScrollTrigger ile denendi; timeline
   içindeki tween başlangıç hâlini güvenilir yazmadı (ölçüldü: 27 tetik
   kuruluyor ama clip-path doğal değerinde kalıyordu). Bunun yerine
   sitenin KENDİ kalıbı kullanıldı — `giris.js` zaten `.satir`
   öğelerini IntersectionObserver + sınıf ile açıyor.

   ⚠ DOĞAL HÂL = BİTİŞ HÂLİ (2. kural). `.kapali` sınıfını JS ekliyor;
   JS çalışmazsa hiçbir kare gizlenmiyor. */
.galeri.akis a{transition:clip-path 1.2s cubic-bezier(.215,.61,.355,1)}
.galeri.akis img{transition:transform 1.33s cubic-bezier(.215,.61,.355,1)}
/* Fare büyütmesi açılış süresini devralmasın — orada kendi süresi var */
@media(hover:hover){
  .galeri.akis a:hover img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
}

.galeri.akis figure.kapali a{clip-path:inset(100% 0% 0% 0%)}
.galeri.akis figure.kapali img{transform:translateY(12%)}
/* Aynı satırdaki kareler peş peşe açılsın diye küçük gecikme.
   .12 sn seçildi — referansta kapak öğeleri için .25 vardı, 27 karelik
   galeride o değer sırayı fazla uzatıyordu. Değer HTML'de `--gec`. */
.galeri.akis figure a,
.galeri.akis figure img{transition-delay:var(--gec,0s)}

@media(prefers-reduced-motion:reduce){
  .galeri.akis a{clip-path:none !important}
  .galeri.akis img{transform:none !important}
}

/* İmza satırı — "X.Y. Evi | Bursa için tasarlandı." kalıbı.
   Girişin altında, künyeden önce; sessiz ve tek satır. */
.proje-imza{margin:26px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.5vw,21px);color:var(--aksan)}

/* Gözlemcinin ilk turu: o an ekranda olan kareler GEÇİŞSİZ açılıyor,
   yoksa sayfa açılışında hepsi birden canlanır ve sıçrama olur.
   Sınıfı galeri.js iki kare sonra kaldırıyor. */
.galeri.akis.gecis-yok a,
.galeri.akis.gecis-yok img{transition:none}

/* ══ TEK YATAY ŞERİT ═══════════════════════════════════════════
   25 Ağustos. Kullanıcı: "görsellerin hepsi yatay sıralı, salon girişi
   mutfak vs diye bölümlere ayrılmamış, ekrana baktığımda 3 fotoyu aynı
   anda görebiliyorum… detayını incelemek istediğim görselde üstüne mouse
   ile geldiğimde görsel büyüyor."

   TABAN DİKEY. 861px altında, `prefers-reduced-motion` altında ve JS hiç
   çalışmazsa şerit alt alta akıyor — koreografi.js'in 1. ve 3. kuralı.
   Yatay yalnız aşağıdaki medya sorgusunda açılıyor; anasayfadaki
   `.hizmet-ray` (bkz. yukarısı) tam olarak bunu yapıyor. */
.mod-serit{display:grid;gap:clamp(16px,2vw,26px);justify-items:center}

/* ⚠⚠ BU SORGU galeri.js'teki `seritYatayMi` dizesiyle BİREBİR AYNI OLMALI.
   Ayrışırsa CSS yatay düzeni kurar ama JS şeridi sürmez ve 9 kare ekranın
   sağında erişilemez kalır. `(hover:hover) and (pointer:fine)` dokunmatik
   tabletleri dışarıda bırakıyor. */
@media(min-width:861px) and (hover:hover) and (pointer:fine)
   and (prefers-reduced-motion:no-preference){

  /* Kare boyu YÜKSEKLİKTEN türüyor, genişlik ondan — 12 karenin 12'si de
     dikey 3:4.

     ⚠ İKİ SAYI BİRBİRİNE BAĞLI, ELLE UYUMLU TUTULMAZ. Kare boyu, fare
     büyütmesine BÖLÜNEREK bulunuyor: böylece büyümüş kare menünün altında
     kalan bandı (100svh − --menu-y) tam dolduruyor, bir piksel taşmıyor.
     Taşarsa karenin tepesi opak menünün (z-index 50) arkasında kalıyor.
     Önce ikisi ayrı yazılmıştı (.88 ile 1,14) ve 1,5 px taşıyordu.

     Büyütmeyi değiştirmek için YALNIZ --serit-buyutme'ye dokun; kare boyu
     kendiliğinden doğru kalır. Büyütme arttıkça kare küçülür, ekrandaki
     kare sayısı artar — şu an ekranda ~3,3 kare (1080p'de 3,2). */
  .galeri.akis{
    --serit-buyutme:1.14;
    --serit-ust:12px;                     /* menü ile karenin arası */
    --serit-bant:calc(100svh - var(--menu-y,61px) - var(--serit-ust));
    --serit-boy:calc(var(--serit-bant) / var(--serit-buyutme));
  }

  /* ⚠ ŞERİT BÖLÜMÜNÜN DİKEY PAYI YOK. Burada ÜÇ pay üst üste biniyordu:
     önceki bölümün alt payı (102) + bu bölümün üst payı (102) +
     üreticinin yazdığı inline margin (102). Künye ile ilk kare arasında
     366 px boşluk oluşuyordu (kullanıcı: "çok fazla boş alan yok mu?").
     Şerit nefesini zaten yapış kutusundan alıyor: 100svh içinde ortalı
     ve üstünde menü kadar pay var. Yalnız YATAY düzende sıfırlanıyor —
     dar ekranda şerit dikeye düşüyor ve normal bölüm payına dönüyor. */
  .galeri-serit{padding-top:0;padding-bottom:0}

  /* Kaydırma yolunu veren kutu. Yüksekliğini galeri.js yazıyor
     (ekran + yatay yol); JS yoksa yüksekliği yok ve şerit dikey kalır. */
  .serit-sahne{position:relative}

  .serit-yapis{
    position:sticky;top:0;height:100svh;
    /* Üst pay menü kadar: şerit menünün altındaki banda ortalanıyor,
       yoksa büyüyen kare menünün arkasına giriyor. */
    box-sizing:border-box;
    padding-top:calc(var(--menu-y,61px) + var(--serit-ust));
    /* Alt yazılar kalkınca figür = görselin kendisi oldu, yani karenin
       merkezi artık bandın merkeziyle çakışıyor. Ortalı hizalama + merkezden
       büyüme bandı iki yandan eşit dolduruyor.
       (Alt yazılar varken bu mümkün değildi: yazı altta yer kapladığı için
       karenin merkezi bandın ~35 px yukarısına düşüyor ve büyüyen kare
       opak menünün arkasına giriyordu — kullanıcının gördüğü hata.) */
    display:flex;align-items:center;
    /* ⚠ overflow ŞART, clip-path YETMİYOR. Önce clip-path denendi:
       boyamayı doğru kırpıyor ama TAŞMAYI engellemiyor — ~5500px'lik
       şerit sayfaya yatay kaydırma çubuğu takıyordu (ölçüldü).
       overflow:hidden burada güvenli: yapışkan olan öğenin KENDİSİ, yani
       kendi yapışmasını bozmuyor (bozacağı şey, içindeki başka bir
       sticky öğe olurdu — yok).
       Dikey kırpma sorun değil: fare büyütmesi görselin kendisine
       uygulanıyor ve .88 x 1,14 = 1,003, yani büyümüş görsel bu kutunun
       iç yüksekliğine tam oturuyor. Bkz. --serit-boy notu. */
    overflow:hidden;
  }

  .mod-serit{
    display:flex;width:max-content;gap:var(--k-bosluk);
    padding:0 var(--pay);
    /* Kareler TEPEDEN hizalı: alt yazılar farklı uzunlukta (beş oda
       cümlesi uzun, kalan yedi kısa), ortalanırsa görsellerin üst
       hattı kırılıyor. */
    align-items:flex-start;
    will-change:transform;
  }

  /* ⚠ BEŞİNCİ ÖZGÜLLÜK OLAYI. `.mod-serit figure` (0,1,1) yazılmıştı,
     yukarıdaki `.galeri.akis figure{max-width:calc(var(--kare-boy)…)}`
     (0,2,1) onu eziyordu ve kareler eski dikey ölçüde kalıyordu.
     Seçici `.galeri.akis .mod-serit figure` (0,3,1) yapıldı.
     (Önceki dördü: `.sar`, `.soz.kademeli`, `.kart.cevir`, `.mod-tek figure`.) */
  .galeri.akis .mod-serit figure{
    flex:none;margin:0;
    width:calc(var(--serit-boy) * var(--oran,.75));
    /* ⚠ PANORAMA TAVANI. Konut yenilemenin 12 karesi dikey 3:4'tü, ama
       diğer projelerde oran 2,33'e kadar çıkıyor (ölçüldü). Genişlik
       yükseklikten türediği için tek bir panorama ekrandan geniş
       olabiliyordu — bu tavanla kare en fazla ekran kadar oluyor,
       taşarsa görsel kendiliğinden alçalıyor (width:100% + height:auto). */
    max-width:calc(100vw - (var(--pay) * 4));
    position:relative;z-index:1;
  }

  /* ⚠ BÜYÜYEN ŞEY FİGÜR DEĞİL, GÖRSEL ÇERÇEVESİ (<a>).
     `--serit-boy` bandı büyütmeye böldüğü için 1,14x büyümüş kare bandı
     TAM dolduruyor. clip-path geçişi KORUNMALI — maskeyi o açıyor
     (bkz. .kapali). */
  .galeri.akis .mod-serit figure a{
    display:block;
    transition:transform .55s cubic-bezier(.215,.61,.355,1),
               clip-path 1.2s cubic-bezier(.215,.61,.355,1);
  }
  /* ⚠ İKİ UÇ İÇERİ DOĞRU BÜYÜYOR. Ortadaki kareler iki yana simetrik
     büyüyebiliyor, ama İLK karenin sol kenarı ve SON karenin sağ kenarı
     kutunun dışına taşıp kırpılıyordu (ölçüldü: mutfak panoramasında
     74,6 px). Uçlarda büyüme içeriye çevrildi; ortadakiler simetrik
     kalıyor, yani göze çarpan bir tutarsızlık olmuyor. */
  .galeri.akis .mod-serit figure:first-child a{transform-origin:0 50%}
  .galeri.akis .mod-serit figure:last-child a{transform-origin:100% 50%}

  /* Fare üstüne gelince kare KOMŞULARIN ÜSTÜNE taşarak büyüyor.
     transform yerleşimi etkilemediği için şeridin dizilimi oynamıyor —
     fare gezerken kareler yerinden kaymıyor, tıklaması kolay kalıyor.
     :focus-within klavyeyle gezene de aynı büyümeyi veriyor. */
  /* ⚠ z-index GECİKMELİ GERİ DÖNÜYOR. Ayrık bir özellik olduğu için hover
     bırakılınca anında düşüyor; kare hâlâ 1,14x iken komşusunun altına
     giriyor ve küçülme boyunca (0,55 sn) görünür kırpılma oluyor.
     Tabanda 0,55 sn gecikme, :hover kuralında 0 — girişte anında
     yükseliyor, çıkışta küçülme bitene kadar üstte kalıyor. */
  .galeri.akis .mod-serit figure{transition:z-index 0s .55s}

  @media(hover:hover){
    .galeri.akis .mod-serit figure:hover,
    .galeri.akis .mod-serit figure:focus-within{z-index:5;transition:z-index 0s}
    .galeri.akis .mod-serit figure:hover > a,
    .galeri.akis .mod-serit figure:focus-within > a{
      transform:scale(var(--serit-buyutme));
    }
    /* İç görsel büyütmesi (.galeri a:hover img → scale 1.03) burada
       kapalı: çerçevenin kendisi zaten büyüyor, ikisi üst üste binince
       görsel kendi `overflow:hidden` çerçevesinde kırpılıyordu. */
    .galeri.akis .mod-serit a:hover img{transform:none}
  }

  /* Şerit kayarken büyütme kapalı — sınıfı galeri.js koyup kaldırıyor.
     Fare sabit dururken kareler altından akıyor ve sırayla büyüyüp
     küçülüyordu. `a`ya yazılıyor, `img`e değil: maskenin translateX'ine
     dokunmuyor. */
  .mod-serit.kayiyor figure > a{transform:none !important}

  /* Maske ekseni yatay: perde SAĞDAN açılıyor, içindeki görsel karşı
     yönde kayıyor. Dikey akıştaki inset(100% 0 0 0) + translateY(12%)
     kalıbının 90° dönmüş hâli. Özgüllük (0,4,2) — yukarıdaki
     `.galeri.akis figure.kapali a` (0,3,2) kuralını eziyor. */
  .galeri.akis .mod-serit figure.kapali a{clip-path:inset(0% 0% 0% 100%)}
  .galeri.akis .mod-serit figure.kapali img{transform:translateX(12%)}
}

/* ⚠ 25 Ağustos: yatay şeritte GÖRSEL ALTINA HİÇ YAZI BASILMIYOR
   (kullanıcı: "hiçbir görselin altına yazı yazmamalıyız"). Üretici
   `figcaption` üretmiyor, büyüteçte de yalnız "3 / 13" sayacı var.
   `.galeri figcaption` kuralları (stil.css:927) DURUYOR — şerit dışı bir
   galeri geri gelirse hazır. Vurgu için: */
.galeri figcaption em{font-family:var(--serif);font-style:italic;
  color:var(--aksan)}