/* ============================================================
   TCM GLOBAL® — main.css
   Tasarım dili: ürün odaklı, aydınlık, tek tipografik aile,
   kroma yalnızca işlerin kendisinde. Süs yok, sistem var.
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 1b. Yazı tipleri (kendi sunucumuzda) ----------
   Google Fonts'tan değil buradan yükleniyor. Üç sebep: sayfa açılışında
   üçüncü bir sunucuya bağlanmayı beklemiyoruz, ziyaretçinin IP adresi
   Google'a gitmiyor, ve yazı tipi sürümü bizde sabit kalıyor.
   Tarayıcı yalnız ihtiyaç duyduğu dilim(ler)i indiriyor: Türkçe sayfada
   latin + latin-ext, İngilizce sayfada çoğunlukla sadece latin.
   Dosyalar: assets/fonts/  ·  yenilemek için fontsource paketleri. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-600-normal.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: 600;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-600-normal.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 Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-700-normal.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: 700;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-700-normal.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 Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-800-normal.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: 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-800-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-400-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext-400-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-500-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext-500-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-700-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext-700-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-800-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext-800-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-900-normal.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext-900-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-400-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-500-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.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;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* light (varsayılan) */
  --ground:   #FFFFFF;
  --band:     #F4F4F6;
  --card:     #FFFFFF;
  --ink:      #101116;
  --ink-2:    #5F6068;
  --ink-3:    #8A8B94;
  --hair:     #DDDDE2;
  --accent:   #B23A22;
  --accent-2: #8C2B17;
  --olive:    #55603A;
  --gold:     #E2A32B;   /* vurgu sarısı: toprak accent ile aynı sıcaklıkta */
  --invert-g: #08080B;   /* koyu tam-genişlik bantlar */
  --invert-i: #F4F4F6;
  --invert-2: #96979F;
  --invert-h: rgba(244,244,246,0.16);

  /* Üç rol, üç aile. Başka yerde font-family YAZILMAZ. */
  --f:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;  /* gövde + arayüz */
  --fd: "Bricolage Grotesque", "Schibsted Grotesk", -apple-system, Helvetica, Arial, sans-serif;           /* sadece başlıklar */
  --fm: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;                                /* sadece etiket + numara */

  /* ── TİPOGRAFİK ÖLÇEK ────────────────────────────────────────
     Tek kural: her basamağın bir rolü var, bir rolün bir basamağı.
     Önceden aynı etiket (h2) sayfadan sayfaya 26px ile 67px arası
     değişiyordu; bölüm başlığı sayfa başlığıyla aynı büyüklükteydi
     ve okuyucu neyin neye bağlı olduğunu göremiyordu.

     1440px ekranda karşılıkları:
       hero   88px   yalnızca ana sayfa hero'su, sitede tek yerde
       page   52px   alt sayfa başlığı (h1)
       sec    38px   bölüm başlığı
       block  27px   bölüm içi blok başlığı
       item   21px   kart başlığı, soru, zincir halkası
       lead   19px   başlık altı giriş paragrafı
       body   17px   gövde
       sm     15px   ikincil
       xs     12px   mono etiket
     ─────────────────────────────────────────────────────────── */
  --t-hero:  clamp(2.8rem, 6.6vw, 5.5rem);
  --t-page:  clamp(2.2rem, 4vw, 3.25rem);
  --t-sec:   clamp(1.75rem, 2.7vw, 2.4rem);
  --t-block: clamp(1.35rem, 1.9vw, 1.7rem);
  --t-item:  clamp(1.15rem, 1.45vw, 1.35rem);
  --t-lead:  clamp(1.05rem, 1.2vw, 1.2rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.75rem;

  /* eski adlar, geriye dönük */
  --t-1:     var(--t-sec);
  --t-2:     var(--t-block);
  --t-3:     var(--t-item);

  --gut:  clamp(1.25rem, 4vw, 2.75rem);
  --sec:  clamp(4.5rem, 9vw, 9rem);
  --r:    3px;
  --r-lg: 4px;

  --e:    cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #000000;
    --band:     #0E0E11;
    --card:     #131318;
    --ink:      #F4F4F6;
    --ink-2:    #9EA0A8;
    --ink-3:    #6E7078;
    --hair:     #26262C;
    --accent:   #F0724F;
    --accent-2: #FF9C7E;
    --olive:    #97A472;
    --gold:     #F5C243;
    --invert-g: #0E0E11;
    --invert-i: #F4F4F6;
    --invert-2: #9EA0A8;
    --invert-h: rgba(244,244,246,0.14);
  }
}
:root[data-theme="dark"] {
  --ground:   #000000;
  --band:     #0E0E11;
  --card:     #131318;
  --ink:      #F4F4F6;
  --ink-2:    #9EA0A8;
  --ink-3:    #6E7078;
  --hair:     #26262C;
  --accent:   #F0724F;
  --accent-2: #FF9C7E;
  --olive:    #97A472;
  --gold:     #F5C243;
  --invert-g: #0E0E11;
  --invert-i: #F4F4F6;
  --invert-2: #9EA0A8;
  --invert-h: rgba(244,244,246,0.14);
}

/* ---------- 3. Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5, .mock-t { font-family: var(--fd); font-weight: 700; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; font-optical-sizing: auto; }
/* form elemanları tarayıcı fontuna düşmesin — "yazılar birbirinden bağımsız" görünmesinin ana sebebi */
button, input, textarea, select, optgroup { font-family: var(--f); font-size: inherit; letter-spacing: inherit; }

.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 880px; }
.wrap--wide { max-width: 1480px; }

.eyebrow {
  font-family: var(--fm); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.lead { font-size: var(--t-lead); line-height: 1.42; color: var(--ink-2); letter-spacing: -0.018em; }
.muted { color: var(--ink-2); }
.hair { height: 1px; background: var(--hair); border: 0; }

/* ---------- 4. Reveal ---------- */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--e), transform .8s var(--e); }
[data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; transition: none; } }

/* ---------- 5. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 800;
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--hair); }
.nav-in {
  max-width: 1220px; margin-inline: auto; padding: 0 var(--gut);
  height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Kelime isareti. Tek lockup olarak okunmasi icin uc parca da ayni
   aileden; carpi TCM ile GLOBAL arasinda baglayici, sonda asili
   duran bir sus degil. */
.brand {
  display: inline-flex; align-items: center; color: var(--ink);
  font-family: var(--fd); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.04em;
}
.brand-x { color: var(--accent); font-weight: 700; font-size: .7em; margin: 0 .13em 0 .15em; }
.brand-g { font-weight: 700; font-size: .7em; letter-spacing: -.005em; }
.brand-g sup { font-size: .46em; vertical-align: .5em; margin-left: .18em;
               color: var(--ink-3); letter-spacing: 0; }

.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav-links a { font-size: var(--t-sm); color: var(--ink-2); transition: color .25s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.lang { display: flex; font-family: var(--fm); font-size: var(--t-xs); letter-spacing: 0.06em; }
.lang button {
  cursor: pointer; padding: 4px 8px; color: var(--ink-3); border-radius: 6px;
  transition: color .2s ease, background-color .2s ease;
}
.lang button:hover { color: var(--ink); }
.lang button.on { color: var(--ink); background: var(--band); font-weight: 500; }

.burger { display: none; width: 26px; height: 16px; position: relative; cursor: pointer; }
.burger i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--e), opacity .25s; }
.burger i:nth-child(1) { top: 3px; }
.burger i:nth-child(2) { bottom: 3px; }
body.menu-open .burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 48px 0 0; z-index: 790; background: var(--ground);
  padding: 2rem var(--gut); display: flex; flex-direction: column; gap: 0.25rem;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .35s var(--e), transform .35s var(--e);
}
body.menu-open .drawer { opacity: 1; pointer-events: auto; transform: none; }
.drawer a {
  font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em;
  padding-block: 0.55rem; border-bottom: 1px solid var(--hair);
}
@media (max-width: 820px) { .nav-links { display: none; } .burger { display: block; } }

/* ---------- 6. Hero ---------- */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.hero h1 { font-size: var(--t-hero); font-weight: 900; letter-spacing: -0.045em; }
/* Vurgu tek renk sarı. Çok renkli gradient metin, hazır şablonların
   en belirgin işareti; tek renk hem daha sakin hem daha pahalı duruyor. */
.hero h1 .g { color: var(--gold); }
.hero--wall h1 .g { color: #F5C243; }
.hero .lead { max-width: 30ch; margin: clamp(1.1rem, 2vw, 1.6rem) auto 0; }
.hero-cta { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); }

/* ---------- 7. Links & buttons ---------- */
.tlink {
  color: var(--accent); font-size: var(--t-lead); display: inline-flex; align-items: center; gap: 0.28em;
  transition: color .2s ease;
}
.tlink:hover { color: var(--accent-2); }
.tlink::after { content: "›"; transition: transform .3s var(--e); }
.tlink:hover::after { transform: translateX(3px); }

/* Buton: mavi hap değil. Koyu blok, sarı hover, kayan ok.
   Hap formu her şablonda var; keskin blok + hareket eden ok
   butonu markanın parçası yapıyor. */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  background: var(--ink); color: var(--ground);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  padding: 1em 1.6em; border-radius: 2px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .3s var(--e), background-color .3s var(--e);
}
.btn::after {
  content: "→"; font-family: var(--fm); font-size: .95em;
  transition: transform .35s var(--e);
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.btn--ghost:hover { background: var(--ink); color: var(--ground); box-shadow: none; }
.sec--dark .btn { background: var(--gold); color: #101116; }
.sec--dark .btn:hover { background: #fff; }
.sec--dark .btn--ghost { background: transparent; color: var(--invert-i); box-shadow: inset 0 0 0 1px var(--invert-h); }
.sec--dark .btn--ghost:hover { background: var(--invert-i); color: var(--invert-g); }

/* ---------- 8. Showcase (hero görseli) ---------- */
.showcase { padding-bottom: var(--sec); }
.frame {
  border-radius: var(--r-lg); overflow: hidden; background: var(--band);
  border: 1px solid var(--hair);
  transform: scale(.94); opacity: 0; transition: transform 1.1s var(--e), opacity .9s var(--e);
}
.frame.in { transform: none; opacity: 1; }
.frame-bar {
  height: 38px; display: flex; align-items: center; gap: 6px; padding-inline: 14px;
  background: color-mix(in srgb, var(--ink) 6%, var(--ground));
  border-bottom: 1px solid var(--hair);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hair); }
.frame-bar b {
  margin-left: 10px; font-family: var(--fm); font-size: 11px; font-weight: 400;
  color: var(--ink-3); letter-spacing: 0.02em;
}
.frame-body { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.frame-body img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Gerçek ekran görüntüsü gelene kadar: sitenin kendisi gibi duran kompozisyon.
   Görsel eklendiğinde .mock bloğunu <img> ile değiştirmek yeterli. */
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; }
.mock h4, .mock .mock-t { font-weight: 900; letter-spacing: -0.045em; line-height: 1; }
.mock p { font-size: var(--t-sm); opacity: .66; }

/* proje kartı içi — küçük kompozisyon */
.mock--card { justify-content: flex-end; padding: 8%; }
.mock--card h4 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.mock--card p { margin-top: .35rem; }
.mock--card::before {
  content: ""; position: absolute; left: 8%; top: 8%; width: 26px; height: 2px;
  background: currentColor; opacity: .6;
}
.mock--hero { justify-content: center; align-items: center; text-align: center; padding: 6%; }
.mock--hero h4, .mock--hero .mock-t { font-size: clamp(1.6rem, 4.4vw, 3.4rem); }

 /* her marka kendi paletinde — gerçek sitelerinden alındı */
.mock--olive { background: linear-gradient(155deg, #16240F 0%, #4A6A2A 58%, #C9A227 100%); color: #F4F1E4; }  /* Dr. Cerci */
.mock--sage  { background: linear-gradient(155deg, #2F3520 0%, #5C6440 55%, #C3C2AC 100%); color: #F5F3EB; }  /* Kashmir #444B2E */
.mock--taupe { background: linear-gradient(155deg, #201C18 0%, #554E45 58%, #A79C8E 100%); color: #F3F0EA; }  /* Mutlubaş #3A342E */

/* aynı işin farklı kadrajları — üç blok birbirinin kopyası görünmesin */
.mock--v2 { background-image: linear-gradient(25deg, rgba(0,0,0,.55), rgba(255,255,255,.14)); background-blend-mode: multiply; }
.mock--v3 { background-image: linear-gradient(200deg, rgba(255,255,255,.20), rgba(0,0,0,.5)); background-blend-mode: overlay; }
.mock--v2::after, .mock--v3::after {
  content: ""; position: absolute; inset: 12% 10% auto 10%; height: 1px;
  background: currentColor; opacity: .28;
}
.mock--v3::after { inset: auto 10% 22% 10%; }

/* showcase içi — bir site ekran görüntüsü gibi */
.sm { position: absolute; inset: 0; background: #0A0A0C; color: #F4F4F6; display: flex; flex-direction: column; }
.sm-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.2% 4%; border-bottom: 1px solid rgba(244,244,246,.10);
  font-size: clamp(8px, 0.85vw, 12px); color: rgba(244,244,246,.55);
}
.sm-bar strong { color: #F4F4F6; font-weight: 800; letter-spacing: -.02em; font-size: clamp(10px, 1.05vw, 15px); }
.sm-bar nav { display: flex; gap: clamp(8px, 1.4vw, 22px); }
.sm-hero { flex: 1; display: grid; place-content: center; text-align: center; padding: 3% 6%; }
.sm-hero h4 { font-size: clamp(1.1rem, 3.6vw, 3.1rem); }
.sm-hero h4 em { font-style: normal; color: #8FB0FF; }
.sm-hero p { margin-top: .5rem; font-size: clamp(9px, 1vw, 14px); }
.sm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2%; padding: 0 4% 4%; }
.sm-tiles i {
  display: block; aspect-ratio: 16/10; border-radius: clamp(4px, 0.5vw, 9px);
}
.sm-tiles i:nth-child(1) { background: linear-gradient(150deg, #202B18, #6E8548); }
.sm-tiles i:nth-child(2) { background: linear-gradient(150deg, #2B1E18, #B98F71); }
.sm-tiles i:nth-child(3) { background: linear-gradient(150deg, #17181B, #7E848C); }

/* ---------- 9. Bant / bölüm ---------- */
.sec { padding-block: var(--sec); }
.sec--band { background: var(--band); }
.sec--dark { background: var(--invert-g); color: var(--invert-i); }
.sec--dark .muted, .sec--dark .lead { color: var(--invert-2); }
.sec--dark .eyebrow { color: var(--invert-2); }
.sec--dark .hair { background: var(--invert-h); }

/* Ortalanmış blok = şablon. Numaralı ray + sola hizalı başlık = TCM. */
/* Başlık sola, numara başlığın ÜSTÜNDE. Önce numara solda ayrı bir
   kolondaydı ve başlığı 150px içeri itiyordu; böylece her bölüm
   başlığı sayfa başlığından farklı bir x'te başlıyor, sayfa dağınık
   görünüyordu. Şimdi hepsi aynı sol kenardan başlıyor ve numaralar
   sayfa boyunca tek bir ray oluşturuyor. */
.sec-head {
  text-align: left; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
  padding-top: 1rem; border-top: 2px solid var(--ink);
}
.sec-head .eyebrow { display: block; margin-bottom: clamp(.7rem, 1.6vw, 1rem); }
.sec-head h2 { font-size: var(--t-sec); font-weight: 800; letter-spacing: -0.038em; max-width: 24ch; }
.sec-head p { margin: 1.05rem 0 0; max-width: 58ch; }
.sec-head > span + h2 { margin-top: 0 !important; }
.sec--dark .sec-head { border-top-color: var(--invert-i); }
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 1fr; gap: .9rem; }
  .sec-head .eyebrow { padding-top: 0; }
}

/* ---------- 10. Kartlar ---------- */
.grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--hair);
  display: flex; flex-direction: column;
  transition: border-color .4s var(--e), background-color .4s var(--e);
}
.card:hover { border-color: var(--ink); }
.card-visual { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--band); }
.card-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-body { padding: clamp(1.2rem, 2vw, 1.7rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-body h3 { font-size: var(--t-3); font-weight: 700; }
.card-body p { font-size: var(--t-sm); color: var(--ink-2); }
.card-body .tlink { font-size: var(--t-sm); margin-top: auto; padding-top: 0.6rem; }

/* geniş özellik kartı */
.feature {
  background: var(--card); border-radius: var(--r-lg); padding: clamp(1.8rem, 3.4vw, 3.2rem);
  border: 1px solid var(--hair);
}
.feature h3 { font-size: var(--t-block); font-weight: 800; }
.feature p { margin-top: 0.85rem; color: var(--ink-2); max-width: 52ch; }
.feature ul { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feature li {
  font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.01em;
  padding: 5px 11px; border-radius: 3px; background: var(--band); color: var(--ink-2);
}
.sec--dark .feature { background: #17171C; }
.sec--dark .feature p { color: var(--invert-2); }
.sec--dark .feature li { background: #212127; color: var(--invert-2); }

/* ---------- 11. Sabitlenmiş anlatı ---------- */
.story { position: relative; }
.story-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.story-sticky { position: sticky; top: 96px; }
.story-visual {
  border-radius: var(--r-lg); aspect-ratio: 4/3; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.4);
}
.story-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--e); display: grid; place-content: center; text-align: center; padding: 8%; color: #FFFFFF; }
.story-layer.on { opacity: 1; }
.story-layer h4 { font-size: var(--t-sec); font-weight: 800; letter-spacing: -0.038em; line-height: 1.06; }
.story-layer p { margin-top: .6rem; font-size: var(--t-sm); opacity: .8; }
.story-step { padding-block: clamp(3.5rem, 12vh, 9rem); }
.story-step:first-child { padding-top: 0; }
.story-step h3 { font-size: var(--t-block); font-weight: 800; }
.story-step p { margin-top: 0.9rem; color: var(--ink-2); max-width: 46ch; }
.sec--dark .story-step p { color: var(--invert-2); }
.story-step .num { font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .16em; color: var(--ink-3); display: block; margin-bottom: 0.8rem; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-sticky { position: relative; top: 0; margin-bottom: 2rem; }
  .story-step { padding-block: 2rem; }
}

/* ---------- 12. Sayılar ---------- */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,2rem); text-align: center; }
.figs b {
  display: block; font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 900;
  letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.figs span { display: block; margin-top: 0.6rem; font-size: var(--t-sm); color: var(--ink-2); }
.sec--dark .figs span { color: var(--invert-2); }
@media (max-width: 700px) { .figs { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; } }

/* ---------- 13. İç sayfa başlığı ---------- */
.phead { padding: clamp(3.2rem, 7vw, 5.5rem) 0 clamp(1.6rem, 3vw, 2.6rem); text-align: center; }
.phead h1 { font-size: var(--t-page); font-weight: 800; letter-spacing: -0.042em; }
.phead .lead { max-width: 44ch; margin: 1.1rem auto 0; }
.back { display: inline-flex; align-items: center; gap: .3em; font-size: var(--t-sm); color: var(--accent); margin-bottom: 1.2rem; }

/* ---------- 14. Case study ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: clamp(2rem,3.6vw,3rem); border-block: 1px solid var(--hair); }
.facts dt { margin-bottom: .4rem; }
.facts dd { font-size: var(--t-sm); }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

/* Okuma kolonu sola hizali. Ortalanmis kolon, sayfa basligiyla
   ayni sayfada iki farkli sol kenar olusturuyordu. */
.prose { max-width: 66ch; margin-inline: 0; }
.prose h2, .prose h3 { font-size: var(--t-item); font-weight: 700; margin-top: 2.4rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-top: 0.85rem; color: var(--ink-2); }

.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem,1.4vw,1.2rem); }
.shot { border-radius: var(--r); overflow: hidden; background: var(--band); aspect-ratio: 4/3; position: relative; }
.shot--wide { grid-column: span 2; aspect-ratio: 16/8; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 700px) { .shots { grid-template-columns: 1fr; } .shot--wide { grid-column: span 1; } }

.nextp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: clamp(2rem,4vw,3.4rem); border-top: 1px solid var(--hair); }
.nextp a { font-size: var(--t-block); font-weight: 800; letter-spacing: -0.032em; transition: color .25s ease; }
.nextp a:hover { color: var(--accent); }

/* ---------- 15. Form ---------- */
.form { display: grid; gap: 1.1rem; max-width: 620px; margin-inline: auto; }
.field label { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--card); border: 1px solid var(--hair); border-radius: 12px;
  padding: 0.78em 0.95em; font-size: var(--t-body); color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field select option { background: var(--card); color: var(--ink); }
/* İletişim bilgisi: dev ve kalın olunca bağırıyor gibi duruyordu.
   Daha hafif ağırlık, sakin renk, altı ince çizgi. */
.contact-direct { display: grid; gap: .35rem; text-align: left; margin-top: clamp(2.4rem,5vw,4rem);
  padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.contact-direct a {
  font-family: var(--f); font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
  width: fit-content; padding-bottom: 2px;
  border-bottom: 1px solid var(--hair);
  transition: border-color .25s ease, color .25s ease;
}
.contact-direct a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 16. Footer ---------- */
.foot { background: var(--band); padding-block: clamp(2.4rem,4vw,3.4rem) clamp(1.4rem,2.4vw,2rem); font-size: var(--t-sm); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.foot .foot-h { font-size: var(--t-xs); font-family: var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: .9rem; }
.foot li + li { margin-top: .45rem; }
.foot a { color: var(--ink-2); transition: color .2s ease; }
.foot a:hover { color: var(--ink); }
.foot-base { margin-top: clamp(2rem,4vw,3rem); padding-top: 1.2rem; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-3); font-size: var(--t-xs); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   17. AI GÖRSELLEŞTIRME — galeri, filtre, lightbox
   ============================================================ */

/* --- görsel hero --- */
.hero--img { position: relative; text-align: left; padding: 0; min-height: min(88svh, 780px); display: flex; align-items: flex-end; overflow: hidden; }
.hero--img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero--img::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,11,.50) 0%, rgba(8,8,11,.14) 26%, rgba(8,8,11,.52) 58%, rgba(8,8,11,.93) 100%);
}
.hero--img .wrap { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero--img h1, .hero--img .lead { color: #F4F4F6; }
.hero--img .eyebrow { color: var(--gold); }
.hero--img .lead { max-width: 38ch; margin-inline: 0; }
.hero--img .hero-cta { justify-content: flex-start; }
.hero--img .tlink { color: #F5C243; }
.hero--img .tlink:hover { color: #fff; }

/* --- filtre çipleri --- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.chip {
  font-size: var(--t-sm); padding: .5em 1.1em; border-radius: 3px; cursor: pointer;
  background: var(--band); color: var(--ink-2); border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); color: var(--ground); }

/* --- masonry galeri --- */
.gal { columns: 4; column-gap: clamp(.6rem, 1.1vw, 1rem); }
@media (max-width: 1200px) { .gal { columns: 3; } }
@media (max-width: 820px)  { .gal { columns: 2; } }
@media (max-width: 480px)  { .gal { columns: 1; } }

.gal figure {
  break-inside: avoid; margin: 0 0 clamp(.6rem, 1.1vw, 1rem);
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--band); cursor: zoom-in;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--e), transform .7s var(--e);
}
.gal figure.in { opacity: 1; transform: none; }
.gal figure.hide { display: none; }
.gal img { width: 100%; height: auto; transition: transform .8s var(--e), filter .5s ease; }
.gal figure:hover img { transform: scale(1.035); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .8rem;
  font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--e), transform .4s var(--e);
}
.gal figure:hover figcaption { opacity: 1; transform: none; }

/* --- lightbox --- */
.lb {
  position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,11,.94);
  backdrop-filter: blur(8px); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--e);
}
.lb.on { opacity: 1; pointer-events: auto; }
.lb img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.lb-cap {
  margin-top: 1rem; text-align: center; color: #D6D7DC;
  font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(244,244,246,.10); color: #fff; font-size: 20px; line-height: 1;
  transition: background-color .25s ease;
}
.lb-btn:hover { background: rgba(244,244,246,.22); }
.lb-prev { left: clamp(.6rem, 2vw, 2rem); }
.lb-next { right: clamp(.6rem, 2vw, 2rem); }
.lb-close { top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); transform: none; }
@media (max-width: 620px) { .lb-prev, .lb-next { display: none; } }

/* --- araç seti tablosu --- */
.tools { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.tools > div {
  display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0,1.7fr); gap: 1rem;
  padding-block: clamp(.9rem, 1.8vw, 1.4rem); border-bottom: 1px solid var(--hair); align-items: baseline;
}
.tools b { font-weight: 700; font-size: var(--t-3); letter-spacing: -.025em; }
.tools p { color: var(--ink-2); font-size: var(--t-sm); }
.sec--dark .tools { border-color: var(--invert-h); }
.sec--dark .tools > div { border-color: var(--invert-h); }
.sec--dark .tools p { color: var(--invert-2); }
@media (max-width: 640px) { .tools > div { grid-template-columns: 1fr; gap: .25rem; } }

/* --- numaralı süreç --- */
.steps { display: grid; gap: 0; }
.steps > div { display: grid; grid-template-columns: 3.2rem minmax(0,1fr); gap: 1.2rem; padding-block: clamp(1rem, 2vw, 1.6rem); border-bottom: 1px solid var(--hair); }
.steps span { font-family: var(--fm); font-size: var(--t-sm); color: var(--accent); font-variant-numeric: tabular-nums; }
.steps h3, .steps h4 { font-size: var(--t-3); font-weight: 700; }
.steps p { margin-top: .35rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 60ch; }
.sec--dark .steps > div { border-color: var(--invert-h); }
.sec--dark .steps p { color: var(--invert-2); }

/* --- görsel kart (kapaklı) --- */
.card-visual img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-visual img { transform: scale(1.04); }
.card-visual img { transition: transform .8s var(--e); }


/* ---------- 18. Skip link (erişilebilirlik) ---------- */
/* Klavyeyle gezen ziyaretçi her sayfada yedi menü bağlantısını tek tek
   geçmek zorunda kalmasın. Normalde görünmez; yalnızca sekme tuşuyla
   odaklanınca yukarıdan iniyor. */
.skip {
  position: fixed; left: .75rem; top: -110px; z-index: 1200;
  background: var(--ink); color: var(--invert-i);
  padding: .7rem 1.1rem; border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 500;
  transition: top .18s var(--e);
}
.skip:focus { top: .75rem; }

/* dil bağlantıları (artık <a>) */
.lang a {
  padding: 4px 8px; color: var(--ink-3); border-radius: 6px;
  transition: color .2s ease, background-color .2s ease;
}
.lang a:hover { color: var(--ink); }
.lang a.on { color: var(--ink); background: var(--band); font-weight: 500; pointer-events: none; }


/* ---------- 19. İki sütunlu blok ---------- */
.split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.split > img { border-radius: var(--r); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ============================================================
   20. AÇILIŞ — hareketli görsel duvarı
   ============================================================ */
.hero--wall {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; text-align: left; padding: 0; isolation: isolate;
  background: #08080B;
}
.wall {
  position: absolute; inset: -18% -12%; z-index: -2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 16px);
  transform: rotate(-7deg) scale(1.18);
  animation: wall-breathe 34s ease-in-out infinite alternate;
}
@keyframes wall-breathe { from { transform: rotate(-7deg) scale(1.18); } to { transform: rotate(-7deg) scale(1.28); } }

.wall-col { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 16px); will-change: transform; }
.wall-col:nth-child(1) { animation: wall-up 62s linear infinite; }
.wall-col:nth-child(2) { animation: wall-down 78s linear infinite; }
.wall-col:nth-child(3) { animation: wall-up 70s linear infinite; }
.wall-col:nth-child(4) { animation: wall-down 88s linear infinite; }
@keyframes wall-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.wall-col img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  filter: saturate(1.05) contrast(1.03);
}

/* okunabilirlik perdesi */
.hero--wall::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(8,8,11,.94) 0%, rgba(8,8,11,.80) 42%, rgba(8,8,11,.34) 72%, rgba(8,8,11,.55) 100%),
    radial-gradient(120% 90% at 20% 50%, rgba(8,8,11,.55) 0%, rgba(8,8,11,0) 70%);
}
.hero--wall .wrap { position: relative; padding-block: clamp(6rem, 14vh, 9rem); }
.hero--wall .eyebrow { color: var(--gold); }
.hero--wall h1 { color: #FFFFFF; font-size: var(--t-hero); font-weight: 900; letter-spacing: -0.048em; max-width: 15ch; }
.hero--wall .lead { color: #D3D4DA; max-width: 44ch; margin-inline: 0; }
.hero--wall .hero-cta { justify-content: flex-start; }
.hero--wall .tlink { color: #F5C243; }
.hero--wall .tlink:hover { color: #FFFFFF; }

@media (max-width: 900px) {
  .wall { grid-template-columns: repeat(3, 1fr); transform: rotate(-8deg) scale(1.5); }
  .hero--wall::before {
    background:
      linear-gradient(180deg, rgba(8,8,11,.70) 0%, rgba(8,8,11,.80) 45%, rgba(8,8,11,.95) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall, .wall-col { animation: none; }
}

/* ---------- 21. Denklem bandı ---------- */
.eq { background: var(--invert-g); color: var(--invert-i); padding-block: clamp(2.6rem, 5vw, 4.4rem); }
.eq-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.4vw, 1.1rem); text-align: center;
}
.eq-term {
  font-size: clamp(1rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.03em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--e), transform .7s var(--e);
}
.eq-row.in .eq-term { opacity: 1; transform: none; }
.eq-op { font-size: clamp(.9rem, 1.8vw, 1.5rem); color: #6E7078; font-weight: 400; }
.eq-out { color: #7FADFF; }
.eq-note { text-align: center; margin-top: clamp(1rem, 2vw, 1.6rem); color: var(--invert-2); font-size: var(--t-sm); }

/* ---------- 22. Motorlar (numaralı büyük kartlar) ---------- */
.engine {
  display: grid; grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 2rem); align-items: start;
  padding-block: clamp(1.8rem, 3.6vw, 3rem); border-top: 1px solid var(--hair);
}
.engine:last-child { border-bottom: 1px solid var(--hair); }
.engine .n { font-family: var(--fm); font-size: var(--t-sm); color: var(--accent); font-variant-numeric: tabular-nums; padding-top: .35rem; }
.engine h2, .engine h3 { font-size: var(--t-block); font-weight: 800; }
.engine .sub { margin-top: .5rem; color: var(--ink-3); font-family: var(--f); font-size: var(--t-sm); letter-spacing: -0.012em; }
.engine p { color: var(--ink-2); }
.engine ul { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.engine li { font-size: var(--t-sm); font-weight: 500; padding: 5px 11px; border-radius: 3px; background: var(--band); color: var(--ink-2); }
.sec--dark .engine { border-color: var(--invert-h); }
.sec--dark .engine p { color: var(--invert-2); }
.sec--dark .engine li { background: #1C1C22; color: var(--invert-2); }
@media (max-width: 860px) { .engine { grid-template-columns: 2.6rem 1fr; } .engine > div:last-child { grid-column: 2; } }

/* ---------- 23. Eski model / yeni model ---------- */
.models { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 860px) { .models { grid-template-columns: 1fr; } }
.model { border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--hair); }
.model--old { background: transparent; }
.model--new { background: var(--card); border-color: var(--ink); }
.model h3, .model h4 { font-size: var(--t-3); font-weight: 700; }
.flow { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.flow span { font-size: var(--t-sm); padding: .45em .85em; border-radius: 3px; background: var(--band); color: var(--ink-2); }
.model--new .flow span { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 500; }
.flow i { color: var(--ink-3); font-style: normal; font-size: var(--t-xs); }
.model--old .flow span { opacity: .72; }

/* gelir kalemleri */
.rev { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.rev span {
  font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.01em;
  padding: 6px 12px; border-radius: 3px; border: 1px solid var(--hair); color: var(--ink-2);
}
.rev span.hot { border-color: var(--accent); color: var(--accent); }

/* ---------- 24. Eightpus zinciri ---------- */
.chain { display: grid; gap: 0; counter-reset: st; }
.chain-item {
  display: grid; grid-template-columns: 3.6rem minmax(0,1fr) minmax(0,1.2fr);
  gap: clamp(1rem, 2vw, 2rem); align-items: start;
  padding-block: clamp(1.1rem, 2.2vw, 1.8rem); border-bottom: 1px solid var(--hair);
  position: relative;
}
.chain-item .k { font-family: var(--fm); font-size: var(--t-sm); color: var(--accent); font-variant-numeric: tabular-nums; }
.chain-item h2, .chain-item h3, .chain-item h4 { font-size: var(--t-3); font-weight: 700; }
.chain-item p { color: var(--ink-2); font-size: var(--t-sm); }
.sec--dark .chain-item { border-color: var(--invert-h); }
.sec--dark .chain-item p { color: var(--invert-2); }
@media (max-width: 760px) { .chain-item { grid-template-columns: 2.4rem 1fr; } .chain-item p { grid-column: 2; margin-top: .3rem; } }

/* ---------- 25. İki merkez ---------- */
.hubs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.4vw,2rem); }
@media (max-width: 760px) { .hubs { grid-template-columns: 1fr; } }
.hub { border-radius: var(--r); padding: clamp(1.5rem,3vw,2.6rem); background: var(--card); border: 1px solid var(--hair); }
.hub .flag { font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .16em; color: var(--accent); }
.hub h2, .hub h3, .hub h4 { font-size: var(--t-block); font-weight: 800; margin-top: .6rem; }
.hub p { color: var(--ink-2); margin-top: .8rem; }
.sec--dark .hub { background: #17171C; border-color: transparent; }
.sec--dark .hub p { color: var(--invert-2); }


/* ---------- 26. Koyu açılış üzerinde şeffaf nav ---------- */
body.dark-top .nav:not(.is-stuck) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark-top .nav:not(.is-stuck) .brand { color: #FFFFFF; }
body.dark-top .nav:not(.is-stuck) .brand-g sup { color: rgba(255,255,255,.55); }
body.dark-top .nav:not(.is-stuck) .nav-links a { color: rgba(255,255,255,.72); }
body.dark-top .nav:not(.is-stuck) .nav-links a:hover,
body.dark-top .nav:not(.is-stuck) .nav-links a[aria-current="page"] { color: #FFFFFF; }
body.dark-top .nav:not(.is-stuck) .lang a { color: rgba(255,255,255,.55); }
body.dark-top .nav:not(.is-stuck) .lang a.on { color: #FFFFFF; background: rgba(255,255,255,.14); }
body.dark-top .nav:not(.is-stuck) .burger i { background: #FFFFFF; }


/* koyu açılış navigasyonun altına kadar uzansın */
body.dark-top .hero--wall { margin-top: -48px; }


/* ============================================================
   27. İŞ GÖRSELLERİ — gradient üstüne oturan gerçek ekran görüntüsü
   Dosya yoksa JS img'yi gizler, altındaki marka gradienti görünür.
   ============================================================ */
.card-visual, .frame-body, .shot { position: relative; }
.ontop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .8s var(--e);
}
.card:hover .ontop { transform: scale(1.04); }


/* ============================================================
   28. İMZA KATMANI — bu siteyi "şablon" olmaktan çıkaran detaylar
   Denizli × USA çarpı motifi, keskin geometri, tel çizgi ızgara.
   ============================================================ */



/* hero: sol kenarda ince accent rayı */
.hero--wall .wrap::before {
  content: ""; position: absolute; left: 0; top: clamp(6rem, 14vh, 9rem); bottom: clamp(6rem, 14vh, 9rem);
  width: 2px; background: linear-gradient(180deg, var(--accent), transparent 85%);
}
@media (max-width: 760px) { .hero--wall .wrap::before { display: none; } }

/* denklem bandı: çarpı motifi accent renginde */
.eq-op { color: var(--gold); font-family: var(--fm); font-weight: 500; opacity: .8; }
.eq-out { color: var(--gold); }
.eq-term { font-family: var(--fd); }

/* motor numaraları: büyük, kenarda, tipografik anıt gibi */
.engine .n {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 500; color: var(--ink);
  opacity: .18; padding-top: .1rem; letter-spacing: -.02em;
}
.engine { border-top-width: 2px; }
.engine:hover .n { opacity: 1; color: var(--accent); transition: opacity .4s var(--e), color .4s var(--e); }

/* kart görselinin üstünde ince tel çizgi ızgara — fotoğraf gibi değil, ürün gibi */
.card-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -1px 0 var(--hair);
}

/* proje kartı: alt satırda meta */
.card-body h3 { letter-spacing: -.035em; }

/* bölüm ayrımı: bandı gri kutu yerine üstten tel çizgi ile ayır */
.sec--band { background: var(--band); border-block: 1px solid var(--hair); }

/* footer: monospace başlıklar kalır, ama hizalı bir ızgarada */
.foot { border-top: 2px solid var(--ink); background: var(--ground); }
.foot-base { font-family: var(--fm); letter-spacing: .04em; }

/* iç sayfa başlığı da sola hizalı — merkez simetri sadece hero'da */
.phead { text-align: left; }
.phead .lead { margin-inline: 0; }
.phead h1 { max-width: 20ch; }

/* seçim rengi imza rengiyle */
::selection { background: var(--accent); color: #fff; }

/* CTA başlıkları — satır içi stil yerine tek sınıf (tipografik tutarlılık) */
.h-cta { font-size: var(--t-sec); font-weight: 800; letter-spacing: -0.038em; max-width: 30ch; }
.eq-term--sm { font-size: clamp(.95rem, 1.7vw, 1.35rem); }
.h-sub { font-size: var(--t-block); font-weight: 800; letter-spacing: -0.032em; max-width: 34ch; }
/* zincir/motor alt etiketi — tek tanım, her yerde aynı */
.sub { color: var(--ink-3); font-family: var(--f); font-size: var(--t-sm); letter-spacing: -0.012em; display: block; }

/* bölüm sonu eylem satırı — ortalanmış değil, ızgaranın metin sütununda */
/* Bölüm sonu butonu da sayfa kenarından başlar. Önceden eski
   sec-head ikinci kolonuna hizalıydı ve tek başına içeride kalmıştı. */
.sec-cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* iş kartı yer tutucusu: boş gradient değil, marka plakası */
.mock--card { justify-content: space-between; }
.mock--card b {
  font-family: var(--fd); font-weight: 800; font-size: clamp(1.1rem, 2.1vw, 1.55rem);
  letter-spacing: -.035em; line-height: 1; margin-top: auto;
}
.mock--card p { margin-top: .3rem; }

/* ============================================================
   29. GEO KATMANI — alıntılanabilir tanım, SSS, yazar kimliği
   Bu bloklar hem insan hem üretken motor için yazıldı: motor
   düz metni alıntılar, insan hiyerarşiyi okur. İkisi de aynı
   metni görür — gizli/gösterilmeyen SSS metni Google tarafından
   manipülasyon sayılır, o yüzden <details> açılıp kapanıyor
   ama metin daima DOM'da.
   ============================================================ */

/* --- alıntılanabilir tanım --- */
.answer { padding-block: clamp(3rem, 6vw, 5rem); }
.answer-lead { max-width: 68ch;
  font-size: var(--t-lead); line-height: 1.5; color: var(--ink);
  letter-spacing: -0.018em; margin-top: 1.2rem; max-width: 62ch;
}
.facts-inline {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.4rem, 3vw, 2.8rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 1.4rem; border-top: 1px solid var(--hair);
}
.facts-inline > div { padding-block: .5rem; }
.facts-inline dt {
  font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.facts-inline dd { margin-top: .25rem; font-size: var(--t-sm); font-weight: 500; }

/* --- soru / cevap --- */
.qa-list { border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--hair); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start;
  gap: 1rem; padding-block: clamp(1rem, 2vw, 1.5rem);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 {
  font-size: var(--t-3); font-weight: 700; letter-spacing: -0.028em;
  flex: 1; margin: 0;
}
.qa summary::after {
  content: "+"; font-family: var(--fm); font-size: 1.25rem; line-height: 1;
  color: var(--accent); flex: none; transition: transform .35s var(--e);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover h3 { color: var(--accent); transition: color .2s ease; }
.qa-a { padding-bottom: clamp(1.1rem, 2vw, 1.6rem); }
.qa-a p { color: var(--ink-2); max-width: 68ch; }
.qa-note { margin-top: 1.6rem; color: var(--ink-3); font-size: var(--t-sm); }
.sec--dark .qa-list { border-top-color: var(--invert-i); }
.sec--dark .qa { border-bottom-color: var(--invert-h); }
.sec--dark .qa-a p { color: var(--invert-2); }

/* --- yazar kimliği --- */
.byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  margin-block: clamp(1.6rem, 3vw, 2.4rem);
  font-size: var(--t-sm);
}
.byline p { margin: 0; }
.byline .eyebrow { margin-right: .5rem; }

/* form geri bildirimi */
.form-note { font-size: var(--t-sm); margin-top: .2rem; min-height: 1.2em; }
.form-note.is-good { color: var(--olive); font-weight: 500; }
.form-note.is-bad  { color: var(--accent); font-weight: 500; }

/* ============================================================
   30. EKİP
   Tek imza yerine ekip. Fotoğraf yok: fotoğrafsız ekip kartı,
   kötü fotoğraflı olandan daha iyi durur ve görsel geldiğinde
   .member-photo eklemek yeterli.
   ============================================================ */
.team {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--hair);
  border-block: 1px solid var(--hair);
}
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }
.member {
  background: var(--ground); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; gap: .5rem;
  transition: background-color .4s var(--e);
}
.member:hover { background: var(--band); }
.member h3 { font-size: var(--t-3); font-weight: 700; letter-spacing: -.03em; }
.member-role {
  font-family: var(--fm); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.member p { font-size: var(--t-sm); color: var(--ink-2); margin-top: .3rem; }
.member .tlink { font-size: var(--t-sm); margin-top: auto; padding-top: .8rem; }

/* sarı vurgu tokenı koyu bantlarda da çalışsın */
.sec--dark .member { background: #131318; }

/* ============================================================
   31. REHBER SAYFALARI
   Uzun metin okunacak; ölçü, satır yüksekliği ve bölüm arası
   boşluk buna göre. Kart yok, gölge yok: metin kendi başına
   durabilmeli.
   ============================================================ */
.prose--guide { max-width: 68ch; margin-inline: 0; }
.g-sec { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.g-sec:first-child { padding-top: 0; }
.g-sec h2 {
  font-size: var(--t-3); font-weight: 700; letter-spacing: -.03em;
  padding-bottom: .9rem; margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink);
}
.g-sec p { color: var(--ink-2); line-height: 1.62; margin-top: 1rem; }
.g-sec p:first-of-type { margin-top: 0; }
.g-sec strong { color: var(--ink); font-weight: 600; }

/* kapanış: rehberden işe geçiş, reklam gibi durmasın */
.g-close {
  margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 1.8rem;
  border-top: 1px solid var(--hair); max-width: 68ch;
}
.g-close p { color: var(--ink-2); margin-bottom: 1.4rem; }

/* rehberde cevap bloğu sola hizalı akar */
.answer .facts-inline { margin-top: 1.8rem; }

/* rehber bağlantı bloğu */
.guide-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 3rem); flex-wrap: wrap;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-block: 2px solid var(--ink);
}
.guide-link h3 { font-size: var(--t-3); font-weight: 700; letter-spacing: -.03em; margin-top: .6rem; }
.guide-link p { color: var(--ink-2); font-size: var(--t-sm); margin-top: .5rem; max-width: 56ch; }

/* ---------- 32. Saha listesi ---------- */
.fn-list { border-top: 2px solid var(--ink); }
.fn-item {
  display: grid; grid-template-columns: 4.5rem 1fr;
  align-items: start; column-gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 2.8vw, 2.2rem);
  border-bottom: 1px solid var(--hair);
  transition: background-color .4s var(--e);
}
.fn-item:hover { background: var(--band); }
.fn-no {
  font-family: var(--fm); font-size: .72rem; letter-spacing: .12em;
  color: var(--ink-3); padding-top: .55rem;
}
.fn-item:hover .fn-no { color: var(--accent); }
.fn-body { transition: transform .4s var(--e); }
.fn-item:hover .fn-body { transform: translateX(.5rem); }
.fn-item h2, .fn-item h3 { font-size: var(--t-block); font-weight: 800; letter-spacing: -.032em; max-width: 26ch; }
.fn-item p { color: var(--ink-2); margin-top: .7rem; max-width: 62ch; font-size: var(--t-sm); }
.fn-item .tlink { font-size: var(--t-sm); margin-top: .9rem; display: inline-flex; }

@media (max-width: 640px) {
  .fn-item { grid-template-columns: 1fr; row-gap: .45rem; }
  .fn-no { padding-top: 0; }
  .fn-item:hover .fn-body { transform: none; }
}

/* ---------- 33. Rehber içi gezinme ---------- */
/* Bölüm listesi. Uzun bir rehberde okuyucu nereye geldiğini görsün
   diye; ayrıca her başlığın kendi adresi olduğu için arama sonucunda
   sayfa içine atlayan bağlantılar çıkabiliyor. */
.g-toc {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.g-toc > .eyebrow { display: block; margin-bottom: .9rem; }
.g-toc ol { display: grid; gap: .1rem; }
.g-toc a {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline;
  padding: .42rem 0; font-size: var(--t-sm); color: var(--ink-2);
  transition: color .25s var(--e);
}
.g-toc a span { font-family: var(--fm); font-size: .72rem; color: var(--ink-3); }
.g-toc a:hover { color: var(--accent); }
.g-toc a:hover span { color: var(--accent); }

/* Başlığa atlarken yapışkan üst menü başlığı örtmesin. */
.g-sec h2 { scroll-margin-top: 92px; }

/* Diğer rehberler. İç bağlantı hem okuyucu hem arama motoru için. */
.g-rel-head {
  font-size: var(--t-3); font-weight: 700; letter-spacing: -.02em;
  padding-bottom: .9rem; border-bottom: 2px solid var(--ink);
}
.g-rel { display: grid; }
.g-rel a {
  display: block; padding-block: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--hair);
  transition: background-color .35s var(--e), padding-left .35s var(--e);
}
.g-rel a:hover { background: var(--band); padding-left: .8rem; }
.g-rel .eyebrow { display: block; margin-bottom: .4rem; }
.g-rel-h {
  font-family: var(--fd); font-weight: 700; letter-spacing: -.03em;
  font-size: var(--t-3); line-height: 1.15; display: block; max-width: 30ch;
}

/* ---------- 35. İş sahnesi ---------- */
/* Müşteri sitesini çıplak bir ekran görüntüsü olarak koymak, işi
   "aldık yapıştırdık" gibi gösteriyordu. Burada iş bir kompozisyon:
   markanın kendi renginden alınmış sakin bir zemin, üstünde masaüstü
   çerçevesi ve ona binen bir telefon. Gölge yok, yumuşatma yok;
   sitenin geri kalanı gibi tel çizgi ve keskin geometri. */
.stage {
  position: relative;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1rem, 3vw, 2.6rem);
  background: color-mix(in srgb, var(--tint) 16%, var(--band));
}
.stage--olive { --tint: #4A6A2A; }
.stage--sage  { --tint: #5C6440; }
.stage--taupe { --tint: #554E45; }

.stage-tag {
  display: block; margin-bottom: clamp(.6rem, 1.4vw, 1rem);
  font-family: var(--fm); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.stage-tag::before { content: "\00D7"; margin-right: .5em; color: var(--accent); }

.stage-in { display: flex; align-items: flex-end; }
.stage-desk { flex: 1 1 auto; min-width: 0; }
.stage-phone { flex: 0 0 auto; margin-left: -3.2rem; margin-bottom: -1.2rem; }

.phone {
  width: clamp(104px, 13vw, 172px);
  border: 2px solid var(--ink); border-radius: 18px;
  padding: 7px 6px; background: var(--ground);
}
.phone::before {
  content: ""; display: block; width: 32%; height: 3px; margin: 0 auto 6px;
  border-radius: 2px; background: var(--ink); opacity: .22;
}
.phone-screen {
  position: relative; aspect-ratio: 720 / 1560; overflow: hidden;
  border-radius: 11px; background: var(--band);
}
.phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

@media (max-width: 760px) {
  .stage-in { display: block; }
  .stage-desk { width: 100%; }
  .stage-phone { width: max-content; margin: -2.4rem 0 0 auto; }
  .phone { width: 88px; border-radius: 13px; padding: 5px 4px; }
  .phone::before { height: 2px; margin-bottom: 4px; }
  .phone-screen { border-radius: 8px; }
}

/* ---------- 36. İş kartında tarayıcı şeridi ---------- */
/* Kart görseli tek başına bir fotoğraf gibi duruyordu. İnce bir
   tarayıcı şeridi, bakan kişiye bunun bizim kurduğumuz bir site
   olduğunu tek bakışta söylüyor. */
.card-bar {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding-inline: 11px;
  background: color-mix(in srgb, var(--ink) 6%, var(--ground));
  border-bottom: 1px solid var(--hair);
}
.card-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); flex: 0 0 auto; }
.card-bar b {
  margin-left: 7px; font-family: var(--fm); font-size: 10px; font-weight: 400;
  color: var(--ink-3); letter-spacing: .02em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 37. Kadraj altı etiketleri ---------- */
.shot-cap {
  display: block; margin-top: .55rem;
  font-family: var(--fm); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---------- 37b. Kadraj bloğu ---------- */
.shot-fig { display: block; }
.shot-fig--wide { grid-column: span 2; }
@media (max-width: 700px) { .shot-fig--wide { grid-column: span 1; } }

/* ---------- 38. Uzmanlık listesi (Stüdyo) ---------- */
/* Motor satırlarıyla aynı dil: numara rayı solda, içerik tek kolonda.
   Platform sayfasındaki uzun anlatımın kısa hâli. */
.exp { display: grid; }
.exp-item {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 2rem); align-items: start;
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--hair);
}
.exp-item:first-child { border-top: 2px solid var(--ink); }
.exp-item:last-child { border-bottom: 1px solid var(--hair); }
.exp-item .n {
  font-family: var(--fm); font-size: var(--t-sm); color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: .3rem;
}
.exp-item h3 { font-size: var(--t-item); font-weight: 700; }
.exp-item p { margin-top: .4rem; color: var(--ink-2); max-width: 62ch; font-size: var(--t-sm); }
.exp-item:hover .n { color: var(--accent); transition: color .35s var(--e); }