footer {
            background: linear-gradient(160deg, #1d2a70 0%, #2c3f9c 50%, var(--navy) 100%);
            color: white; padding: 64px 24px 0;
            position: relative; overflow: hidden;
        }
        footer::before {
            content: ''; position: absolute;
            top: -100px; right: -100px; width: 400px; height: 400px;
            background: rgba(243,190,122,0.06); border-radius: 50%; pointer-events: none;
        }
        .footer-inner {
            max-width: 1200px; margin: 0 auto;
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px; padding-bottom: 48px;
        }
        .footer-logo {
            display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
        }
        .footer-logo-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--yellow), var(--orange));
            border-radius: 12px; display: flex; align-items: center;
            justify-content: center; font-size: 22px;
        }
        .footer-logo-text { font-size: 20px; font-weight: 800; color: white; }
        .footer-logo-text span { color: var(--yellow); }
        .footer-tagline { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.7; margin-bottom: 24px; max-width: 280px; }
        .footer-socials { display: flex; gap: 10px; }
        .footer-social-btn {
            width: 38px; height: 38px; border-radius: 10px;
            background: rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; text-decoration: none;
            transition: background 0.2s, transform 0.2s;
        }
        .footer-social-btn:hover { background: var(--orange); transform: translateY(-3px); }
        .footer-col h4 {
            font-size: 13px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.8px;
            color: var(--yellow); margin-bottom: 18px;
        }
        .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
        .footer-col ul li a {
            color: rgba(255,255,255,0.65); text-decoration: none;
            font-size: 14px; transition: color 0.2s, padding-left 0.2s;
        }
        .footer-col ul li a:hover { color: var(--yellow); padding-left: 6px; }
        .footer-divider { max-width: 1200px; margin: 0 auto; height: 1px; background: rgba(255,255,255,0.1); }
        .footer-bottom {
            max-width: 1200px; margin: 0 auto;
            padding: 20px 24px; display: flex;
            justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 12px;
        }
        .footer-bottom p { color: rgba(255,255,255,0.5); font-size: 13px; }
        .footer-bottom p strong { color: var(--yellow); }
        .footer-bottom-links { display: flex; gap: 20px; }
        .footer-bottom-links a {
            color: rgba(255,255,255,0.5); text-decoration: none;
            font-size: 13px; transition: color 0.2s;
        }
        .footer-bottom-links a:hover { color: var(--yellow); }

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

@media (max-width:768px){

footer{
    padding:50px 18px 0;
}

/* dari 4 kolom jadi 1 */
.footer-inner{
    grid-template-columns:1fr;

    gap:28px;

    text-align:center;
}

/* logo tengah */
.footer-logo{
    justify-content:center;
}

/* deskripsi */
.footer-tagline{
    max-width:100%;
    margin:auto auto 20px;
}

/* icon sosmed tengah */
.footer-socials{
    justify-content:center;
}

/* menu footer */
.footer-col ul{
    align-items:center;
}

/* bawah footer */
.footer-bottom{

    flex-direction:column;

    text-align:center;

    padding:18px 0;
}

.footer-bottom-links{
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

}