/* Bagian penutup: blok kontak dan footer. */
/* kontak + footer */
.contact { margin-top: 120px; padding: 96px 0 72px; background: var(--block-bg); color: var(--block-fg); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.contact h2 { font-size: clamp(40px, 6vw, 80px); line-height: .95; margin-bottom: 24px; text-wrap: balance; }
.contact-copy p { max-width: 44ch; color: color-mix(in srgb, var(--block-fg) 72%, transparent); }
.contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .18); font: 600 clamp(20px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; transition: color .18s, padding-left .2s; }
.contact-links a:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.contact-links a:hover { color: var(--accent); padding-left: 10px; }
.contact-links svg { width: 26px; height: 26px; flex: none; }
.site-foot { background: var(--block-bg); color: color-mix(in srgb, var(--block-fg) 62%, transparent); font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 28px 0 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.contact + .site-foot .foot-in { border-top-color: rgba(255, 255, 255, .12); }

/* media sosial di bagian kontak */
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; list-style: none; }
.social-link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; color: var(--block-fg); font: 600 15px var(--body); text-decoration: none; transition: color .18s, border-color .18s, transform .18s; }
.social-link svg { width: 18px; height: 18px; flex: none; }
.social-link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* Kode QR di bagian kontak: kotak putih (zona tenang sudah ada di gambar) agar mudah dipindai di tema gelap maupun terang. */
.contact-qr { display: flex; align-items: center; gap: 18px; margin: 36px 0 0; }
.contact-qr img { width: 112px; height: 112px; flex: none; border-radius: 10px; background: #fff; }
.contact-qr figcaption { max-width: 22ch; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--block-fg) 72%, transparent); }
/* Di layar sempit (ponsel) kode QR tidak berguna karena halamannya sudah dibuka di ponsel: disembunyikan (gambar lazy tidak diunduh). */
@media (max-width: 720px) { .contact-qr { display: none; } }