#loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #5a1e5c, #7b2f7e, #9b3a8f, #b2459d);
    background-size: 200% 200%;
    animation: bgMove 6s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

#loader.hide {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(8px);
    pointer-events: none;
}

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

/* WRAP */
.loader-wrap {
    width: 290px;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LOGO */
.loader-logo {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.30));
}

/* DOTS */
.dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: dotFlash 0.55s cubic-bezier(.22,.8,.2,1) forwards;
}

@keyframes dotFlash {
    0% {
        opacity: 0;
        transform: scale(0.15) translateY(18px);
        filter: blur(6px);
    }
    35% {
        opacity: 1;
        transform: scale(1.15) translateY(0);
        filter: blur(0);
    }
    60% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.85) translateY(-4px);
        filter: blur(4px);
    }
}

/* İlk akış: tek tek görün-kaybol */
.dot.d1  { animation-delay: 0.10s; }
.dot.d2  { animation-delay: 0.18s; }
.dot.d3  { animation-delay: 0.26s; }
.dot.d4  { animation-delay: 0.34s; }
.dot.d5  { animation-delay: 0.42s; }
.dot.d6  { animation-delay: 0.50s; }
.dot.d7  { animation-delay: 0.58s; }
.dot.d8  { animation-delay: 0.66s; }
.dot.d9  { animation-delay: 0.74s; }
.dot.d10 { animation-delay: 0.82s; }
.dot.d11 { animation-delay: 0.90s; }
.dot.d12 { animation-delay: 0.98s; }
.dot.d13 { animation-delay: 1.06s; }
.dot.d14 { animation-delay: 1.14s; }
.dot.d15 { animation-delay: 1.22s; }
.dot.d16 { animation-delay: 1.30s; }
.dot.d17 { animation-delay: 1.38s; }
.dot.d18 { animation-delay: 1.46s; }

.logo-letter {
    opacity: 0;
    transform-origin: center;
    animation: letterCinematic 0.95s ease forwards;
    animation-delay: 1.90s;
}

@keyframes letterCinematic {
    0% {
        opacity: 0;
        transform: scale(0.65);
        filter: blur(10px);
    }
    55% {
        opacity: 1;
        transform: scale(1.06);
        filter: blur(0);
    }
    75% {
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.dot.final-show {
    animation: dotFinal 0.8s ease forwards;
}

@keyframes dotFinal {
    0% {
        opacity: 0;
        transform: scale(0.3);
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: scale(1.08);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* DEMO CONTENT */
.page-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}