/* VALSKUY — footer-service.css
   Self-contained (ga gantung ke --var punya masing-masing halaman)
   biar tampilannya konsisten di index/katalog/media/event. */
[data-vsk-footer] {
  display: block;
  background: #070709;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: 'DM Sans', -apple-system, sans-serif;
  color: #fff;
}
.vsk-f-wrap { max-width: 1200px; margin: 0 auto; padding: 56px 24px 28px; }
@media (min-width: 640px) { .vsk-f-wrap { padding: 56px 48px 28px; } }

.vsk-f-top { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .vsk-f-top { grid-template-columns: 1fr 1.4fr; } }

.vsk-f-brand img.vsk-f-logo { height: 32px; margin-bottom: 14px; }
.vsk-f-brand p { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.8; max-width: 300px; margin-bottom: 18px; font-weight: 300; }

.vsk-f-wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 20px;
  padding: 8px 16px; transition: border-color .2s, color .2s;
}
.vsk-f-wa:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

.vsk-f-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 40px; }
.vsk-f-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.vsk-f-col a { display: block; font-size: 12.5px; color: rgba(255,255,255,0.45); margin-bottom: 10px; line-height: 1.5; text-decoration: none; transition: color .2s; }
.vsk-f-col a:hover { color: #ede9e1; }

.vsk-f-rule { height: 1px; background: rgba(255,255,255,0.07); margin: 36px 0 20px; }
.vsk-f-bottom { display: flex; flex-direction: column; gap: 4px; }
.vsk-f-bottom p { font-size: 10px; color: rgba(255,255,255,0.32); letter-spacing: .5px; }