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

html{
    scroll-behavior: smooth; /* yumuşak sayfa içi link geçişleri için */
    font-size: 2.2svh;
}

body{
    background-color: rgb(228, 228, 228);
    font-family: "Poppins", sans-serif;
}

.product-path{
    width: 100%;
    height: auto;
    background-color: rgb(10,10,10);
    color: white;
    padding: 2.5svh;
    font-size: 2svh;
    text-align: center;
}

.product-container-desktop{
    display: none;
}

.product-container{
    width: 80%;
    height: auto;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    margin-top: 4svh;
    margin-bottom: 8svh;
}

.product-image{
    width: 100%;
    height: 38svh;
    background: linear-gradient(rgb(172, 172, 172), rgb(209, 209, 209));
    border-radius: 8%;
}

.product-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-name{
    width: 100%;
    height: auto;
    padding-top: 3svh;
    font-weight: 500;
    margin-bottom: 4svh;
}

.product-price{
    width: 100%;
    height: auto;
    font-size: 2.2svh;
    font-weight: 600;
    color: rgb(255, 115, 0);
}

.product-price span{
    color: rgb(36, 36, 36);
    font-weight: 500;
}

.miktar{
    width: 100%;
    height: auto;
    padding-top: 1.5svh;
}

.miktar span{
    font-weight: 500;
    color: rgb(36, 36, 36);
}

.content{
    width: 100%;
    height: auto;
    padding-top: 1.5svh;
    padding-bottom: 6svh;
}

.content span{
    font-weight: 500;
    color: rgb(36,36,36);
}

.description{
    width: 100%;
    height: auto;
    background-color: rgb(206, 206, 206);
    padding: 2svh;
    border-top-left-radius: 2svh;
    border-top-right-radius: 2svh;
    border-bottom-left-radius: 1svh;
    border-bottom-right-radius: 1svh;
}

.description p{
    font-weight: 500;
    padding-bottom: 2svh;
}

.adet-title{
    width: 80%;
    height: auto;
    font-weight: 500;
    margin-top: 8svh;
    margin-bottom: 2svh;
}

#miktarform{
    width: 100%;
    height: auto;
    margin-bottom: 10svh;
}

.adet-input-container{
    width: 50%;
    height: 7svh;
    display: flex;
    flex-direction: row;
    border: 2px solid rgb(199, 199, 199);
    border-radius: 2svh;
    margin-bottom: 3svh;
}

.adet-input-container input{
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    text-align: center;
    background-color: rgb(224, 224, 224);
    font-size: 2.3svh;
}

.adet-input-container button{
    width: 25%;
    height: 100%;
    border: none;
    background-color: rgb(224, 224, 224);
    font-size: 2.4svh;
}

.adet-input-container button:first-child{
    border-top-left-radius: 2svh;
    border-bottom-left-radius: 2svh;
}

.adet-input-container button:last-child{
    border-top-right-radius: 2svh;
    border-bottom-right-radius: 2svh;
}

#sbmt{
    width: 100%;
    height: auto;
    border: 2px solid gray;
    background-color: rgb(10,10,10);
    color: white;
    font-weight: bold;
    font-size: 2.6svh;
    padding: 2svh;
    border-radius: 2svh;
}

footer{
    width: 100%;
    height: auto;
    color: white;
    background-color: rgb(10, 148, 10);
    font-size: 1.8svh;
    font-weight: 500;
    text-align: center;
    padding: 3svh 0;
}

@media screen and (min-width:800px) {

    html{
        font-size: 1.7vh;
    }

    .product-path{
        font-size: 1.8vh;
    }

    .product-container{
        display: none;
    }

    .product-container-desktop{
        display: flex;
        flex-direction: row;
        width: 80%;
        margin-left: 10%;
        height: auto;
        padding: 8vh 0;
        align-items: center;
    }

    .product-image-desktop{
        width: 30%;
        height: 50vh;
        background: linear-gradient(rgb(172, 172, 172), rgb(209, 209, 209));
        border-radius: 3vh;
        margin-right: 5%;
    }

    .product-image-desktop img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-detail-desktop{
        width: 30%;
        height: auto;
    }

    .product-name-desktop{
        font-size: 1.8vh;
        font-weight: 500;
        color: rgb(20,20,20);
        margin-bottom: 5vh;
    }

    .product-price-desktop{
        width: 100%;
        height: auto;
        font-size: 1.7vh;
        font-weight: 600;
        color: rgb(255, 115, 0);
        margin-bottom: 1vh;
    }

    .product-price-desktop span{
        color: rgb(49, 49, 49);
    }

    .miktar-desktop{
        width: 100%;
        height: auto;
        margin-bottom: 1vh;
    }

    .miktar-desktop span{
        font-weight: 600;
        color: rgb(49, 49, 49);
    }

    .content-desktop{
        width: 100%;
        height: auto;
        margin-bottom: 6vh;
    }

    .content-desktop span{
        color: rgb(49, 49, 49);
        font-weight: 600;
    }

    .adet-title-desktop{
        width: 100%;
        height: auto;
        color: rgb(49, 49, 49);
        font-weight: 600;
        margin-bottom: 2vh;
    }

    #miktarform-desktop{
        width: 100%;
        height: auto;
    }

    .adet-input-container-desktop{
        width: 50%;
        height: 5vh;
        display: flex;
        flex-direction: row;
        border: 2px solid rgb(199, 199, 199);
        border-radius: 1vh;
        margin-bottom: 3vh;
    }

    .adet-input-container-desktop input{
        width: 50%;
        height: 100%;
        border: none;
        outline: none;
        text-align: center;
        background-color: rgb(224, 224, 224);
        font-size: 1.8vh;
    }

    .adet-input-container-desktop button{
        width: 25%;
        height: 100%;
        border: none;
        background-color: rgb(224, 224, 224);
        font-size: 2vh;
    }

    .adet-input-container-desktop button:first-child{
        border-top-left-radius: 1vh;
        border-bottom-left-radius: 1vh;
    }

    .adet-input-container-desktop button:last-child{
        border-top-right-radius: 1vh;
        border-bottom-right-radius: 1vh;
    }

    #sbmt-desktop{
        width: 100%;
        height: auto;
        color: white;
        border: 2px solid gray;
        background-color: rgb(10,10,10);
        font-weight: bold;
        font-size: 2vh;
        padding: 2vh;
        border-radius: 1vh;
        cursor: pointer;
    }

    .description-desktop{
        width: 29%;
        margin-left: 6%;
        height: auto;
        background-color: rgb(190, 190, 190);
        padding: 6vh 3vh;
        border-top-left-radius: 1vh;
        border-top-right-radius: 1vh;
        border-bottom-left-radius: 0.5vh;
        border-bottom-right-radius: 0.5vh;
    }

    .description-desktop p{
        font-weight: 600;
        padding-bottom: 2vh;
    }

    footer{
        font-size: 1.5vh;
        padding: 2vh 0;
    }
}