/* ==========================================================
   URUN-DETAY.CSS
   ==========================================================

   WESTPLAST ÜRÜN DETAY SAYFASI

   Bu dosya ürün detay ekranını yönetir.

   İçerik:

   1) Sayfa Genel Alanı
   2) İki Sütunlu Yerleşim
   3) Ürün Görsel Kartı
   4) Ürün Bilgi Kartı
   5) Ürün Açıklama Alanı
   6) Teklif Butonu
   7) Mobil Uyum

   KURUMSAL KİMLİK UYUMLAMASI

   Ana Renk:
   #13315C

   Vurgu:
   #29ABE2

   Metin:
   #262626

   Yardımcı Metin:
   #595959

   Kenarlık:
   #D9D9D9

   Açık Zemin:
   #EEF3F8

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


/* ==========================================================
   ANA SAYFA ALANI

   Ürün detay ekranının dış kapsayıcısı.

   Beyaz kartların nefes alması için
   üst ve alt boşluk bırakılır.
========================================================== */

.urun-detay{

    padding:60px 0;

    background:#EEF3F8;
}


/* ==========================================================
   İKİ SÜTUNLU YERLEŞİM

   Sol:
   Ürün görseli

   Sağ:
   Ürün bilgileri

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

.urun-detay-container{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;
}


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

   Görsel beyaz bir kart içinde gösterilir.
========================================================== */

.urun-gorsel{

    background:#ffffff;

    padding:20px;

    border-radius:15px;

    border:1px solid #D9D9D9;

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);
}


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

   Resim kart içine tam oturur.
========================================================== */

.urun-gorsel img{

    width:100%;

    border-radius:12px;

    object-fit:cover;

    transition:.4s;
}


/* Hover efekti */

.urun-gorsel img:hover{

    transform:scale(1.02);
}


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

   Ürün adı
   Ürün kodu
   Kategori
   Açıklamalar

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

.urun-bilgi{

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    border:1px solid #D9D9D9;

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);
}


/* ==========================================================
   ÜRÜN BAŞLIĞI
========================================================== */

.urun-bilgi h1{

    font-size:32px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:25px;

    color:#13315C;
}


/* ==========================================================
   BİLGİ SATIRLARI
========================================================== */

.urun-bilgi p{

    margin:12px 0;

    font-size:15px;

    line-height:1.8;

    color:#595959;
}


/* Kalın yazılar */

.urun-bilgi strong{

    color:#262626;

    font-weight:600;
}


/* ==========================================================
   ÜRÜN AÇIKLAMA BLOĞU

   Ürün bilgileri ile açıklama kısmını
   görsel olarak ayırır.
========================================================== */

.aciklama{

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #D9D9D9;

    line-height:1.9;

    color:#595959;
}


/* ==========================================================
   TEKLİF AL BUTONU

   Kullanıcıyı WhatsApp veya
   iletişim formuna yönlendirir.
========================================================== */

.teklif-btn{

    display:inline-block;

    margin-top:25px;

    padding:14px 24px;

    background:#13315C;

    color:#ffffff;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;
}

.teklif-btn:hover{

    background:#29ABE2;

    color:#ffffff;

    transform:translateY(-2px);
}


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

   Tablet ve telefonlarda
   iki sütun tek sütuna düşer.
========================================================== */

@media(max-width:768px){

    .urun-detay{

        padding:40px 15px;
    }

    .urun-detay-container{

        grid-template-columns:1fr;

        gap:25px;
    }

    .urun-bilgi{

        padding:22px;
    }

    .urun-bilgi h1{

        font-size:26px;
    }

}