/* nd-footer.css — footer penuh-lebar.

   Masalah yang diperbaiki: `.site-footer-wrap` di CSS lama masih memakai
   `max-width: 1360px; margin: auto; padding: 0 16px`, jadi footer tetap jadi
   kartu melayang di tengah walaupun `.site-footer` sudah dilepas di
   nd-fullbleed.css. Hasilnya footer tidak mentok ke tepi seperti bagian lain.

   Berkas ini dimuat PALING AKHIR (sesudah nd-layout.css) supaya menang tanpa
   perlu !important. Sesuai keputusan owner: tanpa garis tepi, tanpa sudut
   membulat, rata dengan tepi layar, dan memakai gutter yang sama dengan konten. */

body.nd-ui .site-footer-wrap {
  max-inline-size: none;
  inline-size: 100%;
  margin: var(--nd-sp-10) 0 0;
  padding: 0;
}

body.nd-ui .site-footer {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  color: var(--nd-t2);
  padding-block: var(--nd-sp-10) var(--nd-sp-6);
  padding-inline: var(--nd-gutter-x);
  /* Slab rata: gelap sedikit di atas kanvas, dengan satu sapuan aksen samar di
     kiri-atas supaya tidak terasa mati — bukan dua radial + gradien seperti dulu. */
  background:
    linear-gradient(180deg, rgba(255, 77, 109, .05) 0%, rgba(255, 77, 109, 0) 38%),
    var(--nd-s1);
}

/* Garis pemisah halus dibuat dari perbedaan permukaan, bukan dari border. */
body.nd-ui .site-footer::before {
  content: "";
  display: block;
  block-size: 1px;
  margin-block-end: var(--nd-sp-8);
  margin-inline: calc(var(--nd-gutter-x) * -1);
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .10) 18%,
              rgba(255, 255, 255, .10) 82%,
              rgba(255, 255, 255, 0) 100%);
}
:root[data-theme="light"] body.nd-ui .site-footer::before,
html[data-theme="light"] body.nd-ui .site-footer::before {
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, .10) 18%,
              rgba(0, 0, 0, .10) 82%,
              rgba(0, 0, 0, 0) 100%);
}

/* ---------- Kolom ---------- */

body.nd-ui .site-footer-top {
  display: grid;
  grid-template-columns: minmax(16rem, 1.6fr) repeat(3, minmax(9rem, 1fr));
  gap: var(--nd-sp-8) var(--nd-sp-10);
  align-items: start;
  padding: 0;
}

body.nd-ui .site-footer-col { min-inline-size: 0; }

body.nd-ui .site-footer-col h4,
body.nd-ui .site-footer-col > .site-footer-col-title {
  color: var(--nd-t3);
  font: 700 var(--nd-fs-3xs) / 1.4 var(--nd-font-text);
  letter-spacing: var(--nd-ls-caps, .09em);
  text-transform: uppercase;
  margin: 0 0 var(--nd-sp-4);
}

body.nd-ui .site-footer-col p {
  color: var(--nd-t3);
  font: 400 var(--nd-fs-sm) / 1.65 var(--nd-font-text);
  margin: 0 0 var(--nd-sp-4);
  max-inline-size: 38ch;
}

body.nd-ui .site-footer-col a {
  display: block;
  color: var(--nd-t2);
  font: 500 var(--nd-fs-sm) / 1.5 var(--nd-font-text);
  text-decoration: none;
  padding-block: 5px;
  transition: color var(--nd-dur-1) var(--nd-ease-out),
              transform var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .site-footer-col a:hover { color: var(--nd-t1); transform: translateX(3px); }

body.nd-ui .site-footer-brand-logo { padding: 0; margin-block-end: var(--nd-sp-4); }
body.nd-ui .site-footer-brand-logo:hover { transform: none; }
body.nd-ui .site-footer-brand-logo img { block-size: 2.25rem; inline-size: auto; }

/* ---------- Tag populer: pil, bukan daftar blok ---------- */

body.nd-ui .site-footer-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-sp-2);
}
body.nd-ui .site-footer-tag-cloud a {
  display: inline-flex;
  align-items: center;
  background: var(--nd-s2);
  border-radius: var(--nd-r-full);
  padding: 6px var(--nd-sp-3);
  font-size: var(--nd-fs-2xs);
  font-weight: 600;
  color: var(--nd-t3);
}
body.nd-ui .site-footer-tag-cloud a:hover { background: var(--nd-s3); color: var(--nd-t1); transform: none; }

/* ---------- Ikon sosial ---------- */

body.nd-ui .site-footer-social { display: flex; gap: var(--nd-sp-2); }
body.nd-ui .site-footer-social a {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--nd-r-full);
  background: var(--nd-s2);
  color: var(--nd-t2);
  padding: 0;
}
body.nd-ui .site-footer-social a:hover {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
  transform: translateY(-2px);
}

/* ---------- Baris bawah ---------- */

body.nd-ui .site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-sp-3) var(--nd-sp-6);
  margin-block-start: var(--nd-sp-8);
  padding-block-start: var(--nd-sp-5);
  padding-inline: 0;
  border: 0;
  color: var(--nd-t3);
  font-size: var(--nd-fs-2xs);
  position: relative;
}
body.nd-ui .site-footer-bottom::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--nd-s3);
}
body.nd-ui .site-footer-bottom a {
  color: var(--nd-t3);
  text-decoration: none;
  transition: color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .site-footer-bottom a:hover { color: var(--nd-t1); }
body.nd-ui .site-footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nd-sp-2) var(--nd-sp-4);
}

/* ---------- Responsif ---------- */

@media (max-width: 900px) {
  body.nd-ui .site-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nd-sp-6); }
  body.nd-ui .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body.nd-ui .site-footer-top { grid-template-columns: 1fr; }
  body.nd-ui .site-footer { padding-block: var(--nd-sp-8) var(--nd-sp-5); }
  body.nd-ui .site-footer-bottom { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body.nd-ui .site-footer-col a:hover,
  body.nd-ui .site-footer-social a:hover { transform: none; }
}