/*
 * FPRB Jambidan — panel aksesibilitas (gratis, tanpa layanan pihak ketiga).
 *
 * Setelan pengunjung disimpan di localStorage dan dipasang sebagai kelas pada
 * <html> oleh skrip pendek di <head> layouts/public.php, jadi halaman tidak
 * "berkedip" saat dimuat. Panel dan pembaca suara ada di js/fprb-akses.js.
 */

/* ---------------------------------------------------------------
   Ukuran teks (semua ukuran Bootstrap & situs memakai rem)
   --------------------------------------------------------------- */
html.akses-teks-1 { font-size: 112.5%; }
html.akses-teks-2 { font-size: 125%; }
html.akses-teks-3 { font-size: 150%; }

/* ---------------------------------------------------------------
   Keterbacaan: jarak baris, huruf, kata, paragraf (WCAG 1.4.12)
   --------------------------------------------------------------- */
html.akses-jarak body { line-height: 1.9 !important; letter-spacing: .06em !important; word-spacing: .16em !important; }
html.akses-jarak p, html.akses-jarak li { margin-bottom: 1.1em; max-width: 72ch; }
html.akses-jarak h1, html.akses-jarak h2, html.akses-jarak h3 { letter-spacing: .02em !important; }

/* ---------------------------------------------------------------
   Kontras tinggi: hitam, putih, kuning
   --------------------------------------------------------------- */
html.akses-kontras {
    --dasar: #000; --permukaan: #000; --permukaan-2: #000;
    --garis: #fff; --garis-kuat: #fff;
    --tinta: #fff; --tinta-2: #fff;
    --rambu: #ffe500; --rambu-tua: #fff36b; --rambu-muda: #000; --di-rambu: #000; --rambu-rgb: 255, 229, 0;
    --awas-teks: #ff9aa8;
    --bs-body-bg: #000; --bs-body-color: #fff; --bs-secondary-color: #fff; --bs-border-color: #fff;
    --bs-link-color: #ffe500; --bs-link-hover-color: #fff36b;
}
html.akses-kontras body { background: #000 !important; color: #fff !important; }
html.akses-kontras .shader,
html.akses-kontras .kaki-raksasa { display: none !important; }
html.akses-kontras *:not(.leaflet-container *):not(img):not(svg *) { text-shadow: none !important; box-shadow: none !important; }
html.akses-kontras .kartu, html.akses-kontras .card, html.akses-kontras .langkah-butir,
html.akses-kontras .form-control, html.akses-kontras .form-select, html.akses-kontras .alert,
html.akses-kontras .kepala-situs .navbar { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; }
html.akses-kontras .hero, html.akses-kontras .kepala-halaman { background: #000 !important; }
html.akses-kontras .form-text, html.akses-kontras .daftar-ket, html.akses-kontras .text-secondary,
html.akses-kontras .text-body-secondary, html.akses-kontras .text-muted { color: #fff !important; }
html.akses-kontras a:not(.btn) { color: #ffe500 !important; text-decoration: underline !important; }
html.akses-kontras .kepala-situs .nav-link[aria-current] { background: #ffe500 !important; color: #000 !important; text-decoration: none !important; }
html.akses-kontras .btn { border-width: 2px !important; }
html.akses-kontras .form-control::placeholder { color: #d0d0d0 !important; opacity: 1; }

/* ---------------------------------------------------------------
   Garis bawahi semua tautan
   --------------------------------------------------------------- */
html.akses-tautan a:not(.btn):not(.merek) { text-decoration: underline !important; text-underline-offset: .18em; text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------
   Penanda fokus tebal (untuk pengguna keyboard)
   --------------------------------------------------------------- */
html.akses-fokus :focus-visible,
html.akses-fokus :focus { outline: 4px solid #ffe500 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #000 !important; }

/* ---------------------------------------------------------------
   Kursor besar
   --------------------------------------------------------------- */
html.akses-kursor, html.akses-kursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.6 1 3.9 7.3-2.7 1.4-3.9-7.3L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.akses-kursor a, html.akses-kursor button, html.akses-kursor [role="button"], html.akses-kursor label, html.akses-kursor select {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 013 0V10h.5V8.5a1.5 1.5 0 013 0V10h.5a1.5 1.5 0 013 0v5.5c0 3.6-2.4 6.5-6 6.5h-1c-2.2 0-3.6-.9-4.8-2.6L4.6 15a1.5 1.5 0 012.4-1.8L9 15z' fill='%23ffe500' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 16 4, pointer !important;
}

/* ---------------------------------------------------------------
   Hentikan animasi (selain setelan "kurangi gerakan" perangkat)
   --------------------------------------------------------------- */
html.akses-tenang *, html.akses-tenang *::before, html.akses-tenang *::after {
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; scroll-behavior: auto !important;
}
html.akses-tenang [data-aos] { opacity: 1 !important; transform: none !important; }
html.akses-tenang .shader, html.akses-tenang .progres-gulir { display: none !important; }

/* ---------------------------------------------------------------
   Sorotan blok yang sedang dibacakan
   --------------------------------------------------------------- */
.akses-dibaca { outline: 3px dashed var(--rambu) !important; outline-offset: 4px; background: rgba(var(--rambu-rgb), .12) !important; border-radius: 6px; }
html.akses-klikbaca main p, html.akses-klikbaca main li, html.akses-klikbaca main h1, html.akses-klikbaca main h2,
html.akses-klikbaca main h3, html.akses-klikbaca main td, html.akses-klikbaca main th, html.akses-klikbaca main label { cursor: help; }

/* ---------------------------------------------------------------
   Tombol & panel
   --------------------------------------------------------------- */
.akses-tombol {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 1030;
    width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff;
    background: #1557c0; color: #fff; font-size: 1.6rem; display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.akses-tombol:hover { background: #0f46a0; }
.akses-tombol:focus-visible { outline: 4px solid #ffe500; outline-offset: 3px; }
@media (max-width: 575.98px) { .akses-tombol { width: 46px; height: 46px; left: .75rem; bottom: .75rem; font-size: 1.4rem; } }
/* Halaman peta layar penuh: geser sedikit agar tidak menutupi skala peta. */
body.akses-layar-penuh .akses-tombol { bottom: 2.25rem; }

.akses-panel {
    position: fixed; inset: auto auto 0 0; margin: 0 0 5rem 1rem;
    width: min(420px, calc(100vw - 2rem)); max-height: calc(100dvh - 6.5rem); overflow: auto;
    background: var(--permukaan, #1e1e1e); color: var(--tinta, #fff);
    border: 2px solid var(--garis-kuat, #474747); border-radius: 18px; padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
html.akses-kontras .akses-panel { background: #000; border-color: #fff; }
.akses-panel::backdrop { background: rgba(0, 0, 0, .25); }
.akses-panel[open] { display: block; }
@media (max-width: 575.98px) { .akses-panel { margin: 0; inset: auto 0 0 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 85dvh; } }

.akses-kepala { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; background: inherit; border-bottom: 1px solid var(--garis, #2f2f2f); }
.akses-kepala h2 { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.akses-isi { padding: 1rem; display: grid; gap: 1.1rem; }
.akses-grup h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2, #a5a5a0); margin: 0 0 .5rem; }
.akses-grup p { font-size: .9rem; color: var(--tinta-2, #a5a5a0); margin: .4rem 0 0; }

.akses-ukuran { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.akses-ukuran button, .akses-saklar, .akses-aksi button {
    min-height: 48px; border-radius: 12px; border: 2px solid var(--garis-kuat, #474747);
    background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-weight: 600;
}
.akses-ukuran button[aria-pressed="true"], .akses-saklar[aria-pressed="true"] { background: var(--rambu, #35d68f); color: var(--di-rambu, #06140d); border-color: var(--rambu, #35d68f); }
.akses-saklar-daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .5rem; }
.akses-saklar { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; text-align: left; line-height: 1.25; }
.akses-saklar i { font-size: 1.25rem; flex: none; }
.akses-aksi { display: flex; flex-wrap: wrap; gap: .5rem; }
.akses-aksi button { padding: .5rem .9rem; display: inline-flex; align-items: center; gap: .45rem; }
.akses-aksi button.utama { background: var(--rambu, #35d68f); color: var(--di-rambu, #06140d); border-color: var(--rambu, #35d68f); }
.akses-kecepatan { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; font-size: .95rem; }
.akses-kecepatan input { flex: 1; accent-color: var(--rambu, #35d68f); }
.akses-status { min-height: 1.3em; font-size: .9rem; margin-top: .5rem; }
.akses-tutup { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--garis-kuat, #474747); background: transparent; color: inherit; font-size: 1.2rem; display: grid; place-items: center; }
.akses-kaki { padding: 0 1rem 1rem; }
.akses-kaki button { width: 100%; min-height: 46px; border-radius: 12px; border: 2px dashed var(--garis-kuat, #474747); background: transparent; color: inherit; font-weight: 600; }

/* Ringkasan galat formulir */
.galat-ringkas:focus { outline: 3px solid var(--awas-teks, #ff7385); outline-offset: 3px; }