/* ================================ ölçüsü eşleştirilmiş yedek yazı tipleri
   Ölçüldü (review/font2.js): Manrope'un doğal satır kutusu Arial'den %19,
   JetBrains Mono %13 daha yüksek, Archivo ise %5 daha kısa. Web yazı tipi
   yüklenince her paragrafın yüksekliği değişip içerik zıplıyordu
   (kayma 873-1151 ms'de, yazı tipleri 1207 ms'de hazır oluyordu).
   Aşağıdaki yedekler sistem yazı tipini aynı dikey yeri kaplayacak şekilde
   ayarlar; geçiş anında hiçbir şey kımıldamaz.
   Oranlar: Arial'in ascent .905 / descent .212 / line-gap .033 değerleri
   ölçülen yükseklik oranıyla çarpıldı. */
/* ==========================================================================
   YAZI TİPLERİ — kendi sunucumuzdan

   Önceden Google Fonts'tan çekiliyordu. Üç sorun vardı:
   1) Render engelleyici dış stil dosyası ve iki ayrı bağlantı kurulumu.
   2) Her ziyaretçinin IP'si Google'a gidiyordu — KVKK açısından gereksiz bir
      üçüncü taraf aktarımı.
   3) İçerik güvenlik politikasıyla (font-src 'self') uyumsuzdu.

   Yalnızca ölçümle doğrulanmış kesitler var: Archivo 600/700, Manrope
   400/500/600, JetBrains Mono 400/500. Türkçe için latin ve latin-ext
   yeterli; kiril, yunan ve vietnamca alt kümeleri indirilmiyor.
   Aşağıdaki 'Yedek' tanımları yerinde duruyor: yazı tipi inene kadar
   ölçüleri eşleşen sistem tipi kullanılıyor, böylece metin kaymıyor.
   ========================================================================== */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-600-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:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-600-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo-700-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo-700-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/jetbrains-400-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/jetbrains-400-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/jetbrains-500-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/jetbrains-500-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-400-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-400-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-500-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-500-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:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-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:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-600-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:'Archivo Yedek';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  ascent-override:85.8%; descent-override:20.1%; line-gap-override:3.1%;
  size-adjust:101%;
}
@font-face{
  font-family:'Manrope Yedek';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  ascent-override:107.8%; descent-override:25.3%; line-gap-override:3.9%;
  size-adjust:99.9%;
}
@font-face{
  font-family:'Mono Yedek';
  src:local('Courier New'),local('Liberation Mono');
  ascent-override:103.7%; descent-override:24.3%; line-gap-override:3.8%;
  size-adjust:99.7%;
}

/* ==========================================================================
   Değirmencioğlu Galvano 24
   Palet videodan örneklendi. Kontrast hesaplandı, tahmin edilmedi.
   ========================================================================== */

:root{
  /* renkler */
  --canvas:#060F14;
  --canvas-2:#0A171D;
  --panel:#10222A;
  --panel-2:#132A33;
  --line:#1B333B;
  --line-strong:#2A4A54;
  --accent:#C9A15E;
  --accent-hover:#DDB877;
  --accent-muted:#6E5A38;
  --steel:#A3AEAF;
  --text-primary:#E8EFF0;
  --text-secondary:#93A7AC;
  /* #6E8288 idi: 10,5px etiketlerde panel zemininde 4,06:1 veriyordu,
     küçük yazı için gereken 4,5'in altında. #8298A0 üç zeminde de geçiyor
     (panel 5,41 · canvas 6,40 · panel-2 4,94). */
  --text-dim:#8298A0;

  /* iridesans: pasivasyonun yanardöner parlaması */
  --irid:linear-gradient(180deg,#C9A15E 0%,#B98A93 42%,#6FA8A8 78%,#4E7F8B 100%);
  --irid-h:linear-gradient(90deg,#C9A15E 0%,#B98A93 42%,#6FA8A8 78%,#4E7F8B 100%);

  /* başlık ölçeği — 16 Eylül. Ölçüldüğünde aynı görevdeki başlıklar sayfalar
     arasında 8 farklı boyut alıyordu (34/40/44/50/54 px, rayda ayrıca kalın).
     Görev başına tek boyut:
       --h-sec  tam genişlik bölüm başlığı; sabitlenen sahnelerin başlığı da
       --h-alt  sütun içi / kart içi alt başlık
       --h-kart kart ve liste başlığı
     Büyük söz bandı (80) ve kapanış paneli (58) ayrı görevler, dokunulmadı. */
  --h-sec:clamp(30px,4.2vw,54px);
  --h-alt:clamp(24px,3vw,40px);
  --h-kart:20px;

  /* ---------------------------------------------------------------- 
     KIRILIM NOKTALARI — 1 Ekim'de tek ölçeğe oturtuldu.

     Öncesinde 17 farklı genişlik değeri vardı (400, 460, 520, 560, 620,
     700, 720, 820, 880, 900, 940, 960, 980, 1000, 1024, 1060, 1400) ve
     çoğu aynı işi birkaç piksel arayla yapıyordu. Davranış doğruydu ama
     sayılar keyfîydi; bir bileşen eklerken hangisini kullanacağı belirsizdi.

       480px   çok küçük telefon   künye değerleri, rakam bloğu, marka yazısı
       620px   telefon             ızgaralar tek sütuna, alt bilgi iki sütuna
       720px   büyük telefon       iz, form satırı, kesit, akış bandı
       960px   tablet yatay /      bölünmüş yerleşim, gezinme çubuğu, tablo
               küçük dizüstü       kart düzenine, sabitlenen sahneler düz akışa
      1080px   dizüstü             form bölümü iki sütuna
      1400px   geniş masaüstü      cetvel ölçeği

     CSS medya sorgusu değişken kabul etmediği için değerler düz yazılıyor;
     ölçek bu listede tanımlı. Yeni bir kural yazarken buradan bir basamak
     seç, araya yeni sayı ekleme.

     Yükseklik eşikleri ayrı eksendir ve ölçüme dayanır: 560px (yatay
     telefonda hero), 640px (cetvel), 700px (sabitlenen yığın sığmıyor).
     ---------------------------------------------------------------- */

  /* mikro yazı tabanı — 30 Eylül. Ölçüldü: sitede 9,5 / 10 / 10,5 px'lik
     metinler vardı ve bir kısmı bilgi taşıyordu (mikron ölçeği etiketleri,
     "insan saçı 70 µm" gibi referanslar). Harf aralıklı büyük harf etiket
     okunur ama 9,5 px değil. Taban 11 px. */
  --t-mikro:11px;

  /* köşe — iki değer: tıklanan kontrol ve çerçeve. Ölçüldüğünde 10/11/12/13/
     14/16/20 px dağınıktı. Düz çizgi diline geçen kart, liste ve künyeler 0. */
  --r-ctl:10px;
  --r-frame:14px;

  /* yazı */
  --display:'Archivo','Archivo Yedek',system-ui,sans-serif;
  --body:'Manrope','Manrope Yedek',system-ui,sans-serif;
  --mono:'JetBrains Mono','Mono Yedek',ui-monospace,monospace;

  /* yumuşama eğrileri */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ölçü */
  --nav-h:68px;
  --pad:clamp(20px,5vw,64px);
  --maxw:clamp(1280px,400px + 62vw,1600px);
  /* 30 Eylül: kap 1280 px'te sabitti; 2560 px'lik bir ekranda içerik
     ekranın yalnızca %50'sini kullanıyor, iki yanda 640'ar px boşluk
     kalıyordu. Artık geniş ekranda ölçülü büyüyor (2560'ta 1600 px).
     Metin satırları uzamıyor: başlık, giriş ve gövde paragraflarının
     kendi ch sınırları var, ölçümle doğrulandı. */

  /* sahne yazısı gölgesi: sıkı kenar, orta parıltı, geniş sönüm */
  --tshadow:0 1px 2px rgba(3,8,11,.95),0 3px 12px rgba(3,8,11,.8),0 10px 44px rgba(3,8,11,.82);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;      /* yedek */
  overflow-x:clip;        /* asıl kural */
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  font-stretch:105%;
}
p{margin:0}

/* Kalın metnin ağırlığı, yüklenen yazı tipi kesitleriyle hizalandı.
   Ölçüldü: <b> ve <strong> 700'de kalıyordu ama Manrope 700 ve JetBrains
   Mono 700 yüklenmiyordu; tarayıcı sahte kalın üretiyordu (harfleri
   şişirerek). 600 zaten başlık ağırlığı, mono tarafında da 500 yüklü.
   Böylece hem sahte kalın gitti hem iki kesit daha indirilmiyor. */
b,strong{font-weight:600}
.mref b,.salt-mark b,.xsec-foot b,.finish .txt b,.eyebrow b,.num b,.n b{font-weight:500}
a{color:inherit;text-decoration:none}

::selection{background:var(--accent);color:#0B1418}

/* --------------------------------------------------------------------------
   Sabit ortam katmanı: sayfa bir yerin içinde geziliyormuş hissi
   -------------------------------------------------------------------------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 18% 8%,rgba(40,92,104,.16),transparent 62%),
    radial-gradient(900px 700px at 86% 78%,rgba(120,94,52,.10),transparent 64%),
    radial-gradient(1300px 900px at 50% 50%,rgba(12,32,40,.5),transparent 78%);
  animation:envDrift 140s linear -22s infinite alternate;
}
@keyframes envDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.2%,1.6%,0) scale(1.07)}
}
.env::after{
  content:"";position:absolute;inset:-50%;opacity:.035;
  background-image:radial-gradient(rgba(200,220,225,.9) .6px,transparent .6px);
  background-size:3px 3px;
}

/* --------------------------------------------------------------------------
   Kabarcık zerreleri: banyoyu hatırlatır, fısıltı seviyesinde
   -------------------------------------------------------------------------- */
.bubbles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bubbles i{
  position:absolute;bottom:-8vh;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(226,240,242,.5),rgba(140,180,190,.1) 62%,transparent 72%);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.5}
  88%{opacity:.32}
  100%{transform:translate3d(var(--dx,14px),-118vh,0);opacity:0}
}

/* --------------------------------------------------------------------------
   Atlama bağlantısı ve odak
   -------------------------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#0B1418;padding:12px 20px;border-radius:0 0 10px 0;
  font-family:var(--mono);font-size:13px;font-weight:500;
}
.skip:focus{left:0}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* --------------------------------------------------------------------------
   Gezinme
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;
  padding:0 var(--pad);
  /* backdrop-filter geçişte animasyonlanıyordu: yarım saniye boyunca her
     karede yeniden bulanıklaştırma demek. Sadece arka plan geçişi kalır. */
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
/* Sabit konumlu bir öğede backdrop-filter, arkasındaki alanı HER kaydırma
   karesinde yeniden bulanıklaştırıyor; arkada tam ekran video varken en
   pahalı iş bu. Kaldırmak da olmuyor: bulanıklık olmadan videodaki yazılar
   çubuğun içinden okunuyor.
   Çözüm: işi arka plana yaptır. Opaklık .88 → .94 çıkarıldı, bulanıklık
   14px → 7px'e indi. Görsel sonuç neredeyse aynı, maliyet yarıya iniyor.
   'saturate' kaldırıldı — koyu zeminde farkı görünmüyordu, ayrı bir geçiş. */
.nav.solid{
  background:rgba(6,15,20,.96);
  border-bottom-color:var(--line);
}
/* Dokunma hedefi 26x26 ölçüldü — logonun kendi boyutu. Telefonda marka
   yazısı gizlendiği için geriye yalnızca logo kalıyor ve parmakla basılacak
   alan çok küçük oluyordu. En az 40x40 olmalı. */
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-height:40px}
@media (max-width:720px){
  .brand{padding-right:6px}
}
.brand svg{width:26px;height:26px;flex:0 0 auto}
/* Marka isareti artik gorsel: 96px kaynak 26px gosterilir, 3x ekranda net
   kalir. Amblem kare ve saydam; object-fit ile orani korunur. */
.brand .brand-mark{width:26px;height:26px;flex:0 0 auto;object-fit:contain;display:block}
.brand b{
  font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.005em;
  line-height:1.05;display:block;
}
/* 9,5px telefonda okunmuyordu; harf aralığı geniş olduğu için 10,5px'te de
   satır taşmıyor. Ölçüldü: 320px ekranda bile marka bloğu sığıyor. */
.brand span{
  display:block;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.18em;
  color:var(--text-dim);text-transform:uppercase;margin-top:2px;
}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--text-secondary);
  padding:9px 11px;border-radius:var(--r-ctl);
  transition:color .24s var(--ease),background .24s var(--ease);
}
.nav-links a:hover{color:var(--text-primary);background:rgba(255,255,255,.045)}
.nav-links a[aria-current="page"]{color:var(--text-primary)}
.nav-links a[aria-current="page"]::after{
  content:"";display:block;height:1.5px;margin-top:5px;background:var(--accent);border-radius:2px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-.005em;
  padding:13px 24px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;
  transition:transform .24s var(--ease-out),background .24s var(--ease),
             border-color .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
}
.btn-a{background:var(--accent);color:#0B1418;box-shadow:0 6px 26px rgba(201,161,94,.2)}
.btn-a:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,161,94,.26)}
.btn-b{border-color:var(--line-strong);color:var(--text-primary);background:rgba(255,255,255,.02)}
.btn-b:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px rgba(111,168,168,.08)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn svg{width:15px;height:15px}
.btn:hover svg{transform:translateX(1px)}
.btn svg{transition:transform .24s var(--ease-out)}
.nav .btn{margin-left:6px;flex:0 0 auto}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);width:42px;height:42px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--text-primary);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text-primary);
  transition:transform .35s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}

.drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:59;
  background:rgba(6,15,20,.985);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad) 26px;
  display:none;flex-direction:column;gap:2px;
}
.drawer.open{display:flex}
.drawer a{
  font-size:17px;font-weight:500;padding:13px 2px;color:var(--text-secondary);
  border-bottom:1px solid var(--line);
}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:16px}

/* Eşik 1180px'di: 1024-1180 arasındaki dizüstü ekranlarda linkler için yer
   olmasına rağmen hamburger çıkıyordu. Ölçüldü — altı link 541px, marka
   188px, CTA 81px, toplam 810px; 1024'te kenar boşluklarıyla birlikte
   rahat sığıyor. 1000'in altında sıkışıyor, eşik oraya çekildi. */
@media (max-width:960px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  /* Teklif Al mobilde de görünür kalır. Ölçüldü: 11 ekranlık bir kaplama
     sayfasında hiçbir noktada görünür bir CTA yoktu, tek yol hamburger
     menüydü. Sitenin ana eylemi menünün arkasında saklanmamalı. */
  .nav .btn{
    display:inline-flex;margin-left:auto;margin-right:10px;
    padding:9px 15px;font-size:13.5px;letter-spacing:-.005em;
    flex:none;white-space:nowrap;
  }
  /* flex bunları eziyordu: menü düğmesi 19px'e kadar düştü, marka satırı
     kırıldı. Üçü de kendi boyunu korur, sıkışacak olan marka yazısıdır. */
  /* hem CTA hem menü düğmesi margin-left:auto alınca boş alan ikiye bölünüp
     CTA ortada asılı kalıyordu; boşluk sadece CTA'dan önce verilir */
  .burger{flex:none;margin-left:0}
  /* Bu daraltma kuralları .brand'in TAMAMINA uygulanıyordu; footer'da yer
     bol olmasına rağmen marka yazısını da 1px'e eziyordu — sitede firma adı
     telefonda hiçbir yerde görünmüyordu. Artık yalnızca üst çubukta geçerli,
     orada da yazı gizlenmiyor: yalnızca gerekirse üç noktayla kısalıyor. */
  .nav .brand{min-width:0;flex:0 1 auto}
  .nav .brand > span{min-width:0;overflow:hidden}
  .nav .brand b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .nav .brand span span{font-size:var(--t-mikro);letter-spacing:.14em}
  .nav .btn svg{display:none}          /* dar alanda ok gereksiz */
}
/* Dar ekranda ÜST ÇUBUKTA marka yazısı ile CTA aynı anda sığmıyor. Yazıyı
   kısaltmak "DEĞİRMENCİO…" gibi bozuk görünüyordu; onun yerine sadece logo
   işareti kalır. İşaret zaten ana sayfaya götüren bağlantı, anlam kaybı yok.

   Kural eskiden `.brand > span` idi, yani üst çubukla sınırlı değildi:
   footer'daki marka adını da gizliyordu ve firma adı telefonda sitenin
   hiçbir yerinde görünmüyordu. Artık yalnızca üst çubukta geçerli. */
@media (max-width:480px){
  .nav .brand > span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .nav .btn{padding:10px 16px;font-size:14px;margin-right:8px}
}

/* --------------------------------------------------------------------------
   Mikron cetveli: imza öğe
   -------------------------------------------------------------------------- */
.ruler{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;
  width:34px;height:min(58vh,460px);pointer-events:none;
  display:flex;align-items:stretch;gap:9px;
}
.ruler .track{
  position:relative;width:2px;background:var(--line);border-radius:2px;overflow:hidden;flex:0 0 2px;
}
.ruler .fill{
  position:absolute;left:0;right:0;top:0;height:0%;
  background:var(--irid);
  box-shadow:0 0 12px rgba(201,161,94,.4);
}
.ruler .ticks{position:relative;flex:1;height:100%}
.ruler .ticks i{
  position:absolute;left:0;width:7px;height:1px;background:var(--line-strong);
}
.ruler .ticks i.on{background:var(--accent);width:11px}
.ruler .lab{
  position:absolute;left:0;top:-20px;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.18em;
  color:var(--text-dim);text-transform:uppercase;
}
.ruler .val{
  position:absolute;left:0;top:-40px;white-space:nowrap;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent);
}
@media (max-width:1400px),(max-height:640px){.ruler{display:none}}
/* cetvel göründüğünde sahne metni ona çarpmasın */
@media (min-width:1401px) and (min-height:641px){
  .band .inner{margin-left:74px}
  /* oturma bandı esnek kutuda ortalanır; auto kenar boşluğu onu sağa iterdi */
  .band.settle .inner{margin-left:0}
}

/* --------------------------------------------------------------------------
   ANA SAHNE: kaydırmayla oynayan video
   -------------------------------------------------------------------------- */
.hero{position:relative;height:1100vh;z-index:2}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas);
}
.stage .poster{
  position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  background-color:var(--canvas);
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}

/* 1. genel taban perdesi: hiçbir kare sayfanın arkasında çıplak kalmaz */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 45%,rgba(6,15,20,0) 34%,rgba(6,15,20,.64) 100%);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,15,20,.72) 0%,rgba(6,15,20,0) 22%,rgba(6,15,20,0) 66%,rgba(6,15,20,.8) 100%);
}

/* yükleme halkası */
.ring{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.85;
  transition:opacity .5s var(--ease);
}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring,.pstage.video-ready .ring{opacity:0}
.chev{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  width:26px;height:40px;color:var(--text-dim);
  animation:chevBob 2.6s var(--ease) -.6s infinite;
}
@keyframes chevBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* bantlar */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;
  padding:0 var(--pad);
  text-shadow:var(--tshadow);
}
.band .inner{position:relative;z-index:2;width:min(46ch,52%);pointer-events:auto}
.band.settle{justify-content:center;text-align:center}
.band.settle .inner{width:min(46ch,94%);margin-top:-6vh}
.band.settle h2{max-width:14ch;margin-left:auto;margin-right:auto}

/* 2. bant perdesi: sadece o bant açıkken karartır, köşeleri canlı bırakır */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 64% at 30% 50%,
    rgba(4,10,14,.68) 0%,rgba(4,10,14,.46) 46%,rgba(4,10,14,0) 76%);
}
/* kabarcıklı ve arklı kare en parlak olanı, bu bant daha koyu perde ister */
.band.deep::before{
  background:radial-gradient(ellipse 80% 68% at 30% 50%,
    rgba(4,10,14,.78) 0%,rgba(4,10,14,.56) 46%,rgba(4,10,14,0) 78%);
}
.band.settle::before{
  background:radial-gradient(ellipse 66% 58% at 50% 44%,
    rgba(4,10,14,.72) 0%,rgba(4,10,14,.5) 46%,rgba(4,10,14,0) 76%);
}

.band .kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.band h1,.band h2{
  font-size:clamp(38px,5.6vw,80px);
  font-weight:600;letter-spacing:-.03em;line-height:1.02;
}
.band .sub{
  margin-top:20px;font-size:clamp(16px,1.5vw,20px);color:var(--text-primary);
  opacity:.9;max-width:34ch;line-height:1.5;
}
.band.settle .sub{margin-left:auto;margin-right:auto}
.band .cta-row{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.band.settle .cta-row{justify-content:center}
.band .btn{text-shadow:none}

/* DİKEY EKRANDA SAHNE — kırpmadan.
   Video 16:9, telefon ekranı 9:19,5. Tam ekran kaplatınca karenin %25'i
   görünüyordu; kırpmak da kadrajı bozuyor. Onun yerine kare hiç kırpılmıyor:
   video ekranın ortasında 16:9 bir kutuya oturuyor, üstü ve altı sayfanın
   kendi zemini kalıyor. Sahne yine 400vh boyunca sabit; video bitince sayfa
   akmaya devam ediyor.

   Metin sütunu da masaüstü için kurulmuştu (min(46ch,52%)) — 390px ekranda
   182px'e sıkışıyordu. Portrede tam genişlik alıp videonun altına yerleşir. */
@media (max-width:720px), (orientation:portrait) and (max-width:960px){
  .stage video,
  .stage .poster{
    inset:auto 0 auto 0;
    top:50%;transform:translateY(-50%);
    height:auto;aspect-ratio:16/9;
  }
  /* Perde ve vinyet metni videonun ÜSTÜNDE okunur kılmak içindi. Portrede
     metin videonun altına indi, perdeye gerek kalmadı — üstelik tüm ekranı
     kapladığı için 16:9 kutunun kenarında görünür bir dikiş bırakıyordu. */
  .stage .scrim,.stage .vignette{display:none}

  .band{align-items:flex-end;padding-bottom:calc(7vh + env(safe-area-inset-bottom,0px))}
  .band .inner{width:100%}
  .band h1,.band h2{font-size:clamp(30px,7.6vw,46px);letter-spacing:-.03em}
  .band .kicker{margin-bottom:12px}
  .band .sub{margin-top:12px;font-size:16px;max-width:32ch}
  .band .cta-row{margin-top:20px;gap:11px}
  .band.settle .inner{text-align:center}
}

/* 3. küçük yazı için jeton perdesi */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(6,14,19,.58);border:1px solid rgba(96,120,128,.3);
  border-radius:var(--r-ctl);padding:7px 13px;backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-shadow:0 1px 3px rgba(3,8,11,.9);
  box-shadow:0 10px 24px rgba(5,12,17,.12);
  transition:transform .4s var(--ease-out),border-color .35s var(--ease),box-shadow .4s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:rgba(201,161,94,.34);box-shadow:0 14px 30px rgba(5,12,17,.18)}

/* harf ve kelime kutuları */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* (a) dağınık toplanma */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (f) aşağı süzülme */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (d) kelime vuruşu */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (c) bulanıktan keskine
   DİKKAT: konumlandırma h2 üzerinde durur. Bandın kendisine position:relative
   verilirse .band'in position:absolute kuralı ezilir ve bant ekranı kaplamaz. */
.e-blur h2{position:relative}
.e-blur .soft{position:absolute;left:0;top:0;width:100%;filter:blur(5px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp,.e-blur .soft{display:block}
.e-blur .sharp{opacity:var(--k,0)}
/* (e) kelime kelime yükselme, kademeli oturma */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .6)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .cta-row{--kb:clamp(0,(var(--k,0) - .74)*4.2,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}

/* --------------------------------------------------------------------------
   Sabit sahne: telefon, dikey tablet, hareket azaltma
   -------------------------------------------------------------------------- */
.still-hero{display:none;position:relative;min-height:92vh;z-index:2;
  align-items:flex-end;padding:calc(var(--nav-h) + 40px) var(--pad) 60px;overflow:hidden}
.still-hero .bg{position:absolute;inset:0;background-size:cover;background-position:52% 50%}
.still-hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,15,20,.82) 0%,rgba(6,15,20,.34) 34%,rgba(6,15,20,.92) 100%);
}
.still-hero .inner{position:relative;z-index:2;width:100%;text-shadow:var(--tshadow)}
.still-hero h1,.still-hero .hero-title{font-size:clamp(34px,8.4vw,56px);letter-spacing:-.03em;margin-top:16px;font-family:var(--display);font-weight:600;line-height:1.06}
.still-hero .sub{margin-top:18px;color:var(--text-primary);opacity:.92;max-width:32ch;font-size:16.5px}
.still-hero .cta-row{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
.still-hero .btn{text-shadow:none}

/* Telefon eşikleri çıkarıldı: kaydırmalı sahne artık mobilde de çalışıyor,
   dikey (9:16) kaynakla. Sabit sahneye yalnızca çok kısa yatay ekran ve
   hareket azaltma düşürür. Veri tasarrufu ve JS kapalı ayrı kurallarda. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .still-hero{display:flex}
}

/* Veri tasarrufu / 2G: video hiç indirilmez, o yüzden kaydırmalı düzen değil
   sabit sahne gösterilir. Aksi halde poster donuk kalıp yazılar hiç açılmıyor
   ve yükleme halkası sonsuza kadar dönüyordu. */
body.veri-kisitli .hero,
body.veri-kisitli .pscrub,
body.veri-kisitli .turn{display:none}
body.veri-kisitli .still-hero{display:flex}
body.veri-kisitli .pstill,
body.veri-kisitli .turn-still{display:block}

/* JavaScript yoksa kaydırmalı sahneleri kur(a)mıyoruz: poster de JS ile
   konuyor, o yüzden boş bir sahne ve sonsuza kadar dönen yükleme halkası
   kalıyordu. Aynı sabit karşılıklara düşülür. */
html:not(.js) .hero,
html:not(.js) .pscrub,
html:not(.js) .turn,
html:not(.js) .hrail-prog,
html:not(.js) .hrail-cue{display:none}
html:not(.js) .still-hero{display:flex}
html:not(.js) .pstill,
html:not(.js) .turn-still{display:block}

/* dar ve kısa ekranlarda kaydırma sürüyor ama küçük katmanlara yer yok */
@media (max-height:560px){.ruler,.chev,.bubbles{display:none}}

/* --------------------------------------------------------------------------
   Sayfa gövdesi
   -------------------------------------------------------------------------- */
main{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(78px,11vh,140px) 0;position:relative}
.sec.alt{background:linear-gradient(180deg,transparent,var(--canvas-2) 12%,var(--canvas-2) 88%,transparent)}

.eyebrow{
  display:flex;align-items:center;gap:13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--accent);opacity:.6;flex:0 0 26px;
}
.sec h2{font-size:var(--h-sec);letter-spacing:-.028em;max-width:20ch}
h2.h-alt,.sec h2.h-alt{font-size:var(--h-alt)}
.sec .lede{margin-top:22px;font-size:clamp(16.5px,1.7vw,19.5px);color:var(--text-secondary);max-width:58ch;line-height:1.6}

/* kendi çizilen ayraç */
.rule{width:100%;height:1px;overflow:visible;margin:0}
.rule line{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.5s var(--ease-out)}
.in .rule line,.rule.in line{stroke-dashoffset:0}

/* giriş koreografisi */
/* Giriş animasyonu yalnızca JavaScript çalışıyorsa gizleyerek başlar.
   Ölçüldü: JS kapalıyken 15-25 bölüm opaklık 0'da kalıyordu, yani sayfa
   neredeyse boş görünüyordu. <html> etiketine 'js' sınıfı head'de ekleniyor;
   JS yoksa sınıf hiç eklenmez ve her şey görünür kalır. */
.js .rev{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .rev.in{opacity:1;transform:none}
.js .stag > *{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .stag.in > *{opacity:1;transform:none}
.js .stag > .card:nth-child(odd){transform:translateY(24px) scale(.985)}
.js .stag > .card:nth-child(even){transform:translateY(18px) scale(.99)}
.js .stag.in > .card:nth-child(odd),
.js .stag.in > .card:nth-child(even){transform:translateY(0) scale(1)}
.js .stag.in > *:nth-child(1){transition-delay:.02s}
.js .stag.in > *:nth-child(2){transition-delay:.10s}
.js .stag.in > *:nth-child(3){transition-delay:.18s}
.js .stag.in > *:nth-child(4){transition-delay:.26s}
.js .stag.in > *:nth-child(5){transition-delay:.34s}
.js .stag.in > *:nth-child(6){transition-delay:.42s}
.js .stag.in > *:nth-child(7){transition-delay:.50s}
.js .stag.in > *:nth-child(8){transition-delay:.58s}
/* giriş bitince gecikmeleri emekli et, yoksa her hover geç kalır */
.stag.done > *:nth-child(n){transition-delay:0s !important}

/* --------------------------------------------------------------------------
   Kartlar
   -------------------------------------------------------------------------- */
/* Satir araligi sutun araligindan genis: kartlar artik kutu degil, ust
   cizgiyle ayriliyor ve alt alta gelince nefes almasi gerekiyor. */
.grid{display:grid;gap:36px 24px;margin-top:52px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}

@media (max-width:960px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* BILGI KARTI
   Eskiden yuvarlak koseli, dolgulu, kenarlikli bir kutuydu; ustune gelince
   ziplayip golge birakiyordu. Sitenin geri kalani — adim listeleri, sektor
   satirlari, kunye tablolari — ince cizgiyle ayrilan duz bir teknik dokuman
   dili konusuyor. Kartlar tek basina baska bir dil konusuyordu ve her yerde
   ayni olculerde tekrar edince sayfa katalogdan cok sunum gibi duruyordu.
   Ayni dile alindi: ustte bir cizgi, altinda icerik. Kutu, golge ve ziplama
   yok; uzerine gelince yalnizca cizginin aksan parcasi uzuyor. */
.card{
  position:relative;background:none;border:0;border-radius:0;
  padding:20px 0 2px;overflow:visible;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line-strong);
}
.card::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:30px;
  background:var(--accent);
  transition:width .4s var(--ease-out);
}
.card:hover::after{width:64px}
.card .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:14px;
}
.card h3{font-size:var(--h-kart);letter-spacing:-.018em;line-height:1.22}
.card p{margin-top:12px;color:var(--text-secondary);font-size:15.5px;line-height:1.58}
/* Kutu gidince kartlar arasi bosluk cizgiyi tasimaya yetmiyor. */
.article-main .card + .card,.article-side .card + .card{margin-top:38px}
.card .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.card .more svg{width:13px;height:13px;transition:transform .4s var(--ease-out)}
a.card:hover .more svg{transform:translateX(4px)}

/* problem kartları: uyarı tonunda */
.card.warn .num{color:var(--steel)}

/* proses adımları */
.steps{counter-reset:s;margin-top:52px;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:78px 1fr;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .24s var(--ease),transform .24s var(--ease-out),padding-left .24s var(--ease-out);
}
.step::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:999px;
  background:linear-gradient(180deg,rgba(201,161,94,0),rgba(201,161,94,.9),rgba(111,168,168,0));
  transform:scaleY(.22);transform-origin:50% 0;opacity:0;
  transition:transform .45s var(--ease-out),opacity .35s var(--ease);
}
.step:hover{background:rgba(255,255,255,.018);padding-left:8px;transform:none}
.step:hover::before{transform:scaleY(1);opacity:1}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent)}
.step h3{font-size:var(--h-kart);letter-spacing:-.018em;line-height:1.22}
.step p{margin-top:9px;color:var(--text-secondary);font-size:15.5px;max-width:62ch}
/* Numarasiz liste. Numara yalnizca gercekten sirali seylerde durur:
   proses adimlari, secim sorulari, video anlatiminin evreleri. Kullanim
   alanlari, sektorler ve parca tipleri katalogdur — orada numara sira
   varmis gibi gosteriyor ve alti listede ayni kalibi tekrarliyordu. */
.steps.duz .step{grid-template-columns:1fr;gap:0}

@media (max-width:620px){.step{grid-template-columns:1fr;gap:6px}}

/* sektör satırları */
.sect-list{margin-top:48px;border-top:1px solid var(--line)}
.sect-row{
  display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .24s var(--ease),padding-left .24s var(--ease-out),transform .24s var(--ease-out);
}
.sect-row::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:999px;
  background:linear-gradient(180deg,rgba(201,161,94,0),rgba(201,161,94,.9),rgba(111,168,168,0));
  transform:scaleY(.18);transform-origin:50% 0;opacity:0;
  transition:transform .4s var(--ease-out),opacity .3s var(--ease);
}
.sect-row:hover{background:rgba(255,255,255,.02);padding-left:8px;transform:none}
.sect-row:hover::before{transform:scaleY(1);opacity:1}
.sect-row b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.sect-row span{color:var(--text-secondary);font-size:15px}
@media (max-width:720px){.sect-row{grid-template-columns:1fr;gap:5px}}

/* teknik değer tablosu */
.spec{width:100%;border-collapse:collapse;margin-top:32px;font-size:15.5px}
.spec th,.spec td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;width:44%;
}
.spec td{color:var(--text-primary);font-family:var(--mono);font-size:14px}
/* ilk sutun satirin adidir, veri degil: baslik yazisiyla daha hizli taranir */
.spec tbody td:first-child{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.012em;
}
.spec-wrap{overflow-x:auto}

/* medya bloğu */
.media{
  border-radius:var(--r-frame);overflow:hidden;border:1px solid var(--line);position:relative;
  background:var(--panel);
}
.media img{width:100%;height:100%;object-fit:cover}
/* Mobil kart videosu: sabit fotoğrafın üzerine biner, hazır olunca belirir.
   Fotoğraf altta durmaya devam eder — video inmezse ya da hata verirse
   ziyaretçi hiçbir şey kaybetmez. */
.media .kart-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.media.kart-video-hazir .kart-video{opacity:1}

/* SABİTLENEN KART — telefonda video kartı ekranda durur, kaydırdıkça video
   sürülür, bitince sayfa akmaya devam eder. Masaüstündeki sahnelerin
   davranışının aynısı, sadece tam ekran yerine ortalanmış bir kart.

   Yükseklik yalnızca video hazır olduğunda veriliyor (.surulebilir). Video
   inmezse, veri tasarrufu açıksa ya da JavaScript kapalıysa kart normal
   akışta kalır ve boşuna kaydırma alanı açılmaz. */
.kart-yol{position:relative}
@media (max-width:720px), (orientation:portrait) and (max-width:960px){
  .kart-yol.surulebilir{height:280vh}
  .kart-yol.surulebilir .kart-sabit{
    position:sticky;top:0;height:100vh;
    display:flex;align-items:center;
  }
  .kart-yol.surulebilir .media{width:100%;margin-top:0}
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:56px}
/* Grid çocuğunun varsayılan min-width'i 'auto'dur: içindeki geniş bir öğe
   (künye tablosu gibi) sütunu kendi genişliğine zorlar ve dar ekranda
   taşırır. 320px'de ölçüldü: blok 280px yerine 317px oluyordu. */
.split > *{min-width:0}
.split.rev-order .media{order:-1}
@media (max-width:960px){.split{grid-template-columns:1fr}.split.rev-order .media{order:0}}
/* Icinde form olan bolum daha gec bolunur. Olculdu: 900 px'de iki sutuna
   girince alanlar 182 px'e dusuyor, acilir listenin metni ve yer tutucular
   kirpiliyordu. Tek sutunda 768 px'de rahat duruyor. */
@media (max-width:1080px){.split.genis{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Basılı tut, kaplansın: tek etkileşim anı
   -------------------------------------------------------------------------- */
.coat{
  margin-top:56px;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);align-items:center;
}
@media (max-width:960px){.coat{grid-template-columns:1fr}}

.coat-stage{
  position:relative;border-radius:var(--r-frame);overflow:hidden;border:1px solid var(--line);
  background:#0A1319;aspect-ratio:16/9;
}
.coat-stage .raw,.coat-stage .done{position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.coat-stage .raw{filter:grayscale(1) brightness(.62) contrast(1.1)}
.coat-stage .done{clip-path:inset(calc((1 - var(--p,0))*100%) 0 0 0)}
.coat-stage .edge{
  position:absolute;left:0;right:0;height:2px;
  top:calc((1 - var(--p,0))*100%);
  background:var(--irid-h);opacity:calc(.25 + .75*var(--p,0));
  box-shadow:0 0 18px rgba(201,161,94,.55);
  will-change:top;
}
.coat-read{
  position:absolute;right:14px;top:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
}
.coat-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;
  transition:opacity .5s var(--ease);
}
.coat-stage.active .coat-hint{opacity:0}

.hold{
  width:100%;margin-top:22px;position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-strong);color:var(--text-primary);
  border-radius:var(--r-frame);padding:16px 22px;font-family:var(--body);font-weight:600;font-size:15.5px;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.hold::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--accent);opacity:.14;
  transform:scaleX(var(--p,0));transform-origin:left;
}
.hold span{position:relative}
.hold:hover{border-color:var(--accent)}
.hold.full{border-color:var(--accent);color:var(--accent)}

.checks{margin-top:26px;list-style:none;padding:0;display:grid;gap:12px}
.checks li{
  display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;
  color:var(--text-dim);font-size:15.5px;
  transition:color .6s var(--ease);
}
.checks li .dot{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);
  margin-top:4px;position:relative;transition:border-color .6s var(--ease),background .6s var(--ease);
}
.checks li .dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  opacity:0;transition:opacity .6s var(--ease);
}
.checks li.on{color:var(--text-primary)}
.checks li.on .dot{border-color:var(--accent)}
.checks li.on .dot::after{opacity:1}

/* ==========================================================================
   MİKRON KESİTİ: kaydırdıkça kaplama büyür, verdikt değişir
   ========================================================================== */
.xsec{margin-top:56px;position:relative;height:230vh}
.xsec-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}
.xsec-stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r-frame);overflow:hidden;
  background:linear-gradient(180deg,#0A1A21,#071016);
  padding:46px clamp(20px,4vw,54px) 0;
}
.xsec-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:30px;flex-wrap:wrap;
}
.xsec-top .lab{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);
}
.xsec-read{
  font-family:var(--mono);font-size:clamp(30px,4.6vw,52px);font-weight:500;
  color:var(--accent);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.xsec-plot{position:relative;height:190px;display:flex;align-items:flex-end}
.xsec-metal{
  position:relative;width:100%;height:112px;border-radius:2px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#59636B,#39434A 42%,#2A3238);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}
/* kaplama katmanı: en fazla 62px, çeliğin yarısından ince kalır.
   Gerçekte oran çok daha küçüktür, buradaki abartma sadece görünür olsun diyedir. */
.xsec-coat{
  position:absolute;left:0;right:0;bottom:112px;
  height:calc(var(--t,0)*62px + 2px);
  background:var(--irid);
  box-shadow:0 -2px 24px rgba(201,161,94,.3);
  will-change:height;
}
.xsec-coat::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:rgba(255,255,255,.6);
}
/* eşik çizgileri: 8 µm ve 18 µm, 30 µm'lik cetvelde */
.xsec-guide{
  position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(163,174,175,.26);
  pointer-events:none;
}
/* etiketler gradyanın üstüne düştüğü için kendi koyu jetonlarını taşır,
   ve çizgiler birbirine yakın olduğundan biri altta biri üstte durur */
.xsec-guide span{
  position:absolute;left:10px;
  background:rgba(5,12,17,.86);padding:2px 8px;border-radius:5px;
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.08em;color:var(--text-secondary);
  line-height:1.5;
}
.xsec-guide.g8{bottom:calc(112px + 8/30*62px)}
.xsec-guide.g8 span{top:3px}
.xsec-guide.g18{bottom:calc(112px + 18/30*62px)}
.xsec-guide.g18 span{top:-19px}
.xsec-guide.g25{bottom:calc(112px + 25/30*62px)}
.xsec-guide.g25 span{top:-19px}
.xsec-base{
  position:absolute;left:12px;bottom:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,239,240,.5);
}
.xsec-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:34px;
}
.xsec-foot div{
  padding:20px 18px;border-right:1px solid var(--line);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.xsec-foot div:last-child{border-right:0}
/* DİKKAT: burada text-transform:uppercase KULLANILMAZ.
   Büyük harfe çevirme µ işaretini Μ'ye döndürüyor ve "µm" ekranda "MM" gibi
   okunuyor. Mikron ile milimetre bu sektörde bin kat fark demek. */
.xsec-foot b{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--text-dim);margin-bottom:8px;
  transition:color .5s var(--ease);
}
.xsec-foot p{font-size:15px;color:var(--text-dim);transition:color .5s var(--ease)}
.xsec-foot div.on{background:rgba(201,161,94,.07)}
.xsec-foot div.on b{color:var(--accent)}
.xsec-foot div.on p{color:var(--text-primary)}
.xsec-hint{
  margin-top:16px;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim);
  text-align:center;
}
@media (max-width:720px){
  .xsec{height:210vh}
  .xsec-foot{grid-template-columns:1fr}
  .xsec-foot div{border-right:0;border-bottom:1px solid var(--line)}
  .xsec-plot{height:190px}
}

/* ==========================================================================
   TAM EKRAN DURAK: bölümler arası nefes
   ========================================================================== */
.slab{
  position:relative;min-height:min(74vh,660px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;z-index:2;
  padding:80px var(--pad);
}
.slab .bg{
  position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  transform:scale(1.06);
}
.slab .bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 66% at 50% 50%,rgba(5,12,17,.62) 0%,rgba(5,12,17,.82) 70%),
    linear-gradient(180deg,var(--canvas) 0%,rgba(6,15,20,0) 18%,rgba(6,15,20,0) 82%,var(--canvas) 100%);
}
/* genişlik kapağı px ile: ch kapsayıcıda gövde yazısına göre ölçülür,
   içerideki başlık yazısına göre değil */
.slab .inner{position:relative;z-index:2;max-width:min(940px,92%)}
.slab p.line{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,4.4vw,54px);letter-spacing:-.028em;line-height:1.08;
  text-shadow:var(--tshadow);max-width:18ch;margin-left:auto;margin-right:auto;
}
.slab p.note{
  margin-top:20px;font-size:16.5px;color:var(--text-secondary);
  max-width:38ch;margin-left:auto;margin-right:auto;text-shadow:0 1px 6px rgba(5,12,17,.9);
}
.slab .mark{
  display:block;width:34px;height:2px;margin:0 auto 26px;background:var(--irid-h);
  transform:scaleX(0);transform-origin:center;transition:transform 1s var(--ease-out) .1s;
}
.slab.in .mark{transform:scaleX(1)}

/* ==========================================================================
   PROSES: ikinci kaydırmalı video
   ========================================================================== */
.pscrub{position:relative;height:560vh;z-index:2}
.pstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.pstage .poster{position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.pstage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0);
}
.pstage.video-ready video{opacity:1}
.pstage.video-failed video{display:none}
/* Metin sol sütunda duruyor, fabrika karesi ise parlak. Sol taraf yazının
   okunacağı kadar koyu, sağ taraf video görünsün diye canlı bırakılıyor.
   Değerler en kötü kare denetimiyle belirlendi, gözle değil. */
/* Perde gucu bant basina ayarlanir. Parlak cekim koyu perde ister,
   koyu cekim ince perde. Ayni perdeyi ikisine de uygulamak koyu klibi gomuyor. */
.pstage .pscrim{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--scrim-k,1);
  background:
    radial-gradient(ellipse 78% 82% at 20% 50%,rgba(4,10,14,.72) 0%,rgba(4,10,14,.5) 50%,rgba(4,10,14,0) 82%),
    linear-gradient(90deg,rgba(5,12,17,.95) 0%,rgba(5,12,17,.9) 40%,rgba(5,12,17,.66) 56%,rgba(5,12,17,.18) 76%,rgba(5,12,17,.46) 100%),
    linear-gradient(180deg,rgba(5,12,17,.82) 0%,rgba(5,12,17,0) 24%,rgba(5,12,17,0) 70%,rgba(5,12,17,.88) 100%);
}
.pinner{
  position:relative;z-index:2;height:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad);display:flex;flex-direction:column;justify-content:center;
}
.pinner .eyebrow{margin-bottom:16px}
.pinner h2{
  font-size:var(--h-sec);letter-spacing:-.028em;max-width:16ch;
  text-shadow:var(--tshadow);
}
.psteps{margin-top:38px;max-width:640px;position:relative}
.pstep{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  padding:11px 0;position:relative;
  opacity:.34;transition:opacity .55s var(--ease),transform .55s var(--ease-out);
  transform:translateX(-6px);
}
.pstep.on{opacity:1;transform:none}
.pstep .n{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--text-dim);
  padding-top:5px;transition:color .55s var(--ease);
}
.pstep.on .n{color:var(--accent)}
.pstep h3{
  font-size:clamp(17px,1.9vw,23px);letter-spacing:-.018em;
  text-shadow:var(--tshadow);
}
.pstep p{
  margin-top:5px;font-size:15px;color:var(--text-primary);max-width:48ch;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease-out),opacity .5s var(--ease),margin-top .5s var(--ease);
  text-shadow:var(--tshadow);
}
.pstep.on p{opacity:.92}
.pstep.on p{max-height:9em;opacity:1}
.prail{
  position:absolute;left:22px;top:8px;bottom:8px;width:1.5px;background:var(--line);
  border-radius:2px;overflow:hidden;
}
.prail i{
  position:absolute;left:0;right:0;top:0;height:calc(var(--pp,0)*100%);
  background:var(--irid);box-shadow:0 0 12px rgba(201,161,94,.45);
}
.pstage .ring{color:var(--accent)}

/* proses için sabit hal */
.pstill{display:none;position:relative;z-index:2}
.pstill .media{margin-top:38px}

@media (max-width:720px),
       (orientation:portrait) and (max-width:960px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .pscrub{display:none}
  .pstill{display:block}
}

/* ==========================================================================
   KAPLAMA KARTLARI: gerçek yüzey rengi taşır
   ========================================================================== */
.card.coat-card{
  padding:0;overflow:hidden;position:relative;
  min-height:290px;display:flex;align-items:flex-end;
}
/* Kutulu kartin ust cizgileri burada kazara duruyor: kart artik bir sahne,
   cerceve degil. Kimlik cizgisi altta, pasivasyon yanardonerligi olarak. */
.card.coat-card::before,.card.coat-card::after{content:none}
/* SİNEMATİK ÖRTÜ — metin görselin üstünde, ayrı kutu yok.
   Sitenin tamamı kaydırmalı video ve tam ekran sahne dilinde; ayrı kutulu
   kart o dile yabancı duruyordu. Kart artık küçük bir sahne.
   Görsel .swatch'ta kalıyor çünkü ertelenmiş yükleme ona bağlı. */
.card.coat-card .swatch{
  position:absolute;inset:0;
  background-color:var(--sw,#8A8F8C);
  background-size:cover;
  background-position:var(--kart-poz,50% 50%);
  transition:transform .8s var(--ease);
}
/* Kart görseli ekrana yaklaşınca iniyor. Değişken satır içinde duruyor ama
   KULLANILMADIĞI sürece tarayıcı istek atmıyor; sınıf gelince atıyor.
   Ölçüldü: ana sayfa açılırken 6 kart görseli (~500 KB) hero posterinden
   önce iniyordu. O ana kadar yerinde kaplamanın kendi rengi duruyor. */
.card.coat-card.gorsel .swatch{background-image:var(--kart)}
.card.coat-card:hover .swatch{transform:scale(1.04)}

/* Perde: metin fotoğrafın üstünde okunacak. Alt uç koyu tutuluyor,
   kontrast ölçülerek belirlendi. */
.card.coat-card .swatch::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(6,15,20,.12) 0%,rgba(6,15,20,.30) 42%,
    rgba(6,15,20,.74) 74%,rgba(6,15,20,.92) 100%);
}
/* Pasivasyon yanardönerliği: şiddeti kaplamanın kendi değeri, fosfatta sıfır. */
.card.coat-card .swatch::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--irid-h);opacity:var(--irid-op,0);
}
.card.coat-card .ic{position:relative;padding:22px;width:100%}
.card.coat-card .deger{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:rgba(255,255,255,.88);
}
.card.coat-card h3{
  font-family:var(--display);font-size:clamp(20px,1.6vw,23px);
  letter-spacing:-.02em;margin:7px 0 6px;color:#fff;
  text-shadow:0 1px 14px rgba(6,15,20,.5);
}
.card.coat-card .num{
  display:block;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
@media (max-width:620px){
  .card.coat-card{min-height:240px}
  .card.coat-card .ic{padding:18px}
}

/* görsellere perde açılışı */
.media img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out),transform 1.2s var(--ease-out);transform:scale(1.06)}
.media.in img,.in .media img,.rev.in.media img{clip-path:inset(0 0 0 0);transform:none}

/* .sec .ghost kaldırıldı: bölümlerin sağ üstündeki dev soluk rakamlar.
   .wrap'in z-index'i duruyor — bölüm arka planları (.sbg) hâlâ altında. */
.sec .wrap{position:relative;z-index:1}

/* ==========================================================================
   PARÇA TEZGAHI: kaydırdıkça parça döner, açıya göre detay açılır
   Tam ekran degil, cerceve icinde: 1080p video ~700px genislikte gosterilince
   ekrana gerilmedigi icin gercekten keskin gorunur.
   ========================================================================== */
.turn{position:relative;z-index:2;height:400vh}
.turn-sticky{position:sticky;top:0;height:100vh;overflow:hidden}

/* Sahne tam ekran: kenardan kenara yayilir, kutu yok. */
.turn-stage{position:absolute;inset:0;background:#080F14;overflow:hidden}
.turn-stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0);
}
.turn-stage.video-ready video{opacity:1}
.turn-stage .poster{position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.turn-stage .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;color:var(--accent);opacity:.9;transition:opacity .5s var(--ease)}
.turn-stage.video-ready .ring{opacity:0}
/* Perde: ust ve alt seritler yazi icin, sol alt kosede aciklama icin.
   Orta acik kalir, parca tam gorunur. Degerler en kotu kare denetimiyle secildi. */
/* Bazi kliplerde parca tam basligin altina geliyor. O sayfalar icin
   --tsk ile ek bir ust perde acilir; digerlerinde 0 kalir. */
.turn-stage .grade::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--tsk,0);
  background:linear-gradient(180deg,rgba(5,12,17,.92) 0%,rgba(5,12,17,.66) 20%,
    rgba(5,12,17,.22) 32%,rgba(5,12,17,0) 44%);
}
.turn-stage .grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 46% at 4% 96%,rgba(4,10,14,.8) 0%,rgba(4,10,14,.46) 50%,rgba(4,10,14,0) 80%),
    /* ust serit basligin oturdugu bandi (%10-%24) kapsayacak kadar uzun */
    linear-gradient(180deg,rgba(5,12,17,.9) 0%,rgba(5,12,17,.78) 15%,rgba(5,12,17,.5) 25%,
      rgba(5,12,17,.14) 34%,rgba(5,12,17,0) 42%,
      rgba(5,12,17,0) 60%,rgba(5,12,17,.5) 80%,rgba(5,12,17,.9) 100%);
}

/* icerik katmani videonun ustunde */
.turn-ui{position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 26px) var(--pad) 26px}
.turn-ui .wrap{padding:0;width:100%;max-width:var(--maxw);margin:0 auto}
.turn-head{text-align:center;text-shadow:var(--tshadow)}
.turn-head .eyebrow{justify-content:center;margin-bottom:12px}
.turn-head h2{font-size:var(--h-sec);letter-spacing:-.028em;max-width:22ch;margin:0 auto}
.turn-head .lede{margin:10px auto 0;color:var(--text-primary);opacity:.9;
  max-width:62ch;font-size:15.5px;line-height:1.5;text-align:center}

.turn-cap{
  position:absolute;left:var(--pad);bottom:112px;max-width:min(38ch,40%);
  background:rgba(5,12,17,.78);border:1px solid rgba(96,120,128,.3);
  border-radius:var(--r-frame);padding:15px 17px;backdrop-filter:blur(12px);
  text-shadow:0 1px 3px rgba(3,8,11,.9);pointer-events:auto;
}
.turn-cap .n{font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.18em;color:var(--accent)}
.turn-cap h3{margin-top:5px;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.015em}
.turn-cap p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--text-primary);opacity:.94}

.turn-hud{position:absolute;right:var(--pad);top:calc(var(--nav-h) + 26px);
  display:flex;gap:8px;align-items:center}
.turn-hud .chip{font-size:11px;letter-spacing:.12em}
.turn-cue{
  position:absolute;right:var(--pad);bottom:112px;
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);text-shadow:0 1px 4px rgba(3,8,11,.9);
  transition:opacity .5s var(--ease);
}
.turn.moved .turn-cue{opacity:0}

/* alt serit: dort baslik, aktif olan yanar */
.tnotes{
  position:absolute;left:var(--pad);right:var(--pad);bottom:26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px);
  max-width:var(--maxw);margin:0 auto;
  border-top:1px solid rgba(163,174,175,.24);padding-top:14px;
  text-shadow:0 1px 4px rgba(3,8,11,.9);
}
.tnotes .trail{
  position:absolute;left:0;top:-1px;height:2px;width:calc(var(--tp,0)*100%);
  background:var(--irid-h);box-shadow:0 0 10px rgba(201,161,94,.45);
}
.tnote{opacity:.4;transition:opacity .5s var(--ease)}
.tnote.on{opacity:1}
.tnote .n{font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.18em;color:var(--text-secondary);
  transition:color .5s var(--ease)}
.tnote.on .n{color:var(--accent)}
.tnote h3{margin-top:4px;font-size:clamp(14px,1.2vw,17px);letter-spacing:-.012em;line-height:1.25}
.turn .tnote p{display:none}

@media (max-width:960px){
  .turn-cap{max-width:none;right:var(--pad);bottom:132px}
  .tnotes{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .turn-cue{display:none}
}

/* sabit hal: telefon, dikey tablet, hareket azaltma */
.turn-still{display:none;position:relative;z-index:2}
.turn-still .tnote{opacity:1;transform:none}
.turn-still .tnote p{max-height:none;opacity:1}

@media (max-width:960px){
  
}
@media (max-width:720px),
       (orientation:portrait) and (max-width:960px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .turn{display:none}
  .turn-still{display:block}
}

/* --------------------------------------------------------------------------
   Sık sorulanlar
   -------------------------------------------------------------------------- */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:18.5px;letter-spacing:-.015em;
  transition:color .35s var(--ease),padding-left .35s var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--accent);
  opacity:.75;transform:translateY(-50%);
  transition:width .35s var(--ease-out);
}
.faq summary:hover{color:var(--accent);padding-left:18px}
.faq summary:hover::before{width:12px}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 24px;color:var(--text-secondary);font-size:16px;max-width:70ch;line-height:1.62}
.faq .ans a{color:var(--accent);font-weight:600}
.faq .ans a:hover{color:var(--accent-hover)}

/* --------------------------------------------------------------------------
   Kapanış çağrısı
   -------------------------------------------------------------------------- */
.close-cta{
  position:relative;overflow:hidden;border-radius:var(--r-frame);border:1px solid var(--line);
  padding:clamp(48px,7vw,88px) clamp(28px,5vw,68px);text-align:center;
  background:var(--panel);
  box-shadow:0 20px 44px rgba(5,12,17,.18);
}
.close-cta .bg{
  position:absolute;inset:0;background-size:cover;background-position:50% 62%;opacity:.78;
  transform:scale(1.03);
  animation:ctaDrift 18s var(--ease) -4s infinite alternate;
}
.close-cta .bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 68% at 50% 48%,rgba(6,15,20,.5) 0%,rgba(6,15,20,.72) 58%,rgba(6,15,20,.9) 100%);
}
.close-cta .inner{position:relative;z-index:2}
.close-cta h2{font-size:clamp(30px,4.6vw,58px);margin:0 auto;max-width:18ch}
.close-cta p{margin:20px auto 0;color:var(--text-secondary);max-width:52ch;font-size:17px}
.close-cta p.eyebrow{margin:0 0 22px;color:var(--accent);max-width:none;font-size:11px}
.close-cta .cta-row{display:flex;gap:13px;justify-content:center;margin-top:36px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
/* .form{display:grid} 'hidden' özniteliğini eziyordu; onay gelince form
   gizlenemiyordu. [hidden] her zaman kazanmalı. */
[hidden]{display:none !important}
.form{margin-top:44px;display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){.form .row{grid-template-columns:1fr}}
.field label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:9px;
}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);padding:14px 15px;color:var(--text-primary);
  font-family:var(--body);font-size:16px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:var(--panel-2);outline:none;
}
/* Klavyeyle gelindiginde halka geri gelir. outline:none yalnizca fare ve
   dokunusta gecerli; klavye kullanicisi icin gorunur gosterge sart
   (WCAG 2.4.7). Ayni ozgulluk, sonra geldigi icin bu kazanir. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field .note{margin-top:9px;font-size:13.5px;color:var(--text-dim)}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.form-foot .small{font-size:13.5px;color:var(--text-dim);max-width:44ch}

.form-ok{
  display:none;border:1px solid var(--accent);background:rgba(201,161,94,.07);
  border-radius:var(--r-frame);padding:28px 26px;margin-top:44px;
}
.form-ok.show{display:block}
.form-ok h3{font-size:22px;color:var(--accent)}
.form-ok p{margin-top:12px;color:var(--text-secondary);font-size:16px}

/* iletişim kartları */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}
/* Iletisim kartlari da ayni aileden: kutu degil, ustunde cizgi olan bir
   kunye blogu. Numara ve e-posta zaten tiklanabilir, kutuya gerek yok. */
.contact-card{
  position:relative;background:none;border:0;border-radius:0;padding:20px 0 2px;
}
.contact-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-strong);
}
.contact-card::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:30px;background:var(--accent);
  transition:width .4s var(--ease-out);
}
.contact-card:hover::after{width:64px}
.contact-card .lab{
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:12px;
}
/* Değer uzun olabilir (e-posta adresi 25 karakter): 320px ekranda kartı
   taşırıyordu. Uzun kelime kırılabilsin, kart daralabilsin. */
.contact-card{min-width:0}
.contact-card .val{
  font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:-.015em;line-height:1.35;
  overflow-wrap:anywhere;word-break:break-word;
}
@media (max-width:480px){.contact-card .val{font-size:17px}}
.contact-card a.val:hover{color:var(--accent)}
.contact-card .sub{margin-top:8px;color:var(--text-secondary);font-size:14.5px}

/* --------------------------------------------------------------------------
   RAKAMLAR — sayı öne çıkar
   Önceki hâlinde rakamlar gövde metniyle aynı boyuttaydı; "rakamlar" başlıklı
   bir bölümde sayının okunmaması işi anlamsız kılıyordu. Artık sayı büyük ve
   tek başına duruyor, birimi yanında küçük, açıklaması altında.
   -------------------------------------------------------------------------- */
.sayilar{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px) clamp(18px,2.6vw,38px);margin-top:44px;
}
.sayi{
  position:relative;padding-top:22px;min-width:0;
  border-top:1px solid var(--line-strong);
}
.sayi .etiket{
  display:block;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;
}
.sayi b{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--display);font-weight:700;
  font-size:clamp(40px,5.4vw,68px);line-height:.95;letter-spacing:-.04em;
  color:var(--text);
  /* Uzun bir değer (henüz doldurulmamış yer tutucu ya da "1.200+" gibi
     geniş bir sayı) sütunu taşırmasın: kırılabilsin ve sütun daralabilsin. */
  min-width:0;overflow-wrap:anywhere;
}
.sayi b i{
  font-style:normal;font-family:var(--body);font-weight:500;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:0;color:var(--accent);
}
.sayi p{
  margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--text-secondary);
  max-width:30ch;
}
@media (max-width:960px){
  .sayilar{grid-template-columns:repeat(2,1fr);gap:28px 24px}
}
@media (max-width:480px){
  .sayilar{grid-template-columns:1fr;gap:22px}
  .sayi{padding-top:18px}
  .sayi b{font-size:44px}
  .sayi p{max-width:none}
}

/* --------------------------------------------------------------------------
   Ekmek kırıntısı
   -------------------------------------------------------------------------- */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);padding-top:calc(var(--nav-h) + 42px);
}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.45}
.crumb b{color:var(--accent);font-weight:400}
/* Uzun başlıklı sayfalarda (teknik rehber yazıları) künye izinin son öğesi
   başlığın tamamını tekrarlıyordu: telefonda iki satır büyük harf, hemen
   altındaki H1 ile aynı metin. Tek satıra indirilip üç noktayla kısaltılır —
   izin işi konumu göstermek, başlığı ikinci kez okutmak değil. */
@media (max-width:720px){
  .crumb{flex-wrap:nowrap;overflow:hidden}
  .crumb b{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0;flex:0 1 auto;
  }
  .crumb a{white-space:nowrap;flex:0 0 auto}
}

/* --------------------------------------------------------------------------
   Alt sayfa başlığı: tam ekran görsel üzerinde
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;min-height:min(80vh,700px);display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 54px) 0 clamp(44px,6vh,76px);overflow:hidden;z-index:2;
}
.page-hero .bg{
  position:absolute;inset:0;background-size:cover;background-position:50% 46%;transform:scale(1.05);
}
.js .page-hero .bg{animation:heroFloatIn .85s var(--ease-out) both}
.page-hero .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,12,17,.93) 0%,rgba(5,12,17,.82) 40%,rgba(5,12,17,.3) 74%,rgba(5,12,17,.52) 100%),
    linear-gradient(180deg,rgba(5,12,17,.88) 0%,rgba(5,12,17,.24) 28%,rgba(5,12,17,.34) 60%,var(--canvas) 100%);
}
.page-hero .wrap{position:relative;z-index:2;width:100%}
.page-hero .crumb{padding-top:0;margin-bottom:24px}
.page-hero h1{
  font-size:clamp(34px,5.8vw,74px);letter-spacing:-.032em;max-width:15ch;
  text-shadow:var(--tshadow);
}
.page-hero .lede{
  margin-top:24px;max-width:54ch;font-size:clamp(16.5px,1.7vw,19.5px);line-height:1.6;
  color:var(--text-primary);opacity:.92;text-shadow:0 1px 10px rgba(5,12,17,.92);
}
.page-hero .eyebrow{margin-bottom:18px}
.js .page-hero .wrap{animation:heroContentRise .6s var(--ease-out) .04s both}
.js .still-hero .inner{animation:heroContentRise .6s var(--ease-out) both}
.js .close-cta.rev.in .inner{animation:heroContentRise .55s var(--ease-out) both}

/* --------------------------------------------------------------------------
   Teknik rehber
   -------------------------------------------------------------------------- */
.article-shell{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px;align-items:start}
.article-main .card,.article-side .card{height:auto}
.article-main .card + .card,.article-side .card + .card{margin-top:18px}
.article-main .card h2,.article-side .card h2{margin:0;font-size:var(--h-alt);letter-spacing:-.02em}
.article-main .card p + p{margin-top:16px}
.guide-lead{font-size:18px;line-height:1.72;color:var(--text-secondary)}
.guide-kicker{display:block;margin-top:14px;color:var(--accent);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.guide-flow{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.guide-flow a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);color:var(--text-secondary);font-size:14px;
  transition:transform .24s var(--ease-out),border-color .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
}
.guide-flow a:hover{color:var(--text-primary);border-color:var(--line-strong);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.js .js .js .js .js .js /* Kutu gidip yerini cizgiye birakinca 16px'lik bosluk kartlari birbirine
   yapistiriyor: bir kartin son satiri obur kartin cizgisine deger. */
.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 26px;margin-top:26px}
/* Yan sutun ~380px; iki sutunluk izgara orada kart basina 160px birakiyor
   ve basliklar kelime kelime kiriliyordu. Yan sutunda tek sutun. */
.article-side .guide-grid{grid-template-columns:1fr;gap:0;margin-top:18px}
/* Yan sutunda "ilgili yazilar", kendisi de kart olan bir kutunun icinde
   duruyor. Kartin icinde kart olunca cizgiler ust uste biniyor ve hangisinin
   nerede bittigi okunmuyor. Burada dogru dil, hemen ustundeki icindekiler
   listesinin dili: alt cizgiyle ayrilan sade liste. */
.article-side .guide-grid .card{padding:16px 0;border-bottom:1px solid var(--line)}
.article-side .guide-grid .card::before,
.article-side .guide-grid .card::after{display:none}
.article-side .guide-grid .card:last-child{border-bottom:0;padding-bottom:0}
.article-side .guide-grid .card h3{font-size:17px;line-height:1.3}
.article-side .guide-grid .card p{font-size:14.5px;margin-top:8px}
.guide-grid .card{margin-top:0}

.toc{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.toc{gap:0}
.toc a{display:block;padding:13px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--text-secondary)}
.toc li:last-child a{border-bottom:0}
.toc a:hover{color:var(--text-primary)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
/* Kutu degil, kunye satiri: kart dili duzlesince bunlar tek basina
   kutu olarak kaliyordu. */
.stat{padding:16px 0 2px;border:0;border-top:1px solid var(--line-strong);background:none}
.stat b{display:block;font-family:var(--display);font-size:28px;letter-spacing:-.03em}
.stat span{display:block;margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.5}
@media (max-width:960px){
  .article-shell{grid-template-columns:1fr}
}
@media (max-width:720px){
        .guide-list > .card:only-child h3,
    .guide-grid,.stat-grid{grid-template-columns:1fr}
}

/* yüzey rengi şeridi */
.finish{
  display:flex;align-items:stretch;gap:0;margin-top:36px;max-width:560px;
  border:1px solid var(--line);border-radius:var(--r-frame);overflow:hidden;
  background:rgba(16,34,42,.72);backdrop-filter:blur(10px);
}
.finish .chipc{width:112px;flex:0 0 112px;min-height:98px;background:var(--sw,#8A8F8C);position:relative}
.finish .chipc::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(255,255,255,.34),rgba(255,255,255,0) 30%,
    rgba(255,255,255,.2) 52%,rgba(255,255,255,0) 74%,rgba(255,255,255,.28));
}
.finish .chipc::after{
  content:"";position:absolute;inset:0;opacity:var(--irid-op,0);mix-blend-mode:screen;
  background:linear-gradient(96deg,rgba(201,161,94,.55),rgba(185,138,147,.42) 38%,
    rgba(111,168,168,.4) 68%,rgba(78,127,139,.3));
}
.finish .txt{padding:18px 22px}
.finish .txt b{
  display:block;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;
}
.finish .txt p{font-size:15px;color:var(--text-secondary);line-height:1.5}
@media (max-width:480px){.finish{flex-direction:column}.finish .chipc{width:100%;flex:0 0 72px;min-height:72px}}
/* Rehber sayfalarında renk örneği yok: blok düz bir bilgi kutusu. */
.finish.duz{max-width:none}
.finish.duz .txt{padding:18px 20px}

.page-head .lede{margin-top:24px;font-size:clamp(16.5px,1.7vw,19.5px);color:var(--text-secondary);max-width:60ch}

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */
footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:clamp(56px,8vh,88px) 0 40px;margin-top:clamp(60px,9vh,110px);
  background:var(--canvas-2);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr}}
/* alt bilgi başlıkları h4 idi; h2'den h4'e atlama yapıyordu */
.foot-grid h2{
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;margin-bottom:16px;
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{color:var(--text-secondary);font-size:15px;transition:color .3s var(--ease)}
.foot-grid a:hover{color:var(--accent)}
.foot-brand p{margin-top:16px;color:var(--text-secondary);font-size:15px;max-width:34ch;line-height:1.6}
.foot-legal{
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--text-dim);font-size:13.5px;
}

/* Studyo imzasi: yasal satirin son ogesi. Kunye ogeleriyle ayni boyda,
   yalnizca ad bir ton one cikiyor — musterinin sitesinde bagirmamali. */
.foot-legal .imza b{font-weight:600;color:var(--text-secondary)}

/* --------------------------------------------------------------------------
   Sabit WhatsApp düğmesi
   -------------------------------------------------------------------------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:54px;height:54px;border-radius:50%;
  background:#1E9E56;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease);
}
.wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 38px rgba(0,0,0,.5)}
.wa svg{width:27px;height:27px}
@media (max-width:720px){.wa{right:14px;bottom:14px;width:50px;height:50px}}

/* --------------------------------------------------------------------------
   Dokunmatik hedefler
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a,.drawer a,.faq summary{min-height:44px;display:flex;align-items:center}
}

/* ==========================================================================
   HAFİF MOD: site kendi kare hızını ölçer, zorlanıyorsa süsleri kapatır.
   Zayıf makinede ziyaretçi takılan bir site görmektense sade bir site görsün.
   Üç sınıf var:
     .lite   süsler kapanır (bulanıklık, gölge, süs hareketleri)
     .kaba   pahalı boya işleri de kapanır; kaydırmalı video ÇALIŞMAYA
             DEVAM EDER, sadece yumuşatma bırakılır (bkz. site.js)
     .lite2  kaydırmalı video yerine sabit sahne — buraya yalnızca sert
             koşullar düşürür: veri tasarrufu/2G, mobil, hareket azaltma.
             Kare hızı düşük diye ARTIK buraya düşülmüyor: sahnenin kaybolması
             kullanıcıya "video dondu" gibi görünüyor ve sayfa yüksekliği
             kısalınca kaydırma konumu zıplıyordu.
   Kademeler geri alınabilir: kare hızı düzelince süsler geri gelir.
   ========================================================================== */
body.lite .bubbles{display:none}
body.lite .env{animation:none;display:none}
body.lite .env::after{display:none}
body.lite .nav,body.lite .drawer,body.lite .chip,body.lite .turn-cap,body.lite .finish{
  backdrop-filter:none !important;
}
body.lite .nav.solid{background:rgba(6,15,20,.96)}
body.lite .chip,body.lite .turn-cap,body.lite .finish{background:rgba(5,12,17,.92)}
body.lite .card,body.lite .btn,body.lite .sect-row,body.lite .step{
  transition-duration:.12s !important;
}
body.lite .close-cta .bg,body.lite .slab .bg,body.lite .page-hero .bg{transform:none;animation:none !important}
body.lite .ring,body.lite .chev{display:none}
/* ---- kaba mod: boya maliyeti yüksek olan ne varsa kapanır ---------------- */
body.kaba *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.kaba .sec.bgi > .sbg,body.kaba .hrail.bgi > .sbg{
  background-attachment:scroll !important;
}
body.kaba .card,body.kaba .step,body.kaba .sect-row,body.kaba .spec,
body.kaba .btn,body.kaba .slab,body.kaba .chip,body.kaba .finish{box-shadow:none !important}
body.kaba .rev,body.kaba .stag > *{transition-duration:.12s !important}
body.kaba .cap,body.kaba .turn-cap{transition:none !important}
body.kaba .sbg::after{display:none}
body.kaba .stage video,body.kaba .turn-stage video{filter:none !important}
body.kaba .env,body.kaba .bubbles{display:none !important}
body.kaba .page-hero .bg,body.kaba .close-cta .bg{animation:none !important;transform:none !important}

/* son çare: kaydirmali video yerine sabit sahne (kare hızıyla tetiklenmez) */
body.lite2 .hero,body.lite2 .pscrub,body.lite2 .turn{display:none}
body.lite2 .still-hero{display:flex}
body.lite2 .pstill,body.lite2 .turn-still{display:block}

/* --------------------------------------------------------------------------
   Duraklatma: sekme gizliyken hiçbir şey dönmez
   -------------------------------------------------------------------------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* --------------------------------------------------------------------------
   Hareket azaltma: tamamen, her iki yönde
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rev,.stag > *{opacity:1 !important;transform:none !important}
  .rule line{stroke-dashoffset:0 !important}
  .bubbles,.env{display:none}
  .coat-stage .done{clip-path:inset(0 0 0 0) !important}
  .coat-stage .edge{display:none}
  .checks li{color:var(--text-primary)}
  .checks li .dot{border-color:var(--accent)}
  .checks li .dot::after{opacity:1}
  .hold{display:none}
  /* yeni bölümler de son hallerinde durur */
  .media img{clip-path:inset(0 0 0 0) !important;transform:none !important}
  .slab .mark{transform:scaleX(1) !important}
  .xsec{height:auto}
  .xsec-sticky{position:static;height:auto}
  .xsec-coat{height:calc(.42*62px + 2px) !important}
  .xsec-hint{display:none}
  .pstep{opacity:1 !important;transform:none !important}
  .pstep p{max-height:none !important;opacity:1 !important}
  .tnote{opacity:1 !important;transform:none !important}
  .tnote p{max-height:none !important;opacity:1 !important}
  /* konum veren dönüşümler geri gelir, yoksa öğeler ekran dışına kaçar */
  .ruler{transform:translateY(-50%) !important}
  .ring,.chev{transform:translateX(-50%) !important}
  .coat-hint,.wa{transform:none !important}
}

/* aynı davranış JS ile açıldığında (canlı çevirme) */
body.rm .rev,body.rm .stag > *{opacity:1 !important;transform:none !important;transition:none !important}
body.rm .rule line{stroke-dashoffset:0 !important}
body.rm .bubbles,body.rm .env{display:none}
body.rm .close-cta .bg,body.rm .page-hero .bg,body.rm .still-hero .inner{animation:none !important;transform:none !important}
body.rm .coat-stage .done{clip-path:inset(0 0 0 0) !important}
body.rm .coat-stage .edge{display:none}
body.rm .hold{display:none}
body.rm .media img{clip-path:inset(0 0 0 0) !important;transform:none !important}
body.rm .xsec{height:auto}
body.rm .xsec-sticky{position:static;height:auto}
body.rm .slab .mark{transform:scaleX(1) !important}
body.rm .xsec-coat{height:calc(.42*62px + 2px) !important}
body.rm .xsec-hint{display:none}
body.rm .pstep{opacity:1 !important;transform:none !important}
body.rm .pstep p{max-height:none !important;opacity:1 !important}
body.rm .tnote{opacity:1 !important;transform:none !important}
body.rm .tnote p{max-height:none !important;opacity:1 !important}
body.rm .checks li{color:var(--text-primary)}
body.rm .checks li .dot{border-color:var(--accent)}
body.rm .checks li .dot::after{opacity:1}

@media (pointer:coarse), (max-width:960px){
  .env,.bubbles,.ring,.chev{display:none}
  .page-hero .bg,.close-cta .bg{animation:none !important;transform:none !important}
  .chip,.finish,.nav.solid{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .card,.btn,.guide-flow a,.step,.sect-row{box-shadow:none}
}

/* --------------------------------------------- karşılaştırma tablosu
   .spec iki sütunlu künye tablosu için yazılmıştı (th %44). Çok sütunlu
   karşılaştırmada o genişlik kilidi kalkar, ilk sütun satırın adı olur. */
.spec.karsi th{width:auto;white-space:nowrap}
.spec.karsi th:first-child{width:22%}
.spec.karsi td{font-size:14.5px;line-height:1.5}
.spec.karsi tbody td:first-child{white-space:nowrap;color:var(--text-primary)}
.spec.karsi tbody tr:hover td{background:var(--panel-2)}
.spec.karsi tbody td:nth-child(2){color:var(--accent);white-space:nowrap}
/* Telefonda 5 sütunlu tablo yatay kaydırmayla da okunmuyor: son sütunlar
   ekran dışında kalıyor, satırlar boş boş uzuyor. Orada tabloyu bırakıp her
   satırı kendi kartına çeviriyoruz, hücreler etiketiyle alt alta diziliyor. */
/* Eşik 760px'ti; ölçüldü: tablo 844px istiyor, tablet dikeyde (768px)
   kapsayıcı 691px kalıyordu ve tablo yine yatay kayıyordu — telefonda
   özellikle kaçındığım durum. 960'a çekildi, aradaki boşluk kapandı. */
@media (max-width:960px){
  .spec.karsi,.spec.karsi tbody,.spec.karsi tr,.spec.karsi td{display:block;width:auto}
  .spec.karsi thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .spec.karsi tr{
    border:1px solid var(--line);border-radius:var(--r-frame);background:var(--panel);
    padding:6px 4px;margin-bottom:14px;
  }
  .spec.karsi tr:last-child{margin-bottom:0}
  .spec.karsi td{border-bottom:1px solid var(--line);padding:11px 16px;white-space:normal}
  .spec.karsi tr td:last-child{border-bottom:0}
  .spec.karsi td::before{
    content:attr(data-e);display:block;margin-bottom:5px;
    font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-dim);
  }
  /* satırın adı kartın başlığı olur, etiketi gereksiz */
  .spec.karsi tbody td:first-child{
    font-size:19px;white-space:normal;padding-top:14px;
  }
  .spec.karsi tbody td:first-child::before{display:none}
  .spec.karsi tbody td:nth-child(2){white-space:normal}
  .spec.karsi tbody tr:hover td{background:transparent}
}

/* açıklayıcı dipnot satırı: bölüm sonunda uyarı ya da sınır belirtir */
.note-line{
  margin-top:30px;padding:18px 20px;border-left:2px solid var(--accent);
  background:var(--panel);border-radius:0 10px 10px 0;
  color:var(--text-secondary);font-size:15px;line-height:1.65;max-width:74ch;
}
.note-line b{color:var(--text-primary);font-weight:600}

/* ==================================================== mikron ölçek cetveli
   Kaydırdıkça çubuklar açılır, sayaç sayar. Referans çizgileri gündelik
   kalınlıklar: okuyan 25 µm'yi bir şeye benzetebilsin.
   DİKKAT: µm taşıyan hiçbir öğeye text-transform:uppercase verilmez,
   büyük harfe çevrilince MM olur ve 1000 kat hata anlamına gelir. */
.mscale{margin-top:52px;position:relative}
/* Referans çizgileri eksenin altında kalmamalı: karşılaştırma ancak çizgi
   çubukların arkasından geçerse yapılabilir. Ayrı bir katman olarak durur. */
.mrefs{
  position:absolute;left:var(--mlab);right:0;top:24px;bottom:52px;
  pointer-events:none;z-index:0;
}
.mscale-axis{
  position:relative;height:46px;margin-left:var(--mlab);z-index:1;
  border-bottom:1px solid var(--line-strong);
}
.mscale{--mlab:186px}
/* (eski 104px kuralı kaldırıldı: aşağıdaki 900px bloğu --mlab:0 veriyor) */

.mtick{position:absolute;bottom:0;transform:translateX(-50%);text-align:center}
.mtick i{display:block;width:1px;height:9px;background:var(--line-strong);margin:0 auto}
.mtick span{
  display:block;font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.1em;
  color:var(--text-dim);margin-bottom:6px;text-transform:none;
}
/* referans işaretleri: gündelik nesnelerin kalınlığı */
.mref{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--accent) 0 22px,rgba(201,161,94,.30) 22px);
  opacity:0;transition:opacity .55s ease;
}
.mref b{
  position:absolute;top:26px;left:7px;   /* eksen rakamlarının altına iner */white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.08em;
  color:var(--accent);text-transform:none;
}
/* eksenin sağ ucundaki referansın etiketi dışarı taşar: içeri al */
.mref.son b{left:auto;right:7px}
.mscale.on .mref{opacity:.75}

.mrow{display:grid;grid-template-columns:var(--mlab) 1fr;align-items:center;gap:0;padding:13px 0;position:relative;z-index:1}
.mrow + .mrow{border-top:1px solid var(--line)}
.mname{
  font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  color:var(--text-primary);padding-right:18px;line-height:1.3;
}
.mtrack{position:relative;height:26px}
/* referans çizgileri satırların da arkasından geçsin */
.mtrack::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10%);
  opacity:.5;
}
.mfill{
  position:absolute;top:5px;height:16px;border-radius:3px;
  /* 16px'lik çubukta dikey gradyan tek renge iniyor: yatay kurulur */
  background:linear-gradient(90deg,#C9A15E 0%,#B98A93 38%,#6FA8A8 74%,#4E7F8B 100%);
  box-shadow:0 0 0 1px rgba(201,161,94,.18);
  transform-origin:left center;transform:scaleX(0);
  transition:none;                       /* kaydırma sürer, geçiş değil */
}
.mval{
  position:absolute;top:5px;height:16px;display:flex;align-items:center;
  padding-left:10px;font-family:var(--mono);font-size:12px;color:var(--text-secondary);
  white-space:nowrap;text-transform:none;opacity:0;
}
.mscale-foot{
  margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--text-dim);text-transform:none;
}
/* Eşik 760px'ti; ölçüldü: 768px'te etiket sütunu (186px) kalınca çubuk
   alanı 505px'e düşüyor ve üç referans etiketi üst üste biniyor.
   900'e çekildi — tablet dikey de tam genişlik düzenine giriyor. */
@media (max-width:960px){
  /* Etiket sütunu kalkıp isim üste çıkar, çubuk tam genişlik olur.
     Referans katmanı da aynı hizaya gelmezse çizgiler kayar. */
  .mscale{--mlab:0px}
  .mrow{grid-template-columns:1fr;gap:9px}
  .mname{padding-right:0;font-size:14.5px}
  .mscale-axis{margin-left:0}
  .mtrack{height:22px}
  .mfill,.mval{top:3px;height:16px}
  .mrefs{top:20px;bottom:46px}
  .mref b{font-size:var(--t-mikro);letter-spacing:.04em}
  /* dar ekranda sağdaki iki etiket çakışıyor: sonuncu bir satır aşağı iner */
  .mref.son b{top:40px}
}

/* ================================================ tuzlu sis testi seyri
   Kaydırdıkça plaka önce beyaz pas, sonra kırmızı pas gösterir. Video yok:
   katmanların opaklığı değişiyor, o yüzden çok ucuz. */
.salt{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center;margin-top:52px}
.salt-plate{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-frame);overflow:hidden;
  border:1px solid var(--line-strong);background:#5E6C73;
  box-shadow:inset 0 0 70px rgba(0,0,0,.45);
}
/* çinko yüzeyin kendisi */
.sp-zn{
  position:absolute;inset:0;
  background:
    /* ince tane: düz gradyan plastik görünüyordu, metal dokusu gerekiyor */
    repeating-radial-gradient(circle at 18% 24%,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(112deg,rgba(255,255,255,.055) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,#8A969B 0%,#74828A 38%,#5E6C73 70%,#4E5B62 100%);
}
.sp-w,.sp-r{position:absolute;inset:0;opacity:0;will-change:opacity}
/* beyaz pas: çinkonun kendi oksiti, tozumsu ve yaygın */
/* Beyaz pas: 16 Eylül'de tonu kısıldı. Önceki hâlinde neredeyse saf beyaz
   (#F0F4F5, %95) bulutlardı ve bölümü çevresinin iki katı parlak yapıyordu
   (ölçüldü: L 47, çevre 19-36). Gerçekte beyaz pas mat, grimsi bir tozdur;
   daha koyu ve daha az opak hâli hem paletle hem gerçekle uyumlu. */
.sp-w{
  background:
    repeating-radial-gradient(circle at 30% 40%,rgba(232,239,240,.10) 0 1px,transparent 1px 3px),
    radial-gradient(34% 27% at 22% 30%,rgba(196,206,209,.78) 0 46%,rgba(196,206,209,.26) 68%,transparent 82%),
    radial-gradient(27% 23% at 68% 22%,rgba(188,199,203,.72) 0 44%,rgba(188,199,203,.22) 66%,transparent 80%),
    radial-gradient(39% 30% at 54% 72%,rgba(192,203,206,.75) 0 44%,rgba(192,203,206,.24) 68%,transparent 82%),
    radial-gradient(23% 19% at 86% 62%,rgba(184,195,199,.68) 0 46%,transparent 78%);
}
/* kırmızı pas: alttaki çeliğe ulaşıldı, noktasal başlar */
.sp-r{
  /* Kırmızı pas noktasal başlar, geniş leke olarak değil: çok sayıda küçük
     ve düzensiz odak gerçeğe daha yakın duruyor. */
  background:
    radial-gradient(6% 5% at 30% 44%,rgba(150,62,30,.97) 0 55%,rgba(118,47,23,.4) 78%,transparent 92%),
    radial-gradient(4% 3.4% at 36% 51%,rgba(132,52,26,.94) 0 58%,transparent 90%),
    radial-gradient(3% 2.6% at 25% 38%,rgba(142,58,28,.9) 0 60%,transparent 92%),
    radial-gradient(5% 4.2% at 62% 36%,rgba(136,54,26,.95) 0 56%,transparent 88%),
    radial-gradient(3.2% 2.8% at 67% 42%,rgba(120,47,23,.9) 0 60%,transparent 92%),
    radial-gradient(7% 5.6% at 48% 66%,rgba(124,48,24,.94) 0 52%,rgba(102,39,19,.38) 76%,transparent 92%),
    radial-gradient(3.6% 3% at 54% 72%,rgba(140,56,27,.9) 0 58%,transparent 90%),
    radial-gradient(4% 3.4% at 78% 74%,rgba(144,58,28,.93) 0 56%,transparent 88%),
    radial-gradient(2.8% 2.4% at 40% 24%,rgba(130,52,26,.9) 0 60%,transparent 92%),
    radial-gradient(3.4% 2.9% at 84% 55%,rgba(126,50,25,.88) 0 58%,transparent 90%);
}
.salt-hud{
  position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:var(--r-ctl);
  background:rgba(6,15,20,.72);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:12px;color:var(--text-primary);
  letter-spacing:.06em;text-transform:none;
}
.salt-read .sv{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(46px,6vw,76px);line-height:1;color:var(--text-primary);
  text-transform:none;
}
.salt-read .su{font-family:var(--mono);font-size:13px;color:var(--text-dim);letter-spacing:.14em;margin-left:10px;text-transform:none}
.salt-state{margin-top:16px;font-size:16.5px;color:var(--text-secondary);line-height:1.6;min-height:3.2em}
.salt-rail{position:relative;height:3px;background:var(--line);border-radius:2px;margin-top:34px}
.salt-rail>i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:2px;width:0}
.salt-mark{position:absolute;top:-5px;width:1px;height:13px;background:var(--line-strong)}
.salt-mark b{
  position:absolute;top:17px;left:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.08em;color:var(--text-dim);
  text-transform:none;transition:color .4s ease;
}
.salt-mark.hit{background:var(--accent)}
.salt-mark.hit b{color:var(--accent)}
.salt-legend{margin-top:46px;display:flex;gap:22px;flex-wrap:wrap}
.salt-legend span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-secondary)}
.salt-legend i{width:11px;height:11px;border-radius:50%;flex:none}
@media (max-width:960px){
  .salt{grid-template-columns:1fr;gap:30px}
  .salt-plate{aspect-ratio:16/10}
}

/* ===================================================== yatay kayan şerit
   Bölüm sabitlenirken kartlar yana kayar. Sadece translateX yazılır.
   Telefonda, hareket azaltmada ve hafif modda sıradan dikey ızgaraya döner:
   o durumlarda sticky ve transform hiç kurulmaz. */
.hrail{position:relative}
.hrail-sticky{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;
  overflow:hidden;
}
.hrail-track{
  display:flex;gap:clamp(18px,2vw,28px);padding:0 var(--pad,24px);
  will-change:transform;
}
.hrail-card{
  flex:0 0 clamp(280px,27vw,380px);
  position:relative;background:none;border:0;border-radius:0;
  padding:22px 22px 4px 0;
  display:flex;flex-direction:column;
}
.hrail-card::before{
  content:"";position:absolute;left:0;right:22px;top:0;height:1px;
  background:var(--line-strong);
}
.hrail-card::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:30px;background:var(--accent);
}
.hrail-card .n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--accent);text-transform:none;
}
.hrail-card h3{
  font-family:var(--display);font-weight:600;font-size:var(--h-kart);
  letter-spacing:-.015em;margin:14px 0 12px;color:var(--text-primary);
line-height:1.22;}
.hrail-card p{color:var(--text-secondary);font-size:15.5px;line-height:1.58}
.hrail-card b{color:var(--text-primary);font-weight:600}
.hrail-head{
  position:absolute;left:0;right:0;top:clamp(76px,11vh,120px);
  pointer-events:none;padding:0 var(--pad,24px);
}
.hrail-prog{
  position:absolute;left:var(--pad,24px);right:var(--pad,24px);
  bottom:clamp(64px,9vh,104px);height:2px;background:var(--line);border-radius:2px;
}
.hrail-prog>i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:2px}
.hrail-cue{
  position:absolute;right:var(--pad,24px);bottom:clamp(30px,5vh,58px);
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.16em;color:var(--text-dim);
  text-transform:none;
}

/* Kaplama kartları da rayda kullanılıyor (kaplamalar.html). .hrail-card
   gibi bir flex genişliği gerekiyor, yoksa altı kart şeridi sıkıştırıp
   taşma hesabını bozuyor. */
.hrail-track > .coat-card{flex:0 0 clamp(300px,26vw,384px)}

/* Şerit kurulmadıysa (telefon, hareket azaltma, hafif mod) sıradan ızgara */
.hrail:not(.armed){height:auto !important}
.hrail:not(.armed) .hrail-sticky{position:static;height:auto;overflow:visible;display:block}
.hrail:not(.armed) .hrail-track{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);
  padding:0;transform:none !important;
}
.hrail:not(.armed) .hrail-card,
.hrail:not(.armed) > .hrail-sticky .coat-card{flex:none}
.hrail:not(.armed) .hrail-head,
.hrail:not(.armed) .hrail-prog,
.hrail:not(.armed) .hrail-cue{display:none}
@media (max-width:960px){
  .hrail:not(.armed) .hrail-track{grid-template-columns:1fr}
}
/* şerit sabitken başlık ekranda kalır: kullanıcı neye baktığını kaybetmesin */
.hrail-head .eyebrow{margin-bottom:12px}
.hrail-head h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.028em;
  font-size:var(--h-sec);line-height:1.06;color:var(--text-primary);
  max-width:16ch;
}

@keyframes heroFloatIn{
  0%{transform:scale(1.11) translate3d(0,18px,0);opacity:.72}
  100%{transform:scale(1.05) translate3d(0,0,0);opacity:1}
}
@keyframes ctaDrift{
  0%{transform:scale(1.03) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(-1.4%,1.8%,0)}
}
@keyframes heroContentRise{
  0%{opacity:0;transform:translate3d(0,24px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* ================================================ canlı teklif netliği
   Statik bir "gerekenler" listesi yerine formun gerçek durumunu gösterir:
   kullanıcı yazdıkça maddeler yanar, oran ve mesaj değişir. */
.tready .tr-top{display:flex;align-items:baseline;margin-top:14px}
.tready .tr-v{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(38px,4.4vw,54px);line-height:1;color:var(--text-primary);
  font-variant-numeric:tabular-nums;text-transform:none;
}
.tready .tr-u{font-family:var(--mono);font-size:15px;color:var(--text-dim);margin-left:5px;text-transform:none}
.tr-bar{height:3px;background:var(--line);border-radius:2px;margin-top:16px;overflow:hidden}
.tr-bar>i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .45s cubic-bezier(.22,.7,.3,1)}
.tready .tr-msg{margin-top:16px;font-size:14.5px;line-height:1.62;color:var(--text-secondary);min-height:3.2em}
/* liste maddeleri sönük başlar, alan dolunca yanar */
.tr-list li{opacity:.42;transition:opacity .35s ease}
.tr-list li.on{opacity:1}
.tr-list li .dot{transition:background .35s ease,box-shadow .35s ease}

/* ====================================== sizde / bizde arasındaki bağ
   İki sorumluluk kartı arasında kaydırdıkça çizilen bir hat. İçeriğin
   söylediğini görselleştirir: iki taraf, tek parça. */
.pair{position:relative}
.pair-link{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(28px,5vw,72px);height:2px;pointer-events:none;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.pair-link .ln{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--line-strong),var(--accent),var(--line-strong));
  transform:scaleX(0);transform-origin:center;
}
.pair-link .kn{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px rgba(201,161,94,.14);
  opacity:0;transform:scale(.4);
}
/* dar ekranda kartlar alt alta gelir, yatay hat anlamını yitirir */
@media (max-width:960px){.pair-link{display:none}}

/* =================================== metin bölümleri için arka plan katmanı
   Uzun metin bölümleri düz zeminde boş görünüyordu. Bu katman fotoğrafı çok
   düşük opaklıkta, üstüne de perde koyarak verir: doku olur, okumayı bozmaz.
   Perde iki katmanlı — üstten ve alttan canvas'a eriyerek komşu bölümlerle
   dikişsiz birleşir, ortada metnin arkası en koyu yerdir. */
.sec.bgi{position:relative;isolation:isolate}
.sec.bgi > .sbg{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background-size:cover;background-position:50% 50%;
}
/* Perde gücü bölüm başına ayarlanır. Görsellerin ortalama parlaklığı 6 ile 36
   arasında değişiyor; sabit perde koyu olanı tamamen yok ediyor, açık olanı da
   okunmaz bırakıyordu. --sbg-k her bölümde kendi klibine göre verilir. */
.sec.bgi > .sbg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--canvas) 0%,rgba(6,15,20,var(--sbg-k,.72)) 20%,
      rgba(6,15,20,var(--sbg-k,.72)) 80%,var(--canvas) 100%),
    radial-gradient(ellipse 64% 60% at var(--sbg-x,32%) 50%,rgba(6,15,20,.55) 0%,rgba(6,15,20,.12) 74%);
}

/* yatay şeridin arkası: 2000px'i aşan en büyük boşluk buydu */
.hrail.bgi > .sbg{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 50%;
}
.hrail.bgi > .sbg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--canvas) 0%,rgba(6,15,20,var(--sbg-k,.78)) 18%,
      rgba(6,15,20,var(--sbg-k,.78)) 82%,var(--canvas) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(6,15,20,.42),rgba(6,15,20,.12));
}
.hrail.bgi .hrail-sticky{position:sticky;z-index:1}
/* Serit kurulmadiginda (telefon, hareket azaltma, hafif mod) yukaridaki
   kural static'i eziyordu ve bolum sabit kalip icerigi kirpiyordu.
   Bu secici daha guclu (.hrail.bgi:not(.armed) = 0,3,0 + sonra) ve kazanir. */
.hrail.bgi:not(.armed) .hrail-sticky{position:static;z-index:auto}
body.lite .sec.bgi > .sbg,body.lite .hrail.bgi > .sbg{background-attachment:scroll}
/* Klibin aydınlık tarafı metnin altına denk geliyorsa görsel aynalanır:
   perdeyi kalınlaştırmaktan daha iyi, çünkü doku kaybolmuyor. */
.sbg.flip{transform:scaleX(-1)}

/* ================================================ sayfalar arası geçiş
   Çok sayfalı sitede her tıklamada ekranın beyazlayıp yeniden kurulması
   akışı bozuyordu. Tarayıcının kendi geçiş mekanizması kullanılır: JavaScript
   yok, desteklemeyen tarayıcıda hiçbir şey değişmez (sadece eski davranış). */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.22,.7,.28,1);
}
::view-transition-old(root){animation-name:sayfa-cik}
::view-transition-new(root){animation-name:sayfa-gir}
@keyframes sayfa-cik{ to{opacity:0; transform:translateY(-8px)} }
@keyframes sayfa-gir{ from{opacity:0; transform:translateY(14px)} }

/* Gezinme çubuğu ve marka geçiş boyunca sabit kalır: sayfa değişiyor,
   çerçeve değişmiyor. Bu, çok sayfalı sitenin tek uygulama gibi hissettirmesini
   sağlayan asıl ayrıntı. */
.nav{view-transition-name:ust-cubuk}
::view-transition-old(ust-cubuk),
::view-transition-new(ust-cubuk){animation:none;mix-blend-mode:normal}

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
}

/* ============================================ dokunma hedefleri (telefon)
   Ölçüldü: alt bilgi bağlantıları 21px yüksekliğindeydi, parmakla isabet
   ettirmek zor. Görünüm aynı kalsın diye yazı büyütülmüyor; dokunma alanı
   dikey dolguyla genişletiliyor ve listeler arasındaki boşluk azaltılıyor,
   böylece bölüm boyu değişmiyor. */
@media (pointer:coarse){
  .foot-grid ul{gap:2px}
  .foot-grid a{
    display:block;padding:11px 0;line-height:1.35;
    min-height:44px;box-sizing:border-box;
  }
  .foot-legal a{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
  .drawer a{min-height:48px;display:flex;align-items:center}
  /* menü düğmesi 42px ölçülmüştü, sınır 44 */
  .burger{width:46px;height:46px}
  .crumb a{display:inline-block;padding:9px 0}
  /* iletişim kartındaki telefon ve e-posta: sayfanın en kritik hedefi,
     21px ölçülmüştü */
  .contact-card .val{display:inline-block;padding:12px 0;min-height:46px;box-sizing:border-box}
  .form-foot a,.wa{min-height:44px;display:inline-flex;align-items:center}
}

/* ==================================================== kaydırma ilerlemesi
   Sayfalar uzun (süreç 9200px). Gezinme çubuğunun alt kenarında ince bir
   çizgi nerede olunduğunu gösterir. Tek bir scaleX yazılır, maliyeti yok. */
.ilerleme{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),#6FA8A8);
  pointer-events:none;opacity:0;transition:opacity .4s ease;
}
.nav.solid .ilerleme{opacity:1}
body.rm .ilerleme{display:none}

/* ================================================== form hata görünümü
   :user-invalid, :invalid'in aksine sadece kullanıcı alana dokunduktan sonra
   çalışır — sayfa açılır açılmaz her zorunlu alanı kırmızıya boyamaz. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{
  border-color:#8C4A3C;
  box-shadow:0 0 0 3px rgba(140,74,60,.14);
}
.field input:user-invalid + .uyari{display:block}
.field .uyari{
  display:none;margin-top:7px;font-size:13px;color:#C98878;
  font-family:var(--body);
}
/* doğru dolan zorunlu alan sessizce onaylanır */
.field input:user-valid[required]{border-color:rgba(111,168,168,.42)}

/* Menü açıkken kaydırma durur. html'e verilir: gövde yerinde kalır, konum
   kendiliğinden korunur. overscroll-behavior menü içinde kaydırma bitince
   hareketin arkadaki sayfaya geçmesini de engeller. */
html.menu-acik{overflow:hidden}
html.menu-acik body{overflow:hidden}
.drawer{overscroll-behavior:contain}

/* ==================================================================== baskı
   Tarayıcılar arka planı varsayılan olarak basmaz; site açık renk yazı
   kullandığı için sayfa beyaz kağıda beyaz yazı olarak çıkıyordu (boş sayfa).
   Baskıda renkler tersine çevrilir, hareketli ve dekoratif her şey kalkar.
   B2B'de kaplama künyesini yazdırmak yaygın bir kullanım. */
@media print{
  :root{
    --canvas:#fff; --panel:#fff; --panel-2:#fff;
    --text-primary:#111; --text-secondary:#333; --text-dim:#555;
    --line:#ccc; --line-strong:#999; --accent:#6b4f1d;
  }
  html,body{background:#fff !important;color:#111 !important}
  body *{
    background-image:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }

  /* ekranda işi olan ama kâğıtta işi olmayan her şey */
  .nav,.drawer,.burger,.env,.bubbles,.ruler,.chev,.skip,
  .hero,.pscrub,.turn,.hrail,.salt,.mscale,.coat,.xsec,
  .close-cta,.form,.tready,.ilerleme,.form-ok{display:none !important}

  /* sabit sahneler ve durağan karşılıklar kâğıtta gösterilir */
  .still-hero,.pstill,.turn-still{display:block !important}
  .still-hero{min-height:auto}

  .sec{padding:18px 0 !important}
  .page-hero{min-height:auto;padding:0 0 18px}
  .page-hero .bg,.slab .bg{display:none !important}
  .slab{min-height:auto;padding:18px 0;text-align:left}
  .slab p.line{font-size:19px}

  .card,.step,.media,.spec,.note-line{
    border:1px solid #bbb !important;background:#fff !important;
    break-inside:avoid; page-break-inside:avoid;
  }
  h1,h2,h3{break-after:avoid; page-break-after:avoid; color:#111 !important}
  img{max-width:100% !important; filter:grayscale(1) contrast(1.1)}

  /* Bağlantı adresini basmayı denedim: WhatsApp adresi uzun ve yer tutucu
     içeriyor, fotoğrafların üstüne taşıyordu. Kâğıtta adres basılmıyor;
     iletişim bilgisi zaten alt bilgide düz metin olarak var. */
  a::after{content:none !important}

  /* yüzey görünümü kutusu koyu kalıyordu */
  .finish{background:#fff !important;border:1px solid #bbb !important}
  .finish .chipc{border:1px solid #999 !important}
  .finish b,.finish p{color:#111 !important}

  /* büyük cümle kâğıtta ortalanmak yerine sola yaslanır */
  .slab .inner{max-width:100% !important;margin:0 !important}

  /* fotoğraflar kâğıtta yer yemesin */
  .media img,.pstill img,.turn-still img{max-height:70mm !important;object-fit:cover}

  /* künye tablosu kâğıtta asıl istenen şey */
  .spec.karsi{display:table !important}
  .spec.karsi thead{position:static !important;width:auto;height:auto;clip:auto}
  .spec.karsi tr{display:table-row !important;border:0}
  .spec.karsi td,.spec.karsi th{display:table-cell !important;border-bottom:1px solid #ddd}
  .spec.karsi td::before{display:none !important}
}

/* NOT: content-visibility:auto denendi ve GERİ ALINDI. Ekran dışı bölümleri
   atlıyor ama contain-intrinsic-size tahmini tutmadığı için sayfa yüksekliği
   kaydırdıkça oynuyordu (süreç: 10580 → 9378). İlerleme çizgisi, mikron
   cetveli ve kaydırmaya bağlı bütün hesaplar scrollHeight'a dayandığı için
   bu kabul edilemez. Denemek istersen her bölümün gerçek yüksekliğini
   ölçüp contain-intrinsic-size'ı satır içi yazmak gerekir. */

/* Bal kupu: ekrandan tamamen cikar ama display:none degil — bazi botlar
   display:none alanlari atliyor. Ekran okuyucu icin aria-hidden verildi. */
.ek-alan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* KVKK onay kutusu */
.field.onay{margin-top:22px}
.field.onay label{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--text-secondary);line-height:1.55;
}
.field.onay input{
  width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:var(--accent);
  cursor:pointer;
}
.field.onay a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Dokunma hedefi alt siniri (WCAG 2.2 AA 2.5.8). Olculdu: alt bilgi ve
   iletisim baglantilari 21 px yuksekligindeydi. Liste halindeki baglantilar
   "cumle icinde" istisnasina girmez, bu yuzden 24 px'e cikarildi. */
/* Olculdu: alt bilgi baglantilari 21 px, iz baglantilari 19 px, onay
   kutusu 18 px yuksekligindeydi. Liste ve iz halindeki baglantilar
   "cumle icinde" istisnasina girmez. Genislik degil yukseklik dusuktu,
   o yuzden dikey dolgu verildi; satir araligi ve yerlesim degismiyor. */
footer .foot-grid ul li a,
footer .foot-legal a,
.crumb a,
.contact-card a.val,
.toc a{
  min-height:24px;display:inline-flex;align-items:center;
}
.field.onay input{width:24px;height:24px;min-width:24px;margin-top:0}

/* ==========================================================================
   AKIŞ BANDI — bölümler arasına giren akan taneli gradyan

   16 Eylül: renkler kısıldı. İlk hâlinde lekeler altın, gülkurusu ve turkuaz
   parlıyordu ve bant sayfaya sahne ışığı düşmüş gibi duruyordu. Ölçüldü:
   bant bölümün tonunu sıcağa çekiyordu (R-B −14 → −9). Sitenin kendi
   kullanımında --irid yalnızca 1-2 px'lik çizgilerde geçiyor; büyük yüzeyde
   gülkurusu baskın çıkıyor. Artık zemin çelik mavisi ve turkuaz, altın
   yalnızca soluk bir parıltı.

   Referans Grainient'ti; oradaki bantlar 2048x1440 döngü mp4 ile yapılıyor.
   Burada video kullanılmadı: sitede zaten 62 MB kaydırmalı video var ve
   hedef "en zayıf makinede bile kasmamak". Aynı görünüm tek bayt indirmeden
   kuruluyor.

   Renkler uydurma değil: --irid zaten sitede duruyor ve gerekçesi
   "pasivasyonun yanardöner parlaması". Yani bant ödünç bir süs değil,
   kaplamanın kendi yüzey olayı.

   Maliyet: yumuşak kenarlı radyal gradyanlar blur SÜZGECİ olmadan bulanık
   görünür — süzgeç her karede yeniden hesaplanır, gradyan bir kez boyanır.
   Animasyon yalnızca transform: ana iş parçacığına ve yerleşime dokunmaz,
   GPU'da döner. Tanecik statiktir, boyandıktan sonra bedava.
   ========================================================================== */
.akis{
  position:relative;
  height:clamp(200px,24vh,320px);
  overflow:hidden;
  pointer-events:none;
}
.akis-in{
  position:absolute;inset:0;display:block;isolation:isolate;
  /* iki kenarda sayfa zeminine eriyor; kesik bir kutu gibi durmasın */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
}
.akis-in i{
  position:absolute;display:block;
  width:62vw;height:190%;top:-45%;
  border-radius:50%;
  will-change:transform;
  /* Isik ekler gibi karissin: iki leke ust uste gelince renk soluklasmak
     yerine parlasin. Duz opaklikta banttaki renkler cameurundan bakiyor
     gibi duruyordu. */
  mix-blend-mode:screen;
  animation-timing-function:cubic-bezier(.44,.06,.5,.94);
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
/* Üç leke, üç ayrı süre: hiçbir zaman aynı anda aynı yere gelmesinler,
   yoksa döngü fark edilir. */
.akis-in i:nth-child(1){
  left:-14vw;
  background:radial-gradient(closest-side,rgba(201,161,94,.34) 0%,rgba(201,161,94,.10) 40%,rgba(201,161,94,0) 70%);
  animation-name:akis-a;animation-duration:31s;
}
.akis-in i:nth-child(2){
  left:24vw;
  background:radial-gradient(closest-side,rgba(78,127,139,.62) 0%,rgba(78,127,139,.20) 44%,rgba(78,127,139,0) 72%);
  animation-name:akis-b;animation-duration:43s;
}
.akis-in i:nth-child(3){
  left:58vw;
  background:radial-gradient(closest-side,rgba(111,168,168,.40) 0%,rgba(111,168,168,.12) 44%,rgba(111,168,168,0) 72%);
  animation-name:akis-c;animation-duration:37s;
}
/* Dördüncü katman: tanecik. feTurbulence bir kez SVG olarak gömülü,
   ağ isteği yok. Karışım kipi olmadan sadece gri toz gibi durur. */
.akis-in::after{
  content:"";position:absolute;inset:-10%;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:140px 140px;
  mix-blend-mode:overlay;opacity:.55;
}
.akis-in i:nth-child(4){
  left:78vw;
  background:radial-gradient(closest-side,rgba(42,74,84,.70) 0%,rgba(42,74,84,.22) 46%,rgba(42,74,84,0) 74%);
  animation-name:akis-b;animation-duration:29s;
}
@keyframes akis-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(16vw,6%,0) scale(1.18)}}
@keyframes akis-b{from{transform:translate3d(6vw,4%,0) scale(1.12)}to{transform:translate3d(-10vw,-6%,0) scale(.94)}}
@keyframes akis-c{from{transform:translate3d(-8vw,-4%,0) scale(1.05)}to{transform:translate3d(10vw,8%,0) scale(1.22)}}

/* Bandın üstünde yazı durabilir; durmayacaksa .akis boş kalır. */
.akis .akis-yazi{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 22px;
}
.akis .akis-yazi p{
  margin:0;max-width:24ch;
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.4vw,30px);letter-spacing:-.02em;line-height:1.28;
  color:var(--text-primary);
  text-shadow:0 2px 18px rgba(6,15,20,.55);
}

/* Telefonda iki leke yeter: üçüncüsü ekranda görünmüyor ama yine katman
   açıyor. Bant da kısalır, yoksa ekranın yarısını yiyor. */
@media (max-width:720px){
  .akis{height:clamp(150px,22vh,210px)}
  .akis-in i{width:86vw}
  .akis-in i:nth-child(3),
  .akis-in i:nth-child(4){display:none}
}

/* Performans kademeleri ve hareket tercihi: animasyon durur, bant kalır.
   Karar geri dönüşlü — sayfa yüksekliği değişmediği için kaydırma zıplamaz. */
@media (prefers-reduced-motion:reduce){
  /* Secici .akis-in i olarak yazilinca calismiyordu: asagidaki
     .akis-in i:nth-child(1) kurali ozgullukte one gecip animation-name'i
     geri koyuyor ve hareket azaltma isteyen kullanici yine hareket goruyordu.
     Medya sorgusu ozgulluk eklemez; secici en az onun kadar guclu olmali. */
  .akis .akis-in i{animation:none}
}
.akis.dur .akis-in i,
body.kaba .akis-in i,
body.lite2 .akis-in i{animation-play-state:paused}
body.lite2 .akis-in::after{display:none}

/* ==========================================================================
   KATMAN YIĞINI — kaydırdıkça katmanlar 3B'de ayrılır

   Sitede 3B dönüşüm hiç yoktu: ne perspective, ne rotateX/rotateY, ne
   rotate3d. Kaydırmaya bağlı animasyon, sabitlenen bölüm, yatay kaydırma
   ve clip-path zaten vardı; eksik olan tek teknik buydu.

   Konu uydurma değil: kaplama gerçekten tek katman değil. Üç plaka üç
   doğrulanmış bilgiyi taşıyor — çelik parça, çinko katmanı (firmanın cevabı
   5-25 µm) ve Cr+3 pasivasyon filmi (mavi/sarı).

   Maliyet: tek bir --p değişkeni yazılıyor, plakaların dönüşümü onu calc ile
   okuyor. Yani kare başına bir DOM yazımı; geri kalan her şey derleyici
   katmanında. Kaydırmalı videolardaki gibi çözme maliyeti yok.
   ========================================================================== */
.yigin{position:relative;height:260vh}
.yigin-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;
}
.yigin-ic{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;width:100%;
}
.yigin-sahne{
  position:relative;
  width:100%;max-width:640px;aspect-ratio:1/.76;margin-inline:auto;
  perspective:1250px;perspective-origin:50% 42%;
}
.yigin-plakalar{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(56deg - var(--p,0)*12deg)) rotateZ(calc(-20deg + var(--p,0)*7deg));
}
.yigin-plakalar > i{
  position:absolute;left:7%;right:7%;top:27%;height:38%;
  border-radius:6px;
  transform-style:preserve-3d;
  will-change:transform;
  box-shadow:0 18px 40px rgba(3,8,11,.55);
}
/* Alt plaka: çelik parça. Yerinde durur, diğerleri ondan ayrılır. */
.yigin-plakalar > i:nth-child(1){
  background:linear-gradient(150deg,#3E5A64 0%,var(--line-strong) 46%,#355059 100%);
  box-shadow:0 18px 40px rgba(3,8,11,.55),inset 0 1px 0 rgba(232,239,240,.22);
  transform:translateZ(0);
}
/* Çinko katmanı */
.yigin-plakalar > i:nth-child(2){
  background:linear-gradient(150deg,var(--steel) 0%,var(--text-dim) 44%,var(--text-secondary) 100%);
  transform:translateZ(calc(var(--p,0)*64px));
}
/* Pasivasyon filmi: ince, yanardöner. --irid zaten bu işin rengi. */
.yigin-plakalar > i:nth-child(3){
  /* Gökkuşağı şerit değil: Cr+3 mavi pasivasyon gerçekte yarı saydam, mavimsi
     gümüş bir film. Yanardönerlik yalnızca üst kenarda ince bir parıltı. */
  background:
    linear-gradient(90deg,rgba(201,161,94,.55),rgba(111,168,168,.45) 60%,rgba(78,127,139,.35)) top/100% 2px no-repeat,
    linear-gradient(150deg,rgba(163,174,175,.42) 0%,rgba(78,127,139,.34) 50%,rgba(111,168,168,.40) 100%);
  border:1px solid rgba(232,239,240,.16);
  opacity:calc(.70 + var(--p,0)*.30);
  transform:translateZ(calc(var(--p,0)*132px));
}
/* Plakaların kalınlığı: kenara ince bir yan yüz. Gerçek 3B kutu kurmak
   dört yüz daha demek; tek yan yüz kalınlık hissini veriyor. */
.yigin-plakalar > i::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--kalin,5px));
  height:var(--kalin,5px);
  border-radius:0 0 6px 6px;
  background:var(--yan,rgba(3,8,11,.55));
  transform:rotateX(-90deg);transform-origin:50% 0;
}
/* Yan yüz yüksekliği katmanın gerçek oranını anlatıyor: çelik parça kalın,
   çinko ince, pasivasyon bir film. Ölçekli değil ama sıralaması doğru. */
.yigin-plakalar > i:nth-child(1){--kalin:16px;--yan:linear-gradient(180deg,#2B3C43,#16242A)}
.yigin-plakalar > i:nth-child(2){--kalin:6px;--yan:linear-gradient(180deg,#7A8C94,#48595F)}
.yigin-plakalar > i:nth-child(3){--kalin:2px;--yan:rgba(111,168,168,.45)}
.yigin-liste{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.yigin-liste li{
  padding:16px 0;border-bottom:1px solid var(--line);
  opacity:.34;transition:opacity .45s var(--ease);
}
.yigin-liste li.on{opacity:1}
.yigin-liste b{
  display:block;font-family:var(--display);font-size:18px;letter-spacing:-.015em;
  color:var(--text-primary);
}
.yigin-liste .ol{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--accent);margin-bottom:7px;
}
.yigin-liste span.ac{
  display:block;margin-top:7px;color:var(--text-secondary);
  font-size:15px;line-height:1.55;
}

/* Telefon: 260vh sabitlenmiş bölüm telefonda ağır ve gereksiz. Yığın normal
   akışta, plakalar ayrılmış hâlde (p=1) duruyor — patlatılmış kesit gibi. */
@media (max-width:960px){
  .yigin{height:auto}
  .yigin-sticky{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .yigin-ic{grid-template-columns:1fr;gap:34px}
  .yigin-sahne{--p:1;max-width:430px;aspect-ratio:1/.94}
  .yigin-liste li{opacity:1}
  /* Telefonda uc sorun birden olculdu: dondurulmus plakalar sahneden
     genisti (320 px ekranda 334 px'e uzanip kesiliyordu), ust plaka
     sahnenin ustunden tasiyordu (-104 px) ve toplam yigin 244 px yer
     kapliyordu ama sahne 213 px'ti. Sahne yukseltildi, yigin asagi
     alindi, ayrim kisildi ve donmus kutu sahneye sigacak kadar
     kucultuldu. Ucu de olcumle dogrulandi. */
  .yigin-plakalar{transform:rotateX(46deg) rotateZ(-15deg) scale(.78)}
  .yigin-plakalar > i{left:12%;right:12%;top:52%;height:34%}
  .yigin-plakalar > i:nth-child(2){transform:translateZ(44px)}
  .yigin-plakalar > i:nth-child(3){transform:translateZ(90px)}
  /* 10 Eylul'de buraya ayrimi acan ikinci bir kural yazilmisti (104/212 px).
     Ayni secici ve daha sonra geldigi icin yukaridaki degerleri eziyordu ve
     ust plaka sahnenin disinda kaliyordu. Tek kural birakildi. */
}

/* Hareket azaltma ve en alt performans kademesi: 260vh boyunca hiçbir şey
   olmayan bir bölüm bırakmak yerine bölüm normal akışa dönüyor. */
@media (prefers-reduced-motion:reduce){
  .yigin{height:auto}
  .yigin-sticky{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .yigin-sahne{--p:1}
  .yigin-liste li{opacity:1}
}
/* Kisa ekran: olculdu, yigin icerigi 665-713 px ve 600 px'lik bir sahneye
   sigmiyordu (yatay telefon ve kucuk dizustu). Yukseklik yetmiyorsa bolum
   sabitlenmeden normal akista duruyor — telefondaki hale esdeger. */
@media (max-height:700px) and (min-width:961px){
  .yigin{height:auto}
  .yigin-sticky{position:static;height:auto;padding:clamp(48px,7vw,80px) 0}
  .yigin-sahne{--p:1}
  .yigin-liste li{opacity:1}
}

body.lite2 .yigin{height:auto}
body.lite2 .yigin-sticky{position:static;height:auto;padding:70px 0}
body.lite2 .yigin-sahne{--p:1}
body.lite2 .yigin-liste li{opacity:1}

/* ==========================================================================
   ZUM — kaydırdıkça tesisten mikrona iniş

   Sitede kaydırmaya bağlı zoom yoktu: mevcut scale kullanımları 1.03-1.08
   arası giriş cilasıydı. Bu bölüm üç gerçek fotoğrafı üst üste koyup
   kaydırma ilerlemesiyle birinden diğerine itiyor: hattın tamamı → banyonun
   üstündeki askı → yüzeydeki damla. Fotoğraflar zaten sitede olan kareler,
   yani "zoom" numara değil, gerçekten daha yakın bir çekime geçiyor.

   Maliyet: kare başına bir --p yazımı. Katmanların ölçeği calc ile, saydamlık
   sınıf değişimiyle ve CSS geçişiyle. Üçü de derleyici katmanında.
   ========================================================================== */
.zum{position:relative;height:300vh}
.zum-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.zum-kat{
  position:absolute;inset:0;
  opacity:0;transition:opacity .7s var(--ease);
  will-change:transform,opacity;
  transform:scale(calc(var(--a,1) + (var(--b,1) - var(--a,1)) * var(--p,0)));
}
.zum-kat img{width:100%;height:100%;object-fit:cover;display:block}
.zum-kat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,15,20,.62) 0%,rgba(6,15,20,.28) 42%,rgba(6,15,20,.86) 100%);
}
/* Her katmanın kendi ölçek aralığı: alttaki büyürken üstteki küçükten
   gelir, böylece geçiş "içine giriliyor" gibi okunur. */
.zum-kat:nth-child(1){--a:1;--b:1.38}
.zum-kat:nth-child(2){--a:.86;--b:1.30}
.zum-kat:nth-child(3){--a:.88;--b:1.16}
.zum[data-kat="0"] .zum-kat:nth-child(1),
.zum[data-kat="1"] .zum-kat:nth-child(2),
.zum[data-kat="2"] .zum-kat:nth-child(3){opacity:1}

.zum-yazi{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(22px,5vw,64px) clamp(46px,7vh,84px);
  z-index:2;pointer-events:none;
}
.zum-yazi ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:640px}
.zum-yazi li{
  opacity:.28;transition:opacity .5s var(--ease);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
}
.zum-yazi li.on{opacity:1}
.zum-yazi .ol{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.zum-yazi b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,2vw,23px);letter-spacing:-.018em;color:var(--text-primary);
}
.zum-yazi span.ac{grid-column:2;display:block;margin-top:4px;color:var(--text-secondary);font-size:15px;line-height:1.5}

/* Telefon ve hareket azaltma: 300vh sabitlenmiş bölüm yerine üç kare alt
   alta, altında kendi satırı. Aynı bilgi, kaydırma numarası olmadan. */
/* Dikkat: bu blok hem telefonu hem hareket azaltmayi kapsiyor. Genis bir
   masaustunde hareket azaltma aciksa telefon yerlesimi uygulaniyor; olculdu,
   2560 px'de alt yazilar 169 karaktere uzuyordu (okunur aralik 45-75).
   Bu yuzden genislik sinirlari "none" degil, ekrana ve okunabilirlige gore. */
@media (max-width:960px),(prefers-reduced-motion:reduce){
  .zum{height:auto}
  .zum-sticky{position:static;height:auto;overflow:visible;display:grid;gap:18px;
    padding:clamp(44px,8vw,72px) 0}
  .zum-kat{position:relative;inset:auto;opacity:1;transform:none;
    aspect-ratio:16/9;border-radius:var(--r-frame);overflow:hidden}
  .zum-kat::after{display:none}
  .zum-yazi{position:static;padding:0}
  .zum-yazi ol{max-width:min(100%,72ch);gap:16px}
  .zum-yazi li{opacity:1}
}
body.lite2 .zum{height:auto}
body.lite2 .zum-sticky{position:static;height:auto}
body.lite2 .zum-kat{position:relative;inset:auto;opacity:1;transform:none;aspect-ratio:16/9}
body.lite2 .zum-yazi li{opacity:1}

/* ==========================================================================
   BASKI — sayfa yazdirilinca okunur bir belge kalsin
   Koyu zemin mürekkebi yer, kaydirmali sahneler kagitta anlamsiz.
   ========================================================================== */
@media print{
  *{background:#fff !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
  .nav,.wa,.drawer,.burger,.ilerleme,.bubbles,.akis,.hrail-prog,.hrail-cue,.chev,.ring{display:none !important}
  .hero,.stage,.pscrub,.turn,.zum,.yigin,.hrail{height:auto !important}
  .stage,.pstage,.turn-sticky,.zum-sticky,.yigin-sticky,.hrail-sticky{position:static !important;height:auto !important}
  video,.sbg,.poster{display:none !important}
  /* Yuzey rengi kutucugu baskida bembeyaz bir bosluk olarak kaliyor:
     zemin rengi zorla beyaza cevriliyor. Kagitta anlami yok. */
  .finish .sw,.finish > span:first-child,.coat-card .swatch{display:none !important}
  .hrail-track{display:block !important;transform:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
  .rev,.stag > *{opacity:1 !important;transform:none !important;clip-path:none !important}
  section,.sec{padding:14px 0 !important;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}

/* ==========================================================================
   AÇILIŞ — firma adı el yazısıyla çizilir, sonra siteye geçilir

   Görünürlüğü <html class="acilis-acik"> belirler; o sınıfı CSS'ten önce
   çalışan satır içi betik koyar. JavaScript kapalıyken perde hiç görünmez.

   ZAMAN ÇİZELGESİ (perde 3,30 sn'de kalkıyor)
     0,00 – 0,30   kaplama banyosu atmosferi
     0,30 – 1,90   imza kalemle yazılıyor
     1,90 – 2,15   mürekkep oturuyor
     2,08 – 2,42   "Galvano" beliriyor
     2,42 – 2,90   kısa duruş
     2,90 – 3,30   perde kalkıyor
   Yazım 1,6 sn: gerçek bir imza da bu hızda atılır. Daha uzunu (3,25 sn
   denendi) ağır kalıyordu — el hissini süre değil, kalemin yolu ve
   darbelerin kendi uzunluğundan gelen tempo veriyor.

   KALEM HİSSİ — harfin dış hattı değil orta ekseni çiziliyor; kalın darbe
   harfin şekline kırpıldığı için mürekkep kalemin gittiği yönde doluyor.
   ========================================================================== */
.acilis{display:none}
html.acilis-acik .acilis{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:300;
  background:var(--canvas);
  animation:acilisCik .4s 2.9s var(--ease) forwards;
}
.acilis-ic{
  position:relative;z-index:1;
  display:grid;justify-items:center;gap:clamp(12px,1.8vh,20px);padding:0 24px;
}

/* KAPLAMA BANYOSU — imzanın arkasındaki atmosfer.
   Fabrika görüntüsü değil: soyut, makro, sıvı. Derinlikte yavaşça kayan
   iki ışık, yüzeyde soluk bir bant, içeride yukarı süzülen kabarcıklar.
   Hepsi transform/opacity, yani düzen hesabı yapılmıyor. */
.acilis-banyo{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  opacity:0;animation:banyoGir .4s var(--ease) forwards}
.acilis-banyo::before{
  content:'';position:absolute;inset:-18%;
  background:
    radial-gradient(ellipse 58% 40% at 32% 36%,rgba(111,168,168,.17),transparent 62%),
    radial-gradient(ellipse 48% 34% at 71% 64%,rgba(201,161,94,.11),transparent 64%);
  animation:banyoAkis 11s ease-in-out infinite alternate;
}
/* banyo yüzeyi */
.acilis-banyo::after{
  content:'';position:absolute;left:-12%;right:-12%;top:36%;height:26%;
  background:linear-gradient(180deg,transparent,rgba(163,174,175,.08) 46%,transparent);
  filter:blur(22px);
  animation:banyoYuzey 8s ease-in-out infinite alternate;
}
.acilis-banyo i{
  position:absolute;left:var(--x);bottom:-5%;
  width:var(--g);height:var(--g);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(232,239,240,.5),
             rgba(111,168,168,.15) 58%,transparent 72%);
  opacity:0;will-change:transform,opacity;
  animation:banyoKabarcik var(--sur) var(--gec) linear infinite;
}
@keyframes banyoGir{to{opacity:1}}
@keyframes banyoAkis{to{transform:translate3d(2.4%,-2.2%,0) scale(1.07)}}
@keyframes banyoYuzey{from{opacity:.55;transform:translateY(-7px)}
                      to{opacity:1;transform:translateY(9px)}}
@keyframes banyoKabarcik{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.68)}
  10%{opacity:.7}
  72%{opacity:.42}
  100%{opacity:0;transform:translate3d(var(--sap),-106vh,0) scale(1.06)}
}
/* viewBox gerçek mürekkebe göre daraltıldı (review/elyazisi-kalem.py). */
.acilis-imza{width:min(84vw,720px);height:auto;overflow:visible}

/* Kalem darbesi: harfin ORTA EKSENI boyunca ilerleyen kalın bir çizgi,
   harfin kendi şekline kırpılmış. Dış hattı çizdirmek 'harfin etrafı
   çiziliyor' gibi görünüyordu; bu 'kalemle yazılıyor' gibi görünüyor.
   Orta eksen review/elyazisi-kalem.py ile çıkarıldı (tarama + inceltme).
   --k harfin kendi kalınlığı, --b/--s darbenin zamanı; ikisi de harfin
   gerçek kalem yolu uzunluğundan hesaplandı, yani kalem sabit hızda. */
.acilis-kalem{
  fill:none;stroke:var(--text-primary);stroke-width:var(--k);
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:imzaCiz var(--s) var(--b) linear forwards;
}
/* Mürekkebin oturması: yazım bitince harflerin tam gövdesi beliriyor.
   Kalem darbesi uçlarda birkaç birim eksik kalabiliyor; bu kat onu
   kapatıyor, son görüntü harfin tam kendisi oluyor. */
.acilis-dolgu{
  fill:var(--text-primary);stroke:none;opacity:0;
  animation:imzaDol .25s 1.9s var(--ease) forwards;
}
.acilis-alt{
  font-family:var(--mono);font-size:var(--t-mikro);letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent);
  opacity:0;animation:acilisAlt .34s 2.08s var(--ease-out) forwards;
}
@keyframes imzaCiz{to{stroke-dashoffset:0}}
@keyframes imzaDol{to{opacity:1}}
@keyframes acilisAlt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes acilisCik{to{opacity:0;visibility:hidden;transform:scale(1.03)}}

/* ==========================================================================
   MİKRO KAPLAMA — ikinci ziyaret ve F5

   Marka açılışı oturumda bir kez. Sonraki açılışlarda kullanıcı
   bekletilmiyor: perde yok, imza yok. Hero zaten hazır; üstünden bir
   kaplama tabakası geçiyor ve mikro kabarcıklar çıkıyor, 1,2 sn'de bitiyor.
   Katman pointer-events:none, yani hiçbir an tıklamayı engellemiyor.
     0,00 – 0,18   hero hazır
     0,18 – 0,90   tabaka yüzeyde ilerliyor, kabarcıklar
     0,90 – 1,20   normal hero görüntüsüne dönüyor
   ========================================================================== */
.kaplama{display:none}
html.kaplama-acilis .kaplama{
  display:block;position:absolute;inset:0;pointer-events:none;
  animation:kaplamaCik .3s .9s var(--ease) forwards;
}
/* Kaplanan alan: cephenin arkasında kalan yüzey. scaleX ile büyüyor,
   gradyan dikey olduğu için yatay ölçekleme onu bozmuyor. */
.kaplama-yuzey{
  position:absolute;inset:0;transform-origin:0 50%;
  background:linear-gradient(180deg,rgba(111,168,168,.16),
             rgba(201,161,94,.12) 54%,rgba(163,174,175,.09));
  transform:scaleX(0);will-change:transform;
  animation:kaplamaYuzey .72s .18s linear forwards;
}
/* İlerleyen cephe: kaplamanın ön kenarı. Yüzeyle aynı süre ve aynı
   yumuşatma, yani parlak kenar tam dolan alanın ucunda duruyor. */
.kaplama-on{
  position:absolute;top:0;bottom:0;left:0;width:26%;
  background:linear-gradient(90deg,transparent 0 18%,rgba(111,168,168,.28) 52%,
             rgba(232,239,240,.40) 76%,rgba(201,161,94,.30) 88%,transparent);
  transform:translate3d(-100%,0,0);will-change:transform;
  animation:kaplamaOn .72s .18s linear forwards;
}
html.kaplama-acilis .kaplama i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--g);height:var(--g);border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.8),
             rgba(150,205,205,.3) 46%,transparent 64%);
  box-shadow:inset 0 0 0 1px rgba(232,239,240,.2);
  opacity:0;will-change:transform,opacity;
  animation:kaplamaKabarcik .5s var(--b) ease-out forwards;
}
@keyframes kaplamaYuzey{to{transform:scaleX(1)}}
@keyframes kaplamaOn{to{transform:translate3d(385%,0,0)}}
@keyframes kaplamaKabarcik{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.5)}
  35%{opacity:.9}
  100%{opacity:0;transform:translate3d(0,-22px,0) scale(1.1)}
}
@keyframes kaplamaCik{to{opacity:0;visibility:hidden}}
/* Hareket azaltma: mikro kaplama da hiç gösterilmiyor. */
@media (prefers-reduced-motion:reduce){
  html.kaplama-acilis .kaplama{display:none}
}

/* Atlanınca animasyon beklenmez, perde hemen kalkar. */
html.acilis-acik .acilis.gec{animation:acilisCik .28s var(--ease) forwards}

/* Hareket azaltma: perde hiç açılmaz. */
@media (prefers-reduced-motion:reduce){
  html.acilis-acik .acilis{display:none}
}