/* Tombol dukungan melayang.

   Bulat saat diam, melebar saat disorot atau difokus. Bentuk bulat kecil
   mengambil ruang paling sedikit dari isi halaman; kata "Dukung" baru muncul
   ketika orang memang sedang menaruh perhatian padanya.

   Ditaruh di sudut kanan bawah, bukan di tengah tepi. Tepi tengah adalah
   tempat ibu jari beristirahat saat menggulir di ponsel, dan tombol di sana
   akan tertekan tanpa sengaja. */

.dk-apung {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.dk-apung-tombol {
  display: flex;
  align-items: center;
  gap: 0;
  padding: .8rem;
  border-radius: 99px;
  background: #f472b6;
  color: #1a0a12;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: gap .18s ease, padding .18s ease;
}

/* Teksnya dilebarkan dari nol, bukan disembunyikan dengan display:none.
   display:none akan membuatnya lenyap dari pembaca layar juga, padahal ikon
   hati sendirian tidak menerangkan apa pun. */
.dk-apung-teks {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .18s ease;
}

.dk-apung-tombol:hover,
.dk-apung-tombol:focus-visible {
  gap: .45rem;
  padding-right: 1.1rem;
}

.dk-apung-tombol:hover .dk-apung-teks,
.dk-apung-tombol:focus-visible .dk-apung-teks {
  max-width: 7rem;
}

.dk-apung-tombol:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dk-apung-tombol .ik-ikon { display: block; flex: 0 0 auto }

/* Tombol tutup sengaja kecil dan samar: ia harus ada, tetapi bukan yang
   pertama tertangkap mata. */
.dk-apung-tutup {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--border-color, rgba(193,193,193,.25));
  background: var(--bg-card, #111110);
  color: var(--text-muted, #8a8a8a);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: .55;
  transition: opacity .15s;
  align-self: flex-start;
}

.dk-apung-tutup:hover,
.dk-apung-tutup:focus-visible { opacity: 1 }

/* Pada layar sempit, sudut kanan bawah sering ditempati bilah navigasi
   peramban. Dinaikkan sedikit supaya tidak tertimpa. */
@media (max-width: 30rem) {
  .dk-apung { right: .75rem; bottom: 1.4rem }
  .dk-apung-tombol { padding: .72rem }
}

@media (prefers-reduced-motion: reduce) {
  .dk-apung-tombol, .dk-apung-teks { transition: none }
}