/*
  Lapisan keadaan interaksi: fokus keyboard, tombol nonaktif, umpan balik tekan,
  hover tombol utama, dan penghormatan setelan gerak.

  Aturan di sini sengaja hanya aktif sebagai respons atas tindakan pengguna
  (hover, klik, fokus keyboard, pengiriman form). Tampilan halaman saat diam
  tidak berubah sama sekali, dan tidak ada aset yang diganti.

  Dimuat SETELAH <style> tiap halaman supaya menang pada spesifisitas yang sama,
  tetapi tetap kalah dari aturan halaman yang lebih spesifik.
*/

/* ------------------------------------------------------------------
   A1. Cincin fokus keyboard
   Halaman memakai outline:none pada input (6 tempat) dan tidak ada
   :focus-visible sama sekali, sehingga pengguna keyboard kehilangan penanda
   posisi kursor. Cincin ini memakai box-shadow, bukan outline, supaya tidak
   ditimpa aturan outline:none yang lebih spesifik di tiap halaman.

   Cincin putih di dalam membuatnya tetap terbaca di atas latar navy, cincin
   biru di luar terbaca di atas latar terang. :focus-visible hanya aktif saat
   navigasi keyboard, jadi pengguna tetikus tidak melihat perubahan apa pun.
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0057A3;
  border-radius:inherit;
}

/* ------------------------------------------------------------------
   A2. Tombol saat proses berjalan
   Tiga formulir mematikan tombol kirim saat dikirim, tetapi tidak ada satu pun
   aturan :disabled sehingga tombolnya tampak sama persis seperti sebelum
   ditekan. Akibatnya orang tidak tahu prosesnya sedang berjalan.
   ------------------------------------------------------------------ */
button:disabled,
button[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* ------------------------------------------------------------------
   A3. Umpan balik tekan
   Hanya tampak selama tombol ditahan; terasa terutama di layar sentuh.
   ------------------------------------------------------------------ */
button:not(:disabled):active,
a.btn-primary:active,
a.btn-outline:active,
a.btn-ghost-header:active,
a.cp-btn:active{
  transform:translateY(1px);
}

/* ------------------------------------------------------------------
   Tombol pilih foto pada baris katalog produk & sertifikasi.

   Sebelumnya input berkas ditampilkan apa adanya dengan width:64px, padahal
   tombol bawaan browser ("Choose File") lebih lebar dari itu sehingga selalu
   terpotong. Input aslinya kini disembunyikan dan dibungkus label, sehingga
   yang terlihat adalah tombol yang benar-benar muat di kolom 64px.

   Berkasnya tetap dibaca lewat onchange lalu disimpan ke objek baris dan
   dikirim manual sebagai FormData, jadi menyembunyikan input tidak
   memengaruhi proses unggah.

   Dipakai bersama oleh daftar_umkm.html dan dashboard_admin.html.
   ------------------------------------------------------------------ */
label.pilih-foto{
  display:block; width:64px; margin-top:6px; padding:5px 4px;
  text-align:center; font-size:11px; font-weight:700; line-height:1.3;
  /* Eksplisit: tanpa ini label mewarisi text-transform:uppercase dari aturan
     .form-field label di halaman, sehingga jadi ALL-CAPS tanpa disengaja. */
  text-transform:none; letter-spacing:0;
  color:var(--bi-blue); background:var(--surface);
  border:1px solid var(--border); border-radius:7px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
label.pilih-foto:hover{border-color:var(--bi-blue-light);}
label.pilih-foto input[type=file]{display:none;}

/* ------------------------------------------------------------------
   A5. Warna sorotan teks
   Sebelumnya biru bawaan browser. Hanya tampak saat teks disorot.
   ------------------------------------------------------------------ */
::selection{
  background:rgba(201,162,39,.30);
}

/* ------------------------------------------------------------------
   B1. Hover tombol utama
   .btn-primary, .btn-gold-header, dan .admin-add-btn tidak pernah punya aturan
   hover sejak versi pertama, padahal inilah tombol terpenting di tiap halaman
   (Jelajahi Direktori, Daftar Sekarang, Tambah UMKM, Masuk ke Dashboard).
   Warna diamnya tidak diubah; hanya sedikit menua saat disentuh penunjuk.
   ------------------------------------------------------------------ */
.btn-primary,
.btn-gold-header,
.admin-add-btn{
  transition:background-color .15s ease, transform .15s ease;
}
.btn-primary:hover:not(:disabled),
.btn-gold-header:hover,
.admin-add-btn:hover{
  background-color:#B08D1E;
}

/* ------------------------------------------------------------------
   B2. Penghalusan hover kartu yang sudah ada
   Kartu sudah naik 3px saat hover. Yang diubah hanya kurva dan properti yang
   ditransisikan: sebelumnya `transition:.2s ease` mentransisikan seluruh
   properti, termasuk yang tidak pernah berubah.
   ------------------------------------------------------------------ */
.card,
.produk-card,
.benefit-card{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease,
             border-color .22s ease;
}

/* ------------------------------------------------------------------
   C1. Pergeseran pola lingkaran pada latar navy
   Pola tidak diganti dan opacity-nya tetap. Nilai --geser-pola diisi efek.js
   mengikuti posisi gulir; tanpa JavaScript nilainya 0 dan tampilannya persis
   seperti sekarang.
   ------------------------------------------------------------------ */
.hero-pattern,
.login-wrap::before{
  /*
    Satu-satunya definisi pola lingkaran. Sebelumnya ditulis ulang di empat
    halaman dan sempat menyimpang: halaman login hanya memuat dua lingkaran
    tengah tanpa empat lingkaran sudut, sehingga polanya tidak menyambung
    antar-ubin dan terlihat renggang, plus opacity-nya 0.14 bukan 0.16.
    Dikumpulkan di sini supaya keempat halaman tidak bisa menyimpang lagi.
  */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23C9A227' stroke-width='1.1'><circle cx='60' cy='60' r='42'/><circle cx='60' cy='60' r='26'/><circle cx='0' cy='0' r='42'/><circle cx='120' cy='0' r='42'/><circle cx='0' cy='120' r='42'/><circle cx='120' cy='120' r='42'/></g></svg>");
  background-size:120px 120px;
  background-position:0 var(--geser-pola, 0px);
  opacity:.16;
}

/* ------------------------------------------------------------------
   Sorotan tagline "naik kelas" pada judul portal.
   Digambar sebagai garis emas di belakang teks, bukan penggantian warna huruf,
   supaya kontras teks putih di atas navy tidak berkurang.
   ------------------------------------------------------------------ */
.hero h1 .tagline{
  background-image:linear-gradient(var(--bi-gold), var(--bi-gold));
  background-repeat:no-repeat;
  background-size:100% .12em;
  background-position:0 100%;
  padding:0 .06em .1em;
}

/* ------------------------------------------------------------------
   Cegah zoom paksa Safari iOS pada layar sentuh.

   Safari iOS memperbesar halaman saat pengguna mengetuk input yang ukuran
   fontnya di bawah 16px, dan tidak mengembalikannya setelah selesai. Aturan ini
   semula ditulis di <style> tiap halaman, lalu ikut hilang ketika
   dashboard_admin.html diambil utuh dari cabang lanjut. Dipindahkan ke berkas
   bersama supaya berlaku otomatis di semua halaman dan tidak bisa tertinggal
   lagi saat berkas diganti.

   input[type=file] dikecualikan: pemilih berkas tidak melibatkan pengetikan,
   dan memaksa 16px di sana justru melebarkan tombol bawaan browser.
   ------------------------------------------------------------------ */
@media(max-width:820px){
  input:not([type=file]), select, textarea{font-size:16px !important;}
}

/* ------------------------------------------------------------------
   A4. Menghormati setelan "kurangi gerak" pada sistem operasi
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-pattern,
  .login-wrap::before{
    background-position:0 0;
  }
}