html,body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

ul{
    padding: 0;
    margin: 0;
}
li{
    padding: 0;
    list-style: none;
}

.container{
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
    display: flex;
}

.w-10{
    width: 10%;
}
.w-45{
    width: 45%;
}

.flex-grow{
    flex: 1;
}

:root {
    --bg: hsl(246 44% 4%);
    --card-bg: hsl(235 40% 2%);
    --color: hsl(240 18% 80%);

    --border-size: 3px;
    --card-size: 100%;
    --border-radius: 20px;
    --outer-border-radius: 22px;
    --shadow: 0 10px 20px black;
    --spotlight-size: 250;

    --active: 1;

    --hue-val: 0;
    --hue-sat: 25;
    --hue-lum: 150;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

@layer base, card;

@layer base {
    body {
        font-family: sans-serif;
        color: var(--color);
        background: var(--bg);
    }
}

@layer cards {
    .card-1 {
        --hue-val: 220;
    }

    .card-2 {
        --hue-val: 50;
    }

    .card-3 {
        --hue-val: 170;
    }

    .card {
        --alpha: calc(var(--active, 0) * 0.15);
        --radial-bg: radial-gradient(
                circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
                hsl(
                        var(--hue-val, 240) calc(var(--hue-sat, 0) * 1%)
                        calc(var(--hue-lum, 100) * 1%) / var(--alpha)
                ),
                transparent calc(var(--spotlight-size) * 1px)
        );
        background: var(--radial-bg), var(--card-bg);
        background-attachment: fixed;

    }
    .card::before, .card::after{
        flex-grow: 1;
        content: "";
        inset: var(--border-size);
        z-index: 1;
        border-radius: var(--outer-border-radius);

        display: block;
        background: rgba(255, 255, 255, 0.06) radial-gradient(
                circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
                hsl(
                        var(--hue-val, 240) calc(var(--hue-sat, 0) * 1.5%) calc(var(--hue-lum, 100) * 1.5%) / 0.5
                ),
                transparent calc(var(--spotlight-size) * 1px)
        ) fixed;

    }
}
.logo{
    width: 360px;
    height: 360px;
    z-index: 999;
}

.cover{
    background-color: #010a16;
    max-width: calc(50% - 1px);
}



.middle-line{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.middle-separator{
    width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.card.middle-separator::before,
.card.middle-separator::after{
    width: 1px;
}



.social-media-container ul{
    display: flex;
}
.social-media-container li{
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-media-container li a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-media-container .card{
    --hue-val: 50;
    position: relative;
    border-radius: var(--outer-border-radius);
}
.social-media-container .card .card-content{
    background-color: var(--card-bg);
    width: 100%;
    height: 100%;
}

.social-media-container .separator{
    width: 1px;
    height: 2rem;

}

.social-media-container .card::before,
.social-media-container .card::after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.social-media-container .card-content{
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}
.social-media-container{
}

.social-media-container li:not(.list-separator) {
    height: 4rem;
    flex-grow: 1;
}

.social-media-container svg{
    width: 1.5rem;
    height: 1.5rem;
    fill: rgba(255,255,255,0.2);
}

.social-media-container li:hover{
    box-shadow: rgba(255,255,255,0.51) 0px 10px 10px -12px inset, rgba(255,255,255,0.3) 0px 18px 18px -18px inset;
}

.social-media-container li:hover svg{
    fill: rgba(255,255,255,0.7);
}
.social-media-container li.instagram:hover svg{
    fill: rgba(255,0,105,0.7);
}
.social-media-container li.youtube:hover svg{
    fill: rgba(255,0,105,0.7);
}
.social-media-container li.spotify:hover svg{
    fill: rgba(30,215,96,0.7);
}
.social-media-container li.apple-music:hover svg{
    fill: rgba(250,36,60,0.7);
}
.social-media-container li.soundcloud:hover svg{
    fill: rgba(255,85,0,0.7);
}
.social-media-container li.twitch:hover svg{
    fill: rgba(145,70,255,0.7);
}
.social-media-container li.kick:hover svg{
    fill: rgba(83,252,25,0.7);
}
.social-media-container li.tiktok:hover svg{
    fill: rgba(0, 242, 234,0.7);
}
.social-media-container li.email:hover svg{
    fill: rgb(124, 32, 7);
}

.right-side{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.releases-content{
    flex: 1;
    margin: 1rem 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
footer{
    opacity: 0.4;
    margin: 0 1rem 1rem;
    font-size: 12px;
}

.owl-carousel .owl-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 100vh;
}

.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item,
.owl-carousel .item {
    height: 100%;
}

.owl-carousel .item img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Taşmadan kırpma */
}

.owl-dots{
    position: absolute;
    width: 100%;
    bottom: 1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.owl-dots button{
    width: 0.8rem;
    height: 0.8rem;
    background: rgba(255,255,255,0.3) !important;
    border-radius: 50%;
    margin: 0 0.4rem;
}
.owl-dots button.active{
    background: rgba(255,255,255,0.8) !important;
}

@media screen and (max-width: 960px) {
    .container{
        flex-direction: column;
    }
    .cover{
        max-width: 100%;
    }
    .releases-content{
        margin: 1rem 2rem;
    }
    .owl-carousel{
        height: calc(50vh + 2.8rem);

    }
    .middle-separator{
        width: 100%;
        height: 1px;
        flex-direction: row;
    }
    .middle-line-container{
        width: 100%;
        height: 0;
    }
    .card.middle-separator::before, .card.middle-separator::after{
        width: 100%;
        height: 1px;
    }
    .logo{
        width: 240px;
        height: 240px;
    }
    .owl-dots{
        width: 1rem;
        height: 100%;
        right: 1rem;
        flex-direction: column;
    }
    .owl-dots button{
        margin: 0.4rem 0;
    }
    .right-side{
        margin-top: 120px;
    }
}