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

.site-footer{

    background:#111827;

    color:#fff;

    margin-top:60px;
}

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

.footer-container{

    max-width:1400px;

    margin:0 auto;

    padding:50px 20px;
}

/* ======================================
   BRAND
====================================== */

.footer-brand{

    margin-bottom:30px;
}

.footer-brand h2{

    font-size:32px;

    font-weight:700;

    margin-bottom:10px;
}

.footer-brand p{

    max-width:700px;

    line-height:1.8;

    color:#d1d5db;

    font-size:15px;
}

/* ======================================
   LINKS
====================================== */

.footer-links{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:30px;
}

.footer-links a{

    color:#e5e7eb;

    text-decoration:none;

    font-size:14px;

    transition:.3s;
}

.footer-links a:hover{

    color:#ef4444;
}

/* ======================================
   KATEGORI
====================================== */

.footer-categories{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;
}

.footer-categories a{

    padding:8px 14px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:30px;

    text-decoration:none;

    color:#fff;

    font-size:13px;

    transition:.3s;
}

.footer-categories a:hover{

    background:#dc2626;

    border-color:#dc2626;
}

/* ======================================
   SOCIAL
====================================== */

.footer-social{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;
}

.footer-social a{

    padding:10px 16px;

    background:#1f2937;

    color:#fff;

    text-decoration:none;

    border-radius:8px;

    font-size:14px;

    transition:.3s;
}

.footer-social a:hover{

    background:#dc2626;
}

/* ======================================
   COPYRIGHT
====================================== */

.footer-copyright{

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    font-size:13px;

    color:#9ca3af;
}

/* ======================================
   MOBILE
====================================== */

@media(max-width:768px){

    .footer-container{

        padding:40px 15px;
    }

    .footer-brand h2{

        font-size:26px;
    }

    .footer-brand p{

        font-size:14px;
    }

    .footer-links{

        flex-direction:column;

        gap:10px;
    }

    .footer-social{

        flex-direction:column;
    }

    .footer-social a{

        text-align:center;
    }

}