/* =====================================================================
   STORY ROAD™ — HERO
   main.css · tokens · reset · tipografi · masthead · plate · footbar
   Design Bible v1.0 · Creative Review Phase 03
   ===================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root{

  /* Zemin — volkanik tüf katmanları */
  --obsidian:#0A0908;
  --basalt:#12100D;

  /* Metin — kemik ve kum */
  --bone:#F4EFE6;
  --sand:#A8A196;
  --dust:#6E675D;

  /* Vurgu — şafak ışığı (tek vurgu rengi, ≤ %2 kaplama) */
  --dawn:#C9A66B;
  --dawn-hi:#E8D2A6;

  /* Çizgi */
  --hairline:rgba(244,239,230,.11);
  --hairline-hi:rgba(244,239,230,.22);

  /* Tipografi */
  --font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero:clamp(70px,11vw,220px);
  --t-lead:clamp(17px, 1.5vw, 25px);
  --t-body:clamp(15px, 1.05vw, 18px);
  --t-figure:clamp(23px, 2.15vw, 34px);
  --t-meta:clamp(10px, .74vw, 12px);
  --t-micro:10px;

  /* Uzay */
  --gutter:clamp(20px, 4.4vw, 76px);
  --masthead:clamp(72px, 7.4vh, 108px);

  /* Hareket */
  --ease-lux:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

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

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

body{
  background:var(--obsidian);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-menu-open{overflow:hidden}

img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.34em;vertical-align:super;letter-spacing:0}

::selection{background:var(--dawn);color:var(--obsidian)}

:focus-visible{
  outline:1.5px solid var(--dawn);
  outline-offset:4px;
  border-radius:2px;
}

.skip-link{
  position:fixed;z-index:9999;top:14px;left:14px;
  padding:12px 18px;
  background:var(--bone);color:var(--obsidian);
  font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .3s var(--ease-lux);
}
.skip-link:focus-visible{transform:none}

/* ── 3. MASTHEAD ───────────────────────────────────────────────────── */
.masthead{
  position:fixed;z-index:900;inset:0 0 auto 0;
  height:var(--masthead);
  display:flex;align-items:center;
  background:transparent;
  transition:background .5s var(--ease-lux), backdrop-filter .5s var(--ease-lux);
}
.masthead.is-scrolled{
  background:rgba(10,9,8,.86);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 var(--hairline);
}

.masthead__inner{
  width:100%;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

/* Wordmark — logo görseli yerine tipografik künye */
.wordmark{display:inline-grid;gap:5px;justify-items:start}
.wordmark__name{
  font-family:var(--font-body);
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--bone);
}
.wordmark__name sup{font-size:.5em;letter-spacing:0}
.wordmark__parent{
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dust);
}

/* Nav */
.nav ul{display:flex;gap:clamp(18px,2.2vw,38px)}
.nav a{
  position:relative;
  display:inline-block;
  padding-block:6px;
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sand);
opacity:.82;
transition:
color .45s var(--ease-lux),
opacity .45s var(--ease-lux);}
.nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--dawn);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-lux);
}
.nav a:hover,
.nav a:focus-visible{
    color:var(--bone);
    opacity:1;
}.nav a:hover::after{transform:scaleX(1)}

/* Belge künyesi — "web sitesi değil, yayın" işareti */
.masthead__meta{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.docmark{
  font-size:var(--t-micro);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--dust);
  font-variant-numeric:tabular-nums lining-nums;
}
.menu-toggle{
  display:none;
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone);
  padding:8px 0;
}

/* ── 4. MOBİL MENÜ ─────────────────────────────────────────────────── */
.menu{
  position:fixed;z-index:850;inset:0;
  background:var(--obsidian);
  padding:calc(var(--masthead) + 6vh) var(--gutter) var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-lux), visibility .5s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu__inner{display:grid;align-content:start;gap:2px}
.menu__inner a{
  padding:20px 0;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-display);
  font-size:clamp(30px,8vw,52px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--bone);
}
.menu__mark{
  margin-top:36px;
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dust);
}

/* ── 5. HERO ───────────────────────────────────────────────────────── */
.hero{
  min-height:115svh;
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:clamp(24px,3.6vh,48px);
  padding:calc(var(--masthead) + clamp(14px,2.4vh,34px)) var(--gutter) clamp(24px,3.6vh,48px);
}

/* ── 6. PLATE — uçak penceresi formunda plaka ──────────────────────── */
.plate{
  position:relative;
  min-height:min(68vh,760px);
  overflow:hidden;
  border-radius:clamp(30px,4.4vw,84px);
  background:var(--basalt);
  isolation:isolate;
  will-change:transform,opacity;
}

.plate__media{position:absolute;inset:0;overflow:hidden}
.plate__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 63%;
  /* Grading: puslu öğle ışığını derinleştir, tüf sıcaklığını geri getir,
     kompozit render dokusunu bastır. */
  filter:
sepia(.10)
saturate(.94)
contrast(1.18)
brightness(.67);
  transform:scale(1.02);
  transform-origin:52% 60%;
  will-change:transform;
}

/* Okunabilirlik perdesi — dolgu değil, fotografik perde.
   Üst: puslu gökyüzünü obsidiyene gömer. Alt: tipografiyi taşır. */
.plate__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,.92) 0%,
      rgba(10,9,8,.52) 15%,
      rgba(10,9,8,.24) 40%,
      rgba(10,9,8,.44) 72%,
      rgba(10,9,8,.94) 100%),
    radial-gradient(108% 78% at 50% 50%,
      rgba(10,9,8,0) 0%,
      rgba(10,9,8,.26) 48%,
      rgba(10,9,8,.86) 100%),
    /* Tipografi bandı: başlığın oturduğu şeridi derinleştirir — okunabilirlik */
    radial-gradient(60% 30% at 50% 45%,
      rgba(10,9,8,.40) 0%,
      rgba(10,9,8,.18) 58%,
      transparent 100%);
}

/* Şafak yıkaması — vadiye tüf sıcaklığını iade eder (yalnızca orta tonlar) */
.plate__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.30;
  mix-blend-mode:soft-light;
  background:radial-gradient(78% 60% at 50% 58%,
    var(--dawn) 0%,
    rgba(201,166,107,.32) 42%,
    transparent 76%);
}

/* Film grenı — CG kompoziti fotografik dokuya yaklaştırır */
.plate__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kılcal iç kenar — basılı plaka hissi */
.plate__edge{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--hairline);
}

/* ── 7. PLATE İÇERİĞİ ──────────────────────────────────────────────── */
.plate__content{
  position:relative;z-index:4;
  height:100%;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  padding:
clamp(120px,11vw,170px)
clamp(42px,7vw,90px)
clamp(130px,11vw,170px);
}

.dateline{
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--dawn);
  margin-bottom:clamp(30px,4.8vh,62px);
}

/* Optik hiyerarşi: ölçek, sıkı tracking ve çevresindeki sessizlik.
   Efekt yok — yalnızca oran. */
.display{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--t-hero);
  line-height:.86;
  letter-spacing:-.042em;
  word-spacing:-.02em;
  color:var(--bone);
  text-wrap:balance;
}
/* ™ genişliği ortalamadan düşülür: kelime metrik değil, OPTİK ortalanır. */
.display sup{
  font-size:.155em;
  vertical-align:super;
  letter-spacing:0;
  margin-right:-1em;
  color:var(--sand);
}

.category{
  margin-top:clamp(30px,4.6vh,58px);
  max-width:min(46ch,100%);
  font-family:var(--font-display);
  font-size:var(--t-lead);
  font-weight:400;
  line-height:1.34;
  letter-spacing:.008em;
  color:var(--bone);
}

.hairline{
  display:block;
  width:56px;height:1px;
  margin:clamp(32px,4.4vh,54px) 0;
  background:var(--hairline-hi);
}

.invite{
  max-width:min(54ch,100%);
  font-size:var(--t-body);
  line-height:1.72;
  color:var(--sand);
  text-wrap:balance;
}

/* ── 8. STRIP — tek bakışta okunan executive bilgi şeridi ──────────── */
.strip{
  width:min(100%, clamp(560px, 62vw, 900px));
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  font-variant-numeric:tabular-nums lining-nums;
}
.strip__cell{
  display:grid;
  justify-items:center;
  gap:clamp(8px,1.1vh,13px);
  padding-inline:clamp(10px,1.8vw,28px);
}
.strip__cell + .strip__cell{
  border-left:1px solid var(--hairline);
}
.strip dt{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--t-figure);
  line-height:1;
  letter-spacing:-.018em;
  color:var(--bone);
  white-space:nowrap;
}
.strip dd{
  font-size:var(--t-micro);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--dust);
  text-align:center;
  white-space:nowrap;
}

/* ── 9. FOOTBAR ────────────────────────────────────────────────────── */
.footbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:24px;
  padding-top:clamp(24px,3.4vh,40px);
  border-top:1px solid var(--hairline);
}

/* ── Founding Collection register — sınırlı baskı künyesi ──────────── */
.founding{display:grid;gap:clamp(9px,1.2vh,13px);justify-items:start}

.founding__label{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dust);
}

.founding__row{
  display:flex;
  align-items:flex-end;
  gap:clamp(20px,2.6vw,40px);
}

/* Edition mark: N° 01 / XII */
.founding__edition{
  display:flex;
  align-items:baseline;
  gap:.34em;
  font-family:var(--font-display);
  font-size:clamp(21px,1.85vw,29px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--bone);
  font-variant-numeric:lining-nums;
}
.founding__edition .no{color:var(--dust);font-size:.68em}
.founding__edition .no sup{font-size:.6em;vertical-align:super}
.founding__edition b{font-weight:400}
.founding__edition em{
  font-style:normal;
  font-size:.72em;
  letter-spacing:.04em;
  color:var(--dust);
}

/* Register: yükseklik farkı ile "ilerleme çubuğu" değil, kayıt defteri */
.founding__register{
  display:flex;
  align-items:flex-end;
  gap:clamp(9px,.86vw,14px);
  padding-bottom:2px;
}
.founding__register li{
  width:1px;height:9px;
  background:rgba(244,239,230,.20);
}
.founding__register li.is-claimed{
  width:2px;height:21px;
  background:var(--dawn);
}

.founding__status{
  font-size:var(--t-micro);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--sand);
}

/* Scroll cue */
.cue{
  justify-self:center;
  width:1px;height:46px;
  background:var(--hairline-hi);
  overflow:hidden;
}
.cue span{
  display:block;
  width:1px;height:14px;
  background:var(--dawn);
}

/* Executive CTA — buton değil, üzerine yazılabilecek bir satır.
   Büyük harf kaldırıldı: cümle düzeni "özel görüşme" tonunu taşır. */
.cta{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:clamp(16px,1.5vw,24px);
  padding-bottom:13px;
  border-bottom:1px solid var(--hairline-hi);
  font-size:clamp(14px,1.05vw,17px);
  font-weight:400;
  letter-spacing:.012em;
  color:var(--bone);
transition:
border-color .5s var(--ease-lux),
transform .45s var(--ease-lux),
background .45s var(--ease-lux);}
.cta svg{
  width:28px;height:8px;
  fill:none;
  stroke:var(--dawn);
  stroke-width:1;
  overflow:visible;
  transition:transform .55s var(--ease-lux);
}
.cta:hover,.cta:focus-visible{border-color:var(--dawn)}
.cta:hover svg{transform:translateX(6px)}
.cta:hover{
transform:translateY(-3px);
}
/* =====================================================================
   SECTIONS II–VI
   Hero (I) yukarıdaki kurallarla KİLİTLİDİR — aşağıdaki hiçbir kural
   .hero, .plate, .strip, .footbar, .masthead veya .menu'ye dokunmaz.
   ===================================================================== */

/* ── 10. ORTAK BÖLÜM İSKELETİ ──────────────────────────────────────── */
.chapter{
  position:relative;
  padding:clamp(96px,12vh,190px) 0;
  scroll-margin-top:calc(var(--masthead) + 20px);
}
.chapter__inner{
  width:min(100%, var(--container, 1440px));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
:root{--container:1440px}

/* Roma bölüm numarası — yayın işareti */
.chapter__mark{
  position:absolute;
  top:clamp(30px,4.6vh,58px);
  right:var(--gutter);
  font-family:var(--font-display);
  font-size:clamp(15px,1.15vw,20px);
  line-height:1;
  letter-spacing:.16em;
  color:var(--dust);
  pointer-events:none;
}

.chapter__head{max-width:min(830px,94%);margin-bottom:clamp(48px,6.4vh,92px)}
.chapter__label{
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dawn);
  margin-bottom:clamp(18px,2.4vh,28px);
}
.chapter__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,3.5vw,58px);
  line-height:1.04;
  letter-spacing:-.028em;
  color:var(--bone);
  text-wrap:balance;
}

/* Dipnot — sessiz kaynak satırı */
.footnote{
  max-width:64ch;
  font-size:var(--t-micro);
  line-height:1.85;
  letter-spacing:.06em;
  color:var(--dust);
}

/* ── 11. II — THE STATEMENT ────────────────────────────────────────── */
.statement{
  min-height:70vh;
  display:grid;
  align-items:center;
  padding-block:clamp(90px,11vh,170px);
}
.statement__inner{
  max-width:1180px;
  text-align:center;
}
.statement__lead{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,3.5vw,60px);
  line-height:1.18;
  letter-spacing:-.028em;
  color:var(--bone);
  text-wrap:balance;
}
.statement__lead sup{font-size:.28em;vertical-align:super;color:var(--sand)}
.statement__note{
  margin-top:clamp(38px,5.4vh,72px);
  font-size:var(--t-micro);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--dust);
}

/* ── 12. III — WHY HERE / THE SURVEY ───────────────────────────────── */
.survey__filters{
  display:flex;
  gap:clamp(14px,1.6vw,26px);
  margin-bottom:clamp(26px,3.4vh,40px);
}
.filter{
  padding:9px 0;
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--dust);
  border-bottom:1px solid transparent;
  transition:color .4s var(--ease-lux), border-color .4s var(--ease-lux);
}
.filter.is-active{color:var(--bone);border-bottom-color:var(--dawn)}

.survey__scroller{
  width:100%;
  padding-inline:var(--gutter);
  overflow:visible;
}
.survey__plate{
  position:relative;
  width:100%;
  aspect-ratio:2600/1462;
  overflow:hidden;
  background:var(--basalt);
  box-shadow:inset 0 0 0 1px var(--hairline);
  isolation:isolate;
}
.survey__media{position:absolute;inset:0}
.survey__media img{
  width:100%;height:100%;
  object-fit:cover;
  /* Keşif plakası muamelesi: doygunluk düşük, ton soğuk-nötr, çizgisel netlik yüksek */
  filter:saturate(.24) contrast(1.20) brightness(.80);
}
.survey__tone{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,13,.42) 0%, rgba(8,10,13,.06) 30%, rgba(8,10,13,.10) 70%, rgba(8,10,13,.52) 100%);
}
/* Koordinat ızgarası — kartografik okuma mantığı */
.survey__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,239,230,.075) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(0deg,  rgba(244,239,230,.075) 0 1px, transparent 1px 20%);
}
/* Köşe register işaretleri */
.survey__reg{
  position:absolute;z-index:3;width:18px;height:18px;pointer-events:none;
  border-color:rgba(244,239,230,.32);border-style:solid;border-width:0;
}
.survey__reg--tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.survey__reg--tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.survey__reg--bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.survey__reg--br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

/* Gösterge amaçlı proje aksı — teknik çizim tamamlanıyor hissi */
.survey__axis{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.survey__axis-line{
  fill:none;
  stroke:rgba(244,239,230,.62);
  stroke-width:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.survey__axis-label{
  position:absolute;z-index:4;
  left:52.5%;bottom:5%;
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(244,239,230,.5);
  pointer-events:none;
  white-space:nowrap;
}

/* ── Hotspots ──────────────────────────────────────────────────────── */
.survey__points{position:absolute;inset:0;z-index:5}
/* 44×44 dokunma hedefi — nokta merkeze hizalıdır */
.hs{
  position:absolute;
  left:var(--x);top:var(--y);
  width:44px;height:44px;
  margin:-22px 0 0 -22px;
  padding:0;
}
.hs__dot{
  position:absolute;left:50%;top:50%;
  margin:-5px 0 0 -5px;
  width:10px;height:10px;border-radius:50%;
  background:var(--bone);
  box-shadow:0 0 0 1px rgba(10,9,8,.55), 0 0 0 5px rgba(244,239,230,.14);
  transition:transform .45s var(--ease-lux), background .45s var(--ease-lux), box-shadow .45s var(--ease-lux);
}
.hs.is-indicative .hs__dot{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--bone), 0 0 0 1px rgba(10,9,8,.55);
}
.hs.is-lavender .hs__dot{background:var(--lavender,#A99BC1)}
:root{--lavender:#A99BC1}

.hs__leader{
  position:absolute;top:50%;
  width:38px;height:1px;
  background:rgba(244,239,230,.42);
  transition:background .45s var(--ease-lux);
}
.hs[data-side="right"] .hs__leader{left:calc(50% + 7px)}
.hs[data-side="left"]  .hs__leader{right:calc(50% + 7px)}

/* Etiket tıklamayı çalmaz — etkileşim yalnızca 44px çekirdektedir */
.hs__label{
  position:absolute;top:calc(50% - .78em);
  display:block;
  width:max-content;max-width:min(30ch,32vw);
  text-align:left;
  pointer-events:none;
  transition:opacity .45s var(--ease-lux);
}
.hs[data-side="right"] .hs__label{left:calc(50% + 51px)}
.hs[data-side="left"]  .hs__label{right:calc(50% + 51px);text-align:right}

.hs__short{display:none}

.hs__label b{
  display:block;
  font-family:var(--font-body);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--bone);
  text-shadow:0 1px 6px rgba(10,9,8,.85);
}
.hs__label i{
  display:block;
  margin-top:5px;
  max-height:0;
  overflow:hidden;
  font-style:normal;
  font-size:var(--t-micro);
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.6;
  color:var(--sand);
  opacity:0;
  text-shadow:0 1px 6px rgba(10,9,8,.85);
  transition:max-height .5s var(--ease-lux), opacity .5s var(--ease-lux);
}

/* Yalnızca hotspot etkileşimlerinde hover kullanılır */
.hs:hover .hs__dot,
.hs:focus-visible .hs__dot,
.hs.is-open .hs__dot{transform:scale(1.4);background:var(--dawn);box-shadow:0 0 0 1px rgba(10,9,8,.55), 0 0 0 7px rgba(201,166,107,.16)}
.hs:hover .hs__leader,
.hs:focus-visible .hs__leader,
.hs.is-open .hs__leader{background:var(--dawn)}
.hs:hover .hs__label i,
.hs:focus-visible .hs__label i,
.hs.is-open .hs__label i{max-height:6em;opacity:1}

/* Odak yönetimi: bir nokta açıkken diğerleri geri çekilir */
.survey__plate.is-focused .hs:not(:hover):not(:focus-visible):not(.is-open) .hs__label{opacity:.34}
.survey__plate.is-focused .hs:not(:hover):not(:focus-visible):not(.is-open) .hs__dot{opacity:.4}

/* Katman filtresi */
.hs[hidden]{display:none}
.hs.is-dim{opacity:.16;pointer-events:none}
.hs{transition:opacity .5s var(--ease-lux)}

/* Plaka altyazısı */
.survey__caption{
  margin-top:clamp(18px,2.4vh,28px);
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dust);
}

/* Lejant — dar ekranlarda görünür */
.survey__legend{display:none}

/* Ana veri anı */
.survey__datum{
  margin-top:clamp(52px,7vh,104px);
  display:grid;
  gap:clamp(12px,1.6vh,20px);
  justify-items:start;
}
.datum__figure{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(44px,6.4vw,116px);
  line-height:.94;
  letter-spacing:-.038em;
  color:var(--bone);
  font-variant-numeric:tabular-nums lining-nums;
}
.datum__support{
  font-size:var(--t-meta);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sand);
}
.survey__datum .footnote{margin-top:clamp(14px,2vh,22px)}

/* ── 13. SESSİZ ARA — BEAT ─────────────────────────────────────────── */
.beat{
  min-height:46vh;
  display:grid;
  place-items:center;
  padding:clamp(70px,9vh,130px) var(--gutter);
  background:#060505;
  border-block:1px solid var(--hairline);
}
.beat__line{
  max-width:26ch;
  text-align:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(21px,2.3vw,38px);
  line-height:1.38;
  letter-spacing:-.018em;
  color:var(--sand);
}

/* ── 14. IV — THE ARRIVAL ──────────────────────────────────────────── */
.arrival__line{
  position:relative;
  margin-left:clamp(0px,1.2vw,18px);
  padding-left:clamp(30px,4.4vw,72px);
}
/* Tek kesintisiz kılcal çizgi */
.arrival__line::before{
  content:"";
  position:absolute;left:0;top:.5em;bottom:.5em;
  width:1px;
  background:var(--hairline-hi);
}
.stage{
  position:relative;
  padding-block:clamp(26px,3.8vh,54px);
  max-width:62ch;
}
.stage__node{
  position:absolute;
  left:calc(-1 * clamp(30px,4.4vw,72px));
  top:calc(clamp(26px,3.8vh,54px) + .52em);
  width:9px;height:1px;
  background:var(--hairline-hi);
}
.stage__word{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px,3.2vw,52px);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--sand);
}
.stage__word sup{font-size:.24em;vertical-align:super;color:var(--dust)}
.stage__note{
  margin-top:clamp(10px,1.4vh,16px);
  max-width:52ch;
  font-size:var(--t-body);
  line-height:1.75;
  color:var(--dust);
}

/* Story Road aşaması — hiyerarşi renkle değil, ölçekle */
.stage--major .stage__word{
  font-size:clamp(40px,5.6vw,96px);
  letter-spacing:-.04em;
  color:var(--bone);
}
.stage--major .stage__note{color:var(--sand)}
.stage--major .stage__node{
  width:22px;height:1px;
  left:calc(-1 * clamp(30px,4.4vw,72px));
  background:var(--dawn);
}

.arrival__close{
  margin-top:clamp(56px,7.4vh,110px);
  margin-left:auto;
  max-width:46ch;
  text-align:right;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px,2.05vw,34px);
  line-height:1.36;
  letter-spacing:-.02em;
  color:var(--bone);
}

/* ── 15. V — 04:47 ─────────────────────────────────────────────────── */
.dawn{background:#050404;padding-top:0}
.dawn__stage{
  min-height:78vh;
  display:grid;
  place-items:center;
  padding:clamp(80px,12vh,180px) var(--gutter);
}
.dawn__time{
  display:flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(78px,17vw,300px);
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--bone);
  font-variant-numeric:tabular-nums lining-nums;
}
.dawn__time em{
  font-style:normal;
  padding-inline:.06em;
  color:var(--dust);
}
.dawn__lead{
  max-width:24ch;
  margin-bottom:clamp(60px,8vh,120px);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(24px,2.9vw,50px);
  line-height:1.28;
  letter-spacing:-.026em;
  color:var(--bone);
}

/* Yatay gözlem dizisi — ikon kartı yok */
.observations{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hairline);
}
.obs{
  padding:clamp(24px,3.2vh,38px) clamp(14px,1.6vw,30px) 0 0;
}
.obs + .obs{
  padding-left:clamp(14px,1.6vw,30px);
  border-left:1px solid var(--hairline);
}
.obs h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(17px,1.5vw,26px);
  line-height:1.15;
  letter-spacing:-.014em;
  color:var(--bone);
}
.obs p{
  margin-top:clamp(10px,1.4vh,16px);
  font-size:var(--t-micro);
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--dust);
}
.dawn .footnote{margin-top:clamp(38px,5vh,64px)}

/* ── 16. VI — THE CLAIM ────────────────────────────────────────────── */
.claim__spread{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(38px,5vw,96px);
  align-items:start;
}
.claim__plate{position:relative}
.claim__plate img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:47% 80%;
  /* Belgesel muamele — III'teki keşif plakasından bilinçli olarak ayrışır */
  filter:sepia(.14) saturate(.80) contrast(1.20) brightness(.60);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.claim__plate figcaption{
  margin-top:14px;
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dust);
}

/* Defter — kart değil, satır */
.ledger{border-top:1px solid var(--hairline)}
.ledger__row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:baseline;
  padding:clamp(15px,2vh,22px) 0;
  border-bottom:1px solid var(--hairline);
}
.ledger dt{
  font-size:var(--t-meta);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dust);
}
.ledger dd{
  font-size:var(--t-body);
  letter-spacing:.01em;
  color:var(--bone);
  text-align:right;
  font-variant-numeric:tabular-nums lining-nums;
}
.ledger__row--figure dd{
  font-family:var(--font-display);
  font-size:clamp(22px,2vw,32px);
  line-height:1;
  letter-spacing:-.018em;
}

.claim__horizon{
  margin-top:clamp(28px,3.6vh,44px);
  padding-bottom:clamp(18px,2.4vh,26px);
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-display);
  font-size:clamp(19px,1.6vw,27px);
  letter-spacing:-.012em;
  color:var(--bone);
  font-variant-numeric:tabular-nums lining-nums;
}
.claim__ledger .footnote{margin-top:clamp(18px,2.4vh,26px)}

/* Kurucu Beyanı */
.declaration{
  margin-top:clamp(64px,8.4vh,124px);
  padding-top:clamp(28px,3.6vh,44px);
  border-top:1px solid var(--hairline);
  max-width:74ch;
}
.declaration__title{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dawn);
  margin-bottom:clamp(16px,2.2vh,24px);
}
.declaration__body{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px,2vw,32px);
  line-height:1.38;
  letter-spacing:-.02em;
  color:var(--bone);
}

/* =====================================================================
   VII — THE FOUNDING COLLECTION
   Mevcut dil: kılcal çizgi, serif, obsidiyen, kısıtlı şafak vurgusu.
   Kart yok, gölge yok, ikon yok, gradient yok, geri sayım yok.
   ===================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ── Sayfa 1 ───────────────────────────────────────────────────────── */
.collection__intro{
  max-width:58ch;
  font-size:var(--t-body);
  line-height:1.9;
  color:var(--sand);
}

/* ── Sayfa 2 — koleksiyon künyesi ──────────────────────────────────── */
.collection__register{margin-top:clamp(72px,10vh,150px)}

.register__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-bottom:clamp(14px,1.8vh,20px);
}
.register__label{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dust);
}
.register__count{
  font-family:var(--font-display);
  font-size:clamp(17px,1.4vw,24px);
  letter-spacing:.02em;
  color:var(--dust);
  font-variant-numeric:tabular-nums lining-nums;
}

.positions__scroller{overflow:visible}

/* Kılcal ızgara: boşluklar hairline, hücreler obsidiyen */
.positions{
  display:grid;
  grid-template-columns:minmax(0,3.4fr) repeat(11, minmax(0,1fr));
  gap:1px;
  background:var(--hairline);
  border-block:1px solid var(--hairline);
}

.position{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:clamp(20px,3vh,36px);
  min-height:clamp(210px,30vh,340px);
  padding:clamp(16px,2vh,24px) clamp(10px,.9vw,20px) clamp(18px,2.4vh,28px);
  background:var(--obsidian);
}

.position__no{
  font-family:var(--font-display);
  font-size:clamp(15px,1.28vw,22px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--dust);
  font-variant-numeric:lining-nums;
  white-space:nowrap;
}
.position__no span{font-size:.72em}
.position__no sup{font-size:.6em;vertical-align:super}

.position__field{
  display:grid;
  align-content:end;
}
.position__mark{
  font-family:var(--font-display);
  font-size:clamp(15px,1.2vw,20px);
  line-height:1;
  color:rgba(244,239,230,.18);
}

/* 01 — Founding Position */
.position--founding .position__no{color:var(--bone)}
.position__name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(21px,1.9vw,32px);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--bone);
}
.position__name sup{font-size:.28em;vertical-align:super;color:var(--sand)}
.position__status{
  margin-top:clamp(12px,1.6vh,18px);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--dawn);
}
.position__note{
  margin-top:clamp(12px,1.6vh,18px);
  max-width:34ch;
  font-size:var(--t-micro);
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--dust);
}

.collection__seal{
  margin-top:clamp(38px,5vh,66px);
  max-width:44ch;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px,2.1vw,36px);
  line-height:1.34;
  letter-spacing:-.022em;
  color:var(--bone);
}

/* ── Sayfa 3 — neden on iki? ───────────────────────────────────────── */
.collection__rationale{margin-top:clamp(88px,12vh,180px)}

.collection__subhead{
  margin-bottom:clamp(34px,4.6vh,58px);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,2.9vw,48px);
  line-height:1.06;
  letter-spacing:-.026em;
  color:var(--bone);
}

.reasons{border-top:1px solid var(--hairline)}
.reason{
  display:grid;
  grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);
  align-items:baseline;
  padding:clamp(17px,2.3vh,26px) 0;
  border-bottom:1px solid var(--hairline);
}
.reason dt{
  font-family:var(--font-display);
  font-size:clamp(18px,1.5vw,26px);
  line-height:1.2;
  letter-spacing:-.014em;
  color:var(--sand);
}
.reason dd{
  max-width:56ch;
  font-size:var(--t-body);
  line-height:1.78;
  color:var(--dust);
}

.collection__verdict{
  margin-top:clamp(44px,6vh,84px);
  max-width:40ch;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px,2.05vw,34px);
  line-height:1.34;
  letter-spacing:-.02em;
  color:var(--bone);
}
.collection__rationale .footnote{margin-top:clamp(20px,2.6vh,30px)}

/* ── Sayfa 4 — tek büyük beyan ─────────────────────────────────────── */
.statement-band{
  margin-top:clamp(96px,13vh,190px);
  min-height:56vh;
  display:grid;
  place-items:center;
  padding:clamp(80px,11vh,150px) var(--gutter);
  background:#060505;
  border-block:1px solid var(--hairline);
}
.statement-band__line{
  max-width:22ch;
  text-align:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,4.6vw,84px);
  line-height:1.16;
  letter-spacing:-.034em;
  color:var(--bone);
}
/* =======================================================
   EXECUTIVE CASE STUDY
======================================================= */

.executive-case{
    width:min(1400px,92vw);
    margin:9rem auto 10rem;
}

.executive-case__header{
    max-width:760px;
    margin:0 auto 5rem;
    text-align:center;
}

.executive-case__eyebrow{
    font-size:.78rem;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#9b9388;
    margin-bottom:18px;
}

.executive-case__title{
    font-family:"Instrument Serif",serif;
    font-size:clamp(3rem,5vw,5.3rem);
    line-height:1.05;
    font-weight:400;
    color:#f4efe6;
    margin:0;
}

.executive-case__text{
    max-width:720px;
    margin:32px auto 0;
    color:#bcb4a8;
    font-size:1.06rem;
    line-height:1.95;
}

.executive-case__note{
    max-width:720px;
    margin:22px auto 0;
    color:#8e867c;
    font-size:.88rem;
    line-height:1.8;
}

.executive-gallery{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:24px;
    margin-top:70px;
}

.executive-gallery figure{
    margin:0;
    overflow:hidden;
    border-radius:18px;
    background:#111;
}

.executive-gallery img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.executive-gallery figure:hover img{
    transform:scale(1.03);
}

.executive-gallery .large{
    grid-column:1/-1;
}

.executive-gallery .half{
    grid-column:span 6;
}

@media (max-width:768px){

    .executive-case{
        margin:6rem auto;
    }

    .executive-gallery{
        grid-template-columns:1fr;
        gap:18px;
    }

    .executive-gallery .large,
    .executive-gallery .half{
        grid-column:auto;
    }

}/* ── Sayfa 5 — kapanış ─────────────────────────────────────────────── */
.collection__closing{
  margin-top:clamp(96px,13vh,190px);
  max-width:30ch;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(24px,2.9vw,52px);
  line-height:1.24;
  letter-spacing:-.028em;
  color:var(--bone);
}
