/* ============================================================
   JOI_WHR — NEON / VIBRANT TEMA + ZENGİN ANİMASYONLAR
   ============================================================ */

:root {
    /* Yüzeyler — hafif lavender tonlu */
    --bg-0: #f0f1ff;
    --bg-1: #ffffff;
    --bg-2: #ffffff;
    --bg-3: #ebedff;
    --line: #e0e3f5;
    --text: #0a0e29;
    --muted: #5e6a8a;

    /* Neon vurgu */
    --accent:   #7c3aed;   /* electric purple */
    --accent-2: #06b6d4;   /* electric cyan */
    --accent-3: #f43f5e;   /* hot pink */
    --accent-4: #f59e0b;   /* amber */

    /* Multi-stop gradient'lar */
    --grad-primary: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 25%, #ec4899 70%, #f59e0b 100%);
    --grad-primary-anim: linear-gradient(120deg, #7c3aed, #8b5cf6, #ec4899, #f59e0b, #06b6d4, #7c3aed);
    --grad-success: linear-gradient(135deg, #10b981 0%, #34d399 50%, #84cc16 100%);
    --grad-warn:    linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #facc15 100%);
    --grad-danger:  linear-gradient(135deg, #f43f5e 0%, #ef4444 50%, #f97316 100%);
    --grad-info:    linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #22d3ee 100%);
    --grad-cyan:    linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%);
    --grad-rose:    linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #d946ef 100%);
    --grad-emerald: linear-gradient(135deg, #14b8a6 0%, #10b981 50%, #84cc16 100%);
    --grad-sunset:  linear-gradient(135deg, #f43f5e 0%, #f97316 50%, #fbbf24 100%);

    /* Conic için renk çemberi */
    --conic-ring: conic-gradient(from 0deg, #7c3aed, #ec4899, #f59e0b, #06b6d4, #10b981, #7c3aed);

    /* Durum (neon) */
    --success: #10b981;
    --warn: #f59e0b;
    --danger: #f43f5e;
    --info: #3b82f6;
    --purple: #a855f7;
    --teal: #14b8a6;
    --indigo: #6366f1;
    --pink: #ec4899;
    --gold: #ca8a04;
    --lime: #84cc16;

    /* Renkli gölgeler */
    --shadow-sm: 0 2px 6px rgba(15,23,42,0.06);
    --shadow-md: 0 8px 24px rgba(124,58,237,0.14), 0 2px 6px rgba(236,72,153,0.08);
    --shadow-lg: 0 24px 56px rgba(124,58,237,0.22), 0 6px 18px rgba(236,72,153,0.12);
    --glow-accent: 0 0 0 4px rgba(124, 58, 237, 0.22);
    --glow-pink:   0 0 0 4px rgba(236, 72, 153, 0.18);
    --glow-cyan:   0 0 0 4px rgba(6, 182, 212, 0.18);

    /* Geri-uyum */
    --joi-primary: var(--accent);
    --joi-primary-dark: var(--indigo);
    --joi-accent: var(--accent-2);
    --joi-bg: var(--bg-0);
    --joi-surface: var(--bg-1);
    --joi-text: var(--text);
    --joi-text-muted: var(--muted);
    --joi-border: var(--line);
    --joi-shadow: var(--shadow-md);
}

[data-theme='dark'] {
    --bg-0: #07091e;
    --bg-1: #0f1335;
    --bg-3: #161d4a;
    --line: #232a5a;
    --text: #e6ebf5;
    --muted: #a3aed0;
}

* { box-sizing: border-box; }

/* ====== ANIMATED BACKGROUND ====== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    position: relative;
}

body {
    background: var(--bg-0);
}

/* Hareketli renk lekeleri (z=-1, hareket eden mor/pembe/cyan blob'lar) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(700px 500px at 0% 0%,   rgba(124,58,237,0.22), transparent 60%),
        radial-gradient(700px 500px at 100% 0%, rgba(236,72,153,0.16), transparent 60%),
        radial-gradient(800px 600px at 50% 100%, rgba(6,182,212,0.12), transparent 60%);
    animation: bg-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(400px 300px at 80% 30%, rgba(245,158,11,0.10), transparent 60%),
        radial-gradient(400px 300px at 20% 70%, rgba(132,204,22,0.08), transparent 60%);
    animation: bg-drift 24s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   ANİMASYON KEYFRAME'LERİ — daha fazla
   ============================================================ */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes pop-in {
    0%   { opacity: 0; transform: scale(0.90); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.0); }
    50%      { box-shadow: 0 0 30px 6px rgba(124,58,237,0.30); }
}

@keyframes spin-soft {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes gradient-x {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

@keyframes bg-drift {
    0%   { transform: translate(0,    0   ) scale(1); }
    33%  { transform: translate(-30px, 20px) scale(1.05); }
    66%  { transform: translate(25px, -15px) scale(1.02); }
    100% { transform: translate(0,    0   ) scale(1); }
}

@keyframes conic-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(124,58,237,0.50); }
    70%  { box-shadow: 0 0 0 16px rgba(124,58,237,0.00); }
    100% { box-shadow: 0 0 0 0   rgba(124,58,237,0.00); }
}

@keyframes color-cycle {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-3deg); }
    75%      { transform: rotate(3deg); }
}

@keyframes glow-pulse-shadow {
    0%, 100% { box-shadow: 0 8px 20px rgba(124,58,237,0.25); }
    50%      { box-shadow: 0 12px 28px rgba(236,72,153,0.40); }
}

/* Stagger gecikmeleri */
.anim-stagger > * {
    opacity: 0;
    animation: fade-up .5s cubic-bezier(.16,1,.3,1) forwards;
}
.anim-stagger > *:nth-child(1)  { animation-delay: 0.02s; }
.anim-stagger > *:nth-child(2)  { animation-delay: 0.05s; }
.anim-stagger > *:nth-child(3)  { animation-delay: 0.08s; }
.anim-stagger > *:nth-child(4)  { animation-delay: 0.11s; }
.anim-stagger > *:nth-child(5)  { animation-delay: 0.14s; }
.anim-stagger > *:nth-child(6)  { animation-delay: 0.17s; }
.anim-stagger > *:nth-child(7)  { animation-delay: 0.20s; }
.anim-stagger > *:nth-child(8)  { animation-delay: 0.23s; }
.anim-stagger > *:nth-child(9)  { animation-delay: 0.26s; }
.anim-stagger > *:nth-child(10) { animation-delay: 0.29s; }
.anim-stagger > *:nth-child(n+11){ animation-delay: 0.32s; }

/* Scrollbar — renkli */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c4b5fd, #a78bfa, #f0abfc);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6, #ec4899);
}
::-webkit-scrollbar-track { background: transparent; }

/* Gradient text — animasyonlu */
.text-grad {
    background: var(--grad-primary-anim);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradient-x 8s ease-in-out infinite;
}

/* Selection */
::selection { background: rgba(124,58,237,0.35); color: var(--text); }