/* ============================================================
   FOOTER FRONTEND — PARTAI RAKYAT INDONESIA
   Salinan gaya footer beranda (landing.css) agar footer partial
   (resources/views/frontend/partials/footer.blade.php) bisa
   dipakai di halaman yang TIDAK memuat landing.css (mis. galeri).
   Variabel warna di-scope ke elemen footer supaya tidak menimpa
   variabel halaman lain.
   ============================================================ */
.footer {
    --red:      #C8151A;
    --red-dk:   #9E0F13;
    --red-lt:   #E03035;
    --gold:     #B8730A;
    --gold-lt:  #D4900F;
    --black:    #0E0C0B;
}

.footer { background: var(--black); padding: 64px 80px 0; }
/* Garis emas di atas footer */
.footer::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg, var(--red-dk), var(--red), var(--gold), var(--red), var(--red-dk));
    margin: 0 -80px 64px;
}
.footer-top {
    display: flex; justify-content: space-between; gap: 48px;
    padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 0; flex-wrap: wrap;
}
.footer-brand-col { max-width: 280px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--red); }
.footer-brand-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 900; color: #fff; }
.footer-brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-lt); margin-top: 1px; }
.footer-tagline { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.4); margin-bottom: 20px; }
.footer-socials { display: flex; gap: 8px; }
.footer-social-btn {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); transition: all .2s;
    text-decoration: none; font-size: 14px; font-weight: 700;
}
.footer-social-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.footer-col-title { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 18px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: 13.5px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; display: flex; align-items: center; gap: 5px; }
.footer-links a:hover { color: var(--red-lt); }
.footer-links a::before { content: '›'; color: var(--red); opacity: 0; transition: opacity .2s; font-size: 16px; }
.footer-links a:hover::before { opacity: 1; }
/* Footer bottom */
.footer-bottom-bar {
    padding: 20px 0;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    border-top: 1px solid rgba(255,255,255,.07); margin-top: 52px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,.25); }
.footer-copy span { color: var(--red-lt); font-weight: 600; }
.footer-copy .gold { color: var(--gold-lt); }

/* ── Responsif (mengikuti breakpoint landing.css) ── */
@media (max-width: 1100px) {
    .footer         { padding: 64px 40px 0; }
    .footer::before { margin: 0 -40px 64px; }
    .footer-top     { flex-direction: column; gap: 36px; }
}
@media (max-width: 600px) {
    .footer         { padding: clamp(40px, 6vw, 48px) clamp(16px, 4vw, 20px) 0; }
    .footer::before { margin: 0 calc(-1 * clamp(16px, 4vw, 20px)) clamp(32px, 4vw, 48px); }
    .footer-top     { flex-direction: column; gap: clamp(20px, 3vw, 28px); }
}
@media (max-width: 480px) {
    .footer         { padding: clamp(36px, 5vw, 44px) clamp(12px, 3vw, 14px) 0; }
    .footer::before { margin: 0 calc(-1 * clamp(12px, 3vw, 14px)) clamp(32px, 4vw, 44px); }
}