.file-input-wrapper {
    position: relative;
    width: 200px;
    height: 50px;
    overflow: hidden;
    border-radius: 5px;
}

    .file-input-wrapper input[type="file"] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

.btn-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .btn-upload:hover {
        background-color: #2980b9;
    }








/* yorum yaparken girilen puan için yıldızlar */
:root {
    --primary-colour: #ffffff;
    --secondary-colour: hsl(38 90% 55%);
    --star-colour: hsl(38 90% 55%);
}

.conta {
 /*   position: relative;
    top: 50%;
    left: 50%;*/
    width: 225px;
    height: 20%;
    transform: rotateY(180deg);
}


.container .container__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    width: 100%;
    height: 100%;
}

    .container .container__items input {
        display: none;
    }

    .container .container__items label {
        width: 20%;
        aspect-ratio: 1;
        cursor: pointer;
    }

        .container .container__items label .star-stroke {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            background: var(--secondary-colour);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

            .container .container__items label .star-stroke .star-fill {
                width: 70%;
                aspect-ratio: 1;
                background: var(--primary-colour);
                clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            }

    .container .container__items input:hover ~ label .star-stroke, .container .container__items input:checked ~ label .star-stroke {
        background: var(--star-colour);
    }

        .container .container__items input:checked ~ label .star-stroke .star-fill {
            background: var(--star-colour);
        }

    .container .container__items label:hover .label-description::after {
        content: attr(data-content);
        position: fixed;
        left: 0;
        right: 0;
        margin-top: 1em;
        margin-inline: auto;
        width: 100%;
        height: 2em;
        color: #fff;
        text-align: center;
        font-size: 2rem;
        transform: rotateY(180deg);
    }



/* ortalama yorum puanı */
.star-ratings {
    unicode-bidi: bidi-override;
    color: #ccc;
    font-size: 64px;
    position: relative;
    margin: 0;
    padding: 0;
}

    .star-ratings .fill-ratings {
        color: #f4a825;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: block;
        top: 0;
        left: 0;
        overflow: hidden;
    }

        .star-ratings .fill-ratings span {
            display: inline-block;
        }

    .star-ratings .empty-ratings {
        padding: 0;
        display: block;
        z-index: 0;
    }


/*    @media(min-width:768px){
        .star-ratings {
            display: flex;
            width: 267px;
            align-items: center;
        }
    }*/




/* her bir yorum puanı */
.star-ratings-item {
    unicode-bidi: bidi-override;
    color: #ccc;
    font-size: 34px;
    position: relative;
    margin: 0;
    padding: 0;
}

    .star-ratings-item .fill-ratings-item {
        color: #f4a825;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: block;
        top: 0;
        left: 0;
        overflow: hidden;
    }

        .star-ratings-item .fill-ratings-item span {
            display: inline-block;
        }

    .star-ratings-item .empty-ratings-item {
        padding: 0;
        display: block;
        z-index: 0;
    }


#puanYorum {
    margin-top: -10px;
    margin-bottom: 40px;
}



    @media(min-width:1200px){
        #div-yildiz {
            display: inline-block;
            position: relative;
            top: 305px;
        }

        #a-img {
            position: relative;
            top: -52px;
        }

        /*.customImgDiv75 {
            top: -50px !important;
        }*/

        #h4-a a {
            position: relative;
            top: -55px;
        }

        #il-a {
            bottom: 98px;
        }


    }

@media(min-width:992px) and (max-width:1200px) {
    #div-yildiz {
        display: inline-block;
        position: relative;
        top: 265px;
    }

    #a-img {
        position: relative;
        top: -52px;
    }

    .customImgDiv75 {
        top: 0px !important;
    }

    #h4-a a {
        position: relative;
        top: -45px;
    }

    #il-a {
        bottom: 85px;
    }

    #h4-a {
        font-size: 18px;
    }

/*        #h4-a a {
            position: relative;
            top: -45px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }*/
}

@media(min-width:768px) and (max-width:992px) {
    #div-yildiz {
        display: inline-block;
        position: relative;
        top: 290px;
    }

    #a-img {
        position: relative;
        top: -52px;
    }

    .customImgDiv75 {
        top: 0px !important;
    }

    #h4-a a {
        position: relative;
        top: -45px;
        
    }

    #il-a {
        bottom: 112px;
    }

    #h4-a {
        font-size: 18px;
    }
}

@media(min-width:576px) and (max-width:768px) {
    #div-yildiz {
        display: inline-block;
        position: relative;
        top: 245px;
    }

    #a-img {
        position: relative;
        top: -52px;
    }

    .customImgDiv75 {
        top: 0px !important;
    }

    #h4-a a {
        position: relative;
        top: -45px;
    }

    #il-a {
        bottom: 132px;
    }

    #h4-a {
        font-size: 18px;
    }
}

@media(max-width:575px) {
    #div-yildiz {
        display: inline-block;
        position: relative;
        top: 295px;
    }

    #a-img {
        position: relative;
        top: -52px;
    }

    .customImgDiv75 {
        top: 0px !important;
    }

    #h4-a a {
        position: relative;
        top: -45px;
    }

    #il-a {
        bottom: 112px;
    }

    #h4-a {
        font-size: 18px;
    }
}