@font-face{font-family:'Geist';font-display:swap;src:url(fonts/Geist.woff2) format('woff2')}
@font-face{font-family:'GeistMed';font-display:swap;src:url(fonts/GeistMed.woff2) format('woff2')}
@font-face{font-family:'GeistBold';font-display:swap;src:url(fonts/GeistBold.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#FAFAF8; --bg-2:#E6E6E3;   /* zemin 29 Tem 2026'da açıldı */
  --ink:#131313; --ink-2:#555555; --ink-3:#8A8A8A; --line:#DBDBD8;
  --frame:14px; --pad:calc(var(--frame) + 26px); --r:16px;
  --display:'GeistBold','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui-med:'GeistMed','Geist','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Başlık ana sayfayla BİREBİR aynı olmak zorunda: sayfa geçişinde
     menü yerinde kalıyor gibi görünmesi buna bağlı. Aynı iki punto. */
  --type-lg:clamp(1.16rem,1.76vw,1.68rem);   /* 29 Tem: %20 küçültüldü */
  --type-sm:1.16rem;
  --body-size:var(--type-sm); --col:1180px;
}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}


/* Kaydırma çubuğu yeri HER SAYFADA ayrılıyor. Ana sayfa kayıyor,
   Digital Imagery kaymıyor (overflow:hidden) — çubuk bir sayfada var bir
   sayfada yokken menünün sağ kenarı 55 px ile 40 px arasında zıplıyordu.
   Geçişte tam da sabit kalması istenen şey buydu. */
html{scrollbar-gutter:stable}

/* --- sayfa geçişi ---------------------------------------------------
   Yalnızca <main> soluyor; <header> hiç animasyon almıyor ve her sayfada
   birebir aynı olduğu için yerinde duruyormuş gibi görünüyor.
   transform DEĞİL opacity: transform <main>'i sabit konumlu torunlar için
   kapsayan blok yapar ve ScrollTrigger'ın pin'ini bozardı. */
@media (prefers-reduced-motion:no-preference){
  main{animation:pageIn .36s var(--ease) both}
  @keyframes pageIn{from{opacity:0} to{opacity:1}}
  html.leaving main{animation:none;opacity:0;
    transition:opacity .22s var(--ease)}
}
/* --- imleç: geniş nokta -------------------------------------------------
   Varsayılan imleç gizlenir, yerine yumuşak takip eden bir daire gelir.
   Dokunmatikte ve reduced-motion'da devre dışı (JS kurmuyor).

   Kaynak renk BEYAZ, harman difference: koyu renkle difference açık zeminde
   neredeyse hiç iz bırakmıyordu (rgb 227 / zeminden 16 luma) ve koyu
   görsellerin üstünde tamamen kayboluyordu (rgb 4 / -16). Beyaz kaynakla
   ölçülen değerler: açık zeminde rgb 181 (fark 62), koyu görselde rgb 77
   (fark +57). Opaklık %20 koyuluk için ayarlandı. */
/* !important şart — özgüllük gerekçesi için build_proto.py'deki nota bak */
.dot-cursor,.dot-cursor *{cursor:none !important}
#cursor{position:fixed;left:0;top:0;width:20.8px;height:20.8px;
  border-radius:50%;
  background:#fff;opacity:.266;pointer-events:none;z-index:9999;
  margin:-10.4px 0 0 -10.4px;mix-blend-mode:difference;
  transition:width .28s var(--ease),height .28s var(--ease),
             margin .28s var(--ease),opacity .28s var(--ease)}
#cursor.big{width:49.6px;height:49.6px;margin:-24.8px 0 0 -24.8px;
  opacity:.282}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
figure{margin:0}

header{position:fixed;top:0;left:0;right:0;z-index:80;
  padding:calc(var(--frame) + 22px) var(--pad);   /* ana sayfayla aynı */
  display:flex;justify-content:space-between;align-items:baseline;
  mix-blend-mode:difference;color:#fff}
/* Wordmark ve menü: ana sayfadakiyle aynı yüz, aynı punto, aynı opaklık.
   Önceden burada wordmark SuisseBold 18.56, menü SuisseMed 18.56 idi;
   ana sayfada ikisi de Suisse Book 31.68. Geçişte menü zıplıyordu. */
.wm{font-family:var(--ui);font-size:var(--type-lg);
  letter-spacing:-.01em;text-transform:uppercase}
nav{display:flex;gap:26px;font-family:var(--ui);
  font-size:var(--type-lg);letter-spacing:.02em;text-transform:uppercase}
nav a{opacity:.55;transition:opacity .25s var(--ease)}
nav a:hover{opacity:1}

main{padding:0 var(--pad)}
/* Ortalama YOK. Önceden `max-width:1180px;margin:0 auto` idi: 1440'lık
   ekranda wordmark 40 px'te, gövde metni 123 px'te başlıyordu — 83 px'lik
   kayma metni ortadan başlıyormuş gibi gösteriyordu. Referansta
   (kindofstudio.co) wordmark da gövde de aynı kenardan başlıyor: 24 px.
   --col artık okuma genişliği tavanı, kolonun kendisi değil. */
.wrap{max-width:none;margin:0}
.hero{margin:0 calc(-1 * var(--pad));overflow:hidden}

/* Referanstaki künye satırı: sol sütun başlık/metin, sağ sütun künye.
   Ölçüldü — sağ sütun içerik genişliğinin %63.8'inden başlıyor, yani
   genişliği %36.2. */
.head{padding:56px 0 0;display:grid;
  grid-template-columns:1fr 36.2%;align-items:start;gap:0}
.head h1{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.92;letter-spacing:-.04em}
/* 11.5 px: künye bir etiket değil, okunacak bilgi (müşteri / rol / yıl).
   10 px'te okunabilirlik eşiğinin altında kalıyordu. */
dl.meta{margin:0;display:grid;
  grid-template-columns:auto 1fr;gap:9px 22px;align-content:start;
  font-family:var(--ui-med);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase}
dl.meta dt{color:var(--ink-3)}
dl.meta dd{margin:0;color:var(--ink)}

/* proje beyanı — Kind of sayfalarındaki gibi başlığın altında büyük */
/* Referansta üstteki ifade metni tam genişlikte akıyor; bizde başlık
   ayrı durduğu için sol sütunda kalıyor ama daralması gerekmiyor. */
.lead{max-width:34ch;margin:44px 0 0;font-family:var(--display);
  font-weight:400;font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.06;
  letter-spacing:-.035em}
/* Ölçülen referans: gövde paragrafı 710 px = içeriğin %51.6'sı.
   ch tavanı geniş ekranda satırın okunmaz uzunluğa çıkmasını engelliyor. */
.sect{max-width:min(51.6%, 68ch);margin:0 0 34px;font-size:var(--body-size);
  line-height:1.58;color:var(--ink-2)}
section.block{margin-top:14vh}
section.block:first-of-type{margin-top:8vh}

/* Medya metin kolonundan taşıp neredeyse tam genişliğe çıkıyor —
   referansta (Kind of) tam genişlik %97, ikili %48, üçlü %32. */
/* Medya artık .wrap ile aynı genişlikte. Önceden `100vw` ile dışarı
   taşıyordu: .wrap ortalanmış olduğu için gerekliydi, ama 100vw kaydırma
   çubuğunu saymadığından her şey 7 px sola kayıyordu (ölçüldü). .wrap
   artık zaten tam genişlikte — taşmaya gerek yok, hiza da tam. */
.stack-media{display:flex;flex-direction:column;gap:18px;width:100%}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* asimetrik ikili: 1/3 + 2/3 */
.g13{display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:start}
.full img,.full video,
.g3 img,.g3 video,
.g2 img,.g2 video,
.g13 img,.g13 video{border-radius:var(--r)}

.next{margin:18vh calc(-1 * var(--pad)) 0;padding:52px var(--pad) 0;
  border-top:1px solid var(--line)}
.next a{display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap}
.next .lbl{font-family:var(--ui-med);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:14px}
.next h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.8rem);line-height:.94;letter-spacing:-.04em;
  transition:opacity .3s var(--ease)}
.next a:hover h2{opacity:.5}
.next .meta2{font-family:var(--ui-med);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

footer{padding:14vh 0 calc(var(--frame) + 30px);display:flex;
  justify-content:space-between;gap:20px;font-family:var(--ui-med);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}

@media (max-width:900px){
  :root{--frame:8px; --type-lg:1.0rem; --type-sm:.88rem}
  /* Referanstaki iki sütun telefonda anlamsız: künye 111 px'e sıkışıyor,
     gövde metni ekranın yarısında (158 px) kalıyordu. Tek sütun. */
  .head{padding-top:34px;grid-template-columns:1fr;gap:22px}
  .lead{max-width:none}
  .sect{max-width:none}
  .g3,.g2,.g13{grid-template-columns:1fr;gap:12px}
  .stack-media{gap:12px} section.block{margin-top:9vh}
  /* mobilde de ana sayfayla aynı ölçek */
  nav{gap:12px} header{gap:14px;flex-wrap:wrap}
  /* dokunma alanını büyüt, konumu bozma */
  nav a{padding:12px 0;margin:-12px 0}
  /* künye 10 px'ti — mobilde okunmuyordu */
  dl.meta{font-size:12px;letter-spacing:.1em;gap:8px 18px}
  footer{flex-direction:column;gap:6px}
}