/* Vondel — sinematik sahne katmanı: ikiz sahnesi (#twin) + CTA nefesi.
   mobil.css'ten BAĞIMSIZ: [style*="…"] seçicisi bilerek YOK. Spec:
   docs/superpowers/specs/2026-08-27-sinematik-sahne-design.md §12–13.

   KATMAN FELSEFESİ (v2): TABAN düzen dikey ve statiktir — mobil, durgun
   tercih, motorsuz masaüstü ve betiğin hiç yüklenmediği durumlar dahil her
   koşulda okunur. Yapışkan sahne yalnız `min-width:1011px` + hareket serbest
   + `html.ve-motor` (ikiz-sahne.js betiğin başında ekler) birleşiminde
   devreye girer. Böylece betik ölürse ya da geç kalırsa üst üste binen
   mutlak konumlu yazı setleri diye bir durum OLUŞAMAZ. */

/* --ve-ac yalnız .ve-ikiz__filmsar'da tüketilir; inherits:false sayesinde
   her karedeki güncelleme alt ağaca miras hesabı yaptırmaz. */
@property --ve-ac{ syntax:"<number>"; inherits:false; initial-value:1; }

/* ——— TABAN: dikey, statik, tam görünür ——— */
#twin.ve-ikiz{ position:relative; padding:72px 0 64px; background:#67C0BA;
               isolation:isolate; }
/* komşu açık bölümlere yumuşak bağlantı (koyu sahne gelince alttaki kalkacak) */
#twin.ve-ikiz::before,#twin.ve-ikiz::after{
  content:""; position:absolute; left:0; right:0; height:140px; pointer-events:none; z-index:1;
}
#twin.ve-ikiz::before{ top:0;    background:linear-gradient(180deg,#F0F4F8,rgba(240,244,248,0)); }
/* alttaki artık koyu zemine bağlanıyor (#how ile başlayan koyu koşu) */
#twin.ve-ikiz::after{  bottom:0; background:linear-gradient(0deg,var(--ve-koyu),rgba(19,24,27,0)); }

/* ——— TEK KOYU ZEMİN: #how → #questions ———
   Ürün çekirdeğinin dört bölümü tek bir koyu yüzeyde durur; bölümler arası
   açık/beyaz nöbetleşmesi kalktığı için okuyucu "aynı zeminde içerik
   değişiyor" hissini alır. Spec §5.

   KAPSAM BİLEREK DAR: yalnız bölüm zemini ve doğrudan zeminin üstünde duran
   başlık bloğu değişir. Kartlar ve açık levhalar AYDINLIK KALIR — koyu
   sahnede duran parlak levhalar. Böylece kart/levha içlerindeki onlarca renk
   hiç ellenmez; `#333F48` ve `#F0F4F8` değerleri kart içinde de geçtiği için
   toptan bir `[style*="…"]` kuralı beyaz kartta beyaz yazı üretirdi.
   Bu yüzden seçiciler yapısal ve çocuk birleştiricili: kart içine ERİŞEMEZLER.

   Dördünde de zeminin üstündeki tek düğüm `section > div > ilk div`:
     #how        → [h2, p(spot)]
     diğer üçü   → [p(turuncu üstyazı), h2, p(spot)]
   `p:last-child` her dördünde spot paragrafı verir, turuncu üstyazıya
   dokunmaz (#FF8200 koyu zeminde 7,18:1 — zaten AA). */
:root{
  --ve-koyu:#13181B;              /* yüzey */
  --ve-koyu-yazi:#FFFFFF;         /* 17,85:1 */
  --ve-koyu-govde:rgba(255,255,255,.78);  /* 11,08:1 */
}
#how, #posture, #assessment{ background:var(--ve-koyu) !important; }
/* koşunun sonu: son 120px'de açık zemine (#day) çözülür. Bölümün kendi
   arka planı olduğu için içerik doğal olarak üstünde boyanır — kaplayan
   sözde öğe kullanılsaydı yığın sırası ayrıca çözülmesi gerekirdi. */
#questions{
  background:linear-gradient(180deg,
    var(--ve-koyu) 0, var(--ve-koyu) calc(100% - 120px), #F0F4F8 100%) !important;
}
#how > div > div:first-child > h2,
#posture > div > div:first-child > h2,
#assessment > div > div:first-child > h2,
#questions > div > div:first-child > h2{ color:var(--ve-koyu-yazi) !important; }
#how > div > div:first-child > p:last-child,
#posture > div > div:first-child > p:last-child,
#assessment > div > div:first-child > p:last-child,
#questions > div > div:first-child > p:last-child{ color:var(--ve-koyu-govde) !important; }

/* ——— YATAY SAHNE (#how "Dört adım") ———
   Bölüm ekrana yapışır, dört kart 2×2 ızgaradan tek sıralık şeride döner ve
   sayfa aşağı kaydıkça şerit yana akar. Spec §1–4.

   Kapı `html.ve-yatay`: yatay-sahne.js ölçüm TUTTUKTAN sonra ekliyor.
   `ve-motor`'a bağlanmıyor — o sınıf ikiz sahnesinin motorunu anlatır; bu
   betik düşüp o ayakta kalırsa pin açılır ama şerit x=0'da donar ve 2.–4.
   karta hiç ulaşılamazdı.

   Şerit kapsayıcının 1085px'lik penceresinde kırpılıyor, ekran kenarına
   taşmıyor: şeridin sol kenarı başlığın sol kenarıyla hizalı kalsın diye.
   Kart genişliği sabit değil, `(%100 − boşluk) / 2` — kartlar tasarımdaki
   iki'li ızgara oranını her pencere genişliğinde koruyor. */
@media (min-width:1011px) and (prefers-reduced-motion: no-preference){
@supports (height: 100svh){
  /* Bölüm boyu = bir ekran + yatay yol. Yol, betik şeridi ölçtükten sonra
     `--ve-yatay-yol` ile geliyor; gelmezse 0 ve bölüm tek ekran kalır. */
  html.ve-yatay #how{
    position:relative; height:calc(100svh + var(--ve-yatay-yol,0px));
    /* satır içi `padding:120px 64px` daha güçlü; dikey payı elle sıfırla */
    padding-top:0 !important; padding-bottom:0 !important;
  }
  html.ve-yatay #how > div{
    position:sticky; top:0; height:100svh; overflow:hidden;
    display:grid; grid-template-rows:auto auto; align-content:center; row-gap:48px;
  }
  html.ve-yatay #how > div > div:nth-child(2){
    display:flex !important; gap:24px; margin-top:0 !important;
    will-change:transform;
    transform:translate3d(calc(-1 * var(--ve-yatay-x,0px)),0,0);
  }
  html.ve-yatay #how > div > div:nth-child(2) > div{ flex:0 0 calc((100% - 24px) / 2); }

  /* Şerit akarken imleç kilidi: kartlar sabit imlecin altından geçerken
     sırayla mouseenter üretip otomatik tanıtımları birbirine düşürüyordu.
     Şerit durur durmaz (140 ms) kalkar — kullanıcının kendi tıklaması
     her zaman şerit sabitken olur, o yüzden etkilenmez. */
  html.ve-yatay-akiyor #how > div > div:nth-child(2){ pointer-events:none; }

  /* Yapışkan yatay sahnede "ne kadar kaldı" görünmez olur; ince bir
     ilerleme çizgisi yönü veriyor. */
  html.ve-yatay #how > div::after,
  html.ve-yatay #how > div::before{
    content:""; position:absolute; bottom:56px; height:2px; pointer-events:none;
  }
  html.ve-yatay #how > div::after{ left:0; right:0; background:rgba(255,255,255,.14); }
  html.ve-yatay #how > div::before{
    left:0; width:calc(var(--ve-yatay-p,0) * 100%); background:#2BA7A3; z-index:1;
  }
}}

/* z-index VERME: pin yığın bağlamı oluşturursa başlık (z:3) ve setler (z:2)
   içine hapsolur, kapaklar (z:1) yazının üstüne boyanır. */
.ve-ikiz__pin{ position:relative; }
.ve-ikiz__kutu{ position:relative; width:100%; max-width:1280px; margin:0 auto; }

.ve-ikiz__baslik{ position:relative; text-align:center; z-index:3;
                  padding:0 clamp(20px,8vw,66px); margin:0 auto 26px; }
.ve-ikiz__baslik p{ margin:0; font-family:Poppins,sans-serif; font-weight:600;
                    font-size:13px; letter-spacing:.1em; text-transform:uppercase;
                    color:rgba(19,24,27,.78); }
.ve-ikiz__baslik h2{ margin:10px 0 0; font-family:Poppins,sans-serif; font-weight:400;
                     font-size:clamp(24px,2.6vw,38px); line-height:1.12;
                     letter-spacing:-.03em; color:#13181B; text-wrap:balance; }

.ve-ikiz__filmsar{ position:relative; --ve-ac:1; }
.ve-ikiz__film{ position:relative; display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent); }
.ve-ikiz__set{ position:relative; display:flex; flex-direction:column; gap:22px;
               max-width:760px; margin:34px auto 0;
               padding:0 clamp(20px,8vw,66px); z-index:2; }
.ve-ikiz__madde{ position:relative; }
.ve-ikiz__madde h3{ margin:0; font-family:Poppins,sans-serif; font-weight:500;
                    font-size:20px; color:#13181B; }
.ve-ikiz__madde p{ margin:6px 0 0; font-size:15px; line-height:1.65; color:rgba(19,24,27,.82); }
/* gizlilik cümlesi — AA için .78'in altına düşürme (spec §12.6) */
.ve-ikiz__madde p.ve-ikiz__kucuk{ font-size:13px; color:rgba(19,24,27,.78); margin-top:8px; }

/* çizgiler yalnız yapışkan sahnede görünür */
.ve-ikiz__cizgi{ display:none; }
.ve-ikiz__cizgi path{ fill:none; stroke:rgba(19,24,27,.55); stroke-width:1.5;
                      stroke-dasharray:100; stroke-dashoffset:0; }

/* ——— YAPIŞKAN SAHNE: yalnız masaüstü + hareket serbest + motor ayakta ———
   @supports kapısı şart: media query'yi bilen ama svh'yi bilmeyen bir
   tarayıcıda (≈2022 öncesi) yükseklik bildirimleri tek tek düşer, gizli
   durumlar kalırdı — altı madde görünmez olurdu. svh yoksa taban düzene
   düşülür. */
@media (min-width:1011px) and (prefers-reduced-motion: no-preference){
@supports (height: 100svh){
  html.ve-motor #twin.ve-ikiz{
    --ve-ikiz-kaydirma: 480px;    /* v4: akış jest kapılı — tavan tutar, serbest
                                     kalınca bu küçük pay hızla geçilir */
    --ve-ikiz-ustbilgi: 0px;      /* ray sol kenarda: üstte bar yok, sahne tam yükseklik */
    --ve-ikiz-baslikpay: 108px;   /* yedek — motor gerçek başlık yüksekliğini ölçüp ezer */
    padding:0;
    height:calc(100svh + var(--ve-ikiz-kaydirma));
  }
  /* sticky yığın bağlamı oluşturur: kapaklar (z:1) sahnede pinin üstüne
     boyanır — bilinçli (bölüm kenarı geçişleri). Başlık kendi bandında,
     kutu kalan alanda ortalanır ve yüksekliğe de kenetlenir — üst üste
     binme yapısal olarak imkânsız. */
  html.ve-motor .ve-ikiz__pin{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:grid; grid-template-rows:auto 1fr; justify-items:center; align-items:center;
    box-sizing:border-box; padding-top:var(--ve-ikiz-ustbilgi); }
  html.ve-motor .ve-ikiz__baslik{ position:relative; width:min(860px,92%);
    padding:14px 0 0; margin:0; }
  html.ve-motor .ve-ikiz__kutu{ margin:0; max-width:none; aspect-ratio:16/9;
    width:min(1280px, 100%, calc((100svh - var(--ve-ikiz-ustbilgi) - var(--ve-ikiz-baslikpay)) * 16 / 9)); }
  /* faz maskesi (yatay perde): --ve-ac'ı motor filmsar üstünde sürer */
  html.ve-motor .ve-ikiz__filmsar{ position:absolute; inset:0;
    -webkit-mask-image:linear-gradient(to right,#000 calc(45% + var(--ve-ac)*55%),transparent calc(52% + var(--ve-ac)*55%));
            mask-image:linear-gradient(to right,#000 calc(45% + var(--ve-ac)*55%),transparent calc(52% + var(--ve-ac)*55%));
  }
  html.ve-motor .ve-ikiz__film{ position:absolute; inset:0; width:100%; height:100%;
    aspect-ratio:auto;
    /* kenar tüyü: video sınırı zemine erisin (iki katman + kesişim) */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
                       linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
                       linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
            mask-composite:intersect;
  }
  html.ve-motor .ve-ikiz__set{ position:absolute; top:50%; transform:translateY(-50%);
    margin:0; padding:0; max-width:none; gap:30px; }
  html.ve-motor .ve-ikiz__set--1{ left:53%; width:40%; }
  html.ve-motor .ve-ikiz__set--2{ left:40%; width:43%; }
  html.ve-motor .ve-ikiz__cizgi{ display:block; position:absolute; right:100%;
    top:2px; margin-right:10px; overflow:visible; }

  /* — gizli başlangıç durumları (yalnız sahnede var olurlar) —
     v4: görünürlük KONTEYNER bazlı — motor sete .ve-goster verir, üç madde
     kademeli açılır; sınıf kalkınca gecikmeler de kalkar, üçü birlikte söner. */
  html.ve-motor .ve-ikiz__madde{ opacity:0; transform:translateY(8px); pointer-events:none;
    transition:opacity .45s ease,transform .45s ease; }
  html.ve-motor .ve-ikiz__cizgi path{ stroke-dashoffset:100;
    transition:stroke-dashoffset .5s ease; }
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde{ opacity:1; transform:none; pointer-events:auto; }
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__cizgi path{ stroke-dashoffset:0; }
  /* kademeli giriş.
     NOT: :nth-child, sette YALNIZ .ve-ikiz__madde çocukları olduğu
     varsayımına dayanır — sete başka eleman ekleme. */
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(1),
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(1) .ve-ikiz__cizgi path{ transition-delay:.1s; }
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(2),
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(2) .ve-ikiz__cizgi path{ transition-delay:.45s; }
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(3),
  html.ve-motor .ve-ikiz__set.ve-goster .ve-ikiz__madde:nth-child(3) .ve-ikiz__cizgi path{ transition-delay:.8s; }

  /* SET 2 kalıcıdır ve hafifçe süzülür.
     animation-delay her maddenin KENDİ giriş geçişi bittikten sonra başlar
     (gecikme + .45s): animasyon transform'u devralınca geçiş kesilirdi. */
  html.ve-motor .ve-ikiz__set--2.ve-goster .ve-ikiz__madde{
    animation:ve-yuzme 5.2s ease-in-out infinite alternate; }
  html.ve-motor .ve-ikiz__set--2.ve-goster .ve-ikiz__madde:nth-child(1){ animation-delay:.6s; animation-duration:5.2s; }
  html.ve-motor .ve-ikiz__set--2.ve-goster .ve-ikiz__madde:nth-child(2){ animation-delay:.95s; animation-duration:6.1s; }
  html.ve-motor .ve-ikiz__set--2.ve-goster .ve-ikiz__madde:nth-child(3){ animation-delay:1.3s; animation-duration:5.6s; }
}
}

@keyframes ve-yuzme{
  from{ transform:translateY(-4px); }
  to{   transform:translateY(4px); }
}

/* ——— Aşağıdaki bölümlerin giriş animasyonu ———
   Sayfada zaten `[data-rev]` / `[data-grow]` altyapısı var (index.html:44–54)
   ve Component'in IntersectionObserver'ı `.in` sınıfını veriyor. Buradaki
   kurallar onu zenginleştirir: daha uzun yol, yay eğrisi, hafif ölçek ve
   kardeşler arası kademe — öğeler tek blok hâlinde değil sırayla yerleşir.

   ⚠️ Neden GEÇİŞ, animasyon değil: `kart-ipucu.js` ilk "Nasıl çalışır"
   kartına `[data-vh-kipirda]` ile bir CSS ANİMASYONU uyguluyor. Buraya da
   animasyon yazsaydık aynı özelliği yönetirdik; bizim seçicimiz daha
   özgül olduğu için kıpırdama ipucu hiç oynamazdı. Geçiş kullanınca ikisi
   ayrı mekanizma olur ve çakışmaz.

   ⚠️ Neden `!important`: o dört kart satır içi `transition: transform 300ms`
   taşıyor (index.html'deki hover kaldırması için) ve satır içi bildirim
   normal kuralları ezer. Sadece `transition` ezilir — `opacity`/`transform`
   değerleri değil, dolayısıyla index.html'deki `prefers-reduced-motion` ve
   `print` blokları (`!important` ile yazılı) aynen kazanmaya devam eder.
   Hover'ın çevik kalması için transform süresi kısa (.38s) tutuldu. */
html.ve-motor [data-rev]{
  opacity:0; transform:translateY(42px) scale(.98);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),
             transform .38s cubic-bezier(.2,.7,.2,1) !important;
}
html.ve-motor [data-rev].in{ opacity:1; transform:none; }
/* Bazı öğeler ikisini birden taşıyor; !important olmadan yukarıdaki
   [data-rev] geçişi bunu ezerdi. */
html.ve-motor [data-grow]{ opacity:0; transform:scale(.94);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1) !important; }
html.ve-motor [data-grow].in{ opacity:1; transform:scale(1); }
/* kardeş kademesi — ızgaradaki kartlar/sütunlar sırayla yerleşir */
html.ve-motor [data-rev]:nth-child(2){ transition-delay:.08s !important; }
html.ve-motor [data-rev]:nth-child(3){ transition-delay:.16s !important; }
html.ve-motor [data-rev]:nth-child(4){ transition-delay:.24s !important; }
/* Sahne kendi zamanlamasını yönetir — oradaki hiçbir şey bu akışa girmez */
html.ve-motor #twin [data-rev]{ transition-delay:0s !important; }

/* ——— Koyu koşuda YANAL giriş ———
   #posture / #assessment / #questions blokları aşağıdan değil yandan girer:
   başlık bir yandan, içerik öbür yandan, yön bölümler arası dönüşümlü.
   Böylece koyu koşu boyunca okuma "aynı zeminin üstünde içerik sağa-sola
   kayarak değişiyor" gibi okunur — dört bölümü de ayrı ayrı ekrana
   yapıştırmadan. Spec §1.

   #how bu kurala DAHİL DEĞİL: kendi yatay şeridini sürüyor ve kartları
   aşağıdan girmeli (şerit zaten yana akıyor, ikisi üst üste binerdi).

   Yol `clamp` ile: dar ekranda 72px bölümün büyük bir kısmı olurdu.
   Yön çarpanı ayrı değişkende — işaret seçiciye değil, tek yere yazılı. */
html.ve-motor #posture [data-rev],
html.ve-motor #assessment [data-rev],
html.ve-motor #questions [data-rev]{
  transform:translateX(calc(var(--ve-yan-yon,1) * clamp(28px,5vw,72px))) scale(.985);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),
             transform .78s cubic-bezier(.2,.7,.2,1) !important;
}
/* ⚠️ `.in` sıfırlaması BURADA tekrar yazılmak ZORUNDA: genel kural
   `html.ve-motor [data-rev].in{ transform:none }` yalnız sınıf taşıyor,
   yukarıdaki kural ise id — id kazandığı için bloklar beliriyor ama
   yerine hiç kaymıyordu (opaklık düzeliyor, konum takılı kalıyordu).
   Yeni bölüm eklerken bu iki listeyi BİRLİKTE güncelle. */
html.ve-motor #posture [data-rev].in,
html.ve-motor #assessment [data-rev].in,
html.ve-motor #questions [data-rev].in{ transform:none; }

html.ve-motor #posture    > div > div:first-child,
html.ve-motor #questions  > div > div:first-child{ --ve-yan-yon:-1; }
html.ve-motor #posture    > div > div:nth-child(2) > div,
html.ve-motor #questions  > div > div:nth-child(2){ --ve-yan-yon:1; }
html.ve-motor #assessment > div > div:first-child{ --ve-yan-yon:1; }
html.ve-motor #assessment > div > div:nth-child(2){ --ve-yan-yon:-1; }

/* ⚠️ ŞART: yanal kaydırma düzeni değiştirmez ama KAYDIRILABİLİR ALANI
   büyütür — bloklar bölüm genişliğini iki yandan da ~8px aşıyor ve sayfa
   yatay çubuk çıkarıyordu. `clip` seçildi, `hidden` değil: hidden bir
   kaydırma konteyneri kurar ve içeride kalabilecek yapışkan öğeleri bozar. */
#posture, #assessment, #questions{ overflow-x:clip; }

/* ——— CTA: 3B giriş + nefes (tüm genişlikler) ——— */
.ve-nefes{ display:inline-block; }
/* Gizli başlangıç durumu BİLİNÇLİ OLARAK YOK (CLAUDE.md'deki GIRIS_YEDEK_MS
   dersi): giriş animasyonu zaten from{opacity:0}+both ile görünmezden başlar.
   Kalıcı bir opacity:0 kuralı, motorun #twin'e bağlı herhangi bir aksiliğinde
   bu CTA'yı sonsuza dek gizlerdi. */
html.ve-motor .ve-nefes.ve-goster{
  animation:ve-cta-giris .7s cubic-bezier(.2,.7,.25,1) both,
            ve-cta-nefes 4.6s ease-in-out .8s infinite alternate;
}
@keyframes ve-cta-giris{
  from{ opacity:0; transform:perspective(900px) rotateX(14deg) translateY(26px) scale(.97); }
  to{   opacity:1; transform:perspective(900px) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes ve-cta-nefes{
  from{ transform:translateY(-2px); }
  to{   transform:translateY(3px); }
}
/* durgun tercihi canlı geçişte de kazansın (oturum ortasında açılsa bile) */
/* ——— Ajan sohbeti (#agent): mesajlar sırayla, arada "yazıyor" göstergesi ———
   Tetik, kartın kendi `[data-rev]` → `.in` sınıfı: kart görünür olunca
   sıra başlar. Zamanlama saf CSS `animation-delay` — React yeniden render
   etse bile sınıflar şablondan geldiği için sıra bozulmaz.
   Yer önceden ayrılır (balonlar `opacity:0` ile akışta durur), böylece kart
   yüksekliği sabit kalır ve sayfa zıplamaz; "yazıyor" göstergesi de mesajın
   geleceği yerin sol üstünde belirir. */
.ve-sohbet .ve-balon{ position:relative; }
/* Sarıcı, balonun ESKİ geometrisini birebir üstlenir: max-width:82% artık
   sarıcıda, balon da onu tamamen doldurur. Aksi hâlde balon satır içi
   `max-width:82%`ini sarıcıya göre yeniden çözüyor ve özgün genişlikten
   sapıyordu (ölçüldü: 420px yerine 384px olmalı). */
.ve-ajan-sar{ position:relative; max-width:82%; }
.ve-sohbet .ve-balon--ajan{ max-width:100% !important; }
.ve-yaziyor{
  position:absolute; left:0; top:0; display:none; gap:5px;
  padding:15px 18px; border-radius:16px 16px 16px 4px; background:#F0F4F8;
}
.ve-yaziyor i{ width:7px; height:7px; border-radius:50%; background:rgba(51,63,72,.42); display:block; }

html.ve-motor .ve-sohbet .ve-balon{ opacity:0; }
html.ve-motor .ve-sohbet.in .ve-balon{
  animation:ve-mesaj .5s cubic-bezier(.2,.7,.2,1) backwards;
  opacity:1;
}
html.ve-motor .ve-sohbet.in .ve-ajan-sar .ve-yaziyor{ display:flex; }
/* `both` şart: gecikme boyunca 0%% (gizli), bitince 100%% (gizli) kalır.
   `backwards` olsaydı animasyon bitince öğe kendi opaklığına (1) döner ve
   noktalar mesajın üstünde kalıcı olarak yeniden belirirdi. */
html.ve-motor .ve-sohbet.in .ve-yaziyor{ animation:ve-yaziyor-goster 1.3s linear both; }
html.ve-motor .ve-sohbet.in .ve-yaziyor i{ animation:ve-nokta 1.1s ease-in-out 2 backwards; }

/* Sıra: ben(0,25) → yazıyor(0,8–2,1) → ajan(2,1) → ben(2,9) → yazıyor(3,4–4,7) → ajan(4,7) */
html.ve-motor .ve-sohbet.in > .ve-balon--ben:nth-child(1){ animation-delay:.25s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(2) .ve-balon{ animation-delay:2.1s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(2) .ve-yaziyor{ animation-delay:.8s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(2) .ve-yaziyor i{ animation-delay:.9s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(2) .ve-yaziyor i:nth-child(2){ animation-delay:1.06s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(2) .ve-yaziyor i:nth-child(3){ animation-delay:1.22s; }
html.ve-motor .ve-sohbet.in > .ve-balon--ben:nth-child(3){ animation-delay:2.9s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(4) .ve-balon{ animation-delay:4.7s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(4) .ve-yaziyor{ animation-delay:3.4s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(4) .ve-yaziyor i{ animation-delay:3.5s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(4) .ve-yaziyor i:nth-child(2){ animation-delay:3.66s; }
html.ve-motor .ve-sohbet.in > .ve-ajan-sar:nth-child(4) .ve-yaziyor i:nth-child(3){ animation-delay:3.82s; }

@keyframes ve-mesaj{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{   opacity:1; transform:none; }
}
/* gösterge süresi animation-duration ile belirlenir; sonunda kaybolur */
@keyframes ve-yaziyor-goster{
  0%{   opacity:0; transform:translateY(6px); }
  10%{  opacity:1; transform:none; }
  88%{  opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-4px); }
}
@keyframes ve-nokta{
  0%,60%,100%{ transform:translateY(0);   opacity:.45; }
  30%{         transform:translateY(-5px); opacity:1; }
}

/* ═══════════ SOL KENAR RAYI (gezinme) ═══════════
   pear.no sistemi: sabit dikey ray + tipografik morf. Ray YALNIZ masaüstünde
   (≥1011px) kurulur; altında `mobil.css` üst barı yönetir ve `header nav`'i
   zaten gizler — bu blok oraya hiç karışmaz.

   ⚠️ `!important` neden: `<header>` satır içi stilinde `top/left/right`,
   `display:flex` (satır), `padding` ve beyaz zemin taşıyor. Satır içi
   bildirim normal kuralları ezdiği için rayı kurmak ancak böyle mümkün.
   Satır içi stil BİLEREK korundu: sahne.css yüklenmezse ya da mobilde,
   üstbilgi bugünkü çalışan üst bar olarak kalır (güvenli geri düşüş).

   ⚠️ Gövde aynı miktarda sağa kaydırılır (`.ve-govde`), aksi hâlde ray
   1440px altındaki ekranlarda metnin üstüne biner: bölümler `padding:0 64px`
   ile başlıyor, yani 1280px'te metin x=64'ten başlıyor. */
@media (min-width:1011px){
  /* Tek kaynak: ray genişliği hem rayın kendisinde hem gövde kaymasında
     kullanılır — ikisi ayrı yazılırsa sessizce birbirinden kopar. Değer,
     en uzun TR etiketine ("Nasıl çalışır" / "Kurumlar için") göre ölçüldü. */
  html{ --ve-ray-genislik: 212px; }
  header.ve-ray{
    top:0 !important; bottom:0 !important; left:0 !important; right:auto !important;
    width:var(--ve-ray-genislik) !important;
    box-sizing:border-box !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:30px 0 30px 40px !important;
    background:transparent !important;
    pointer-events:none;            /* boş alan tıklamayı yutmasın */
  }
  header.ve-ray > *{ pointer-events:auto; }
  .ve-govde{ box-sizing:border-box; padding-left:var(--ve-ray-genislik); }

  .ve-ray__marka span{ display:none; }          /* rayda yalnız işaret kalır */
  .ve-ray__grup{
    flex-direction:column !important; align-items:flex-start !important;
    gap:22px !important; margin:auto 0;
  }

  /* ——— bağlantı listesi + ilerleme çizgisi ——— */
  .ve-ray__nav{
    flex-direction:column !important; align-items:flex-start !important;
    gap:0 !important; position:relative; padding-left:16px !important;
  }
  .ve-ray__nav::before,
  .ve-ray__nav::after{ content:""; position:absolute; left:2px; width:1px; }
  .ve-ray__nav::before{ top:10px; bottom:10px; background:rgba(51,63,72,.18); }
  .ve-ray__nav::after{
    top:10px; height:calc(var(--ve-ray-p,0) * (100% - 20px));
    background:#2BA7A3; transition:height .18s linear;
  }
  .ve-ray__nav a{
    position:relative; display:flex; align-items:baseline; gap:8px;
    padding:9px 0; color:rgba(51,63,72,.45) !important;
    transition:color .35s ease;
  }
  .ve-ray__nav a:hover{ color:rgba(51,63,72,.85) !important; }
  .ve-ray__nav a.ve-ray-aktif{ color:#2BA7A3 !important; }
  /* aktif işaretleyici: çizginin üstünde küçük nokta */
  .ve-ray__nav a::before{
    content:""; position:absolute; left:-18px; top:50%; width:5px; height:5px;
    margin-top:-2.5px; border-radius:50%; background:#2BA7A3;
    opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .3s ease;
  }
  .ve-ray__nav a.ve-ray-aktif::before{ opacity:1; transform:none; }

  .ve-ray__no{
    font-family:Poppins,sans-serif; font-size:9px; letter-spacing:.14em;
    opacity:.5; font-variant-numeric:tabular-nums; flex:none;
  }
  /* Ray tek tipografide sabit: küçük, büyük harf, geniş aralıklı.
     Şablonda iki kopya duruyor; büyük olan yalnız satır kutusunu ve tıklama
     alanının genişliğini taşıyor, `visibility` ile hem gözden hem erişim
     ağacından çıkarılıyor (yoksa ekran okuyucu adı iki kez okurdu). */
  .ve-ray__ad, .ve-ray__mini{ font-family:Poppins,sans-serif; display:block; }
  .ve-ray__ad{
    font-size:15px; font-weight:400; letter-spacing:-.01em; visibility:hidden;
  }
  .ve-ray__mini{
    position:absolute; left:25px; top:50%; margin-top:-6px;
    font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  }

  /* ——— CTA + dil ——— */
  .ve-ray__cta{
    font-size:11px !important; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; margin-top:auto;
  }
  .ve-ray__cta::after{ content:" →"; }
  .ve-ray__dil{ padding:3px !important; }
  .ve-ray__dil button{ padding:5px 10px !important; font-size:11px !important; }
}

/* Ray statiktir; motor yoksa da okunur. Durgun tercihte geçişler kapalı. */
@media (prefers-reduced-motion:reduce){
  .ve-ray__nav a,
  .ve-ray__nav a::before, .ve-ray__nav::after{ transition:none !important; }
}

@media (prefers-reduced-motion:reduce){
  html.ve-motor .ve-nefes,
  html.ve-motor .ve-nefes.ve-goster{ opacity:1; animation:none; }
  /* index.html'deki blok opacity/transform'u zaten !important ile sabitliyor;
     burada geçiş/süzülme de susturuluyor. */
  html.ve-motor [data-rev], html.ve-motor [data-grow]{ transition:none !important; }
  html.ve-motor .ve-ikiz__set--2.ve-goster .ve-ikiz__madde{ animation:none; }
  html.ve-motor .ve-sohbet .ve-balon{ opacity:1; animation:none; }
  html.ve-motor .ve-sohbet .ve-yaziyor{ display:none !important; }
}