.footer-pro, .footer-pro *{ font-family: var(--font-body); }

.footer-pro{
    position: relative;
    overflow: hidden;
    background: var(--pencil-yellow);
    color: rgba(24,93,130,.75);
    padding: 48px 0 0;
    margin-top: 40px;
}

.footer-container{ width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---- bar ajakan/saran (aksen baby blue) ---- */
.footer-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-radius: var(--radius-card);
    padding: 22px 28px;
    margin-bottom: 28px;
}
.footer-bar--suggestion{ background: linear-gradient(120deg, var(--sky-500), var(--ink-700)); border: 1px solid rgba(255,255,255,.15); }
.footer-bar__text{ display: flex; align-items: center; gap: 14px; }
.footer-bar__text .icon{ color: var(--paper-50); flex: none; }
.footer-bar__text h6{ margin: 0 0 4px; color: var(--paper-50); font-weight: 700; font-size: .95rem; }
.footer-bar__text p{ margin: 0; color: rgba(251,247,236,.85); font-size: .85rem; line-height: 1.5; }
.footer-bar__btn{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink-900); color: var(--paper-50);
    font-weight: 700; font-size: .88rem;
    padding: 10px 20px; border-radius: 8px; white-space: nowrap;
    transition: background .2s ease;
}
.footer-bar__btn:hover{ background: var(--ink-700); }

/* ---- kartu utama footer ---- */
.footer-card{
    position: relative;
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(24,93,130,.14);
    border-radius: var(--radius-card);
    padding: 44px 40px;
}
.footer-grid{ display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 44px; align-items: start; }
.footer-col-brand .brand__text{ font-size: 1.4rem; margin-bottom: 12px; display: inline-block; }
.footer-col-brand .brand__text,
.footer-col-brand .brand__text em{ color: var(--ink-900) !important; }
.footer-tagline{ color: rgba(24,93,130,.75); line-height: 1.7; font-size: .92rem; max-width: 320px; margin-bottom: 22px; }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(24,93,130,.25); color: var(--ink-900);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-social a:hover{ border-color: var(--ink-900); background: var(--ink-900); color: var(--paper-50); }

.footer-heading{
    color: var(--ink-900); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 20px; position: relative; padding-bottom: 10px;
}
.footer-heading::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--ink-900); }

.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin-bottom: 12px; }
.footer-links a{
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(24,93,130,.75); font-size: .92rem;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover{ color: var(--ink-900); padding-left: 3px; }
.footer-links a .icon{ color: var(--ink-900); flex: none; }

.footer-contact{ list-style: none; margin: 0; padding: 0; }
.footer-contact li{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; color: rgba(24,93,130,.75); font-size: .92rem; line-height: 1.5; }
.footer-contact li .icon{ color: var(--ink-900); flex: none; margin-top: 3px; }

.footer-map{ position: relative; border-radius: 10px; overflow: hidden; height: 170px; border: 1px solid rgba(24,93,130,.2); }
.footer-map iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); display: block; }
.footer-map-btn{
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px; font-size: .8rem; font-weight: 600; color: var(--paper-50);
    background: var(--ink-900); border-radius: 8px;
}

/* ---- bottom bar (baby blue, penyeimbang kuning di atas) ---- */
.footer-bottom-bar{ margin-top: 36px; background: var(--sky-100); }
.footer-bottom{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; padding: 16px 24px; max-width: var(--max-width); margin: 0 auto;
}
.footer-bottom p{ margin: 0; color: var(--ink-900); font-size: .85rem; font-weight: 700; }
.footer-credit{ font-weight: 500 !important; }
.footer-credit a{ color: var(--ink-900); font-weight: 700; text-decoration: underline; }

@media (max-width: 991px){
    .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 28px; }
    .footer-col-brand{ grid-column: 1 / -1; }
}
@media (max-width: 620px){
    .footer-pro{ padding: 36px 0 0; text-align: center; }
    .footer-card{ padding: 30px 20px; }
    .footer-grid{ grid-template-columns: 1fr; row-gap: 36px; }
    .footer-bar{ flex-direction: column; text-align: center; padding: 20px; }
    .footer-bar__text{ flex-direction: column; gap: 8px; }
    .footer-social{ justify-content: center; }
    .footer-col:not(.footer-col-brand){ text-align: left; }
    .footer-bottom{ flex-direction: column; text-align: center; }
}

[data-theme="dark"] .footer-pro{ background: var(--pencil-yellow-dark); color: rgba(16,24,44,.75); }
[data-theme="dark"] .footer-card{ background: rgba(16,24,44,.12); border-color: rgba(16,24,44,.2); }
[data-theme="dark"] .footer-heading,
[data-theme="dark"] .footer-bottom p,
[data-theme="dark"] .footer-credit a,
[data-theme="dark"] .footer-col-brand .brand__text{ color: #10182C !important; }