.popular-container {
     position: relative;
     display: inline-block;
 }
 .popular-container img {
     display: block;
     width: 100%;
     height: auto;
 }
 .popular {
     position: absolute;
     top: -12px;
     left: 38px;
     border-radius: 2px;
     background: #F35F39;
     padding: 5px 10px;
     opacity: 1;
     transform: scale(0.7); /* Pop-up animasyonu için başlangıç noktası */
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     text-align: center;
     font-family: Roboto;
     font-size: 9px;
     font-style: normal;
     font-weight: 700;
     text-transform: uppercase;
 }
 .popular-container:hover .popular {
     opacity: 1;
     transform: scale(1);
 }




@media only screen and (max-width: 600px) {
    .popular {
        position: absolute;
        top: -0px;
        left: 158px;
        border-radius: 2px;
        background: #f35f39;
        color: #fff;
        padding: 0px 10px;
        opacity: 1;
        transform: scale(0.7); /* Pop-up animasyonu için başlangıç noktası */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        text-align: center;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
    }
    .popular-container:hover .popular {
        opacity: 1;
        transform: scale(0.7); /* Pop-up animasyonu için bitiş noktası */
    }
}