/* =====================================================
   PRODUCT PAGE
===================================================== */

.product-wrapper {
    width: 100% !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    margin: 0 auto !important;
    display: block !important;
}


/* =====================================================
   ÜRÜNLERİMİZ BAŞLIĞI
===================================================== */

.product-wrapper .title {
    display: block !important;
    width: 100% !important;

    text-align: center !important;

    color: #01428e !important;

    font-size: 25px !important;
    font-weight: 700 !important;

    margin: 0 0 30px 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 10 !important;
}
.product-info h3 {
    font-size: 19px;
}

.product-info p {
    font-size: 14px;
}

/* =====================================================
   MOBİL - HEADER ALTI / ÜRÜNLERİMİZ BOŞLUĞU
===================================================== */

@media (max-width: 768px) {

    .product-wrapper {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
    }

}



/* =====================================================
KATEGORİLER
===================================================== */

.kategori-alani {
width: 95%;
max-width: 1400px;
margin: 0 auto 35px;
text-align: center;
}

.kategori-listesi {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}

.kategori-btn {
display: inline-block;
padding: 10px 20px;
background: #f1f4f8;
color: #01428e;
text-decoration: none;
border: 1px solid #01428e;
border-radius: 6px;
transition: .2s ease;
font-size: 14px;
box-sizing: border-box;
}

.kategori-btn:hover {
background: #01428e;
color: #fff;
border-color: #01428e;
}

.kategori-btn.aktif {
background: #01428e;
color: #fff;
border-color: #01428e;
}

/* =====================================================
SEÇİLİ KATEGORİ
===================================================== */

.secili-kategori {
width: 95%;
max-width: 1400px;
margin: 0 auto 25px;
text-align: center;
color: #333;
}

.secili-kategori strong {
color: #01428e;
}

/* =====================================================
ÜRÜN GRID
===================================================== */

.products {
width: 98%;
max-width: 1800px;
margin: 40px auto;


display: grid;

grid-template-columns:
    repeat(4, minmax(0, 1fr));

column-gap: 25px;
row-gap: 35px;

align-items: stretch;


}

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

.product-card {
width: 100%;


background: #fff;

border-radius: 12px;
overflow: hidden;

box-shadow: 0 5px 20px rgba(0,0,0,.10);

display: flex;
flex-direction: column;

transition: .3s ease;


}

.product-card:hover {
transform: translateY(-5px);


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


}

/* =====================================================
ÜRÜN RESİM ALANI
===================================================== */

.product-image-box {
height: 220px;
}

.product-image-box img {
width: 100%;
height: 100%;


display: block;

object-fit: contain;
object-position: center center;

padding: 10px;

box-sizing: border-box;


}

/* =====================================================
ÜRÜN BİLGİ
===================================================== */

.product-info {
flex: 1;


padding: 20px;

display: flex;
flex-direction: column;

box-sizing: border-box;


}

.product-info h3 {
margin: 0 0 10px;


font-size: 20px;
line-height: 1.3;

color: #01428e;

min-height: 52px;


}

.product-info p {
margin: 0 0 12px;


font-size: 14px;
line-height: 1.6;

color: #555;

height: 67px;

overflow: hidden;


}

.product-card .product-info {
display: flex !important;
flex-direction: column !important;
}

.product-card .siparis-btn {
margin-top: auto !important;
height: 54px !important;
min-height: 54px !important;
}

/* =====================================================
ÜRÜN KATEGORİ ETİKETİ
===================================================== */

.urun-kategori {
display: inline-block;


align-self: flex-start;

margin-top: 0;
margin-bottom: 0;

padding: 5px 10px;

background: #e8f0fa;
color: #01428e;

border: 1px solid #01428e;
border-radius: 5px;

font-size: 12px;
font-weight: bold;

box-sizing: border-box;


}

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

.product-info .price {
margin-top: 15px !important;
margin-bottom: 15px !important;


min-height: 27px !important;

font-size: 21px !important;
font-weight: 700 !important;

color: #01428e !important;

text-align: center !important;


}

/* =====================================================
SİPARİŞ BUTONU
===================================================== */

.siparis-btn {
display: flex;


align-items: center;
justify-content: center;

width: 100%;
height: 54px;

padding: 13px 20px;

margin-top: auto;

background: #25D366;
color: #fff;

border: 2px solid #1da851;
border-radius: 25px !important;

text-align: center;
text-decoration: none;

font-size: 16px;
font-weight: 700;

cursor: pointer;

transition: all .3s ease;

box-sizing: border-box;


}

.siparis-btn:hover {
background: #1da851;
color: #fff;


border-color: #15803d;

transform: translateY(-2px);

box-shadow:
    0 5px 15px rgba(37,211,102,.30);


}

/* =====================================================
ÜRÜN YOK
===================================================== */

.no-product {
grid-column: 1 / -1;


width: 100%;

text-align: center;

padding: 50px 20px;
margin: 0 auto;

color: #666;

font-size: 20px;
font-weight: 600;


}

/* =====================================================
WHATSAPP
===================================================== */

#whatsapp-link.whatsapp-support {
position: fixed !important;


right: 25px !important;
bottom: 25px !important;

width: auto !important;
height: auto !important;

max-width: 260px !important;

display: flex !important;

align-items: center !important;
justify-content: center !important;

gap: 10px !important;

padding: 10px 14px !important;

box-sizing: border-box !important;

background: #25D366 !important;
color: #fff !important;

border-radius: 50px !important;

text-decoration: none !important;

font-size: 14px !important;
line-height: 1.3 !important;

z-index: 99999 !important;

box-shadow:
    0 5px 20px rgba(0,0,0,.20) !important;


}

#whatsapp-link.whatsapp-support img {
width: 45px !important;
height: 45px !important;


min-width: 45px !important;
min-height: 45px !important;

max-width: 45px !important;
max-height: 45px !important;

object-fit: contain !important;

display: block !important;

margin: 0 !important;
padding: 0 !important;

border: none !important;


}

/* =====================================================
TABLET - 901 / 1200
===================================================== */

@media (min-width: 901px) and (max-width: 1200px) {


.products {
    width: 98%;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 18px;
    row-gap: 30px;
}


}

/* =====================================================
TABLET - 769 / 900
===================================================== */

@media (min-width: 769px) and (max-width: 900px) {


.products {
    width: 97%;

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

    column-gap: 18px;
    row-gap: 30px;
}


}

/* =====================================================
MOBİL
===================================================== */

@media (max-width: 768px) {


/* KATEGORİLER */

.kategori-alani {
    width: 92%;
    margin: 20px auto;
    text-align: center;
}

.kategori-listesi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.kategori-btn {
    display: inline-block !important;

    padding: 9px 14px !important;

    background: #f1f4f8 !important;
    color: #01428e !important;

    border: 1px solid #01428e !important;
    border-radius: 6px !important;

    text-decoration: none !important;

    font-size: 13px;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.kategori-btn.aktif {
    background: #01428e !important;
    color: #fff !important;
    border-color: #01428e !important;
}


/* ÜRÜNLER */

.products {
    width: 92%;

    grid-template-columns: 1fr;

    gap: 20px;
}


/* ÜRÜN KATEGORİ ETİKETİ */

.urun-kategori {
    display: inline-block;

    align-self: flex-start;

    margin-top: 10px;
    margin-bottom: 0;

    padding: 5px 10px;

    background: #e8f0fa;
    color: #01428e;

    border: 1px solid #01428e;
    border-radius: 5px;

    font-size: 12px;
    font-weight: bold;

    box-sizing: border-box;
}


/* FİYAT */

.product-info .price {
    display: block !important;

    margin-top: 15px !important;

    color: #01428e !important;

    font-size: 20px;

    visibility: visible !important;
    opacity: 1 !important;
}


/* SİPARİŞ BUTONU */

.siparis-btn {
    display: flex !important;

    width: 100% !important;

    min-height: 48px !important;

    padding: 13px 20px !important;

    margin-top: 15px !important;

    background: #25D366 !important;

    color: #fff !important;

    border: 2px solid #1da851 !important;

    border-radius: 25px !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    text-decoration: none !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.siparis-btn:hover,
.siparis-btn:active {
    background: #1da851 !important;

    color: #fff !important;

    border-color: #15803d !important;
}


/* WHATSAPP */

#whatsapp-link.whatsapp-support {
    right: 15px !important;
    bottom: 15px !important;
}


}