/* =====================================================================
   NeFa — tasarim sistemi  v4
   Ekran goruntusuyle dogrulanarak yazildi.

   v3'te gorulen ve duzeltilen hatalar:
   - Logo 34px, koside kayboluyordu            -> 56px, sticky header, altin ayrac
   - Hero yazisi 3D formun UZERINE biniyordu   -> bolunmus kompozisyon + perde
   - Baslik dort satirlik cumleydi             -> kisa ve vurucu
   - 30+ filtre hapi duvar olusturuyordu       -> ikincil filtreler katlanir
   - Krem zemin soluk/ucuz duruyordu           -> daha derin, sicak, kontrastli
   ===================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
  ascent-override:92%; descent-override:24%; line-gap-override:0%;
}

:root{
  /* Zemin: daha derin ve sicak. Onceki #F4F2ED fazla solgundu. */
  --kagit:#EFECE4;
  --kagit-2:#E4E0D5;
  --kagit-3:#D6D1C4;
  --murekkep:#12110D;
  --govde:#46443D;
  --meta:#7A7870;
  --ayrac:#C6C1B4;

  --gece:#08080A;
  --gece-2:#111114;
  --gece-metin:#F1EFE9;
  --gece-meta:#8D8B83;
  --gece-ayrac:rgba(241,239,233,.13);

  --altin:#96762F;
  --altin-acik:#D6A94F;
  --altin-parlak:#F0D290;
  --altin-gradyan:linear-gradient(105deg,#F7E4AC 0%,#DCB055 22%,#A88539 46%,#F4DA97 62%,#B08C3C 80%,#8A6A24 100%);

  --f-mikro:.6875rem;
  --f-kucuk:.8125rem;
  --f-govde:.9375rem;
  --f-orta:1.0625rem;
  --f-alt:clamp(1.2rem,1.7vw,1.5rem);
  --f-buyuk:clamp(1.6rem,2.8vw,2.6rem);
  --f-dev:clamp(2.4rem,5.2vw,4.6rem);

  --tr-etiket:.17em;

  --b1:.25rem; --b2:.5rem; --b3:.75rem; --b4:1rem; --b5:1.25rem; --b6:1.5rem;
  --b8:2rem; --b10:2.5rem; --b12:3rem; --b14:3.5rem; --b16:4rem; --b20:5rem;
  --b24:6rem; --b28:7rem; --b32:8rem;

  --kenar:clamp(1.5rem,4.2vw,4.5rem);
  --en-genis:1680px;
  --ust-y:96px;

  --hizli:180ms cubic-bezier(.4,0,.2,1);
  --orta:340ms cubic-bezier(.4,0,.2,1);
  --yumusak:620ms cubic-bezier(.22,1,.36,1);
  --reveal:900ms cubic-bezier(.16,1,.3,1);

  /* animation KISAYOLU icin ayri degiskenler.
     --reveal hem sure hem egri tasidigi icin animation:'da kullanilamaz;
     kullanilirsa iki timing-function olusur, bildirim GECERSIZ olur ve
     opacity:0 kalir. (v4'te bu hata hero'yu tamamen gorunmez yapmisti.) */
  --sure-reveal:900ms;
  --egri-reveal:cubic-bezier(.16,1,.3,1);
}
@media (max-width:860px){ :root{ --ust-y:80px } }
@media (max-width:420px){ :root{ --ust-y:72px } }

html{ font-size:16px }
@media (min-width:1600px){ html{ font-size:17px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--kagit); color:var(--govde);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--f-govde); line-height:1.62;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video,canvas,svg{ display:block; max-width:100% }
img{ height:auto }

/* <picture> bir sarmalayicidir ve varsayilan yuksekligi AUTO'dur.
   Sadece img'ye height:100% verilirse picture cokuyor ve gorsel gorunmuyor.
   Oran kutusu olan her yerde ikisine birden veriyoruz. */
.is__foto picture,.alan__foto picture,.proje-hero picture{ width:100%; height:100% }
a{ color:inherit; text-decoration:none }
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--altin-acik); outline-offset:3px; border-radius:2px;
}
::selection{ background:var(--altin-acik); color:var(--gece) }

h1,h2,h3,h4{ margin:0; color:var(--murekkep); font-weight:500; letter-spacing:-.02em; text-wrap:balance }
p{ margin:0 0 var(--b4); text-wrap:pretty }

.etiket{ font-size:var(--f-mikro); line-height:1.5; padding-top:.2em; letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--meta); font-weight:500 }
.meta{ font-size:var(--f-kucuk); color:var(--meta); line-height:1.55; font-variant-numeric:tabular-nums }
.buyuk-metin{ font-size:var(--f-alt); line-height:1.5; color:var(--govde) }
.kabuk{ width:100%; max-width:var(--en-genis); margin-inline:auto; padding-inline:var(--kenar) }

/* =====================================================================
   UST SERIT — sabit, cam efektli, kaydirinca doluyor
   ===================================================================== */
/* Ust serit HER ZAMAN gorunur ve HER ZAMAN ayni yukseklikte kalir.
   Kaydirinca sadece zemini dolar (okunabilirlik icin); gizlenmez, kucultmez. */
.ust{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--ust-y);
  display:flex; align-items:center;
  transition:background var(--orta), border-color var(--orta), backdrop-filter var(--orta);
  border-bottom:1px solid transparent;
}
.ust__ic{
  width:100%; max-width:var(--en-genis); margin-inline:auto; padding-inline:var(--kenar);
  display:flex; align-items:center; justify-content:space-between; gap:var(--b6);
}
/* Hero uzerinde seffaf ve acik metin */
.ust--seffaf{ color:var(--gece-metin) }
.ust--seffaf .marka__ad{ color:var(--gece-metin) }
.ust--seffaf .nav a{ color:rgba(241,239,233,.78) }
.ust--seffaf .nav a:hover,.ust--seffaf .nav a[aria-current]{ color:var(--gece-metin) }
/* Kaydirinca / ic sayfalarda dolu */
.ust--dolu{
  background:color-mix(in srgb,var(--kagit) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--ayrac); color:var(--murekkep);
}
.ust--dolu .marka__ad{ color:var(--murekkep) }
.ust--dolu .nav a{ color:var(--govde) }
.ust--dolu .nav a:hover,.ust--dolu .nav a[aria-current]{ color:var(--murekkep) }

.marka{ display:flex; align-items:center; gap:var(--b4); flex:0 0 auto }
/* Logo her durumda AYNI boyutta — kaydirinca da, ic sayfalarda da kuculmez */
.marka img{ height:76px; width:auto }
@media (max-width:860px){ .marka img{ height:60px } }
@media (max-width:420px){ .marka img{ height:52px } }
.marka__ad{
  font-size:1.7rem; font-weight:500; letter-spacing:.06em; line-height:1;
  display:block;
}
@media (max-width:420px){ .marka__ad{ font-size:1.3rem } }
.marka__alt{
  display:block; font-size:.625rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--altin-acik); margin-top:.42em; font-weight:500;
}
.ust--dolu .marka__alt{ color:var(--altin) }
@media (max-width:560px){ .marka__alt{ display:none } }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.6rem) }
.nav a{
  position:relative; padding-block:.5em; font-size:var(--f-govde);
  letter-spacing:.01em; transition:color var(--hizli); white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:.22em; height:1px;
  background:var(--altin-acik); transition:right var(--orta);
}
.nav a:hover::after,.nav a[aria-current]::after{ right:0 }

/* ---------------- Mobil menu ---------------- */
.menu-dugme{
  display:none; background:none; border:0; padding:.6em .2em; cursor:pointer;
  color:inherit; font:inherit; align-items:center; gap:.6em;
}
.menu-dugme__cizgi{ display:block; width:26px; height:1px; background:currentColor; position:relative; transition:transform var(--orta),background var(--orta) }
.menu-dugme__cizgi::before,.menu-dugme__cizgi::after{
  content:''; position:absolute; left:0; width:26px; height:1px; background:currentColor;
  transition:transform var(--orta),top var(--orta);
}
.menu-dugme__cizgi::before{ top:-8px }
.menu-dugme__cizgi::after{ top:8px }
body.menu-acik .menu-dugme__cizgi{ background:transparent }
body.menu-acik .menu-dugme__cizgi::before{ top:0; transform:rotate(45deg) }
body.menu-acik .menu-dugme__cizgi::after{ top:0; transform:rotate(-45deg) }
.menu-dugme__ad{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase }

.mobil-menu{
  position:fixed; inset:0; z-index:45; background:var(--gece); color:var(--gece-metin);
  display:grid; align-content:center; padding:var(--ust-y) var(--kenar) var(--b16);
  opacity:0; visibility:hidden; transform:translateY(-1.5rem);
  transition:opacity var(--orta),transform var(--orta),visibility var(--orta);
}
body.menu-acik .mobil-menu{ opacity:1; visibility:visible; transform:none }
.mobil-menu nav{ display:grid; gap:var(--b2) }
.mobil-menu nav a{
  font-size:clamp(1.9rem,9vw,2.8rem); line-height:1.2; color:var(--gece-metin);
  letter-spacing:-.028em; padding-block:.28em; border-bottom:1px solid var(--gece-ayrac);
  display:flex; align-items:baseline; gap:.7em;
}
.mobil-menu nav a span{ font-size:var(--f-mikro); color:var(--altin-acik); letter-spacing:var(--tr-etiket) }
.mobil-menu nav a:active{ color:var(--altin-parlak) }
.mobil-menu__alt{ margin-top:var(--b12); display:grid; gap:var(--b2) }
.mobil-menu__alt a{ color:var(--gece-meta); font-size:var(--f-govde) }
.mobil-menu__alt a:hover{ color:var(--altin-parlak) }

@media (max-width:860px){
  .ust .nav{ display:none }
  .menu-dugme{ display:inline-flex }
}
@media (min-width:861px){ .mobil-menu{ display:none } }
body.menu-acik{ overflow:hidden }

/* =====================================================================
   HERO — bolunmus kompozisyon: yazi SOLDA, 3D SAGDA, cakismaz
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--gece); color:var(--gece-metin); overflow:hidden; isolation:isolate;
  padding-top:var(--ust-y);
}
/* Sahne hero'nun TAMAMINI kaplar; okunabilirligi perde saglar. */
.hero__sahne{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; transition:opacity 1600ms ease;
}
.hero__sahne.acik{ opacity:1 }
/* Mobilde sahne biraz kisilir ama tamamen kaybolmaz: perde zaten okunurlugu
   garanti ediyor, sahne de ilk ekrani dolduran dokuyu saglıyor. */
@media (max-width:900px){ .hero__sahne.acik{ opacity:.78 } }

.hero__poster{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 62% at 76% 44%,rgba(214,169,79,.17) 0%,transparent 66%),
    radial-gradient(50% 44% at 18% 76%,rgba(150,118,47,.09) 0%,transparent 72%),
    var(--gece);
}
/* Metnin HER ZAMAN okunmasini garanti eden perde.
   Sahne tam ekran oldugu icin perde sadece SOL bantta koyu, sagda seffaf. */
.hero__perde{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(6,6,8,.97) 0%, rgba(6,6,8,.9) 22%, rgba(6,6,8,.6) 40%,
                           rgba(6,6,8,.18) 56%, transparent 70%),
    linear-gradient(to top, rgba(6,6,8,.7) 0%, transparent 26%);
}
@media (max-width:900px){
  .hero__perde{
    background:linear-gradient(180deg,rgba(6,6,8,.72) 0%,rgba(6,6,8,.88) 42%,rgba(6,6,8,.95) 100%);
  }
}

.hero__ic{ position:relative; z-index:2; width:100%; padding-block:var(--b16) var(--b20) }
.hero__etiket{ color:var(--altin-acik); margin-bottom:var(--b6); display:block }
.hero h1{
  color:var(--gece-metin); font-size:var(--f-dev); line-height:1.02;
  letter-spacing:-.032em; font-weight:400; max-width:13ch; margin-bottom:var(--b8);
}
.hero h1 em{
  font-style:normal; display:block;
  background:var(--altin-gradyan); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__ozet{
  color:rgba(241,239,233,.7); max-width:42ch; font-size:var(--f-orta);
  line-height:1.62; margin:0 0 var(--b10);
}
.hero__eylem{ display:flex; flex-wrap:wrap; gap:var(--b4) var(--b6); align-items:center }

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--f-govde); letter-spacing:.02em; padding:.95em 1.9em;
  border:1px solid currentColor; transition:all var(--orta); white-space:nowrap;
}
.btn--altin{ border-color:var(--altin-acik); color:var(--gece); background:var(--altin-acik) }
.btn--altin:hover{ background:var(--altin-parlak); border-color:var(--altin-parlak) }
.btn--hayalet{ color:rgba(241,239,233,.86); border-color:rgba(241,239,233,.3) }
.btn--hayalet:hover{ color:var(--gece-metin); border-color:var(--gece-metin) }
.btn__ok{ transition:transform var(--orta) }
.btn:hover .btn__ok{ transform:translateX(4px) }

.hero__serit{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(214,169,79,.22);
}
.hero__serit-ic{
  max-width:var(--en-genis); margin-inline:auto; padding:var(--b5) var(--kenar);
  display:flex; flex-wrap:wrap; gap:var(--b4) var(--b8); align-items:center; justify-content:space-between;
}
.hero__disiplin{ display:flex; flex-wrap:wrap; gap:var(--b4) var(--b8) }
.hero__disiplin a{
  color:rgba(241,239,233,.72); font-size:var(--f-kucuk); letter-spacing:.02em;
  transition:color var(--hizli); position:relative; padding-bottom:.2em;
}
.hero__disiplin a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--altin-acik); transition:right var(--orta);
}
.hero__disiplin a:hover{ color:var(--gece-metin) }
.hero__disiplin a:hover::after{ right:0 }
.kaydir{ display:flex; align-items:center; gap:var(--b3); color:var(--gece-meta); font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; white-space:nowrap }
.kaydir::before{ content:''; width:44px; height:1px; background:var(--altin-acik); transform-origin:left; animation:kc 2.8s ease-in-out infinite }
@keyframes kc{ 0%,100%{ transform:scaleX(.22); opacity:.4 } 50%{ transform:scaleX(1); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .kaydir::before{ animation:none } }

/* MOBIL HERO — masaustundeki gibi ILK EKRANI TAM KAPLAR.
   Boylece "Secilmis isler" kaydirmadan gorunmez.

   DIKKAT: .hero bir flex konteyner. Serit position:static olunca YAN YANA
   flex ogesi haline geliyor ve saga yapisiyordu; bu yuzden mobilde yon
   dikeye cevriliyor ve serit en alta oturuyor. */
@media (max-width:860px){
  .hero{
    min-height:100svh;                 /* svh: mobil tarayici cubugu hesaba katilir */
    flex-direction:column; align-items:stretch; justify-content:flex-end;
    padding-top:var(--ust-y); padding-bottom:0;
  }
  .hero__ic{
    flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
    padding-block:var(--b10);
  }
  .hero__serit{ position:static; flex:0 0 auto }
  .hero__serit-ic{ padding-block:var(--b4); gap:var(--b4) }
  .hero__disiplin{
    flex-wrap:nowrap; overflow-x:auto; gap:var(--b6);
    scrollbar-width:none; -webkit-overflow-scrolling:touch; width:100%;
  }
  .hero__disiplin::-webkit-scrollbar{ display:none }
  .hero__disiplin a{ white-space:nowrap }
  .kaydir{ display:none }

  /* Dar ekranda daha derli toplu tipografi */
  .hero__etiket{ font-size:.625rem; letter-spacing:.14em; margin-bottom:var(--b4) }
  .hero h1{ font-size:clamp(2.1rem,10vw,3rem); max-width:12ch; margin-bottom:var(--b6) }
  .hero__ozet{ font-size:var(--f-govde); line-height:1.6; margin-bottom:var(--b8); max-width:34ch }
  .hero__eylem{ gap:var(--b3) }
  .hero__eylem .btn{ flex:1 1 auto; justify-content:center; padding-block:.85em }
}

/* Cok kisa ekranlarda (yatay telefon) tam yukseklik dayatma */
@media (max-width:860px) and (max-height:560px){
  .hero{ min-height:auto }
  .hero__ic{ padding-block:var(--b8) }
}

/* =====================================================================
   IC SAYFA BASI — KOYU BANT
   Tum ic sayfalar hero ve footer ile ayni dili konussun diye baslik
   alani koyu zemine alindi. Icerik asagida kagit zeminde devam eder.
   ===================================================================== */
.ic-bas{
  background:var(--gece); color:var(--gece-metin); position:relative; overflow:hidden;
  padding-top:calc(var(--ust-y) + var(--b14)); padding-bottom:var(--b16);
}
.ic-bas::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 70% at 84% 22%,rgba(214,169,79,.12) 0%,transparent 66%),
    radial-gradient(46% 52% at 8% 92%,rgba(150,118,47,.08) 0%,transparent 72%);
}
.ic-bas > *{ position:relative }
.ic-bas__ic{ display:grid; gap:var(--b8); align-items:end }
@media (min-width:1000px){ .ic-bas__ic{ grid-template-columns:1.15fr 1fr; gap:var(--b16) } }
.ic-bas h1{
  font-size:var(--f-dev); line-height:1.04; letter-spacing:-.032em;
  font-weight:400; max-width:15ch; color:var(--gece-metin); margin:0;
}
.ic-bas h1 em{
  font-style:normal; background:var(--altin-gradyan);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ic-bas .giris{ margin:0; max-width:48ch; font-size:var(--f-orta); line-height:1.7; color:rgba(241,239,233,.7) }
.ic-bas .etiket{ color:var(--altin-acik); margin-bottom:var(--b5); display:block }

.kirinti{ display:flex; gap:var(--b2); align-items:center; margin-bottom:var(--b6); flex-wrap:wrap }
.kirinti a{ color:var(--gece-meta); font-size:var(--f-kucuk); transition:color var(--hizli) }
.kirinti a:hover{ color:var(--altin-parlak) }
.kirinti span{ color:rgba(241,239,233,.28); font-size:var(--f-kucuk) }
/* Kagit zeminde kullanilan kirinti (proje detay) */
.kirinti--kagit a{ color:var(--meta) }
.kirinti--kagit a:hover{ color:var(--altin) }
.kirinti--kagit span{ color:var(--ayrac) }

/* =====================================================================
   BOLUM
   ===================================================================== */
.bolum{ padding-block:var(--b24) }
@media (max-width:820px){ .bolum{ padding-block:var(--b16) } }
.bolum--sik{ padding-block:var(--b12) }
.bolum-bas{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--b6); padding-bottom:var(--b4); margin-bottom:var(--b12); border-bottom:1px solid var(--ayrac); flex-wrap:wrap }
.bolum-bas h2{ font-size:var(--f-buyuk); line-height:1.1; letter-spacing:-.024em; font-weight:400 }
.indeks{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); color:var(--altin); text-transform:uppercase; font-weight:500; font-variant-numeric:tabular-nums }
.bag{ font-size:var(--f-govde); white-space:nowrap; position:relative; padding-bottom:.18em; display:inline-flex; align-items:center; gap:.5em }
.bag::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--altin); transform:scaleX(0); transform-origin:right; transition:transform var(--orta) }
.bag:hover::after{ transform:scaleX(1); transform-origin:left }
.bag span{ transition:transform var(--orta) }
.bag:hover span{ transform:translateX(4px) }

/* =====================================================================
   PROJE KARTLARI
   ===================================================================== */
.akis{ display:grid; gap:var(--b20) }
@media (max-width:820px){ .akis{ gap:var(--b14) } }

.is{ position:relative; display:block }
.is__foto{ position:relative; overflow:hidden; background:var(--kagit-2); aspect-ratio:4/3 }
.is__foto::after{
  content:''; position:absolute; inset:0; background:var(--gece); opacity:0;
  transition:opacity var(--orta); pointer-events:none;
}
.is:hover .is__foto::after{ opacity:.12 }
.is__foto picture,.is__foto img{ width:100%; height:100%; object-fit:cover }
.is__foto img{ transition:transform 1100ms cubic-bezier(.16,1,.3,1); will-change:transform }
.is:hover .is__foto img{ transform:scale(1.04) }

.is__bilgi{ display:flex; gap:var(--b5); align-items:flex-start; padding-top:var(--b5) }
.is__govde{ min-width:0 }
.is__no{ font-size:var(--f-mikro); color:var(--altin); letter-spacing:var(--tr-etiket); font-weight:500; padding-top:.6em; min-width:2.1em; font-variant-numeric:tabular-nums }
.is__fikir{
  font-size:var(--f-alt); line-height:1.3; color:var(--murekkep); font-weight:400;
  margin:0 0 var(--b2); max-width:30ch; letter-spacing:-.012em;
  background-image:linear-gradient(var(--altin),var(--altin));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--yumusak);
}
.is:hover .is__fikir{ background-size:100% 1px }
.is__kunye{ font-size:var(--f-kucuk); color:var(--meta); margin:0; font-variant-numeric:tabular-nums }

/* --- Dev kart: bilgi satiri iki sutun (fikir solda, kunye sagda) */
.is--dev .is__foto{ aspect-ratio:21/9 }
.is--dev .is__fikir{ font-size:var(--f-buyuk); line-height:1.12; max-width:22ch; margin-bottom:0 }
.is--dev .is__bilgi{
  display:grid; grid-template-columns:3.2em 1fr; gap:var(--b5);
  padding-top:var(--b6); border-top:1px solid var(--ayrac); margin-top:var(--b5);
}
.is--dev .is__govde{ display:grid; gap:var(--b4) }
@media (min-width:900px){
  .is--dev .is__govde{ grid-template-columns:1.4fr 1fr; gap:var(--b10); align-items:baseline }
  .is--dev .is__kunye{ text-align:right }
}
.is--dev .is__no{ font-size:var(--f-kucuk); padding-top:.3em }
@media (max-width:760px){ .is--dev .is__foto{ aspect-ratio:4/3 } .is--dev .is__fikir{ font-size:var(--f-alt) } }

/* Kart etiketi: disiplinler, kunyenin ustunde ince satir */
.is__disiplin{
  font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase;
  color:var(--altin); font-weight:500; display:block; margin-bottom:var(--b2); line-height:1.5;
}

.ikili{ display:grid; gap:var(--b12) }
@media (min-width:900px){ .ikili{ grid-template-columns:1fr 1fr; gap:var(--b12); align-items:start } .ikili>:nth-child(2){ margin-top:var(--b20) } }

.izgara{ display:grid; gap:var(--b12) var(--b6) }
@media (min-width:640px){ .izgara{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .izgara{ grid-template-columns:repeat(3,1fr) } }

/* =====================================================================
   FILTRE — birincil satir gorunur, gerisi katlanir
   ===================================================================== */
.filtre{ padding-block:var(--b6) var(--b8); border-block:1px solid var(--ayrac) }
.filtre__ana{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--b3); justify-content:space-between }
.filtre__cipler{ display:flex; flex-wrap:wrap; gap:var(--b2) }
.cip{
  font-size:var(--f-kucuk); color:var(--govde); padding:.42em .95em;
  border:1px solid var(--ayrac); border-radius:100px; transition:all var(--hizli); white-space:nowrap;
}
.cip:hover{ border-color:var(--murekkep); color:var(--murekkep) }
.cip[aria-current]{ background:var(--murekkep); border-color:var(--murekkep); color:var(--kagit) }
.cip__adet{ color:var(--meta); font-variant-numeric:tabular-nums; margin-left:.35em }
.cip[aria-current] .cip__adet{ color:rgba(239,236,228,.6) }

details.gelismis{ margin-top:var(--b5) }
details.gelismis summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--f-kucuk); color:var(--meta); transition:color var(--hizli);
}
details.gelismis summary::-webkit-details-marker{ display:none }
details.gelismis summary::after{ content:'+'; color:var(--altin); font-size:1.05em }
details.gelismis[open] summary::after{ content:'−' }
details.gelismis summary:hover{ color:var(--murekkep) }
.gelismis__ic{ padding-top:var(--b5); display:grid; gap:var(--b4) }
.gelismis__satir{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--b2) var(--b3) }
.gelismis__ad{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--meta); min-width:6.5em; font-weight:500 }

.sayfalama{ display:flex; align-items:center; justify-content:space-between; gap:var(--b6); margin-top:var(--b16); padding-top:var(--b5); border-top:1px solid var(--ayrac) }

/* Karta hover'da beliren ok — "tiklanabilir" sinyali */
.is__ok{
  position:absolute; right:var(--b5); bottom:var(--b5); z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--altin-acik); color:var(--gece);
  opacity:0; transform:translateY(10px) scale(.9);
  transition:opacity var(--orta),transform var(--orta);
  pointer-events:none; font-size:1.1rem; line-height:1;
}
.is:hover .is__ok{ opacity:1; transform:none }
@media (hover:none){ .is__ok{ display:none } }

/* =====================================================================
   RAKAMLAR — kimlik bandi
   ===================================================================== */
.rakamlar{
  display:grid; gap:var(--b8) var(--b6);
  grid-template-columns:repeat(2,1fr);
  padding-block:var(--b16); border-block:1px solid var(--ayrac);
}
@media (min-width:900px){ .rakamlar{ grid-template-columns:repeat(4,1fr); gap:var(--b6) } }
.rakam__sayi{
  display:block; font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1; font-weight:400;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  background:var(--altin-gradyan); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:var(--b3);
}
.rakam__ad{
  font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase;
  color:var(--meta); font-weight:500; display:block; line-height:1.5;
}
.rakam__not{ font-size:var(--f-kucuk); color:var(--meta); margin:var(--b2) 0 0; max-width:22ch }

/* =====================================================================
   GECE BANT
   ===================================================================== */
.gece-bant{ background:var(--gece); color:var(--gece-metin); padding-block:var(--b28); position:relative; overflow:hidden }
.gece-bant::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(72% 56% at 82% 26%,rgba(214,169,79,.085) 0%,transparent 66%) }
.gece-bant>*{ position:relative }
.gece-bant h2,.gece-bant h3,.gece-bant h4{ color:var(--gece-metin) }
.gece-bant .bolum-bas{ border-color:var(--gece-ayrac) }
.gece-bant .meta{ color:var(--gece-meta) }
.gece-bant .bag{ color:var(--gece-metin) }

/* Yaklasim: solda numarali maddeler, sagda dikey gorsel.
   Uc kisa sutun bandin yarisini bos birakiyordu. */
.yaklasim-duzen{ display:grid; gap:var(--b12) }
@media (min-width:1000px){ .yaklasim-duzen{ grid-template-columns:1.25fr .75fr; gap:var(--b20); align-items:start } }

.manifesto{ display:grid; gap:0 }
.madde{
  display:grid; grid-template-columns:3.6em 1fr; gap:var(--b5);
  padding-block:var(--b8); border-bottom:1px solid var(--gece-ayrac);
}
.madde:first-child{ padding-top:0 }
.madde:last-child{ border-bottom:0; padding-bottom:0 }
.madde__no{
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1; font-weight:400;
  background:var(--altin-gradyan); -webkit-background-clip:text; background-clip:text;
  color:transparent; letter-spacing:-.035em; font-variant-numeric:tabular-nums; padding-top:.1em;
}
.madde h3{ font-size:var(--f-alt); line-height:1.34; margin-bottom:var(--b3); font-weight:500 }
.madde p{ color:var(--gece-meta); margin:0; max-width:44ch }

.yaklasim-foto{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--gece-2) }
.yaklasim-foto picture,.yaklasim-foto img{ width:100%; height:100%; object-fit:cover }
.yaklasim-foto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.5) 0%,transparent 46%);
}
@media (max-width:999px){ .yaklasim-foto{ aspect-ratio:16/10 } }

/* =====================================================================
   ALAN KARTLARI
   ===================================================================== */
.alanlar{ display:grid; gap:var(--b6) }
@media (min-width:860px){ .alanlar{ grid-template-columns:repeat(3,1fr) } }
.alan{ position:relative; display:block; overflow:hidden; background:var(--kagit-2) }
.alan__foto{ aspect-ratio:3/4; overflow:hidden }
.alan__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1100ms cubic-bezier(.16,1,.3,1) }
.alan:hover .alan__foto img{ transform:scale(1.05) }
.alan__ust{ position:absolute; inset:auto 0 0 0; padding:var(--b6); background:linear-gradient(to top,rgba(8,8,10,.9) 0%,rgba(8,8,10,.42) 56%,transparent 100%); color:#F1EFE9 }
.alan__ust h3{ color:#F1EFE9; font-size:var(--f-orta); margin-bottom:var(--b1) }
.alan__ust p{ color:rgba(241,239,233,.68); font-size:var(--f-kucuk); margin:0 }
.alan__cizgi{ display:block; width:28px; height:1px; background:var(--altin-acik); margin-bottom:var(--b3); transition:width var(--orta) }
.alan:hover .alan__cizgi{ width:56px }

/* =====================================================================
   PROJE DETAY — tam ekran gorsel uzerinde baslik
   ===================================================================== */
.proje-kapak{
  position:relative; overflow:hidden; background:var(--gece);
  min-height:min(78svh,780px); display:flex; align-items:flex-end;
}
.proje-kapak__foto{ position:absolute; inset:0 }
.proje-kapak__foto picture,.proje-kapak__foto img{ width:100%; height:100%; object-fit:cover }
.proje-kapak::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,8,.92) 0%,rgba(6,6,8,.55) 34%,rgba(6,6,8,.15) 62%,rgba(6,6,8,.35) 100%);
}
.proje-kapak__ic{ position:relative; z-index:2; width:100%; padding-block:var(--b12) }
.proje-kapak h1{
  color:var(--gece-metin); font-size:var(--f-dev); line-height:1.05;
  letter-spacing:-.03em; font-weight:400; max-width:18ch; margin:0 0 var(--b5);
}
.proje-kapak .etiket{ color:var(--altin-acik); display:block; margin-bottom:var(--b4) }
.proje-kapak__kunye{ color:rgba(241,239,233,.75); font-size:var(--f-orta); margin:0 }
.proje-kapak__kredi{ position:relative; z-index:2; font-size:var(--f-mikro); color:rgba(241,239,233,.42); padding-bottom:var(--b4) }

.proje-hero{ position:relative; overflow:hidden; background:var(--kagit-2); aspect-ratio:21/9 }
@media (max-width:820px){ .proje-hero{ aspect-ratio:4/3 } }
.proje-hero img{ width:100%; height:100%; object-fit:cover }
.proje-bas{ display:grid; gap:var(--b10); padding-block:var(--b14) }
@media (min-width:1000px){ .proje-bas{ grid-template-columns:1.55fr 1fr; gap:var(--b16) } }
.proje-bas h1{ font-size:var(--f-buyuk); line-height:1.14; font-weight:400; letter-spacing:-.024em; max-width:22ch }
.kunye-liste{ display:grid; margin:0; border-top:1px solid var(--ayrac) }
.kunye-liste>div{ display:grid; grid-template-columns:8.5em 1fr; gap:var(--b4); padding:var(--b3) 0; border-bottom:1px solid var(--ayrac) }
.kunye-liste dt{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--meta); padding-top:.3em }
.kunye-liste dd{ margin:0; color:var(--murekkep); font-size:var(--f-govde) }
@media (max-width:520px){ .kunye-liste>div{ grid-template-columns:1fr; gap:var(--b1) } }
.yapiskan{ position:sticky; top:calc(var(--ust-y) + var(--b6)); align-self:start }
.proje-bolum{ display:grid; gap:var(--b5); padding-block:var(--b12) 0 }
@media (min-width:1000px){ .proje-bolum{ grid-template-columns:13em 1fr; gap:var(--b12) } }
.proje-bolum h2{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--altin); font-weight:500; padding-top:.5em }
figure{ margin:0 }
figure figcaption{ font-size:var(--f-kucuk); color:var(--meta); margin-top:var(--b3); max-width:52ch }
figcaption .kredi{ display:block; margin-top:var(--b1); font-size:var(--f-mikro); color:var(--kagit-3) }
.gezinti{ display:grid; gap:var(--b8); padding-block:var(--b16); border-top:1px solid var(--ayrac); margin-top:var(--b16) }
@media (min-width:800px){ .gezinti{ grid-template-columns:1fr 1fr } .gezinti>:last-child{ text-align:right } }
.gezinti .yon{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--altin); margin-bottom:var(--b2); display:block }
.gezinti .ad{ font-size:var(--f-alt); color:var(--murekkep); line-height:1.32 }

/* =====================================================================
   YAZI / FORM
   ===================================================================== */
.yazi{ max-width:64ch }
.yazi p{ font-size:var(--f-alt); line-height:1.72; margin-bottom:var(--b6); color:var(--govde) }
.yazi p:last-child{ margin-bottom:0 }
.form{ display:grid; gap:var(--b6); max-width:34rem }
.alan-grup{ display:grid; gap:var(--b2) }
.alan-grup label{ font-size:var(--f-mikro); letter-spacing:var(--tr-etiket); text-transform:uppercase; color:var(--meta); font-weight:500 }
.alan-grup input,.alan-grup textarea{ font:inherit; color:var(--murekkep); background:transparent; border:0; border-bottom:1px solid var(--ayrac); padding:.7em 0; transition:border-color var(--hizli) }
.alan-grup input:focus,.alan-grup textarea:focus{ outline:0; border-color:var(--altin) }
.alan-grup textarea{ resize:vertical; min-height:7.5rem }
.dugme{ justify-self:start; font:inherit; font-size:var(--f-govde); padding:.95em 2.4em; border:1px solid var(--murekkep); background:var(--murekkep); color:var(--kagit); cursor:pointer; transition:all var(--orta) }
.dugme:hover{ background:transparent; color:var(--murekkep) }
.tuzak{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.uyari{ padding:var(--b4) var(--b5); border-left:2px solid var(--altin); background:var(--kagit-2); margin-bottom:var(--b8); max-width:44rem }
.uyari--iyi{ border-color:#3D7A55 }
.uyari p{ margin:0; font-size:var(--f-govde) }

/* =====================================================================
   ALT BILGI
   ===================================================================== */
.alt{
  background:var(--gece); color:var(--gece-metin);
  padding-block:var(--b24) var(--b8); position:relative; overflow:hidden;
}
.alt::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(64% 52% at 88% 8%,rgba(214,169,79,.08) 0%,transparent 62%);
}
.alt > *{ position:relative }
.alt a{ transition:color var(--hizli) }
.alt a:hover{ color:var(--altin-parlak) }

/* --- Cagri bandi: buyuk baslik + eylem + dogrudan iletisim yan yana */
.alt__cagri-bant{
  display:grid; gap:var(--b10); align-items:end;
  padding-bottom:var(--b16); border-bottom:1px solid var(--gece-ayrac);
}
@media (min-width:900px){ .alt__cagri-bant{ grid-template-columns:1.3fr auto; gap:var(--b16) } }
.alt__cagri{
  font-size:var(--f-dev); line-height:1.06; color:var(--gece-metin);
  font-weight:400; letter-spacing:-.03em; max-width:14ch; margin:0;
}
.alt__cagri em{
  font-style:normal; display:block;
  background:var(--altin-gradyan); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.alt__hizli{ display:grid; gap:var(--b5); justify-items:start }
@media (min-width:900px){ .alt__hizli{ justify-items:end; text-align:right } }
.alt__tel{
  font-size:var(--f-alt); color:var(--gece-metin); letter-spacing:.01em;
  border-bottom:1px solid rgba(214,169,79,.4); padding-bottom:.18em;
}
.alt__tel:hover{ border-color:var(--altin-acik) }

/* --- Sutunlar */
.alt__izgara{ display:grid; gap:var(--b10); padding-block:var(--b14) }
@media (min-width:720px){ .alt__izgara{ grid-template-columns:repeat(3,1fr); gap:var(--b8) } }
@media (min-width:1100px){ .alt__izgara{ grid-template-columns:1.2fr 1fr 1fr 1.4fr } }
.alt h4{
  font-size:var(--f-mikro); text-transform:uppercase; letter-spacing:var(--tr-etiket);
  color:var(--altin-acik); font-weight:500; margin-bottom:var(--b5); line-height:1.5;
}
.alt ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--b3) }
.alt ul a{ color:rgba(241,239,233,.82); font-size:var(--f-govde) }
.alt__adres{ color:var(--gece-meta); font-size:var(--f-govde); line-height:1.7; margin:0 }

/* --- Alt bar */
.alt__bar{
  display:grid; gap:var(--b6); padding-top:var(--b8);
  border-top:1px solid var(--gece-ayrac);
}
@media (min-width:860px){ .alt__bar{ grid-template-columns:auto 1fr; align-items:center; gap:var(--b10) } }
.alt__marka{ display:flex; align-items:center; gap:var(--b4) }
.alt__marka img{ height:72px; width:auto }
.alt__marka .ad{ font-size:1.55rem; letter-spacing:.06em; color:var(--gece-metin); font-weight:500; display:block; line-height:1 }
.alt__marka .slogan{
  display:block; font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--altin-acik); margin-top:.5em;
}
.alt__telif{
  display:flex; flex-wrap:wrap; gap:var(--b3) var(--b6); justify-content:flex-start;
  font-size:var(--f-kucuk); color:var(--gece-meta);
}
@media (min-width:860px){ .alt__telif{ justify-content:flex-end } }

/* =====================================================================
   HAREKET
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .gir{ opacity:0; transform:translateY(24px); transition:opacity var(--reveal),transform var(--reveal) }
  .gir.gorundu{ opacity:1; transform:none }
  .gir--gec{ transition-delay:110ms }
  .gir--gecc{ transition-delay:220ms }
  .gir .is__foto img,.gir .alan__foto img{ transform:scale(1.08); transition:transform 1400ms cubic-bezier(.16,1,.3,1) }
  .gir.gorundu .is__foto img,.gir.gorundu .alan__foto img{ transform:scale(1) }

  /* Sayfa acilisi — kisayol yerine ACIK ozellikler (bkz. --sure-reveal notu) */
  .hero__ic>*{
    opacity:0; transform:translateY(20px);
    animation-name:acil;
    animation-duration:var(--sure-reveal);
    animation-timing-function:var(--egri-reveal);
    animation-fill-mode:forwards;
  }
  .hero__ic>*:nth-child(1){ animation-delay:.10s }
  .hero__ic>*:nth-child(2){ animation-delay:.20s }
  .hero__ic>*:nth-child(3){ animation-delay:.30s }
  .hero__ic>*:nth-child(4){ animation-delay:.40s }
  @keyframes acil{ to{ opacity:1; transform:none } }
}

/* =====================================================================
   YARDIMCI
   ===================================================================== */
.gizli-gorsel{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.atla{ position:absolute; left:var(--kenar); top:-4rem; z-index:100; background:var(--murekkep); color:var(--kagit); padding:var(--b3) var(--b4); transition:top var(--orta) }
.atla:focus{ top:var(--b3) }
.foto--bos{ display:grid; place-items:center; background:var(--kagit-2) }
.foto--bos span{ font-size:var(--f-mikro); color:var(--meta); letter-spacing:var(--tr-etiket); text-transform:uppercase }