/* ============================================================
   MOTION · sayfa acilisi, giris koreografisi, yasayan ogeler,
   scrub kelime kurallari, reduced-motion, paused
   Kural: yalniz transform ve opacity animasyona girer
   (imza cizgilerinin stroke-dashoffset cizimi paketin bilincli istisnasi).
   ============================================================ */

/* sayfa kendisi de yumusak acilir */
body{animation:page-fade .7s var(--e1) both}
@keyframes page-fade{from{opacity:0}to{opacity:1}}

/* ---------- giris koreografisi ----------
   .reveal ilk durumu yalniz JS calisirken (html.js-on) uygulanir;
   JS yoksa/ES module yuklenemezse sayfa tam gorunur kalir. */
.js-on .reveal{opacity:0;transform:translateY(28px) scale(.98);
  transition:opacity .85s var(--e1) var(--d,0s),transform .85s var(--e1) var(--d,0s)}
.js-on .section.in .reveal,.js-on .hero-settle.in .reveal,.js-on .hero-poster.in .reveal{opacity:1;transform:none}
/* stagger emekliligi: giris bitince gecikmeler sifirlanir */
.js-on .section.in-done .reveal,.js-on .hero-settle.in-done .reveal,.js-on .hero-poster.in-done .reveal{transition-delay:0s}

/* ---------- bolum imzasi: gorunume girince bir kez cizilir ---------- */
.sig .arc{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--e2) .15s}
.sig .tip{opacity:0;transition:opacity .5s var(--e1) 1s}
.section.in .sig .arc{stroke-dashoffset:0}
.section.in .sig .tip{opacity:1}
.section.in .sig .tip-halo{animation:one-breath 1.6s var(--e1) 1.05s 1 both}
@keyframes one-breath{0%{opacity:0}45%{opacity:.55}100%{opacity:.2}}
html:not(.js-on) .sig .arc{stroke-dashoffset:0}
html:not(.js-on) .sig .tip{opacity:1}

/* ============================================================
   KEDI ISARETI (maskot) · 8 vurusluk TEK zaman cizgisi, 7 sn, dongu YOK
   raw/kedi-acilis.svg'den gomuldu. SVG'de yalniz geometri kaldi; zaman
   cizgisi buraya tasindi ki body.paused, body.rm ve .in kapilari onu de
   yonetsin (karar C11, C12). Tanimlayicilar Ingilizce, id'ler cat- onekli.
   ============================================================ */
.hero-mark{--cat-dur:7s;--cat-delay:.65s;--cat-ease:cubic-bezier(.34,.9,.3,1)}
/* dasharray keyframe'in DISINDA yasar: yalniz dashoffset animasyona girer.
   Kaynak SVG'nin <style> blogunda duruyordu, buraya tasinmasi unutulursa
   darbe kendini cizmez, ilk kareden itibaren cizili durur (olculdu). */
.hero-mark #cat-stroke{stroke-dasharray:1200}
/* Ilk durum yalniz JS calisirken gizlenir; JS yoksa kedi son halinde durur. */
.js-on .hero-mark #cat-body{opacity:0}
.hero-mark.in #cat-body{animation:cat-enter var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
.hero-mark.in #cat-eye-closed{animation:cat-eye-closed var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
.hero-mark.in #cat-eye-open{animation:cat-eye-open var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
/* BLOKER DUZELTMESI (26 Agu 2026, proje muduru olcumu).
   #cat-dot ve #cat-brush'ta transform referansi tanimli degildi; SVG'de
   varsayilan referans KULLANICI UZAYIdir, yani scale() ve rotate() ogenin
   kendi kutusunu degil viewBox'in koseSINI merkez alir. Sonuc: nokta
   animasyonun %54'unde CTA butonunun uzerine uctu ve tiklamayi YUTTU
   (elementFromPoint CTA yerine <circle> donduruyordu; 45 test noktasinin
   10'u, yaklasik 1,2 saniye boyunca, her masaustu acilisinda).
   Ayni sebeple firca altbasligi ortup "sanat  erapisi" okutuyordu.
   Olculdu: cakisma 3705 px2 -> 0, calinan nokta 10 -> 0. */
.hero-mark #cat-dot,.hero-mark #cat-brush{transform-box:fill-box;transform-origin:center}
.hero-mark.in #cat-brush{animation:cat-brush-move var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
.hero-mark.in #cat-stroke{animation:cat-stroke-draw var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
.hero-mark.in #cat-dot{animation:cat-dot-appear var(--cat-dur) var(--cat-ease) var(--cat-delay) both}
/* 1 · kedi gelir (0 - 0,8 sn) */
@keyframes cat-enter{0%{opacity:0;transform:translateY(90px) scale(.94)}
  11%,100%{opacity:1;transform:none}}
/* 2 · gozunu acar (0,8 - 1,6) · 6 · mutlu olur (4,2 - 5,0) */
@keyframes cat-eye-closed{0%,11%{opacity:1}16%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes cat-eye-open{0%,11%{opacity:0}16%,58%{opacity:1}62%,100%{opacity:0}}
/* 3 · fircayi kaldirir (1,6 - 2,4) · 7 · logo pozu (5 - 6) */
@keyframes cat-brush-move{0%,23%{transform:rotate(0deg)}
  34%{transform:rotate(-16deg) translateY(-26px)}
  44%{transform:rotate(9deg) translateY(14px)}
  50%{transform:rotate(-4deg)}
  72%,100%{transform:rotate(0deg)}}
/* 4 · havaya firca darbesi: yay kendini cizer, sonra solar
   (stroke-dashoffset, paketin bilincli istisnasi, CLAUDE.md kural 6) */
@keyframes cat-stroke-draw{0%,31%{stroke-dashoffset:1200;opacity:.9}
  44%{stroke-dashoffset:0;opacity:.9}
  62%{stroke-dashoffset:0;opacity:0}
  100%{opacity:0}}
/* 5 · kor nokta belirir (3,4 - 4,2): sayfadaki ILK nokta */
@keyframes cat-dot-appear{0%,46%{opacity:0;transform:scale(.2)}
  54%{opacity:1;transform:scale(1.25)}
  60%,100%{opacity:1;transform:scale(1)}}

/* ---------- terapi iz cizgisi: kendini cizer, ucundaki nokta yasar ---------- */
.step-line .line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--e2) .3s}
.section.in .step-line .line{stroke-dashoffset:0}
.step-line .line-tip{opacity:0;transition:opacity .5s var(--e1) 1.7s}
.section.in .step-line .line-tip{opacity:1}
.section.live .step-line .line-glow{animation:tip-breath 9s var(--e1) -3s infinite alternate}
@keyframes tip-breath{from{opacity:.1}to{opacity:.42}}
html:not(.js-on) .step-line .line{stroke-dashoffset:0}
html:not(.js-on) .step-line .line-tip{opacity:1}

/* ---------- kapisi olmayan ev: kaydirdikca kapisi cizilir (karar C7) ---------- */
.house .wall,.house .roof,.house .win,.house .ground{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.4s var(--e2) .2s}
.house .door{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--e2) 1.5s}
.section.in .house .wall,.section.in .house .roof,.section.in .house .win,
.section.in .house .ground,.section.in .house .door{stroke-dashoffset:0}
html:not(.js-on) .house .wall,html:not(.js-on) .house .roof,html:not(.js-on) .house .win,
html:not(.js-on) .house .ground,html:not(.js-on) .house .door{stroke-dashoffset:0}

/* ---------- yasayan ogeler (bolum basina bir fisilti; yalniz ekranda) ---------- */
.section.live .portrait::after{animation:pool-breath 7s var(--e1) -2.4s infinite alternate}
@keyframes pool-breath{from{opacity:.34}to{opacity:.62}}
.section.live .card-visual::after{animation:wet-edge 8s var(--e1) infinite alternate}
.section.live .card:nth-child(2) .card-visual::after{animation-delay:-2.7s}
.section.live .card:nth-child(3) .card-visual::after{animation-delay:-5.3s}
@keyframes wet-edge{from{opacity:.14}to{opacity:.4}}
.section.live .collage-a::after{animation:pool-drift 10s var(--e1) -4s infinite alternate}
@keyframes pool-drift{from{opacity:.26;transform:translate3d(-2%,0,0)}to{opacity:.5;transform:translate3d(2%,1%,0)}}
.section.live .particle{animation:particle-fall var(--dur,44s) linear var(--delay,0s) infinite}
@keyframes particle-fall{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.14}88%{opacity:.12}
  100%{transform:translate3d(var(--drift,8px),106vh,0);opacity:0}}
/* egitmen: yalniz sertifika listesi basindaki kor nokta nefes alir (11 sn).
   Portre ve listeler tamamen sakin: about'un 7 sn portre nefesi burada
   tekrarlanmaz, iki bolum arka arkaya ayni ritmi vurmasin diye. */
.section.live .record-title .dot::after{animation:cert-breath 11s var(--e1) -4s infinite alternate}
@keyframes cert-breath{from{opacity:.12}to{opacity:.75}}
/* eserler: cercevelerin ic kenarindaki ince isik cok yavas driftle yasar
   (12 sn); eserlerin kendisi hic kimildamaz. */
.section.live .frame .frame-inner::after{animation:frame-light 12s var(--e1) -5s infinite alternate}
@keyframes frame-light{from{opacity:.18}to{opacity:.5}}
.section.live .works-wall .f2 .frame-inner::after{animation-delay:-1.5s}
.section.live .works-wall .f3 .frame-inner::after{animation-delay:-3.5s}
.section.live .works-wall .f4 .frame-inner::after{animation-delay:-7.5s}
.section.live .works-wall .f5 .frame-inner::after{animation-delay:-9.5s}
.section.live .works-wall .f6 .frame-inner::after{animation-delay:-11s}
.section.live .price-card .price-big .dot{animation:ember-spark 9s var(--e1) -2s infinite}
@keyframes ember-spark{0%,88%,100%{box-shadow:0 0 0 4px rgba(217,111,43,.16)}94%{box-shadow:0 0 0 7px rgba(217,111,43,.34)}}
.section.live .faq-item.is-open .dot::after{animation:faq-breath 6s var(--e1) infinite alternate}
@keyframes faq-breath{from{opacity:0}to{opacity:.9}}
.section.live .map-pin .pin-halo{animation:pin-breath 7s var(--e1) -2s infinite alternate}
@keyframes pin-breath{from{opacity:.15}to{opacity:.5}}
.hero-settle.live .scroll-cue .cue-dot{animation:cue-fall 4.6s var(--e2) -1.2s infinite}
@keyframes cue-fall{0%{transform:translateY(-14px);opacity:0}30%{opacity:.85}70%{opacity:.7}100%{transform:translateY(10px);opacity:0}}
.world-bg::before{animation:world-drift 96s linear -32s infinite alternate}
@keyframes world-drift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02)}to{transform:translate3d(2.5%,2%,0) scale(1.06)}}

/* davet bolumu: buyuk butonun kor halesi fisilti nabzinda */
#invite.live .big-cta::before{opacity:.35;animation:ember-pulse 5.5s var(--e1) -1.6s infinite alternate}
#invite.done .big-cta::before{opacity:.35}
@keyframes ember-pulse{from{opacity:.16}to{opacity:.5}}
#invite h2{transition:opacity .7s var(--e1)}
.js-on #invite:not(.done) h2{opacity:.82}

/* noktani koy: tamamlanma zerresi (havada suzulen boya zerreleri) */
.burst span{animation:burst-float 5.6s var(--e1) var(--delay,0s) 1 both}
@keyframes burst-float{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  12%{opacity:.65}55%{opacity:.4}
  100%{transform:translate3d(var(--dx,0px),var(--dy,-70px),0) scale(1);opacity:0}}

/* ---------- scrub yukleme halkasi (imza ogesi: yay dolar, nokta parlar) ---------- */
.load-ring .arc{stroke-dasharray:100;stroke-dashoffset:var(--ld,100)}

/* ---------- scrub kelime koreografisi (--k surucusu; uykuda) ---------- */
.band .w{display:inline-block}
/* band 2 · suzulme: kelimeler yukaridan iner (drift-down) */
.band-2 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px))}
/* band 1 · murekkep netlesmesi: blur-to-sharp cift kopya */
.dual-copy{position:relative}
.dual-copy .cold{position:absolute;inset:0}
.band-1 .cold{filter:blur(10px);opacity:calc(1 - var(--k,0))}
.band-1 .warm{opacity:var(--k,0)}
/* band 3 · isinan harfler: soguk/sicak tonlu kopya crossfade + scale */
.band-3 .caption{transform:scale(calc(.97 + .03*var(--k,0)))}
.band-3 .cold{color:#d7ecea;opacity:calc(1 - var(--k,0))}
.band-3 .warm{color:#f6e3c8;opacity:var(--k,0)}
/* settle bandi · kademeli yerlesme: kelime kelime + uc varis */
.band-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px))}
.band-settle .subline{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.band-settle .cta-row{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}

/* ---------- js yokken zarif dusus ---------- */
html:not(.js-on) .fab{opacity:1;transform:none;pointer-events:auto}
html:not(.js-on) .faq-a{visibility:visible;grid-template-rows:1fr}
html:not(.js-on) .dot-invite{display:none}
html:not(.js-on) .dot-invite-rm{display:block}
html:not(.js-on) .dot-scene{--hold:1;--warmth:1}

/* ============================================================
   REDUCED MOTION · medya sorgusu canlidir (CSS yani);
   JS yani icin es deger body.rm sinifi asagida
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal,.js-on .reveal{opacity:1 !important;transform:none !important}
  body{opacity:1}
  .sig .arc,.step-line .line{stroke-dashoffset:0 !important}
  .sig .tip,.step-line .line-tip{opacity:1 !important}
  .house .wall,.house .roof,.house .win,.house .ground,.house .door{stroke-dashoffset:0 !important}
  /* Kedinin son hali ACIKCA yazilir. Yalniz "animation:none" demek yetmez:
     #cat-dot ve #cat-eye-open uzerinde opacity="0" OZNITELIGI var, yani
     animasyon kapaninca kedi noktayi hic koymamis olurdu. */
  .hero-mark #cat-body{opacity:1 !important;transform:none !important}
  .js-on .hero-mark #cat-body{opacity:1}
  /* Bu kurallar YALNIZ reduced-motion medya sorgusunda gecerliydi; JS kapaliyken
     (html:not(.js-on)) hicbiri uygulanmiyordu ve kedi yarim kaliyordu.
     Olculdu: eye-open 1 (0 olmali), dot 0 (1 olmali), stroke 0,9 (0 olmali).
     Asagidaki blok medya sorgusunun DISINA da kopyalandi. */
  .hero-mark #cat-eye-closed,.hero-mark #cat-dot{opacity:1 !important}
  .hero-mark #cat-eye-open,.hero-mark #cat-stroke{opacity:0 !important}
  .hero-mark #cat-brush,.hero-mark #cat-dot{transform:none !important}
  .scroll-cue .cue-dot{display:none}
  .scroll-cue .cue-arrow{display:block}
  /* fab: RM'de de gorunurluk mantigi calisir (hero CTA'si ekrandan cikinca
     belirir), yalniz gecis animasyonu kapali. Eski blanket "opacity:1"
     KALDIRILDI: aksi halde yuzen buton ilk ekrandan gorunup hero CTA'siyla
     cift buton olusturuyordu. is-visible / is-dimmed kurallari components.css'te
     olup RM'de de gecerli; JS observer is-visible'i RM'de de yazar. */
  .dot-invite{display:none}
  .dot-invite-rm{display:block}
  .dot-scene{--hold:1;--warmth:1}
  #invite h2,.js-on #invite:not(.done) h2{opacity:1 !important}
  .particle{opacity:0 !important}
}
/* JS'in canli tuttugu es deger sinif (kapi degisim dinleyicileri yazar) */
body.rm .dot-invite{display:none}
body.rm .dot-invite-rm{display:block}
body.rm .dot-scene{--hold:1;--warmth:1}
/* Kedinin RM son hali, medya sorgusunun canli esi (ayni son hal, tek kaynak) */
body.rm .hero-mark #cat-body,.js-on body.rm .hero-mark #cat-body{opacity:1;transform:none;animation:none}
body.rm .hero-mark #cat-eye-closed,body.rm .hero-mark #cat-dot{opacity:1;animation:none;transform:none}
body.rm .hero-mark #cat-eye-open,body.rm .hero-mark #cat-stroke{opacity:0;animation:none}
body.rm .hero-mark #cat-brush{transform:none;animation:none}
body.rm .house .wall,body.rm .house .roof,body.rm .house .win,
body.rm .house .ground,body.rm .house .door{stroke-dashoffset:0}

/* sekme gizliyken her sey durur */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---------- JS kapaliyken kedi: tamamlanmis logo ----------
   Animasyonlari .hero-mark.in siniflari suruyor ve o sinifi JS koyuyor.
   JS yoksa animasyon hic baslamaz, ama SVG'deki opacity="0" oznitelikleri
   durur; yani nokta hic konmamis, goz acik kalmis olurdu. Acikca yaziyoruz. */
html:not(.js-on) .hero-mark #cat-eye-closed,
html:not(.js-on) .hero-mark #cat-dot{opacity:1}
html:not(.js-on) .hero-mark #cat-eye-open,
html:not(.js-on) .hero-mark #cat-stroke{opacity:0}
html:not(.js-on) .hero-mark #cat-brush,
html:not(.js-on) .hero-mark #cat-dot{transform:none}