/* =====================================================================
   WESTPLAST STYLE.CSS

   AMAÇ:
   - Sitenin genel görünümünü yönetir
   - Ana sayfa tasarımlarını içerir
   - Slider sistemi burada bulunur

   DİKKAT:
   Header --> header.css
   Footer --> footer.css

   Bu dosya sadece:
   - Genel yapı
   - Slider
   - Ana Sayfa

   için kullanılacaktır.
===================================================================== */


/* =====================================================================
   GOOGLE FONTLAR

   RAPORA UYGUN KURUMSAL FONT SİSTEMİ

   Başlıklar  : Montserrat
   Metinler   : Inter

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap');


/* =====================================================================
   1) GLOBAL RESET
===================================================================== */

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


/* =====================================================================
   BODY

   Rapor renk sistemi:

   Açık Zemin  : #EEF3F8
   Metin       : #262626

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

body{

    font-family:'Inter',sans-serif;

    background:#EEF3F8;

    color:#262626;

    overflow-x:hidden;

    font-size:16px;

    line-height:1.7;
}


/* =====================================================================
   KURUMSAL BAŞLIK SİSTEMİ

   H1 → 36-44px
   H2 → 28-32px
   H3 → 20-22px

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

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Montserrat',sans-serif;

    color:#13315C;
}

h1{
    font-size:42px;
    font-weight:700;
}

h2{
    font-size:30px;
    font-weight:700;
}

h3{
    font-size:22px;
    font-weight:600;
}


/* =====================================================================
   GLOBAL LINK YAPISI

   Açık Mavi:
   #29ABE2

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

a{
    color:#29ABE2;
    text-decoration:none;
}

a:hover{
    color:#13315C;
}


/* =====================================================================
   2) ORTAK CONTAINER

   Header ve Footer tam ekran kalır.

   İçerik alanları:
   - Ürünler
   - Kurumsal
   - Bayilik
   - İletişim

   bu container ile ortalanır.
===================================================================== */

.container{

    width:92%;

    max-width:1200px;

    margin:auto;
}


/* =====================================================================
   3) FULL WIDTH ALANLAR

   Bunlar ekranın tamamını kullanır.
===================================================================== */

header,
footer,
.slider-container{
    width:100%;
}


/* =====================================================================
   4) SLIDER
===================================================================== */

.slider-container{
    height:340px;
    overflow:hidden;
    position:relative;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* =====================================================================
   5) ANA SAYFA - GÜVEN MEKTUBU
===================================================================== */

.home-hero{

    width:90%;
    max-width:1080px;
    margin:30px auto;

    background:#fff;
    padding:35px;

    border-radius:12px;
    border-left:5px solid #13315C;

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

    display:grid;
    grid-template-columns:175px 1fr;
    grid-template-rows:auto auto;
    column-gap:25px;
    row-gap:10px;
    align-items:start;
}
.hero-simple{
    display:block;
    text-align:center;
}

.hero-simple .hero-text{
    max-width:900px;
    margin:0 auto;
    text-align:left;
}

.hero-simple h1{
    margin-bottom:20px;
    text-align:center;
}
/* RESİM: 1. kolon, 2 satır */
.guvence-resim{
    width:175px;
    height:auto;
    border-radius:8px;

    grid-column:1;
    grid-row:1 / span 2;
}

/* H1: sağ üst */
.home-hero h1{
  
    margin:0;
    font-size:20px;
    color:#13315C;

    grid-column:2;
    align-self:start;

}

/* PARAGRAFLAR: sağ alt */
.hero-text{
   grid-column:2;
    grid-row:2;
}

.hero-text p{
    margin:0 0 10px 0;
    line-height:1.8;
    color:#595959;
}
/* =====================================================================
   6) ANA SAYFA - GÜVEN KUTULARI
===================================================================== */

.home-features{

    width:90%;

    max-width:1080px;

    margin:30px auto;

    display:grid;

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

    gap:20px;
}

.feature-box{

    background:#fff;

    padding:25px;

    border-radius:12px;

    text-align:center;

    border:1px solid #D9D9D9;

    box-shadow:0 5px 15px rgba(0,0,0,0.06);

    transition:.3s;
}

.feature-box:hover{

    transform:translateY(-5px);

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

.feature-box h3{

    color:#13315C;

    margin-bottom:10px;
}


/* =====================================================================
   7) CTA ALANI

   Arka plan tam ekran.
   İçerik 1080px içinde.
===================================================================== */

.home-cta{

    width:100%;

    background:#13315C;

    color:#fff;

    padding:60px 0;

    margin-top:50px;
}

.home-cta .container{
    text-align:center;
}

.home-cta h2{
    margin-bottom:15px;
    color:#fff;
}

.home-cta p{
    margin-bottom:20px;
}


/* =====================================================================
   CTA BUTONLARI
===================================================================== */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{

    padding:12px 20px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.btn-primary{

    background:#29ABE2;

    color:#fff;
}

.btn-primary:hover{

    background:#1f93c4;

    color:#fff;
}

.btn-secondary{

    background:#fff;

    color:#13315C;
}

.btn-secondary:hover{

    background:#EEF3F8;
}


/* =====================================================================
   8) MOBİL UYUMLULUK
===================================================================== */

@media(max-width:768px){

    .home-features{
        grid-template-columns:1fr;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .home-hero{
        padding:25px;
    }

    h1{
        font-size:30px;
    }

    h2{
        font-size:24px;
    }

    h3{
        font-size:20px;
    }
}
/* =========================================
   GLOBAL BUTTON FORCE SYSTEM (FINAL FIX)
========================================= */

/* HER butonu yakala ve standarda çek */
.btn,
.btn-primary,
.btn-secondary,
.katalog-btn,
.teklif-btn,
.whatsapp-btn,
button,
input[type="submit"]{
    background:#29ABE2 !important;
    color:#fff !important;
    border:none !important;
}

/* hover efekti */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.katalog-btn:hover,
.teklif-btn:hover,
.whatsapp-btn:hover,
button:hover{
    background:#1f90c0 !important;
}





@media (max-width:768px){

    .home-hero{
        display:block; /* GRID iptal */
        text-align:center;
        padding:25px;
    }

    .guvence-resim{
        width:180px;
        margin:0 auto 15px auto;
        display:block;
    }

    .home-hero h1{
        font-size:20px;
        text-align:center;
    }

    .hero-text{
        text-align:left;
    }
}