/* =====================================================================
   mubinozdemir.com — Hareket v2
   Tum hareketler transform / opacity / clip-path uzerinden; layout'a
   dokunan (width, height, top) animasyon yok. Core Web Vitals'a zarar
   vermez. prefers-reduced-motion'da tamamen kapanir.
   ===================================================================== */

/* ---------------- Aurora (arka plan) ---------------- */
@keyframes aurora-1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(12vw, 8vh, 0) scale(1.15); }
    66%  { transform: translate3d(-4vw, 14vh, 0) scale(.95); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    40%  { transform: translate3d(-14vw, 10vh, 0) scale(1.2); }
    70%  { transform: translate3d(-6vw, -6vh, 0) scale(1.05); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aurora-3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(10vw, -12vh, 0) scale(1.25); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.aurora-1 { animation: aurora-1 26s ease-in-out infinite; }
.aurora-2 { animation: aurora-2 32s ease-in-out infinite; }
.aurora-3 { animation: aurora-3 38s ease-in-out infinite; }

/* Aurora, sayfa kaydikca hafifce yukari kayar (destekleyen tarayicida) */
@supports (animation-timeline: scroll()) {
    @keyframes fon-kay { to { transform: translate3d(0, -18vh, 0); } }
    .fon { animation: fon-kay linear both; animation-timeline: scroll(root); }
}

/* ---------------- Sayfa girisi ---------------- */
@keyframes belir {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes harf-gel {
    from { opacity: 0; transform: translate3d(0, .5em, 0) rotate(4deg); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
.js .hero-ust, .js .hero-unvan, .js .donen-satir, .js .tanim-cumlesi, .js .hero .btn-satir, .js .sayaclar {
    animation: belir .9s var(--gecis) both;
}
.js .hero-unvan     { animation-delay: .55s; }
.js .donen-satir    { animation-delay: .7s; }
.js .tanim-cumlesi  { animation-delay: .85s; }
.js .hero .btn-satir{ animation-delay: 1s; }
.js .sayaclar       { animation-delay: 1.15s; }
.js .hero h1 .harf  { animation: harf-gel .7s var(--gecis) both; animation-delay: calc(.12s + var(--i, 0) * 45ms); }
.js .terminal       { animation: belir 1s var(--gecis) .3s both; }

/* Hero adinin uzerinden gecen isik — harfler inline-block oldugu icin
   background-clip:text dogrudan calismaz; ayni metin ::after ile ustune
   bindirilir (content: attr(data-ad)), harfler yerlesince belirir. */
@keyframes ad-isik { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ad-belir { from { opacity: 0; } to { opacity: 1; } }
.hero h1 .harfler { position: relative; display: inline-block; }
.hero h1 .harfler::after {
    content: attr(data-ad); position: absolute; inset: 0; white-space: nowrap; pointer-events: none;
    background: linear-gradient(110deg, var(--metin) 0%, var(--metin) 42%, var(--cyan) 50%, var(--macenta) 55%, var(--metin) 62%, var(--metin) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ad-isik 7s linear 2s infinite, ad-belir .4s linear 1.25s both;
}
.js-yok .hero h1 .harfler::after { display: none; }

/* Nokta nabzi */
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.hero-ust .nokta, .alt-durum .nokta { animation: nabiz 1.8s ease-out infinite; }

/* ---------------- Donen kelimeler ---------------- */
/* 5 kelime, her biri 20% pay; kelime sayisi degisirse index.php'deki --adet ile hesaplanir. */
@keyframes donen-kay {
    0%, 16%    { transform: translate3d(0, 0, 0); }
    20%, 36%   { transform: translate3d(0, -1.35em, 0); }
    40%, 56%   { transform: translate3d(0, -2.7em, 0); }
    60%, 76%   { transform: translate3d(0, -4.05em, 0); }
    80%, 96%   { transform: translate3d(0, -5.4em, 0); }
    100%       { transform: translate3d(0, -6.75em, 0); }
}
.donen ul { animation: donen-kay 14s var(--gecis) infinite; }

/* ---------------- Terminal ---------------- */
@keyframes t-satir-gel {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes t-imlec { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
.js .t-satir { animation: t-satir-gel .55s steps(24, end) both; animation-delay: calc(1.1s + var(--i, 0) * .32s); }
.t-imlec { animation: t-imlec 1s steps(1) infinite; }

@keyframes yuzen { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
.js .terminal.yuzuyor { animation: yuzen 7s ease-in-out infinite; }

/* ---------------- Kayan seritler ---------------- */
@keyframes kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.kayan-ic { animation: kay var(--sure, 60s) linear infinite; }

/* ---------------- Sayfa icinde acilma (reveal) ---------------- */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--gecis), transform .9s var(--gecis); transition-delay: calc(var(--g, 0) * 90ms); }
.js .reveal.goster { opacity: 1; transform: none; }
.js .reveal-sol { transform: translate3d(-30px, 0, 0); }
.js .reveal-olcek { transform: scale(.94); }

/* ---------------- Sayaclar ---------------- */
.js .sayac-rakam .sayi { display: inline-block; min-width: 1ch; }

/* ---------------- Dugme parilti ---------------- */
@keyframes parilti { to { transform: translateX(120%); } }

/* ---------------- Okuma ilerleme cubugu ---------------- */
@supports (animation-timeline: scroll()) {
    @keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .ilerleme { animation: ilerle linear both; animation-timeline: scroll(root); }
}

/* ---------------- Bento kart ikon dansi ---------------- */
.uzmanlik-ikon { transition: transform .5s var(--gecis), background .4s, color .4s; }
.uzmanlik-kart:hover .uzmanlik-ikon { transform: translateY(-4px) rotate(-6deg); background: var(--grad); color: #fff; border-color: transparent; }

/* ---------------- Mobil menu ogeleri ---------------- */
.mobil-menu.acik li { animation: belir .5s var(--gecis) both; animation-delay: calc(var(--g, 0) * 60ms); }

/* ---------------- Gradient metin akisi ---------------- */
@keyframes grad-ak { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.grad-metin.akan { animation: grad-ak 6s linear infinite; }

/* =====================================================================
   Hareket azaltma tercihi — her sey durur, icerik gorunur kalir
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
    .js .hero h1 .harf, .js .t-satir, .js .terminal, .js .hero-ust, .js .hero-unvan, .js .donen-satir, .js .tanim-cumlesi, .js .hero .btn-satir, .js .sayaclar { opacity: 1; transform: none; clip-path: none; filter: none; }
    .hero h1 .harfler::after { display: none; }
    .kayan-ic { transform: none; flex-wrap: wrap; width: auto; }
    .surec::before { transform: none; }
    .imlec-isik { display: none; }
    .ilerleme { display: none; }
    .donen { height: auto; }
    .donen li { display: none; }
    .donen li:first-child { display: block; }
}