/* v758: desain-profesional (tahap 3 + perbaikan tahap 5 + optimasi perangkat tahap 6).
   Lapisan penghalus: umpan balik sentuh, fokus, elevasi, gerak. Hanya tambahan, tanpa memakai penimpa paksa,
   tanpa mengubah ukuran/warna/tata letak. Matikan dengan html.dp-off. */
:root{
  --dp-gerak:.16s; --dp-ease:cubic-bezier(.22,1,.36,1);
  --dp-el-0:none;
  --dp-el-1:0 1px 2px rgba(43,19,48,.06),0 4px 12px rgba(180,40,110,.08);
  --dp-el-2:0 2px 4px rgba(43,19,48,.08),0 10px 24px rgba(180,40,110,.16);
  --dp-fokus:#FF1D86; --dp-pilih:rgba(255,29,134,.22); --dp-fokus-tebal:3px;
}
html[data-tema="gelap"]{
  --dp-el-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.3);
  --dp-el-2:0 2px 4px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.42);
  --dp-fokus:#FF8FD4; --dp-pilih:rgba(255,143,212,.28);
}
html:not(.dp-off){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scrollbar-width:thin;scrollbar-color:var(--dp-fokus) transparent}
html:not(.dp-off) ::selection{background:var(--dp-pilih)}
/* Fokus keyboard. Tombol, tautan dan summary SUDAH punya cincin dari tombol-umpan.css (bayangan ganda + garis luar
   transparan untuk mode kontras tinggi); di sini hanya isian dan elemen lain yang belum tercakup (v758: dulu ikut
   menyebut tombol/tautan, tetapi kalah spesifisitas, jadi dibuang). */
html:not(.dp-off) :where(select,input,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:var(--dp-fokus-tebal) solid var(--dp-fokus);outline-offset:3px}
html:not(.dp-off) :where(a,button,summary,[role="button"]){-webkit-tap-highlight-color:transparent}
/* Banner Kontes di Beranda: aturan lama memakai box-shadow:none!important, sehingga cincin bayangan dari tombol-umpan.css hilang
   dan garis luarnya transparan (fokus keyboard tak terlihat, ditemukan di uji v758). Dipakai garis luar buram (id menang tanpa penimpa paksa). */
html:not(.dp-off) body #site-content #opsi-layanan .kt-banner:focus-visible{outline:var(--dp-fokus-tebal) solid var(--dp-fokus);outline-offset:3px}
/* Keadaan tekan: hanya untuk yang benar-benar bisa ditekan. Chip contoh di Beranda adalah <span> biasa (v758: dulu ikut
   bergerak saat disentuh, seolah bisa diklik). */
html:not(.dp-off) :where(.btn-primary,.link-ghost,.bidang-title,button.chip,a.chip,[role="button"].chip){transition:transform var(--dp-gerak) var(--dp-ease),box-shadow var(--dp-gerak) var(--dp-ease)}
html:not(.dp-off) :where(.btn-primary,button.chip,a.chip,[role="button"].chip):active{transform:scale(.97)}
html:not(.dp-off) .bidang-title:active{transform:scale(.98)}
html:not(.dp-off) .bidang-group{box-shadow:var(--dp-el-1);transition:box-shadow var(--dp-gerak) var(--dp-ease),transform var(--dp-gerak) var(--dp-ease)}
/* hover hanya di perangkat berkursor (HP tidak "lengket"); tablet/desktop mendapat angkat halus */
@media (hover:hover) and (pointer:fine){
  html:not(.dp-off) .bidang-group:hover,html:not(.dp-off) :where(button.chip,a.chip,[role="button"].chip):hover{transform:translateY(-2px);box-shadow:var(--dp-el-2)}
  html:not(.dp-off) .link-ghost:hover{text-decoration:underline;text-underline-offset:4px}
}
/* HP kecil/lawas: bayangan lebih ringan (kurang beban gambar ulang) */
@media (max-width:480px){
  :root{--dp-el-1:0 1px 2px rgba(43,19,48,.06),0 3px 8px rgba(180,40,110,.07);--dp-el-2:0 2px 4px rgba(43,19,48,.08),0 6px 14px rgba(180,40,110,.13)}
}
/* layar lebar: elevasi sedikit lebih dalam supaya kartu tetap terpisah dari latar luas */
@media (min-width:1024px){
  :root{--dp-el-1:0 1px 3px rgba(43,19,48,.07),0 6px 18px rgba(180,40,110,.1)}
}
/* kontras tinggi diminta pengguna: cincin fokus lebih tebal */
@media (prefers-contrast:more){:root{--dp-fokus-tebal:4px}}
/* mode warna paksa (Windows kontras tinggi): bayangan tak terlihat, beri garis tepi */
@media (forced-colors:active){
  html:not(.dp-off) .bidang-group{box-shadow:none;border:1px solid CanvasText}
}
@media (prefers-reduced-motion:reduce){
  html:not(.dp-off) :where(.btn-primary,.link-ghost,.bidang-title,.bidang-group,button.chip,a.chip,[role="button"].chip){transition:none}
  html:not(.dp-off) :where(.btn-primary,.bidang-title,button.chip,a.chip,[role="button"].chip):active,
  html:not(.dp-off) :where(.bidang-group,button.chip,a.chip,[role="button"].chip):hover{transform:none}
}
@media print{html:not(.dp-off) .bidang-group{box-shadow:none}}