body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    position: relative; 
    overflow: hidden; 
    background-color: #111; 
}

body::before {
    content: "";
    position: fixed;
    top: -20px; 
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: url('Bir\ başlık\ eleyin.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.5); 
    z-index: -1; 
    transition: filter 1.5s ease;
}
body.loaded::before {
    filter: blur(2px) brightness(1);
}

.loader {
    position: relative;
    width: 130px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#171d8c, #3aa0ff),
    linear-gradient(#fff8f8, #414141), linear-gradient(#29f660, #c3ff36);
    background-size: 80px 70px, 30px 50px, 30px 30px;
    background-position: 0 0, 80px 20px, 100px 40px;
    z-index: 1;
    transition: transform 1s ease, opacity 1s ease; 
}

.loader.hide {
    transform: translateX(30px); 
    opacity: 0;
    pointer-events: none; 
}

.loader:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 12px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-sizing: content-box;
    border: 10px solid #000;
    box-shadow: 78px 0 0 -10px #fff, 78px 0 #000;
    animation: wheelSk 0.75s ease-in infinite alternate;
}

.loader:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 0px;
    height: 70px;
    width: 70px;
    background-image: linear-gradient(#fff 45px, transparent 0),
      linear-gradient(#fff 45px, transparent 0),
      linear-gradient(#fff 45px, transparent 0);
    background-repeat: no-repeat;
    background-size: 30px 4px;
    background-position: 0px 11px, 8px 35px, 0px 60px;
    animation: lineDropping 0.75s linear infinite;
}

@keyframes wheelSk {
    0%, 50%, 100% { transform: translatey(0) }
    30%, 90% { transform: translatey(-3px) }
}

@keyframes lineDropping {
    0% {
        background-position: 100px 11px, 115px 35px, 105px 60px;
        opacity: 1;
    }
    50% { background-position: 0px 11px, 20px 35px, 5px 60px }
    60% { background-position: -30px 11px, 0px 35px, -10px 60px }
    75%, 100% {
        background-position: -30px 11px, -30px 35px, -30px 60px;
        opacity: 0;
    }
}