/* =========================================================
   kampanya — strateji ve danışmanlık ajansı
   Tasarım sistemi: tamamen siyah · beyaz (renk yok)
   Tipografi: Poppins (display, logo DNA) + DM Sans (metin)
   Motif: logodaki ↗ oku
   ========================================================= */

:root{
  /* --- renk --- */
  --bg:        #0a0a0b;
  --bg-2:      #0f0f11;
  --bg-3:      #131316;
  --fg:        #ffffff;
  --muted:     rgba(255,255,255,.56);
  --muted-2:   rgba(255,255,255,.38);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  /* Vurgu rengi — proje genelinde --cy adıyla kalıyor ama artık
     tamamen gri/beyaz tonlarında. Tek yerden değiştirilir. */
  --cy:        #ffffff;
  --cy-br:     #e6e6e6;
  --cy-dp:     #9a9a9a;
  --cy-soft:   rgba(255,255,255,.10);

  /* --- tipografi --- */
  --f-disp: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- hareket --- */
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  /* --- ölçü --- */
  --wrap: 1320px;
  --gut:  clamp(20px, 5vw, 68px);
  --nav-h: 84px;

  /* --- ok ikonu (currentColor'u miras alır) --- */
  --arw-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:var(--f-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.65;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;height:100vh}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--cy);color:var(--bg)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(90px,12vw,180px) 0;position:relative}

/* ---------------------------------------------------------
   OK MOTİFİ
   --------------------------------------------------------- */
.arw{
  display:inline-block;
  width:.78em;height:.78em;
  background:currentColor;
  -webkit-mask:var(--arw-svg) center/contain no-repeat;
  mask:var(--arw-svg) center/contain no-repeat;
  flex:none;
  transition:transform .6s var(--ease);
}
.arw--lg{width:.5em;height:.5em;vertical-align:.28em;margin-left:.12em;color:var(--cy)}

/* ---------------------------------------------------------
   TİPOGRAFİ YARDIMCILARI
   --------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--cy);
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--cy);opacity:.7}
.eyebrow em{font-style:normal;opacity:.5;margin:0 2px}

.h-lg{
  font-family:var(--f-disp);
  font-weight:300;
  font-size:clamp(38px,5.4vw,74px);
  line-height:1.04;
  letter-spacing:-.025em;
  margin-top:22px;
}
.h-lg .cy{color:var(--cy)}

.lead{
  font-size:clamp(18px,2.1vw,23px);
  line-height:1.55;
  font-weight:300;
  letter-spacing:-.01em;
}
.body{margin-top:20px;color:var(--muted);max-width:54ch}

.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:36px;flex-wrap:wrap;
  margin-bottom:clamp(48px,6vw,84px);
}
/* flex-basis sabit: not, uzun başlıkların yanında da sağda kalsın */
.sec-head__note{flex:0 1 330px;max-width:330px;color:var(--muted);font-size:15px}
.sec-head > div{min-width:0}

/* ---------------------------------------------------------
   BUTONLAR
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;border-radius:2px;
  font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:lowercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
  will-change:transform;
}
.btn--fill{background:var(--cy);color:var(--bg)}
.btn--fill:hover{background:var(--cy-br)}
.btn--line{border-color:var(--line-2);color:var(--fg)}
.btn--line:hover{border-color:var(--cy);color:var(--cy)}
.btn:hover .arw{transform:translate(3px,-3px)}

/* ---------------------------------------------------------
   GRAIN + İMLEÇ
   --------------------------------------------------------- */
.grain{
  position:fixed;inset:-120%;z-index:900;pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grainShift 8s steps(6) infinite}
  @keyframes grainShift{
    0%{transform:translate(0,0)}      16%{transform:translate(-3%,2%)}
    33%{transform:translate(2%,-3%)}  50%{transform:translate(-2%,-2%)}
    66%{transform:translate(3%,1%)}   83%{transform:translate(-1%,3%)}
    100%{transform:translate(0,0)}
  }
}

.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:1200;
  pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
}
.cursor{
  width:36px;height:36px;
  border:1px solid rgba(255,255,255,.45);
  transition:width .45s var(--ease),height .45s var(--ease),
             background .45s var(--ease),border-color .45s var(--ease),opacity .3s;
}
.cursor-dot{width:4px;height:4px;background:var(--cy)}
.cursor.on{opacity:1}
.cursor-dot.on{opacity:1}
.cursor.is-lg{width:86px;height:86px;background:var(--cy-soft);border-color:var(--cy)}
.cursor.is-sm{width:56px;height:56px;border-color:var(--cy)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------------------------------------------------------
   PRELOADER
   --------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg);
  display:grid;place-items:center;
  transition:transform 1.15s var(--ease-io),opacity .6s ease .55s;
}
.preloader.done{transform:translateY(-101%);opacity:0}
.preloader.gone{display:none}
.preloader__inner{text-align:center;padding:0 24px}
.preloader__word{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(30px,7vw,62px);letter-spacing:-.03em;
  display:inline-flex;align-items:flex-start;
  background:linear-gradient(100deg,#3a3a3e 0%,#3a3a3e 36%,#fff 50%,#3a3a3e 64%,#3a3a3e 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.2s var(--ease-io) infinite;
}
.preloader__word .arw{
  width:.3em;height:.3em;margin-left:.06em;margin-top:.12em;
  background:var(--cy);
}
@keyframes shimmer{0%{background-position:130% 0}100%{background-position:-30% 0}}

.preloader__bar{
  width:min(220px,52vw);height:1px;margin:26px auto 0;
  background:var(--line-2);overflow:hidden;
}
.preloader__bar span{
  display:block;height:100%;width:0;background:var(--cy);
  transition:width .25s linear;
}
.preloader__num{
  margin-top:14px;font-size:11px;letter-spacing:.3em;
  color:var(--muted-2);text-transform:uppercase;
}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 var(--gut);
  transition:transform .7s var(--ease),background .5s var(--ease),
             box-shadow .5s var(--ease),height .5s var(--ease);
}
.nav.scrolled{
  height:70px;
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
}
.nav.hide{transform:translateY(-100%)}

.nav__logo{line-height:0;flex:none}
.nav__logo img{
  height:26px;width:auto;aspect-ratio:1390/259;
  transition:opacity .4s var(--ease);
}
.nav__logo:hover img{opacity:.72}

.nav__menu{display:flex;gap:34px}
.nav__menu a{
  position:relative;font-size:14px;color:var(--muted);
  transition:color .45s var(--ease);padding:6px 0;
}
.nav__menu a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--cy);
  transition:width .55s var(--ease);
}
.nav__menu a:hover{color:var(--fg)}
.nav__menu a:hover::after{width:100%}

.nav__right{display:flex;align-items:center;gap:18px}
.nav__cta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:11px 20px;border:1px solid var(--line-2);border-radius:2px;
  transition:border-color .5s var(--ease),background .5s var(--ease),color .5s var(--ease);
  will-change:transform;
}
.nav__cta:hover{border-color:var(--cy);background:var(--cy);color:var(--bg)}
.nav__cta:hover .arw{transform:translate(3px,-3px)}

.burger{
  display:none;width:34px;height:34px;
  background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;
}
.burger span{display:block;height:1.4px;width:100%;background:var(--fg);transition:.4s var(--ease)}

/* ---------------------------------------------------------
   MOBİL MENÜ
   --------------------------------------------------------- */
.mmenu{
  position:fixed;inset:0;z-index:1500;
  background:var(--bg-2);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gut);
  transform:translateY(-100%);
  transition:transform .8s var(--ease);
}
.mmenu.open{transform:none}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(28px,8vw,44px);letter-spacing:-.02em;
  padding:16px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:16px;
}
.mmenu nav a em{font-style:normal;font-size:12px;color:var(--cy);letter-spacing:.2em}
.mmenu__mail{display:block;margin-top:38px;color:var(--cy);font-size:18px;letter-spacing:.02em}
.mmenu__mail + .mmenu__mail{margin-top:10px}
.mmenu__close{
  position:absolute;top:26px;right:var(--gut);
  width:36px;height:36px;background:none;border:none;cursor:pointer;
}
.mmenu__close::before,.mmenu__close::after{
  content:"";position:absolute;left:6px;top:17px;
  width:24px;height:1.4px;background:var(--fg);
}
.mmenu__close::before{transform:rotate(45deg)}
.mmenu__close::after{transform:rotate(-45deg)}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 clamp(44px,7vh,80px);
  overflow:hidden;
}
/* banner.jpeg — yalnızca fırça dokusu görünsün diye alt şeride kadrajlandı.
   Ölçek YÜKSEKLİĞE göre verildi: dar ekranlarda da gömülü logo kadraj dışında kalır. */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url("banner.jpeg") 8% 100% / auto 240% no-repeat, var(--bg);
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.55) 34%,rgba(10,10,11,.94) 100%),
    radial-gradient(78% 62% at 78% 76%,rgba(255,255,255,.12),transparent 62%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__bg{animation:heroDrift 26s var(--ease-io) infinite}
  @keyframes heroDrift{
    0%,100%{background-size:auto 240%;background-position:8% 100%}
    50%    {background-size:auto 254%;background-position:15% 97%}
  }
}

.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hero__eyebrow{opacity:0;animation:fadeUp 1.4s var(--ease) .25s forwards}

.hero__title{
  font-family:var(--f-disp);font-weight:200;
  font-size:clamp(52px,11.5vw,180px);
  line-height:.92;letter-spacing:-.045em;
  margin:26px 0 0;
}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .ln > i{
  display:block;font-style:normal;
  white-space:nowrap;              /* ok işareti kelimeden kopmasın */
  transform:translateY(110%);
  animation:lineUp 1.6s var(--ease) forwards;
}
.hero__title .ln:nth-child(1) > i{animation-delay:.35s}
.hero__title .ln:nth-child(2) > i{animation-delay:.47s}
.hero__title .ln:nth-child(3) > i{animation-delay:.59s}
.hero__title b{font-weight:400;color:var(--cy)}

@keyframes lineUp{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero__foot{
  margin-top:clamp(38px,5vw,64px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid var(--line);
  opacity:0;animation:fadeUp 1.5s var(--ease) .95s forwards;
}
.hero__lead{max-width:44ch;color:var(--muted);font-size:16px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------
   REFERANSLAR — hero'nun hemen altında, kayan logo şeridi
   --------------------------------------------------------- */
.clients{
  position:relative;z-index:2;
  padding:clamp(40px,5.4vw,64px) 0 clamp(34px,5vw,54px);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.clients__head{display:flex;justify-content:center;margin-bottom:clamp(26px,3.4vw,38px)}
.clients__head .eyebrow::before{display:none}
.clients__marq{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.clients__track{
  display:flex;align-items:center;
  gap:clamp(48px,6vw,88px);
  width:max-content;
  animation:clientsMarq 36s linear infinite;
}
.clients__marq:hover .clients__track{animation-play-state:paused}
/* Sabit kutu + object-fit:contain — orijinal logolar farklı en-boy oranında
   olduğu için (ör. david-walker çok geniş, thf dar) yükseklik tek başına
   verilirse dar viewport'ta bazı logolar orantısızca kocaman görünüyordu. */
.clients__track img{
  height:clamp(20px,5vw,28px);
  width:clamp(64px,17vw,124px);
  object-fit:contain;object-position:center;
  flex:none;
  opacity:.42;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.clients__track img:hover{opacity:1;transform:translateY(-2px)}
@keyframes clientsMarq{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   MANİFESTO
   --------------------------------------------------------- */
.manifesto{background:var(--bg)}
.manifesto__grid{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,6vw,96px);align-items:start;
}
.stats{
  margin-top:54px;display:grid;grid-template-columns:repeat(2,1fr);
  gap:28px 32px;
}
.stat{border-top:1px solid var(--line);padding-top:20px}
.stat b{
  display:block;font-family:var(--f-disp);font-weight:200;
  font-size:clamp(38px,4.4vw,60px);line-height:1;letter-spacing:-.03em;
  color:var(--fg);font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;margin-top:9px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}

/* ---------------------------------------------------------
   HİZMETLER
   --------------------------------------------------------- */
.services{background:var(--bg-2)}
.svcs{border-top:1px solid var(--line)}
.svc{
  position:relative;display:grid;
  grid-template-columns:76px minmax(240px,1.05fr) minmax(0,1.25fr) 46px;
  align-items:center;gap:28px;
  padding:36px 22px 36px 6px;
  border-bottom:1px solid var(--line);
  transition:background .65s var(--ease),padding .65s var(--ease);
}
.svc::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--cy);transition:width .8s var(--ease);
}
.svc:hover{background:rgba(255,255,255,.022);padding-left:22px}
.svc:hover::before{width:100%}

.svc__num{
  font-size:12px;letter-spacing:.2em;color:var(--cy);
  font-variant-numeric:tabular-nums;
}
.svc__title{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(24px,2.9vw,38px);line-height:1.08;letter-spacing:-.025em;
  transition:color .5s var(--ease);
}
.svc:hover .svc__title{color:var(--cy)}
.svc__desc{color:var(--muted);font-size:15px;max-width:46ch}
.svc__arw{
  width:19px;height:19px;color:var(--muted-2);justify-self:end;
  opacity:0;transform:translate(-8px,8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .6s var(--ease);
}
.svc:hover .svc__arw{opacity:1;transform:none;color:var(--cy)}

/* ---------------------------------------------------------
   MARQUEE
   --------------------------------------------------------- */
.marq{
  overflow:hidden;padding:clamp(30px,4.4vw,54px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);
}
.marq__track{display:flex;align-items:center;gap:44px;width:max-content;animation:marq 48s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__track span{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(30px,5.4vw,72px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);
  white-space:nowrap;
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.marq__track span:hover{color:var(--cy);-webkit-text-stroke-color:var(--cy)}
.marq__track .arw{width:clamp(14px,1.7vw,22px);height:clamp(14px,1.7vw,22px);color:var(--cy);opacity:.8}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   SÜREÇ
   --------------------------------------------------------- */
.process{background:var(--bg-2)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:44px}
.steps__rail{
  position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);
}
.steps__rail span{display:block;height:100%;width:0;background:var(--cy);transition:width .9s var(--ease)}
.step{position:relative;padding-right:14px}
.step__dot{
  position:absolute;top:-48px;left:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line-2);
  transition:background .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.step.lit .step__dot{background:var(--cy);border-color:var(--cy);box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.step__num{font-size:12px;letter-spacing:.2em;color:var(--cy)}
.step h3{
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(21px,2.3vw,29px);letter-spacing:-.022em;
  margin:14px 0 12px;
}
.step p{color:var(--muted);font-size:14.5px;max-width:30ch}

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;
  padding:clamp(100px,14vw,190px) 0;
  background:var(--bg-2);
  text-align:center;
}
.cta__aura{
  position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(40% 44% at 50% 42%,rgba(255,255,255,.14),transparent 68%);
}
@media (prefers-reduced-motion:no-preference){
  .cta__aura{animation:aura 24s var(--ease-io) infinite}
  @keyframes aura{
    0%{transform:translate(0,0) scale(1);opacity:.62}
    33%{transform:translate(9%,6%) scale(1.1);opacity:.92}
    66%{transform:translate(-7%,9%) scale(1.04);opacity:.74}
    100%{transform:translate(0,0) scale(1);opacity:.62}
  }
}
.cta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta .eyebrow::before{display:none}
.cta__title{
  font-family:var(--f-disp);font-weight:200;
  font-size:clamp(36px,6.6vw,92px);line-height:1.02;letter-spacing:-.04em;
  margin-top:24px;
}
.cta__lead{margin-top:26px;color:var(--muted);max-width:46ch;font-size:16px}
.cta__mail{
  display:inline-block;margin-top:46px;
  font-family:var(--f-disp);font-weight:300;
  font-size:clamp(24px,4.1vw,54px);letter-spacing:-.03em;
  padding-bottom:10px;
  background-image:linear-gradient(var(--cy),var(--cy));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .8s var(--ease),color .6s var(--ease);
  will-change:transform;
}
.cta__mail:hover{color:var(--cy);background-size:100% 1px}
.cta__meta{
  margin-top:34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.cta__meta em{font-style:normal;color:var(--cy)}
.cta__meta a{transition:color .4s var(--ease)}
.cta__meta a:hover{color:var(--cy)}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer{background:var(--bg);padding-top:clamp(66px,8vw,104px);border-top:1px solid var(--line)}
.footer__top{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;
  gap:44px;padding-bottom:56px;
}
.footer__brand img{height:24px;width:auto;aspect-ratio:1390/259;opacity:.95}
.footer__brand p{margin-top:22px;max-width:34ch;color:var(--muted-2);font-size:14px}
.footer__col h4{
  font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg);margin-bottom:20px;
}
.footer__col a{
  display:block;font-size:14.5px;color:var(--muted-2);padding:6px 0;
  transition:color .45s var(--ease),transform .45s var(--ease);
}
.footer__col a:hover{color:var(--cy);transform:translateX(4px)}
.footer__soc{display:flex;gap:10px;margin-top:22px}
.footer__soc a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;padding:0;
  transition:border-color .45s var(--ease),background .45s var(--ease),color .45s var(--ease);
}
.footer__soc a:hover{border-color:var(--cy);background:var(--cy);color:var(--bg);transform:none}
.footer__soc svg{width:15px;height:15px}

.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  padding:26px 0 34px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2);
}
.footer__up{display:inline-flex;align-items:center;gap:8px;transition:color .45s var(--ease)}
.footer__up:hover{color:var(--cy)}
.footer__up:hover .arw{transform:translate(3px,-3px)}

/* ---------------------------------------------------------
   REVEAL — yavaş, yumuşak
   --------------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(38px);filter:blur(7px);
  transition:opacity 1.5s var(--ease),transform 1.5s var(--ease),filter 1.5s var(--ease);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal.d1{transition-delay:.14s}
.reveal.d2{transition-delay:.28s}
.reveal.d3{transition-delay:.42s}
.reveal.d4{transition-delay:.56s}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1080px){
  .manifesto__grid{grid-template-columns:1fr;gap:40px}
  .svc{grid-template-columns:60px 1fr 34px;gap:20px}
  .svc__desc{grid-column:2/4;max-width:none;margin-top:-4px}
  .svc__arw{grid-row:1;grid-column:3}
  .steps{grid-template-columns:repeat(2,1fr);gap:44px 30px}
  .footer__top{grid-template-columns:1fr 1fr;gap:38px}
}

@media (max-width:760px){
  body{font-size:16px}
  .nav__menu,.nav__cta{display:none}
  .burger{display:flex}
  .hero{align-items:flex-end;min-height:92svh}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:26px}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1;justify-content:center}
  /* dar ekranda tek satırda kalsın */
  .eyebrow{font-size:10px;letter-spacing:.16em;gap:8px}
  .eyebrow::before{width:18px}
  .hero__title{font-size:clamp(44px,13vw,68px)}
  .stats{grid-template-columns:1fr 1fr;gap:22px}
  .steps{grid-template-columns:1fr;gap:38px;padding-top:36px}
  .steps__rail{top:0;left:3px;right:auto;width:1px;height:100%}
  .steps__rail span{width:100%;height:0;transition:height .9s var(--ease)}
  .step{padding-left:30px}
  .step__dot{top:6px;left:0}
  .footer__top{grid-template-columns:1fr;gap:34px}
}

/* ---------------------------------------------------------
   AZALTILMIŞ HAREKET
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .hero__title .ln > i{transform:none;animation:none}
  .hero__eyebrow,.hero__foot{opacity:1;animation:none}
  *{animation:none !important;transition-duration:.01ms !important}
}