/* FitKoç web sitesi — yalnızca ana sayfa: açılış ekranı ve kaydırma işareti */

/* ── Açılış ekranı ─────────────────────────────────────────────── */
.intro { display: none; }
.js .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); overflow: hidden; animation: intro-failsafe 0.01s linear 9s forwards; }
.js.no-intro .intro { display: none; }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.intro::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 107, 53, 0.3), rgba(255, 61, 31, 0.08) 55%, transparent 72%); animation: breathe 2.4s ease-in-out infinite alternate; }
.intro-core { position: relative; display: grid; justify-items: center; gap: 20px; }
.intro-logo { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.intro-logo img { border-radius: 24px; box-shadow: 0 24px 60px -12px rgba(255, 107, 53, 0.75); animation: intro-pop 0.9s var(--ease) both; }
@keyframes intro-pop { from { transform: scale(0.4) rotate(-14deg); opacity: 0; filter: blur(10px); } }
.intro-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.intro-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3; }
.intro-ring .intro-ring-fill { stroke: url(#introGrad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 0.3s ease-out; filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.8)); }
.intro-name { display: flex; overflow: hidden; font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.04em; line-height: 1.1; padding-bottom: 0.1em; }
.intro-name span { display: inline-block; transform: translateY(115%); animation: intro-up 0.7s var(--ease) forwards; animation-delay: calc(0.3s + var(--i) * 65ms); }
.intro-name b { color: var(--orange); font-weight: 800; }
@keyframes intro-up { to { transform: none; } }
.intro-count { color: var(--mute); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.intro-count b { color: var(--text); font-weight: 800; }
.intro-wipe { position: absolute; inset: 0; background: var(--flame); transform: scaleY(0); transform-origin: 50% 100%; }
.js .intro.out { animation: intro-leave 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0.5s forwards; }
.intro.out .intro-wipe { animation: intro-wipe 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.intro.out .intro-core { animation: intro-core-out 0.4s ease forwards; }
@keyframes intro-wipe { to { transform: scaleY(1); } }
@keyframes intro-core-out { to { transform: scale(1.25); opacity: 0; } }
@keyframes intro-leave { to { transform: translateY(-100%); visibility: hidden; } }
html.intro-lock { overflow: hidden; }

/* ── Giriş: kaydırma işareti ──────────────────── */
.scroll-cue { display: grid; justify-items: center; gap: 10px; width: max-content; margin: clamp(26px, 5vw, 56px) auto 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); transition: color 0.25s; }
.scroll-cue:hover { color: var(--text); }
.scroll-cue i { position: relative; width: 1px; height: 46px; background: var(--line-2); overflow: hidden; order: 2; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: translateY(-100%); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 60%, 100% { transform: translateY(100%); } }
.calm .intro { display: none; }
/* Giriş telefonu: ekranın boş kalan alt kısmı kırpılır */
.phone.hero-shot { aspect-ratio: 9 / 17.4; }