/* ============================================================
   BİTAŞ YAPI — Design System  v2
   Aydınlık taban · Koyu lacivert ana renk · Çelik mavisi aksan
   ============================================================ */

/* ============================================================
   MANROPE — YERELDE BARINDIRILAN DEĞİŞKEN FONT
   Kaynak: @fontsource-variable/manrope 5.3.0 · Lisans: OFL-1.1
   (lisans metni: assets/fonts/MANROPE-LICENSE.txt)

   Neden yerel: Google Fonts'a giden istek ziyaretçinin IP adresini
   Google'a taşıyordu (KVKK açısından tartışmalı) ve 3-4 ek tur
   gerektiriyordu (DNS + TLS + CSS + font). Şimdi tek dosya.

   Neden DEĞİŞKEN font: CSS'te font-weight:380 kullanılıyor. Eskiden
   Google'dan yalnızca 400/500/600/700 statik ağırlıkları geliyordu,
   380 sessizce 400'e yuvarlanıyordu. Değişken font 200-800 aralığını
   tek dosyada verdiği için 380 artık gerçekten uygulanıyor.

   format("woff2") KULLANILIR, "woff2-variations" DEĞİL. İkincisi değişken
   font geçiş döneminden kalma standart dışı bir değer; tarayıcı tanımadığı
   format() değerini görünce o src girdisini atlıyor ve font HİÇ yüklenmiyor.
   Değişken eksenleri tarayıcı dosyanın kendisinden okur; desteklenen ağırlık
   aralığını yukarıdaki font-weight:200 800 bildirir.

   Yalnızca latin ve latin-ext alt kümeleri var. Türkçe için ikisi de
   ZORUNLU: ç ö ü latin'de, ğ ş ı İ latin-ext'te. Kiril/Yunan/Vietnam
   alt kümeleri bilinçli olarak alınmadı.
   ============================================================ */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Navy scale (brand) */
  --navy:      #252A50;
  --navy-2:    #343B6B;
  --navy-ink:  #191D38;

  /* Light / paper */
  --paper:     #F7F6F2;
  --paper-2:   #F0EEE8;
  --line:      #E7E4DC;
  --line-2:    #CBC7BD;

  /* Accent — matte brass */
  --brass:     #C79A5B;
  --brass-2:   #B4874D;
  --brass-soft:#D8B57E;

  /* Açık zeminde METİN için koyulaştırılmış pirinç. Aynı skala:
     hue 33° / sat %51, yalnızca açıklık %57 -> %35.
     Üç açık zeminde de AA geçer: paper 5.29 · paper-2 4.94 · paper-3 4.67.
     Karşılaştırma: --brass 2.37:1, --brass-2 2.98:1 — ikisi de geçmiyordu.
     DEKORASYONDA KULLANILMAZ: çizgi, kenarlık, dolgu ve koyu zemin
     üstündeki metin için --brass / --brass-2 / --brass-soft aynen kalır. */
  --brass-ink: #875E2C;

  /* Text */
  --ink:       #171923;
  --ink-mut:   #5E6270;
  --on-navy:   #F2F3F7;
  --on-navy-mut:#A7ADBF;

  /* Type */
  --f-display: "Manrope", Arial, sans-serif;
  --f-body:    "Manrope", Arial, sans-serif;
  --f-mono:    "Manrope", Arial, sans-serif;

  --fs-display: clamp(2.5rem,5vw,4.5rem);
  /* Ic sayfa hero'su: --fs-h2 ile --fs-display arasinda bir kademe.
     Dogrudan --fs-display'e cikilmadi, olculdu: Kurumsal hero'sunun h1'i
     .phero--split icinde ~585px'lik kolonda duruyor ve 4.5rem'de BES
     satira dusup "Insaat" kelimesini tek basina birakiyor; Projeler
     hero'sunda da "projeler." ikinci satira tek kaliyor. Bu kademede
     Kurumsal uc satir, Projeler tek satir (Manrope 700, 1280-2560px). */
  --fs-hero: clamp(2.15rem,3.9vw,3.65rem);
  --fs-h2: clamp(1.875rem,3vw,3rem);
  --fs-h3: clamp(1.375rem,2vw,1.75rem);
  --fs-lead: clamp(1.0625rem,1.5vw,1.25rem);
  --fs-body: 1rem;
  --fs-label: .8125rem;
  --maxw: 1320px;

  /* Sabit header ölçüsü. Üç yerde kullanılıyor: .nav dolgusu, açık mobil
     menünün başlangıç noktası ve çapa hedeflerinin üst payı. Parçalarından
     hesaplanıyor ki .nav dolgusu değişince diğer ikisi kendiliğinden uysun. */
  --logo-h: 48px;
  --nav-pad-y: 1.15rem;
  --nav-pad-y-scrolled: .8rem;
  --header-height: calc(var(--logo-h) + var(--nav-pad-y) * 2);
  --header-height-scrolled: calc(var(--logo-h) + var(--nav-pad-y-scrolled) * 2);
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* Mobil sabit iletişim çubuğunun yüksekliği. Çubuk min-height ile bu
     değeri kullanıyor, footer da aynı değer kadar alt boşluk bırakıyor;
     böylece çubuk sayfanın son satırını örtmüyor. */
  --mcta-h: 52px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --radius: 2px;
  --hair-navy: rgba(255,255,255,.13);
}

*,*::before,*::after{ box-sizing:border-box; }

/* ============================================================
   ERİŞİLEBİLİRLİK — atlama bağlantısı ve klavye odağı
   ============================================================ */

/* Görsel olarak gizli, yalnızca klavyeyle odaklanınca görünür.
   display:none KULLANILMAZ — o durumda odaklanılamaz ve işe yaramaz. */
.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:1000;
  background:var(--navy); color:#fff; padding:.85rem 1.25rem;
  font-family:var(--f-mono); font-size:var(--fs-label);
  border-radius:var(--radius); text-decoration:none;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* Klavye odağı görünür olsun; fareyle tıklamada çerçeve çıkmasın.
   :focus-visible tam bunun için var — tarayıcı girdinin klavyeden mi
   fareden mi geldiğine bakıp karar veriyor. */
:focus-visible{
  outline:2px solid var(--brass-2);
  outline-offset:3px;
  border-radius:2px;
}
/* Koyu zeminlerde pirinç yeterince okunmuyor, açık ton kullanılıyor. */
.nav--over-hero:not(.scrolled) :focus-visible,
.foot :focus-visible,
.section.navy :focus-visible,
.metastrip :focus-visible,
.techband :focus-visible{ outline-color:var(--brass-soft); }
/* Lightbox koyu bir katman; odak halkası beyaz olmalı. */
.lb :focus-visible{ outline-color:#fff; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Çapa hedeflerinin üst payı. Global html{scroll-padding-top} YERİNE
   yalnızca gerçekten çapa hedefi olan öğelere veriliyor; global kural
   bütün id'leri kontrolsüz etkiliyordu.
   Kullanılan çapalar: #iletisim (ana sayfada .contact, alt sayfalarda .cbar),
   #yapim-taahhut (.acblock), #kapsam ve #hizmetler (.section).
   #ustyapi / #altyapi KALDIRILDI — o iki bölüm birleştirildi.
   Yeni çapa eklenirse buraya yazılır.
   DİKKAT: aşağısı ÇOK SATIRLI bir seçici listesi. Araya yorum EKLEMEYİN;
   virgülden sonra gelen yorum listeyi bozar ve css-yapi-denetimi.py bunu
   B maddesi olarak raporlar (bu hata bu dosyada daha önce gerçekten oldu).
   Telafi olmadan çapaya atlarken hedefin üstü sabit menünün altında kalır. */
.contact[id],
.cbar[id],
.acblock[id],
.section[id]{ scroll-margin-top: calc(var(--header-height-scrolled) + 1.5rem); }

/* ============ FAALIYET BLOKLARI — TAM GENİŞLİK FOTOĞRAF ============
   Fotoğraf bölümün tamamını kaplar, üstüne yatay lacivert gradyan biner,
   metin tek kolonda durur; karşı kolon boş kalır ki fotoğraf görünsün.

   KARARTMA OPAKLIĞI ÖLÇÜMLE SEÇİLDİ. Metin --on-navy (#F2F3F7) ve
   fotoğrafın en parlak bölgeleri 230'a çıkabiliyor. O en kötü durumda:
     %65 opaklık -> 5,34:1   %72 -> 6,62:1   %78 -> 7,97:1   %86 -> 10,19:1
   Metin tarafında .88-.92 kullanılıyor (10:1 üzeri), fotoğraf tarafında
   .30-.42 (fotoğraf net görünür). Metin tarafındaki değerleri DÜŞÜRMEYİN;
   uzun gövde metni (~950 karakter) fotoğraf üstünde okunuyor.            */
.acblock--bg{ position:relative; overflow:hidden; background:var(--navy-ink);
  color:var(--on-navy); }
/* Sayfanin ILK bolumu oldugunda: .nav position:fixed ve ust bosluk daha
   once .phero'nun padding-top'undan geliyordu. O bolum kaldirildigi icin
   ust dolgu burada telafi ediliyor; .section'in 4.5rem alt siniri mobilde
   84.8px'lik header'i temizlemiyordu.
   Iki sinifli secici SART: .section{padding-block:...} ayni ozgullukte
   (0,1,0) ve dosyada SONRA geldigi icin tek sinifli hali eziyordu —
   1440px'te tesadufen calisiyor gorunuyordu cunku 9vw zaten yetiyor. */
.section.acblock--ilk{ padding-top:calc(var(--header-height) + clamp(2rem,4vw,3.5rem)); }
.acblock__bg{ position:absolute; inset:0; z-index:0; }
.acblock__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* Metin SAĞDA: gradyan soldan sağa koyulaşır. */
/* Karartma yalnizca METIN tarafinda yogunlasir; sol %30 zayif kalir ki
   fotograf gorunsun. Iki degisiklik yapildi: (1) sag taraf .88/.92'den
   .95/.97'ye cikti, (2) rampa 58%'den 46%'ya cekildi. Ikincisi sart:
   metin kolonu %52'de basliyor ve eski rampada o noktada karartma henuz
   ~.83'teydi; en kotu piksel ikinci paragrafta (--on-navy-mut) 3.81:1
   veriyordu, esik 4.5. Fotografin gorunen kismi %0-40 arasi, oraya
   DOKUNULMADI. */
.acblock__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(25,29,56,.30) 0%,
    rgba(25,29,56,.42) 26%,
    rgba(25,29,56,.95) 46%,
    rgba(25,29,56,.97) 100%); }
/* Metin SOLDA: aynı gradyan aynalanır. */

.acblock__grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:repeat(2,1fr); gap:var(--gutter); align-items:center; }
/* Taban sınıf: iki varyantın paylaştığı ölçü. Metin sütunu fotoğrafın
   üzerinde durduğu için satır uzunluğu sınırlanıyor. */
.acblock__text{ max-width:56ch; }
.acblock__text--sag{ grid-column:2; }

/* Koyu zemin metin renkleri. .section.navy ile aynı dil. */
/* h1 de dahil: ust giris bolumu kaldirildiginda bu bolumun basligi h1
   oldu ve global h1,h2,h3,h4{color:var(--navy)} kurali onu koyu zeminde
   koyu laciverte boyuyordu. */
.acblock--bg h1,.acblock--bg h2{ color:#fff; }
.acblock--bg .sd__body p{ color:var(--on-navy-mut); }
.acblock--bg .sd__body .lead{ color:var(--on-navy); }
/* h3 rengi BURADA veriliyor, yukaridaki h2 kuralinda degil. Sebep: asagida
   (satir ~538) sayfa bolumunde .acblock h3{ color:var(--brass-ink) } var ve
   ozgullugu .acblock--bg h3 ile AYNI (0,1,1); dosyada sonra geldigi icin onu
   ezerdi. Sonuc lacivert zemin uzerinde #875E2C olur ve kontrast 2.88:1'e
   duserdi (--brass-ink ACIK zeminler icin uretilmis bir ton). Bu secici
   (0,2,1) oldugu icin kazanir. Buradaki .sd__body'yi KALDIRMAYIN. */
.acblock--bg .sd__body h3{ color:#fff; border-top-color:var(--hair-navy); }

body{
  margin:0; font-family:var(--f-body); background:var(--paper); color:var(--ink);
  font-size:var(--fs-body); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; line-height:1.15; letter-spacing:-.025em; color:var(--navy); }
p{ margin:0; }

/* Utilities */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--brass-ink); display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); display:inline-block; }
.eyebrow.on-navy{ color:var(--brass-soft); }
.eyebrow.on-navy::before{ background:var(--brass-soft); }

.h-xl{ font-size:var(--fs-display); line-height:1.08; font-weight:700; letter-spacing:-.035em; }
/* .h-xl ile .h-lg arasi kademe — ic sayfa hero basliklari icin.
   line-height ve letter-spacing de araya konumlandirildi; punto buyudukce
   satir araligi ve harf araligi sikilasmali, yoksa baslik gevsek durur. */
.h-hero{ font-size:var(--fs-hero); line-height:1.11; font-weight:700; letter-spacing:-.03em; }
.h-lg{ font-size:var(--fs-h2); line-height:1.15; font-weight:700; letter-spacing:-.025em; }
.h-md{ font-size:var(--fs-h3); line-height:1.25; font-weight:600; letter-spacing:-.015em; }
.lead{ font-size:var(--fs-lead); line-height:1.65; font-weight:400; color:var(--ink-mut); }
.lead.on-navy{ color:var(--on-navy-mut); }

.section{ padding-block:clamp(4.5rem,9vw,9rem); position:relative; }
.section.navy{ background:var(--navy); color:var(--on-navy); }
.section.navy h1,.section.navy h2,.section.navy h3{ color:#fff; }
.section.paper-2{ background:var(--paper-2); }
.sec-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:62ch; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.9375rem; font-weight:600;
  letter-spacing:0; text-transform:none; padding:1.05rem 1.6rem; border:1px solid transparent;
  border-radius:var(--radius); transition:all .4s var(--ease); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--primary{ background:var(--brass); color:#252A50; }
.btn--primary:hover{ background:var(--brass-2); color:#252A50; }
.btn--dark{ background:var(--navy); color:#fff; }
.btn--dark:hover{ background:var(--navy-2); }
.btn--line{ border-color:var(--line-2); color:var(--navy); }
.btn--line:hover{ border-color:var(--brass); color:var(--brass-ink); }

/* ============ NAV ============ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:var(--nav-pad-y) var(--gutter); transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom:1px solid transparent; }
/* JS yoksa .scrolled sınıfı hiç eklenmez; nav zeminsiz kalır ve koyu hero
   için beyaz olan logo/bağlantılar açık bölümlerin üzerinde okunmaz olur.
   Bu yüzden JS yokken nav kalıcı olarak "kaydırılmış" görünümde durur. */
.nav.scrolled,
html:not(.js) .nav{ background:rgba(247,246,242,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  padding-block:var(--nav-pad-y-scrolled); box-shadow:0 8px 30px rgba(25,29,56,.06); }
/* Menü ortada dursun: yan gruplar (.brand ve .nav__right) eşit flex ağırlıkta.
   "Bize Ulaşın" düğmesi kaldırıldığı için sağ grup daraldı; eşit flex
   olmadan menü sağa kayıyor. */
.brand{ flex:1 1 0; display:flex; align-items:center; gap:.72rem; color:var(--navy); }
.nav__menu{ display:flex; align-items:center; justify-content:center; gap:2.1rem; }
.nav__link{ font-size:.9375rem; font-weight:500; color:var(--navy); opacity:.82; transition:opacity .3s, color .3s; }
.nav__link:hover{ opacity:1; color:var(--brass-ink); }
.nav__right{ flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:1.3rem; }
/* Boyut: tasarım sistemindeki etiket token'ı (--fs-label = .8125rem).
   Eski .74rem değeri, kaldırılan "Bize Ulaşın" düğmesiyle eşleşmek içindi.
   Soluklaştırma EBEVEYNDE DEĞİL, çocuklarda yapılır: ebeveyndeki opacity
   aktif dile de uygulanıp TR'yi 2,35:1 kontrasta düşürüyordu. Renk
   değerleri değişmedi; .active tam opak olduğu için 3,65:1'e çıktı. */
.lang{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--navy); }
.lang .active{ color:var(--brass-ink); opacity:1; }
/* Sayfası henüz hazır olmayan dil: bağlantı değil, pasif metin.
   TR anasayfada EN artık GERÇEK BAĞLANTI (en/index.html); .soon yalnızca
   sayfası hâlâ üretilmemiş bölümlerde kullanılıyor. */
.lang .soon{ opacity:.7; cursor:default; }
/* Aktif olmayan dilin BAĞLANTI hâli: ayırıcı "/" ile karışmasın diye
   .lang span{opacity:.4} kuralının dışında kalıyor, hover'da tam opak. */
.lang a{ color:var(--navy); opacity:.72; text-decoration:none; transition:opacity .3s; }
.lang a:hover,
.lang a:focus-visible{ opacity:1; }
.lang span{ opacity:.4; }  /* yalnızca ayırıcı "/" — .active ve .soon bunu ezer */
/* Burger görsel olarak 36,8 × 27,6 px; dokunma alanı bunun altında kalıyordu.
   ::after ile görünmez 44 × 44 px alan ekleniyor — yerleşim değişmiyor. */
.burger{ display:none; position:relative; flex-direction:column; gap:5px; background:none; border:0; padding:.4rem; }
.burger::after{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); }
.burger span{ width:24px; height:1.6px; background:var(--navy); transition:.3s; }
/* Menü açıkken arka sayfa kaymasın. Lightbox'taki body.lb-open ile aynı kalıp. */
body.menu-open{ overflow:hidden; }

/* ============ HERO (koyu, arka planda video) ============
   Katman sırası: video(0) · atmo(1) · veil(2) · grain(3) · içerik(4)   */
/* min-height iki kez: svh birimini desteklemeyen tarayıcı ilkini kullanır.
   Yedek olmadan kural tamamen yok sayılıyor ve hero tam ekran olmuyordu. */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  background:#191D38; color:#fff; overflow:hidden; }
/* Poster CSS ZEMINI olarak da veriliyor. Sebep: JS kapaliyken <video>
   hicbir zaman oynamiyor ve tarayici pause halindeki videoya kendi
   oynatma gostergesini ekliyor. O durumda video ogesi TAMAMEN gizleniyor
   (asagidaki html:not(.js) kurali) ve geride bu zemin kaliyor.
   object-position:center 42% ile ayni hiza kullanildi ki JS acik/kapali
   arasinda gorsel fark olmasin. */
/* ZOOM: transform .hero__bg'ye veriliyor, videoya DEGIL. Poster bu ogenin
   ARKA PLANI, video ise icinde; ikisi birlikte olceklenmezse dongu
   solmasinda (video -> poster) gorunur ziplama olur — poster videonun
   1. karesi oldugu icin dikis tam burada fark edilir. Tek bildirimle ikisi
   de olcekleniyor. .hero{overflow:hidden} tasani kirpiyor. Veil ve grain
   .hero__bg DISINDA kaldigi icin olceklenmiyor. */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  transform:scale(1.04); background:#191D38
  url("../video/hero-poster-v5.jpg") center 42% / cover no-repeat; }

/* JS kapali: video ogesi kaldirilir, yukaridaki poster zemini gorunur.
   Boylece tarayicinin oynatma gostergesi hic olusmaz. */
html:not(.js) .hero__video{ display:none; }
/* opacity gecisi SART: video bitince basa alinirken kisa bir solma yapiliyor.
   Altindaki .hero__bg zemini POSTERDIR ve poster tam olarak 1. karedir — bu
   yuzden solma sirasinda gorulen goruntu videonun devam edecegi kareyle ayni,
   dikis gorunmez. Sure JS'teki setTimeout ile AYNI olmali (450ms). */
.hero__video{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 42%; background:#191D38;
    transition:opacity .45s var(--ease); }
.hero__atmo{ position:absolute; inset:-22%; z-index:1; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.20; will-change:transform;
  background:radial-gradient(45% 55% at 32% 38%, rgba(226,193,138,.85), rgba(226,193,138,0) 70%);
  animation:heroAtmo 24s ease-in-out infinite alternate; }
/* ---- HERO KARARTMASI (.hero__veil) ----
   ONCE: tek dikey gradyan, tam genislik (.45 / .13 / .29 / .64). Metin
   solda oldugu icin SAGDAKI karartma bosa gidiyordu; video gereksiz
   yerde kapaliydi.
   SIMDI iki katman:
     yatay  = metnin oldugu SOL tarafi tasir, saga dogru sifira iner
     dikey  = ustte nav'i, altta h1/CTA tabanini oturtan hafif destek
   Bilesik ortuculuk 1-(1-a)(1-b):
     sol alt  ~.62   ·  sag orta ~.05  ·  sag alt ~.36  ·  sag ust ~.26
   (tek dikey gradyanli surumde bunlar .64 / .29 / .64 / .45 idi)

   16. TURDA SOL TARAF BIR TUR DAHA ACILDI (firma istegi: "sol basi %5-8
   azalt, ortayi biraz daha erken ac, sagi oldugu gibi birak"):
     yatay duraklar  .52/.40@28/.16@60  ->  .41/.31@26/.15@58
   Bilesik degisim (analitik):
     sol alt   .693 -> .622   (-7 puan, istenen .60-.63 bandinda)
     h1 bandi  .521 -> .435   (-8.6 puan)
     sol ust   .645 -> .563
     orta      .273 -> .231
     sag orta  .050 -> .050   AYNI
     sag alt   .360 -> .360   AYNI
     sag ust   .260 -> .260   AYNI
   DIKKAT: firmanin verdigi ornek duraklar (.62/.40/.18/.10) DOGRUDAN bu
   yatay katmana konsa sol alt .757, sag orta .145 olurdu — yani ikisi de
   KOYULASIRDI. O degerler TEK gradyanli bir kurgu varsayiyor; buradaki
   veil IKI katman ve rapor edilen sayilar BILESIK. Istenen SONUC degerleri
   hedeflenip yatay katman ona gore cozuldu.
   Renk tokeni #191D38 (rgba(25,29,56)) KORUNDU; onerilen rgba(18,23,55)
   yeni bir renk olurdu ve fark 7 RGB puani, gozle ayirt edilemez.
   Deger degistirilecekse metin bandinin kontrasti OLCULEREK dogrulanmali
   (hero-olc.py: metni gizleyip zemin pikselinden beyaz metin kontrasti). */
.hero__veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(25,29,56,.41) 0%,
      rgba(25,29,56,.31) 26%,
      rgba(25,29,56,.15) 58%,
      rgba(25,29,56,.04) 84%,
      rgba(25,29,56,0) 100%),
    linear-gradient(180deg,
      rgba(25,29,56,.26) 0%,
      rgba(25,29,56,.05) 28%,
      rgba(25,29,56,.05) 58%,
      rgba(25,29,56,.36) 100%); }
/* GRAIN hafifletildi. DIKKAT: statik opacity yalnizca hareket azaltma
   tercihinde (animasyon kapali) gecerli; normalde ASAGIDAKI @keyframes
   heroGrain degeri eziyor. Bu yuzden IKISI DE dusuruldu:
     statik  .05  -> .035
     keyframe .035/.07 -> .022/.045
   Tamamen kaldirilmadi; grain videonun sikistirma bantlasmasini gizliyor. */
.hero__grain{ position:absolute; inset:0; width:100%; height:100%; z-index:3;
  opacity:.035; mix-blend-mode:overlay; pointer-events:none;
  animation:heroGrain 3s steps(2) infinite; }
@keyframes heroAtmo{ 0%{ transform:translate(-7%,-3%) scale(1); } 100%{ transform:translate(9%,5%) scale(1.18); } }
@keyframes heroGrain{ 0%,100%{ opacity:.022; } 50%{ opacity:.045; } }
@media (prefers-reduced-motion:reduce){ .hero__atmo,.hero__grain{ animation:none; } }

/* MOBIL KARARTMA — masaustunun yatay (sol koyu / sag acik) kalibi dar
   ekranda CALISMIYOR: 760px altinda h1 neredeyse TUM genisligi kapliyor,
   yani gradyanin sifira indigi sag tarafa tasiyor. Olculdu (metni gizleyip
   zemin pikselinden beyaz metin kontrasti, en kotu %5):
     mobil kural OLMADAN : 390px h1 2.42 · 480px 2.63 · 600px 3.02
                           (AA buyuk metin esigi 3.0 — 390 ve 480 ALTINDA)
     mobil kural ILE     : 390px h1 4.36 · 480px 4.50 · 600px 4.81
                           eyebrow 4.04 / 4.38 / 5.63
   Degisiklik oncesi referans 390px'te h1 3.40 · eyebrow 2.93 idi; yani
   mobil bu turda DAHA IYI oldu.
   Kirilma 660px civarinda olculdu; yeni bir sayi uretmemek icin mevcut
   760px kirilma noktasi kullanildi (700px'te de kural devrede, zarari yok).
   Yatay bilesen burada cok hafif: video mobilde de gorunur kaliyor. */
@media (max-width:760px){
  .hero__veil{
    background:
      linear-gradient(90deg,
        rgba(25,29,56,.30) 0%,
        rgba(25,29,56,.20) 60%,
        rgba(25,29,56,.12) 100%),
      linear-gradient(180deg,
        rgba(25,29,56,.28) 0%,
        rgba(25,29,56,.08) 26%,
        rgba(25,29,56,.26) 58%,
        rgba(25,29,56,.62) 100%); }
}

.hero__inner{ position:relative; z-index:4; width:100%;
  /* Metin blogu bir tik ASAGI cekildi (firma istegi): alt bosluk
     clamp(2.5rem,5vw,4rem) -> clamp(1.6rem,3.2vw,2.6rem).
     Olculdu — CTA'nin altinda kalan bosluk:
       1920/1440: 118px -> 96px · 1024: 106 -> 87 · 390: 94 -> 80
     Cakisma kontrolu: sag kenardaki "KAYDIR" ipucuyla cakisma YOK;
     mobilde sabit iletisim cubugu (.mcta, 53px) ile CTA arasinda 27px
     pay kaliyor. Daha fazla indirilecekse once o payi olcun. */
  padding-bottom:clamp(1.6rem,3.2vw,2.6rem); padding-top:9rem;
  /* HERO METNI LOGO HIZASINDA (firma istegi).
     Onceki durum: .hero__inner ayni zamanda .wrap tasiyor, yani
     max-width:1320px + margin-inline:auto ile ORTALANIYORDU. Nav ise TAM
     GENISLIK ve gutter kadar iceriden basliyor. Sonuc: hizalar hicbir
     genislikte tutmuyordu (olculdu):
       1920px logo 64  / yazi 344      1280px logo 51.2 / yazi 31.2
       1440px logo 57.6 / yazi 97.6    1024px logo 41   / yazi 21
     max-width kaldirildi ve padding-left'teki "-1.25rem" cekmesi iptal
     edildi; artik iki yan da .wrap'in padding-inline:var(--gutter)
     degerini kullaniyor, yani metin logoyla AYNI sutundan basliyor.
     SATIR UZUNLUGU BOZULMAZ: .hero h1 kendi max-width:16ch sinirini
     tasiyor, kapsayici genislemesi basligi germiyor. */
  max-width:none; }
/* Hero metni biraz sola cekildi. YALNIZCA padding-left yaziliyor: .wrap
   padding-inline ile iki yani birlikte veriyor, padding-inline yazmak sag
   tarafi da sifirlardi.
   max() SART: --gutter = clamp(1.25rem,4vw,4rem), yani dar ekranda 20px.
   Duz calc(var(--gutter) - 1.25rem) mobilde 0/negatif verip metni ekran
   kenarina yapistiriyordu (olculdu). max() alt siniri 1.25rem'de tutuyor,
   360-760px arasi kayma OLMUYOR.
   !important gerekmiyor: .wrap ve .hero__inner ayni ozgullukte (0,1,0),
   .hero__inner dosyada SONRA geldigi icin kazaniyor.
   Kayma miktarini degistirmek icin yalnizca sondaki 1.25rem'e dokun. */
.hero__eye{ margin-bottom:1.6rem; color:#D8B57E; }
.hero h1{ max-width:16ch; margin-bottom:1.6rem; color:#fff;
  font-size:clamp(2.3rem,4.3vw,4rem); }
/* Punto .h-xl'in --fs-display'inden (clamp(2.5rem,5vw,4.5rem)) bir kademe
   asagi cekildi. .h-xl SINIFINA dokunulmadi: kvkk.html ve 404.html de o
   sinifi kullaniyor ve orada kucultmek istenmiyor. Ust sinir 4rem, yani
   ic sayfa hero'larinin --fs-hero'sundan (3.65rem) hala buyuk — ana sayfa
   basligi en buyuk kalsin diye. max-width 16ch oldugu icin satir kirilimi
   punto ile birlikte olcekleniyor, kirilim deseni degismiyor. */
.hero h1 .accent{ color:#D8B57E; font-style:italic; font-weight:380; }
.hero__cta{ display:flex; justify-content:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:3.4rem; }
.hero .btn--line{ color:#fff; border-color:rgba(255,255,255,.55); }
.hero .btn--line:hover{ background:#fff; color:var(--navy); border-color:#fff; }

/* HERO CTA — yalnizca hero icindeki .btn--dark. Genel .btn--dark kurali
   (satir ~273) DOKUNULMADI; ileride baska yerde kullanilirsa standart tam
   opak lacivert haliyle kalir.
   Ozgulluk notu: .btn--dark:hover ile .hero__cta .btn--dark AYNI ozgullukte
   (0,2,0); bu blok dosyada SONRA geldigi icin normal durumu kazaniyor,
   hover icin ayrica .hero__cta .btn--dark:hover (0,3,0) yazildi.
   OLCU DEGISMEDI: .btn zaten "border:1px solid transparent" tasiyor, burada
   yalnizca RENK veriliyor — kutu 1px bile buyumuyor (olculdu).
   Blur/backdrop-filter, golge ve yeni gecis EKLENMEDI; dolgu gecisi .btn'in
   mevcut transition:all .4s kuralindan geliyor. */
.hero__cta .btn--dark{
  background:rgba(37,42,80,.35);
  border-color:rgba(255,255,255,.22); }
.hero__cta .btn--dark:hover{
  background:rgba(37,42,80,.52); }
.scrollcue{ position:absolute; right:var(--gutter); bottom:1.6rem; z-index:4; writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.72); display:flex; align-items:center; gap:1rem; }
.scrollcue::after{ content:""; width:1px; height:46px; background:linear-gradient(var(--brass),transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ============ TRUST (navy) ============ */

/* ============ ABOUT ============ */
.about__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.about__media{ position:relative; }
.about__copy h2{ margin:1.2rem 0 1.6rem; }
.about__copy p + p{ margin-top:1.1rem; }
.about__more{ margin-top:2rem; }

/* plate (image placeholder) */
.plate{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--navy); }
.plate__corner{ position:absolute; width:14px; height:14px; z-index:2; border-color:var(--brass-soft); }
.plate__corner.tl{ top:.8rem; left:.8rem; border-top:1px solid; border-left:1px solid; }
.plate__corner.br{ bottom:.8rem; right:.8rem; border-bottom:1px solid; border-right:1px solid; }

/* ============ SERVICES (light) ============ */

/* ---- ANA SAYFA FAALIYET ALANLARI (.fa-head / .alanlar / .fa-foot) ----
   Bolum sadelestirildi. KALDIRILANLAR: .section__grid (teknik SVG izgarasi
   + egik cizgi), dort hucreli .fa tablo duzeni, .fa__circle dairesel ok
   hucresi, tam genislik hover bandi ve .section--clip.
   Gerekce: izgara/hucre dili hemen asagidaki .techgrid ("Calisma
   Yaklasimimiz") bolumunu tekrar ediyordu; iki bant birbirinin kopyasi
   gibi okunuyordu.
   Yeni kurgu SIFIR yeni bilesen uretiyor — punto, renk ve buton mevcut
   sistemden: .eyebrow, .h-md, .lead, .btn.btn--line. Fotograf, ikon,
   animasyon, kutuphane EKLENMEDI. reveal/data-d sistemi aynen korundu.
   DIKEY AYRAC YOK. Tek yatay ayirici .alanlar'in ust cizgisi; ikinci
   satirin ust cizgisi de iki satiri ayiriyor. Kart, kapali kutu, dolgulu
   panel, golge, kose yuvarlatma kullanilmiyor.
   DOLGU: komsu bolumler .section ile clamp(4.5rem,9vw,9rem) kullaniyor.
   Bu bolum onun ~%46'si (4.2vw) — zeminli/sikistirilmis bir bant oldugu
   icin daha dar dolgu tasarima uygun; orijinal .section--fa da %82 ile
   zaten komsulardan darsti. Daha asagi cekmek (3.4vw = %38) bolumu
   komsulara yapistiriyordu; daha yukari cekmek (5.8vw = %65) bolumu
   eskisinden UZUN yapiyordu, cunku yeni icerik (6 kategori + buton)
   eskisinden ~76px daha yuksek. Uc aday sayfa akisi icinde
   karsilastirilarak secildi. */
/* ---- BOLUM YUZEYI ----
   Sorun: bolum komsu beyaz bolumlerden ayrisiyordu ama yuzeyi dumduz ve
   bostu. Cozum fotograf/ikon/bilesen degil, yalnizca zemin ve ton.

   YENI RENK DEGISKENI URETILMEDI. Onerilen uc deger mevcut palette ΔE<2
   ile zaten var (olculdu):
     #F3F0E8 -> --paper-2 #F0EEE8   ΔE 1.30
     #F8F6F1 -> --paper   #F7F6F2   ΔE 0.62
     #EAE5DA -> --line    #E7E4DC   ΔE 1.76
   Gradyanin derin ucu --line'in %60 yogunlugu (= #EBE8E1). rgba ile
   veriliyor cunku CSS'te degiskene alfa uygulamak color-mix gerektiriyor
   ve dosyada hic kullanilmiyor; --hair-navy de ayni sekilde ham rgba.
   231,228,220 = --line'in kanallari.

   NEDEN DAHA KOYU DEGIL: palet siniri. --brass-ink (faaliyet numaralari)
   --paper-2 uzerinde 4.94, AA esigi 4.5 — yalnizca 0.44 pay var.
   --ink-mut (aciklama metni) 5.24, payi 0.74. Yuzey #E7E4DC'ye kadar
   koyulastirilirsa brass-ink 4.51'e, ::after katmani altinda 4.32'ye
   dusuyor ve AA KAYBEDILIYOR (olculdu). Bu yuzden derin uc %60'ta
   kesildi ve pseudo opakliklari dusuk tutuldu. Daha derin bir tas yuzey
   isteniyorsa kucuk punto renklerinin de koyulasmasi gerekir — o palet
   degisikligi kapsam disi.

   Ton farki bilincli olarak kucuk (luminans 0.073): "gradient var"
   dedirtmemesi gerekiyor, yalnizca yuzeyin duz olmadigi hissedilmeli. */
.section.section--fa{
  overflow:hidden; isolation:isolate;
  background:
    linear-gradient(135deg,
      rgba(231,228,220,0)   0%,
      rgba(231,228,220,.30) 42%,
      rgba(231,228,220,.60) 100%),
    var(--paper-2);
}
/* .section.paper-2 (0,2,0) ile ayni ozgullukte ve dosyada ONDAN SONRA
   geldigi icin gradyan kazaniyor — HTML'deki paper-2 sinifi kaldirilmadi,
   fallback olarak duruyor (gradyan desteklenmezse ayni aile). */

/* Ton sur ton yuzeyler. Icerik kutusu DEGIL, yalnizca arka plan katmani.
   isolation:isolate ile z-index:-1 bolumun kendi zemininin USTUNE,
   iceriginin ALTINA cizilir. Dikdortgen; daire/blob/dalga/grid YOK. */
.section--fa::before,
.section--fa::after{ content:""; position:absolute; pointer-events:none;
  z-index:-1; }
/* Duz rgba dolgu DENENDI ve BASARISIZ: dusuk opaklikta bile ic kenarlar
   keskin cizgi olarak goruluyordu — 1440px'te x=835 ve y=461'de net
   dikdortgen kenari (ekran goruntusuyle dogrulandi). Spec "kutu gibi
   gorunmesin" diyor. Cozum: her yuzeyin ICINDE saydama inen bir
   linear-gradient. Bu bir blur/glow efekti DEGIL; sadece ic kenari
   yumusatiyor. Yuzeyler ayrica bolum sinirlarinin disina tasiyor,
   dis kenarlari overflow:hidden kirpiyor.
   Tepe opakliklari (.24 / .11) erisilebilirlikle sinirli: .30/.14'te
   sol alt kosede --brass-ink 4.59'a dusuyordu (AA 4.5, pay yok). */
/* sag ust: genis, cok acik; sol-asagi yonunde saydama iner */
.section--fa::before{ top:-6%; right:-4%; width:46%; height:64%;
  background:linear-gradient(225deg,
    rgba(255,255,255,.24) 0%,
    rgba(255,255,255,0) 68%); }
/* sol alt: daha koyu ama cok hafif; sag-yukari yonunde saydama iner.
   203,199,189 = --line-2'nin kanallari. */
.section--fa::after{ left:-4%; bottom:-6%; width:34%; height:42%;
  background:linear-gradient(45deg,
    rgba(203,199,189,.11) 0%,
    rgba(203,199,189,0) 70%); }

/* Dikey bosluk komsu .section'in (clamp(4.5rem,9vw,9rem)) ~%87'si,
   yani ~%13 daha az. Bolum renkli oldugu icin onceki denemedeki %46'lik
   dar dolgu artik uygun degil — yuzeyin nefes almasi gerekiyor. */
.section--fa{ padding-block:clamp(3.9rem,7.8vw,7.7rem); }
/* eyebrow ile baslik arasi bu bolumde daraltildi (global .eyebrow
   margin-bottom 1.6rem). Yalnizca bu bolume scope'lu — diger bolumlerin
   ritmi degismiyor. */
.section--fa .eyebrow{ margin-bottom:.9rem; }

/* Iki kolon: solda baslik, sagda aciklama. Esit genislik — baslik 22ch'e,
   aciklama 58ch'e sinirli, boylece iki kolon yaklasik ayni yuksekligi
   tutuyor ve blok gereksiz uzamiyor. */
.fa-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.2vw,3.6rem); align-items:start; margin-top:.5rem; }
.fa-head h2{ margin:0; max-width:30ch; }
.fa-head .lead{ margin:0; max-width:58ch; }

/* Uc kolon x iki satir. Kolon arasi gap KULLANILMIYOR: bosluk hucre
   dolgusundan geliyor, boylece ikinci satirin ust cizgisi satir boyunca
   KESINTISIZ gidiyor (gap olsaydi cizgi kolon araliklarinda kirilirdi).
   Ayni teknik .kapsam'da da kullaniliyor.
   nth-child adimi sutun sayisiyla birlikte degismek ZORUNDA — 3 sutunda
   ikinci satir 4. ogeden, 2 sutunda 3., tek sutunda 2. ogeden basliyor. */
.alanlar{ list-style:none; margin:clamp(1.4rem,2.2vw,1.9rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-2); }
.alanlar__item{ min-width:0; display:flex; align-items:baseline; gap:.85rem;
  padding:.8rem 1.5rem .8rem 0; }
.alanlar__item:nth-child(n+4){ border-top:1px solid var(--line-2); }
/* Numara --brass-ink, --brass DEGIL: --brass acik zeminde 2.21 kontrast
   veriyor ve kucuk puntolu metin icin AA esigini (4.5) gecmiyor.
   --brass-ink 4.94 — ayni pirinc ailesi, erisilebilir tonu. */
.alanlar__no{ font-family:var(--f-mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.08em; color:var(--brass-ink); flex-shrink:0; }
.alanlar__ad{ font-family:var(--f-display); font-size:1.0625rem;
  font-weight:500; line-height:1.35; color:var(--navy);
  overflow-wrap:break-word; }

/* Buton sag altta. Yeni buton stili URETILMEDI. */
.fa-foot{ display:flex; justify-content:flex-end;
  margin-top:clamp(1rem,1.6vw,1.4rem); }

/* ============ PROJECTS ============ */
.proj__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }

/* ============ WHY US ============ */
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:3rem; border:1px solid var(--line); }
.why__cell{ background:var(--paper); padding:2.4rem 1.8rem; }
.section.paper-2 .why__cell{ background:var(--paper-2); }
.why__idx{ font-family:var(--f-mono); font-size:.78rem; color:var(--brass-ink); }
.why__cell h3{ font-size:1.32rem; margin:1.6rem 0 .8rem; color:var(--navy); }
.why__cell p{ color:var(--ink-mut); font-size:.96rem; }


/* ============ PROCESS ============ */
.proc__grid{ margin-top:3.2rem; }
.proc__row{ display:grid; grid-template-columns:9rem 1fr; gap:2rem; padding:2rem 0; border-top:1px solid var(--line); align-items:start; }
.proc__row:last-child{ border-bottom:1px solid var(--line); }
.proc__num{ font-family:var(--f-mono); font-size:.86rem; color:var(--brass-ink); letter-spacing:.06em; padding-top:.4rem; }
.proc__c h3{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600; color:var(--navy); }
.proc__c p{ color:var(--ink-mut); margin-top:.7rem; max-width:62ch; }

/* ---- Ozet kartlari (KVKK sayfasi) ----
   .scope izgarasini yeniden kullanmak yerine kendi izgarasi var: ozet
   maddeleri farkli uzunlukta ve 2 kolonda daha iyi okunuyor. */
.kvsum{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin:2.4rem 0 0; }
.kvsum__c{ background:var(--paper); padding:1.9rem 1.7rem; }
.kvsum__c .num{ font-family:var(--f-mono); font-size:.72rem; color:var(--brass-ink); }
.kvsum__c h3{ font-size:1.06rem; margin:1rem 0 .6rem; color:var(--navy); }
.kvsum__c p{ color:var(--ink-mut); font-size:.93rem; }

/* ---- Indirilebilir belge karti ----
   Bicim ve boyut metin olarak yaziliyor: kullanici baglantiya basmadan
   once neyi indirecegini bilmeli. download niteligi dosya adini korur. */
.dl{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  margin-top:2.4rem; }
.dl__i{ display:flex; align-items:center; gap:1.4rem; justify-content:space-between;
  flex-wrap:wrap; background:var(--paper); padding:1.6rem 1.7rem;
  transition:background .3s var(--ease); }
.dl__i:hover{ background:var(--paper-2); }
.dl__t{ min-width:0; }
.dl__t strong{ display:block; font-family:var(--f-display); font-size:1.06rem;
  font-weight:600; color:var(--navy); }
.dl__t span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--ink-mut); }
.dl__b{ flex:none; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.8rem; font-weight:600;
  color:var(--brass-ink); }
.dl__i:hover .dl__b{ color:var(--navy); }
.dl__b svg{ width:15px; height:15px; }

@media (max-width:760px){
  .kvsum{ grid-template-columns:1fr; }
}


/* ============ HUKUKI METIN SAYFALARI ============
   Uzun metin okunabilirligi icin olculu satir uzunlugu, numarali bolum
   basliklari ve tablo stili. Word cikti gorunumunden kacinmak icin:
   basliklar sitenin mono/pirinc numaralandirma dilini kullaniyor, govde
   metni --ink-mut, satir uzunlugu 68ch ile sinirli.                      */
.legal{ max-width:68ch; }
.legal__meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--ink-mut); padding-bottom:1.4rem; border-bottom:1px solid var(--line);
  margin-bottom:3rem; }

/* Belgeler blogu: ustundeki metinden daha genis ayrilir. Indirme kartlari
   ayri bir eylem alani; ozet metniyle ayni ritimde durunca birbirine
   karisiyordu. */
.legal--ayri{ margin-top:clamp(3rem,5vw,4.6rem); }

/* Bolum basligi. Numaralandirma KALDIRILDI (4 bolumluk sayfada numara
   deger katmiyordu); bu yuzden flex de gerekmiyor. */
.legal h2{ font-size:clamp(1.32rem,2vw,1.7rem); margin:3.4rem 0 1.2rem;
  padding-top:2rem; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal h3{ font-size:1.08rem; margin:2.2rem 0 .8rem; color:var(--navy); }
.legal p{ color:var(--ink-mut); }
.legal p + p{ margin-top:1.1rem; }
.legal strong{ color:var(--ink); font-weight:600; }

/* Listeler: liste isareti pirinc, metin gövde renginde. */
.legal ul{ list-style:none; margin:1.1rem 0; }
.legal ul li{ position:relative; padding-left:1.5rem; color:var(--ink-mut); }
.legal ul li + li{ margin-top:.7rem; }
.legal ul li::before{ content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--brass); }



/* Iletisim/veri sorumlusu kutusu */
.legal__box{ margin:2rem 0; padding:1.6rem 1.8rem; background:var(--paper-2);
  border-left:2px solid var(--brass); }
.legal__box p{ color:var(--ink); }
.legal__box p + p{ margin-top:.5rem; }

@media (max-width:600px){
  .legal h2{ flex-direction:column; gap:.4rem; }
  }


/* ============ ILETISIM SERIDI + KAPANIS FOOTER'I ============
   Dort kolonlu buyuk footer KALDIRILDI (adres/telefon/e-posta/menu
   tekrari). Yerine iki ince katman:
     .cbar  — yalnizca ALT SAYFALARDA. #iletisim CAPASINI TASIR.
     .foot  — 38 sayfada ayni: logo + telif + KVKK, tek satir.
   Ana sayfada .cbar YOK: orada tam .contact bolumu (harita + adres +
   telefon + e-posta + calisma saatleri + yol tarifi) zaten var ve
   #iletisim capasi o bolumde. */

/* ---- Iletisim seridi (alt sayfalar) ----
   Nav'daki "Iletisim" baglantisi ve mobildeki sabit .mcta cubugu bu
   sayfalarda #iletisim'e atliyor; capa eskiden footer'in .foot__contact
   blogundaydi, simdi burada. Zemin --navy, footer --navy-ink: iki koyu
   ton arasinda hafif bir kademe olusuyor, beyaz bosluk yok. */
.cbar{ background:var(--navy); color:var(--on-navy-mut);
  border-top:1px solid var(--hair-navy); }
.cbar__line{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.35rem .9rem; margin:0;
  padding-block:1.15rem; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.03em; }
.cbar__line a{ color:var(--on-navy-mut); transition:color .3s; }
.cbar__line a:hover{ color:#fff; }
/* Ayirici nokta: --hair-navy (%13) glif icin fazla silik, %28 kullaniliyor. */
.cbar__sep{ color:rgba(255,255,255,.28); }

/* ---- Kapanis footer'i (38 sayfa) ----
   Tek satir; masaustunde 70-90px araligi hedeflendi (olculen 78px).
   Buyuk padding, kolon sistemi, aciklama metni ve tekrar eden menu
   baglantisi YOK. Ayirici sekil/dalga/clip-path yok, yalnizca ince
   hair-navy cizgi. */
.foot{ background:var(--navy-ink); color:var(--on-navy); }
.foot__row{ display:flex; align-items:center; gap:1.5rem;
  min-height:78px; padding-block:.9rem;
  border-top:1px solid var(--hair-navy); }
.foot__brand{ display:block; flex-shrink:0; }
.foot__copy{ margin:0; font-family:var(--f-mono); font-size:.72rem;
  color:var(--on-navy-mut); letter-spacing:.04em; }
/* .foot__end — KVKK baglantisi + sosyal ikonlar birlikte saga yaslanir.
   margin-left:auto artik .foot__legal'de DEGIL burada: ikisi ayri ayri
   itilirse aradaki mesafe .foot__row'un 1.5rem gap'ine esitlenir ve
   ikonlar KVKK'nin "yaninda" degil uzaginda kalir. */
.foot__end{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.foot__legal{ font-family:var(--f-mono);
  font-size:.72rem; color:var(--on-navy-mut); letter-spacing:.04em;
  transition:color .3s; }
.foot__legal:hover{ color:#fff; }

/* SOSYAL IKONLAR — su an PASIF (adres verilmedi).
   Isaretleme <span>, <a href="#"> DEGIL: bos capa tiklanabilir gorunup
   hicbir yere gitmez ve klavyeyle odaklanir. Pasif oge sitede zaten
   <span class="soon"> kalibiyla temsil ediliyor (nav'daki EN) — ayni
   kalip kullanildi.
   ADRESLER GELINCE: span -> <a class="foot__soc" href="..." target="_blank"
   rel="noopener">, soon/role/aria-disabled kalkar, aria-label sadeleşir.
   CSS'te yapilacak bir sey yok; a.foot__soc kurallari hazir.
   KONTRAST (olculdu, zemin --navy-ink #191D38):
     pasif  (mut, opacity .6) ~3.4:1  — WCAG 1.4.11 pasif ogeyi muaf tutar,
                                        yine de 3:1 esigini geciyor
     aktif  (mut, tam)         7.36:1
     hover  (#fff)            14.86:1 */
/* Olcu 18 -> 22px (firma istegi "biraz buyut"). Referanslar olculdu:
   KVKK metninin gorsel yuksekligi 15px, footer logosu 26px. 24px'te ikonlar
   logoya rakip oluyordu, 18px'te metinden kucuk kaliyordu; 22px ikisinin
   arasinda duruyor. Aralik da 0.55 -> 0.6rem: buyuyen ikonlar birbirine
   yapismasin. */
.foot__social{ display:flex; align-items:center; gap:.6rem; }
.foot__soc{ display:inline-flex; width:22px; height:22px;
  color:var(--on-navy-mut); flex-shrink:0; }
.foot__soc svg{ width:100%; height:100%; display:block; }
.foot__soc.soon{ opacity:.6; cursor:default; }
a.foot__soc{ transition:color .3s; }
a.foot__soc:hover{ color:#fff; }

/* Sabit .mcta cubugu (52px) footer'in son satirini ortmesin. */
@media (max-width:760px){
  .foot__row{
    padding-bottom:calc(.9rem + var(--mcta-h) + env(safe-area-inset-bottom)); }
}
/* Mobilde IKI satir: logo ustte, telif + KVKK altta yan yana. Uc ayri
   satir denendi, 390px'te footer 191px'e cikiyordu; iki satirla 154px.
   flex-wrap + brand'e tam genislik — flex-direction:column DEGIL, yoksa
   telif ve KVKK de ayrilir.
   padding-block DEGIL padding-top/bottom: padding-block yukaridaki mcta
   telafisini de silerdi. */
@media (max-width:600px){
  .foot__row{ flex-wrap:wrap; justify-content:center; text-align:center;
    gap:.7rem 1.1rem; min-height:0; padding-top:1.4rem;
    padding-bottom:calc(1.4rem + var(--mcta-h) + env(safe-area-inset-bottom)); }
  .foot__brand{ flex-basis:100%; display:flex; justify-content:center; }
  .foot__end{ margin-left:0; }
  .cbar__line{ padding-block:1rem; font-size:.74rem; gap:.3rem .7rem; }
}

/* ============ REVEAL ============ */
/* Reveal animasyonu YALNIZCA JavaScript aktifken devreye girer.
   Varsayılan durumda içerikler görünürdür; başlangıç durumu .js sınıfının
   altında tanımlıdır. .js sınıfı her sayfanın <head> bölümündeki tek
   satırlık script ile CSS'ten ÖNCE eklenir (bilinçli inline JS istisnası).
   Böylece JS kapalıysa, geç yüklenirse veya hata verirse 425 reveal öğesi
   görünür kalır; JS varken de görünürlük sıçraması olmaz. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal[data-d="1"]{ transition-delay:.08s; }
.js .reveal[data-d="2"]{ transition-delay:.16s; }
.js .reveal[data-d="3"]{ transition-delay:.24s; }
.js .reveal[data-d="4"]{ transition-delay:.32s; }
/* Hareket azaltma tercihi: animasyon yok, içerik anında görünür.
   Seçici .js altında olmalı, yoksa yukarıdaki .js .reveal kuralını ezemez. */
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } *{ scroll-behavior:auto !important; } }

/* ============================================================
   FAALİYET ALANLARI SAYFASI (.acblock)
   Yerleşim tamamen mevcut bileşenlerden: .about__grid iki kolon,
   .sd__body paragraf aralığı, plaka görseli, .sec-head başlık
   grubu. Aşağıdaki iki kural yalnızca başlık grubu ile metin
   arasındaki aralık ve blok içi alt başlığın ölçüsü için.
   ============================================================ */
.acblock .sec-head{ margin-bottom:1.6rem; }
.acblock h3{ font-family:var(--f-display); font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:600; color:var(--brass-ink); margin-bottom:1.1rem; }

/* ---- FAALIYET KAPSAMI (.kapsam) ----
   Fotografsiz, kartsiz kapsam izgarasi. Duzen tamamen sac teli ayrac +
   bosluk + tipografi: golge, kose yuvarlatma, ikon ve numara YOK. Sekiz
   kalem esit agirlikta gorunur; sira disinda bir vurgu verilmedi.
   minmax(0,1fr) kullaniliyor — ciplak 1fr'nin alt siniri min-content
   oldugu icin "Saha ve Cevre Duzenlemeleri" sutunu sisirip izgarayi
   kaptan genis yapardi (ayni hata .metastrip'te de vardi).
   Ust cizgi izgarada, alt cizgi hucrelerde: boylece son satir eksik
   kalsa da alt kenar surekli gorunur. */
/* margin-top: baslik ile izgara arasinda bosluk. Onsuz izgaranin ust
   cizgisi h2'nin alt uzantilarina (y, p kuyruklari) degiyordu. */
.kapsam{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-2); }
.kapsam__item{ min-width:0; padding:1.5rem 1.5rem 1.5rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:1.0625rem; font-weight:500;
  line-height:1.35; color:var(--navy); overflow-wrap:break-word; }
/* Sutun ayraclari: her satirin ilk hucresi haric sol cizgi. Hucre
   dolgusu da kayar ki metin cizgiye yapismasin. */
.kapsam__item:not(:nth-child(4n+1)){ border-left:1px solid var(--line);
  padding-left:1.5rem; }
.kapsam__note{ margin-top:2rem; max-width:64ch;
  color:var(--ink-mut); font-size:.95rem; line-height:1.8; }


/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  /* Tek kolona düşünce metin fotoğrafın TAMAMINI kaplıyor; yatay gradyan
     işe yaramaz. Dikey ve daha güçlü karartmaya geçiliyor: en parlak
     bölgede bile AA geçiyor. Ölçüm: gövde metni (--on-navy-mut) fotoğrafın
     en parlak noktası üzerinde .88 opaklıkta 5,11:1 — .78 denenmişti ama
     3,59 veriyordu, AA altı. Bu değerleri DÜŞÜRMEYİN. */
  .acblock__grid{ grid-template-columns:1fr; }
  /* Gradyan YALNIZCA .acblock__veil'e verilir. Onceki halde
     .acblock__text--sag DA bu kurala dahildi; metin kolonunun kendi
     kutusu boyaniyordu ve .acblock__text{max-width:56ch} + dolgusu
     olmadigi icin ekranda KESKIN KENARLI, yapistirilmis gibi duran bir
     lacivert dikdortgen olusuyordu. Ustelik veil zaten .88-.95 opaklikta
     karartiyor; ikisi ust uste gelince o bolge ~.985'e cikip cevresinden
     belirgin sekilde ayriliyordu.
     Veil tam genislikte ve kenarsiz oldugu icin okunurlugu TEK BASINA
     tasiyor — asagidaki olcum bunu dogruluyor. Bu degerleri DUSURMEYIN. */
  .acblock__veil{
    background:linear-gradient(180deg,
      rgba(25,29,56,.88) 0%,
      rgba(25,29,56,.92) 45%,
      rgba(25,29,56,.95) 100%); }
  .about__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav__menu{ display:none; }
  .burger{ display:flex; }
  /* Menü sabit header'ın hemen altından başlar. Eskiden 62px sabit yazılıydı;
     gerçek header 84,8px olduğu için menü header'ın altına giriyordu. */
  .nav__menu.open{ display:flex; position:fixed; inset:var(--header-height) 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--paper); padding:1rem var(--gutter) 2rem; border-bottom:1px solid var(--line); box-shadow:0 10px 30px rgba(25,29,56,.1); }
  /* Nav kaydırılınca daralıyor; menü de onunla birlikte yukarı gelsin,
     yoksa header ile menü arasında 11px boşluk kalıyor. */
  .nav.scrolled .nav__menu.open{ inset-block-start:var(--header-height-scrolled); }
  .nav__menu.open .nav__link{ width:100%; padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.1rem; }
  /* Açık menünün zemini açık renk. Koyu hero üzerindeyken nav bağlantıları
     beyaz oluyor ve bu zeminde okunmuyordu; menü açıkken normal renge döner. */
  .nav--over-hero .nav__menu.open .nav__link{ color:var(--navy); opacity:1; }
  /* Küçük ekranda "Tüm Faaliyet Alanları" düğmesi gereksiz: hemen altındaki
     iki faaliyet satırı aynı sayfanın çapalarına gidiyor. */
  .why__grid{ grid-template-columns:1fr; }
    .proc__row{ grid-template-columns:1fr; gap:.6rem; }
}
.mcta{ display:none; }
@media (max-width:760px){
  .mcta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--navy); color:#fff;
    align-items:center; justify-content:center; gap:.6rem; padding:1rem; font-family:var(--f-mono); font-size:.78rem;
    letter-spacing:.1em; text-transform:uppercase; box-shadow:0 -10px 30px rgba(25,29,56,.25);
    /* Çentikli telefonlarda ana ekran çizgisiyle çakışmasın. */
    min-height:var(--mcta-h); padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
  /* Footer'in mcta telafisi FOOTER blogunda (.foot__row) veriliyor. */
}

/* ============================================================
   SERVICE / INNER PAGE COMPONENTS
   ============================================================ */
.phero{ padding-top:clamp(8rem,12vw,11rem); padding-bottom:clamp(2.5rem,5vw,4rem); background:var(--paper); position:relative; overflow:hidden; }
.phero::after{ content:""; position:absolute; right:-6%; top:0; bottom:0; width:46%; z-index:0;
  background:
    linear-gradient(180deg, transparent, rgba(25,29,56,.04)),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(25,29,56,.05) 38px 39px); pointer-events:none; }
.phero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:end; }
.breadcrumb{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-mut); margin-bottom:1.6rem; }
.breadcrumb a{ color:var(--ink-mut); transition:color .3s; }
.breadcrumb a:hover{ color:var(--brass-ink); }
.breadcrumb b{ color:var(--navy); font-weight:500; }
.phero h1{ margin:1.1rem 0 1.4rem; }
.phero__lead{ max-width:48ch; }
/* Ic sayfa basliklarinin punto durumu:
     Kurumsal (hakkimizda)  -> .h-hero (--fs-hero)    .phero--split icinde
     Projeler               -> .h-hero (--fs-hero)    .phero, tam genislik
     KVKK ve 404            -> .h-xl   (--fs-display) .phero, tam genislik
     Faaliyet Alanlari      -> .h-lg   (--fs-h2)      .acblock, HERO DEGIL
   Kurumsal ve Projeler bir kademe buyutuldu. Faaliyet Alanlari .h-lg'de
   BIRAKILDI ve bu bilincli: o sayfada .phero YOK — baslik fotografli
   .acblock bolumunun ~560px'lik sag kolonunda duruyor, yani ayri bir
   bilesen. Uc sayfanin ortak yani yalnizca ayni SINIFI paylasmalariydi.
   .h-hero'ya cevrilirse 1280 ve 1440px'te iki satirdan uc satira cikiyor
   (olculdu); 1024 ve 1920px'te satir sayisi degismiyor. Yani "bedelsiz"
   degil — cevrilecekse acblock kolonu da genisletilmeli. */

.metastrip{ background:var(--navy); color:var(--on-navy); }
/* minmax(0,1fr) sart: cıplak 1fr'nin alt siniri min-content oldugu icin
   uzun "Kapsam" metni (orn. "24 Derslikli Ilkogretim Okulu · Kres · Cami")
   sutunu sisirip izgarayi kaptan genis yapiyordu; 360px'te iki proje
   sayfasinda yatay kaydirma olusuyordu. min-width:0 + break-word ayni
   sorunun ic ice kalan kismini kapatir. */
.metastrip__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.metastrip__item{ min-width:0; }
.metastrip__n{ overflow-wrap:break-word; }
.metastrip__item{ padding:1.9rem var(--gutter); border-left:1px solid var(--hair-navy); }
.metastrip__item:first-child{ border-left:0; }
/* PUNTO: eskiden clamp(1.5rem,2.3vw,2.1rem) idi — 1440px'te 33px yapiyor ve
   245px'lik kolona sigmayan TEK KELIMELER ("Kahramanmaras",
   "(Asagisogutonu)", "(Buyukkaristiran)") KELIME ORTASINDAN boluniyordu;
   son harf tek basina alt satira dusuyordu. Yeni ust sinir 1.65rem: en uzun
   tek kelime (17 karakter) dort kirilma noktasinin HEPSINDE tek satira
   siginiyor (olculdu). Tum hucreler AYNI puntoda — .metastrip__n--sm
   varyanti kaldirildi, yoksa hucreler arasinda punto farki kaliyordu.
   LINE-HEIGHT: 1 iken Turkce alt uzantilar (s, c, g kuyruklari) satir
   kutusunun disina tasip alttaki etikete degiyordu; 1.22 buna yer aciyor. */
.metastrip__n{ font-family:var(--f-display); font-size:clamp(1.05rem,1.8vw,1.65rem); font-weight:600; color:#fff; line-height:1.22; }
/* Cok parcali degerler ALT ALTA (firma istegi). 12. turda ayirici (·)
   onundeki kelimeye baglanmisti; o cozumde kirilma yalnizca gruplar
   arasinda oluyordu ama nokta UST SATIRIN SONUNDA kaliyordu. Firma bunu
   istemedi: her grup kendi satirinda, ayirici YOK.
   "+" ayiricisi KORUNDU (612 Konut / + 18 Dükkân): ordaki "+" ayirac
   degil, ANLAM tasiyor.
   NOT: bu, 12. turdaki "display:block yapma, kisa degerleri bosu bosuna
   boler" kararini BILEREK geri aliyor — artik istenen davranis bu. */
.metastrip__g{ display:block; }
.metastrip__l{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-navy-mut); margin-top:.5rem; }

/* two-column article with sticky aside */
.sd__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
.sd__aside{ position:sticky; top:6rem; }
.sd__aside .eyebrow{ margin-bottom:1.2rem; }
/* Proje sayfalarında bu başlık sayfanın h1'i (kapak fotoğrafında yazı yok),
   kurumsal ve faaliyet sayfalarında h2. İkisi de aynı ölçüde. */
.sd__aside h1,
.sd__aside h2{ font-size:clamp(1.6rem,2.8vw,2.4rem); }
.sd__body p + p{ margin-top:1.2rem; }
.sd__body .lead{ margin-bottom:1.4rem; }

/* scope grid */
.scope{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:3rem; }
.scope__cell{ background:var(--paper); padding:2.1rem 1.7rem; min-width:0; overflow-wrap:break-word; }
.section.paper-2 .scope__cell{ background:var(--paper-2); }
.scope__cell .num{ font-family:var(--f-mono); font-size:.74rem; color:var(--brass-ink); }
.scope__cell h3{ font-size:1.18rem; margin:1.2rem 0 .6rem; color:var(--navy); }
.scope__cell p{ color:var(--ink-mut); font-size:.93rem; }

.section.paper-2 .scope{ background:var(--line-2); border-color:var(--line-2); }

@media (max-width:980px){
  /* Faaliyet Alanlari: iki ana kolon tek kolona, kategori izgarasi
     3 -> 2 sutuna. nth-child adimi sutun sayisiyla birlikte guncellendi:
     2 sutunda ikinci satir 3. ogeden basliyor, 4. ogeden degil. */
  .fa-head{ grid-template-columns:minmax(0,1fr); }
  .alanlar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .alanlar__item:nth-child(n+4){ border-top:0; }
  .alanlar__item:nth-child(n+3){ border-top:1px solid var(--line-2); }
  .phero__grid{ grid-template-columns:1fr; }
  .phero::after{ display:none; }
  .sd__grid{ grid-template-columns:1fr; }
  .sd__aside{ position:static; }
  .metastrip__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metastrip__item:nth-child(3){ border-left:0; }
  .scope{ grid-template-columns:1fr; }
}

/* ============================================================
   PROJECT LIST + CASE STUDY
   ============================================================ */
.casehero{ padding-top:clamp(7rem,11vw,9.5rem); }
.casehero .breadcrumb{ margin-bottom:1.4rem; }
.casehero__media{ position:relative; aspect-ratio:21/9; border-radius:var(--radius); overflow:hidden; background:var(--navy); }
.casehero__media .plate{ height:100%; }
@media (max-width:760px){ .casehero__media{ aspect-ratio:4/3; } }



/* Galeri sonundaki geri donus baglantisi. .btn inline-flex oldugu icin kendi
   basina sola yasli kalir; kapsayici text-align:right ile saga yasliyor.
   Galeri karolarindan sonra geldigi icin ust bosluk .gallery'nin gap'iyle
   ayni olcude tutuldu. */
.galback{ margin-top:clamp(1.6rem,2.4vw,2.2rem); text-align:right; }
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,1.6vw,1.4rem); margin-top:3rem; }
.gallery .plate{ border-radius:var(--radius); height:100%; }
/* Galeri karoları tüm proje sayfalarında tek tip: satırda 3 adet, 4:3.
   Farklı bir en-boy gerekirse yeni bir .g-* sınıfı eklenir, inline yazılmaz. */
.g-4{ grid-column:span 4; aspect-ratio:4/3; }
@media (max-width:760px){ .g-4{ grid-column:span 12; aspect-ratio:16/10; } }

/* ============================================================
   PLATE İÇİ GÖRSELLER (tüm görseller yerel: assets/img/…)
   ============================================================ */
/* .plate > picture > img SART: saha-kurumsal.jpg <picture> ile sarildi ve
   <picture> araya bir oge kattigi icin dogrudan cocuk secicisi kirilir.
   Diger 192 .plate kullanimi <img> ile devam ediyor, ikisi de destekli. */
.plate > img,
.plate > picture > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   PROJECT GALLERY
   ============================================================ */

/* Satırda 3 karo. Eskiden 4 idi; 3 olunca karolar büyüyor ve künye satırı
   (.cap) rahat okunuyor. Alt kademe 980px'te 2'ye düşer; 600px kuralı
   aynı değeri verdiği için gereksiz kaldı ve kaldırıldı. */
.pgal{ display:grid; grid-template-columns:repeat(3,1fr);
  /* Satır arası kolon arasından daha geniş: künye şeridi kartın altında
     durduğu için dikey ayrım daha çok nefes istiyor. Eskiden tek gap vardı
     (12,8-19,2px) ve kartlar dip dibeydi. */
  column-gap:clamp(1.2rem,2vw,1.8rem); row-gap:clamp(2rem,3.2vw,3rem); }
/* Kutu olcusu/zemini .pgal a'da tanimliydi; gorseli henuz gelmemis karo
   <a> DEGIL <div> (hedef sayfa yok, bos capa uretmiyoruz) — o yuzden ayni
   kurallari .pgal-tile--bos da almak zorunda, yoksa karo cokuyor. */
.pgal a,
.pgal .pgal-tile--bos{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); background:var(--navy); }
.pgal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.pgal a:hover img{ transform:scale(1.07); }
.pgal .cap{ position:absolute; inset:auto 0 0 0; z-index:2; padding:1.1rem .9rem .9rem; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,20,34,.92)); font-family:var(--f-display); font-size:.9rem;
  font-weight:600; line-height:1.2; letter-spacing:0; opacity:0; transform:translateY(8px);
  transition:.4s var(--ease); }
/* Karo adları HER ZAMAN görünür: 32 karonun tamamı .titled taşıyor.
   Eskiden bir de .pgal a:hover .cap kuralı vardı, hiç devreye girmiyordu
   (ölü kod) ve kaldırıldı. Başlıksız bir karo eklenirse hover kuralı
   geri gerekir. */
.pgal a.titled .cap,
.pgal .pgal-tile--bos.titled .cap{ opacity:1; transform:none; }
/* GORSELI BEKLEYEN KARO: ek susleme YOK — kesik cizgi, ikon, "gorsel
   eklenecek" yazisi konulmadi. Karo lacivert zeminde durumu ve adiyla
   duruyor, tasarim dilinden sapmiyor. Gorsel gelince <div> normal <a>
   karosuna cevrilir ve bu iki kural gereksizleşir (silinmesi gerekmez,
   ileride baska bir karo da beklemeye girebilir). */
.pgal .pgal-tile--bos .cap{
  background:linear-gradient(180deg,transparent,rgba(10,20,34,.72)); }

/* TEMSILI GORSEL ETIKETI — gorseli henuz cekilmemis, yerine render/temsil
   konulmus karolarda kullanilir. Durum rozeti sol USTTE, karo adi ALTTA
   tam genislikte; bu yuzden etiket sag USTE konuldu, ucu de cakismiyor.
   Zorunlu bir beyan: ziyaretci gordugu goruntunun sahadan cekilmis bir
   fotograf OLMADIGINI bilmeli. Gercek fotograf gelince hem bu <span> hem
   alt metnindeki aciklama kaldirilir. */
/* Konum: SAG ALT, karo adiyla ayni bantta. Once sag USTTE kutulu bir
   rozetti; durum rozetiyle simetrik durup gereginden fazla dikkat
   cekiyordu. Firma daha sessiz olmasini istedi:
     kutu/cerceve/dolgu KALDIRILDI · punto .58 -> .54rem
     renk #fff -> rgba(255,255,255,.66)
   Okunurlugu .cap'in alt gradyani tasiyor (seffaftan rgba(10,20,34,.92)),
   yani ayri bir zemine gerek yok. Karo adi SOLA yasli oldugu icin
   cakisma yok. z-index 3: gradyanin uzerinde kalmali. */
.pgal-temsili{ position:absolute; right:.9rem; bottom:.95rem; z-index:3;
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.66); }

/* Ayni not, proje DETAY sayfasindaki buyuk gorselin uzerinde. Karodaki
   kalibin aynisi; tek farki .plate'in alt gradyani olmadigi icin metnin
   kendi golgesi okunurlugu tasiyor (gorselin sag alt kosesi acik ya da
   koyu olabilir, ikisinde de okunuyor). Sahadan fotograf gelince bu
   <span> ve alt metnindeki aciklama kalkar. */
.plate__temsili{ position:absolute; right:1rem; bottom:.9rem; z-index:3;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
  text-shadow:0 1px 3px rgba(10,20,34,.75); }
@media (max-width:980px){ .pgal{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   LIGHTBOX (galeri büyütme) — DOM'u main.js üretir
   ============================================================ */
[hidden]{ display:none !important; }
.gallery img{ cursor:zoom-in; }
.gallery img:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
body.lb-open{ overflow:hidden; }

.lb{ position:fixed; inset:0; z-index:300; background:rgba(25,29,56,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:clamp(1.5rem,5vw,5rem); }
.lb.open{ display:flex; }
.lb__inner{ max-width:1040px; width:100%; }
.lb__inner img{ width:100%; max-height:86vh; object-fit:contain; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5); }

/* kapat + gezinme düğmeleri ortak taban */
.lb__close,.lb__nav{ position:absolute; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.lb__close:hover,.lb__nav:hover{ background:var(--brass); border-color:var(--brass); color:#252A50; }
.lb__close{ top:1.3rem; right:1.5rem; width:48px; height:48px; }
.lb__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; }
/* Simge olcusu SVG uzerinden veriliyor, font-size ile DEGIL. Metin glifiyken
   font-size kullaniliyordu ve glif kalinligi/hizasi fonta gore degisiyordu. */
.lb__close svg{ width:19px; height:19px; }
.lb__nav svg{ width:23px; height:23px; }
.lb__nav--prev{ left:clamp(.6rem,2.5vw,2.2rem); }
.lb__nav--next{ right:clamp(.6rem,2.5vw,2.2rem); }
@media (max-width:600px){
  .lb{ padding:1.2rem; }
  /* Mobilde oklar alta iner. font-size KALDIRILDI: simge artik SVG,
     olcusunu .lb__nav svg veriyor. 44px dokunma alani esigi korundu. */
  .lb__nav{ top:auto; bottom:1rem; transform:none; width:44px; height:44px; }
  .lb__nav svg{ width:20px; height:20px; }
  .lb__nav--prev{ left:25%; } .lb__nav--next{ right:25%; }
}



/* ============================================================
   NAV — koyu hero üzerinde açık metin, kaydırınca lacivere döner
   ============================================================ */
/* NAV over dark hero (light text at top, reverts when scrolled) */
.nav--over-hero .nav__link,
.nav--over-hero .lang,
.nav--over-hero .lang a,
.nav--over-hero .lang .soon{ color:#fff; }
.nav--over-hero .nav__link{ opacity:.92; }
.nav--over-hero .burger span{ background:#fff; }
.nav--over-hero .lang .active{ color:#D8B57E; }
.nav--over-hero.scrolled .nav__link,
html:not(.js) .nav--over-hero .nav__link,
.nav--over-hero.scrolled .lang,
html:not(.js) .nav--over-hero .lang,
.nav--over-hero.scrolled .lang a,
.nav--over-hero.scrolled .lang .soon,
html:not(.js) .nav--over-hero .lang .soon{ color:var(--navy); }
.nav--over-hero.scrolled .burger span,
html:not(.js) .nav--over-hero .burger span{ background:var(--navy); }
.nav--over-hero.scrolled .lang .active,
html:not(.js) .nav--over-hero .lang .active{ color:var(--brass-ink); }


/* ============================================================
   Proje durum rozeti (Tamamlandı / Devam Ediyor)
   ============================================================ */
.proj-status{ display:inline-flex; align-items:center; font-family:'Manrope',Arial,sans-serif;
  font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:.5em .9em; border-radius:6px; line-height:1; white-space:nowrap; }
.proj-status--done{ background:#252A50; color:#fff; }
.proj-status--ongoing{ background:#C79A5B; color:#252A50; }


/* Projeler sayfası tile durum rozeti */
.pgal-tile{ position:relative; }
.pgal-status{ position:absolute; top:14px; left:14px; z-index:4; box-shadow:0 6px 18px rgba(25,29,56,.42); }


/* ============================================================
   Türkiye il haritası — orta boy, tıklanabilir; çok projeli il pop-up
   ============================================================ */
/* Kapsayıcı ölçüleri site genelindeki .wrap ile aynı olsun (eskiden
   1380px + sabit 24px yazılıydı, diğer bölümlerden 60px genişti). */
.mapwrap{ max-width:var(--maxw); margin:2.4rem auto 0; padding-inline:var(--gutter); display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:2.8rem; align-items:center; }
.mapwrap__map{ min-width:0; }
/* DORT kart -> ALTI kart: 3 ust / 3 alt. Kolon sayisi 2'den 3'e cikinca
   kart genisligi ~1/3 azaldi, bu yuzden ikon 60px -> 46px civarina geri
   cekildi (dort kartli duzende 44'ten 60'a cikarilmisti; ayni gerekce
   ters yonde). Satir arasi bosluk da 2.6 -> 2.1rem: artik iki satir var,
   blok haritanin yaniginda cok uzamamali. */
.mapwrap__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.1rem 1rem; }
.statcard{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
.statcard__ico{ width:clamp(38px,3.2vw,46px); height:clamp(38px,3.2vw,46px); color:#252A50; }
.statcard__ico svg{ width:100%; height:100%; display:block; }
/* Punto olculdu: "1.500.000 m²+" en uzun deger. Iki kolonlu kartta
   1181px'te 173px, 1440px'te 194px genislik var; 2.2rem'de deger 214px
   olup TASIYORDU. Birim ayri ve kucuk span'a alinip punto clamp'e
   baglandi — Manrope 700 ile 360-2560px arasi hepsi sigiyor. */
.statcard__v{ display:flex; align-items:baseline; justify-content:center;
  gap:.18em; font-family:'Manrope',Arial,sans-serif; font-weight:700;
  color:#252A50; line-height:1; font-size:clamp(1.45rem,2.05vw,1.9rem); }
.statcard__n{ font-size:1em; }
/* Birim (m²+) sayidan kucuk: taban cizgisinde hizali, yariya yakin punto. */
.statcard__u{ font-size:.52em; font-weight:600; }
.statcard__l{ font-family:'Manrope',Arial,sans-serif; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:#5E6270; line-height:1.3; }
/* Esik 1000 -> 1180px: 1000-1180 bandinda harita 1.85fr aldigi icin
   sayac kolonu 160px'e kadar daraliyor ve en uzun deger sigmiyordu
   (olculdu). O bantta artik tek kolon, sayaclar tam genislikte. */
@media (max-width:1180px){ .mapwrap{ grid-template-columns:1fr; gap:2.2rem; } }
.map__svg{ display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 20px 38px rgba(25,29,56,.16)); }
/* RENKLER YER DEĞİŞTİRDİ: proje YAPILMAYAN iller pirinç, YAPILAN iller
   lacivert. Lacivert açık zeminde daha baskın olduğu için portföy öne çıkıyor.
   Sınır çizgisi koyu pirinç: pirinç dolgu üzerinde lacivert çizgi 60 ilde
   fazla gürültü yapıyordu. */
.prov{
  fill:#AEB4CF;              /* Açık lacivert/mavi il dolgusu */
  stroke:#7B83A8;            /* Bir ton koyu il sınır çizgisi */
  stroke-width:.7;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:fill .18s;
}

.prov--on{
  fill:var(--navy);
  cursor:default;
}

.prov--on:hover,
.prov--on:focus-visible{
  fill:var(--navy-2);
}

/* Nav marka logosu (koyu/açık zemin) */
/* max-width:none + flex:none — çok dar ekranlarda img{max-width:100%} logoyu
   yatayda sıkıştırıp oranını bozuyordu. Artık şekli korunur, taşan kısım
   body{overflow-x:hidden} ile kırpılır. 320px ve üstünde zaten sığıyor. */
.brand__logo{ height:var(--logo-h); width:auto; max-width:none; flex:none; display:block; }
.brand__logo--light{ display:none; }
/* Logo takası yalnızca JS varken: JS yokken nav açık zeminli olduğu için
   koyu logo doğru olan. */
.js .nav--over-hero:not(.scrolled) .brand__logo--dark{ display:none; }
.js .nav--over-hero:not(.scrolled) .brand__logo--light{ display:block; }

.foot__logo{ height:26px; width:auto; display:block; }

/* ===== Proje durumu filtre sekmeleri ===== */
.proj-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(1.2rem,2vw,1.8rem); }
.proj-filter__btn{
  font-family:var(--f-body); font-size:.86rem; font-weight:600; letter-spacing:.01em;
  /* min-height 44px: dokunma alanı kuralı. Dolgu tek başına ~42.6px veriyordu. */
  padding:.62rem 1.15rem; min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:999px; cursor:pointer;
  color:var(--navy); background:transparent; border:1px solid var(--line-2);
  transition:background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.proj-filter__btn:hover{ border-color:var(--brass); color:var(--brass-ink); }
.proj-filter__btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.proj-filter__btn.active:hover{ color:#fff; }
@media (max-width:600px){ .proj-filter__btn{ flex:1 1 auto; text-align:center; font-size:.8rem; padding:.6rem .7rem; min-height:44px; } }


/* ============================================================
   TEKNİK BANT — "Ölçeği yöneten teknik olgunluk"
   .section.navy tabanını kullanır; üzerine silik mimari grid
   ============================================================ */
.techband{ position:relative; overflow:hidden; }  /* zemin: .section.navy */
.techband__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.5; pointer-events:none; }
.techband > .wrap{ position:relative; z-index:1; }
.techgrid{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:3rem;
  border-top:1px solid var(--hair-navy); border-left:1px solid var(--hair-navy); }
.techgrid__cell{ padding:2.4rem 1.8rem;
  border-right:1px solid var(--hair-navy); border-bottom:1px solid var(--hair-navy); }
.techgrid__idx{ font-family:var(--f-mono); font-size:.95rem; font-weight:600; letter-spacing:.1em; color:var(--brass); }
.techgrid__cell h3{ font-size:1.32rem; margin:1.6rem 0 .8rem; color:#fff; }
.techgrid__cell p{ color:var(--on-navy-mut); font-size:.96rem; }
@media (max-width:980px){ .techgrid{ grid-template-columns:repeat(2,1fr); } }
/* Kapsam izgarasi: 4 -> 2 -> 1 sutun. Sol cizgi kuralinin nth-child
   adimi sutun sayisiyla birlikte degismek ZORUNDA, yoksa satir basinda
   cizgi kalir. */
@media (max-width:980px){
  .kapsam{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kapsam__item:not(:nth-child(4n+1)){ border-left:0; padding-left:0; }
  .kapsam__item:not(:nth-child(2n+1)){ border-left:1px solid var(--line); padding-left:1.5rem; }
}
@media (max-width:600px){
  /* Mobilde izgara IKI SUTUN kalir (980px blogundan devralinir); faaliyet
     adlari kisa oldugu icin iki sutun okunabiliyor. Yalnizca numara
     araligi ve sag dolgu daraltiliyor: 420px'te kolon 190px'e dusuyor ve
     en uzun ad "Sosyal Donatilar" 129,3px istiyor. Mevcut degerlerle pay
     7px kaliyordu — .7rem/1rem ile pay 17,6px (olculdu, Manrope 500). */
  .alanlar__item{ gap:.7rem; padding:.8rem 1rem .8rem 0; }
  /* Arka plan katmanlari mobilde metnin arkasinda leke yapmasin:
     sol alt yuzey kaldiriliyor, sag ust yuzeyin opakligi yariya iniyor. */
  .section--fa::before{ opacity:.5; }
  .section--fa::after{ display:none; }
  .kapsam{ grid-template-columns:minmax(0,1fr); }
  .kapsam__item:not(:nth-child(2n+1)){ border-left:0; padding-left:0; }
  .kapsam__item{ padding:1.25rem 0; }
}

/* Cok dar ekran: 420px altinda kategori izgarasi TEK sutuna dusuyor.
   Yeni kirilma noktasi — dosyadaki digerleri 600/760/900/980/1000/1024.
   Bilincli olarak eklendi: iki sutun 420px'e kadar okunabiliyor, altinda
   en uzun ad ("Sosyal Donatilar") kolona sigmiyor.
   Ust cizgi adimi yeniden guncellendi: 2 sutunda 3. ogeden basliyordu,
   tek sutunda 2. ogeden basliyor. Reset zinciri esit ozgullukte
   (0,2,0) oldugu icin KAYNAK SIRASI belirleyici — bu blok 980px ve 600px
   bloklarindan SONRA gelmek zorunda.
   Buton tam genislik: 390px'te "Faaliyet Alanlarini Inceleyin" metni
   butonu kap genisliginin ustune cikartiyordu (olculdu). */
@media (max-width:420px){
  .alanlar{ grid-template-columns:minmax(0,1fr); }
  .alanlar__item:nth-child(n+3){ border-top:0; }
  .alanlar__item:nth-child(n+2){ border-top:1px solid var(--line-2); }
  .alanlar__item{ gap:.85rem; padding:.75rem 0; }
  .fa-foot{ justify-content:stretch; }
  .fa-foot .btn{ width:100%; justify-content:center; }
}
@media (max-width:600px){ .techgrid{ grid-template-columns:1fr; } }


/* ============================================================
   SEÇİLİ PROJE KARTLARI (4:3, künye satırlı, köşeli)
   ============================================================ */
.selgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2vw,1.8rem); margin-top:3rem; }
.selcard{ display:block; background:var(--paper); border:1px solid var(--line);
  transition:border-color .35s var(--ease); }
.selcard:hover{ border-color:var(--brass); }
.selcard__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy); }
.selcard__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease-out); }
.selcard:hover .selcard__media img{ transform:scale(1.04); }
.selcard__status{ position:absolute; top:14px; left:14px; z-index:2; }
.selcard__body{ padding:1.4rem 1.4rem 1.5rem; }
.selcard__title{ font-family:var(--f-display); font-size:1.15rem; font-weight:600; line-height:1.28; color:var(--navy); }
.selcard__rows{ margin-top:1.1rem; border-top:1px solid var(--line); }
.selcard__row{ display:grid; grid-template-columns:6rem 1fr; gap:.9rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); }
.selcard__k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mut); padding-top:.15rem; }
.selcard__v{ font-size:.9rem; color:var(--navy); }
.section.paper-2 .selcard{ background:var(--paper-2); }
@media (max-width:980px){ .selgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .selgrid{ grid-template-columns:1fr; } }



/* ============================================================
   İÇ SAYFA HERO — solda lacivert metin, sağda büyük proje fotoğrafı
   ============================================================ */
.phero--split::after{ display:none; }
.phero--split .phero__grid{ grid-template-columns:1fr 1.12fr; align-items:center; }

/* ---- KURUMSAL HERO: tam genişlik fotoğraf + karartma ----
   Karartma İKİ katmanlı, ikisi de ölçümle seçildi:
     yatay  .92 -> .86 -> .44 -> .34  (metin solda, fotoğraf sağda görünür)
     dikey  .55 -> 0 (%30'da biter)   (üstteki saydam nav için)
   Dikey katman ŞART: header'da nav--over-hero var, en üstte nav saydam ve
   yazıları beyaz. O katman olmadan beyaz nav yazıları fotoğrafın açık
   bölgesinde okunmuyor. Üst-sağda birleşik opaklık %70; ölçüm:
     fotoğraf 77 -> nav yazısı 13,95 · 200 -> 7,94 · 255 -> 6,20
   Metin bölgesinde (.92): h1 13,10-15,78 · lead 11,82-14,23 ·
   breadcrumb 5,85-7,04. Hepsi WCAG AA üzeri. DEĞERLERİ DÜŞÜRMEYİN. */
.phero--bg{ background:var(--navy-ink); color:var(--on-navy); }
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.phero__veil{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(25,29,56,.55) 0%, rgba(25,29,56,0) 30%),
    linear-gradient(90deg,
      rgba(25,29,56,.92) 0%,
      rgba(25,29,56,.86) 42%,
      rgba(25,29,56,.44) 72%,
      rgba(25,29,56,.34) 100%); }
/* .phero--split h1 rengi laciverde sabitliyor ve AYNI ozgullukte (0,1,1)
   ama DAHA SONRA geldigi icin bizi eziyordu — h1 koyu zeminde gorunmez
   oluyordu. Cozum sirayla oynamak DEGIL, iki sinifi birlikte kullanip
   ozgullugu 0,2,1'e cikarmak: kural sirasindan bagimsiz calisir.

   RENK: --brass-soft. Olcum (karartilmis zemin uzerinde):
     --brass-soft 7,05-7,74  ·  --brass 5,34-5,86  ·  --brass-2 4,24-4,66
   --brass-soft hem en yuksek kontrasti veriyor hem sitenin koyu zeminlerde
   zaten kullandigi ton (hero__eye, hero h1 .accent ayni tonu kullaniyor).
   Aksan "kalite" BEYAZ birakildi (11,82-13,10): govde pirinc olunca aksanin
   ayirt edilebilmesi icin daha parlak olmasi gerekiyor, luminans farki 2,03x. */
.phero--split.phero--bg h1{ color:var(--brass-soft); }
.phero--bg .accent-italic{ color:#fff; }
.phero--bg .phero__lead{ color:var(--on-navy); }
.phero--bg .breadcrumb,
.breadcrumb--on-navy{ color:var(--on-navy-mut); }
.breadcrumb--on-navy a{ color:var(--on-navy-mut); }
.breadcrumb--on-navy a:hover{ color:var(--brass-soft); }
.breadcrumb--on-navy b{ color:var(--on-navy); }
.phero--bg .breadcrumb a{ color:var(--on-navy-mut); }
.phero--bg .breadcrumb a:hover{ color:var(--brass-soft); }
.phero--bg .breadcrumb b{ color:var(--on-navy); }
.phero--split h1{ color:var(--navy); }
@media (max-width:980px){ .phero--split .phero__grid{ grid-template-columns:1fr; } }
/* Tek kolona düşünce metin fotoğrafın tamamını kaplıyor; yatay gradyan
   işe yaramaz. Dikey ve güçlü karartma: en parlak bölgede (.90) breadcrumb
   5,45:1, h1 12,20:1 — AA üzeri. */
@media (max-width:980px){
  .phero--bg .phero__veil{
    background:linear-gradient(180deg,
      rgba(25,29,56,.90) 0%,
      rgba(25,29,56,.92) 50%,
      rgba(25,29,56,.95) 100%); }
}


/* ============================================================
   YARDIMCI SINIFLAR (inline style'lardan taşındı)
   ============================================================ */
.plate--45{ aspect-ratio:4/5; }
.section--flush{ padding-top:0; }
.accent-italic{ font-family:var(--f-display); font-style:italic; font-weight:380; color:var(--brass-ink); }
.metastrip__u{ font-family:var(--f-mono); font-size:1rem; color:var(--brass-soft); }
/* minmax(0,1fr) SART: ciplak 1fr'nin alt siniri min-content oldugu icin
   uzun vizyon metni sutunu sisirip 360px'te izgarayi 4px tasiriyordu.
   Ayni hata .metastrip ve .kapsam'da da vardi. */
.scope--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.scope__h--lg{ font-size:1.32rem; }
/* Misyon/Vizyon hucrelerindeki basliklar kisa manset DEGIL tam cumle;
   o yuzden kalin degil normal agirlikta. Ayri bir modifier sinifi
   kullaniliyor: ne .scope__h--lg ne .scope--2 secilebilirdi, ikisi de
   404 sayfasinda kisa baglanti etiketleri icin kullaniliyor ve orada
   kalin kalmali. line-height de gevsetildi; h1-h4 global 1.15 birkac
   satirlik cumlede sikisik duruyor. */
.scope__h--cumle{ font-size:1.1rem; font-weight:400; line-height:1.45; }
/* Punto .scope__h--lg'nin 1.32rem'inden 1.1rem'e dusuruldu. Kucultme
   BURAYA yazildi, .scope__h--lg'ye DEGIL: o sinif 404 sayfasinda dort kez
   kisa baglanti etiketi olarak kullaniliyor ve orada buyuk kalmali.
   .scope__h--cumle yalnizca hakkimizda.html'deki Misyon/Vizyon'da (2 yer). */
/* Yukarida 980px blogunda .scope{grid-template-columns:1fr} var ama
   .scope--2'yi EZMIYOR: ikisi de (0,1,0) ozgullukte ve .scope--2 dosyada
   SONRA geliyor. Dar ekran kirilimi bu yuzden burada tekrar tanimlanir. */
@media (max-width:760px){
  .scope--2{ grid-template-columns:minmax(0,1fr); }
}


/* ============================================================
   İLETİŞİM — başlık, altında tam genişlik ofis haritası
   Künye (.ofis) harita üzerinde yüzer; 1000px altında haritanın
   altına iner. Form yoktur.
   z-index notu: .contact__map kendi yığın bağlamını 1'de açar; böylece
   Leaflet'in iç katmanları (800) ve kart (900) sabit nav'ın (100)
   üzerine çıkamaz.
   ============================================================ */
.contact{ position:relative; overflow:hidden; padding-bottom:0; }
.contact__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.5; pointer-events:none; }
.contact > .wrap{ position:relative; z-index:1; }

/* harita — bölüm genişliğinde, altta footer'a dayanır */
/* Üstünde yalnızca eyebrow var, o yüzden ara boşluk dar tutuldu. */
.contact__map{ position:relative; z-index:1; margin-top:clamp(1.8rem,3vw,2.6rem); }
/* Yükseklik .ofis kartından (~480px) belirgin yüksek olmalı, aksi hâlde
   dikeyde ortalanan kart haritayı taşırır. */
.map{ height:clamp(620px,70vh,780px); background:var(--navy-2); border-top:1px solid var(--hair-navy); }
/* tile'lar kurumsal palete uysun; pin ayrı katmanda olduğu için etkilenmez */
.map .leaflet-tile-pane{ filter:grayscale(1) contrast(.94) brightness(1.06); }
.map .leaflet-control-zoom a{ color:var(--navy); border-radius:0; }
.map .leaflet-control-zoom a:hover{ color:var(--brass-ink); }
.map .leaflet-control-attribution{ font-size:.62rem; background:rgba(255,255,255,.82); }
/* Leaflet'in kendi bağlantı rengi (#0078A8) bu yarı saydam beyaz zeminde
   3.6:1 kalıyor; AA küçük metin için 4.5 istiyor. Koyulaştırıldı (7.1:1),
   yine mavi tonda kalıyor ki bağlantı olduğu anlaşılsın. Zorunlu bir
   atıf alanı olduğu için silinmez, okunur hale getirilir. */
.map .leaflet-control-attribution a{ color:#0B4A63; }
/* Yedek bağlantı: normalde gizli. JS yoksa harita hiç kurulamayacağı için
   kendiliğinden görünür; JS varsa yalnızca Leaflet yüklenemediğinde main.js
   --on sınıfını ekler. Eskiden HTML'de hidden niteliği vardı, o yüzden JS
   kapalıyken CSS ile gösterilemiyordu. */
.map__fb{ display:none; padding:1rem var(--gutter); font-family:var(--f-mono); font-size:.74rem; color:var(--on-navy-mut); }
html:not(.js) .map__fb,
.map__fb--on{ display:block; }
.map__fb a{ color:var(--brass-soft); text-decoration:underline; }

/* koyu lacivert konum pini (main.js divIcon olarak basar) */
.map__pin svg{ display:block; width:34px; height:47px; filter:drop-shadow(0 8px 16px rgba(10,14,32,.5)); }
.map__pin svg path{ fill:var(--navy); }
.map__pin svg circle{ fill:var(--brass); }

/* ofis künyesi — harita üzerinde, site ızgarasıyla hizalı */
.contact__cardwrap{ position:absolute; inset:0; z-index:900;
  display:flex; align-items:center; pointer-events:none; }
.ofis{ pointer-events:auto; width:min(400px,100%); background:var(--navy);
  border:1px solid var(--hair-navy); border-radius:var(--radius);
  padding:clamp(1.7rem,2.2vw,2.3rem); box-shadow:0 26px 60px rgba(10,14,32,.45); }
.ofis__name{ font-family:var(--f-display); font-size:1.5rem; font-weight:600; color:#fff;
  padding-bottom:1.3rem; border-bottom:1px solid var(--hair-navy); }
.ofis__sub{ display:block; margin-top:.55rem; font-family:var(--f-mono); font-size:.64rem;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-soft); }
.ofis__list{ margin:0; }
.ofis__row{ padding:1.05rem 0; border-bottom:1px solid var(--hair-navy); }
.ofis__row:last-child{ border-bottom:0; padding-bottom:.4rem; }
.ofis__row dt{ font-family:var(--f-mono); font-size:.64rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-soft); margin-bottom:.45rem; }
.ofis__row dd{ margin:0; color:var(--on-navy); font-size:.96rem; line-height:1.6; }
.ofis__row dd a{ transition:color .3s var(--ease); }
.ofis__row dd a:hover{ color:var(--brass-soft); }
.ofis__dir{ width:100%; justify-content:center; margin-top:1.5rem; }

/* 1000px: bu genişliğin altında ortadaki pin kartın kenarına denk geliyor,
   o yüzden kart akışa alınıp haritanın altına indiriliyor. */
@media (max-width:1000px){
  .contact{ padding-bottom:clamp(3rem,6vw,4.5rem); }
  .map{ height:clamp(340px,52vw,460px); }
  /* Kart akışa girip haritanın altına iner, üstüne 2,8rem biner.
     DİKKAT: burada position:static YAZILMAZ. z-index yalnızca
     konumlandırılmış öğelerde çalışır; static yapılınca kartın
     z-index:900'ü devre dışı kalıyor ve kart Leaflet'in döşeme
     katmanının (400) altına düşüyor — binen kısmı haritanın
     arkasında kalıyor. relative + inset:auto ile akışa alınır. */
  .contact__cardwrap{ position:relative; inset:auto; display:block; }
  .ofis{ position:relative; width:auto; margin-top:-2.8rem; }
}