/* ================================================================
   ke-atas.css - tombol melayang "kembali ke atas" (Revisi 21)
   Markup di layout.html, perilaku di ui.js (initKeAtas).
   Semua kelas berawalan "keatas-" / ".keatas" - aturan sejak Revisi 19:
   CSS satu ruang nama global, awalan nama komponen itu wajib.

   Bentuk: lingkaran putih + panah, dikelilingi CINCIN PROGRES yang terisi
   mengikuti posisi gulir. Jadi tombolnya sekaligus menjawab "sudah seberapa
   jauh saya menggulir?" - satu elemen, dua tugas, tanpa tambahan apa pun.
   Datanya sama dengan garis progres navbar, jadi keduanya selalu sinkron.
   ================================================================ */
.keatas{position:fixed;right:clamp(16px,2.6vw,30px);bottom:clamp(16px,2.6vw,30px);z-index:80;
  width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--canvas);color:var(--accent-strong);
  box-shadow:0 2px 6px rgba(20,36,58,.12),0 14px 34px rgba(20,36,58,.18);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s ease,transform .3s var(--ease),
    visibility 0s linear .3s,box-shadow .25s ease,color .25s ease}
/* visibility ikut transisi (delay .3s saat menghilang, 0s saat muncul)
   supaya tombol yang tenggelam tidak bisa di-tab atau diklik tak sengaja */
.keatas.tampil{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.keatas:hover{color:var(--accent);transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(20,36,58,.14),0 20px 44px var(--accent-shadow)}
.keatas:active{transform:translateY(-1px)}
.keatas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.keatas-panah{width:18px;height:18px;position:relative;z-index:1;
  transition:transform .25s var(--ease)}
.keatas:hover .keatas-panah{transform:translateY(-2px)}

/* cincin progres: track tipis selalu tampak, isinya diatur ui.js lewat
   stroke-dashoffset (keliling lingkaran r=22 = 138.2) */
.keatas-cincin{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);
  transform:rotate(-90deg);pointer-events:none}
.keatas-jalur{fill:none;stroke:var(--line);stroke-width:2}
.keatas-isi{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:138.2 138.2;stroke-dashoffset:138.2;
  transition:stroke-dashoffset .15s linear}

@media (max-width:560px){.keatas{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){
  .keatas,.keatas-panah,.keatas-isi{transition:none!important}
  .keatas:hover{transform:none}
}