/* Ana sayfa hero hareketli tasarımı (önek: hm-). Kaynak: docs/motion/SPEC-v2.md (§2, §4, §6); temel sistem docs/motion/SPEC.md
   style2.css'ten SONRA yüklenir (home.blade.php → @push('styles')): eşit özgüllükte burası kazanır.
   Kurallar: yalnızca transform / opacity canlanır; temel stiller "hareketi azalt" durağanıdır
   (her hareket fill-mode:both, "to" pozu = temel stil); sahne içi kesmeler 0 sn opaklık anahtarıdır.
   v3 (sahip düzeltmeleri 2026-10-13): her sahnede çok firma, yalnız gerçek iş dosyaları (SUNUM yok), tam ekran çekimler.
   Kurgu verisi ve künye ipuçları hero-motion.blade.php'deki $reel dizisindedir; görseller docs/motion/kaynak-v2/mk_v3.py. */

/* ---------- çerçeve ---------- */
.hv{filter:none;isolation:isolate;
  --xo:cubic-bezier(.19,1,.22,1);--xi:cubic-bezier(.55,0,1,.45);--slide:cubic-bezier(.16,.84,.24,1);--flick:cubic-bezier(.12,.8,.2,1);--wipe:cubic-bezier(.7,0,.2,1);
  --cam:cubic-bezier(.5,0,.1,1)}   /* kamera itişi / geri çekilişi: kesmeden sonra yavaş başlar, uzun oturur, taşma yok */
.hv::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/11;border-radius:18px;z-index:-1;
  box-shadow:0 34px 60px -30px rgba(55,55,54,.5),0 2px 6px rgba(55,55,54,.16)}
.hv-screen{border:0;border-radius:18px;background:#FAF8F2;container-type:inline-size;contain:layout paint;isolation:isolate}
.hv-tag{display:none}
@media (max-width:960px) and (min-width:621px){.hv{max-width:600px;margin-inline:auto;width:100%}}
@media (max-width:620px){.hv-screen,.hv::before{border-radius:14px}}

/* ---------- H1: TEK LCP adayı (SPEC §4.1; sahip notu 1 gereği ölçüldükten sonra açıldı) ----------
   Ölçüm (yeni hero, 20 sn boşta, 390×844): LCP "p.lead" (47k px²). Sebep: style2.css'teki satır başına opaklık
   animasyonu her <span>'a kendi boyama katmanını veriyor; her satır ayrı aday oluyor ve en büyüğü bile p.lead'den küçük.
   Çözüm: satırlar satır içi olur, kırılımlar "\A" ile aynen kalır (6 genişlikte kelime konumları birebir ölçüldü);
   satır satır belirme aynı kademe (0 / .12 / .24 sn, 1 sn, --ease) ile opaklık yerine renk saydamlığıyla yapılır
   (katman açmaz); satır içi öğede çalışmayan 40 px yükselişi H1'in kendisi yapar.
   Sonuç: H1 tek aday — 390'da 52,7k, 1440'ta 245k px², ilk boyamada. */
.hero #h1>span{display:inline}
.hero #h1>span:not(:last-child)::after{content:"\A";white-space:pre}
.js .hero #h1{animation:hm-h1 1s var(--ease) both}
.js .hero #h1>span{opacity:1;animation:hm-h1-line 1s var(--ease) both}
.js .hero #h1>span:nth-child(2){animation-delay:.12s}
.js .hero #h1>span:nth-child(3){animation-delay:.24s}
@keyframes hm-h1{from{transform:translateY(40px)}}
@keyframes hm-h1-line{from{color:transparent}}

/* ---------- çekim kalıbı (§2.6) ---------- */
.hm-shot{position:absolute;inset:0;opacity:0}
.hm-shot.hm-key{opacity:1}
.hv-scene.on .hm-shot{animation:hm-in 0s var(--in,0s) both,hm-out 0s var(--out,600s) forwards}
.hm-shot>.hm-mv{position:absolute;inset:0}
.hm-full{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes hm-in{from{opacity:0}to{opacity:1}}
@keyframes hm-out{to{opacity:0}}
@keyframes hm-push{from{transform:none}to{transform:scale(var(--push,1.04))}}
@keyframes hm-fade{from{opacity:0}}
.hv.paused .hv-steps li .hm-fill{animation-play-state:paused}   /* "li.on .hm-fill" kısaltmasını yenecek özgüllük: kurgunun saati budur */
/* ilk yükleme: S1 plakaları çizilene dek kurgu ve saat t = 0'da bekler, .hm-still (iki <img>) Groseri'nin geniş pozunu gösterir */
.hv.hm-first .hv-scene *,.hv.hm-first .hv-steps li .hm-fill{animation-play-state:paused}

/* sahne zeminleri (S1/S3/S4/S5 çekimleri tam ekrandır; zemin yalnızca geçişlerde görünür) */
.hm-s1,.hm-s4,.hm-s5{background:#FAF8F2}
.hm-s2,.hm-s3{background:#ECE9E1}
.hm-exit{position:absolute;inset:0}

/* ---------- kamera çekimi (S1, S3, S4, S5): gerçek iş görseli tam ekran, geniş pozdan iniş pozuna itme ----------
   Tuval İNİŞ pozunda yerleşir (--l/--t/--w/--h, cqw); kamera geniş pozdan (--from, ölçek < 1, origin 0 0) gelir:
   her kare keskin, temel stil (transform:none) = iniş pozu = "hareketi azalt" durağanı. Değerler Blade'deki $reel'den (mk_v3.py).
   Tuvaller 1×1'e inebildiği için (data-jit) boyutları her zaman CSS'ten gelir. Keskinlik (1440, DPR 2): iniş ≤ 1,30×, geniş ≤ 1,08×. */
.hm-cam{position:absolute;inset:0;transform-origin:0 0}
.hm-cam canvas{position:absolute;display:block;left:var(--l);top:var(--t);width:var(--w);height:var(--h)}
.hv-scene.on .hm-cam{animation:hm-zoom var(--len) var(--ez,linear) var(--at,0s) both}
@keyframes hm-zoom{from{transform:var(--from)}}

/* ---------- S1 Kurumsal kimlik (6750 ms): 5 firma, geniş poz → kimlik detayına itme (--cam) → bekleme ----------
   İlk boyama: .hm-still (Sarmak geniş pozu, 2×2 dilim, 880 px) tuvaller çizilene dek; geçiş görünmez (aynı pencere). */
.hm-still{position:absolute;inset:0;z-index:2;opacity:0}
.hv.hm-first .hm-still{opacity:1}
.hm-still img{position:absolute;display:block;width:50cqw}
.hm-st-1{left:0;top:0;height:34.318cqw}
.hm-st-2{left:50cqw;top:0;height:34.318cqw}
.hm-st-3{left:0;top:34.318cqw;height:34.432cqw}
.hm-st-4{left:50cqw;top:34.318cqw;height:34.432cqw}
.hm-s1.on .hm-exit{animation:hm-s1-exit 333ms var(--xi) 6417ms both}   /* hareket üstünde kesme → S2 (8 f) */
@keyframes hm-s1-exit{to{transform:translateX(-16%)}}

/* ---------- S2 Web sitesi (7833 ms): aynı pencerede 6 canlı site, her birinde bir bölüm kaydırma ----------
   Pencere 96,4 cqw (1440'ta 564 CSS px = 1128 cihaz px); site şeritleri 940 px, iki görünüm bölümü (1,20×). */
.hm-shot>.hm-mv.hm-win{inset:auto;left:1.8cqw;top:1.8cqw;width:96.4cqw;border-radius:1.2cqw;overflow:hidden;background:#fff;
  box-shadow:0 2cqw 5cqw -1cqw rgba(0,0,0,.35)}
.hm-url{height:4.6cqw;background:#F1EFEA;display:grid;place-items:center;font:500 max(9px,1.9cqw)/1 var(--sans);color:#5D5B57;letter-spacing:.01em}
.hm-view{height:60.25cqw;overflow:hidden}
.hm-strip{display:block;width:100%;height:120.5cqw}
.hv-scene.on .hm-strip{animation:hm-snap 333ms var(--xo) var(--snap,600s) both}
@keyframes hm-snap{to{transform:translateY(-50%)}}
.hm-s2.on .hm-shot:first-child .hm-win{animation:hm-s2-in 333ms var(--xo) -17ms both}     /* S1'in çıkış hızıyla girer */
.hm-s2.on .hm-shot:last-child .hm-win{animation:hm-s2-out 292ms var(--xi) 7541ms both}    /* yukarı hızlanır → S3 */
@keyframes hm-s2-in{from{transform:translateX(14%)}}
@keyframes hm-s2-out{to{transform:translateY(-14%)}}

/* ---------- S3 Sosyal medya (6083 ms) · S4 Basılı işler (4833 ms) · S5 Tanıtım filmi (4583 ms) ----------
   Tam ekran çekimler, sert kesmeler, doğrusal yavaş itme. S3 alttan hareketle girer; S4 hızlanan itişle S5'e kesilir;
   S5'in ilk çekimi ×1,12'den yerine oturur. Film sahnesinde siyah zemin, monitör ya da zaman çizelgesi yoktur. */
.hm-s3.on .hm-shot:first-child>.hm-mv{animation:hm-rise 375ms var(--xo) -17ms both}
@keyframes hm-rise{from{transform:translateY(12%)}}
.hm-s4.on .hm-shot:last-child>.hm-mv{transform-origin:55% 45%;animation:hm-s4-out 292ms var(--xi) 4541ms both}
@keyframes hm-s4-out{to{transform:scale(1.32)}}
.hm-s5.on .hm-shot:first-child>.hm-mv{transform-origin:50% 45%;animation:hm-s5-in 375ms var(--xo) both}
@keyframes hm-s5-in{from{transform:scale(1.12)}}

/* ---------- "//" geçişi (yalnızca S5 → S1) ----------
   Antrasit bant sarıdan 60 ms sonra çıkar: 280–330 ms arası iki bant kareyi birlikte tamamen örter,
   sahne 305 ms'de değişir (script.js). 90 ms gecikmede bantlar hiç birlikte örtmüyordu (ölçüldü). */
.hv-wipe{position:absolute;inset:0;z-index:20;background:none;transform:none;pointer-events:none;overflow:hidden}
.hv-wipe.go{animation:none}
.hm-band{position:absolute;top:-12%;bottom:-12%;left:-5%;width:110%;transform:translateX(-125%) skewX(-14deg)}
.hm-band-y{background:#EDC41A}
.hm-band-k{background:#373736}
.hv-wipe.go .hm-band{animation:hm-wipe 600ms var(--wipe) forwards}
.hv-wipe.go .hm-band-k{animation-delay:60ms}
@keyframes hm-wipe{to{transform:translateX(125%) skewX(-14deg)}}

/* ---------- gren: bir kez çizilir, durağan ----------
   640×440 tuval (≈1,1 ekran pikseli / gren): 320×220'de 2x ekranda 4–8 px'lik lekeler beyaz zeminde kir gibi duruyordu */
.hm-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.04;z-index:15;pointer-events:none}

/* ---------- künye satırı (ekranın altında, her genişlikte iki satır, sabit 44 px) ----------
   1. satır: müşteri (sol) + sayaç NN / TT (sağ); 2. satır: iş adı. Müşteri ve sayaç her ipucunda, iş adı yalnızca metni değişince döner.
   Dönüş 560 ms; sonraki kesme 900 ms'den yakınsa 250 ms (6 f): dönüş her zaman sıradaki kesmeden önce oturur (script.js).
   Yuvaların genişliği metne bağlı değil: metin değişince hiçbir öğe kaymaz (CLS 0). Antrasit / sarı ≈ 7,6:1. */
.hm-credit{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:22px 20px;column-gap:12px;height:44px;margin-top:12px;overflow:hidden;color:#373736}
.hm-slot{display:grid;overflow:hidden;min-width:0}
.hm-slot>span{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-cr-c{grid-area:1/1;font:700 15px/22px var(--bold);text-transform:uppercase;letter-spacing:.03em}
.hm-cr-n{grid-area:1/2;display:flex;gap:.3em;font:300 16px/22px var(--thin);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-cr-n.hm-solo{visibility:hidden}
.hm-cr-w{grid-area:2/1/3/3;font:500 13px/20px var(--sans)}
.hm-slot .hm-in{animation:hm-roll-in var(--roll,560ms) var(--xo) both}
.hm-slot .hm-out{animation:hm-roll-out var(--roll,560ms) var(--xo) forwards}   /* eski satır yenisiyle aynı eğride itilir: harfler hiç üst üste binmez */
@keyframes hm-roll-in{from{transform:translateY(105%)}}
@keyframes hm-roll-out{to{transform:translateY(-105%)}}
.hv.paused .hm-credit *{animation-play-state:paused}   /* duraklat: resim, dolum, künye ve zaman kodu birlikte donar */
@media (max-width:620px){.hm-cr-w{font-size:12.5px}}
@media (max-width:359px){.hm-cr-w{font-size:12px}}

/* ---------- adım çubuğu ---------- */
.hv-bar{gap:14px;margin-top:6px}
.hv-steps{display:flex;gap:6px;grid-template-columns:none}
.hv-steps li{flex:var(--w) 1 0;min-width:max-content;opacity:1;font-size:inherit;line-height:1;cursor:auto;text-align:left;direction:ltr}
.hm-lab{padding-right:10px}   /* etiket gösterilen genişliklerde her bölüm en az etiket + 10 px (kısa sahnede oran biraz esner) */
.hm-step{display:block;width:100%;min-height:40px;padding:8px 0 6px;background:none;border:0;color:#373736;cursor:pointer;text-align:left;
  font:700 12px/1 var(--bold);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.hm-step:focus-visible{outline:2px solid #373736;outline-offset:3px}
.hm-trk{display:block;height:2px;margin-bottom:9px;background:rgba(55,55,54,.25);overflow:hidden}
.hm-fill{display:block;height:100%;background:#373736;transform:scaleX(0);transform-origin:left}
.hv-steps li.on .hm-fill{animation:hm-fill var(--dur) linear both}
.hv-steps li.done .hm-fill{transform:none}
.hm-num{display:none;font-family:var(--bold);font-weight:700}
@keyframes hm-fill{to{transform:none}}
/* Etiket ya da numara: etiket yalnızca kendi bölümüne en az 10 px payla sığdığı genişlikte gösterilir
   (ölçüldü 621–1920 px, hem UcyBold hem "Arial Narrow" yedeğiyle). Dar ikili kolonda (961–1279) ve telefonda
   yalnızca kalın numara kalır; künye satırı işin adını zaten söyler. */
@media (min-width:1280px) and (max-width:1366px){.hm-step{font-size:11.5px}}
@media (min-width:961px) and (max-width:1279px),(max-width:620px){
  .hv-steps li{min-width:0}
  .hm-lab{display:none}
  .hm-num{display:inline}
  .hm-step{font-size:13px}
}
@media (max-width:620px){
  .hm-step{min-height:44px}
  .hv-steps li,.hv-steps li.on,.hv-steps li:last-child.on{font-size:inherit;line-height:1;white-space:normal;direction:ltr;text-align:left}
  .pp{width:44px;height:44px}
}
@media (max-width:359px){.hv-bar{gap:8px}.hv-steps{gap:3px}.hv-steps li{flex:1 1 0}}   /* 320 px: eşit adımlar, her biri ≥ 44 px */

/* ---------- hareketi azalt (?anim=1 → html.force-motion bunu kapatır) ----------
   Her sahne kendi durağanını gösterir: 01 Sarmak geniş pozu (.hm-still), 02 sarmak.com, 03 Sarmak sosyal medya,
   04 Sarmak dergi ilanı, 05 Çay Çiftlik YouTube (iniş pozları). Kendiliğinden ilerlemez. */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .hv *,html:not(.force-motion) .hv *::before,html:not(.force-motion) .hv *::after{animation:none!important;transition:none!important}
  html:not(.force-motion) .hv .pp{display:none}
  html:not(.force-motion) .hv-steps li.on .hm-fill{transform:none}
  html:not(.force-motion) .hm-still{opacity:1}
}