/* ============================================================
   niwers.com — tasarım sistemi (WEB-6A · "sıcak editoryal dergi")
   Palet: uygulamanın gerçek token'ları (krem kâğıt / espresso mürekkep /
   terracotta) — WEB-2'den devralındı, kontrast artırıldı.
   Tipografi: Fraunces (roman + İTALİK, başlık/aksan) + Hanken Grotesk (gövde).
   Dil: ince çizgi (hairline) motifleri, çerçeveli "plaka" fotoğraflar,
   folio etiketleri, bant ritmi (kâğıt → derin → espresso), tanecik dokusu.
   Karanlık mod YOK (kapsam dışı).
   ============================================================ */

/* ---------- tokenlar ---------- */
:root {
  /* zemin katmanı */
  --bg: #FFFAF5;
  --bg-deep: #F4E5D6;
  --surface: #FFFFFF;
  --surface-alt: #FAF7F2;
  --chip: #F4E5D6;
  --border: #E8DCC8;
  --border-strong: #D9C4A3;
  /* espresso bant (koyu bölümler) */
  --ink-bg: #1A1208;
  --ink-bg-2: #241A0D;
  --on-ink: #D9CBB6;
  --on-ink-bright: #F6EBDC;
  --on-ink-border: #3A2D1E;
  /* metin */
  --text: #2A1F15;
  --text-bright: #1A1208;
  --text-muted: #6B5C4E;
  --text-subtle: #8A7B6B; /* yalnız büyük/dekoratif metin */
  /* marka + durum */
  --brand: #C2410C;
  --brand-pressed: #9A3409;
  --amber: #F59E0B;   /* yalnız vurgu — metin rengi DEĞİL */
  --success: #0F6E56;
  --info: #7A4A2B;
  --danger: #E63946;
  /* eski adlar (geçiş alias'ları) */
  --cream: var(--bg);
  --cream-light: #FFF6EC;
  --brand-dark: var(--brand-pressed);
  --brand-soft: var(--chip);
  --ink: var(--text-bright);
  --ink-2: var(--text);
  --on-dark: var(--on-ink);
  --border-2: var(--border-strong);
  --green: var(--success);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --shadow-card: 0 18px 40px rgba(42, 31, 21, .08);
  --shadow-deep: 0 30px 70px rgba(26, 18, 8, .16);
  --hairline: 1px solid var(--border-strong);
  --ease-out: cubic-bezier(.2, .65, .3, 1); /* tek çıkış eğrisi — reveal/hover/perde aynı sesi kullanır */

  /* akışkan tip skalası — başlıklar büyüdü (dergi duruşu) */
  --fs-body: clamp(1rem, .93rem + .3vw, 1.125rem);
  --fs-small: clamp(.85rem, .82rem + .1vw, .9375rem);
  --fs-h1: clamp(2.8rem, 1.4rem + 6.4vw, 6.2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --fs-kicker: clamp(.72rem, .7rem + .1vw, .8rem);

  --space: clamp(4.5rem, 3rem + 6vw, 9rem);
  --wrap: 1200px;
  /* tanecik dokusu — 1 tile inline SVG (CSP: img-src data: serbest) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- fontlar (self-host; CDN yasak — K3) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces yüklenene dek metrik-uyumlu yerel fallback */
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/hanken-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/hanken-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken-fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 99%;
  ascent-override: 103%;
  descent-override: 27%;
}

/* ---------- temel ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: var(--border-strong) var(--bg); } /* kaydırma çubuğu da paletten */
/* reveal bekleme konumları (translateX ±26px) ve eğik plakalar yana kaydırma doğurmasın;
   clip scroll-container oluşturmaz (hidden'ın sticky yan etkisi yok) */
html, body { overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--ink-2);
  font-family: 'Hanken Grotesk', 'Hanken-fallback', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Fraunces-fallback', Georgia, serif;
  font-optical-sizing: auto;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 480;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
/* italik editoryal aksan — başlık içi <em> */
h1 em, h2 em, .em-ed {
  font-style: italic;
  font-weight: 380;
  letter-spacing: -.01em;
  color: var(--brand);
}
p { max-width: 70ch; }
a { color: inherit; }
img, svg, picture, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }
::selection { background: var(--brand-soft); }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* kicker + folio — dergi üst etiketleri */
.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brand);
}
.kicker::before { content: ''; width: 2.4em; height: 1px; background: var(--brand); }
.folio {
  display: flex; align-items: baseline; gap: .9em;
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-muted);
}
.folio .no { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--brand); font-size: 1.05rem; }
.folio::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); align-self: center; }

.lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--text-muted); line-height: 1.55; }

/* ---------- butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 650 1rem/1 'Hanken Grotesk', sans-serif;
  padding: .95em 1.7em; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s var(--ease-out);
}
.btn:active { transform: scale(.97); } /* basış geri bildirimi — arayüz duyduğunu belli eder */
.btn-primary { background: var(--brand); color: var(--cream-light); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--border-2); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { background: var(--brand-soft); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.logo {
  font-family: 'Fraunces', serif; font-weight: 640; font-size: 1.55rem;
  letter-spacing: -.03em; color: var(--ink); text-decoration: none;
}
.logo .dot { color: var(--brand); }
.main-nav a { text-decoration: none; color: var(--ink-2); }
.main-nav a:hover { color: var(--brand); }
.main-nav a.btn-primary, .main-nav a.btn-primary:hover { color: var(--cream-light); } /* nav CTA: .main-nav a kuralı krem metni ezmesin (AA) */
.nav-toggle {
  display: flex; align-items: center; justify-content: center; margin-left: auto;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.2rem;
}
.main-nav {
  display: none; position: absolute; top: 68px; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--cream); border-bottom: 1px solid var(--border-2);
  padding: .5rem 1.2rem 1.2rem;
}
.main-nav.open { display: flex; }
.main-nav a { padding: .9rem .2rem; border-bottom: 1px solid var(--border); font-size: 1.05rem; font-weight: 500; }
.main-nav .btn { margin-top: .9rem; border-bottom: none; text-align: center; justify-content: center; }
@media (min-width: 861px) {
  .nav-toggle { display: none; }
  .main-nav {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: 1.6rem; margin-left: auto; background: none; border: 0; padding: 0;
  }
  .main-nav a { padding: 0; border: 0; font-size: .95rem; }
  .main-nav .btn { padding: .7em 1.3em; font-size: .9rem; margin-top: 0; }
}

/* ---------- hero (dergi kapağı) ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--space) * .85) 0 calc(var(--space) * .75);
  display: flex; align-items: center; min-height: min(90vh, 900px);
}
.hero > .wrap { width: 100%; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(at 74% 8%, rgba(245, 158, 11, .14) 0, rgba(245, 158, 11, 0) 52%),
    radial-gradient(at 88% 30%, #F8DFC6 0, rgba(248, 223, 198, 0) 46%),
    radial-gradient(at 4% 16%, #FCEFE0 0, rgba(252, 239, 224, 0) 44%),
    linear-gradient(180deg, #FFF6EC, var(--cream));
}
.hero::after { /* tanecik + ince çerçeve: kapak hissi */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  pointer-events: none;
}
.hero-frame {
  position: absolute; inset: clamp(.6rem, 1.6vw, 1.4rem); z-index: 0;
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  border-radius: 4px; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 861px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero .folio { margin-bottom: 1.4rem; max-width: 34rem; }
.hero h1 { margin: .35em 0 .4em; }
.hero .lede { max-width: 32em; }
/* kelime vurgusu — amber altçizgi süpürmesi */
.hl { font-style: normal; position: relative; white-space: nowrap; }
.hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
  background: var(--amber); opacity: .55; z-index: -1; border-radius: 2px;
  transform-origin: left; animation: hl-sweep .9s var(--ease-out) .35s backwards;
}
@keyframes hl-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-trust {
  display: flex; align-items: baseline; gap: .55em;
  margin-top: 1.1rem; font-size: .85rem; color: var(--text-muted); max-width: 46ch;
}
.hero-trust::before { content: ''; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--success); transform: translateY(-.05em); }

/* hero sağ — telefon plakası (masaüstü; mobil ilk yükte LCP koru) */
.hero-stage { display: none; }
@media (min-width: 861px) {
  .hero-stage { display: block; position: relative; justify-self: center; }
}
.phone {
  width: min(292px, 68vw);
  background: var(--ink-bg); border-radius: 44px; padding: 10px;
  box-shadow: var(--shadow-deep); position: relative;
  transform: rotate(1.8deg);
}
.phone-screen { position: relative; width: 100%; background: var(--bg); border-radius: 35px; overflow: hidden; aspect-ratio: 9 / 16.2; }
.phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 21px; background: var(--ink-bg); border-radius: 999px; z-index: 5; }
.phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* reel üst/alt uygulama katmanı */
.reel-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 2.4rem .9rem .9rem;
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(rgba(26, 18, 8, .55), rgba(26, 18, 8, 0));
  color: #fff; font: 650 .74rem/1.2 'Hanken Grotesk', sans-serif;
}
.reel-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--amber), var(--brand));
  color: #fff; font-size: .68rem; font-weight: 800;
}
.reel-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 1.6rem .9rem .95rem;
  background: linear-gradient(rgba(26, 18, 8, 0), rgba(26, 18, 8, .6));
  display: flex; flex-direction: column; gap: .45rem;
}
.reel-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45em;
  background: rgba(255, 250, 245, .94); color: var(--ink);
  font: 700 .62rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em;
  padding: .55em .8em; border-radius: 999px;
}
.reel-tag::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--brand); }
.reel-cap { color: rgba(255, 250, 245, .92); font-size: .72rem; line-height: 1.35; }
/* yüzen ürün kartı — uygulamadaki etiket kartının aynısı */
.float-card {
  position: absolute; right: -3.4rem; bottom: 2.2rem; z-index: 6;
  width: 200px; background: var(--surface); border: var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: .7rem; transform: rotate(-2deg);
}
.float-card .fc-ph { border-radius: 9px; overflow: hidden; margin-bottom: .55rem; }
.float-card .t { font: 650 .78rem/1.3 'Hanken Grotesk', sans-serif; color: var(--ink); }
.float-card .p { font-family: 'Fraunces', serif; font-size: 1.02rem; font-weight: 560; color: var(--brand); margin-top: .1rem; }
.float-card .s { display: flex; gap: .3rem; margin-top: .5rem; }
.float-card .s i { font-style: normal; font: 600 .62rem/1 'Hanken Grotesk', sans-serif; border: 1px solid var(--border-strong); border-radius: 6px; padding: .4em .55em; color: var(--text-muted); }
.float-card .s i.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* plaka altı künye satırı */
.plate-cap {
  display: flex; align-items: baseline; gap: .7em; margin-top: .9rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.plate-cap::before { content: ''; width: 2em; height: 1px; background: var(--border-strong); align-self: center; }

/* mağaza rozetleri — resmî Apple/Google artwork (WEB-6B); launch öncesi tıklanmaz (K2).
   Rozet kuralları: min 40px yükseklik, oran sabit (width:auto), çevresinde boşluk payı. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.badge-wrap { display: inline-flex; }
.badge-wrap img { display: block; height: 46px; width: auto; }
.soon-tag {
  font: 700 .68rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); border: 1px dashed var(--border-2); border-radius: var(--radius-pill);
  padding: .65em 1em; background: var(--surface); cursor: default; user-select: none;
}

/* ---------- bekleme listesi formu (K2 — DOKUNULMAZ İŞLEV) ---------- */
.waitlist { margin-top: 2rem; max-width: 480px; }
.waitlist-row { display: flex; flex-direction: column; gap: .6rem; }
.waitlist-row .btn { width: 100%; }
@media (min-width: 481px) { .waitlist-row { flex-direction: row; } .waitlist-row .btn { width: auto; } }
.waitlist input[type=email] {
  flex: 1; min-width: 0;
  font: 500 1rem 'Hanken Grotesk', sans-serif; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: var(--radius-pill); padding: .9em 1.3em;
}
.waitlist input[type=email]::placeholder { color: var(--text-muted); }
.waitlist input[type=email]:focus { border-color: var(--brand); outline: none; }
.waitlist .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.waitlist .btn[disabled] { opacity: .65; cursor: progress; } /* gönderim sürerken buton meşgul görünür */
.waitlist-note { font-size: .8rem; color: var(--text-muted); margin-top: .6rem; }
.waitlist-note a { color: var(--text-muted); }
.waitlist-ok { font-weight: 650; color: var(--green); padding: .6em 0; }
.waitlist-err { font-size: .9rem; color: var(--brand-dark); font-weight: 650; margin-top: .5rem; }

/* ---------- kayan sözlük şeridi (marquee) ---------- */
.tape { overflow: hidden; border-block: var(--hairline); background: var(--bg-deep); padding: .85rem 0; }
.tape-track { display: flex; gap: 3.2rem; width: max-content; animation: tape-run 34s linear infinite; }
.tape span {
  display: inline-flex; align-items: center; gap: 3.2rem; white-space: nowrap;
  font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic;
  font-size: 1.02rem; color: var(--text); letter-spacing: .04em;
}
.tape b { font: 700 .72rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--brand); }
@keyframes tape-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- bölümler + bant ritmi ---------- */
.section { padding: calc(var(--space) * .85) 0; }
.section-head { max-width: 760px; margin-bottom: 2.8rem; }
.section-head .folio { margin-bottom: 1.1rem; }
.section-head h2 { margin: .35em 0 .35em; }
.section-alt, .band-alt { background: var(--surface-alt); border-block: 1px solid var(--border); }
.band-deep { background: var(--bg-deep); border-block: 1px solid var(--border-strong); position: relative; }
.band-deep::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; }
.band-deep > .wrap { position: relative; }
/* espresso (koyu) bant */
.band-ink { background: linear-gradient(175deg, var(--ink-bg-2), var(--ink-bg)); color: var(--on-ink); position: relative; }
.band-ink::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .8; pointer-events: none; }
.band-ink > .wrap { position: relative; }
.band-ink h2, .band-ink h3 { color: var(--on-ink-bright); }
.band-ink h2 em { color: var(--amber); }
.band-ink .lede, .band-ink p { color: var(--on-ink); }
.band-ink .folio { color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.band-ink .folio .no { color: var(--amber); }
.band-ink .folio::after { background: var(--on-ink-border); }
.band-ink .kicker { color: var(--amber); }
.band-ink .kicker::before { background: var(--amber); }
/* asimetrik başlık yerleşimleri */
.section-head--right { margin-left: auto; text-align: right; }
.section-head--right .kicker { flex-direction: row-reverse; }
.section-head--right .folio { flex-direction: row-reverse; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--center .folio { justify-content: center; }
.section-head--center .folio::after { display: none; }
.u-amber { background: linear-gradient(transparent 78%, var(--amber) 78% 94%, transparent 94%); }

/* ---------- plaka: çerçeveli editoryal fotoğraf ---------- */
.plate { position: relative; }
.plate img { width: 100%; height: auto; display: block; }
.plate .ph {
  position: relative; overflow: hidden; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  box-shadow: var(--shadow-card);
}
.plate .ph::after { /* paspartu içi hairline */
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255, 250, 245, .5);
  border-radius: 3px; pointer-events: none;
}
.plate--tilt-l .ph { transform: rotate(-1.4deg); }
.plate--tilt-r .ph { transform: rotate(1.3deg); }

/* ---------- editoryal ikili (manifesto + plaka) ---------- */
.ed-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
@media (min-width: 861px) {
  .ed-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ed-split > .plate { order: -1; }
  .ed-split--rev > .plate { order: 2; }
}
.ed-copy .lede { margin-top: 1rem; }
.ed-copy .btn { margin-top: 1.8rem; }
.drop-line { /* büyük italik alıntı satırı — WEB-7: renkli kenar çubuğu yerine asılı tırnak */
  position: relative;
  font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 380;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.3; color: var(--text);
  margin: 1.9rem 0 1.6rem;
  max-width: 30ch;
}
.drop-line::before {
  content: '\201C'; position: absolute; top: -.38em; left: -.06em;
  font-size: 2.1em; line-height: 1; color: var(--brand); opacity: .9;
}
.drop-line { padding-top: .55em; }

/* ---------- dergi indeksi (bento) — WEB-6B: belirgin tıklanabilir kartlar ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 3rem; }
.bento-card {
  position: relative; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 1.35rem 1.35rem 1.2rem;
  text-decoration: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 1rem;
  box-shadow: 0 6px 18px rgba(42, 31, 21, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bento-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand); }
@media (hover: hover) and (pointer: fine) { /* dokunmatikte sahte hover kalkışı olmasın */
  .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand); }
  .bento-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); }
}
.bento-num {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 1rem;
  color: var(--brand);
}
.bento-card h3 { font-weight: 520; font-size: clamp(1.25rem, 1.1rem + .9vw, 1.8rem); }
.bento-card p { grid-column: 2; color: var(--text-muted); font-size: .95rem; line-height: 1.55; max-width: 52ch; margin-top: .3rem; }
.bento-card .go {
  grid-row: 1; grid-column: 3; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); white-space: nowrap;
}
/* içerikteki "→" yeterli; ::after ile ikinci ok basılmaz (WEB-6C) */
.bento-card .more { grid-column: 2; margin-top: .95rem; }
@media (max-width: 640px) { /* dar ekranda hedef etiketi başlığı ezmesin: kendi satırına insin */
  .bento-card { grid-template-columns: auto minmax(0, 1fr); }
  .bento-card .go { grid-row: auto; grid-column: 2; justify-self: start; margin-top: .3rem; }
}
@media (min-width: 861px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- uygulama feed kartı (app-sadık) ---------- */
.fcard {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.fc-head { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; }
.fc-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg-deep), var(--amber));
  color: var(--text-bright); font: 800 .72rem/1 'Hanken Grotesk', sans-serif;
}
.fc-user { font: 650 .82rem/1.2 'Hanken Grotesk', sans-serif; color: var(--text); }
.fc-sub { font-size: .72rem; color: var(--text-muted); display: block; font-weight: 400; }
.fc-photo { position: relative; }
.fc-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.fc-badge {
  position: absolute; left: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .45em;
  background: rgba(255, 250, 245, .95); color: var(--ink);
  font: 700 .64rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .06em;
  padding: .55em .85em; border-radius: 999px; box-shadow: 0 4px 14px rgba(26, 18, 8, .18);
}
.fc-badge::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--brand); }
.fc-meta { padding: .65rem .8rem .85rem; }
.fc-likes { font: 700 .78rem/1.3 'Hanken Grotesk', sans-serif; color: var(--text-bright); }
.fc-cap { font-size: .8rem; color: var(--text-muted); line-height: 1.45; margin-top: .15rem; }
.fc-cap b { color: var(--text); font-weight: 650; }

/* topluluk akışı: feed kartları + anlatı */
.story-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.story-card { position: relative; }
.story-card > .fcard { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .story-card:hover > .fcard { transform: translateY(-4px); }
}
.story-note { padding: 1rem .35rem 0; }
.story-note .story-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; color: var(--brand); margin-right: .5em; }
.story-note h3 { display: inline; font-size: 1.06rem; font-weight: 560; }
.story-note p { font-size: .9rem; color: var(--text-muted); margin-top: .35rem; }
@media (min-width: 641px) { .story-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) {
  .story-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-card:nth-child(even) { transform: translateY(1.6rem); }
}

/* mini demo satırları (DM / yorum) — kart altı */
.story-demo { margin-top: .8rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; font-size: .82rem; }
.demo-row { display: flex; align-items: center; gap: .55rem; }
.demo-row + .demo-row { margin-top: .55rem; }
.demo-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg-deep), var(--border-strong));
  color: var(--text-bright); font: 800 .72rem/1 'Hanken Grotesk', sans-serif;
}
.demo-name { font-weight: 650; color: var(--text); }
.demo-sub { color: var(--text-muted); font-size: .76rem; }
.demo-btn { margin-left: auto; background: var(--brand); color: var(--cream-light); font: 650 .72rem/1 'Hanken Grotesk', sans-serif; padding: .5em .9em; border-radius: 999px; }
.demo-bubble { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px 14px 14px 14px; padding: .55rem .75rem; color: var(--text); }
.demo-bubble .demo-sub { display: block; margin-top: .2rem; }
.demo-stars { color: var(--info); letter-spacing: .12em; font-size: .95rem; }
.demo-wrap { flex-wrap: wrap; gap: .45rem; }
.story-demo .chip-tag { font-size: .72rem; }

/* ---------- ürün kartı mock'u (uygulamadaki ürün sayfası) ---------- */
.pcard {
  background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-deep); max-width: 380px;
}
.pcard .pc-photo { position: relative; }
.pcard .pc-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pc-body { padding: 1.1rem 1.15rem 1.25rem; }
.pc-shop { display: flex; align-items: center; gap: .5rem; font: 650 .78rem/1 'Hanken Grotesk', sans-serif; color: var(--text-muted); }
.pc-shop .fc-ava { width: 24px; height: 24px; font-size: .6rem; }
.pc-title { font-family: 'Fraunces', serif; font-weight: 520; font-size: 1.25rem; color: var(--ink); margin-top: .5rem; }
.pc-price { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.35rem; font-weight: 500; color: var(--brand); margin-top: .2rem; }
.pc-row { display: flex; align-items: center; gap: .4rem; margin-top: .85rem; flex-wrap: wrap; }
.pc-lab { flex-basis: 100%; font: 700 .64rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .1rem; }
.pc-size { font: 600 .78rem/1 'Hanken Grotesk', sans-serif; border: 1px solid var(--border-strong); border-radius: 8px; padding: .55em .8em; color: var(--text); }
.pc-size.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pc-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); outline: 1px solid var(--border-strong); }
.pc-dot.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.pc-cta { display: flex; align-items: center; justify-content: center; margin-top: 1.1rem; background: var(--brand); color: var(--cream-light); border-radius: 12px; padding: .85em 1em; font: 700 .92rem/1 'Hanken Grotesk', sans-serif; }
.pc-ship { display: flex; align-items: center; gap: .45em; margin-top: .7rem; font-size: .74rem; color: var(--text-muted); }
.pc-ship::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--success); }

/* ---------- üç adım + stat bandı ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 781px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } .steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding-top: 1rem; border-top: var(--hairline); }
.step-num {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 2.6rem; font-weight: 340;
  color: var(--brand); line-height: 1;
}
.step h3 { margin: .5rem 0 .4rem; font-weight: 560; }
.step p { color: var(--text-muted); font-size: .97rem; }

.stat-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin-top: 3rem; }
.stat { border-top: 2px solid var(--ink); padding-top: .9rem; }
.stat-num { display: block; font-family: 'Fraunces', 'Fraunces-fallback', serif; font-weight: 400; font-size: clamp(2.6rem, 2rem + 2.8vw, 4.4rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat-num em { font-style: italic; color: var(--brand); }
.stat-lab { display: block; margin-top: .4rem; font-size: .9rem; color: var(--text-muted); max-width: 20ch; }
@media (min-width: 781px) { .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band-ink .stat { border-top-color: var(--on-ink-border); }
.band-ink .stat-num { color: var(--on-ink-bright); }
.band-ink .stat-lab { color: var(--on-ink); }

/* ---------- satıcı vitrini (espresso bant içinde) ---------- */
.seller-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 861px) { .seller-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .seller-grid > .seller-copy { order: 2; } }
.commission-line { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 1.4rem; font-weight: 650; color: var(--on-ink-bright); flex-wrap: wrap; }
.seller-stage { position: relative; max-width: 430px; margin-inline: auto; }
.seller-stage .plate .ph { box-shadow: var(--shadow-deep); }
.panel-mini {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-deep);
}
.seller-stage .panel-mini { position: absolute; }
.seller-stage .pm-rev { right: -1rem; top: -1.4rem; width: min(220px, 60%); transform: rotate(1.6deg); }
.seller-stage .pm-ord { left: -1.2rem; bottom: -1.6rem; width: min(250px, 72%); transform: rotate(-1.4deg); }
@media (max-width: 640px) { /* dar ekranda taşan panel ofsetleri sıfırlanır (390px yatay kaydırma fix) */
  .seller-stage .pm-rev { right: 0; }
  .seller-stage .pm-ord { left: 0; }
}
.panel-mini .k { font: 700 .68rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.panel-amount { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-size: 1.9rem; font-weight: 480; color: var(--text-bright); margin-top: .3rem; }
.panel-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: .7rem; }
.panel-bars i { flex: 1; background: var(--bg-deep); border-radius: 3px 3px 0 0; }
.panel-bars .b1 { height: 40%; } .panel-bars .b2 { height: 62%; } .panel-bars .b3 { height: 48%; }
.panel-bars .b4 { height: 78%; background: var(--brand); } .panel-bars .b5 { height: 58%; }
.panel-bars .b6 { height: 92%; background: var(--amber); } .panel-bars .b7 { height: 70%; }
.order-row { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text); }
.order-row + .order-row { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.order-row .no { font-weight: 700; color: var(--text-muted); font-size: .72rem; }
.order-row .badge { margin-left: auto; }

/* rozet/çip katmanı */
.badge { display: inline-flex; align-items: center; gap: .4em; font: 650 .78rem/1 'Hanken Grotesk', sans-serif; padding: .45em .85em; border-radius: var(--radius-pill); }
.badge-emerald { background: var(--success); color: #fff; }
.badge-amber { background: var(--amber); color: var(--text-bright); }
.badge-info { background: var(--info); color: #fff; }
.chip-tag {
  display: inline-flex; align-items: center; gap: .4em;
  font: 650 .78rem/1 'Hanken Grotesk', sans-serif; padding: .45em .85em;
  background: var(--chip); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); color: var(--text);
}
.band-ink .chip-tag { background: transparent; color: var(--on-ink); border-color: var(--on-ink-border); }

/* ---------- editoryal film şeridi ---------- */
.strip { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; margin-top: 3rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; }
.strip > * { flex: 0 0 min(250px, 62vw); min-width: 0; }
@media (min-width: 781px) {
  .strip { overflow-x: visible; padding-bottom: 0; justify-content: center; }
  .strip > *:nth-child(2) { transform: translateY(2.4rem); }
  .strip > *:nth-child(3) { transform: translateY(.8rem); }
}

/* ---------- yolculuk çizgisi ---------- */
.journey { position: relative; display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 4.5rem); padding-left: 2.1rem; }
.journey::before { content: ''; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--border-strong); }
.jstep { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 3rem; align-items: center; }
.jdot {
  position: absolute; left: -2.1rem; top: .35rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-strong);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.jstep.active .jdot { background: var(--brand); border-color: var(--brand); transform: scale(1.18); }
.jstep.active .jnum { color: var(--brand); }
.jnum { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-size: 1.05rem; font-weight: 400; color: var(--text-subtle); letter-spacing: .04em; transition: color .25s ease; }
.jstep h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem); margin: .25rem 0 .35rem; font-weight: 500; }
.jstep > .jbody > p { color: var(--text); }
.jstep .fine { color: var(--text-muted); font-size: .93rem; margin-top: .5rem; }
.jmedia { width: min(250px, 62vw); justify-self: center; }
.jchips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
@media (min-width: 781px) {
  .journey { padding-left: 2.6rem; }
  .jstep { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .jstep:nth-child(even) .jmedia { transform: translateY(.8rem); }
}

/* ---------- kartlar / not kutusu ---------- */
.note-box {
  background: var(--brand-soft); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  font-size: .97rem; color: var(--ink-2); max-width: 70ch;
}
.note-box strong { color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; }
.card {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); padding: 1.6rem 1.5rem;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
}
.card p a { white-space: nowrap; } /* "Basın kiti →" gibi kısa linklerde ok yalnız satıra düşmesin */
.card h2, .card h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 560; margin-bottom: .45rem; }
.card p, .card li { color: var(--text-muted); font-size: .95rem; }
.card ul { margin-top: .5rem; }

/* ---------- SSS ---------- */
.faq-section { margin-bottom: 2.8rem; }
.faq-section h2 { font-size: clamp(1.3rem, 1.2rem + .7vw, 1.7rem); margin-bottom: 1rem; }
.faq-item { border-bottom: 1px solid var(--border-2); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  font-weight: 650; color: var(--ink); font-size: 1.02rem;
  padding: 1.05rem 2.2rem 1.05rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 400; color: var(--brand);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-a { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 70ch; }
.faq-item[open] .faq-a { animation: faq-in .25s var(--ease-out); } /* cevap ışınlanmasın, yumuşak insin */
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
.faq-item .faq-a p + p { margin-top: .6em; }
.faq-item .faq-a a { color: var(--brand); }

.support-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.support-box {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.support-box .k { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.support-box a { display: block; font-weight: 650; color: var(--brand); font-size: 1.05rem; margin-top: .35rem; text-decoration: none; word-break: break-all; }
.support-box a:hover { text-decoration: underline; }

/* ---------- özellik indeksi ---------- */
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 781px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-col {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.4rem;
}
.fx-col > h3 { font-size: .8rem; font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; }
.ticks { list-style: none; padding: 0; columns: 1; }
.ticks li { position: relative; padding: .28rem 0 .28rem 1.5rem; font-size: .9rem; color: var(--text); break-inside: avoid; }
/* WEB-7: glif yerine çizilmiş tik (tek tutarlı kontur) */
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .42rem; width: .85em; height: .85em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 3.5' fill='none' stroke='%230F6E56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 561px) { .ticks { columns: 2; column-gap: 1.6rem; } }

/* ---------- kapanış CTA ---------- */
.closing { text-align: center; padding: var(--space) 0; position: relative; overflow: hidden; }
.closing::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(at 50% 120%, rgba(245, 158, 11, .16) 0, rgba(245, 158, 11, 0) 60%),
    var(--bg-deep);
}
.closing h2 { font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.2rem); }
.closing .waitlist { margin: 2rem auto 0; }
.closing .waitlist-row { justify-content: center; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink-bg); color: var(--on-dark); margin-top: 0; position: relative; }
.site-foot::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .7; pointer-events: none; }
.site-foot .wrap { position: relative; padding-top: 4rem; padding-bottom: 2.5rem; }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem; }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; }
  .foot-brand { grid-column: auto; }
}
.foot-brand .logo { color: var(--cream); font-size: 1.8rem; }
.foot-brand p { font-size: .9rem; margin-top: .8rem; max-width: 26ch; }
.foot-col .k {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-light); margin-bottom: .9rem;
}
.foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.foot-col a { color: var(--on-dark); text-decoration: none; font-size: .92rem; }
.foot-col a:hover { color: var(--cream); text-decoration: underline; }
.foot-bottom {
  border-top: 1px solid var(--on-ink-border); margin-top: 3rem; padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: var(--on-dark);
}

/* ---------- giriş animasyonları ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].in-view { opacity: 1; transform: none; }
/* clip varyantı: gözlemlenen kutu kırpılmaz (Chrome IO, öğenin kendi clip-path'ine
   saygı duyar ve hiç kesişmez sayar) — perde efekti içteki .ph üzerinde koşar */
[data-reveal="clip"] { transform: none; }
[data-reveal="clip"] .ph { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal="clip"].in-view .ph { clip-path: inset(0 0 0% 0); }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
/* paralaks — JS translateY uygular */
[data-parallax] { will-change: transform; }

/* JS kapalıysa içerik gizli kalmasın */
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
.no-js [data-reveal="clip"] .ph { clip-path: none; }

/* ---------- alt sayfa hero ---------- */
.page-hero { padding: calc(var(--space) * .7) 0 calc(var(--space) * .45); position: relative; }
.page-hero .folio { margin-bottom: 1.2rem; }
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); margin: .35em 0 .35em; }
.page-hero .lede { max-width: 40em; }
.page-hero--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 861px) { .page-hero--split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.page-hero--split .plate { max-width: 340px; justify-self: center; }

/* ---------- 404 / go ---------- */
.err-wrap { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: var(--space) 0; }
.err-code { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(5rem, 14vw, 9rem); font-weight: 340; color: var(--brand); line-height: 1; }
.err-wrap .block + .block { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--border-2); }

/* basın — renk örnekleri */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.swatch { border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.swatch .chip { height: 74px; }
.swatch .meta { padding: .6rem .8rem; font-size: .85rem; }
.swatch .meta code { color: var(--text-muted); font-size: .8rem; }
.chip-brand { background: #C2410C; } .chip-brand-dark { background: #9A3409; }
.chip-brand-soft { background: #F4E5D6; } .chip-cream { background: #FFFAF5; }
.chip-cream-light { background: #FFF6EC; } .chip-ink { background: #1A1208; }
.chip-ink-2 { background: #2A1F15; }

/* yardımcılar */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.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;
}
/* reveal kademelendirme (CSP: inline style yok) */
.d1 { --d: .07s; } .d2 { --d: .14s; } .d3 { --d: .21s; }
.d4 { --d: .28s; } .d5 { --d: .35s; } .d6 { --d: .42s; }

/* ---------- hareket azaltma: her animasyon kapanır ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl::after { animation: none; }
  .tape-track { animation: none; flex-wrap: wrap; width: auto; }
  .tape-track span:nth-child(2) { display: none; } /* klon şerit tekrar görünmesin */
  [data-reveal], [data-reveal="clip"], [data-reveal="clip"] .ph { opacity: 1; transform: none; clip-path: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .bento-card, .btn, .card, .story-card > .fcard, .jdot, .jnum, .panel-mini { transition: none; }
  .story-card:hover > .fcard, .card:hover { transform: none; }
  .faq-item[open] .faq-a { animation: none; }
  .btn:active { transform: none; }
  .story-flow .story-card:nth-child(even) { transform: none; }
}

/* ============================================================
   WEB-6B — geri dönüş, sırada-ne-var, rozet etiketi, örnek-içerik,
   çerez sayfası ve hukuk giydirme stilleri
   ============================================================ */

/* alt sayfa geri dönüşü */
.backhome-row { padding-top: 1.4rem; }
.backhome {
  display: inline-flex; align-items: center; gap: .4em;
  font: 650 .9rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .04em;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border-2); border-radius: var(--radius-pill);
  padding: .55em 1.05em; background: var(--surface);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.backhome:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* belirgin "daha fazla bilgi" etiketi (tıklanabilir kartların içinde) */
.more {
  font: 700 .74rem/1 'Hanken Grotesk', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.more::after { content: ' →'; }
a:hover .more, a:focus-visible .more { text-decoration: underline; text-underline-offset: 3px; }

/* sırada ne var? */
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.next-card {
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 1.3rem 1.3rem 1.15rem; text-decoration: none;
  box-shadow: 0 6px 18px rgba(42, 31, 21, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.next-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .next-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand); }
  .next-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); }
}
.next-card h2 { font-size: var(--fs-h3); font-weight: 560; color: var(--text-bright); }
.next-card p { color: var(--text-muted); font-size: .93rem; line-height: 1.5; }
.next-card .more { margin-top: auto; padding-top: .6rem; }
.next-card--cta { background: var(--bg-deep); border-color: var(--border-strong); }
/* AA: kum zeminde --brand 4.19:1 kalır → küçük etikette koyu ton (legal notice emsali) */
.next-card--cta .more { color: var(--brand-pressed); }

/* kart içi bağlantı listeleri de link gibi görünsün (WEB-6B madde 7) */
.card li a { font-weight: 650; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.card li a::after { content: ' →'; }

/* kurgu kart ibaresi */
.sample-note { font-size: .78rem; color: var(--text-muted); font-style: italic; margin-top: .8rem; }

/* çerez sayfası düzyazısı — blok wrap eksenine oturur, satır ölçüsü 72ch kalır */
.prose { max-width: 72ch; }
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 72ch; }
.prose h2 { font-size: clamp(1.3rem, 1.2rem + .7vw, 1.7rem); margin: 2.2rem 0 .7rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose p { color: var(--text); margin: .6rem 0; }
.prose a { color: var(--brand); text-underline-offset: 2px; }
.prose code {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: .1em .4em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .9em;
}

/* ---------- hukuk sayfaları giydirme (METİN-mühür: yalnız iskelet/tipografi) ---------- */
.legal-article { max-width: 76ch; margin: 0 auto; padding: 2rem 1.2rem 5rem; }
.legal-article h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 1.2rem 0 1.6rem;
}
.legal-article h2 { font-size: clamp(1.35rem, 1.2rem + .9vw, 1.9rem); margin: 2.6rem 0 .9rem; }
.legal-article h3 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
.legal-article h4, .legal-article h5, .legal-article h6 { font-size: 1.02rem; margin: 1.4rem 0 .45rem; }
.legal-article p { margin: .85rem 0; color: var(--text); }
.legal-article a { color: var(--brand); text-underline-offset: 2px; }
.legal-article ul, .legal-article ol { padding-left: 1.4rem; margin: .85rem 0; }
.legal-article li { margin: .35rem 0; }
.legal-article li > p { margin: .35rem 0; }
.legal-article strong { color: var(--text-bright); }
.legal-article em { color: var(--text-muted); }
.legal-article hr { border: 0; border-top: 1px solid var(--border-2); margin: 2.4rem 0; }
.legal-article blockquote { border-left: 2px solid var(--brand); padding-left: 1rem; color: var(--text-muted); margin: 1.2rem 0; }
.legal-article code {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: .1em .4em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .9em;
}
.legal-article pre { background: var(--surface-alt); border: 1px solid var(--border); padding: 1rem; border-radius: var(--radius); overflow-x: auto; margin: 1rem 0; }
.legal-article pre code { background: none; border: 0; padding: 0; }
.legal-article table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; display: block; overflow-x: auto; }
.legal-article th, .legal-article td { border: 1px solid var(--border-2); padding: .65em .8em; text-align: left; vertical-align: top; font-size: .92rem; color: var(--text); }
.legal-article th { background: var(--surface-alt); color: var(--text-bright); font-weight: 700; }
.legal-article .notice {
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.3rem; margin: 0 0 2.4rem;
}
/* AA: açık chip zemininde --brand 4.19:1 kalır → koyu ton */
.legal-article .notice a { color: var(--brand-pressed); }
.legal-article .index-list { list-style: none; padding: 0; margin: 0; }
.legal-article .index-list li { border-bottom: 1px solid var(--border); margin: 0; }
.legal-article .index-list li:last-child { border-bottom: none; }
.legal-article .index-list a { display: block; padding: 1.1rem 0; font-weight: 600; font-size: 1.08rem; text-decoration: none; color: var(--text-bright); }
.legal-article .index-list a:hover { color: var(--brand); }

/* ============================================================
   WEB-6D — sinematik hareket dalgası
   Kapı: html.cine = scroll-timeline destekli + reduced-motion istemeyen
   tarayıcı (site.js ekler). cine yoksa/kapalıysa WEB-6C deneyimi birebir
   korunur; içerik her durumda eksiksiz erişilir. Scroll-hijack yok:
   tüm koreografi kaydırma İLERLEMESİNE bağlıdır, hızına dokunulmaz.
   ============================================================ */

/* ---------- İMZA 1 · HERO PINNED GİRİŞ ---------- */
html.cine .hero-pin { height: 230vh; }
html.cine .hero { position: sticky; top: 0; min-height: 100vh; }
@media (max-width: 860px) { html.cine .hero-pin { height: auto; } html.cine .hero { position: static; } }

/* kelime perdesi — varışta bir kez, hızlı (LCP'yi bekletmeyecek gecikmeler) */
html.cine .hero h1 .w { display: inline-block; overflow: clip; vertical-align: bottom; }
html.cine .hero h1 .wi { display: inline-block; transform: translateY(108%); animation: word-up .6s var(--ease-out) both; }
html.cine .hero h1 .w1 .wi { animation-delay: .03s; }
html.cine .hero h1 .w2 .wi { animation-delay: .1s; }
html.cine .hero h1 .w3 .wi { animation-delay: .17s; }
html.cine .hero h1 .w4 .wi { animation-delay: .24s; }
html.cine .hero h1 .w5 .wi { animation-delay: .31s; }
html.cine .hero h1 .w6 .wi { animation-delay: .38s; }
html.cine .hero h1 .w7 .wi { animation-delay: .45s; }
html.cine .hero h1 .w8 .wi, html.cine .hero h1 .w9 .wi { animation-delay: .52s; }
@keyframes word-up { to { transform: translateY(0); } }
/* amber süpürme kelimeler yerleştikten sonra gelsin */
html.cine .hl::after { animation-delay: .75s; }

/* pin koreografisi (masaüstü): telefon 3B eğimden doğrulur, video büyür,
   yüzen kart süzülür, metin sona doğru sahneyi devreder */
/* WEB-7 notu: aşağıdaki .hero-* scroll(root) koreografisi eski hero'ya aitti;
   yeni kabin hero'da GSAP devraldı — seçiciler .hero atasına bağlı kaldığı için ölü. */
@media (min-width: 861px) {
  html.cine .hero .hero-stage { perspective: 1100px; }
  html.cine .hero .hero-stage .phone {
    animation: phone-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 110vh;
  }
  @keyframes phone-in {
    from { transform: rotate(2.6deg) rotateY(-16deg) rotateX(5deg) scale(.93); }
    to { transform: rotate(1.8deg) rotateY(0deg) rotateX(0deg) scale(1); }
  }
  html.cine .hero .phone-video {
    animation: reel-grow linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120vh;
  }
  @keyframes reel-grow { from { transform: scale(1); } to { transform: scale(1.09); } }
  html.cine .hero .float-card {
    animation: fcard-in linear both;
    animation-timeline: scroll(root);
    animation-range: 12vh 80vh;
  }
  @keyframes fcard-in {
    from { transform: rotate(-4deg) translateX(46px); opacity: 0; }
    to { transform: rotate(-2deg) translateX(0); opacity: 1; }
  }
  html.cine .hero .hero-copy {
    animation: hero-copy-out linear both;
    animation-timeline: scroll(root);
    animation-range: 60vh 128vh;
  }
  @keyframes hero-copy-out { to { transform: translateY(-44px); opacity: 0; } }
}

/* ---------- İMZA 2 · KEŞFET·DOKUN·SATIN AL SCROLLYTELLING ---------- */
/* cine dışında telefon yok, düzen eski hâliyle akar */
html:not(.cine) .story-phone { display: none; }

.story-grid { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 861px) { .story-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; } }

html.cine .story-pin { height: 300vh; view-timeline-name: --story; }
html.cine .story-stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: flex; align-items: center;
}
html.cine .story-stage > .wrap { width: 100%; }
html.cine .story-stage .section-head { margin-bottom: 1.6rem; }
html.cine .steps--story { display: flex; flex-direction: column; gap: 1.15rem; }
html.cine .steps--story .step { padding-top: .85rem; }

/* adım vurgusu — opaklıkla DEĞİL renk+kaymayla; bölüm AÇIK kum bandında (band-deep),
   pasif/aktif renkler o zeminde her karede AA kalır */
html.cine .steps--story .step h3 { color: var(--text-muted); }
html.cine .steps--story .step .step-num { color: var(--text-muted); }
html.cine .steps--story .step { animation: step-hi linear both; animation-timeline: --story; }
html.cine .steps--story .step:nth-child(1) { animation-range: contain 0% contain 38%; }
html.cine .steps--story .step:nth-child(2) { animation-range: contain 30% contain 68%; }
html.cine .steps--story .step:nth-child(3) { animation-name: step-hi-last; animation-range: contain 60% contain 100%; }
@keyframes step-hi {
  0% { transform: translateX(0); }
  12%, 82% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
@keyframes step-hi-last {
  0% { transform: translateX(0); }
  12%, 100% { transform: translateX(10px); }
}
/* renk vurgusu ayrı katmanda: başlık parlar, numara amber'e döner */
html.cine .steps--story .step h3 { animation: step-c linear both; animation-timeline: --story; }
html.cine .steps--story .step:nth-child(1) h3 { animation-range: contain 0% contain 38%; }
html.cine .steps--story .step:nth-child(2) h3 { animation-range: contain 30% contain 68%; }
html.cine .steps--story .step:nth-child(3) h3 { animation-name: step-c-last; animation-range: contain 60% contain 100%; }
@keyframes step-c { 0% { color: var(--text-muted); } 12%, 82% { color: var(--text-bright); } 100% { color: var(--text-muted); } }
@keyframes step-c-last { 0% { color: var(--text-muted); } 12%, 100% { color: var(--text-bright); } }
html.cine .steps--story .step .step-num { animation: num-c linear both; animation-timeline: --story; }
html.cine .steps--story .step:nth-child(1) .step-num { animation-range: contain 0% contain 38%; }
html.cine .steps--story .step:nth-child(2) .step-num { animation-range: contain 30% contain 68%; }
html.cine .steps--story .step:nth-child(3) .step-num { animation-name: num-c-last; animation-range: contain 60% contain 100%; }
@keyframes num-c { 0% { color: var(--text-muted); } 12%, 82% { color: var(--brand); } 100% { color: var(--text-muted); } }
@keyframes num-c-last { 0% { color: var(--text-muted); } 12%, 100% { color: var(--brand); } }

/* telefon + sahneler (yalnız cine'de görünür) */
.story-phone { justify-self: center; }
.phone--story { width: min(272px, 30vw); transform: none; }
@media (max-width: 860px) { .phone--story { width: min(212px, 56vw); } }
.phone--story .phone-screen { background: var(--bg); }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 2.2rem .75rem .85rem; }
html.cine .scene { animation-timeline: --story; animation-timing-function: linear; animation-fill-mode: both; }
html.cine .scene-1 { animation-name: scene-first; animation-range: contain 0% contain 38%; }
html.cine .scene-2 { animation-name: scene-mid; animation-range: contain 30% contain 68%; }
html.cine .scene-3 { animation-name: scene-last; animation-range: contain 60% contain 100%; }
@keyframes scene-first {
  0%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes scene-mid {
  0% { opacity: 0; transform: translateY(16px); }
  16%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes scene-last {
  0% { opacity: 0; transform: translateY(16px); }
  22%, 100% { opacity: 1; transform: translateY(0); }
}
/* cine'de sahneler üstüste; varsayılan gizli (yalnız animasyonla görünür) */
html.cine .scene-2, html.cine .scene-3 { opacity: 0; }

/* sahne 1 — akışta gezinme: mini feed yukarı süzülür */
.scn-track { display: flex; flex-direction: column; gap: .55rem; }
html.cine .scn-track { animation: scn-scroll linear both; animation-timeline: --story; animation-range: contain 2% contain 34%; }
@keyframes scn-scroll { from { transform: translateY(1.5rem); } to { transform: translateY(-34%); } }
.scn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex: none; }
.scn-head { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; }
.scn-head .fc-ava { width: 22px; height: 22px; font-size: .58rem; }
.scn-head .fc-user { font: 650 .68rem/1.2 'Hanken Grotesk', sans-serif; color: var(--text); }
.scn-card .fc-photo img { aspect-ratio: 4 / 4.6; }
.scn-card .fc-badge { left: .5rem; bottom: .5rem; font-size: .56rem; padding: .5em .7em; }

/* sahne 2 — etikete dokun, beden seç */
.scn-photo { position: relative; border-radius: 12px; overflow: hidden; flex: none; }
.scn-photo img { aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; display: block; }
.scn-photo .fc-badge { left: .55rem; bottom: .55rem; }
html.cine .scn-tag { animation: tag-pulse linear both; animation-timeline: --story; animation-range: contain 34% contain 46%; }
@keyframes tag-pulse {
  0% { transform: scale(1); }
  55% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(245, 158, 11, .28); }
  100% { transform: scale(1); }
}
.scn-body { padding: .7rem .35rem 0; }
.scn-body .pc-title { font-size: 1.02rem; margin-top: .35rem; }
.scn-body .pc-price { font-size: 1.08rem; margin-top: .1rem; }
.scn-body .pc-row { margin-top: .55rem; gap: .3rem; }
.scn-body .pc-size { font-size: .68rem; padding: .5em .7em; }
.scn-body .pc-cta { margin-top: .7rem; padding: .7em 1em; font-size: .78rem; }
/* beden 38'e "dokunma": seçili hâle geçiş + halka */
html.cine .scn-tap { animation: size-pick linear both; animation-timeline: --story; animation-range: contain 44% contain 56%; }
@keyframes size-pick {
  0% { background: var(--surface); color: var(--text); border-color: var(--border-strong); transform: scale(1); }
  45% { transform: scale(1.16); }
  70%, 100% { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: scale(1); }
}
html.cine .scn-cta { animation: cta-press linear both; animation-timeline: --story; animation-range: contain 56% contain 64%; }
@keyframes cta-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(.96); } }

/* sahne 3 — onay: çember çizilir, tik oturur */
.scn-ok { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; color: var(--success); }
.scn-ok-t { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-weight: 520; font-size: 1.15rem; color: var(--ink); }
.ck-ring { stroke-dasharray: 176; stroke-dashoffset: 0; }
.ck-tick { stroke-dasharray: 34; stroke-dashoffset: 0; }
html.cine .ck-ring { animation: ring-draw linear both; animation-timeline: --story; animation-range: contain 64% contain 84%; }
html.cine .ck-tick { animation: tick-draw linear both; animation-timeline: --story; animation-range: contain 72% contain 88%; }
@keyframes ring-draw { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 0; } }
@keyframes tick-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }

/* scrollytelling mobil: sahne dikey istiflenir, adımlar tek tek görünür */
@media (max-width: 860px) {
  html.cine .story-pin { height: 240vh; }
  .scene { padding: 1.6rem .6rem .7rem; }
  .scn-photo img { aspect-ratio: 4 / 2.9; }
  .scn-body { padding-top: .5rem; }
  .scn-body .pc-title { font-size: .92rem; margin-top: .25rem; }
  .scn-body .pc-price { font-size: .98rem; }
  .scn-body .pc-row { margin-top: .4rem; }
  .scn-body .pc-cta { margin-top: .5rem; padding: .6em 1em; font-size: .72rem; }
  .scn-card .fc-photo img { aspect-ratio: 4 / 4.1; }
  html.cine .story-grid { display: flex; flex-direction: column-reverse; gap: 1.1rem; }
  html.cine .steps--story { position: relative; min-height: 8.2rem; }
  html.cine .steps--story .step { position: absolute; inset: 0; border-top: 0; padding-top: 0; }
  html.cine .steps--story .step { animation-name: step-solo; opacity: 0; }
  html.cine .steps--story .step:nth-child(3) { animation-name: step-solo-last; }
  html.cine .story-stage .section-head h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
}
@keyframes step-solo {
  0% { opacity: 0; transform: translateY(10px); }
  14%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes step-solo-last {
  0% { opacity: 0; transform: translateY(10px); }
  14%, 100% { opacity: 1; transform: translateY(0); }
}

/* ---------- İMZA 3 · DOKU KATMANI ---------- */
/* katmanlı plaka derinliği: kapak içi görsel yavaş süzülür, künye karşı yönde */
html.cine .plate .ph > img {
  scale: 1.12;
  animation: plate-drift linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
@keyframes plate-drift { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
html.cine .plate > .plate-cap {
  animation: cap-drift linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
@keyframes cap-drift { from { transform: translateY(7px); } to { transform: translateY(-7px); } }

/* bant morph güçlendirme: tanecik dokusu bant görünürken belirir */
html.cine .band-ink::before { animation: grain-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
html.cine .band-deep::before { animation: grain-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
@keyframes grain-in { from { opacity: 0; } }

/* ---------- İMZA 4 · VIEW TRANSITIONS (MPA) ---------- */
/* destekleyen tarayıcıda sayfalar arası yumuşak geçiş; header yerinde kalır */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .16s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in .26s var(--ease-out) both; }
  .site-head { view-transition-name: site-head; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   WEB-7 — PROVA KABİNİ dünyası (seed 9874024f; yön sözleşmesi
   surface brief'te — dist'e yol sızdırılmaz)
   Espresso kadife perde + ampul ışığı; Bricolage Grotesque afiş sesi;
   iğneli polaroidler, asılı etiketler, askı rayı; perde sayfa geçişi.
   Alt sayfalar token/tip mirası alır; ana sayfa yapısal olarak yeniden kuruldu.
   ============================================================ */

/* ---------- WEB-7 fontlar ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage-fallback';
  src: local('Arial Black'), local('Arial');
  size-adjust: 96%;
  ascent-override: 94%;
  descent-override: 24%;
}

/* ---------- WEB-7 dünya tokenları ---------- */
:root {
  --night: #160F07;        /* kabin gecesi — perde zemini */
  --night-2: #1F1509;      /* perde kıvrım tonu */
  --bulb: #FFB65C;         /* ampul ışığı */
  --bulb-soft: rgba(255, 182, 92, .16);
  --pin: #B3262E;          /* raptiye kırmızısı (yalnız nokta/ip aksanı) */
  --on-night: #EFE3D2;     /* gece üstü gövde metni (AA) */
  --on-night-bright: #FFF6EC;
  --font-display: 'Bricolage Grotesque', 'Bricolage-fallback', 'Hanken Grotesk', sans-serif;
}

/* ---------- global tip mirası: başlıklar artık Bricolage ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  font-weight: 640;
}
h1 { line-height: .98; }
h1 em, h2 em, h3 em { font-family: 'Fraunces', 'Fraunces-fallback', serif; } /* editoryal aksan resmî yüzde kalır */
.logo { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
/* Fraunces artık aksan yüzü: folio №, fiyatlar, drop-line onda kalır (mevcut kurallar) */

/* ---------- global krom: koyu kadife header (yeni dünya, tüm sayfalar) ---------- */
.site-head {
  background: color-mix(in srgb, var(--night) 88%, transparent);
  border-bottom: 1px solid var(--on-ink-border);
}
.site-head .logo { color: var(--on-night-bright); }
.site-head .main-nav a { color: var(--on-night); }
.site-head .main-nav a.btn-primary { color: var(--cream-light); } /* AA: CTA metni terracotta üstünde krem kalır */
@media (hover: hover) and (pointer: fine) { .site-head .main-nav a:hover { color: var(--bulb); } }
.site-head .nav-toggle { background: transparent; color: var(--on-night-bright); border-color: var(--on-ink-border); }
.main-nav { background: var(--night); border-bottom-color: var(--on-ink-border); }
.main-nav a { border-bottom-color: var(--on-ink-border); }

/* ---------- KABİN HERO (ana sayfa ilk ekran) ---------- */
.cab-hero {
  position: relative; overflow: clip;
  /* gerçek kadife (Pexels 4814070) espresso tonlamayla: dünya malzemesi fotoğrafiktir */
  background:
    radial-gradient(at 72% 20%, var(--bulb-soft) 0, rgba(255, 182, 92, 0) 46%),
    linear-gradient(168deg, rgba(31, 21, 9, .72), rgba(22, 15, 7, .82) 58%),
    url(/assets/photos/velvet-curtain.jpg) center / cover no-repeat var(--night);
  color: var(--on-night);
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--space) * .5) 0 calc(var(--space) * .55);
}
.cab-hero::after { /* tanecik + kadife his */
  content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .9; pointer-events: none;
}
/* kıvrım vinyeti: fotoğrafın üstüne yalnız kenar karartması */
.cab-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38));
}
.cab-hero > .wrap { position: relative; z-index: 1; width: 100%; }
/* üst şerit: KABİN №01 — harf kaskadıyla yazılır */
.cab-strip {
  display: flex; align-items: baseline; gap: .9em;
  font: 650 var(--fs-kicker)/1.4 'Hanken Grotesk', sans-serif;
  letter-spacing: .18em; color: var(--bulb); /* uppercase YOK: "iOS" markası TR locale'de bozulur */
  margin-bottom: clamp(1.1rem, 2.6vh, 2rem);
  white-space: nowrap;
}
.cab-strip .casc { letter-spacing: inherit; }
@media (max-width: 640px) { /* dar ekranda şerit kırpılmaz, sarar */
  .cab-strip { white-space: normal; letter-spacing: .12em; }
  .cab-strip::after { display: none; }
}
.cab-strip .no { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; letter-spacing: .02em; color: var(--bulb); }
.cab-strip::after { content: ''; flex: 1; height: 1px; background: var(--on-ink-border); align-self: center; }
/* afiş başlık: kenardan kenara, iki satır hedefi (TR/EN virgülden kırılır) */
.cab-hero h1 {
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 84%;
  text-transform: uppercase;
  font-size: clamp(2.5rem, .4rem + 6.4vw, 6rem);
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--on-night-bright);
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  text-wrap: balance; /* kenardan kenara: genişlik sınırı yok, ölçüyü uzun satır belirler */
  position: relative; z-index: 2; /* afiş tipi aynanın ÜSTÜNDEN akar, arkasında kırpılmaz */
}
.cab-hero h1 .hl { color: var(--brand); white-space: nowrap; }
.cab-hero h1 .hl::after { display: none; } /* amber süpürme afiş ölçeğinde gürültü olur */
.cab-lede { max-width: 44ch; color: var(--on-night); }
.cab-hero .lede { color: var(--on-night); }
.cab-hero .hero-trust { color: var(--on-night); }
.cab-hero .hero-trust::before { background: var(--bulb); }
/* form ampul halkasında: birincil eylem ışığın altında (sözleşme FIRST VIEWPORT) */
.cab-hero .waitlist { position: relative; }
.cab-hero .waitlist::before {
  content: ''; position: absolute; inset: -22% -12%;
  background: radial-gradient(closest-side, var(--bulb-soft), rgba(255, 182, 92, 0) 74%);
  pointer-events: none;
}
.cab-hero .waitlist > * { position: relative; }
.cab-hero .waitlist input[type=email] {
  background: rgba(255, 250, 245, .06); color: var(--on-night-bright);
  border-color: var(--on-ink-border);
}
.cab-hero .waitlist input[type=email]::placeholder { color: color-mix(in srgb, var(--on-night) 75%, transparent); }
.cab-hero .waitlist input[type=email]:focus { border-color: var(--bulb); }
.cab-hero .waitlist-note, .cab-hero .waitlist-note a { color: var(--on-night); }
.cab-hero .waitlist-ok { color: var(--bulb); }
.cab-hero .soon-tag { background: transparent; color: var(--bulb); border-color: var(--on-ink-border); }
.cab-hero .btn-primary:focus-visible, .cab-hero a:focus-visible, .cab-hero input:focus-visible, .cab-hero button:focus-visible { outline-color: var(--bulb); }
/* hero düzeni: başlık tam genişlik; altında sol lede+form / sağ ayna-telefon */
.cab-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
@media (min-width: 861px) { .cab-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 861px) {
  .cab-mirror { margin-top: -8vh; } /* ayna lede bloğunun omzuna girer — kabin derinliği */
  .cab-mirror .phone { width: min(250px, 24vw); }
}
/* ayna-telefon: ampul halkası + kadife gölge */
.cab-mirror { position: relative; justify-self: center; display: none; }
@media (min-width: 861px) { .cab-mirror { display: block; } }
.cab-mirror::before { /* ampul ışık halkası */
  content: ''; position: absolute; inset: -14% -20%;
  background: radial-gradient(closest-side, var(--bulb-soft), rgba(255, 182, 92, 0) 72%);
  pointer-events: none;
}
.cab-mirror .phone { box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.cab-mirror .plate-cap { color: var(--on-night); }
.cab-mirror .plate-cap::before { background: var(--on-ink-border); }
/* köşe polaroidi */
.cab-pol {
  position: absolute; z-index: 2; left: -3.2rem; bottom: -1.8rem;
  width: 148px; padding: .5rem .5rem 2rem; background: #FFFDF9;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45); transform: rotate(-7deg);
}
.cab-pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cab-pol::after { /* raptiye */
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E77378, var(--pin) 62%, #7C161C);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

/* ---------- POLAROID DUVARI (yatay pinli galeri) ---------- */
.wall {
  background:
    linear-gradient(180deg, rgba(22, 15, 7, .88), rgba(31, 21, 9, .9)),
    url(/assets/photos/velvet-curtain.jpg) center / cover no-repeat var(--night);
  color: var(--on-night); position: relative;
}
.wall::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .8; pointer-events: none; }
.wall-head { padding: calc(var(--space) * .6) 0 0; position: relative; z-index: 1; }
.wall-head .folio { color: var(--on-night); }
.wall-head .folio .no { color: var(--bulb); }
.wall-head .folio::after { background: var(--on-ink-border); }
.wall-head h2 { color: var(--on-night-bright); text-transform: uppercase; font-stretch: 86%; font-weight: 720; font-size: clamp(2rem, 1.2rem + 4.4vw, 5rem); }
.wall-head .lede { color: var(--on-night); }
.wall-head .sample-note { color: color-mix(in srgb, var(--on-night) 82%, transparent); }
.wall-viewport { position: relative; overflow: hidden; }
.wall-track {
  display: flex; gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: clamp(2rem, 5vh, 3.6rem) clamp(1.1rem, 4vw, 2rem) calc(var(--space) * .55);
  width: max-content; align-items: center; /* farklı boydaki polaroidler kolaj gibi ortalanır */
}
html.gs .wall-viewport { min-height: 58vh; display: flex; align-items: center; }
.pol-card {
  position: relative; flex: none; width: min(300px, 74vw);
  background: #FFFDF9; padding: .7rem .7rem 1rem;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
  color: var(--text);
}
.pol-card:nth-child(odd) { transform: rotate(-1.7deg) translateY(.6rem); }
.pol-card:nth-child(even) { transform: rotate(1.4deg); }
.pol-card::after { /* raptiye */
  content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E77378, var(--pin) 62%, #7C161C);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
.pol-card .fc-photo img { aspect-ratio: 4 / 4.4; }
.pol-card .fcard { border: 0; border-radius: 0; box-shadow: none; }
.pol-card .story-note { padding: .8rem .2rem 0; }
.pol-card .story-note p { color: var(--text-muted); }
.pol-plate { padding: .7rem; width: min(240px, 60vw); }
.pol-plate img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pol-plate .plate-cap { margin-top: .7rem; }
/* mobil: doğal yatay kaydırma */
@media (max-width: 860px) {
  .wall-viewport { overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .pol-card, .pol-plate { scroll-snap-align: center; }
}

/* ---------- ASKI RAYI (dergi indeksi → asılı etiketler) ---------- */
.rail-band { background: var(--surface-alt); border-block: 1px solid var(--border); position: relative; }
.rail-head { padding-top: calc(var(--space) * .6); }
.rail-viewport { overflow-x: auto; scrollbar-width: thin; padding-bottom: calc(var(--space) * .5); }
.rail {
  --railline: 3px;
  position: relative; display: flex; gap: clamp(1.4rem, 3vw, 2.8rem);
  width: max-content; padding: 3.2rem clamp(1.1rem, 4vw, 2rem) 0;
}
.rail::before { /* askı borusu */
  content: ''; position: absolute; top: 1.1rem; left: 0; right: 0; height: var(--railline);
  background: linear-gradient(180deg, #B99C74, #8A6B44); border-radius: 999px;
}
.tag-card {
  position: relative; flex: none; width: min(300px, 78vw);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 2rem 1.25rem 1.2rem;
  box-shadow: 0 14px 30px rgba(42, 31, 21, .12);
  text-decoration: none; display: block; color: var(--text);
  transform: rotate(var(--tilt, 0deg));
}
.tag-card:nth-child(odd) { --tilt: -.8deg; }
.tag-card:nth-child(even) { --tilt: .7deg; }
.tag-card::before { /* etiket deliği */
  content: ''; position: absolute; top: .75rem; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-alt); border: 2px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(42, 31, 21, .3);
}
.tag-card::after { /* ip: delikten askıya */
  content: ''; position: absolute; top: -2.1rem; left: 50%; transform: translateX(-50%);
  width: 2px; height: 2.35rem; background: var(--info);
}
.tag-card .bento-num { display: inline-block; margin-bottom: .3rem; }
.tag-card h3 { font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); font-weight: 680; }
.tag-card p { color: var(--text-muted); font-size: .93rem; line-height: 1.5; margin-top: .4rem; max-width: 30ch; }
.tag-card .go { display: inline-block; margin-top: .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.tag-card:focus-visible { transform: rotate(0deg) translateY(-4px); border-color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .tag-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
  .tag-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--brand); }
  .tag-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); }
}

/* ---------- istatistikler: hero-metric iskeleti yerine asılı karton etiketler ---------- */
.stat-band { position: relative; padding-top: 2.2rem; }
.stat-band::before { /* gergin sicim */
  content: ''; position: absolute; top: .55rem; left: 2%; right: 2%; height: 2px;
  background: linear-gradient(180deg, #B99C74, #8A6B44); border-radius: 999px;
}
.stat {
  position: relative; border-top: 0; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 1.9rem 1.1rem 1.1rem;
  box-shadow: 0 12px 26px rgba(42, 31, 21, .12);
  transform: rotate(var(--tilt, -1deg));
}
.stat:nth-child(even) { --tilt: 1.1deg; }
.stat::before { /* etiket deliği */
  content: ''; position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-alt); border: 2px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(42, 31, 21, .3);
}
.stat::after { /* ip: delikten sicime */
  content: ''; position: absolute; top: -1.75rem; left: 50%; transform: translateX(-50%);
  width: 2px; height: 2rem; background: var(--info);
}
.stat-num { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.6rem); }

/* gece bantlarında seçim de ampul ışığında */
.cab-hero ::selection, .wall ::selection, .cab-closing ::selection,
.band-ink ::selection, .tape ::selection { background: var(--bulb); color: var(--night); }

/* ---------- kabin duvarı manifesto (tek büyük fikir) ---------- */
.cab-manifesto .drop-line {
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.2rem);
  max-width: 24ch; border-left-width: 3px;
}

/* ---------- satıcı bandı yeni dünyada ---------- */
.band-ink { background: linear-gradient(172deg, var(--night-2), var(--night)); }
.band-ink .kicker, .band-ink .folio .no { color: var(--bulb); }
.band-ink .kicker::before { background: var(--bulb); }
.band-ink h2 em { color: var(--bulb); }

/* ---------- kapanış: afiş + perde ---------- */
.cab-closing {
  position: relative; overflow: clip; text-align: left;
  background:
    radial-gradient(at 18% 90%, var(--bulb-soft) 0, rgba(255, 182, 92, 0) 52%),
    linear-gradient(188deg, rgba(22, 15, 7, .84), rgba(31, 21, 9, .9)),
    url(/assets/photos/velvet-curtain.jpg) center / cover no-repeat var(--night);
  color: var(--on-night);
  padding: calc(var(--space) * .9) 0;
}
.cab-closing::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .85; pointer-events: none; }
.cab-closing > .wrap { position: relative; z-index: 1; }
.cab-closing h2 {
  font-family: var(--font-display); font-weight: 760; font-stretch: 84%;
  text-transform: uppercase; color: var(--on-night-bright);
  font-size: clamp(2.6rem, 1rem + 8vw, 8rem); line-height: .95; text-wrap: balance;
}
.cab-closing .waitlist { margin-top: 2.2rem; }
.cab-closing .waitlist input[type=email] { background: rgba(255, 250, 245, .06); color: var(--on-night-bright); border-color: var(--on-ink-border); }
.cab-closing .waitlist input[type=email]::placeholder { color: color-mix(in srgb, var(--on-night) 75%, transparent); }
.cab-closing .waitlist input[type=email]:focus { border-color: var(--bulb); }
.cab-closing .waitlist-note, .cab-closing .waitlist-note a { color: var(--on-night); }
.cab-closing .waitlist-ok { color: var(--bulb); }

/* ---------- tape yeni dünyada: gece-krem sınırında ---------- */
.tape { background: var(--night-2); border-block: 1px solid var(--on-ink-border); }
.tape span { color: var(--on-night); }
.tape b { color: var(--bulb); }

/* ---------- kabin kelime perdesi (varışta bir kez; gs kapısı) ---------- */
html.gs .cab-hero h1 .w { display: inline-block; overflow: clip; vertical-align: bottom; }
html.gs .cab-hero h1 .wi { display: inline-block; transform: translateY(112%); animation: word-up .7s var(--ease-out) both; }
html.gs .cab-hero h1 .w1 .wi { animation-delay: .05s; }
html.gs .cab-hero h1 .w2 .wi { animation-delay: .13s; }
html.gs .cab-hero h1 .w3 .wi { animation-delay: .21s; }
html.gs .cab-hero h1 .w4 .wi { animation-delay: .29s; }
html.gs .cab-hero h1 .w5 .wi { animation-delay: .37s; }
html.gs .cab-hero h1 .w6 .wi { animation-delay: .45s; }
html.gs .cab-hero h1 .w7 .wi { animation-delay: .53s; }
html.gs .cab-hero h1 .w8 .wi, html.gs .cab-hero h1 .w9 .wi { animation-delay: .61s; }

/* ---------- kaskad yardımcıları (split-flap aşısı; JS harfleri sarar) ----------
   html.gs = GSAP/Lenis katmanı: reduced-motion istemeyen HER modern tarayıcı
   (cine'den farkı: CSS scroll-timeline şartı yok) */
html.gs .casc .ch { display: inline-block; opacity: 0; transform: translateY(.55em); }
html.gs .casc.casc-in .ch { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--ci) * 28ms); }

/* ---------- perde sayfa geçişi (View Transitions perde çekişi) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-curtain-out .2s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-curtain-in .34s var(--ease-out) both; }
}
@keyframes vt-curtain-out { to { opacity: 0; transform: translateX(-2.5%); } }
@keyframes vt-curtain-in {
  from { clip-path: inset(0 0 0 100%); transform: translateX(2%); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

/* ---------- WEB-7 fallback + reduced-motion: her şey görünür ve akar ----------
   gs yoksa duvar doğal yatay kaydırmadır, kaskad harfleri düz görünür */
html:not(.gs) .wall-viewport { overflow-x: auto; scrollbar-width: thin; }
html:not(.gs) .casc .ch { opacity: 1; transform: none; }

/* ---------- güvenlik ağı: reduced-motion cine'yi zaten engeller (site.js),
   yine de olası bir yarışta her sinematiği kapat ---------- */
@media (prefers-reduced-motion: reduce) {
  html.cine .hero-pin, html.cine .story-pin { height: auto; }
  html.cine .hero, html.cine .story-stage { position: static; height: auto; }
  html.cine .hero h1 .wi, html.cine .phone, html.cine .phone-video, html.cine .float-card,
  html.cine .hero-copy, html.cine .scene, html.cine .scn-track, html.cine .scn-tag,
  html.cine .scn-tap, html.cine .scn-cta, html.cine .ck-ring, html.cine .ck-tick,
  html.cine .steps--story .step, html.cine .steps--story .step h3,
  html.cine .steps--story .step .step-num,
  html.cine .plate .ph > img, html.cine .plate > .plate-cap,
  html.cine .band-ink::before, html.cine .band-deep::before { animation: none; }
  html.cine .hero h1 .wi { transform: none; }
  html.cine .plate .ph > img { scale: none; }
  html.cine .story-phone { display: none; }
}

/* ============================================================
   WEB-8 — AYNA KORİDORU (uygulama vitrini) + damga yolculukları
   Dünya: PROVA KABİNİ v2 devamı. Statik galeri her koşulda eksiksiz;
   .cor-stage yalnız html.cor-on (site.js: gs + masaüstü) altında açılır.
   ============================================================ */

/* ---- koridor herosu: kabin herosunun ikiz-ayna varyantı ---- */
.cor-hero { min-height: auto; padding-top: calc(var(--space) * .3); padding-bottom: calc(var(--space) * .7); }
.cor-hero .cab-strip { margin-bottom: 1rem; }
.cor-hero h1 { margin-bottom: clamp(.8rem, 2vh, 1.3rem); }
/* afiş sözleşme ölçeğinde: iki satır, alt satır terracotta, kenara dayanır (finish-fix 1) */
.cor-hero h1 { font-size: clamp(2.6rem, .2rem + 16.65vw, 15.2rem); line-height: .9; }
.cor-hero h1 .hl { display: block; }
.cor-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
@media (min-width: 861px) { .cor-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.cor-hero-cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; position: relative; }
.cor-hero-cta::before { /* birincil eylem ampul halkasında (FIRST VIEWPORT sözü) */
  content: ''; position: absolute; inset: -55% -10%;
  background: radial-gradient(closest-side, var(--bulb-soft), rgba(255, 182, 92, 0) 74%);
  pointer-events: none;
}
.cor-hero-cta > * { position: relative; }
.cor-skip { color: var(--on-night); font-weight: 650; font-size: .95rem; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .cor-skip:hover { color: var(--bulb); } }
/* ikiz mini aynalar */
.cor-duo { position: relative; display: flex; gap: clamp(.9rem, 2.4vw, 2rem); justify-content: center; align-items: flex-start; }
.cor-mini { margin: 0; position: relative; width: min(200px, 38vw); }
.cor-mini--biz { transform: rotate(1.8deg) translateY(1.6rem); }
.cor-mini:first-child { transform: rotate(-1.8deg); }
.cor-mini::before { /* ampul halesi */
  content: ''; position: absolute; inset: -12% -18%;
  background: radial-gradient(closest-side, var(--bulb-soft), rgba(255, 182, 92, 0) 72%);
  pointer-events: none;
}
.cor-mini figcaption {
  position: relative; margin-top: .7rem; text-align: center;
  font: 700 .72rem/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bulb);
}
/* telefon çerçevesi: espresso gövde (telefon-ayna imzasının küçük boyu) */
.cor-frame {
  position: relative; background: linear-gradient(175deg, var(--ink-bg-2), var(--ink-bg));
  border: 1px solid var(--on-ink-border); border-radius: 30px; padding: 9px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.cor-frame::before { /* çentik */
  content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 14px; background: var(--ink-bg); border-radius: 999px; z-index: 2;
}
.cor-frame img { display: block; width: 100%; height: auto; border-radius: 22px; }
/* asılı "temsilî görsel" etiketi: iki aynanın arasında ipte */
.rep-tag {
  position: absolute; left: 46%; top: 30%; transform: translateX(-50%) rotate(-3deg); z-index: 2;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 1.15rem .8rem .45rem;
  font: 700 .62rem/1.2 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.rep-tag::before { /* etiket deliği */
  content: ''; position: absolute; top: .38rem; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--night);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 0 0 2px var(--border-strong);
}

/* ---- koridor bandı: kadife gece (duvar imzasının koridor hâli) ---- */
.cor-band {
  background:
    linear-gradient(180deg, rgba(22, 15, 7, .9), rgba(31, 21, 9, .88)),
    url(/assets/photos/velvet-curtain.jpg) center / cover no-repeat var(--night);
  color: var(--on-night); position: relative;
  padding: calc(var(--space) * .7) 0 calc(var(--space) * .8);
}
.cor-band::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .8; pointer-events: none; }
.cor-band > * { position: relative; }
.cor-band .folio { color: var(--on-night); }
.cor-band .folio .no { color: var(--bulb); }
.cor-band .folio::after { background: var(--on-ink-border); }
.cor-band h2 { color: var(--on-night-bright); text-transform: uppercase; font-stretch: 86%; font-weight: 720; font-size: clamp(2rem, 1.2rem + 4.4vw, 4.6rem); }
.cor-band .lede { color: var(--on-night); }
.cor-band .sample-note { color: color-mix(in srgb, var(--on-night) 82%, transparent); }

/* statik galeri (mobil + gs'siz + reduced-motion) */
.cor-gallery { display: grid; gap: calc(var(--space) * .5); margin-top: clamp(1.6rem, 4vh, 3rem); }
.cor-wing-title {
  font-family: var(--font-display); font-weight: 680; font-stretch: 88%; text-transform: uppercase;
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.9rem); color: var(--on-night-bright);
  display: flex; align-items: baseline; gap: .7em; margin-bottom: 1.2rem;
}
.cor-wing-title .no { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; font-size: .72em; color: var(--bulb); }
.cor-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 4vw, 2.4rem); }
@media (min-width: 641px) { .cor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .cor-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cor-card { display: flex; flex-direction: column; gap: 1rem; content-visibility: auto; contain-intrinsic-size: auto 640px; }
.cor-card .cor-frame { width: min(228px, 62vw); margin-inline: auto; }
.cor-note { text-align: center; max-width: 30ch; margin-inline: auto; }
.cor-scr { font: 700 .68rem/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .16em; color: var(--bulb); }
.cor-note h4 { font-family: var(--font-display); font-weight: 660; font-size: 1.08rem; color: var(--on-night-bright); margin: .2rem 0 .3rem; }
.cor-note p { font-size: .9rem; line-height: 1.5; color: var(--on-night); }
.cor-rep { margin-top: .45rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--on-night) 70%, transparent); }

/* ayna sahnesi — yalnız html.cor-on (site.js gs+masaüstü kapısı) */
.cor-pin { display: none; }
html.cor-on .cor-gallery { display: none; }
html.cor-on .cor-pin { display: block; }
.cor-stage {
  height: 100svh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
}
.cor-side { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cor-side-lab { font: 700 .72rem/1.4 'Hanken Grotesk', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--bulb); }
.cor-mirror { position: relative; width: min(330px, 24vw); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transform: rotate(-1.6deg); }
.cor-mirror::before {
  content: ''; position: absolute; inset: -13% -19%;
  background: radial-gradient(closest-side, var(--bulb-soft), rgba(255, 182, 92, 0) 72%);
  pointer-events: none; transition: opacity .45s var(--ease-out), background .45s var(--ease-out), inset .45s var(--ease-out);
}
/* yanan ayna ampulün ALTINDADIR: hale ışık gibi davranır (The Bulb Rule) */
.cor-mirror:not(.dim)::before {
  inset: -22% -30%;
  background: radial-gradient(closest-side, rgba(255, 182, 92, .3), rgba(255, 182, 92, 0) 76%);
}
.cor-mirror--biz { transform: rotate(1.6deg); }
.cor-mirror.dim { opacity: .38; transform: rotate(-1.6deg) scale(.95); }
.cor-mirror--biz.dim { transform: rotate(1.6deg) scale(.95); }
.cor-mirror.dim::before { opacity: 0; }
.cor-screen {
  position: relative; background: linear-gradient(175deg, var(--ink-bg-2), var(--ink-bg));
  border: 1px solid var(--on-ink-border); border-radius: 34px; padding: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55); aspect-ratio: 500 / 1042;
}
.cor-screen::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 70px; height: 15px; background: var(--ink-bg); border-radius: 999px; z-index: 2; }
.cor-shot {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: cover; border-radius: 25px; opacity: 0; transition: opacity .4s var(--ease-out);
}
.cor-shot.on { opacity: 1; }
.cor-rail-col { position: relative; display: flex; flex-direction: column; align-items: center; }
.cor-notes { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; min-height: 15rem; }
.cor-stage-note {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.cor-stage-note.on { opacity: 1; transform: none; }
.cor-stage-note h3 { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); color: var(--on-night-bright); margin: .3rem 0 .5rem; }
.cor-stage-note p { max-width: 34ch; font-size: 1rem; line-height: 1.55; color: var(--on-night); }
.cor-count { margin-top: .9rem; font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; font-size: .95rem; line-height: 1; color: var(--bulb); }
.cor-count em { font-size: 1.4em; }
.cor-rep--stage { margin-top: 1.1rem; }

/* ---- damga yolculukları (pasaport disiplini: adımlar kayıt gibi birikir) ---- */
.stamps { list-style: none; margin: clamp(1.8rem, 5vh, 3.2rem) 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 3.5vh, 2.2rem); }
@media (min-width: 861px) { /* pasaport sayfası: damgalar tam sayfaya dağılıp birikir */
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2.4rem, 4vw, 4.5rem); padding-bottom: 3rem; }
  .stamp:nth-child(even) { margin-top: 3rem; }
}
.stamp { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; }
.stamp-seal { /* mürekkep-damga: titrek çift kontur (data-URI SVG; CSP img-src data: serbest) */
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: clamp(104px, 12vw, 136px); aspect-ratio: 4 / 3; padding: .6rem;
  color: var(--brand-pressed);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cpath d='M6.0 6.2 L23.5 5.3 L42.9 6.0 L60.4 7.0 L80.2 5.8 L97.9 6.7 L117.4 4.9 L135.5 5.3 L154.4 5.1 L154.2 19.5 L153.2 31.8 L155.1 47.7 L153.0 59.9 L155.2 72.7 L153.8 87.1 L154.4 99.9 L153.1 115.3 L135.4 113.3 L117.1 113.6 L97.6 114.7 L79.6 113.6 L60.4 115.1 L42.3 115.0 L24.4 113.3 L6.3 113.7 L6.7 100.9 L5.1 86.3 L5.9 72.4 L4.8 59.8 L6.5 46.9 L7.2 32.5 L5.8 19.5 Z' fill='none' stroke='%239A3409' stroke-width='3.4' stroke-linejoin='round' opacity='.92'/%3E%3Cpath d='M12.2 14.0 L30.5 13.4 L46.7 13.0 L63.3 13.4 L79.9 12.2 L97.0 12.0 L114.2 13.8 L130.7 12.1 L147.6 13.8 L146.7 25.4 L148.0 37.5 L146.6 47.9 L146.8 60.7 L147.0 70.8 L147.4 84.2 L146.6 94.8 L147.5 107.4 L129.4 107.3 L113.5 107.1 L97.8 106.3 L78.9 106.1 L62.5 107.9 L46.5 107.9 L30.1 107.1 L13.5 107.4 L13.4 94.5 L12.8 83.1 L13.1 71.2 L13.9 59.6 L13.2 48.8 L13.8 37.4 L12.8 25.1 Z' fill='none' stroke='%239A3409' stroke-width='1.7' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(var(--stamp-tilt, -4deg));
  text-align: center;
}
.stamp:nth-child(even) .stamp-seal { --stamp-tilt: 3.4deg; }
.stamp-seal b { font: 800 .72rem/1.15 'Hanken Grotesk', sans-serif; letter-spacing: .14em; }
.stamp-seal i { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; font-size: .82rem; line-height: 1; }
.band-deep .stamp-seal { color: var(--info); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cpath d='M6.0 6.2 L23.5 5.3 L42.9 6.0 L60.4 7.0 L80.2 5.8 L97.9 6.7 L117.4 4.9 L135.5 5.3 L154.4 5.1 L154.2 19.5 L153.2 31.8 L155.1 47.7 L153.0 59.9 L155.2 72.7 L153.8 87.1 L154.4 99.9 L153.1 115.3 L135.4 113.3 L117.1 113.6 L97.6 114.7 L79.6 113.6 L60.4 115.1 L42.3 115.0 L24.4 113.3 L6.3 113.7 L6.7 100.9 L5.1 86.3 L5.9 72.4 L4.8 59.8 L6.5 46.9 L7.2 32.5 L5.8 19.5 Z' fill='none' stroke='%237A4A2B' stroke-width='3.4' stroke-linejoin='round' opacity='.92'/%3E%3Cpath d='M12.2 14.0 L30.5 13.4 L46.7 13.0 L63.3 13.4 L79.9 12.2 L97.0 12.0 L114.2 13.8 L130.7 12.1 L147.6 13.8 L146.7 25.4 L148.0 37.5 L146.6 47.9 L146.8 60.7 L147.0 70.8 L147.4 84.2 L146.6 94.8 L147.5 107.4 L129.4 107.3 L113.5 107.1 L97.8 106.3 L78.9 106.1 L62.5 107.9 L46.5 107.9 L30.1 107.1 L13.5 107.4 L13.4 94.5 L12.8 83.1 L13.1 71.2 L13.9 59.6 L13.2 48.8 L13.8 37.4 L12.8 25.1 Z' fill='none' stroke='%237A4A2B' stroke-width='1.7' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E"); }
.stamp--soon .stamp-seal { background: none; border: 2px dashed var(--info); border-radius: 10px; }
.stamp-body h3 { font-size: var(--fs-h3); font-weight: 640; margin-bottom: .35rem; }
.stamp-body p { color: var(--text-muted); max-width: 58ch; }
.stamp-body .soon-tag { margin-top: .7rem; }
.stamp-code { margin-top: .55rem; }
.stamp-code code { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .18em .55em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .82em; color: var(--info); }
.band-deep .stamp-code code { background: color-mix(in srgb, var(--surface) 72%, transparent); }
@media (max-width: 560px) {
  .stamp { flex-direction: column; }
  .stamp-seal { width: 112px; }
}

/* ---- iki ülke + güven rayı (gece bandında) ---- */
.duo-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); margin-top: clamp(1.8rem, 5vh, 3rem); }
@media (min-width: 781px) { .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card {
  position: relative; background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 2.1rem 1.4rem 1.4rem;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
  transform: rotate(-.7deg);
}
.duo-card + .duo-card { transform: rotate(.8deg); }
.duo-card::before { /* etiket deliği */
  content: ''; position: absolute; top: .8rem; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--night);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 2px var(--border-strong);
}
.duo-card .duo-flag { font-family: 'Fraunces', 'Fraunces-fallback', serif; font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--brand); }
.band-ink .duo-card h3 { color: var(--text-bright); margin: .3rem 0 .6rem; }
.band-ink .duo-card .ticks li { color: var(--text); }
.rail-viewport--ink { margin-top: clamp(1.8rem, 5vh, 3rem); padding-bottom: 0; }
/* gece bandında beyaz karton: band-ink kuralları kartın İÇİNE sızmaz */
.band-ink .tag-card h3 { color: var(--text-bright); }
.band-ink .tag-card p { color: var(--text-muted); }
.band-ink .stat-band .stat-num { color: var(--text-bright); }
.band-ink .stat-band .stat-lab { color: var(--text-muted); }
.tag-card--static { cursor: default; }
.rail-viewport--ink .rail { padding-bottom: .4rem; }

/* koridor sayfası reduced-motion: sahne zaten hiç açılmaz (cor-on eklenmez);
   galeri + damgalar statik akar. */