*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    overflow:hidden;
    height:100vh;
    font-family:'Poppins',sans-serif;
    background:#050505;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:none;
}

/* BACKGROUND */

.bg{
    position:fixed;
    width:100%;
    height:100%;
    background:
    radial-gradient(circle at top,#ff005530 0%,transparent 30%),
    radial-gradient(circle at bottom,#7b00ff25 0%,transparent 40%),
    linear-gradient(135deg,#050505,#0a0a0a,#120012);
}
.footer:hover{
    opacity:1;
    letter-spacing:4px;
    transition:.3s;
}
/* STARS */
/* INTRO SCREEN */

.intro{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(25px);

    transition:
    opacity 1.2s ease,
    visibility 1.2s ease,
    backdrop-filter 1.2s ease;

}

/* HIDDEN */

.intro.hide{

    opacity:0;

    visibility:hidden;

    backdrop-filter:blur(0px);
}

/* CONTENT */

.intro-content{

    text-align:center;

    animation:introFloat 3s ease-in-out infinite;
}

@keyframes introFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }
}

.intro-content h1{

    font-size:5rem;

    color:white;

    text-shadow:
        0 0 15px #ff0055,
        0 0 40px #ff0055;
}

.intro-content h2{

    margin-top:10px;

    color:white;

    font-size:2rem;

    letter-spacing:5px;

    text-transform:uppercase;

    text-shadow:
        0 0 10px #ff0055;
}

.intro-content p{

    margin-top:10px;

    color:#ffb3c6;

    letter-spacing:4px;

    font-size:.9rem;
}
.footer{
    position:fixed;
    bottom:15px;
    width:100%;
    text-align:center;

    font-size:.8rem;
    letter-spacing:3px;

    color:#000; /* siyah */

    opacity:.6;

    z-index:9999;

    user-select:none;

    text-shadow:0 0 1px rgba(0,0,0,.2);
}

.stars{
    position:fixed;
    width:100%;
    height:100%;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    background:white;
    border-radius:50%;
    animation:twinkle linear infinite;
}

@keyframes twinkle{

    0%,100%{
        opacity:.2;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(2);
    }
}

/* MAIN */

.container{
    position:relative;
    z-index:10;
    text-align:center;
}

/* TITLE */

.title{

    font-size:7rem;
    font-weight:900;
    color:white;
    letter-spacing:10px;

    text-shadow:
        0 0 10px #ff0055,
        0 0 30px #ff0055,
        0 0 60px #ff0055;

    animation:pulse 2s infinite alternate;
}

@keyframes pulse{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.04);
    }
}

.subtitle{

    margin-top:15px;

    color:#ffb3c6;

    letter-spacing:8px;

    font-size:1rem;
}

/* PLAYER */

.player{

    width:420px;

    margin-top:50px;

    padding:18px;

    border-radius:28px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    display:flex;
    align-items:center;
    gap:18px;

    box-shadow:
        0 0 30px rgba(255,0,85,.25);
}

/* COVER */

.cover{

    width:95px;
    height:95px;

    border-radius:20px;

    overflow:hidden;
}

.cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    animation:rotate 10s linear infinite;
    animation-play-state:paused;
}

.cover.playing img{
    animation-play-state:running;
}

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* INFO */

.info{
    flex:1;
    text-align:left;
}

.info h2{
    color:white;
    font-size:1.1rem;
}

.info p{

    color:#ffb3c6;

    margin-top:5px;

    font-size:.85rem;
}

/* PROGRESS */

.progress-area{

    width:100%;
    height:6px;

    margin-top:15px;

    background:rgba(255,255,255,.1);

    border-radius:50px;

    overflow:hidden;
}

.progress{

    width:0%;
    height:100%;

    background:linear-gradient(90deg,#ff0055,#ff4da6);

    border-radius:50px;

    box-shadow:
        0 0 10px #ff0055;
}

/* CONTROLS */

.controls{

    margin-top:18px;
}

.controls button{

    width:50px;
    height:50px;

    border:none;
    border-radius:50%;

    background:#ff0055;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 0 20px #ff0055;
}

.controls button:hover{

    transform:scale(1.1);

    box-shadow:
        0 0 35px #ff0055;
}

/* FLOATING HEART */

.heart{

    position:absolute;

    width:20px;
    height:20px;

    background:#ff0055;

    transform:rotate(-45deg);

    animation:float linear forwards;

    box-shadow:
        0 0 15px #ff0055;
}

.heart::before,
.heart::after{

    content:'';

    position:absolute;

    width:100%;
    height:100%;

    background:#ff0055;

    border-radius:50%;
}

.heart::before{
    top:-50%;
}

.heart::after{
    left:50%;
}

@keyframes float{

    0%{
        transform:
        translateY(0)
        rotate(-45deg)
        scale(.5);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:
        translateY(-120vh)
        rotate(360deg)
        scale(1.5);

        opacity:0;
    }
}

/* CURSOR */

.cursor{

    position:fixed;

    width:28px;
    height:28px;

    background:#ff0055;

    transform:
    translate(-50%,-50%)
    rotate(-45deg);

    pointer-events:none;

    z-index:9999;

    box-shadow:
        0 0 15px #ff0055,
        0 0 35px #ff0055;
}

.cursor::before,
.cursor::after{

    content:'';

    position:absolute;

    width:100%;
    height:100%;

    background:#ff0055;

    border-radius:50%;
}

.cursor::before{
    top:-50%;
}

.cursor::after{
    left:50%;
}

/* MOBILE */

@media(max-width:700px){

    .title{
        font-size:3rem;
        letter-spacing:4px;
    }

    .player{

        width:95%;

        flex-direction:column;

        text-align:center;
    }

    .info{
        text-align:center;
    }
}