/* =========================================================================
   ERCEY DESIGN
   Sanat yönetimi: tek yazı karakteri, tek renk (siyah–beyaz), sıfır süs.
   Vurgu renkle değil; ölçek, ağırlık ve boşlukla kurulur.
   Kenar yuvarlaması ve gölge kullanılmaz — hepsi saç teli çizgilerdir.
   ========================================================================= */

/* 1) TOKEN'LAR ------------------------------------------------------------ */
:root {
  /* Tek renk ölçeği.
     Kurumsal ton tam siyah değil: logonun kendi rengi #252526 (antrasit).
     Metin ve koyu zeminler bu tondan türetilir — tam siyah sert, açık gri
     ise cılız duruyordu. */
  --ink: #252526;
  --ink-80: rgba(37, 37, 38, 0.8);
  --ink-55: rgba(37, 37, 38, 0.56);
  --ink-38: rgba(37, 37, 38, 0.42);
  --ink-18: rgba(37, 37, 38, 0.2);

  --paper: #ffffff;
  --paper-2: #f4f3f1;
  --paper-3: #e9e7e4;

  --line: rgba(37, 37, 38, 0.15);
  --line-soft: rgba(37, 37, 38, 0.08);

  /* Koyu yüzeyler — logo tonunun bir tık koyusu, siyah değil */
  --night: #1c1c1d;
  --night-fg: rgba(255, 255, 255, 0.94);
  --night-fg-2: rgba(255, 255, 255, 0.52);
  --night-fg-3: rgba(255, 255, 255, 0.32);
  --night-line: rgba(255, 255, 255, 0.15);

  /* Tipografi — tek aile */
  --font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Ölçek: başlıklar büyük ve sıkı, gövde sakin */
  /* Hero başlığı bir kademe küçültüldü: 9.5rem ilk ekranda fazla iriydi. */
  --fs-display: clamp(2.5rem, 6.2vw, 6.5rem);
  --fs-h1: clamp(2.4rem, 6vw, 6rem);
  /* Tüm bölüm başlıkları bu boyutta: daha önce TEXTURE display puntoyla
     yazılıyor, diğerleri küçük kalıyordu. */
  --fs-h2: clamp(1.7rem, 3vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 1.2vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.28vw + 0.88rem, 1.0625rem);
  --fs-lede: clamp(1.0625rem, 0.75vw + 0.9rem, 1.4rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  --ls-display: -0.045em;
  --ls-h1: -0.04em;
  --ls-h2: -0.032em;
  --ls-h3: -0.022em;
  --ls-micro: 0.15em;

  /* Boşluk — cömert */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 3rem;
  /* Bölüm aralıkları: cömert ama boş değil. İçerik gerçek görsellerle
     dolduktan sonra ilk ölçüler fazla açık kaldı — sayfa 10.000 pikseli
     geçince nefes alanı, boşluk gibi okunuyor. */
  --sp-5: clamp(3.25rem, 5.5vw, 5.5rem);
  --sp-6: clamp(4.5rem, 8vw, 9rem);
  --sp-7: clamp(6rem, 11vw, 12rem);

  /* Yerleşim */
  --frame: 1680px;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 4.2vw, 5.5rem);
  --bar-h: 82px;

  /* Hareket — az sayıda, yavaş, kararlı */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-1: 0.35s;
  --t-2: 0.7s;
  --t-3: 1.15s;
}

/* 2) TEMEL --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 2rem);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

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

:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
.night :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 1rem 1.75rem; font-size: var(--fs-small);
}
.skip-link:focus { left: 0; }

.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) YERLEŞİM ------------------------------------------------------------- */
.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.frame--flush { padding-inline: 0; max-width: none; }

.band { padding-block: var(--sp-6); }
.band--tall { padding-block: var(--sp-7); }
.band--short { padding-block: var(--sp-5); }
.band--top0 { padding-top: 0; }
.band--bot0 { padding-bottom: 0; }

.night {
  background: var(--night);
  color: var(--night-fg);
}
.night .muted { color: var(--night-fg-2); }
.night .micro { color: var(--night-fg-2); }
.night .rule { background: var(--night-line); }
.night .lede { color: var(--night-fg-2); }

.tint { background: var(--paper-2); }

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

/* Editoryal iki sütun — asimetrik, 1:1 değil */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.duo--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo--mid { align-items: center; }

/* Sağa/sola taşan tam genişlik görsel */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bleed-r { margin-right: calc(50% - 50vw); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--sp-2); }

/* 4) TİPOGRAFİ ----------------------------------------------------------- */
.display, h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }

.display {
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
}

h1, .t1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: var(--ls-h1); }
h2, .t2 { font-size: var(--fs-h2); line-height: 1.03; letter-spacing: var(--ls-h2); }
h3, .t3 { font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: var(--ls-h3); }
h4, .t4 { font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; }

/* Süs yok: yalnızca çok küçük, geniş harf aralıklı etiket */
.micro {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-38);
  line-height: 1;
}

.micro--dark { color: var(--night-fg-3); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  letter-spacing: -0.017em;
  color: var(--ink-80);
  max-width: 30ch;
  text-wrap: pretty;
}

.lede--wide { max-width: 46ch; }

.muted { color: var(--ink-55); }
.small { font-size: var(--fs-small); line-height: 1.55; }

/* Ölçülü metin sütunu */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.4em; }
.prose p { color: var(--ink-80); }
.prose h2 { font-size: var(--fs-h3); margin-top: 2.4em; letter-spacing: var(--ls-h3); }
.prose h3 { font-size: var(--fs-h4); font-weight: 500; margin-top: 2em; }
.prose a { border-bottom: 1px solid var(--ink-18); }
.prose a:hover { border-bottom-color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.15rem; color: var(--ink-80); }
.prose li + li { margin-top: 0.45em; }
.prose img { width: 100%; margin-block: 2.6em; }
.prose blockquote {
  font-size: var(--fs-lede);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-block: 0.4em;
}
.prose strong { font-weight: 500; }
.prose hr { height: 1px; background: var(--line); border: 0; margin-block: 3em; }

.night .prose p, .night .prose ul, .night .prose ol { color: var(--night-fg-2); }
.night .prose a { border-bottom-color: var(--night-line); }

/* 5) BAĞLANTI & DÜĞME ----------------------------------------------------- */
/* Alt çizgisi soldan gelen, renk değiştirmeyen bağlantı */
.link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  padding-bottom: 0.3rem;
  position: relative;
  white-space: nowrap;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}

.link:hover::after { transform: scaleX(0); }

.link--quiet::after { opacity: 0.3; }
.link--quiet:hover::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background-color var(--t-1) var(--ease-io), color var(--t-1) var(--ease-io);
}

.btn:hover { background: transparent; color: var(--ink); }

.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }

.btn--onnight { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #fff; }
.btn--onnight:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--solid-light { border-color: #fff; background: #fff; color: var(--ink); }
.btn--solid-light:hover { background: transparent; color: #fff; }

/* 6) MEDYA ---------------------------------------------------------------- */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.plate::before { content: ""; display: block; padding-top: var(--ar, 66.667%); }

.plate > img,
.plate > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.plate--sq { --ar: 100%; }
.plate--tall { --ar: 128%; }
.plate--taller { --ar: 142%; }
.plate--wide { --ar: 62%; }
.plate--cine { --ar: 45%; }

a:hover > .plate > img { transform: scale(1.03); }

/* 7) ÜST BAR & TAM EKRAN MENÜ --------------------------------------------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: color var(--t-2) var(--ease), background-color var(--t-2) var(--ease),
    transform var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}

.bar--over { color: #fff; }

.bar.is-solid {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line);
}

.bar.is-up { transform: translateY(-100%); }
body.menu-open .bar { color: #fff; background: transparent; border-bottom-color: transparent; transform: none; }

.bar__in {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; flex: none; }

/* Kelime markası — iki sürüm, zemine göre biri görünür */
.wordmark { display: block; line-height: 0; }
.wordmark img { display: block; height: var(--wm-h, 26px); width: auto; }
.wordmark__light { display: none; }

.bar--over:not(.is-solid) .wordmark__dark,
.night .wordmark__dark,
.menu .wordmark__dark { display: none; }

.bar--over:not(.is-solid) .wordmark__light,
.night .wordmark__light,
.menu .wordmark__light { display: block; }

.bar__right { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }

/* Yalnızca birkaç kısayol barda kalır; tamamı tam ekran menüde */
.bar__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }

.bar__link {
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  position: relative;
  padding-block: 0.35rem;
  opacity: 0.75;
  transition: opacity var(--t-1) var(--ease);
}

.bar__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}

.bar__link:hover { opacity: 1; }
.bar__link:hover::after,
.bar__link.is-on::after { transform: scaleX(1); transform-origin: left; }
.bar__link.is-on { opacity: 1; }

.lang { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-micro); letter-spacing: 0.1em; }
.lang a { opacity: 0.45; transition: opacity var(--t-1) var(--ease); }
.lang a:hover { opacity: 1; }
.lang .on { opacity: 1; font-weight: 500; }
.lang i { opacity: 0.25; font-style: normal; }

/* Menü tetikleyicisi — ikon değil, kelime */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  padding-block: 0.5rem;
}

.menu-btn__bars { display: grid; gap: 4px; width: 18px; }
.menu-btn__bars span {
  display: block; height: 1px; width: 100%;
  background: currentColor;
  transition: transform var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}

body.menu-open .menu-btn__bars span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
body.menu-open .menu-btn__bars span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

.menu-btn__close { display: none; }
body.menu-open .menu-btn__open { display: none; }
body.menu-open .menu-btn__close { display: inline; }

/* Tam ekran menü */
.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--night);
  color: var(--night-fg);
  display: grid;
  grid-template-rows: var(--bar-h) 1fr auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--t-3) var(--ease), visibility 0s linear var(--t-3);
}

body.menu-open .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path var(--t-3) var(--ease), visibility 0s;
}

.menu__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  overflow-y: auto;
  padding-inline: var(--gutter);
  max-width: var(--frame);
  margin-inline: auto;
  width: 100%;
}

.menu__list { display: flex; flex-direction: column; }

/* On başlık dizüstü ekranında kaydırmadan sığmalı: satır yüksekliği
   yaklaşık 50px'te tutulur, punto buna göre sınırlanır. */
.menu__item {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-block: clamp(0.2rem, 0.45vw, 0.4rem);
  font-size: clamp(1.4rem, 2.5vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--night-fg);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease), color var(--t-1) var(--ease);
}

body.menu-open .menu__item { opacity: 1; transform: none; }

.menu__list:hover .menu__item { color: var(--night-fg-3); }
.menu__list .menu__item:hover { color: #fff; }

.menu__no {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--night-fg-3);
  flex: none;
  width: 2.5ch;
}

/* Menüdeki görsel önizleme */
.menu__view {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
}

.menu__view img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--t-2) var(--ease), transform 1.8s var(--ease);
}

.menu__view img.is-on { opacity: 0.85; transform: scale(1); }

.menu__foot {
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  max-width: var(--frame);
  margin-inline: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--night-line);
  font-size: var(--fs-small);
  color: var(--night-fg-2);
}

.menu__foot a:hover { color: #fff; }

/* 8) HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
  color: #fff;
}

.hero__media { position: absolute; inset: 0; }

.hero__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__frame.is-on { opacity: 1; }

.hero__frame img,
.hero__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 3.2s var(--ease);
}

.hero.is-ready .hero__frame.is-on img,
.hero.is-ready .hero__frame.is-on video { transform: scale(1); }

/* İki katman: soldan karartma metnin oturduğu sütunu güvence altına alır,
   dikey karartma üst barı ve alt satırı okunur tutar. Görselin sağ yarısı
   açıkta kalır — kadraj kaybolmaz. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(28, 28, 29, 0.66) 0%, rgba(28, 28, 29, 0.34) 34%, rgba(28, 28, 29, 0.04) 68%, transparent 100%),
    linear-gradient(to top, rgba(28, 28, 29, 0.6) 0%, rgba(28, 28, 29, 0.06) 48%, rgba(28, 28, 29, 0.34) 100%);
}

.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5.5rem);
}

.hero__label { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); color: rgba(255, 255, 255, 0.6); }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: var(--ls-display);
  max-width: 13ch;
}

.hero__foot {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}

.hero__text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 38ch;
}

.hero__nav { display: flex; gap: 0.5rem; align-items: center; }

.hero__tick {
  width: 34px; height: 1px;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color var(--t-2) var(--ease);
}
.hero__tick.is-on { background: #fff; }

/* 9) SAYFA BAŞLIĞI --------------------------------------------------------- */
.head {
  padding-top: calc(var(--bar-h) + clamp(4rem, 10vw, 9rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.head__crumb { margin-bottom: clamp(2rem, 5vw, 4rem); }

.head__title { max-width: 16ch; }
.head__lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Görselli başlık — tam ekran koyu */
.head--media {
  position: relative;
  min-height: clamp(420px, 66vh, 760px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--night);
  overflow: hidden;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.head--media .head__bg { position: absolute; inset: 0; }
.head--media .head__bg img,
.head--media .head__bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; }
.head--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 28, 29, 0.8), rgba(28, 28, 29, 0.1) 62%, rgba(28, 28, 29, 0.35));
}
.head--media .head__in { position: relative; z-index: 2; width: 100%; }
.head--media .micro { color: rgba(255, 255, 255, 0.6); }
.head--media .lede { color: rgba(255, 255, 255, 0.75); }
.head--media .crumb { color: rgba(255, 255, 255, 0.55); }
.head--media .crumb a:hover { color: #fff; }

/* Kırıntı yolu */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-38);
}
.crumb ol { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; margin: 0; list-style: none; }
.crumb li { display: flex; gap: 0.55rem; }
.crumb li + li::before { content: "/"; opacity: 0.45; }
.crumb a:hover { color: var(--ink); }

/* 10) DİZİN LİSTESİ (markalar, projeler) ---------------------------------- */
/* Kart ızgarası yerine tipografik dizin: üstüne gelince görsel belirir. */
.index { position: relative; }

.index__list { border-top: 1px solid var(--line); }
.night .index__list { border-top-color: var(--night-line); }

.index__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 13rem) 2.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid var(--line);
  transition: color var(--t-1) var(--ease), padding-left var(--t-2) var(--ease);
}

.night .index__row { border-bottom-color: var(--night-line); }

.index__list:hover .index__row { color: var(--ink-38); }
.night .index__list:hover .index__row { color: var(--night-fg-3); }
.index__list .index__row:hover { color: var(--ink); padding-left: clamp(0.5rem, 1.5vw, 1.25rem); }
.night .index__list .index__row:hover { color: #fff; }

.index__no { font-size: var(--fs-micro); letter-spacing: var(--ls-micro); opacity: 0.55; }

.index__name {
  font-size: clamp(1.35rem, 2.9vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.index__meta {
  font-size: var(--fs-small);
  letter-spacing: 0.005em;
  opacity: 0.62;
  text-align: right;
}

.index__go { justify-self: end; opacity: 0; transform: translateX(-8px); transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease); }
.index__row:hover .index__go { opacity: 1; transform: none; }

/* İmleci izleyen önizleme */
.index__peek {
  position: fixed;
  top: 0; left: 0;
  width: clamp(200px, 20vw, 330px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease);
  overflow: hidden;
}

.index__peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.index__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-1) var(--ease); }
.index__peek img.is-on { opacity: 1; }

/* 11) EDİTORYAL PROJE DİZİSİ ----------------------------------------------- */
.work { display: block; position: relative; }
.work + .work { margin-top: var(--sp-6); }

.work__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: 0.9rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}

.work__title { margin-top: 1.35rem; font-size: var(--fs-h2); letter-spacing: var(--ls-h2); line-height: 1.02; }
.work__note { margin-top: 0.85rem; color: var(--ink-55); max-width: 42ch; font-size: var(--fs-small); }

/* Dönüşümlü hizalama: her ikinci proje sağa kayar */
.work:nth-child(even) .work__wrap { margin-left: auto; }
.work__wrap { width: min(100%, 78%); }

/* 12) FORM ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.55rem; }

.field label { font-size: var(--fs-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-38); }
.field .req { opacity: 0.6; }

.input, .textarea, .select {
  width: 100%;
  padding: 0.9rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--t-1) var(--ease);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-38); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-bottom-color: var(--ink); }
.textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23252526' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.8rem;
  border-radius: 0;
}

.field--bad .input, .field--bad .textarea { border-bottom-color: var(--ink); }
.field__err { font-size: var(--fs-small); color: var(--ink); text-transform: none; letter-spacing: 0; }

.check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--fs-small); color: var(--ink-55); line-height: 1.5; cursor: pointer; }
.check input {
  appearance: none;
  width: 15px; height: 15px;
  flex: none; margin-top: 3px;
  border: 1px solid var(--ink-18);
  background: transparent;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.check input:checked { background: var(--ink); border-color: var(--ink); }

.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

.notice {
  padding: 1.1rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

/* 13) FİLTRE — çip değil, düz metin ---------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: baseline;
}

.filter {
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  color: var(--ink-38);
  padding-bottom: 0.3rem;
  position: relative;
  transition: color var(--t-1) var(--ease);
}

.filter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-2) var(--ease);
}

.filter:hover { color: var(--ink); }
.filter.is-on { color: var(--ink); }
.filter.is-on::after, .filter:hover::after { transform: scaleX(1); transform-origin: left; }

/* 14) MOZAİK GALERİ -------------------------------------------------------- */
.mosaic { columns: 3; column-gap: clamp(0.75rem, 1.5vw, 1.5rem); }
.mosaic__cell { break-inside: avoid; margin-bottom: clamp(0.75rem, 1.5vw, 1.5rem); }
.mosaic__cell button, .mosaic__cell a { display: block; width: 100%; overflow: hidden; background: var(--paper-2); position: relative; }
.mosaic__cell img { width: 100%; transition: transform 1.6s var(--ease); }
.mosaic__cell:hover img { transform: scale(1.03); }

/* 15) IŞIK KUTUSU ---------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 24, 25, 0.97);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2);
}

.lb.is-on { opacity: 1; visibility: visible; transition: opacity var(--t-2) var(--ease), visibility 0s; }

.lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--gutter);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.lb__stage { display: grid; place-items: center; padding: 0 clamp(1rem, 7vw, 6rem); min-height: 0; position: relative; }
.lb__stage img { max-width: 100%; max-height: 78vh; object-fit: contain; opacity: 0; transition: opacity var(--t-2) var(--ease); }
.lb__stage img.is-on { opacity: 1; }

.lb__cap { padding: 1.4rem var(--gutter) 2.25rem; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: var(--fs-small); min-height: 3rem; }

.lb__btn {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  padding: 0.5rem;
  transition: color var(--t-1) var(--ease);
}
.lb__btn:hover { color: #fff; }

.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb__nav--p { left: clamp(0.5rem, 2vw, 1.75rem); }
.lb__nav--n { right: clamp(0.5rem, 2vw, 1.75rem); }

/* 16) ALT BİLGİ ------------------------------------------------------------ */
.foot { background: var(--night); color: var(--night-fg-2); padding-top: var(--sp-6); font-size: var(--fs-small); }
.foot a { transition: color var(--t-1) var(--ease); }
.foot a:hover { color: #fff; }

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
  padding-bottom: var(--sp-5);
}

.foot__word { color: #fff; margin-bottom: var(--sp-2); }
.foot__word .wordmark img { height: 34px; }
.foot__note { color: var(--night-fg-2); max-width: 30ch; line-height: 1.6; }

.foot__col h5 { color: #fff; margin-bottom: 1.35rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-micro); text-transform: uppercase; }
.foot__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }

.foot__end {
  border-top: 1px solid var(--night-line);
  padding-block: 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  color: var(--night-fg-3);
}

.social { display: flex; gap: 1.25rem; }
.social a { font-size: var(--fs-small); color: var(--night-fg-2); }

/* 16b) BELİRME — yalnızca JS varken gizle ----------------------------------- */
/* Kritik kural: içerik varsayılan olarak GÖRÜNÜR. Gizleme durumu yalnızca
   <html class="js"> varken uygulanır. JS yüklenmezse, hata verirse ya da
   IntersectionObserver tetiklenmezse (tam sayfa ekran görüntüsü araçları,
   yazdırma, eski tarayıcılar) içerik yine de görünür kalır.
   Daha önce tersiydi ve kartlar kalıcı olarak kırpılı kalabiliyordu. */
.js [data-in] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-in].is-in { opacity: 1; transform: none; }

.js [data-in="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-in="wipe"].is-in { clip-path: inset(0 0 0 0); }
.js [data-in="fade"] { transform: none; }

.js .lines .ln > span {
  transform: translateY(102%);
  transition: transform 1.25s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}

.js .lines.is-in .ln > span { transform: none; }

/* 17) DİKEY VİDEOLAR (medya bölümü) ---------------------------------------- */
/* Kaynak videoların hepsi 9:16 olduğu için kadraj bozulmasın diye kartlar da
   dikey. Tıklanınca kapak yerine gerçek video aynı çerçevede oynar. */
.reels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.reel__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--paper-2);
  cursor: pointer;
}

.reel__frame > img,
.reel__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), opacity var(--t-1) var(--ease);
}

.reel__frame:hover > img { transform: scale(1.03); }

.reel__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  transition: transform var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}

.reel__frame:hover .reel__play { transform: translate(-50%, -50%) scale(1.08); }
.reel__frame.is-playing .reel__play,
.reel__frame.is-playing .reel__time { opacity: 0; pointer-events: none; }

.reel__time {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  padding: 0.25rem 0.5rem;
  background: rgba(28, 28, 29, 0.72);
  color: #fff;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--t-1) var(--ease);
}

.reel__meta { margin-top: 0.9rem; }

.reel__title {
  margin-top: 0.5rem;
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

/* Yatay şerit. Ok düğmesi yok: tutup sürükleyerek, trackpad'de ve
   dokunmatikte doğal kaydırmayla geziliyor. */

/* Ana sayfadaki yatay kaydırmalı şerit */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.rail--wide { grid-auto-columns: minmax(280px, 340px); }

/* Kenardan taşan şerit: sol hizayı korur, sağdan ekran dışına akar */
.rail-bleed {
  margin-right: calc(50% - 50vw);
  padding-right: var(--gutter);
}

/* 18) ÇEREZ ONAYI ----------------------------------------------------------- */
/* Sayfanın diline uyar: koyu zemin, saç teli çizgi, süs yok. Ekranın
   yalnızca alt şeridini kaplar, içeriği kapatmaz. */
.cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--night);
  color: var(--night-fg);
  border-top: 1px solid var(--night-line);
  transform: translateY(100%);
  transition: transform var(--t-3) var(--ease);
}

.cc.is-on { transform: none; }

.cc__in {
  max-width: var(--frame);
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.4rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  flex-wrap: wrap;
}

.cc__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--night-fg-2);
  max-width: 62ch;
}

.cc__text a { color: #fff; border-bottom: 1px solid var(--night-line); }
.cc__text a:hover { border-bottom-color: #fff; }

.cc__acts { display: flex; gap: 0.75rem; flex: none; }

.cc__btn {
  padding: 0.7rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--t-1) var(--ease-io), color var(--t-1) var(--ease-io), border-color var(--t-1) var(--ease-io);
}

.cc__btn:hover { border-color: #fff; }
.cc__btn--yes { background: #fff; border-color: #fff; color: var(--ink); }
.cc__btn--yes:hover { background: transparent; color: #fff; }

@media (max-width: 640px) {
  .cc__acts { width: 100%; }
  .cc__btn { flex: 1; text-align: center; }
}

/* 18) HAREKET -------------------------------------------------------------- */
/* Görseller perde gibi açılır; metin aşağıdan yükselir. Az ve yavaş. */
/* Belirme durumları .js sınıfının altında tanımlıdır (16b). Buradaki
   yalnızca yapısal kısım — JS olmadan da geçerli olmalı. */
.lines .ln { display: block; overflow: hidden; }
.lines .ln > span { display: block; }

/* Sayfa geçişi: siyah perde, ortasında marka.
   Çıkışta perde yukarıdan iner, girişte yukarı çekilerek sayfayı açar. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--night);
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;
}

.veil__mark { opacity: 0; }
.veil__mark img { height: clamp(34px, 5.4vw, 64px); width: auto; }

/* GİRİŞ — perde kapalı başlar, marka bir an durur, sonra perde yukarı çekilir.
   Toplam 1.15 sn: markayı okumaya yetecek kadar uzun, beklemeye zorlamayacak
   kadar kısa. */
.veil--in {
  transform: translateY(0);
  animation: veil-lift 0.8s var(--ease) 0.35s forwards;
}

.veil--in .veil__mark {
  opacity: 1;
  animation: mark-out 0.45s var(--ease) 0.3s forwards;
}

@keyframes veil-lift {
  to { transform: translateY(-101%); }
}

@keyframes mark-out {
  to { opacity: 0; transform: translateY(-10px); }
}

/* ÇIKIŞ — bağlantıya basıldığında perde yukarıdan iner */
.veil--out {
  transform: translateY(-101%);
  pointer-events: all;
  animation: veil-drop 0.52s var(--ease-io) forwards;
}

.veil--out .veil__mark {
  animation: mark-in 0.42s var(--ease) 0.14s forwards;
}

@keyframes veil-drop {
  to { transform: translateY(0); }
}

@keyframes mark-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Perde işini bitirince tıklamayı engellemesin */
.veil--done { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .lines .ln > span { transform: none !important; }
  .veil { display: none !important; }
  .index__peek { display: none; }
}

/* 18) DUYARLILIK ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .bar__links { display: none; }
  .mosaic { columns: 2; }
  .menu__body { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: var(--sp-4); }
  .menu__view { display: none; }
  .index__peek { display: none; }
}

@media (max-width: 900px) {
  :root { --bar-h: 64px; }
  .duo, .duo--flip { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .index__meta { display: none; }
  .work__wrap { width: 100%; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { columns: 1; }
  .hero { min-height: 560px; }
  .hero__nav { display: none; }
  .hero__title { max-width: 100%; }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .lang { display: none; }
  .index__row { grid-template-columns: 2rem minmax(0, 1fr); }
  .index__go { display: none; }
  .lb__nav { top: auto; bottom: -3rem; transform: none; }
}

@media print {
  .bar, .foot, .menu, .veil { display: none !important; }
  body { background: #fff; color: #000; }
  [data-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Menü hiyerarşisi: alt başlıklar bir kademe küçük ve girintili.
   Kataloglar markaların altında duruyor. */
.menu__item--sub {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  padding-left: clamp(3.5rem, 5vw, 4.75rem);
  padding-block: clamp(0.1rem, 0.3vw, 0.25rem);
  color: var(--night-fg-2);
}

.menu__item--sub .menu__no { width: 0; }

/* --- Marka / referans logo duvarı ------------------------------------------
   Revizede "yalnızca logolar" istendi: kutular eşit, logo ortalı ve tek
   renkli. Logo yüklenmemişse marka adı aynı kutuda tipografik durur. */
.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.blogo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--paper);
  transition: background-color var(--t-1) var(--ease);
}

.blogo:hover { background: var(--paper-2); }

.blogo img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.78;
  transition: opacity var(--t-1) var(--ease), filter var(--t-1) var(--ease);
}

.blogo:hover img { opacity: 1; filter: grayscale(0); }

.blogo__name {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-55);
  text-align: center;
  transition: color var(--t-1) var(--ease);
}

.blogo:hover .blogo__name { color: var(--ink); }

@media (max-width: 900px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sürüklenebilir şerit: imleç tutma hissini versin, sürüklerken
   metin/görsel seçilmesin. */
.rail { cursor: grab; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging * { pointer-events: none; }

.rail img,
.rail a { -webkit-user-drag: none; user-select: none; }