/* ========== FONKSİYONLAB DESIGN TOKENS ========== */
:root {
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f1f5;
    --bg-elevated: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #8a8a9a;
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-glow: rgba(99, 102, 241, 0.4);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --graph-bg: #fafbfe;
    --grid-color: rgba(99, 102, 241, 0.25);
    --grid-major: rgba(99, 102, 241, 0.4);
    --axis-color: rgba(0, 0, 0, 0.7);
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

/* ========== SPLASH SCREEN ========== */
.splash-screen {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0b0e1a; overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0, 1), transform 0.6s cubic-bezier(0.4, 0, 0, 1);
}
.splash-screen.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-screen.hidden { display: none; }

.splash-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
    animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.splash-floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.splash-floater {
    position: absolute; font-family: 'JetBrains Mono', monospace;
    color: rgba(99,102,241,0.12); font-size: 14px; white-space: nowrap;
    animation: floatUp linear infinite;
}
.splash-floater:nth-child(1){left:8%;font-size:13px;animation-duration:18s;animation-delay:0s}
.splash-floater:nth-child(2){left:20%;font-size:11px;animation-duration:22s;animation-delay:-3s}
.splash-floater:nth-child(3){left:35%;font-size:15px;animation-duration:16s;animation-delay:-7s}
.splash-floater:nth-child(4){left:50%;font-size:12px;animation-duration:20s;animation-delay:-2s}
.splash-floater:nth-child(5){left:65%;font-size:14px;animation-duration:19s;animation-delay:-5s}
.splash-floater:nth-child(6){left:80%;font-size:11px;animation-duration:24s;animation-delay:-8s}
@keyframes floatUp { 0%{transform:translateY(110vh)rotate(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh)rotate(15deg);opacity:0} }

.splash-glow {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.08) 40%, transparent 70%);
    animation: glowBreathe 3s ease-in-out infinite; pointer-events: none;
}
@keyframes glowBreathe { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1.1);opacity:1} }

.splash-logo-container {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.splash-logo-mark { width: 90px; height: 90px; animation: logoAppear 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.splash-logo-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(99,102,241,0.5)); }
.splash-logo-mark .logo-wave { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawWave 1.2s cubic-bezier(0.4,0,0.2,1) 0.5s forwards; }
.splash-logo-mark .logo-axes { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawWave 0.6s cubic-bezier(0.4,0,0.2,1) 0.3s forwards; }
.splash-logo-mark .logo-dot { opacity: 0; animation: dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.4s forwards; }
@keyframes drawWave { to{stroke-dashoffset:0} }
@keyframes dotPop { 0%{opacity:0;transform:scale(0)} 100%{opacity:1;transform:scale(1)} }
@keyframes logoAppear { from{opacity:0;transform:scale(.5)rotate(-10deg)} to{opacity:1;transform:scale(1)rotate(0)} }

.splash-brand { display:flex;flex-direction:column;align-items:center;gap:6px; animation: brandSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.splash-brand-name { font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:800;letter-spacing:-1px; background:linear-gradient(135deg,#a5b4fc 0%,#818cf8 30%,#c084fc 70%,#e879f9 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.splash-brand-name span { -webkit-text-fill-color:rgba(255,255,255,0.5);font-weight:400 }
.splash-brand-sub { font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(165,180,252,0.5);letter-spacing:3px;text-transform:uppercase }
@keyframes brandSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.splash-loader { margin-top:40px;width:180px;display:flex;flex-direction:column;align-items:center;gap:12px;animation:loaderAppear .5s ease 1s both }
@keyframes loaderAppear { from{opacity:0} to{opacity:1} }
.splash-progress-track { width:100%;height:3px;background:rgba(99,102,241,0.15);border-radius:4px;overflow:hidden }
.splash-progress-bar { height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#a855f7,#6366f1);background-size:200% 100%;border-radius:4px;animation:progressShimmer 1.5s ease-in-out infinite;transition:width 0.5s cubic-bezier(0.4,0,0.2,1) }
@keyframes progressShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.splash-skip {
    margin-top: 16px; background: none; border: 1px solid rgba(165,180,252,0.2);
    color: rgba(165,180,252,0.5); padding: 6px 20px; border-radius: 20px;
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.2s ease; letter-spacing: 0.5px;
}
.splash-skip:hover { color: rgba(165,180,252,0.9); border-color: rgba(165,180,252,0.5); background: rgba(99,102,241,0.1); }
.splash-status { font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(165,180,252,0.4);letter-spacing:0.5px }