/* =====================================================================
   ux.css — lapisan interaksi: muncul saat digulir, efek sentuh kartu,
   bilah kemajuan baca, dan tombol kembali ke atas.
   Semua efek otomatis mati bila pengguna memilih "kurangi gerakan".
   ===================================================================== */

/* Bilah kemajuan membaca di tepi atas layar */
.ux-kemajuan{position:fixed;top:0;left:0;z-index:200;height:3px;width:100%;
  background:linear-gradient(90deg,var(--hijau,#0B7A3E),var(--emas,#D9A62B));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Muncul halus saat elemen masuk layar (hanya aktif bila JS berjalan) */
.ux-siap .ux-muncul{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--ux-tunda,0ms);will-change:opacity,transform}
.ux-siap .ux-muncul.ux-tampak{opacity:1;transform:none}

/* Kartu: terangkat lembut saat disentuh kursor */
.kartu{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .25s ease}
@media (hover:hover){
  .kartu:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(14,58,41,.35);border-color:var(--garis-2,#C9D1CC)}
  .kartu .foto,.kartu figure{overflow:hidden}
  .kartu .foto img,.kartu figure img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .kartu:hover .foto img,.kartu:hover figure img{transform:scale(1.04)}
  .tombol{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
  .tombol-utama:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(11,122,62,.75)}
  .tombol-kedua:hover{transform:translateY(-1px)}
  .struktur-lembaga li{transition:transform .25s ease,filter .25s ease}
  .struktur-lembaga li:hover{transform:translateX(4px);filter:brightness(1.08)}
  .tabel tbody tr{transition:background-color .2s ease}
  .tabel tbody tr:hover{background:var(--kertas,#F5F7F3)}
}
.tombol:active{transform:translateY(0) scale(.98)}

/* Fokus papan ketik yang jelas */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--emas,#D9A62B);outline-offset:3px;border-radius:6px}

/* Kepala halaman: bayangan halus saat digulir */
.kepala{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.kepala[data-padat="ya"]{box-shadow:0 8px 24px -18px rgba(14,58,41,.45)}

/* Tombol kembali ke atas */
.ux-atas{position:fixed;right:20px;bottom:20px;z-index:150;width:48px;height:48px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:var(--hijau-gelap,#0E3A29);box-shadow:0 12px 28px -12px rgba(14,58,41,.6);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),background-color .2s ease}
.ux-atas.ux-tampil{opacity:1;transform:none;pointer-events:auto}
.ux-atas:hover{background:var(--hijau,#0B7A3E)}
.ux-atas svg{width:20px;height:20px}
@media (max-width:560px){.ux-atas{right:14px;bottom:14px;width:44px;height:44px}}

/* Tautan dalam teks: garis bawah yang tumbuh halus */
.prosa a,.visi a,.pilar-tautan a{transition:color .2s ease,text-decoration-color .2s ease,border-color .2s ease}

@media (prefers-reduced-motion:reduce){
  .ux-siap .ux-muncul{opacity:1!important;transform:none!important;transition:none!important}
  .kartu,.kartu:hover,.kartu img{transform:none!important;transition:none!important}
  .ux-kemajuan{display:none}
}
@media print{.ux-kemajuan,.ux-atas{display:none}}