/* ============ FOOTER ============ */
.site-footer {
  background: var(--white);
  color: var(--black);
  border-top: 1px solid var(--hairline);
}
.site-footer__content {
  width: var(--grid-width);
  margin: 0 auto;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .site-footer__content {
    flex-direction: row;
  }
}

/* Kiri: newsletter. Terukur @1280 padding 8rem 21.07rem 8rem 0,
   yaitu padding-right calc(4col + 3gutter) = 187.21px, plus border kanan. */
.site-footer__form {
  padding: 4rem 0 3.5rem;
}
@media (min-width: 1024px) {
  .site-footer__form {
    width: 50%;
    padding: 8rem calc(4 * var(--col) + 3 * var(--gutter)) 8rem 0;
    border-right: 1px solid var(--hairline);
  }
}

/* Terukur di mobile: margin 0 calc(col + gutter) 2.4rem, center.
   Bukan margin 0. Angkanya 29.4px @375 dan 73.91px @900. */
.site-footer__title {
  margin: 0 calc(var(--col) + var(--gutter)) 2.4rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .site-footer__title {
    margin: 0;
    text-align: left;
  }
}

/* Input dan tombol tumpang tindih dalam satu pill.
   Terukur: radius 10rem, border hairline, fokus jadi #515151.
   Jarak ke judul datang dari margin-bottom judul, jadi di mobile
   margin-top wrapper ini NOL. */
.site-footer__input-wrap {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 10rem;
  transition: border-color 0.33s var(--ease-media);
}
@media (min-width: 1024px) {
  .site-footer__input-wrap {
    margin-top: 8rem;
    width: calc(6 * var(--col) + 5 * var(--gutter));
  }
}
.site-footer__input-wrap:focus-within {
  border-color: var(--black7);
}
.site-footer__input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: max(1.6rem, 16px);
  padding: 1.6rem calc(var(--col) + var(--gutter) + 3.2rem) 1.6rem 3.2rem;
}
@media (min-width: 1024px) {
  /* lg:p-12 Coterie: clamp(11px, 1.2rem, 12px). Terukur 11px @1280. */
  .site-footer__input {
    font-size: clamp(11px, 1.2rem, 12px);
  }
}
.site-footer__submit {
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  transform: translateY(-50%);
  padding: 0 3.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--black7);
  font-weight: 600;
  font-size: max(1.2rem, 12px);
}
@media (min-width: 1024px) {
  .site-footer__submit {
    font-size: clamp(11px, 1.2rem, 12px);
  }
}

/* Kanan: kolom link, flex-wrap dengan gap 8rem, padding-left 4rem. */
.site-footer__links {
  display: none;
  list-style: none;
  margin: 0;
}
@media (min-width: 1024px) {
  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    width: 50%;
    padding: 8rem 0 8rem 4rem;
  }
}
/* p-10 Coterie: clamp(11px, 1rem, 10px). Terukur 11px @1280. */
.site-footer__col-title {
  display: block;
  font-size: clamp(11px, 1rem, 10px);
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 4rem;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__col li {
  margin-bottom: 1.2rem;
}
.site-footer__col li:last-child {
  margin-bottom: 0;
}
.site-footer__col a {
  font-size: clamp(11px, 1rem, 10px);
  line-height: 1.4;
  color: var(--black7);
  text-decoration: none;
}

/* Accordion mobile dan tablet. Terukur transisi height 0.8s.
   Garis pemisah menempel di TIAP item, bukan di pembungkusnya.
   Kalau dua duanya dipasang, garis paling atas jadi dobel. */
.site-footer__accordion {
  display: block;
}
@media (min-width: 1024px) {
  .site-footer__accordion {
    display: none;
  }
}
.site-footer__acc-item {
  border-top: 1px solid var(--hairline);
}
.site-footer__acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--black);
  /* p-16 Coterie, terukur 16px @375 dan 18.75px @900. Bukan 1.4rem. */
  font-size: max(1.6rem, 16px);
  line-height: 1.4;
  padding: 1.6rem calc((100% - var(--grid-width)) / 2);
}
.site-footer__acc-icon {
  /* Ukuran WAJIB ditulis. SVG ini tidak punya atribut width/height dan
     viewBox saja tidak memberi ukuran intrinsik, jadi sebagai flex item
     ia memuai memenuhi sisa ruang tombol: terukur 307, 299, dan 286px
     untuk tiga akordeon yang sama, berbeda beda persis karena tiap
     tombol menyisakan ruang yang berbeda. Terukur 13px di rujukan. */
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.8s var(--ease-in-overshoot);
}
.site-footer__acc-btn[aria-expanded='true'] .site-footer__acc-icon {
  transform: rotate(45deg);
}
.site-footer__acc-panel {
  display: grid;
  /* minmax(0, ...) WAJIB, bukan 0fr telanjang. Track fr punya minimum
     otomatis auto, sehingga 0fr tidak pernah menutup sampai nol: dia
     berhenti di min-content isinya. Di sini yang mengganjal padding-block
     2.6rem milik .site-footer__acc-inner, jadi tiap panel tertutup tetap
     menyisakan 52px dan footer membengkak. min-height: 0 pada anaknya
     tidak menolong, karena padding tidak ikut terpangkas olehnya. */
  grid-template-rows: minmax(0, 0fr);
  visibility: hidden;
  transition:
    grid-template-rows 0.8s var(--ease-in-overshoot),
    visibility 0.8s var(--ease-in-overshoot);
  overflow: clip;
}
.site-footer__acc-panel[data-open='true'] {
  grid-template-rows: minmax(0, 1fr);
  visibility: visible;
}
.site-footer__acc-inner {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2rem;
  padding: 2.6rem calc((100% - var(--grid-width)) / 2);
}
.site-footer__acc-inner a {
  color: var(--black);
  font-size: max(1.4rem, 14px);
  text-decoration: none;
}

/* Logo footer, warna brand biru.
   Terukur 20rem @375 dan @900, 23.5rem @1280. */
.site-footer__logo-wrap {
  display: flex;
  justify-content: center;
}
.site-footer__logo {
  width: 20rem;
  color: var(--blue);
  margin: 4.8rem 0 3.2rem;
}
@media (min-width: 1024px) {
  .site-footer__logo {
    width: 23.5rem;
    margin: 8rem 0;
  }
}

/* Palang bawah footer: saudara .site-footer__content, selebar penuh.
   Aturan ini dulu bertabrakan nama dengan <p> subtitle newsletter yang
   memakai kelas sama, sehingga subtitle itu ikut memungut border-top dan
   memunculkan garis horizontal liar di atasnya. Subtitle kini memakai
   .site-footer__note sendiri. */
.site-footer__sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--hairline);
}

/* Perataan tengahnya dulu datang dari flex-direction column plus
   align-items center milik aturan di atas, bukan kebetulan. Ditulis
   ulang sebagai text-align supaya niatnya jelas.

   margin-bottom WAJIB ada. Elemen ini tambahan kita, tidak ada di
   sumbernya: di sana bloknya langsung judul lalu input. Judul membawa
   margin-bottom 2.4rem sendiri, sedangkan baris ini tidak membawa apa
   apa, sehingga input menempel rapat tanpa jeda sama sekali. Nilainya
   disamakan dengan jarak yang sudah dipakai judul di blok yang sama. */
.site-footer__note {
  margin-bottom: 2.4rem;
  text-align: center;
}
.site-footer__legals {
  width: var(--grid-width);
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2.4rem;
  color: var(--black7);
}
@media (min-width: 1024px) {
  .site-footer__legals {
    flex-direction: row;
    padding: 1.6rem 0;
  }
}
.site-footer__copy,
.site-footer__legal-links a {
  font-family: var(--font-mono-ui);
  font-size: clamp(11px, 1rem, 10px);
  line-height: 1.4;
  letter-spacing: -0.06em;
  color: inherit;
  text-decoration: none;
}
/* Di bawah 1024 tidak ada gap: 4 link dibagi rata dengan space-between
   dan boleh membungkus barisnya sendiri. */
.site-footer__legal-links {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 8rem;
}
@media (min-width: 1024px) {
  .site-footer__legal-links {
    width: auto;
    margin-top: 0;
    column-gap: 2.4rem;
  }
}