/* =====================================================================
   KADIR AVŞAR — Design System
   "Darkroom" — mürekkep siyahı zemin, fotoğraf tek ışık kaynağı.

   Bu dosya: token'lar, reset, tipografi, site kabuğu (nav / tabbar / footer).
   Tuval ve kart: canvas.css · İç sayfalar: pages.css
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKEN'LAR
   --------------------------------------------------------------------- */
:root {
  /* --- Yüzeyler: saf siyah değil, hafif sıcak mürekkep --- */
  --ink:            #0a0a0b;
  --ink-raise:      #101011;
  --ink-float:      #17171a;
  --ink-deep:       #050506;

  /* --- Mürekkep üstü çizgiler --- */
  --line:           rgba(242, 239, 234, 0.10);
  --line-soft:      rgba(242, 239, 234, 0.06);
  --line-strong:    rgba(242, 239, 234, 0.20);

  /* --- Metin: fotoğraf kâğıdı beyazı, saf beyaz değil --- */
  --paper:          #f2efea;
  --paper-dim:      rgba(242, 239, 234, 0.56);
  --paper-faint:    rgba(242, 239, 234, 0.34);
  --paper-ghost:    rgba(242, 239, 234, 0.16);

  /* --- Safelight: karanlık odanın kendi rengi. Çok az kullanılır. --- */
  --safelight:      #b8371f;
  --safelight-soft: rgba(184, 55, 31, 0.16);

  /* --- Tipografi aileleri --- */
  --font-display: 'Red Hat Display', 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Tipografi ölçeği (akışkan) --- */
  --t-display: clamp(2.75rem, 7.5vw, 7rem);
  --t-h1:      clamp(2rem, 4.5vw, 3.75rem);
  --t-h2:      clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h3:      clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-small:   0.8125rem;
  --t-meta:    0.6875rem;   /* mono künye */
  --t-micro:   0.625rem;

  /* --- Harf aralığı: logonun geniş tracking'i markanın imzası --- */
  --track-display: 0.02em;
  --track-wide:    0.18em;
  --track-wider:   0.32em;
  --track-meta:    0.14em;

  /* --- Ritim --- */
  --gut:      clamp(1.25rem, 3.2vw, 3rem);
  --gut-half: calc(var(--gut) / 2);
  --rail:     clamp(1.25rem, 4vw, 4.5rem);   /* sayfa kenar boşluğu */
  /* İçeriğin üst genişlik sınırı. Sitede hiç sınır yoktu: 2000px'lik bir
     ekranda içerik 1856px'e yayılıyor, metin ise okunabilirlik için 68ch'de
     kapandığı için sağ tarafta koca bir ölü alan kalıyordu. Sınır konunca
     blok ortalanıyor ve boşluk iki yana eşit dağılıyor. Tam genişlik olması
     gereken öğeler (açılış karesi, sonraki proje bandı, logo şeridi) bunun
     dışında. */
  /* Kabuk (nav + footer) ölçüsü. İçeriğin en geniş sınırıyla aynı, böylece
     içerik hiçbir zaman kabuğun dışına taşmıyor. 2400'ün ALTINDA hiçbir şey
     değişmiyor — orada zaten ekran daha dar. Üstünde logo, menü ve footer
     büyümeyi bırakıyor: 3840'ta logo sol köşede tek başına kalıyor, menü
     ortada, aralarında 1700 piksel boşluk oluyordu.

     Değer iş detayının XXL sınırıyla (2200) BİLEREK aynı: böylece logonun
     sol kenarı ile başlığın sol kenarı tam olarak çakışıyor. 2400 denendi ve
     bırakıldı — kabuk içerikten geniş kalınca aralarında 100 piksellik bir
     kayma oluyordu. */
  --shell-max: 2200px;
  --content-max: 1560px;

  /* --- Kabuk ölçüleri --- */
  --nav-h:    clamp(64px, 7vw, 84px);
  --tabbar-h: 66px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-t:   env(safe-area-inset-top, 0px);

  /* --- Hareket: tek imza easing — hepsi aynı fizikten gelir --- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);      /* out-expo */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-both: cubic-bezier(0.76, 0, 0.24, 1);
  --d-fast:   180ms;
  --d-base:   420ms;
  --d-slow:   760ms;
  --d-film:   1200ms;

  /* --- Katmanlar --- */
  --z-canvas:  1;
  --z-hud:     30;
  --z-nav:     40;
  --z-tabbar:  45;
  --z-overlay: 60;
  --z-cursor:  90;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* Tuval sayfasında dış scroll yok — hareket tuvalin kendi işi.
   ⚠ Sınıf sunucu tarafında basılıyor; JS beklemez. */
body.is-canvas {
  overflow: hidden;
  height: 100dvh;
}

/* Mobilde tuval YOK (bkz. canvas.css) — kaydırılacak içerik .stack.
   Kilit burada da uygulanırsa sayfa ekran boyuna hapsolur ve hiç kaydırılamaz.
   Kuralın kapsamı, tuvalin gizlendiği kırılma noktasıyla aynı olmalı. */
@media (max-width: 900px) {
  body.is-canvas { overflow: visible; height: auto; }
}

/* JS yoksa tuval da yok (bkz. canvas.css) — kilit orada da kalkmalı,
   yoksa sayfa hiç kaydırılamaz. */
html:not(.js) body.is-canvas { overflow: visible; height: auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, video, picture, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

::selection { background: var(--safelight); color: var(--paper); }

/* Odak: klavye kullanıcıları için safelight halkası */
:focus-visible {
  outline: 1px solid var(--safelight);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Ekran okuyucu */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   3. TİPOGRAFİ SINIFLARI
   --------------------------------------------------------------------- */

/* Display — Red Hat Display.
   Didone (Bodoni) ile geometrik sans aynı ayarlarda durmaz: serifte hoş
   duran POZİTİF harf aralığı sansta harfleri dağıtıyor, 0.94 satır
   yüksekliği de sansın daha uzun x-yüksekliğinde satırları çakıştırıyordu.
   Büyük ölçekte hafif NEGATİF aralık ve biraz daha açık satır. */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.022em;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-h3 {
  font-family: var(--font-ui);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
}

/* Meta — mono, küçük, açılmış, büyük harf. Künye dili. */
.t-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--paper-dim);
}

.t-meta--micro { font-size: var(--t-micro); letter-spacing: var(--track-wide); }
.t-meta--bright { color: var(--paper); }

/* Etiket — sans, açılmış, büyük harf. Navigasyon dili. */
.t-label {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.t-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 46ch;
}

.t-body { max-width: 62ch; color: var(--paper-dim); }
.t-body p + p { margin-top: 1.1em; }

/* Bodoni'nin italiği gerçekten güzel — vurgu için */
em, .t-em { font-family: var(--font-display); font-style: italic; }

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.shell { padding-inline: var(--rail); }

/* Ortalanan içerik kapsayıcıları. Dolguları kendilerinde kalır; buradan
   yalnız üst sınır ve ortalama gelir. */
.masthead,
.about,
.contact,
.films,
.work__intro:not(.work__intro--beside),
.credits,
.reel,
.contact__outro {
  max-width: var(--content-max);
  margin-inline: auto;
}

.page {
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 12vw, 10rem);
}

/* Mobilde alt tabbar sayfayı örtmesin */
@media (max-width: 900px) {
  .page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 3rem); }
}

.rule { height: 1px; background: var(--line); border: 0; }

/* İnce underline hover — link dili. Alttan çizilir, üstten silinir. */
.u-line {
  position: relative;
  display: inline-block;
}
.u-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--ease);
}
/* Aktif sayfanın çizgisi her cihazda durur; hover'la açılan çizgi yalnız
   fareyle. Dokunmatikte :hover parmak değince tetiklenip kalkınca düşüyor. */
.u-line[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (hover: hover) and (pointer: fine) {
  .u-line:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ---------------------------------------------------------------------
   5. NAVİGASYON (desktop / tablet)
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  /* max-width DEĞİL: .nav sabit konumlu ve fotoğrafın üstünde okunurluk
     perdesi taşıyor — perde tam genişlikte kalmalı. Onun yerine dolgu
     hesaplanıyor; içerik ortalanmış bir bantta duruyor, perde bütün ekranı
     kaplamaya devam ediyor. */
  padding-inline: max(var(--rail), calc((100% - var(--shell-max)) / 2 + var(--rail)));
  padding-top: var(--safe-t);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  /* Zemin yok — fotoğrafın üstünde yüzer. Okunurluk için perde. */
  background: linear-gradient(to bottom,
              rgba(10,10,11,0.92) 0%,
              rgba(10,10,11,0.62) 45%,
              rgba(10,10,11,0) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-shrink: 0;
}
/* Marka, tuvalin parlak karelerinin üstünde de ayakta durmalı.
   İnce serif beyaz üstüne beyaz düşünce siliniyordu: ölçü büyütüldü,
   opaklık tam, altına yumuşak bir gölge kondu (perde tek başına yetmiyor). */
.nav__mark {
  width: clamp(132px, 11.5vw, 188px);
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(10, 10, 11, 0.55))
          drop-shadow(0 6px 22px rgba(10, 10, 11, 0.45));
  transition: filter var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover .nav__mark {
    filter: drop-shadow(0 1px 2px rgba(10, 10, 11, 0.65))
            drop-shadow(0 6px 26px rgba(10, 10, 11, 0.6));
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
.nav__link {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color var(--d-fast) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--paper); }

.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
}

/* Dil anahtarı — mono, minik, safelight noktalı */
.nav__lang {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--paper-faint);
  transition: color var(--d-fast) var(--ease);
}
.nav__lang:hover { color: var(--paper); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav { height: calc(56px + var(--safe-t)); }
}

/* ---------------------------------------------------------------------
   6. MOBİL TAB ÇUBUĞU — uygulama kabuğu
   Alt sabit, cam, safe-area farkında. Başparmak erişimi.
   --------------------------------------------------------------------- */
.tabbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-tabbar);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);

  /* Cam: koyu ama sert değil. Üstte hafif bir açılma var ki içerik çubuğa
     çarpmasın, içine dağılsın. */
  background: linear-gradient(to top,
              rgba(9, 9, 10, 0.94) 0%,
              rgba(9, 9, 10, 0.86) 62%,
              rgba(9, 9, 10, 0.70) 100%);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  border-top: 1px solid rgba(242, 239, 234, 0.09);
}

/* Çubuğun üstünde ince bir eriyiş — kareler kesilmiş gibi durmasın */
.tabbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 34px;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0));
  pointer-events: none;
}

@media (max-width: 900px) {
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* İkonsuz, yalnız tipografi. Sitenin geri kalanıyla aynı dil:
   büyük harf, geniş aralık, sessiz renk. */
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 2px;
  color: var(--paper-faint);
  transition: color var(--d-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tab__label {
  font-family: var(--font-ui);
  /* Beş etiket dar ekranda da yan yana sığmalı (TR'de HAKKINDA/İLETİŞİM uzun) */
  font-size: clamp(8.5px, 2.5vw, 10.5px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--d-base) var(--ease);
}
.tab[aria-current="page"] { color: var(--paper); }

/* Aktif sekmenin altında safelight izi — karanlık odanın kendi rengi.
   AKIŞTA duruyor (absolute değil): pasifken de yer kapladığı için etiketler
   sekmeden sekmeye zıplamıyor, gösterge de çubuğun dibine kaçmıyor. */
.tab::after {
  content: '';
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--safelight);
  transform: scaleX(0);
  opacity: 0;
  transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
.tab[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

/* Aktif olan öne çıkarken diğerleri bir tık geri çekilir */
.tabbar:has(.tab[aria-current="page"]) .tab:not([aria-current="page"]) .tab__label { opacity: 0.72; }

/* Basınca hafif çöküş — dokunsal geri bildirim */
.tab:active .tab__label { transform: scale(0.95); transition-duration: 90ms; }

/* ---------------------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------------------- */
.footer {
  /* Üst çizgi tam genişlikte kalsın diye burada da dolgu hesaplanıyor. */
  padding: clamp(2.5rem, 6vw, 5rem)
           max(var(--rail), calc((100% - var(--shell-max)) / 2 + var(--rail)))
           clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gut);
}
.footer__social { display: flex; gap: 1.5rem; }
.footer__note { color: var(--paper-faint); }

/* ---------------------------------------------------------------------
   YAPIMCI İMZASI — "go" durur, üstüne gelince "goreel works" açılır

   Ölçüler logonun kendisinden: viewBox 311.3 × 71.9 (oran 4.330).
   Pembe "go" hecesi x 7.6 → 87.5 arasında; kesme noktası 95 alındı ki
   "o" nefes alsın ve "r" görünmesin → 95 / 71.9 = 1.321 yükseklik birimi.

   Açılan şey genişlik; görüntü kendi ölçüsünde duruyor, yani harfler
   ezilmiyor — perde yana çekiliyor. Sıkıştırma/germe olsaydı logo
   deforme görünürdü.
   --------------------------------------------------------------------- */
.madeby {
  --gw-h: 14px;              /* logo yüksekliği */
  --gw-tam: 4.330;           /* 311.3 / 71.9 */
  --gw-go:  1.321;           /*  95.0 / 71.9 */
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.madeby__clip {
  display: block;
  overflow: hidden;
  height: var(--gw-h);
  width: calc(var(--gw-h) * var(--gw-tam));   /* varsayılan: tamamı */
  opacity: 0.2;
  transition: width var(--d-slow) var(--ease), opacity var(--d-base) var(--ease);
}
.madeby__clip img {
  display: block;
  height: var(--gw-h);
  width: calc(var(--gw-h) * var(--gw-tam));
  max-width: none;                            /* dar footer'da küçülmesin */
}

/* Hover edebilen cihazlarda "go" durur, üstüne gelince tamamı açılır.
   Dokunmatik tabletlerde hover yok; orada hiç açılmayacak bir şeyi yarım
   göstermek anlamsız olurdu, yukarıdaki varsayılan (tam genişlik) geçerli
   kalıyor. Telefonda imza zaten hiç çıkmıyor (aşağıda gizleniyor). */
@media (hover: hover) and (pointer: fine) {
  .madeby__clip { width: calc(var(--gw-h) * var(--gw-go)); }
  .madeby:hover .madeby__clip,
  .madeby:focus-visible .madeby__clip {
    width: calc(var(--gw-h) * var(--gw-tam));
    opacity: 0.5;
  }
}

/* Hareketi azalt tercihi: açılma anında olur, yine de bilgi kaybı yok */
@media (prefers-reduced-motion: reduce) {
  .madeby__clip { transition: none; }
}

@media (max-width: 900px) {
  .footer { margin-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  /* Yapımcı imzası mobilde hiç görünmüyor. Gizlenen .madeby değil onu saran
     paragraf: yalnız bu bağlantıyı taşıyor ve sadece bağlantıyı gizlemek
     satır yüksekliği kadar boş bir şerit bırakırdı. */
  .footer__note { display: none; }
}

/* ---------------------------------------------------------------------
   8. DÜĞMELER
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--paper);
  transition: background var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease);
}
.btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--paper); border-color: var(--line-strong); }

/* ---------------------------------------------------------------------
   9. GÖRSEL YÜKLEME — LQIP açılışı
   Görsel bulanık bir lekeden nete çözülür. Fotoğrafın banyoda belirmesi.
   --------------------------------------------------------------------- */
.frame {
  display: block;          /* <span class="frame"> olarak da kullanılıyor */
  position: relative;
  overflow: hidden;
  background: var(--ink-raise);
}
.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-film) var(--ease);
}
.frame.is-loaded img,
.frame.is-loaded video { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------------------
   10. HAREKET AZALTMA — erişilebilirlik sözü
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .frame img, .frame video { opacity: 1; transform: none; }
}