/* =========================================================
   Açılış sahnesi (sadece ana sayfa, oturum başına bir kez)
   ========================================================= */
.intro { display: none; }
.intro-on .intro, .intro.playing {
    display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden;
    background: #04040a; cursor: pointer; color-scheme: dark;
    transition: opacity .8s ease, visibility .8s;
}
.intro.out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.out.fast { transition-duration: .35s; }
html.intro-on, html.intro-on body { overflow: hidden; }

.intro-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.intro-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0, 0, 0, .78) 100%);
    transition: opacity 1.2s ease;
}
.intro.zoom .intro-vignette { opacity: .25; }

/* Sinema şeritleri */
.intro-bars i {
    position: absolute; left: 0; right: 0; height: 9vh; background: #000; pointer-events: none;
    transition: transform 1.1s cubic-bezier(.7, 0, .2, 1);
}
.intro-bars i:first-child { top: 0; }
.intro-bars i:last-child { bottom: 0; }
.intro.zoom .intro-bars i:first-child { transform: translateY(-100%); }
.intro.zoom .intro-bars i:last-child { transform: translateY(100%); }

.intro-rec, .intro-caption, .intro-skip {
    position: absolute; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    transition: opacity .6s ease;
}
.intro.zoom .intro-rec, .intro.zoom .intro-caption { opacity: 0; }

.intro-rec {
    top: calc(9vh + 16px); left: clamp(16px, 4vw, 48px);
    display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .14em; color: #e8e6ff;
}
.intro-rec span { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; animation: i-blink 1s steps(1) infinite; }
.intro-rec b { font-weight: 400; color: #9b99b3; }

.intro-caption {
    left: clamp(16px, 4vw, 48px); bottom: calc(9vh + 18px); margin: 0;
    font-size: clamp(.78rem, 1.4vw, .98rem); letter-spacing: .06em; color: #dfe2ff;
    text-shadow: 0 0 14px rgba(124, 92, 255, .65);
}
.intro-caption p { margin: .25rem 0; min-height: 1.4em; }
.intro-caption p + p { color: #8f93ba; font-size: .9em; }

.intro-skip {
    right: clamp(16px, 4vw, 48px); bottom: calc(9vh + 16px);
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 999px; cursor: pointer;
    font-size: .75rem; letter-spacing: .06em; color: #e8e6ff;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
}
.intro-skip:hover { border-color: #7c5cff; background: rgba(124, 92, 255, .2); }
.intro.out .intro-skip { opacity: 0; }

.intro-black { position: absolute; inset: 0; background: #000; pointer-events: none; animation: i-fade-in 1.2s ease .1s forwards; }

/* Sahne içi hareketler */
.intro .i-rain line { animation: i-rain .7s linear infinite; }
.intro .i-steam path { animation: i-steam 3.2s ease-in-out infinite; }
.intro .i-neon { animation: i-neon 4s linear infinite; }
.intro .i-bias { animation: i-flicker 3.4s ease-in-out infinite; }
.intro .i-term { animation: i-term 2.6s steps(13) infinite; }
.intro .i-bar { transform-box: fill-box; transform-origin: bottom; animation: i-bar 1.6s ease-in-out infinite alternate; }
.intro .i-dust circle { animation: i-dust 7s ease-in-out infinite alternate; }
.intro .i-cursor { animation: i-blink .9s steps(1) infinite; }
.intro .i-led { animation: i-blink 2.4s ease-in-out infinite; }
.intro .i-arm-l { animation: i-type .16s ease-in-out infinite alternate; }
.intro .i-arm-r { animation: i-type .19s ease-in-out infinite alternate-reverse; }
.intro.typed .i-arm-l, .intro.typed .i-arm-r { animation: none; }

/* Kod renkleri (ana sayfadaki kod penceresiyle aynı palet) */
.intro .ln { fill: #3d4466; font-size: 7.5px; }
.intro .k { fill: #c792ea; }
.intro .t { fill: #ffcb6b; }
.intro .s { fill: #c3e88d; }
.intro .f { fill: #82aaff; }
.intro .c { fill: #5f6890; font-style: italic; }
.intro .p { fill: #d6deeb; }
.intro .o { fill: #89ddff; }

@keyframes i-fade-in { to { opacity: 0; } }
@keyframes i-blink { 50% { opacity: 0; } }
@keyframes i-rain { from { transform: translateY(-60px); } to { transform: translateY(380px); } }
@keyframes i-steam {
    0% { transform: translateY(8px); opacity: 0; }
    35% { opacity: .55; }
    100% { transform: translateY(-26px); opacity: 0; }
}
@keyframes i-neon {
    0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
    20%, 63% { opacity: .35; }
}
@keyframes i-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes i-term { to { transform: translateY(-130px); } }
@keyframes i-bar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes i-dust { to { transform: translate(18px, -26px); } }
@keyframes i-type { to { transform: translateY(2.5px); } }

@media (max-width: 640px) {
    .intro-bars i { height: 7vh; }
    .intro-rec { top: calc(7vh + 12px); }
    .intro-caption { bottom: calc(7vh + 64px); }
    .intro-skip { bottom: calc(7vh + 14px); }
}