/* ============================================================
   Veil — tanitim sitesi.  Uretilen dosya: tools/site_varlik.py
   ============================================================ */
:root{
  --bg:#06060B; --s1:#0D0D15; --s2:#12121C; --line:#21212E;
  --pri:#7B61FF; --pri2:#A594FF; --sec:#FF5C8A; --acc:#48E0D0;
  --tx:#F6F6FB; --tx2:#A4A4B8; --tx3:#64647A;
  --r:22px; --ease:cubic-bezier(.22,.68,.18,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);line-height:1.62;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",
    "Noto Sans Arabic","Noto Sans Hebrew","Noto Sans Thai",
    "Noto Sans Devanagari","Noto Sans CJK SC","Hiragino Sans",
    "Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  font-optical-sizing:auto;
  /* Paragraf sonundaki TEK KELIMELIK satiri onler. Desteklenmeyen
     tarayicida yok sayilir, bozulma olmaz. */
  text-wrap:pretty;
}
/* BASLIKLAR AYRI YIGIN: Windows 11'de "Segoe UI Variable Display" ve
   Apple'da "SF Pro Display" gercek BASLIK kesimleridir — govde
   kesiminden daha siki, daha karakterli. Ikisi de CIHAZDA ZATEN VAR,
   yani sifir bayt. Latin disi yazilar yigindaki Noto'lara duser. */
h1,h2,h3,.brand,.sy b,.no{
  font-family:"Segoe UI Variable Display","SF Pro Display",system-ui,
    -apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",
    "Noto Sans Hebrew","Noto Sans Thai","Noto Sans Devanagari",
    "Noto Sans CJK SC","Hiragino Sans","Microsoft YaHei",sans-serif;
  /* Basligi iki satira DENGELI boler: "...make
friends." yerine
     iki satir da dolu. Tek satirlik basliklarda etkisiz. */
  text-wrap:balance;
}
/* Almanca/Fince gibi uzun bilesik kelimeler dar ekranda tasiyordu.
   `lang` her sayfada dogru yazili oldugu icin heceleme dogru calisir. */
p,li{hyphens:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--pri2);text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* ---------- AURORA ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;
  pointer-events:none;contain:strict}
.aurora i{position:absolute;display:block;border-radius:50%;
  filter:blur(94px);opacity:.42;will-change:transform}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle,#7B61FF 0,transparent 68%);
  animation:a1 30s var(--ease) infinite}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:8vh;
  background:radial-gradient(circle,#FF5C8A 0,transparent 68%);
  animation:a2 36s var(--ease) infinite}
.aurora i:nth-child(3){width:40vw;height:40vw;left:22vw;bottom:-14vw;
  background:radial-gradient(circle,#48E0D0 0,transparent 68%);
  animation:a3 42s var(--ease) infinite;opacity:.24}
@keyframes a1{50%{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes a2{50%{transform:translate3d(-16vw,16vh,0) scale(.86)}}
@keyframes a3{50%{transform:translate3d(10vw,-12vh,0) scale(1.22)}}

/* ---------- IMLEC PARILTISI ---------- */
#isik{position:fixed;left:0;top:0;width:520px;height:520px;z-index:-1;
  margin:-260px 0 0 -260px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--pri) 26%,transparent),transparent 62%);
  transition:opacity .5s;will-change:transform}
body.isikli #isik{opacity:1}

/* ---------- GRAIN ---------- */
body::after{content:"";position:fixed;inset:0;z-index:9;
  pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- BASLIK ---------- */
header{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
header .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px;color:var(--tx);
  display:flex;align-items:center;gap:8px}
.brand em{width:9px;height:9px;border-radius:50%;font-style:normal;
  background:linear-gradient(135deg,var(--pri2),var(--sec));
  box-shadow:0 0 14px var(--pri)}
.spacer{flex:1}
select{background:color-mix(in srgb,var(--s2) 86%,transparent);
  color:var(--tx);border:1px solid var(--line);border-radius:11px;
  padding:8px 11px;font-size:13.5px;font-family:inherit;cursor:pointer;
  max-width:42vw;min-width:0}
select:hover{border-color:var(--pri)}
#bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--pri),var(--sec),var(--acc))}

/* ---------- BUTON ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--pri),var(--sec));color:#fff;
  font-weight:650;border-radius:14px;padding:14px 26px;font-size:15.5px;
  white-space:nowrap;isolation:isolate;
  box-shadow:0 10px 30px -8px color-mix(in srgb,var(--pri) 80%,transparent);
  transition:box-shadow .3s var(--ease),transform .4s var(--ease);
  will-change:transform}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,var(--sec),var(--pri));opacity:0;
  transition:opacity .3s;z-index:-1}
.btn:hover{box-shadow:0 18px 44px -10px
  color-mix(in srgb,var(--sec) 85%,transparent)}
.btn:hover::before{opacity:1}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:11px}
.btn.ghost{background:transparent;border:1px solid var(--line);
  box-shadow:none;color:var(--tx2);font-weight:600}
.btn.ghost:hover{border-color:var(--pri);color:var(--tx)}
.btn.ghost::before{display:none}
/* YAKINDA butonu: tiklanamaz oldugu GORUNSUN. Bagi yok, imleci
   varsayilan, rengi soluk — "bozuk link" sanilmasin. */
.btn.yakinda{background:transparent;box-shadow:none;cursor:default;
  color:var(--tx3);font-weight:550;font-size:14.5px;
  border:1px dashed color-mix(in srgb,var(--line) 150%,var(--tx3));
  padding:13px 20px}
.btn.yakinda::before{display:none}
.btn.yakinda:hover{transform:none}
.btn.yakinda svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto}

/* ---------- PILL ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--pri2);letter-spacing:.3px;font-weight:600;border-radius:999px;
  padding:5px 13px;
  border:1px solid color-mix(in srgb,var(--pri) 55%,transparent);
  background:color-mix(in srgb,var(--pri) 10%,transparent)}
.pill b{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 9px var(--acc);animation:nabiz 2.4s ease-in-out infinite}
@keyframes nabiz{50%{opacity:.35;transform:scale(.7)}}

/* ---------- 3B EGILME ---------- */
.tilt{perspective:1100px}
.tilt>*{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .5s var(--ease);
  will-change:transform}
.tilt.aktif>*{transition:transform .08s linear}

/* ---------- HERO ---------- */
.hero{padding:clamp(44px,7vw,92px) 0 clamp(26px,4vw,52px);position:relative}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,5vw,66px);align-items:center}
h1{font-size:clamp(36px,6.6vw,70px);line-height:1.02;margin:20px 0 22px;
  letter-spacing:-.04em;font-weight:800}
/* GRADYAN BASLIGIN KENDISINDE: tek surekli gecis, kelime kelime
   kesilmiyor. Ustelik JS hic calismasa bile baslik DOGRU gorunuyor. */
h1{background:linear-gradient(104deg,var(--pri2) 0%,var(--sec) 52%,
    var(--acc) 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;background-size:260% auto;
  animation:kay 11s linear infinite}
/* BASLIK KELIMELERI — IKI KURAL, IKISI DE ACI DENEYIMDEN:
   1) GORUNURLUK ANIMASYONA BAGLI DEGIL. Once `opacity:0` baslangicti
      ve gorunur olmak animasyonun BITMESINE bagliydi; animasyon
      calismazsa sayfanin EN ONEMLI metni kayboluyordu (Arapca sayfada
      ilk uc kelime yok oldu). Artik varsayilan GORUNUR, animasyon
      `backwards` ile gecici gizleyip getiriyor.
   2) `display:inline` ve TRANSFORM YOK. Once `inline-block` +
      `translateY/rotate` vardi: bu her kelimeyi ayri bir kutuya
      sokuyor ve yerlesim otururken kelimeler UST USTE BINIYORDU
      (olculdu 21 Eki, Turkce sayfa). Opaklik yerlesimi HIC
      etkilemez — bu yuzden tek animasyonlu ozellik o.
   Sonuc: JS kossa da kosmasa da baslik duz, akan, okunur metin. */
h1 .w{display:inline}
h1.ac .w{animation:gir .7s var(--ease) backwards;
  animation-delay:calc(var(--i) * 50ms)}
@keyframes gir{from{opacity:0}}
@keyframes kay{to{background-position:260% center}}
.lead{font-size:clamp(16px,1.9vw,19.5px);color:var(--tx2);margin:0 0 30px;
  max-width:46ch}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.shot{position:relative;justify-self:center;width:min(100%,340px)}
.shot::before{content:"";position:absolute;inset:-14% -10% -8%;
  background:radial-gradient(ellipse at 50% 45%,
    color-mix(in srgb,var(--pri) 55%,transparent),transparent 68%);
  filter:blur(46px);z-index:-1}
.shot img{border-radius:var(--r);
  box-shadow:0 38px 92px -26px rgba(0,0,0,.92),
             0 0 0 1px color-mix(in srgb,#fff 7%,transparent)}
.yuz{animation:suzul 7s ease-in-out infinite}
@keyframes suzul{50%{transform:translateY(-14px)}}
.cue{margin-top:38px;color:var(--tx3);font-size:12px;letter-spacing:.22em;
  display:flex;align-items:center;gap:10px}
.cue span{width:34px;height:1px;background:linear-gradient(90deg,
  var(--tx3),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{50%{transform:translateX(9px);opacity:.3}}

/* ---------- SAYAC SERIDI ---------- */
.sayac{padding:clamp(22px,3.5vw,44px) 0;
  border-block:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.sayac .wrap{display:flex;gap:clamp(20px,5vw,70px);flex-wrap:wrap;
  justify-content:center}
.sy{text-align:center;min-width:92px}
.sy b{display:block;font-size:clamp(28px,4.4vw,46px);font-weight:800;
  letter-spacing:-.04em;line-height:1.08;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--pri2),var(--sec));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sy span{display:block;font-size:22px;margin-top:2px;opacity:.78}

/* ---------- BEYAN ---------- */
.beyan{padding:clamp(40px,6.5vw,88px) 0}
.beyan p{font-size:clamp(22px,3.2vw,36px);line-height:1.3;margin:0;
  letter-spacing:-.025em;font-weight:650;max-width:20ch}
.beyan p:nth-child(n+2){margin-top:18px;font-size:clamp(15px,1.8vw,18px);
  color:var(--tx2);font-weight:400;max-width:58ch;letter-spacing:0}

/* ---------- ANLATIM ---------- */
.story{position:relative}
.ray{position:fixed;inset-inline-start:22px;top:50%;translate:0 -50%;
  z-index:12;display:none;flex-direction:column;gap:11px}
.ray b{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:all .4s var(--ease)}
.ray b.on{background:linear-gradient(135deg,var(--pri2),var(--sec));
  height:22px;border-radius:4px;box-shadow:0 0 12px var(--pri)}
@media(min-width:1340px){.ray{display:flex}}
.step{padding:clamp(34px,6vw,64px) 0;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
/* DIKEY ORTALAMA: gorsel 9:16 oldugu icin satir yuksekligini O
   belirliyor; metni yukari yaslayinca altinda 400-500 px bos alan
   kaliyor ve bolum terk edilmis gorunuyordu (olculdu 21 Eki). */
.step .wrap{display:grid;grid-template-columns:1fr .72fr;
  gap:clamp(26px,5vw,70px);align-items:center}
/* SUTUNLARI DA TAKAS ET: yalniz `order` vermek metni saga atiyor ama
   gorsel GENIS sutunda kaliyordu -> cift sirali adimlarin gorseli
   digerlerinden buyuk cikiyordu (olculdu, 20 Eki). */
.step:nth-child(even) .wrap{grid-template-columns:.72fr 1fr}
.step:nth-child(even) .txt{order:2}
.step .sticky{position:sticky;top:100px}
.step .sticky img{border-radius:var(--r);
  box-shadow:0 28px 74px -24px rgba(0,0,0,.9),
             0 0 0 1px color-mix(in srgb,#fff 6%,transparent)}
.no{font-size:12px;letter-spacing:.3em;color:var(--tx3);font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:12px;display:block}
.ikon{width:54px;height:54px;border-radius:16px;display:grid;
  place-items:center;font-size:26px;margin-bottom:16px;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--pri) 24%,transparent),
    color-mix(in srgb,var(--sec) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--pri) 36%,transparent)}
/* ETIKET: magaza basligi artik kucuk bir isaret. Buyuk punto ile
   okutulmasi ziyaretciyi yoruyordu — anahtar kelime yuklu bir cumle
   okunmak icin yazilmamis. */
.step h2.etiket{font-size:12.5px;letter-spacing:.2em;font-weight:700;
  color:var(--pri2);margin:0 0 16px;line-height:1.5}
/* Arapcada pozitif harf araligi harflerin BAGINI KOPARIR; `caps`
   sinifi yalniz Latin harf iceren ve tamami buyuk olan basliga
   veriliyor (bkz. site_uret.buyuk_harf_mi). */
.step h2.etiket:not(.caps){letter-spacing:.06em}
/* ACILIS: paragrafin ilk cumlesi. Sayfada okunmasini istedigimiz
   cumle bu — insan dili, anahtar kelime degil. */
.step p.acik{font-size:clamp(19px,2.35vw,26px);line-height:1.38;
  color:var(--tx);font-weight:580;letter-spacing:-.016em;
  margin:0 0 18px;max-width:24ch;text-wrap:balance}
/* GOVDE: daha buyuk, daha aydinlik, daha dar olcu. Onceki ayar
   16px/1.62/#A4A4B8/50ch idi ve "okuyasi gelmiyor" geri bildirimini
   aldi — uzun satir + dusuk kontrast birlikte yoruyor. */
.step p{color:#B6B6C8;margin:0 0 15px;font-size:17px;line-height:1.72;
  max-width:44ch}
.step ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px;
  max-width:44ch}
.step li{color:#B6B6C8;font-size:15.5px;line-height:1.6;
  padding-inline-start:26px;position:relative}
.step li::before{content:"";position:absolute;inset-inline-start:0;top:9px;
  width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--pri2),var(--acc))}

/* ---------- BENTO ---------- */
.bento{padding:clamp(48px,7vw,96px) 0}
.bento h2{font-size:clamp(25px,3.7vw,42px);margin:0 0 32px;
  letter-spacing:-.032em;font-weight:780;max-width:20ch}
.grid{display:grid;gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.card{position:relative;border-radius:18px;padding:24px 22px;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--s2) 96%,transparent),
    color-mix(in srgb,var(--s1) 96%,transparent));
  border:1px solid var(--line);color:var(--tx2);font-size:15px;
  overflow:hidden;transition:transform .4s var(--ease)}
/* ISIK LEKESI: imlec kartin NERESINDE ise orada parliyor (--mx/--my) */
.card::after{content:"";position:absolute;inset:0;opacity:0;
  transition:opacity .35s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--pri) 16%,transparent),transparent 66%)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:linear-gradient(140deg,var(--pri),transparent 42%,
    transparent 58%,var(--sec));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;
  transition:opacity .4s}
.card:hover{transform:translateY(-4px)}
.card:hover::before,.card:hover::after{opacity:1}
/* display:block SART — SVG varsayilan olarak satir ici ve metin
   yanindan akiyordu (olculdu, 20 Eki). */
.card svg{display:block;width:26px;height:26px;margin-bottom:14px;
  stroke:var(--pri2);fill:none;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;position:relative;z-index:1}
.card span{position:relative;z-index:1}

/* ---------- DIL SERIDI ---------- */
.serit{padding:clamp(24px,3.4vw,44px) 0;overflow:hidden;
  border-block:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.serit-ic{display:flex;gap:11px;width:max-content;
  animation:akis 76s linear infinite}
.serit-ic+.serit-ic{animation-duration:94s;animation-direction:reverse;
  margin-top:11px}
.serit:hover .serit-ic{animation-play-state:paused}
.serit span{border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:13.5px;color:var(--tx2);white-space:nowrap;
  background:color-mix(in srgb,var(--s1) 70%,transparent)}
@keyframes akis{to{transform:translateX(-50%)}}

/* ---------- KAPANIS ---------- */
.son{padding:clamp(66px,9vw,128px) 0;text-align:center;position:relative}
.son::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,
    color-mix(in srgb,var(--pri) 20%,transparent),transparent 70%)}
.son h2{font-size:clamp(29px,5.4vw,58px);margin:0 0 16px;
  letter-spacing:-.038em;font-weight:800;line-height:1.06}
.son p{color:var(--tx2);margin:0 auto 32px;max-width:44ch}

/* ---------- ALTLIK ---------- */
footer{border-top:1px solid var(--line);padding:32px 0 48px;
  color:var(--tx3);font-size:13.5px}
.fsat{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.fsat a{color:var(--tx2)}
.fsat a:hover{color:var(--tx)}
.diller{margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 12px}
.diller a{color:var(--tx3);font-size:12.5px}
.diller a:hover{color:var(--pri2)}

/* ---------- ACILMA ---------- */
[data-r]{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-r].gorundu{opacity:1;transform:none}
[data-r="1"]{transition-delay:.07s}
[data-r="2"]{transition-delay:.14s}
[data-r="3"]{transition-delay:.21s}

/* ---------- DAR EKRAN ---------- */
@media(max-width:900px){
  .hero .wrap,.step .wrap,.step:nth-child(even) .wrap{
    grid-template-columns:1fr}
  .step:nth-child(even) .txt{order:0}
  .step .sticky{position:static;width:min(84%,330px);margin:22px auto 0}
  .shot{width:min(78%,300px)}
  .cue{display:none}
  .beyan p{max-width:none}
}
@media(max-width:560px){
  header .btn{display:none}
  select{max-width:none;flex:1 1 auto}
  .brand{font-size:17px}
  .hero{padding-top:28px}
  .sayac .wrap{gap:18px 26px}
}

/* ---------- AURORA: DAR EKRANDA BUYUT, BULANIKLIGI AZALT ----------
   Lekeler `vw` ile olculuyor ama `blur()` SABIT px idi. 1280px'te leke
   666px ve 94px bulanıklık yaninda kuculuyordu; 390px'te leke 203px'e
   dusunce bulanıklık lekenin yarisi kadar oluyor ve rengi tamamen
   dagitiyordu. OLCULDU (21 Eki):
       masaustu sol ust  rgb(30,26,58)   mor belirgin
       mobil    sol ust  rgb(17,16,30)   neredeyse siyah
   Cozum: dar ekranda lekeyi gorunum alanindan BUYUK yap, bulanıkligi
   dusur. Boylece renk yogunlugu iki olcude de benzer kaliyor. */
@media(max-width:900px){
  .aurora i{filter:blur(72px);opacity:.34}
  .aurora i:nth-child(1){width:105vw;height:105vw;left:-32vw;top:-24vw}
  .aurora i:nth-child(2){width:92vw;height:92vw;right:-38vw;top:10vh}
  .aurora i:nth-child(3){width:85vw;height:85vw;left:-18vw;
    bottom:-24vw;opacity:.2}
}

/* ---------- DOKUNMATIK ----------
   Imlec parilti, 3B egilme ve miknatis buton FARE'ye bagli: dokunmatikte
   imlec yok, hover yok. Ama mobil bos kalmasin diye KENDI karsiligi var:
   kaydirmaya bagli hareket. Gorsel ekrana girerken hafifce doner,
   buyur ve netlesir — masaustundeki egilmenin mobildeki esdegeri.

   `animation-timeline: view()` TARAYICIDA calisir, JS YOK: kaydirma
   olayi dinlemek mobilde pil ve akicilik maliyeti demekti. Destegi
   olmayan tarayicida hicbir sey olmaz, gorsel duragan gorunur. */
@media(hover:none),(pointer:coarse){
  #isik{display:none}
  .tilt>*{transform:none!important}

  @supports (animation-timeline: view()){
    .shot img,.step .sticky img{
      animation:girisHareketi linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 42%;
    }
    @keyframes girisHareketi{
      from{transform:translateY(30px) scale(.93) rotate(1.4deg);opacity:.5}
      to{transform:none;opacity:1}
    }
    /* Bento kartlari da sirayla gelsin */
    .card{
      animation:kartGirisi linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 34%;
    }
    @keyframes kartGirisi{
      from{transform:translateY(20px);opacity:.35}
      to{transform:none;opacity:1}
    }
  }
  /* Dokunma geri bildirimi: hover olmayinca buton "olu" hissettiriyordu */
  .btn:not(.yakinda):active{transform:scale(.96)}
  .card:active{transform:scale(.985)}
}

/* ---------- HAREKET AZALTMA ----------
   "reduce" demek HAREKETI azalt demek, ZENGINLIGI SIL demek DEGIL.
   Once her seyi `*{animation-duration:.001ms}` ile kapatiyordum ve
   ayari acik olan ziyaretci duz, olu bir sayfa goruyordu.
   KALAN: aurora (donmus ama renkli), imlec parilti, kart isik lekesi,
          opaklik gecisleri, renk gecisleri, baslik gradyani.
   KALKAN: uzamsal hareket — suzulme, 3B egilme, miknatis buton,
          kaydirmayla gelen translate, yumusak kaydirma.
   Olcut: oge EKRANDA YER DEGISTIRIYOR mu? Degistiriyorsa kapatilir. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Uzamsal hareket kapali */
  .yuz{animation:none}
  .tilt>*{transform:none!important;transition:none}
  .cue span{animation:none}
  .pill b{animation:none}
  .aurora i{animation:none}
  .serit-ic{animation:none}
  /* Acilma: KAYMA yok, ama SOLMA var — yer degistirmedigi icin guvenli */
  [data-r]{transform:none;transition:opacity .6s var(--ease)}
  /* Mobildeki kaydirma hareketi de uzamsal — kapat */
  .shot img,.step .sticky img,.card{animation:none}
  /* Baslik gradyani bir RENK animasyonu; yavaslatip biraktik */
  h1{animation-duration:26s}
}