/* ===================================== */
/* RESET */
/* ===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#f6f7fb;
    color:#222;

}

/* ===================================== */
/* CONTAINER */
/* ===================================== */

.container{

    width:90%;
    max-width:1500px;
    margin:auto;
    padding:50px 0;

}

/* ===================================== */
/* KATEGORİ BAŞLIKLARI */
/* ===================================== */

.products{

    margin-bottom:80px;

}

.section-header{

    margin-bottom:30px;

}

.section-header h2{

    font-size:34px;
    font-weight:700;
    color:#222;
    position:relative;
    display:inline-block;

}

.section-header h2::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-10px;

    width:70px;
    height:4px;

    border-radius:50px;

    background:#d4a017;

}

/* ===================================== */
/* ÜRÜNLER */
/* ===================================== */

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:30px;

}

/* ===================================== */
/* ÜRÜN KARTI */
/* ===================================== */

.card{

    background:#fff;

    border-radius:25px;

    padding:20px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/* ===================================== */
/* RESİM */
/* ===================================== */

.card img{

    width:100%;

    height:200px;

    object-fit:contain;

    margin-bottom:20px;

    transition:.35s;

}

.card:hover img{

    transform:scale(1.05);

}

/* ===================================== */
/* BAŞLIK */
/* ===================================== */

.card h3{

    font-size:24px;

    font-weight:600;

    margin-bottom:10px;

    color:#222;

}

/* ===================================== */
/* AÇIKLAMA */
/* ===================================== */

.card p{

    color:#777;

    font-size:15px;

    line-height:24px;

    min-height:60px;

    margin-bottom:20px;

}

/* ===================================== */
/* FİYAT */
/* ===================================== */

.card h2{

    font-size:34px;

    font-weight:700;

    color:#d4a017;

    margin-bottom:20px;

}

/* ===================================== */
/* BUTON */
/* ===================================== */

.card button{

    margin-top:auto;

    width:100%;

    height:55px;

    border:none;

    border-radius:50px;

    background:#d4a017;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.30s;

}

.card button:hover{

    background:#b88800;

    transform:translateY(-2px);

}

.card button i{

    font-size:18px;

}

/* ===================================== */
/* TELEFON */
/* ===================================== */

@media(max-width:768px){

.container{

    width:95%;

}

.section-header h2{

    font-size:28px;

}

.product-grid{

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.card{

    padding:15px;

}

.card img{

    height:140px;

}

.card h3{

    font-size:18px;

}

.card p{

    font-size:13px;

    min-height:50px;

}

.card h2{

    font-size:24px;

}

.card button{

    height:45px;

    font-size:14px;

}

}

@media(max-width:500px){

.product-grid{

    grid-template-columns:1fr;

}

}