.hero-image{
    background-image: 
    radial-gradient(circle farthest-side at center center, rgba(0,0,0,0.57) 40%, #000000 100%),
    linear-gradient(rgba(0, 0, 0, 0.488),rgba(0, 0, 0, 0.383)),url("img/hero-image.jpg");
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.nav-btn:focus{
    outline: 2px solid white !important;
}
.hero-image-content{
    height: 550px;
}


/* özel input tasarım */
.input-box{
    position: relative;
}
.input-box label{
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    transition: 0.3s all;
}
.input-box input:focus{
    outline: 2px solid white;
}
.input-box input:focus + label,
.input-box input:valid + label{
    top: 15px;
    font-size: 12px;



}

/* eğri yapı tasarım */
.cizgi-wrapper{
    background: radial-gradient(50% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
    position: absolute;
    width: 100%;
    height: 100px;
    border-top-left-radius: 75% 100%;
    border-top-right-radius: 75% 100%;
    bottom: -5px;
    z-index: 2;
}

.cizgi{
    width: 100%;
    height: 100px;
    position: absolute;
    background: linear-gradient(to right, rgba(33, 13, 22, 1) 16%, rgba(184, 40, 105, 1), rgba(229, 9, 20, 1), rgba(184, 40, 105, 1), rgba(33, 13, 22, 1) 84%);
    border-top-left-radius: 75% 100%;
    border-top-right-radius: 75% 100%;
    bottom: 0;
}

.icon-position{
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
}


/* TASARIM CLASLARI */
.mt-6{
    margin-top: 4%;
}
.px-6{
    padding-inline: 10%;
}
.fs-7{
    font-size: 14px;
}
.bg-kirmizi{
    background-color: #E50914;
}
.bg-input{
    background-color: #00000073;

}
.bg-blue{
    background: radial-gradient(50% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
    position: absolute;
}
.bg-mor{
    background: linear-gradient(149deg, #192247 0%, #210e17 96.86%)
}
.height{
    height: 325px !important;
}

.bg-oturum-kod{
    background-color: #343436a1;
}

/* Movie alanı */
.position{
    position: absolute;
    bottom: -20px;
    left: -15px;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white !important;
    color: black;
   
}
.img-wrapper{
    transition: 0.3s all;
    cursor: pointer;
}
.img-wrapper:hover{
    transform: scale(1.05);
}
.height-2{
    height: 350px;
}
.text-gri{
    color: #BBBBC2;
}

@media screen and (max-width:1000px) {
    .oturum{
        width: 50% !important;
    }
}

@media screen and (max-width:750px) {
    .hero-image{
        background-image: none !important;
        background-color: #000000 !important;
    }

    .oturum{
        width: 100% !important;
        background-color: black !important;
    }
}

@media screen and (max-width:900px) {
    .input-area{
        width: 100% !important;
        flex-direction: column;
        padding-inline: 5% !important ;
    }
}

@media screen and (max-width:450px) {
    .movie-wrapper{
        padding-inline: 20%;
    }

    .footer-oncesi{
        width: 100% !important;
    }
    
}

@media screen and (max-width:400px) {
    .input-area{
        width: 100% !important;
        flex-direction: column;
        padding-inline:5% !important ;
        align-items: start !important;
    }
}

/* sıkça sorulan sorular */
.bg-sss{
    background-color: #2D2D2D;
}

.accordion{
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0px;
}


.accordion-button::after {
    content: "+";
    font-size: 40px;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-button:not(.collapsed)::after {
    content: "-";
    background-image: none;
    font-size: 40px;
}
.accordion-button:not(.collapsed){
    background-color: #2D2D2D;
}

/* login sayfası */

.oturum{
    width: 32%;
    background-color: rgba(0, 0, 0, 0.585);
    margin: auto;
    margin-top: 30px;
    padding: 3%;
}

.checkbox{
    transform: scale(1.5);
}

.bg-oturum-footer{
    background-color: #161616;
}

/* profil sayfası */
.profiles-wrapper{
    min-height: 100vh; 
    background-color: #141414;
}

.profiles h3{
    letter-spacing: 3px;
}

.profiles .col-12 .img-wrapper-2{
    height: auto;
}


/* .profiles .col-12 .img-wrapper-2{
    height: 175px;
} */

.profil-ekle:hover .img-wrapper-2{
    background-color: white;
    border-radius: 5%;
}

.profil-ekle:hover .img-wrapper-2 span{
    color: white !important;
    padding-bottom: 10px;
    padding-top: 10px;
    
}

.profiles .col-12:hover .img-wrapper-2{
    outline: 2px solid white !important;
    border-radius: 5%;
    cursor: pointer;
}
.yuvarlak-icon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: grey;

}
.yuvarlak-icon span{
    color: black;
    font-size: 100px;
    line-height: 100px;
    margin-top: -20px;
    font-weight: 900;
}


@media screen and (max-width:575px){
    .profiles-wrapper{
        padding-top: 100px;
        padding-bottom: 100px;

    }
    .profiles{
        width: 60% !important;
    }
}


/* home page sayfa tasarımı */
.home-page{
    background-image: linear-gradient(rgba(0, 0, 0, 0.693),rgba(0, 0, 0, 0.551)), url("img/anasayfa-arkaplan.webp");
    min-height: 80vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
    
.fs-7{
    font-size: 14px !important;
}

.btn{
    --bs-btn-color:white !important;
}

.dropdown-menu{
    --bs-dropdown-link-hover-color: none;
    --bs-dropdown-link-hover-bg: none;
}

.bg-black-ozel{
    background-color: rgba(0, 0, 0, 0.802);
}
.dropdown-menu.show{
    width: 200px !important ;
}



.info-btn{
    background-color: rgba(0, 0, 0, 0.384);
}

.width-ozel {
    width: clamp(18.75rem, 100vw, 43.75rem); 
  }  

@media screen and (max-width:500px){
    .position-ozel{
        position: absolute;
        top: 40% !important;
        transform: translateY(-50%);
    }

    .position-ozel img{
        width: 100% !important;
        
    }

      /* .position-ozel p{ 
       display: none;   500pxden küçük ekranda açıklama kapanıyor
        
    } */
}



.bottom-35{
    bottom: 35%;
}


.ozel-text{
    font-size: clamp(0.75rem, 2vw, 1.25rem );
}


/* .padding-ozel{
    padding: clamp(0.5rem,2vw, 1.5rem);
} */

.ozel-boyut{
    font-size: 200px !important;
    line-height: 200px !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 5px grey;
}

.start-0{
    left: -40px !important;
}

.w-15{
    width: 30% !important;
}

@media screen and (max-width: 570px) {
    .col-12{
            height: 300px !important;
    }

    .col-12 img{
        height: 300px !important;
    }
    
}