/*
 * FOOTER FINAL V3
 * Memperbaiki tag CSS lama dan merapikan tinggi, jarak, serta kesejajaran.
 * Kompatibel PHP 7.4.
 */

/* Strip bantuan */
.support-strip{
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
}

.support-inner{
    width:min(1240px,calc(100% - 40px)) !important;
    height:66px !important;
    min-height:66px !important;
    margin:0 auto !important;
    padding:0 18px !important;
    display:grid !important;
    grid-template-columns:1.22fr .78fr 1.05fr 1.25fr !important;
    align-items:center !important;
    gap:0 !important;
    overflow:hidden !important;
    border-radius:13px 13px 0 0 !important;
    background:linear-gradient(100deg,#0757b8 0%,#0c68d4 100%) !important;
    box-shadow:0 8px 18px rgba(5,70,150,.14) !important;
}

.support-agent{
    position:relative !important;
    height:66px !important;
    min-width:0 !important;
    padding:0 12px 0 94px !important;
    display:flex !important;
    align-items:center !important;
}

.support-agent img{
    position:absolute !important;
    left:3px !important;
    bottom:-1px !important;
    width:84px !important;
    height:84px !important;
    object-fit:contain !important;
}

.support-agent h3{
    margin:0 0 3px !important;
    color:#fff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
}

.support-agent p{
    margin:0 !important;
    color:#dcecff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:9.5px !important;
    line-height:1.25 !important;
}

.support-contact{
    height:42px !important;
    min-height:42px !important;
    min-width:0 !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    border-left:1px solid rgba(255,255,255,.20) !important;
}

.support-contact-icon{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    color:#fff !important;
    background:rgba(255,255,255,.11) !important;
}

.support-contact-icon .icon{
    width:19px !important;
    height:19px !important;
}

.support-contact small{
    display:block !important;
    color:#d8eaff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:8.5px !important;
    line-height:1.15 !important;
}

.support-contact strong{
    display:block !important;
    margin-top:2px !important;
    color:#fff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:11.5px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    white-space:normal !important;
}

/* Footer dibuat lebih pendek dan rapat */
.footer,
.exact-footer{
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:20px 0 0 !important;
    background:linear-gradient(120deg,#084786 0%,#06356f 100%) !important;
}

.footer-columns{
    width:min(1240px,calc(100% - 40px)) !important;
    min-height:104px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1.38fr .76fr .88fr .68fr .82fr !important;
    align-items:start !important;
    gap:30px !important;
}

.footer-brand{
    min-width:0 !important;
    padding-top:0 !important;
}

.footer-brand .logo{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    margin:0 0 9px !important;
}

.footer-brand .logo-mark{
    width:36px !important;
    height:41px !important;
}

.footer-brand .logo strong{
    color:#fff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:800 !important;
}

.footer-brand .logo small{
    display:block !important;
    margin-top:4px !important;
    color:#d5e5f8 !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
}

.footer-brand p{
    max-width:255px !important;
    margin:0 !important;
    color:#cfe0f4 !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:8.8px !important;
    line-height:1.48 !important;
}

.footer-column{
    min-width:0 !important;
    padding-top:1px !important;
}

.footer-column h4{
    margin:0 0 8px !important;
    color:#fff !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:10.5px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}

.footer-column a{
    display:block !important;
    margin:5px 0 !important;
    color:#d5e5f7 !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1.25 !important;
}

.footer-social{
    min-width:170px !important;
    justify-self:start !important;
}

.social-list{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
}

.social-list a{
    width:29px !important;
    height:29px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    color:#174a86 !important;
    background:#fff !important;
}

.social-list .icon{
    width:16px !important;
    height:16px !important;
}

.footer-rule{
    width:100% !important;
    height:1px !important;
    margin:14px 0 0 !important;
    background:rgba(255,255,255,.13) !important;
}

.footer-bottom-exact{
    width:min(1240px,calc(100% - 40px)) !important;
    min-height:31px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    color:#cfdef0 !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
}

/* Tablet */
@media(max-width:1080px){
    .support-inner{
        width:min(100% - 28px,1240px) !important;
        height:auto !important;
        min-height:66px !important;
        grid-template-columns:1fr 1fr !important;
        padding:10px 14px !important;
    }

    .support-agent{
        grid-column:1/-1 !important;
        height:62px !important;
        padding-left:86px !important;
    }

    .support-agent img{
        width:76px !important;
        height:78px !important;
    }

    .support-contact{
        min-height:48px !important;
        height:auto !important;
        border-left:0 !important;
        border-top:1px solid rgba(255,255,255,.18) !important;
    }

    .footer-columns{
        width:min(100% - 28px,1240px) !important;
        grid-template-columns:1.25fr 1fr 1fr !important;
        gap:22px !important;
    }

    .footer-bottom-exact{
        width:min(100% - 28px,1240px) !important;
    }
}

/* Mobile */
@media(max-width:680px){
    .support-strip{
        margin-top:14px !important;
    }

    .support-inner{
        width:calc(100% - 20px) !important;
        grid-template-columns:1fr !important;
        border-radius:12px 12px 0 0 !important;
    }

    .support-agent{
        grid-column:auto !important;
        padding-left:78px !important;
    }

    .support-agent img{
        width:70px !important;
        height:72px !important;
    }

    .support-contact{
        padding:9px 4px !important;
    }

    .footer,
    .exact-footer{
        padding-top:18px !important;
    }

    .footer-columns{
        width:calc(100% - 28px) !important;
        min-height:0 !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .footer-social{
        min-width:0 !important;
    }

    .footer-bottom-exact{
        width:calc(100% - 28px) !important;
        min-height:auto !important;
        padding:10px 0 !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:4px !important;
    }
}