/* ==========================================================
   URUNLER.CSS
   ==========================================================

   WESTPLAST ÜRÜNLER SAYFASI

   İçerik:

   1) Sayfa Başlığı
   2) Ürün Grid Sistemi
   3) Ürün Kartları
   4) Ürün Görselleri
   5) Ürün Bilgi Alanı
   6) WhatsApp Butonu
   7) Lightbox Sistemi
   8) Mobil Uyum

   KURUMSAL KİMLİK UYUMLAMASI

   Ana Renk:
   #13315C

   Vurgu:
   #29ABE2

   Metin:
   #262626

   Yardımcı Metin:
   #595959

   Kenarlık:
   #D9D9D9

========================================================== */


/* ==========================================================
   SAYFA BAŞLIĞI
   ========================================================== */

.urunler-baslik{

    text-align:center;

    margin:40px 0 25px;

    font-size:32px;

    font-weight:700;

    color:#13315C;
}


/* ==========================================================
   ANA SAYFA ÜRÜNLER BAŞLIĞI
   ========================================================== */

.urunler > h1{

    text-align:center;

    font-size:36px;

    font-weight:700;

    color:#13315C;

    margin-bottom:30px;
}


/* ==========================================================
   ÜRÜN GRID SİSTEMİ
   ========================================================== */

.urun-grid{

    max-width:1200px;

    margin:0 auto;

    display:grid;

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

    gap:25px;

    padding:20px;
}


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

.urun-kart{

    background:#ffffff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #D9D9D9;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.05);

    transition:.3s ease;

    color:#262626;

    text-decoration:none;
}

.urun-kart:hover{

    transform:translateY(-5px);

    border-color:#29ABE2;

    box-shadow:
    0 12px 25px rgba(0,0,0,0.08);

    color:#13315C;
}


/* ==========================================================
   ÜRÜN GÖRSELİ
   ========================================================== */

.urun-kart img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.4s;
}

.urun-kart:hover img{

    transform:scale(1.03);
}


/* ==========================================================
   KART İÇERİĞİ
   ========================================================== */

.urun-body{
    padding:18px;
}

.urun-body h3{

    font-size:18px;

    font-weight:600;

    color:#13315C;

    margin-bottom:12px;

    text-align:center;
}


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

.urun-info{

    border-top:1px solid #D9D9D9;

    padding-top:12px;
}

.urun-info p{

    font-size:13px;

    color:#595959;

    margin:8px 0;

    display:flex;

    justify-content:space-between;
}

.urun-info strong{

    color:#262626;
}


/* ==========================================================
   KATALOG ALANI
   ========================================================== */

.katalog-alani{

    text-align:center;

    margin:20px 0 15px;
}


/* ==========================================================
   PDF KATALOG BUTONU
   ========================================================== */

.katalog-btn{

    display:inline-block;

    padding:12px 22px;

    background:#13315C;

    color:#ffffff !important;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;
}

.katalog-btn:hover{

    background:#29ABE2;

    color:#ffffff !important;

    transform:translateY(-2px);
}


/* ==========================================================
   WHATSAPP TEKLİF BUTONU
   ========================================================== */

.wa-mini{

    display:inline-block;

    margin-top:10px;

    padding:8px 12px;

    background:#1E7A3D;

    color:#fff;

    text-decoration:none;

    border-radius:6px;

    font-size:12px;

    transition:.3s;
}

.wa-mini:hover{

    background:#166130;
}


/* ==========================================================
   LIGHTBOX SİSTEMİ
   ========================================================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.88);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.lightbox.active{
    display:flex;
}

.lightbox img{

    max-width:80%;

    max-height:80%;

    transform:scale(.8);

    transition:.3s;
}

.lightbox.active img{
    transform:scale(1);
}


/* ==========================================================
   TABLET UYUMU
   ========================================================== */

@media(max-width:900px){

    .urun-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


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

@media(max-width:600px){

    .urun-grid{
        grid-template-columns:1fr;
    }

    .urunler > h1{
        font-size:28px;
    }

    .urunler-baslik{
        font-size:28px;
    }

    .urun-body h3{
        font-size:17px;
    }

    .katalog-btn{
        width:90%;
        text-align:center;
    }
}