/* =====================================================================
   HAREKET: giriş perdesi, kayan şerit, dişliler, hero canlandırmaları,
   mikro etkileşimler. stil.css'ten sonra yüklenir.
   ===================================================================== */

/* ---------- Giriş perdesi ---------- */
body.perde-acik { overflow: hidden; }
#giris-perde {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: 10px;
  background: radial-gradient(900px 500px at 20% 15%, rgba(111,168,216,.22), transparent 60%),
              radial-gradient(700px 500px at 85% 90%, rgba(46,48,146,.35), transparent 55%),
              linear-gradient(160deg, #0b1522 0%, #152638 50%, #1d3350 100%);
  color: #fff; cursor: pointer; transition: opacity .9s ease, visibility .9s; overflow: hidden;
}
#giris-perde.kapan { opacity: 0; visibility: hidden; pointer-events: none; }
#giris-perde.kapan .perde-sahne { transform: scale(1.18); filter: blur(6px); }
.perde-izgara {
  position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%);
  animation: izgaraKay 14s linear infinite;
}
@keyframes izgaraKay { to { background-position: 120px 120px, 120px 120px, 24px 24px, 24px 24px; } }
.perde-isik {
  position: absolute; width: 60vmax; height: 60vmax; left: 50%; top: 45%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(111,168,216,.22), rgba(111,168,216,0) 60%);
  transform: translate(-50%, -50%); animation: isikGez 7s ease-in-out infinite alternate;
}
@keyframes isikGez { from { transform: translate(-60%, -55%) scale(.9); } to { transform: translate(-40%, -45%) scale(1.1); } }
.perde-sahne { width: min(680px, 94vw); height: auto; position: relative; transition: transform .9s ease, filter .9s ease; overflow: visible; }

/* HUD halkaları */
.hud > * { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hudGel .8s ease forwards, don 40s linear infinite; }
.hud .h1 { animation-delay: .1s, 0s; }
.hud .h2 { animation-delay: .25s, 0s; animation-direction: normal, reverse; animation-duration: .8s, 26s; }
.hud .h3 { animation-delay: .4s, 0s; animation-duration: .8s, 70s; }
.hud .h4 { animation-delay: .55s, 0s; animation-direction: normal, reverse; animation-duration: .8s, 18s; }
@keyframes hudGel { to { opacity: 1; } }
@keyframes don { to { transform: rotate(360deg); } }

/* Amblem parçaları: dağınık + çizgi hâlinde gelir, yerine oturur, dolar */
.parca {
  fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: parcaCiz 1.3s cubic-bezier(.2,.7,.2,1) forwards, parcaDol .7s ease forwards;
}
.parca.p0 { --t: translate(-60px, 40px) rotate(-8deg); animation-delay: .25s, 1.55s; }
.parca.p1 { --t: translate(0, 90px) rotate(20deg); animation-delay: .5s, 1.7s; }
.parca.p2 { --t: translate(90px, 60px) rotate(12deg); animation-delay: .4s, 1.65s; }
.parca.p3 { --t: translate(-100px, 60px) rotate(-14deg); animation-delay: .6s, 1.75s; }
.parca.p4 { --t: translate(80px, -70px) rotate(-6deg); animation-delay: .35s, 1.6s; }
@keyframes parcaCiz { 0% { opacity: 0; stroke-dashoffset: 1; transform: var(--t); } 15% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; transform: none; } }
@keyframes parcaDol { to { fill-opacity: 1; stroke-width: 1; stroke: #e6f0fa; } }

/* ışık süpürmesi, şok dalgası, kıvılcım */
.supur { opacity: 0; transform: translateX(-220px) skewX(-18deg); animation: supur 1s cubic-bezier(.4,0,.2,1) 2.05s forwards; }
@keyframes supur { 0% { opacity: 0; transform: translateX(-220px) skewX(-18deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(520px) skewX(-18deg); } }
.sok { opacity: 0; animation: sok 1s cubic-bezier(.2,.7,.3,1) 2.05s forwards; }
.sok2 { animation-delay: 2.2s; animation-duration: 1.2s; }
@keyframes sok { 0% { r: 10px; opacity: 1; } 100% { r: 250px; opacity: 0; } }
.kivilcim circle { opacity: 0; animation: kivilcim .9s cubic-bezier(.1,.7,.3,1) 2.1s forwards; }
.kivilcim circle:nth-child(2n) { animation-delay: 2.18s; } .kivilcim circle:nth-child(3n) { animation-delay: 2.26s; animation-duration: 1.1s; }
@keyframes kivilcim { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }

/* yazı ve slogan */
.harf { opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-34px) scale(.9); animation: harf .6s cubic-bezier(.2,.7,.2,1) forwards; }
.harf:nth-child(1) { animation-delay: 2.3s; } .harf:nth-child(2) { animation-delay: 2.34s; } .harf:nth-child(3) { animation-delay: 2.36s; } .harf:nth-child(4) { animation-delay: 2.36s; }
.harf:nth-child(5) { animation-delay: 2.42s; } .harf:nth-child(6) { animation-delay: 2.46s; } .harf:nth-child(7) { animation-delay: 2.5s; } .harf:nth-child(8) { animation-delay: 2.54s; }
.harf:nth-child(9) { animation-delay: 2.62s; } .harf:nth-child(10) { animation-delay: 2.66s; } .harf:nth-child(11) { animation-delay: 2.68s; } .harf:nth-child(12) { animation-delay: 2.72s; }
.harf:nth-child(13) { animation-delay: 2.76s; } .harf:nth-child(14) { animation-delay: 2.78s; }
@keyframes harf { to { opacity: 1; transform: none; } }
.slogan { opacity: 0; letter-spacing: 10px; animation: slogan .9s ease 2.95s forwards; }
@keyframes slogan { to { opacity: 1; letter-spacing: 3px; } }
.slogan-cizgi { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cizgiCek .7s ease 3.1s forwards; }
@keyframes cizgiCek { to { stroke-dashoffset: 0; } }

.perde-cubuk { position: relative; width: 240px; height: 2px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.perde-cubuk i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fa8d8, #ffffff); animation: dol 4s cubic-bezier(.3,.1,.2,1) .1s forwards; }
@keyframes dol { to { width: 100%; } }
@keyframes belir { to { opacity: 1; transform: none; } }
.perde-gec {
  position: absolute; right: 22px; bottom: 22px; background: transparent; color: #c9d6e3; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: .85rem; cursor: pointer; opacity: 0; animation: belir .5s ease 1.2s forwards; z-index: 2;
}
.perde-gec:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Perde kapanınca hero içeriği yukarıdan süzülür */
body.perde-bitti .hero .kap > * { animation: suzul .9s cubic-bezier(.2,.7,.2,1) both; }
body.perde-bitti .hero .hero-gorsel { animation-delay: .15s; }
@keyframes suzul { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Hero canlandırmaları ---------- */
.hero { --px: 0; --py: 0; }
.hero::after {
  content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0;
  background: radial-gradient(600px 400px at 25% 20%, rgba(111,168,216,.25), transparent 60%),
              radial-gradient(500px 400px at 85% 80%, rgba(230,167,0,.12), transparent 55%);
  transform: translate(calc(var(--px) * -24px), calc(var(--py) * -16px)); transition: transform .4s ease-out;
}
.hero .kap { z-index: 1; }
.hero-gorsel svg { transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform .4s ease-out; }
.hero h1 .satir { display: inline-block; opacity: 0; transform: translateY(18px); animation: suzul .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .satir:nth-child(2) { animation-delay: .12s; } .hero h1 .satir:nth-child(3) { animation-delay: .24s; }
.hero .rozetler span { animation: suzul .7s ease both; }
.hero .rozetler span:nth-child(1) { animation-delay: .5s; } .hero .rozetler span:nth-child(2) { animation-delay: .6s; }
.hero .rozetler span:nth-child(3) { animation-delay: .7s; } .hero .rozetler span:nth-child(4) { animation-delay: .8s; }
.hero .nokta { animation: nabiz 1.6s ease-out infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(29,122,76,.5); } 70% { box-shadow: 0 0 0 10px rgba(29,122,76,0); } 100% { box-shadow: 0 0 0 0 rgba(29,122,76,0); } }
/* ölçü çizgileri çizilerek gelir */
.ciz { stroke-dasharray: 700; stroke-dashoffset: 700; animation: cizgi 1.4s ease-out forwards; }
.ciz.g1 { animation-delay: .6s; } .ciz.g2 { animation-delay: 1s; } .ciz.g3 { animation-delay: 1.4s; }
@keyframes cizgi { to { stroke-dashoffset: 0; } }
.ok { opacity: 0; animation: belir .5s ease forwards; }
.ok.g1 { animation-delay: 1.6s; } .ok.g2 { animation-delay: 2s; } .ok.g3 { animation-delay: 2.4s; }
.cizim-govde { opacity: 0; animation: belir .9s ease .2s forwards; }
.don-yavas { animation: don 6s linear infinite; transform-box: fill-box; transform-origin: center; }
/* amblem filigranı */
.hero-filigran { position: absolute; left: -3%; bottom: -8%; width: 44%; max-width: 560px; opacity: .05; filter: brightness(0) invert(1); pointer-events: none; z-index: 0; animation: filigran 14s ease-in-out infinite alternate; }
@keyframes filigran { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-18px) rotate(1deg); } }
/* süzülen talaş parçacıkları */
.hero-parcaciklar { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-parcaciklar i {
  position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 2px; background: rgba(255,211,107,.55);
  animation: yuksel 11s linear infinite; opacity: 0;
}
.hero-parcaciklar i:nth-child(1) { left: 8%; animation-delay: 0s; } .hero-parcaciklar i:nth-child(2) { left: 22%; animation-delay: 2s; width: 4px; height: 4px; }
.hero-parcaciklar i:nth-child(3) { left: 35%; animation-delay: 4s; background: rgba(111,168,216,.5); } .hero-parcaciklar i:nth-child(4) { left: 48%; animation-delay: 1s; }
.hero-parcaciklar i:nth-child(5) { left: 61%; animation-delay: 6s; width: 3px; height: 3px; } .hero-parcaciklar i:nth-child(6) { left: 74%; animation-delay: 3s; background: rgba(111,168,216,.5); }
.hero-parcaciklar i:nth-child(7) { left: 86%; animation-delay: 8s; } .hero-parcaciklar i:nth-child(8) { left: 94%; animation-delay: 5s; width: 4px; height: 4px; }
@keyframes yuksel { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .6; } 100% { transform: translateY(-110vh) rotate(540deg); opacity: 0; } }

/* ---------- Kayan şerit ---------- */
.serit { background: var(--lacivert-2); color: #c9d6e3; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); position: relative; }
.serit::before, .serit::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.serit::before { left: 0; background: linear-gradient(90deg, var(--lacivert-2), transparent); }
.serit::after { right: 0; background: linear-gradient(270deg, var(--lacivert-2), transparent); }
.serit-ic { display: flex; align-items: center; gap: 26px; width: max-content; padding: 13px 0; animation: kay 32s linear infinite; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; white-space: nowrap; }
.serit-ic i { color: var(--mavi-acik); font-style: normal; font-size: .6rem; }
.serit:hover .serit-ic { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ---------- Dekoratif dişliler ---------- */
.hero, .sayfa-bas, .bolum.koyu, .cta { position: relative; overflow: hidden; }
.disli-dekor { position: absolute; pointer-events: none; color: #fff; opacity: .07; z-index: 0; animation: don 48s linear infinite; }
.disli-dekor.d1 { width: 320px; height: 320px; right: -90px; top: -110px; }
.disli-dekor.d2 { width: 180px; height: 180px; right: 150px; top: 140px; animation-direction: reverse; animation-duration: 30s; }
.sayfa-bas .disli-dekor.d1 { top: auto; bottom: -140px; right: 6%; }
.sayfa-bas .disli-dekor.d2 { right: 30%; top: -60px; }
.cta .disli-dekor.d1 { right: 160px; top: -140px; opacity: .1; }
.cta .disli-dekor.d2 { right: 40px; top: 40px; opacity: .1; }
.bolum.koyu .kap, .sayfa-bas .kap, .cta > :not(.disli-dekor) { position: relative; z-index: 1; }

/* ---------- Mikro etkileşimler ---------- */
.baslik { transition: box-shadow .3s ease; }
.baslik.kaydi { box-shadow: 0 10px 30px -18px rgba(22,33,44,.35); }
.kart .ikon { transition: transform .3s cubic-bezier(.3,1.4,.5,1), background .3s; }
.kart:hover .ikon { transform: rotate(-8deg) scale(1.1); background: var(--mavi); color: #fff; }
.kart.vurgulu:hover .ikon { background: var(--mavi-acik); color: var(--lacivert); }
.kart .devam { transition: letter-spacing .25s ease; }
.kart:hover .devam { letter-spacing: .04em; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn:hover::after { left: 130%; }
.sektor { transition: transform .3s ease, box-shadow .3s ease; }
.sektor:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.sektor svg { transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.sektor:hover svg { transform: translateY(-4px) rotate(-10deg) scale(1.15); }
.surec .adim { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.surec .adim:hover { transform: translateY(-4px); border-color: var(--mavi-acik); box-shadow: var(--golge); }
.surec .adim::before { transition: color .25s; } .surec .adim:hover::before { color: var(--amber); }
.deger { transition: transform .25s ease, background .25s ease; }
.deger:hover { transform: translateX(6px); background: rgba(255,255,255,.08); }
.yanip { animation: yanip 1.4s ease-in-out infinite; }
@keyframes yanip { 50% { opacity: .25; } }
.ilerleme { animation: ilerle 6s ease-in-out infinite alternate; }
@keyframes ilerle { from { width: 170px; } to { width: 260px; } }
.gorsel-kutu svg { transition: transform .6s ease; } .gorsel-kutu:hover svg { transform: scale(1.03); }
.logolar .logo-kutu { transition: border-color .25s, color .25s, transform .25s; }
.logolar .logo-kutu:hover { border-color: var(--mavi); color: var(--mavi-koyu); transform: translateY(-2px); }

/* Hareket azaltma açıksa yalnız arka plandaki sürekli süslemeler durur; giriş perdesi ve sayfa
   animasyonları yine gösterilir (telefonlar bu ayarı güç tasarrufunda kendiliğinden açıyor). */
@media (prefers-reduced-motion: reduce) {
  .hero-parcaciklar i, .serit-ic, .disli-dekor, .hero-filigran { animation: none !important; }
  .hero-parcaciklar { display: none; }
}
@media (max-width: 600px) {
  .disli-dekor.d1 { width: 220px; height: 220px; right: -80px; top: -80px; }
  .disli-dekor.d2 { display: none; }
  .perde-cubuk { width: 160px; }
}

/* ---------- Hero: 5 eksen işleme hologramı (çizimi site.js besEksen) — çerçevesiz, sütundan taşar ---------- */
.bes-eksen {
  position: relative; aspect-ratio: 7 / 5; margin: -8% -12% -8% -6%;
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform .4s ease-out;
}
.bes-eksen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 1000px) { .bes-eksen { margin: 0 -4%; } }