/* PALETTE VİTRİN · "ATÖLYE ELİ" HAREKET SİSTEMİ v1 (Tur A çekirdek)
   Kural: yalnız transform + opacity animasyonu. Token dışı easing/süre YAZILMAZ.
   Mobil (≤900px / pointer:coarse): hafif mod. prefers-reduced-motion: tam kapanış (en altta). */
:root{
  --e-cikis: cubic-bezier(.22,.61,.20,1);   /* standart: reveal + geçiş */
  --e-vurgu: cubic-bezier(.34,1.30,.50,1);  /* hafif taşma: YALNIZ imza anları */
  --e-duz: linear;                          /* ambient döngüler */
  --t-mikro: 160ms;
  --t-gecis: 280ms;
  --t-reveal: 600ms;
  --t-sahne: 900ms;
  --kalk-1: 6px; --kalk-2: 20px; --kalk-3: 36px;
  --sira: 70ms;
}

/* ── REVEAL v2 ─────────────────────────────────────────────
   LCP KURALI: varsayılan GÖRÜNÜR (CSS hiçbir şeyi baştan gizlemez —
   gizli başlayan öğe LCP'yi geciktirir, I9 kanıtı). motion.js yalnız
   fold-ALTI öğelere .bekle verir; kesişince .on ile açılır.
   JS yoksa / reduced-motion: her şey görünür kalır. */
.reveal,.rv,.rv-sol,.rv-sag,.rv-grup>*{
  transition:opacity var(--t-reveal) var(--e-cikis),transform var(--t-reveal) var(--e-cikis)}
.reveal.bekle,.rv.bekle{opacity:0;transform:translateY(var(--kalk-2))}
.rv-sol.bekle{opacity:0;transform:translateX(calc(-1 * var(--kalk-3)))}
.rv-sag.bekle{opacity:0;transform:translateX(var(--kalk-3))}
.rv-grup.bekle>*{opacity:0;transform:translateY(var(--kalk-2))}
.reveal.on,.rv.on,.rv-sol.on,.rv-sag.on{opacity:1;transform:none}
.rv-grup.on>*{opacity:1;transform:none}
.rv-grup.on>:nth-child(2){transition-delay:var(--sira)}
.rv-grup.on>:nth-child(3){transition-delay:calc(var(--sira)*2)}
.rv-grup.on>:nth-child(4){transition-delay:calc(var(--sira)*3)}
.rv-grup.on>:nth-child(5){transition-delay:calc(var(--sira)*4)}
.rv-grup.on>:nth-child(n+6){transition-delay:calc(var(--sira)*5)}

/* ── BAŞLIK İMZASI: bronz mürekkep süpürmesi ───────────────
   Saf compositor: pseudo-element, scaleX 0→1 (background-size DEĞİL). */
h1 em,h2 em{position:relative;z-index:0}
h1 em::after,h2 em::after{content:"";position:absolute;z-index:-1;
  left:-.05em;right:-.05em;bottom:.04em;height:.34em;border-radius:2px;
  background:var(--accent);opacity:.20;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--e-cikis) .25s}
h1.imza-on em::after,h2.imza-on em::after{transform:scaleX(1)}

/* ── NAV UYANIŞI (scroll > 40px) ───────────────────────────
   Sticky; zemin tam-genişlik pseudo, yalnız opacity animasyonu. */
.nav{position:sticky;top:0;z-index:60}
.nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;z-index:-1;
  transform:translateX(-50%);background:color-mix(in srgb,var(--bg) 94%,transparent);
  box-shadow:var(--gol-sm);border-bottom:1px solid var(--line-soft);
  opacity:0;transition:opacity var(--t-gecis) var(--e-cikis)}
.nav-kati::before{opacity:1}
.mobilmenu{position:relative;z-index:59}

/* ── İNDEX: HERO GİRİŞ KOREOGRAFİSİ (.hg) ──────────────────
   LCP kuralı: h1 satırları YALNIZ transform ile girer (opacity hep 1,
   ilk karede boyanır). Toplam sahne ≤1.1s. */
@keyframes hgKalk{from{transform:translateY(22px)}to{transform:none}}
@keyframes hgBelir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hgOpak{from{opacity:0}to{opacity:1}}
.hg .eyebrow{animation:hgBelir .5s var(--e-cikis) both}
.hg h1 .hs{display:block;animation:hgKalk .6s var(--e-cikis) both}
.hg h1 .hs:nth-child(2){animation-delay:.09s}
.hg h1 .hs:nth-child(3){animation-delay:.18s}
.hg .sub{animation:hgBelir .55s var(--e-cikis) .28s both}
.hg .hero-cta{animation:hgBelir .55s var(--e-cikis) .40s both}
.hg .durust{animation:hgBelir .55s var(--e-cikis) .50s both}
@media (min-width:901px){
  .hg .sahne{animation:hgOpak .7s var(--e-cikis) .45s both}
  .hg .cip{animation:yuz 8s ease-in-out infinite,hgBelir .55s var(--e-cikis) both}
  .hg .c1{animation-delay:-1.6s,.55s}.hg .c2{animation-delay:-3.2s,.64s}
  .hg .c3{animation-delay:-4.8s,.73s}.hg .c4{animation-delay:-6.4s,.82s}
  .hg .c5{animation-delay:-8s,.91s}
}

/* ── İNDEX: PANO 1-2-3 AYDINLANMA ──────────────────────────
   Adımlar kademeli girer (rv-grup), rakam imza-vurguyla oturur,
   koyu bantta çok yavaş bronz ışık süpürmesi (masaüstü ambient). */
@keyframes noOtur{from{transform:translateY(10px) scale(.86);opacity:0}to{transform:none;opacity:1}}
.rv-grup.on .adim .no{animation:noOtur .5s var(--e-vurgu) both}
.rv-grup.on>:nth-child(2) .no{animation-delay:var(--sira)}
.rv-grup.on>:nth-child(3) .no{animation-delay:calc(var(--sira)*2)}
@media (min-width:901px){
  .pano{position:relative;overflow:hidden}
  .pano::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;z-index:0;
    background:linear-gradient(100deg,transparent,rgba(201,164,95,.05) 45%,rgba(201,164,95,.09) 50%,rgba(201,164,95,.05) 55%,transparent);
    animation:panoIsik 14s var(--e-duz) infinite;pointer-events:none}
  .pano-ic,.pano-alt{position:relative;z-index:1}
  @keyframes panoIsik{from{transform:translateX(0)}to{transform:translateX(520%)}}
}

/* ── FOLD-ALTI LAYOUT KESİNTİSİ (I9) ───────────────────────
   .cv bölümleri ilk boyanın layout maliyetine girmez; görünüme
   yaklaşınca render edilir. LCP frame'i FCP'ye yapışır. */
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ── PARALLAX KABI ─────────────────────────────────────────
   motion.js yalnız [data-derin] öğelere translate3d yazar (masaüstü-only).
   Kendi transform'u olan öğeye (data-derin) VERİLMEZ — kap kullanılır. */
[data-derin]{will-change:transform}

/* ── MOBİL HAFİF MOD ───────────────────────────────────────*/
@media (max-width:900px){
  .pano::after{content:none}
  [data-derin]{will-change:auto;transform:none !important}
}

/* ── REDUCED MOTION: TAM KAPANIŞ ───────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .reveal,.rv,.rv-sol,.rv-sag,.rv-grup>*,.reveal.bekle,.rv.bekle,.rv-sol.bekle,
  .rv-sag.bekle,.rv-grup.bekle>*{opacity:1;transform:none;transition:none}
  h1 em::after,h2 em::after{transform:scaleX(1);transition:none}
  .hg .eyebrow,.hg h1 .hs,.hg .sub,.hg .hero-cta,.hg .durust,.hg .sahne,.hg .cip,
  .rv-grup.on .adim .no{animation:none}
  .pano::after{content:none}
  .nav::before{transition:none}
  [data-derin]{transform:none !important}
}