/* Batın Ambalaj — ana sayfa sahnesi
 * Sıfırdan yazıldı. Önceki sürümün bırakılma sebepleri:
 *   · sayfa açık zeminle koyu bölümler arasında gidip geliyordu
 *   · her bölümün üstünde 01 / 02 gibi numaralı küçük etiketler vardı
 *   · "Kaydırın" ibaresi, nokta ayraç dizileri, kart yığını
 *   · raf panelleri ekranı tek tek kaplıyordu
 *
 * Bu sürümün kuralları:
 *   TEMA KİLİDİ   tek zemin: kâğıt. Koyu alan yalnızca fotoğrafın kendi
 *                 çerçevesi içinde kalır, bölüm zemini olmaz.
 *   TEK VURGU     film mavisi (#1D4E89). Kraft yalnızca fotoğraftaki
 *                 mukavvanın kendi rengi olarak görünür.
 *   TEK KÖŞE      her şey 2px.
 *   ETİKET YOK    bölüm üstü küçük büyük-harf etiket kullanılmadı.
 *   DÜZEN ÇEŞİDİ  maske, yatay yolculuk, sabit sahne, çıplak sayı,
 *                 akan şerit, editoryal ikili: altı ayrı düzen ailesi.
 *
 * Hareket: yalnız transform / opacity / clip-path. Tek rAF döngüsü,
 * kaydırma olayında hesap yok. prefers-reduced-motion seçende sayfa
 * hareketsiz ve tam okunur hâle düşer.
 */

.sahne-aktif{
  --kagit:#F1F0EC;
  --kagit-2:#E6E4DE;
  --murekkep:#14161A;
  --murekkep-2:#454A52;
  --murekkep-3:#80868E;
  --mavi:#1D4E89;
  --cizgi:#14161A1F;
  --ol:clamp(20px,5vw,80px);
  --en:1400px;
  --yay:cubic-bezier(.16,1,.3,1);
  --ust-y:76px;
  /* Sayfadaki her şeyin ortak sol kenarı. Kapsayıcılı bölümlerde
     (100vw - en) / 2 + oluk, dar ekranda yalnız oluk. Tam genişlikte
     duran bölümler de bu değeri kullanır, böylece tek hiza olur. */
  --kenar:max(var(--ol), calc((100vw - var(--en)) / 2 + var(--ol)));
  background:var(--kagit);
}

/* ---------------------------------------------------------------- taban */
/* batin_foto_img fotoğrafı <picture> içinde basıyor. <picture> satır içi
   bir öğe olduğu için içindeki img'nin yüzde yüksekliği çözülmüyor ve
   çerçeve boş kalıyordu; sahnedeki bütün çerçevelerde blok yapılıyor. */
.sahne-aktif picture{display:block;width:100%;height:100%}
.sahne-aktif main{background:var(--kagit)}
.sh-ic{padding:0 var(--kenar)}

.sahne-aktif h1,.sahne-aktif h2,.sahne-aktif h3{
  font-family:"Bricolage Grotesque",Inter,sans-serif;color:var(--murekkep);
  letter-spacing:-.05em;line-height:.9;text-wrap:balance;margin:0}

/* tek düğme biçimi */
.sh-dg{display:inline-flex;align-items:center;justify-content:center;
  height:54px;padding:0 28px;border-radius:2px;white-space:nowrap;
  font-size:15px;font-weight:550;letter-spacing:-.01em;
  transition:transform .2s var(--yay),background .2s ease,
             color .2s ease,box-shadow .2s ease}
.sh-dg:active{transform:translateY(1px) scale(.99)}
.sh-dg-1{background:var(--murekkep);color:var(--kagit)}
.sh-dg-1:hover{background:var(--mavi)}
.sh-dg-2{color:var(--murekkep);box-shadow:inset 0 0 0 1.5px var(--cizgi)}
.sh-dg-2:hover{box-shadow:inset 0 0 0 1.5px var(--murekkep)}

/* başlık: sahnede şeffaf, kaydırınca kâğıt zemin alır */
.sahne-aktif .hd{position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
.sahne-aktif .hd.kati{background:rgba(241,240,236,.9);
  backdrop-filter:saturate(170%) blur(14px);border-bottom-color:var(--cizgi)}
@media (max-width:900px){
  .sahne-aktif .hd{position:sticky;background:rgba(241,240,236,.95)}
}

/* ============================================================ 1 · MASKE */
/* Fotoğraf harflerin içinden görünür. İki satır, yedişer harf: gövde
   kalın olduğu için fotoğraf okunur. Kaydırınca harfler büyür, fotoğraf
   harflerin dışına taşıp ekranı kaplar. */
/* Giriş sola hizalı: sayfanın geri kalanı sola hizalı olduğu için
   ortalanmış giriş hizasız duruyordu. Ölçü hem genişliğe hem yüksekliğe
   bağlı; min() sayesinde başlık hiçbir ekranda görüntü alanını aşmıyor
   ve düğmeler her zaman kaydırmadan görünüyor. */
/* Giriş, ekranın tamamını kullanan tek bir blok: slogan satırları
   kenardan kenara (JS her satırı kendi genişliğine oturtuyor), altında
   iki sütunlu ayak. Sağda boş yarım ekran, altta boş yarım ekran yok.
   Kaydırmada harfler yerinde durur; yalnızca fotoğraf harflerden taşar. */
.sh-maske{position:relative;height:300vh}
.sh-maske .sahne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;
  padding-top:calc(var(--ust-y,76px) + 24px);text-align:left}

.sh-maske .tas{position:absolute;inset:0;z-index:1;opacity:0;
  clip-path:inset(46% 46% 46% 46%);will-change:transform,opacity,clip-path}
.sh-maske .tas img{width:100%;height:100%;object-fit:cover}
.sh-maske .tas::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,16,20,.55),rgba(14,16,20,.12) 45%,rgba(14,16,20,.8))}

.sh-maske .blok{position:relative;z-index:3;width:100%;
  padding:0 var(--kenar);will-change:transform,opacity}
.sh-maske h1{margin:0}
/* Üç satır da aynı ölçüm ailesinden: ikisi fotoğraf maskeli, üçüncüsü
   mavi. width:max-content şart; düz blokta genişlik kapsayıcıya eşit
   çıkıyor ve JS satırı ölçemiyor. Türkçe diakritikler (Ö, Ü) .88 satır
   yüksekliğinde üstten kırpılıyordu; .96 + üst pay ile sığıyor.
   font-size buradaki değer JS çalışmazsa geçerli olan tabandır. */
.sh-maske .sr{display:block;width:max-content;white-space:nowrap;
  line-height:.9;letter-spacing:-.055em;font-size:min(12vw,24vh);
  font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-variation-settings:"wght" 800,"wdth" 88}
.sh-maske h1 .sr:first-child{padding-top:.05em}
.sh-maske h1{
  background-size:cover;background-position:center 62%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:contrast(1.18) brightness(.78) saturate(.92)}
/* Ayak da kenardan kenara: solda slogan ikinci yarısı + giriş cümlesi,
   sağ kenarda düğmeler. */
.sh-maske .ayak{display:grid;align-items:end;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,64px);margin-top:clamp(20px,3vh,40px)}
.sh-maske .sag{display:grid;justify-items:start;gap:clamp(10px,1.4vh,16px)}
.sh-maske .ikinci{
  font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-size:clamp(30px,3.5vw,54px);line-height:.95;letter-spacing:-.045em;
  color:var(--mavi);font-variation-settings:"wght" 680,"wdth" 90;
  white-space:nowrap}
.sh-maske .alt{margin:0;max-width:52ch;
  font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:var(--murekkep-2)}
.sh-maske .dgm{display:flex;gap:12px;flex-wrap:wrap;margin:0;
  justify-self:end}

/* Dar ekranda ayak tek sütuna iner; iki sütun 375px'te sıkışıyordu. */
@media (max-width:860px){
  .sh-maske{height:260vh}
  /* Başlık çubuğu akışta yer kaplıyor; sahne kalan alanı kaplasın ki
     giriş ilk ekranda tam görünsün. */
  .sh-maske .sahne{height:calc(100svh - var(--ust-y,76px));
    align-content:center;padding-top:clamp(16px,3vh,30px)}
  .sh-maske .ayak{grid-template-columns:minmax(0,1fr);
    gap:clamp(14px,2.4vh,22px)}
  .sh-maske .dgm{justify-self:start}
}

/* fotoğraf açıldıktan sonra üstüne gelen tek cümle */
.sh-maske .son{position:absolute;inset:auto 0 0 0;z-index:4;
  padding:0 var(--kenar) clamp(64px,11vh,128px);opacity:0;
  will-change:opacity,transform;pointer-events:none}
.sh-maske .son p{max-width:19ch;margin:0;color:#F1F0EC;
  font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-size:min(4.8vw,7vh);line-height:.98;letter-spacing:-.045em;
  font-variation-settings:"wght" 760,"wdth" 90}


/* ========================================================== 2 · CÜMLE */
.sh-cumle{padding:clamp(100px,18vh,220px) 0 clamp(80px,14vh,170px)}
.sh-cumle p{margin:0;max-width:20ch;padding-top:.04em;
  font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-size:clamp(30px,6.2vw,96px);line-height:.98;letter-spacing:-.05em;
  font-variation-settings:"wght" 720,"wdth" 90;color:var(--murekkep)}
.sh-cumle span{opacity:.16;transition:opacity .3s linear}
.sh-cumle span.ac{opacity:1}

/* ====================================================== 3 · YATAY YOL */
.sh-yol{position:relative}
.sh-yol .tut{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--kagit)}
.sh-yol .bas{padding:calc(var(--ust-y) + clamp(24px,5vh,64px)) var(--kenar) clamp(18px,3vh,30px)}
.sh-yol .bas h2{font-size:clamp(28px,4.4vw,62px);max-width:13ch;
  font-variation-settings:"wght" 740,"wdth" 90}
.sh-yol .ray{display:flex;gap:clamp(14px,1.6vw,22px);height:100%;
  align-items:center;padding:0 var(--kenar);will-change:transform}
/* Katman sırası: fotoğraf 0, karartma 1, yazı 2. Negatif z-index
   kullanılmıyor; kartın kendi zemini fotoğrafı örtüyordu. */
.sh-yol .kart{position:relative;flex:0 0 clamp(230px,24vw,330px);
  height:min(100%,460px);border-radius:2px;overflow:hidden;
  background:var(--kagit-2);display:grid;align-content:end;
  padding:clamp(16px,2vw,22px)}
.sh-yol .kart picture,
.sh-yol .kart img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;transition:transform .7s var(--yay)}
.sh-yol .kart::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,16,20,0) 38%,rgba(14,16,20,.88))}
.sh-yol .kart h3,.sh-yol .kart .go{position:relative;z-index:2}
.sh-yol .kart:hover img{transform:scale(1.05)}
.sh-yol .kart h3{color:#F1F0EC;font-size:clamp(19px,2.1vw,27px);
  font-variation-settings:"wght" 700,"wdth" 93;letter-spacing:-.035em;
  line-height:1.02}
.sh-yol .kart .go{margin-top:8px;font-size:13px;color:#F1F0ECB8}
.sh-yol .kart:hover .go{color:#fff}
.sh-yol .cizgi{margin:0 var(--kenar) clamp(22px,4vh,34px);height:2px;
  background:var(--cizgi)}
.sh-yol .cizgi i{display:block;height:100%;width:100%;background:var(--mavi);
  transform-origin:left;transform:scaleX(.06);will-change:transform}

/* ====================================================== 4 · SABİT SAHNE */
.sh-adim{position:relative;height:300vh}
.sh-adim .sahne{position:sticky;top:0;height:100svh;display:grid;
  align-content:center;background:var(--kagit)}
.sh-adim .ic{padding:0 var(--kenar);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,5vw,72px);align-items:center}
.sh-adim .yz h3{font-size:clamp(30px,5vw,74px);max-width:11ch;
  font-variation-settings:"wght" 780,"wdth" 90}
.sh-adim .yz p{margin-top:clamp(14px,2vh,22px);max-width:34ch;
  font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--murekkep-2)}
.sh-adim .cerceve{position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:2px;background:var(--kagit-2)}
.sh-adim .kare{position:absolute;inset:0;opacity:0;
  will-change:opacity,transform}
.sh-adim .kare img{width:100%;height:100%;object-fit:cover}
.sh-adim .say{display:flex;gap:8px;margin-top:clamp(20px,3vh,30px)}
.sh-adim .say i{display:block;width:38px;height:2px;background:var(--cizgi)}
.sh-adim .say i.ac{background:var(--mavi)}
@media (max-width:860px){
  .sh-adim{height:auto}
  .sh-adim .sahne{position:static;height:auto;padding:clamp(60px,10vh,110px) 0}
  .sh-adim .ic{grid-template-columns:1fr}
  .sh-adim .cerceve{aspect-ratio:16/10}
  .sh-adim .kare{position:relative;opacity:1}
  .sh-adim .kare + .kare{display:none}
}

/* ============================================================ 5 · SAYI */
.sh-sayi{padding:clamp(70px,12vh,150px) 0}
.sh-sayi .sir{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,64px)}
.sh-sayi .b{border-top:1px solid var(--cizgi);padding-top:clamp(16px,2.4vh,26px)}
.sh-sayi .v{font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-size:clamp(46px,9.5vw,142px);line-height:.9;letter-spacing:-.06em;
  font-variation-settings:"wght" 800,"wdth" 86;font-variant-numeric:tabular-nums;
  color:var(--murekkep)}
.sh-sayi .k{margin-top:clamp(12px,1.8vh,18px);font-size:14.5px;
  color:var(--murekkep-3)}
@media (max-width:760px){.sh-sayi .sir{grid-template-columns:1fr}}

/* =========================================================== 6 · ŞERİT */
.sh-serit{padding:clamp(16px,3vh,30px) 0;overflow:hidden;
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.sh-serit .sat{display:flex;width:max-content;gap:clamp(20px,3vw,44px);
  font-family:"Bricolage Grotesque",Inter,sans-serif;
  font-size:clamp(26px,5vw,74px);line-height:1.18;letter-spacing:-.05em;
  font-variation-settings:"wght" 800,"wdth" 86;color:var(--murekkep);
  opacity:.14}
.sh-serit .sat span{white-space:nowrap}
html.hareket .sh-serit .sat{animation:sh-ak 40s linear infinite}
@keyframes sh-ak{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ========================================================== 7 · SEKTÖR */
.sh-sektor{padding:clamp(70px,12vh,150px) 0}
.sh-sektor h2{font-size:clamp(28px,5vw,74px);max-width:12ch;
  margin-bottom:clamp(34px,6vh,70px);font-variation-settings:"wght" 760,"wdth" 90}
.sh-sektor .liste{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,4vw,56px) clamp(20px,3vw,44px)}
.sh-sektor .gr{position:relative;overflow:hidden;border-radius:2px;
  background:var(--kagit-2)}
.sh-sektor article:nth-child(odd) .gr{aspect-ratio:4/5}
.sh-sektor article:nth-child(even) .gr{aspect-ratio:4/3;margin-top:clamp(0px,6vh,70px)}
.sh-sektor .gr img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--yay)}
.sh-sektor article:hover .gr img{transform:scale(1.04)}
.sh-sektor h3{margin-top:clamp(14px,2vh,20px);font-size:clamp(20px,2.4vw,32px);
  font-variation-settings:"wght" 700,"wdth" 92}
.sh-sektor p{margin-top:9px;max-width:38ch;font-size:14.5px;line-height:1.55;
  color:var(--murekkep-2)}
@media (max-width:760px){
  .sh-sektor .liste{grid-template-columns:1fr}
  .sh-sektor article:nth-child(even) .gr{margin-top:0}
}

/* ========================================================== 8 · KAPANIŞ */
.sh-son{padding:clamp(70px,13vh,170px) 0 clamp(60px,10vh,120px);
  border-top:1px solid var(--cizgi)}
.sh-son h2{font-size:clamp(36px,8vw,132px);max-width:11ch;padding-top:.04em;
  font-variation-settings:"wght" 800,"wdth" 88}
.sh-son h2 i{font-style:normal;color:var(--mavi)}
.sh-son .dgm{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,5vh,52px)}
.sh-son .bilgi{margin-top:clamp(34px,6vh,64px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(14px,2vw,28px);font-size:14px;color:var(--murekkep-3);
  border-top:1px solid var(--cizgi);padding-top:clamp(18px,3vh,28px)}

/* ======================================================== belirmeler */
html.hareket .sahne-aktif [data-satir] .ln{display:block;overflow:hidden}
html.hareket .sahne-aktif [data-satir] .ln > span{display:block;
  transform:translateY(103%);transition:transform .95s var(--yay)}
html.hareket .sahne-aktif [data-satir].gor .ln > span{transform:none}
html.hareket .sahne-aktif [data-bel]{opacity:0;transform:translateY(20px)}
html.hareket .sahne-aktif [data-bel].gor{opacity:1;transform:none;
  transition:opacity .85s var(--yay),transform .85s var(--yay)}

@media (prefers-reduced-motion: reduce){
  html.hareket .sahne-aktif [data-satir] .ln > span,
  html.hareket .sahne-aktif [data-bel]{transform:none;opacity:1;transition:none}
  html.hareket .sh-serit .sat{animation:none}
  .sh-maske{height:auto}
  .sh-maske .sahne{position:static;height:auto;padding:24vh 0 14vh}
  .sh-maske .tas{display:none}
  .sh-maske h1{color:var(--murekkep);background:none;filter:none}
  .sh-maske .son{position:static;opacity:1;padding:34px var(--ol) 0}
  .sh-maske .son p{color:var(--murekkep)}
  .sh-yol .tut{position:static;height:auto}
  .sh-yol .ray{flex-wrap:wrap;height:auto;padding-bottom:40px}
  .sh-yol .kart{flex:1 1 260px;height:360px}
  .sh-adim{height:auto}
  .sh-adim .sahne{position:static;height:auto;padding:clamp(60px,10vh,110px) 0}
  .sh-adim .kare{position:relative;opacity:1}
  .sh-adim .kare + .kare{display:none}
  .sh-cumle span{opacity:1}
}