/*
 * Footer tema Clay (LEX-246). Dimuat di SEMUA halaman Clay, sesudah style.css,
 * phase1..4, gerak.css, dan kontrol.css (base.html).
 *
 * Mobile-first: aturan dasar untuk HP, lalu `min-width: 641px` dan `861px`.
 * Markupnya (`clay/partials/footer.html`) memakai kelas `fc-`; `.site-footer`
 * dipertahankan di elemen `<footer>` karena tes dan Pengaturan Tampilan
 * mengaitkannya. Aturan lama di style.css yang masih mengenai `.site-footer`
 * (latar gelap, padding, warna teks pudar, ukuran logo) DITIMPA di sini -- jangan
 * menyunting style.css untuk footer.
 *
 * Tiga hal yang mengikat:
 * - Judul kolom: `_appearance_css.html` memaku `.site-footer h3 { font-size:
 *   1rem !important }`. Judul ubin di sini label kecil, jadi `!important` dengan
 *   spesifisitas lebih tinggi.
 * - gerak.css menggeser SEMUA `.site-footer a` ke kanan saat hover. Tombol,
 *   bulatan sosial, dan logo punya gerak sendiri di bawah.
 * - Di HP ada navigasi bawah melayang (`.tpx-botnav`, body diberi padding 96px)
 *   dan tombol WhatsApp + kembali-ke-atas di kanan bawah. Padding bawah footer
 *   memastikan baris hak cipta berhenti DI ATAS keduanya saat digulir habis.
 */

.fc-sr { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================= Kerangka ================= */
.site-footer { padding: 8px 0 28px; background: transparent; color: var(--ink); }
.fc-wadah { width: min(calc(100% - 24px), var(--container)); margin-inline: auto; }
.fc-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 22px 16px 18px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--lavender) 60%, var(--surface)) 0%, var(--surface) 46%, color-mix(in srgb, var(--peach) 45%, var(--surface)) 100%);
  box-shadow: 0 30px 64px rgba(70, 48, 96, .14), inset 0 -10px 22px rgba(105, 78, 151, .08), inset 0 10px 22px rgba(255, 255, 255, .85);
}
.fc-panel::before { content: ""; position: absolute; z-index: -1; top: -90px; right: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lavender-strong) 55%, transparent), transparent 70%); pointer-events: none; }

.fc-label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 800 .68rem/1.2 var(--clay-accent-font); letter-spacing: .16em; text-transform: uppercase; }
.fc-label::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--brand-deep); }

/* ================= Kepala: merek + ajakan ================= */
.fc-kepala { display: grid; gap: 18px; }
.fc-merek { display: grid; gap: 14px; justify-items: start; padding: 0 4px; }
.site-footer .fc-logo { gap: 12px; min-width: 0; color: var(--ink); }
.site-footer .fc-logo .brand-mark { width: 46px; height: 46px; color: var(--brand); filter: drop-shadow(0 8px 10px rgba(70, 48, 96, .14)); }
.site-footer .fc-logo .brand-mark circle { fill: var(--surface); }
.site-footer .fc-logo .brand-mark:has(> img) { width: 128px; height: auto; }
.site-footer .fc-logo .brand-copy strong { color: var(--ink); font-size: 1.02rem; }
.site-footer .fc-logo .brand-copy small { color: var(--muted); }
.site-footer .fc-tentang { max-width: 34rem; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }

.fc-sosial { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fc-sosial__daftar { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer .fc-bulat { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 15px; background: var(--surface); box-shadow: 0 10px 18px rgba(83, 60, 101, .13), inset 0 -3px 6px rgba(78, 52, 96, .08), inset 0 3px 6px rgba(255, 255, 255, .9); color: var(--brand); }
.site-footer .fc-bulat:nth-child(3n+2) { background: var(--peach); }
.site-footer .fc-bulat:nth-child(3n) { background: var(--mint); }
.fc-bulat svg { width: 20px; height: 20px; transition: transform .32s var(--clay-pegas, ease); }
.site-footer .fc-bulat:hover { color: var(--brand); }

.fc-ajakan { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 8px; padding: 18px 16px 16px; border-radius: 24px; background: var(--peach); box-shadow: var(--shadow-clay-peach); }
.fc-ajakan__seni { position: absolute; z-index: -1; top: -6px; right: -6px; width: 84px; height: 84px; opacity: .9; transform: rotate(10deg); animation: clay-melayang 7s ease-in-out infinite; }
.site-footer .fc-ajakan__judul { max-width: 15rem; margin: 0 0 6px; color: var(--ink); font: 800 1.3rem/1.15 var(--clay-heading-font); letter-spacing: -.035em; }
.fc-ajakan__tombol { display: grid; gap: 8px; }
.site-footer .fc-tombol { justify-content: flex-start; min-width: 0; padding-inline: 16px; }
.site-footer .fc-tombol span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-footer .fc-tombol svg { flex: 0 0 auto; }
.site-footer .fc-tombol.clay-button--secondary { color: var(--ink); }

/* ================= Kolom tautan: ubin ================= */
/* HP: dua ubin menu berdampingan (bukan ditumpuk satu kolom), ubin
   informasi selebar panel di bawahnya. */
.fc-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.fc-ubin { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 16px 14px 12px; border-radius: 22px; background: var(--lavender); box-shadow: 0 14px 28px var(--purple-shadow), inset 0 -5px 10px rgba(105, 78, 151, .14), inset 0 5px 10px rgba(255, 255, 255, .7); transition: transform .32s var(--clay-pegas, ease), box-shadow .3s ease; }
.fc-ubin:nth-child(2) { background: var(--mint); box-shadow: 0 14px 28px var(--mint-shadow), inset 0 -5px 10px rgba(43, 119, 78, .12), inset 0 5px 10px rgba(255, 255, 255, .72); }
.fc-ubin--info { grid-column: 1 / -1; background: var(--surface); box-shadow: 0 14px 28px rgba(83, 60, 101, .1), inset 0 -5px 10px rgba(78, 52, 96, .06), inset 0 5px 10px rgba(255, 255, 255, .9); }
/* Admin hanya mengisi satu menu: ubin menu itu ikut selebar panel di HP. */
.fc-ubin:first-child:nth-last-child(2) { grid-column: 1 / -1; }
.fc-ubin:nth-child(2).fc-ubin--info { background: var(--surface); box-shadow: 0 14px 28px rgba(83, 60, 101, .1), inset 0 -5px 10px rgba(78, 52, 96, .06), inset 0 5px 10px rgba(255, 255, 255, .9); }
.site-footer .fc-ubin h3.fc-judul { margin: 0 0 6px; color: var(--ink); font: 800 .7rem/1.3 var(--clay-accent-font); font-size: .7rem !important; letter-spacing: .14em; text-transform: uppercase; }
.site-footer .fc-ubin a { display: block; max-width: 100%; margin: 0; padding: 6px 0; color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.site-footer .fc-ubin a:hover { color: var(--brand); }
.site-footer .fc-alamat { display: flex; gap: 8px; margin: 2px 0 6px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.fc-alamat img { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }

/* ================= Hak cipta ================= */
.fc-bawah { display: grid; gap: 4px; margin-top: 16px; padding: 14px 4px 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); color: var(--muted); font-size: .74rem; line-height: 1.5; text-align: center; }
.fc-bawah__alamat { display: none; }

/* Navigasi bawah melayang + WA + kembali-ke-atas (HP/tablet): baris hak cipta
   harus selesai di atas tombol paling tinggi (kembali-ke-atas, ±194px dari
   dasar layar saat digulir habis). body sudah membawa 96px untuk navigasinya. */
/* Sejak 90fca5e6 navigasi bawah Clay disembunyikan di 861-991, jadi jaraknya cukup sampai 860. */
@media (max-width: 860px) {
  .site-footer { padding-bottom: 88px; }
}
@media (max-width: 860px) {
  body:has(#wa-floating-btn):not(:has(.tpx-botnav)) .site-footer { padding-bottom: 170px; }
}

/* ================= ≥641px (tablet) ================= */
@media (min-width: 641px) {
  .fc-wadah { width: min(calc(100% - 40px), var(--container)); }
  .fc-panel { padding: 30px 28px 20px; border-radius: 36px; }
  .fc-kepala { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .site-footer .fc-logo .brand-mark:has(> img) { width: 140px; }
  .fc-ajakan { padding: 22px 20px 20px; }
  .fc-kolom { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }
  .fc-ubin--info, .fc-ubin:first-child:nth-last-child(2) { grid-column: auto; }
  .fc-ubin { padding: 18px 18px 14px; }
  .fc-bawah { grid-template-columns: 1fr auto; gap: 16px; margin-top: 22px; padding-top: 16px; text-align: left; }
}

/* ================= ≥861px (desktop) ================= */
@media (min-width: 861px) {
  .site-footer { padding: 24px 0 64px; }
  .fc-panel { padding: 46px 48px 24px; border-radius: 40px; }
  .fc-panel::before { width: 420px; height: 420px; top: -160px; right: 20%; }
  .fc-kepala { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
  .fc-merek { gap: 16px; }
  .site-footer .fc-logo .brand-mark:has(> img) { width: 156px; }
  .site-footer .fc-tentang { font-size: .94rem; }
  .fc-ajakan { padding: 26px 26px 24px; border-radius: 28px; }
  .fc-ajakan__seni { top: -10px; right: -4px; width: 120px; height: 120px; }
  .site-footer .fc-ajakan__judul { max-width: 17rem; font-size: 1.6rem; }
  /* Turun ke baris baru kalau tidak muat, bukan dipotong (alamat email panjang, 912-1300). */
  .fc-ajakan__tombol { display: flex; flex-wrap: wrap; gap: 10px; }
  .fc-kolom { gap: 18px; margin-top: 34px; }
  .fc-ubin { padding: 22px 22px 16px; border-radius: 26px; }
  .fc-bawah__alamat { display: block; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ================= Gerak ================= */
.fc-bulat:active, .fc-tombol:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .site-footer .fc-logo:hover { transform: none; }
  .site-footer .fc-tombol:hover { transform: translateY(-3px) scale(1.03); }
  .site-footer .fc-bulat:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: var(--clay-angkat); }
  .site-footer .fc-bulat:hover svg { animation: clay-goyang .6s ease; }
  .fc-ubin:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--clay-angkat); }
  .fc-ubin:nth-child(even):hover { transform: translateY(-6px) rotate(.8deg); }
  .fc-ajakan:hover .fc-ajakan__seni { animation: clay-goyang .6s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-ajakan__seni { animation: none; }
}