/* ==========================================================================
   FOOTER.CSS
   ==========================================================================

   WESTPLAST FOOTER TASARIM DOSYASI

   Bu dosya sitenin alt bölümünü yönetir.

   İçerdiği Bölümler:

   1) Footer Ana Alanı
   2) Footer Container
   3) Marka Alanı
   4) Footer Logo Alanı
   5) Dekoratif Ayırıcı Çizgi
   6) Açıklama Metni
   7) Başlıklar
   8) Menü Alanı
   9) İletişim Alanı
   10) Sosyal Medya Alanı
   11) Yasal Linkler
   12) Alt Bar
   13) Mobil Uyumluluk

   Bu dosyada yapılan değişiklikler
   sitenin tüm sayfalarını etkiler.

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


/* ==========================================================================
   FOOTER ANA ALANI
   ========================================================================== */

.footer{
    background:#13315C;
    color:#fff;
    margin-top:50px;
}


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

.footer-container{
    max-width:1200px;
    margin:0 auto;
    padding:50px 40px;
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:40px;
}


/* ==========================================================================
   MARKA ALANI
   ========================================================================== */

.footer-brand{
    display:flex;
    flex-direction:column;
}


/* ==========================================================================
   FOOTER LOGO ALANI
   ========================================================================== */

.footer-logo-link{
    display:inline-block;
    text-decoration:none;
}

.footer-logo{
    width:170px;
    height:auto;
    display:block;
    transition:.3s;
}

.footer-logo:hover{
    transform:scale(1.03);
}


/* ==========================================================================
   DEKORATİF AYIRICI ÇİZGİ
   ========================================================================== */

.footer-divider{
    width:60px;
    height:3px;
    background:#29ABE2;
    border-radius:50px;
    margin:15px 0;
}


/* ==========================================================================
   AÇIKLAMA METNİ
   ========================================================================== */

.footer-brand p{
    font-size:14px;
    color:rgba(255,255,255,.85);
    line-height:1.7;
    max-width:320px;
}


/* ==========================================================================
   BAŞLIKLAR
   ========================================================================== */

.footer-col h4{
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
    margin-bottom:15px;
}


/* ==========================================================================
   MENÜ ALANI
   ========================================================================== */

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}


/* ==========================================================================
   MENÜ BAĞLANTILARI
   ========================================================================== */

.footer-col ul li a{
    text-decoration:none;
    color:rgba(255,255,255,.9);
    font-size:14px;
    transition:.3s;
}

.footer-col ul li a:hover{
    color:#29ABE2;
    padding-left:6px;
}


/* ==========================================================================
   İLETİŞİM ALANI
   ========================================================================== */

.footer-contact-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:14px;
}

.footer-contact-item .label{
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

.footer-contact-item .value{
    font-size:14px;
    color:#fff;
    font-weight:500;
}

.footer-contact-item .value a{
    color:#fff;
    text-decoration:none;
}


/* ==========================================================================
   SOSYAL MEDYA ALANI
   ========================================================================== */

.social-links{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.social-links a{
    color:rgba(255,255,255,.9);
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.social-links a:hover{
    color:#29ABE2;
    padding-left:6px;
}


/* ==========================================================================
   YASAL LİNKLER
   ========================================================================== */

.legal-links{
    margin-top:10px;
    font-size:13px;
    color:rgba(255,255,255,.8);
}

.legal-links a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:.3s;
}

.legal-links a:hover{
    color:#29ABE2;
    text-decoration:underline;
}


/* ==========================================================================
   FOOTER ALT BAR
   ========================================================================== */

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    max-width:1200px;
    margin:0 auto;
    padding:18px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-bottom p{
    font-size:13px;
    color:rgba(255,255,255,.75);
    margin:0;
}


/* ==========================================================================
   MOBİL GÖRÜNÜM
   ========================================================================== */

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        gap:30px;
        padding:40px 20px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:10px;
        text-align:center;
        padding:15px 20px;
    }

    .footer-logo{
        width:140px;
    }
}