/* =========================================================
   Farlab — ANIMASYON KATMANI
   Referans: dennissnellenberg.com (assets/js/index-new.js,
   assets/css/style-new.css + components.css + styleguide.css)
   Süreler, yumuşatma eğrileri ve ölçüler referanstan BİREBİR alındı;
   yalnız renkler Farlab paletine bağlandı.
   ========================================================= */

:root{
  /* referansın kendi geçiş kısayolları (styleguide.css satır 79-82) */
  --gec-birincil: all .5s cubic-bezier(.7, 0, .3, 1);
  --gec-hizli:    all .3s cubic-bezier(.7, 0, .3, 1);
  --gec-yumusak:  all .7s cubic-bezier(.7, 0, .3, 1);
  --gec-yavas:    all .9s cubic-bezier(.7, 0, .3, 1);

  /* referansta bu iki eğri her açılış/kapanışta kullanılıyor */
  --egri-kapan: cubic-bezier(0.36, 0, 0.66, 0);   /* küçülürken */
  --egri-acan:  cubic-bezier(0.34, 1, 0.64, 1);   /* büyürken   */

}

/* Yumuşak kaydırma açıkken tarayıcının kendi kaydırma
   yumuşatması devreye girmemeli, ikisi çakışıyor. */
html.yumusak-kaydirma{ scroll-behavior:auto; }


/* ---------------------------------------------------------
   1) KELİME KELİME AÇILAN BAŞLIK  (.span-lines)
   components.css'teki yapının aynısı: her kelime taşmayı
   kesen bir kutuya giriyor, içteki katman alttan yükseliyor.
   --------------------------------------------------------- */
.span-lines.animate .span-line{
  position:relative;
  display:inline-flex;
  overflow:hidden;
}
.span-lines.animate .span-line .span-line-inner{
  position:relative;
  display:block;
  will-change:transform;
}


/* ---------------------------------------------------------
   2) İMLEÇ KATMANLARI
   Referansta üç ayrı katman var ve her biri fareyi FARKLI
   gecikmeyle takip ediyor: fotoğraf ÷12, daire ÷7, yazı ÷6.
   (index-new.js initStickyCursorWithDelay)
   --------------------------------------------------------- */
.imlec-foto{
  width:0;
  z-index:75;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%, -52%);
  display:block;
  left:0;
  top:0;
  overflow:hidden;
  transition:width .4s var(--egri-kapan);
  will-change:transform;   /* width bilesiklenemez, will-change'e yazmanin faydasi yok */
}
.imlec-foto.acik{
  border-radius:0;
  width:clamp(10em, 27.5vw, 25em);
  transition:width .4s var(--egri-acan);
}
.imlec-foto::before{ display:block; content:""; padding-top:100%; }

.imlec-foto .foto-serit{
  width:100%;
  position:absolute;
  left:0; top:0;
  display:block;
  will-change:transform;
}
.imlec-foto .foto-tek{
  position:relative;
  width:100%;
  display:block;
  overflow:hidden;
}
.imlec-foto .foto-tek::before{ display:block; content:""; padding-top:100%; }
.imlec-foto .foto-tek img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

.imlec-daire,
.imlec-yazi{
  width:0; height:0;
  border-radius:50%;
  border:0;
  background:var(--mavi);
  position:fixed;
  z-index:76;
  pointer-events:none;
  transform:translate(-50%, -60%);
  overflow:hidden;
  display:block;
  left:0; top:0;
  transition:width .4s var(--egri-kapan), height .4s var(--egri-kapan);
  will-change:transform;   /* width/height bilesiklenemez */
}
.imlec-yazi{
  background:transparent;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:600;
  letter-spacing:.2px;
}
.imlec-yazi p{ margin:0; white-space:nowrap; }

.imlec-daire.acik,
.imlec-yazi.acik{
  width:clamp(3.75em, 5.5vw, 5em);
  height:clamp(3.75em, 5.5vw, 5em);
  transition:width .4s var(--egri-acan), height .4s var(--egri-acan);
}
.imlec-daire.acik-buyuk,
.imlec-yazi.acik-buyuk{
  width:calc(clamp(3.75em, 5.5vw, 5em) * 1.66);
  height:calc(clamp(3.75em, 5.5vw, 5em) * 1.66);
  transition:width .4s var(--egri-acan), height .4s var(--egri-acan);
}
/* basılıyken şişiyor */
.imlec-daire.acik.basili,
.imlec-yazi.acik.basili{
  width:calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
  height:calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
}
.imlec-daire.acik-buyuk.basili,
.imlec-yazi.acik-buyuk.basili{
  width:calc(clamp(3.75em, 5.5vw, 8em) * 2);
  height:calc(clamp(3.75em, 5.5vw, 8em) * 2);
}
/* yazı katmanı daireden geniş: metin sığsın diye */
.imlec-yazi.acik,
.imlec-yazi.acik-buyuk{
  border-radius:0;
  width:clamp(10em, 27.5vw, 25em);
}
.imlec-yazi p{
  font-size:0em;
  transition:font-size .4s var(--egri-kapan);
}
.imlec-yazi.acik p,
.imlec-yazi.acik-buyuk p{
  font-size:1em;
  transition:font-size .4s var(--egri-acan);
}

/* Dokunmatik ve dar ekranda imleç katmanları yok (referansta da yok) */
@media (max-width:540px), (hover:none){
  .imlec-foto, .imlec-daire, .imlec-yazi{ display:none !important; }
}


/* ---------------------------------------------------------
   3) ÇİZGİLİ HİZMET LİSTESİ  (referansın work-items'ı)
   --------------------------------------------------------- */
.hizmetler{ background:#fff; padding:0; }
.hizmetler .kap{ padding-top:70px; padding-bottom:70px; }

.hizmet-ust{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-bottom:18px;
}
.hizmet-ust h5{
  margin:0; font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soluk);
}

.stripe{
  display:block;
  width:100%;
  height:1px;
  background-color:var(--cizgi);
}

.is-liste li{ transition:var(--gec-yumusak); }

.is-liste .satir{
  display:flex;
  align-items:center;
  padding:34px 0;
  color:inherit;
  text-decoration:none;
  transition:var(--gec-hizli);
}
.is-liste .satir .sut-1{ width:70%; padding-left:8px; }
.is-liste .satir .sut-2{ width:30%; padding-top:1em; padding-left:24px; }

.is-liste h4{
  position:relative;
  display:block;
  overflow:hidden;
  line-height:1;
  margin:0;
  font-size:clamp(30px, 5.2vw, 62px);
  font-weight:600;
  letter-spacing:-.5px;
  color:var(--lacivert);
  transition:var(--gec-hizli);
  transform:translateX(0) rotate(0.001deg);
}
.is-liste h4 span{ position:relative; display:block; padding:.1em 0; }

.is-liste .satir p{
  margin:0;
  color:var(--soluk);
  font-size:15px;
  line-height:1.7;
  transition:var(--gec-hizli);
  transform:translateX(0) rotate(0.001deg);
}

/* Referansın hover'ı: başlık sola, açıklama sağa kayar,
   satırın tamamı %33'e soluyor (üstünü uçan fotoğraf kaplıyor). */
.is-liste .satir:hover h4{ transform:translateX(-2.4px) rotate(0.001deg); }
.is-liste .satir:hover p { transform:translateX(2.4px)  rotate(0.001deg); }
.is-liste:hover .satir{ opacity:1; }
.is-liste .satir:hover{ opacity:.33; }

@media (max-width:760px){
  .is-liste .satir{ flex-wrap:wrap; padding:24px 0; }
  .is-liste .satir .sut-1{ width:100%; padding-left:0; }
  .is-liste .satir .sut-2{ width:100%; padding-left:0; padding-top:10px; }
}


/* ---------------------------------------------------------
   4) MIKNATISLI BUTON  (.magnetik)
   Dolgu aşağıdan yukarı süpürüyor, yazı beyaza dönüyor.
   --------------------------------------------------------- */
.magnetik{
  position:relative;
  overflow:hidden;
  will-change:transform;
}
.magnetik .btn-dolgu{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  background:var(--mavi-koyu);
  /* Tamamen butonun ALTINDA duruyor. 76% iken dinlenme halinde alt kenarda,
     fare cikinca da (-76%) ust kenarda koyu lacivert bir serit kaliyordu. */
  transform:translateY(100%);
  pointer-events:none;
  will-change:transform;
}
.magnetik .btn-yazi{
  position:relative;
  z-index:2;
  display:inline-flex;
  will-change:transform;
}


/* ---------------------------------------------------------
   8) MENÜ — referansın .btn-hamburger + .fixed-nav'ı
   Düğme İKİ çizgi; açılınca ikisi ortada birleşip -45/+45
   dönerek çarpı oluyor. Panel sağdan giriyor ve SOL KENARI
   KAVİSLİ: 775% enli bir daire, eni 6vw'den 0'a inen taşması
   kesilen kutunun içinde — panel oturunca kavis düzleşiyor.
   (styleguide.css .btn-hamburger / style-new.css .fixed-nav)
   --------------------------------------------------------- */

/* --- düğme --- */
.menu-dugme{
  position:relative;
  display:grid; place-items:center;
  width:46px; height:46px;
  flex:0 0 auto;
  padding:0; border:0; border-radius:50%;
  background:var(--koyu);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  cursor:pointer;
  overflow:hidden;
  transition:background-color .25s var(--egri-kapan), box-shadow .25s var(--egri-kapan);
}
.menu-dugme .btn-dolgu{ background:var(--mavi); }
body.nav-acik .menu-dugme{
  background:var(--mavi);
  box-shadow:inset 0 0 0 1px transparent;
}
/* iki çizgi: kutunun üst ve alt kenarında birer 1px */
.menu-dugme .cizgiler{
  position:relative; display:block;
  /* Referansta kutu düğmenin %28 eni / %8 boyu. Bizim düğme referanstakinin
     yarısı kadar (46px'e karşı ~72px), o oranda çizgiler birbirine yapışık
     görünüyordu; okunsun diye bir tık açıldı. */
  width:16px;
  height:5px;
}
.menu-dugme .cizgiler::before,
.menu-dugme .cizgiler::after{
  content:""; display:block; position:absolute;
  left:50%; height:1px; width:100%;
  background:#fff;
  transition:var(--gec-hizli);
}
.menu-dugme .cizgiler::before{ top:0;    transform:translate(-50%,-50%); }
.menu-dugme .cizgiler::after { top:100%; transform:translate(-50%,-50%); }
body.nav-acik .menu-dugme .cizgiler::before{ top:50%; transform:translate(-50%,-50%) rotate(-45deg); }
body.nav-acik .menu-dugme .cizgiler::after { top:50%; transform:translate(-50%,-50%) rotate(45deg);  }

/* --- yan menünün arka karartması --- */
.nav-perde{
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(to right, rgba(0,0,0,.3) 40%, rgba(0,0,0,1) 80%);
  opacity:0; pointer-events:none;
  transition:opacity .8s cubic-bezier(.7, 0, .2, 1);
  will-change:opacity;
  border:0;
}
body.nav-acik .nav-perde{ opacity:.35; pointer-events:all; }

/* --- panel --- */
.yan-menu{
  position:fixed; right:0; top:0;
  height:100vh; z-index:101;
  width:clamp(300px, 38vw, 520px);
  background:var(--koyu);
  color:#fff;
  transform:translate(calc(100% + 6vw), 0) rotate(0.001deg);
  transition:transform .8s cubic-bezier(.7, 0, .2, 1);
  will-change:transform;
}
body.nav-acik .yan-menu{ transform:translate(0,0) rotate(0.001deg); }

.yan-menu-kavis{
  position:absolute; left:1px; top:0;
  height:100%;
  transform:translateX(-100%);
}
/* KASMA DÜZELTMESİ: burada 850 ms boyunca WIDTH animasyonu vardı.
   Genişlik değişince tarayıcı her karede yeniden yerleşim + boyama
   yapıyor; üstelik içindeki .kavis-daire dev bir elips (775% x 150%),
   yani her karede o koca yuvarlak yeniden çiziliyordu. Menüye basınca
   hissedilen takılma buydu. Aynı görüntü scaleX ile veriliyor: sağ
   kenara sabitlenip 1'den 0'a iniyor, bu tamamen GPU'da oluyor —
   yerleşim de boyama da yok. Uç noktalar birebir aynı (6vw -> 0). */
.yan-menu-kavis .kavis-kap{
  position:relative;
  width:6vw; height:100%;
  overflow:hidden;
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform .85s cubic-bezier(.7, 0, .2, 1);
  will-change:transform;
}
body.nav-acik .yan-menu-kavis .kavis-kap{ transform:scaleX(0); }
.yan-menu-kavis .kavis-daire{
  display:block; position:absolute;
  background:var(--koyu);
  width:775%; height:150%;
  top:50%; border-radius:50%;
  transform:translate(-6.5%, -50%);
}

.yan-menu-ic{
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%;
  padding:13vh 3vw 8vh 3.5vw;
  position:relative;
}
.yan-menu h5{
  margin:0 0 1.6em;
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.yan-menu .stripe{ background:rgba(255,255,255,.2); }

.yan-menu .baglar{
  display:flex; flex-direction:column; align-items:flex-start;
  padding-top:4vh;
}
/* satırlar sağdan 15vw kayarak geliyor, sırayla */
.yan-menu .bag{
  transform:translate(15vw, 0) rotate(0.001deg);
  transition:all .8s cubic-bezier(.7, 0, .2, 1);
  will-change:transform;
}
body.nav-acik .yan-menu .bag{ transform:translate(0,0) rotate(0.001deg); }
.yan-menu .bag:nth-child(2){ transition-delay:.03s; }
.yan-menu .bag:nth-child(3){ transition-delay:.06s; }
.yan-menu .bag:nth-child(4){ transition-delay:.09s; }
.yan-menu .bag:nth-child(5){ transition-delay:.12s; }
.yan-menu .bag:nth-child(6){ transition-delay:.15s; }

.yan-menu .bag a{
  position:relative;
  display:inline-flex;
  color:#fff;
  font-size:calc(clamp(2.1em, 3.1vw, 2.9em) * .875);
  line-height:1.4;
  padding-left:.95em;
  white-space:nowrap;
}
/* başlığın solundaki nokta — referansta seçili ve üstüne gelinende açılıyor */
.yan-menu .bag a::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:calc(clamp(16px, 1.2vw, 19px) / 1.65);
  height:calc(clamp(16px, 1.2vw, 19px) / 1.65);
  border-radius:50%;
  background:#fff;
  transform:translate(0,-50%) scale(0) rotate(0.001deg);
  transition:var(--gec-hizli);
  will-change:transform;
}
.yan-menu .bag.aktif a::after,
.yan-menu .bag a:hover::after{ transform:translate(0,-50%) scale(1) rotate(0.001deg); }
/* listeye girince yalnız üstünde durduğun satırın noktası kalıyor */
.yan-menu .baglar:hover .bag a::after{ transform:translate(0,-50%) scale(0) rotate(0.001deg); }
.yan-menu .baglar:hover .bag a:hover::after{ transform:translate(0,-50%) scale(1) rotate(0.001deg); }

.yan-menu-alt h5{ margin-bottom:1em; }
.yan-menu-sosyal{ display:flex; gap:18px; padding-top:14px; }
.yan-menu-sosyal a{ color:rgba(255,255,255,.7); transition:var(--gec-hizli); }
.yan-menu-sosyal a:hover{ color:#fff; }
.yan-menu-sosyal svg{ width:19px; height:19px; }
.yan-menu-tel{
  display:inline-block; margin-top:16px;
  color:#fff; font-size:15px; font-weight:500;
}

@media (max-width:620px){
  .yan-menu{ width:100%; }
  /* Panel tam ekran olunca kavis panelin SOLUNDA, yani ekranın
     dışında kalıyor: görünmüyor ama yine de o dev elips çiziliyordu.
     Telefonda tamamen kapatıldı. */
  .yan-menu-kavis{ display:none; }
  .yan-menu-ic{ padding:14vh 26px 7vh 26px; }
  .yan-menu .bag a{ font-size:30px; }
  .menu-dugme{ width:42px; height:42px; }
}

/* Yumuşak kaydırma kapalıyken menü açıkken sayfa kilitlenir */
html.nav-kilit, html.nav-kilit body{ overflow:hidden; }

/* Menü açıkken düğme panelin ÜSTÜNDE kalmalı, yoksa menü kapatılamıyor
   (referansta .btn-hamburger z-index:105, .fixed-nav z-index:100).
   Üst bar yükseltiliyor ama beyaz zemini panelin üstüne binmesin diye
   saydamlaşıyor; sağdaki öbür öğeler de panelin altında kalmasın diye
   soluyor — geriye referanstaki gibi yalnız yuvarlak düğme kalıyor. */
.ust{ transition:background .35s cubic-bezier(.7, 0, .3, 1), border-color .35s cubic-bezier(.7, 0, .3, 1), box-shadow .3s ease; }
.ust-sag > *{ transition:opacity .35s cubic-bezier(.7, 0, .3, 1); }
body.nav-acik .ust{ z-index:105; background:transparent; box-shadow:none; border-bottom-color:transparent; }
body.nav-acik .ust-sag > *:not(.menu-dugme){ opacity:0; pointer-events:none; }

/* Randevu formunun üstünde "Seçilen hizmet" satırı */
.form-hizmet{
  margin:0 0 12px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#fff;
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:7px 14px;
}
.form-hizmet::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--mavi);
  flex:0 0 auto;
}