/* ============================================================
   KOD16 - SİNEMATİK KATMAN (cinematic.css)
   style.css'ten SONRA yüklenir. Kurumsallığı bozmadan
   "premium" hareket: hero koreografisi, aurora ışık, Ken Burns,
   clip-path maske geçişleri, parallax, sayaç, sayfa geçişi.
   Tümü GPU-dostu (transform/opacity/clip-path/filter) ve
   prefers-reduced-motion uyumlu.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --cine:cubic-bezier(.16,1,.3,1); /* uzun, sinematik settle */
}

/* ---- Scroll ilerleme çubuğu ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),#d49aa3);
  will-change:transform;pointer-events:none}

/* ---- Sayfa çıkış geçişi (güvenli: içerik varsayılan GÖRÜNÜR) ----
   Girişte içeriği gizlemiyoruz (boş sayfa riski yok); yalnızca
   kullanıcı bir iç linke tıklayınca yumuşak fade-out yapıyoruz. */
#main{transition:opacity .3s var(--ease-out-quad),transform .3s var(--ease-out-quad)}
body.is-leaving #main{opacity:0;transform:translateY(-6px)}

/* ============================================================
   HERO — sinematik backdrop (açık & kurumsal kalır)
   ============================================================ */
.hero{isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__inner{position:relative;z-index:1}

/* Yavaş Ken Burns yapan, çok düşük opaklıkta gerçek foto dokusu */
.hero__bg-photo{position:absolute;inset:-8% -8% -8% 40%;
  background-size:cover;background-position:center;
  opacity:.12;filter:saturate(.85);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);
  mask-image:linear-gradient(90deg,transparent,#000 45%);
  animation:kenburns 26s var(--ease-in-out) infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}

/* Marka renkli, sürüklenen aurora ışık lekeleri (yumuşak) */
.hero__aurora{position:absolute;inset:0}
.hero__aurora span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform}
.hero__aurora span:nth-child(1){width:460px;height:460px;left:-120px;top:-120px;
  background:radial-gradient(circle,rgba(183,110,121,.34),transparent 70%);animation:drift1 24s var(--ease-in-out) infinite alternate}
.hero__aurora span:nth-child(2){width:520px;height:520px;right:-160px;top:40px;
  background:radial-gradient(circle,rgba(31,58,95,.22),transparent 70%);animation:drift2 30s var(--ease-in-out) infinite alternate}
.hero__aurora span:nth-child(3){width:360px;height:360px;left:30%;bottom:-160px;
  background:radial-gradient(circle,rgba(201,161,74,.16),transparent 70%);animation:drift3 28s var(--ease-in-out) infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.15)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-50px,30px,0) scale(1.1)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-30px,0) scale(1.2)}}

/* GERÇEK VİDEO — hero'da ince, sağ tarafta, açık temayı bozmadan */
.hero__video{position:absolute;top:-6%;right:-6%;width:72%;height:112%;object-fit:cover;
  opacity:.20;filter:saturate(.95);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 52%);
  mask-image:linear-gradient(90deg,transparent,#000 52%)}

/* İnce film greni (çok hafif) */
.hero__grain{position:absolute;inset:0;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Hero giriş koreografisi ----
   .anime YOKKEN saf CSS ile çalışır (fallback).
   .anime VARKEN Anime.js devralır; öğeler gizli başlar, anime canlandırır. */
html.js .hero__content > *{opacity:0;transform:translateY(20px)}
html.js .hero__media{opacity:0;transform:translateY(28px) scale(.985)}
html:not(.anime) .hero.is-loaded .hero__content > *{animation:cineRise .9s var(--cine) both}
html:not(.anime) .hero.is-loaded .hero__media{animation:cineMedia 1.1s var(--cine) both}
html:not(.anime) .hero.is-loaded .hero__content > *:nth-child(1){animation-delay:.05s}
html:not(.anime) .hero.is-loaded .hero__content > *:nth-child(2){animation-delay:.16s}
html:not(.anime) .hero.is-loaded .hero__content > *:nth-child(3){animation-delay:.27s}
html:not(.anime) .hero.is-loaded .hero__content > *:nth-child(4){animation-delay:.38s}
html:not(.anime) .hero.is-loaded .hero__content > *:nth-child(5){animation-delay:.49s}
html:not(.anime) .hero.is-loaded .hero__media{animation-delay:.32s}
@keyframes cineRise{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cineMedia{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}

/* Hero başlık kelime bölümleme (Anime.js imza girişi) */
.hero__title .word{display:inline-block;white-space:pre;will-change:transform,opacity}

/* Anime.js yüklenemezse / hata verirse her şeyi göster (boş sayfa koruması) */
html.anime-failed .hero__content > *,html.anime-failed .hero__media,
html.anime-failed .hero__title .word{opacity:1!important;transform:none!important;filter:none!important}

/* Foto çerçevesinde yavaş Ken Burns + üzerinden geçen ışık süpürmesi */
.hero__media-frame img{animation:kenburns 24s var(--ease-in-out) infinite alternate}
.hero__media-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
  transform:translateX(-120%);animation:sheen 7s ease-in-out 1.2s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}

/* Float kart yumuşak süzülme */
.hero__floatcard{animation:floaty 6s var(--ease-in-out) infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-9px)}}

/* ============================================================
   SİNEMATİK SCROLL REVEAL (mevcut .reveal'ı zenginleştirir)
   main.js is-visible + stagger gecikmesini ekliyor.
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);filter:blur(4px);
  transition:opacity .7s var(--cine),transform .7s var(--cine),filter .7s var(--cine)}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}

/* Yönlü varyantlar (isteğe bağlı data-rv ile) */
[data-rv="left"]{transform:translateX(-36px)}
[data-rv="right"]{transform:translateX(36px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv].is-visible{transform:none}

/* ---- Görsel maske (clip-path wipe) geçişleri ----
   ÖNEMLİ: açma kuralları (.is-visible) gizleme kuralından (html.js ...) DAHA YÜKSEK
   özgüllükte olmalı; aksi halde görseller kalıcı kırpılı (görünmez) kalır. */
.about-preview__media,.about-page__media,.gallery-item,.blog-card__media,.hero__media-frame{overflow:hidden}
.about-preview__media img,.about-page__media img{clip-path:inset(0 0 0 0);transition:transform 1.1s var(--cine),clip-path 1.1s var(--cine)}
html.js .about-preview__media img,html.js .about-page__media img{clip-path:inset(0 100% 0 0);transform:scale(1.08)}
html.js .about-preview__media.is-visible img,html.js .about-page__media.is-visible img{clip-path:inset(0 0 0 0);transform:scale(1)}

.gallery-item img{transition:transform .6s var(--ease-out),clip-path .9s var(--cine)}
html.js .gallery-item img{clip-path:inset(0 0 100% 0)}
html.js .gallery-item.is-visible img{clip-path:inset(0 0 0 0)}

.blog-card__media img{transition:transform .6s var(--ease-out),clip-path 1s var(--cine)}
html.js .blog-card .blog-card__media img{clip-path:inset(0 0 100% 0)}
html.js .blog-card.is-visible .blog-card__media img{clip-path:inset(0 0 0 0)}

/* ============================================================
   SAYAÇ (count-up) — değişiklik yok, sadece tabular hizalama
   ============================================================ */
.hero__stat strong,.reviews-summary__score strong{font-variant-numeric:tabular-nums}

/* ============================================================
   CTA BANDI — sinematik karanlık an (aurora + ışık drift)
   ============================================================ */
.cta-band{isolation:isolate}
.cta-band__aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cta-band__aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.cta-band__aurora span:nth-child(1){width:420px;height:420px;left:-100px;bottom:-160px;
  background:radial-gradient(circle,rgba(183,110,121,.5),transparent 70%);animation:drift1 22s var(--ease-in-out) infinite alternate}
.cta-band__aurora span:nth-child(2){width:380px;height:380px;right:-80px;top:-140px;
  background:radial-gradient(circle,rgba(120,160,210,.28),transparent 70%);animation:drift2 26s var(--ease-in-out) infinite alternate}
.cta-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5;pointer-events:none}
.cta-band__inner{position:relative;z-index:2}

/* ============================================================
   SİNEMATİK BANT — tam genişlik gerçek video öğesi (SSR)
   ============================================================ */
.cine-band{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-900);color:#fff}
.cine-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.62;pointer-events:none}
.cine-band__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,22,40,.93),rgba(12,22,40,.55) 58%,rgba(12,22,40,.8))}
.cine-band__inner{position:relative;z-index:2;max-width:720px;padding:120px 24px}
.cine-band__eyebrow{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:12.5px;
  letter-spacing:2.5px;text-transform:uppercase;color:#cf8f98;margin-bottom:16px}
.cine-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.3px;line-height:1.15}
.cine-band p{color:#c4cedd;font-size:18px;line-height:1.7;margin:18px 0 30px;max-width:560px}
.cine-band__play{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.4px}
.cine-band__play .dot{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);display:grid;place-items:center}
/* Animasyonlu EKG/kalp atışı çizgisi — .anime yokken CSS, varken Anime.js çizer */
.cine-ecg{display:block;width:100%;max-width:380px;height:38px;margin:4px 0 30px;overflow:visible}
.cine-ecg path{fill:none;stroke:#cf8f98;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(207,143,152,.6));
  stroke-dasharray:620;stroke-dashoffset:620;animation:ecgDraw 3.6s var(--ease-in-out) infinite}
html.anime .cine-ecg path{animation:none}  /* Anime.js devralır */
@keyframes ecgDraw{0%{stroke-dashoffset:620}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-620}}

/* Hizmet kartları için 3D perspektif (Anime.js eğim etkisi) */
.svc-grid{perspective:1200px}
html.anime .svc-card{transform-style:preserve-3d;will-change:transform}

/* ============================================================
   BUTON — birincil CTA'da ince ışık parıltısı (hover)
   ============================================================ */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-180%) skewX(-18deg);transition:none;pointer-events:none}
.btn--primary:hover::after{animation:btnSheen .9s var(--ease-out)}
@keyframes btnSheen{from{transform:translateX(-180%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}

/* Hizmet kartı ikonunda yumuşak "pop" (görünürken) */
.svc-card.is-visible .svc-card__icon{animation:iconPop .6s var(--ease-spring) both;animation-delay:.15s}
@keyframes iconPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* Bölüm başlığı eyebrow ince çizgi animasyonu */
.section__head.is-visible .eyebrow::after,.section__head .eyebrow::after{content:none}

/* ============================================================
   ERİŞİLEBİLİRLİK — reduced motion: tüm sinematik hareketi kıs
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero__bg-photo,.hero__aurora span,.hero__media-frame img,.hero__media-frame::before,
  .hero__floatcard,.cta-band__aurora span{animation:none!important}
  html.js .hero__content > *,html.js .hero__media{opacity:1!important;transform:none!important}
  html.js .about-preview__media img,html.js .about-page__media img,
  html.js .gallery-item img,html.js .blog-card .blog-card__media img{clip-path:none!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .page-fade{opacity:1!important;transform:none!important}
  .btn--primary::after{display:none}
  .svc-card.is-visible .svc-card__icon{animation:none}
  .cine-ecg path{animation:none!important;stroke-dashoffset:0!important}
  .hero__title .word{opacity:1!important;transform:none!important}
}

/* Mobilde ağır blur/parallax'ı hafiflet (performans) */
@media (max-width:760px){
  .hero__aurora span{filter:blur(40px)}
  .hero__bg-photo,.hero__video,.hero__grain{display:none}  /* mobilde hero videosu kapalı (veri tasarrufu) */
  .hero__floatcard{animation:none}  /* mobilde kart fotoğraf altında sabit, süzülme yok */
  .cine-band__inner{padding:72px 20px}
  .cta-band__video{opacity:.42}
}