/*
 * Aksesibilitas portal JakSEHAT (WCAG 2.2 AA). Dimuat paling akhir di <head> (layouts/aksesibilitas-kepala) sehingga
 * menimpa custom.css, login.css, dan jakarta-sehat.css.
 * Bagian 1-4 berlaku untuk semua pengguna; bagian 5 hanya bila dipilih di panel Aksesibilitas (kelas aks-* pada <html>).
 */

/* ---------- 1. Utilitas ---------- */
.aks-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.aks-lompat {
    position: fixed;
    left: 8px;
    z-index: 2000;
    padding: 12px 16px;
    background: #111;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    top: -200px;
}

.aks-lompat:focus {
    top: 8px;
}

/* ---------- 2. Fokus keyboard terlihat (2.4.7, 1.4.11): cincin hitam berlapis putih, terbaca di latar terang maupun gelap ---------- */
:focus-visible,
.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    outline: 3px solid #111 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.form-login .input-group:focus-within {
    outline: 3px solid #111;
    outline-offset: 2px;
}

.form-login .input-group .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

#konten:focus,
[tabindex="-1"]:focus:not(:focus-visible),
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- 3. Kontras warna normal (1.4.3, 1.4.11, 1.4.1) dengan warna toska JakSEHAT yang lebih gelap ---------- */
.btn-green,
.form-login .btn-green,
.reg-rsud .btn-green:active {
    background-color: #218267 !important;
    border-color: #218267 !important;
    color: #fff !important;
}

.link-daftar a {
    color: #1B6E57 !important;
    text-decoration: underline !important;
}

::placeholder {
    color: #6B7280 !important;
    opacity: 1 !important;
}

.form-control,
.form-select,
.form-login .input-group,
.select2-container--default .select2-selection--single {
    border-color: #8A8F98 !important;
}

.form-login .form-control {
    border-color: transparent !important;
}

.profil .users-name p {
    color: #5B5D6B;
}

.aks-kaki a,
.jks-info a,
.alert a {
    text-decoration: underline !important;
}

/* Fokus tidak tertutup kepala halaman, menu bawah, dan tombol Aksesibilitas yang melayang (2.4.11). */
html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 140px;
}

html.aks-teks-1 {
    scroll-padding-top: 84px;
    scroll-padding-bottom: 160px;
}

html.aks-teks-2 {
    scroll-padding-top: 94px;
    scroll-padding-bottom: 182px;
}

html.aks-teks-3 {
    scroll-padding-top: 108px;
    scroll-padding-bottom: 210px;
}

/* ---------- 4. Tata letak: reflow 320 px (1.4.10), teks bisa diperbesar (1.4.4), target sentuh (2.5.8) ---------- */
body {
    overflow-y: auto !important;
    overflow-wrap: break-word;
}

.profil .users-name {
    min-width: 0;
}

.profil .users-name p {
    overflow-wrap: anywhere;
}

.jks-puskesmas-kepala {
    flex-wrap: wrap;
}

.jks-kisi {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.jks-kisi-kecil {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

/* Target sentuh minimal 24 px (2.5.8) */
.logo-inline a,
.link-daftar a {
    display: inline-block;
}

.link-daftar a {
    padding: 4px 0;
}

.profil .info-akun a {
    padding: 4px 0;
}

.login-foms {
    max-width: 100% !important;
}

@media (max-width: 820px) {
    .regis-form {
        margin-left: 0 !important;
        margin-top: 24px !important;
    }
}

/* Tautan ikon (panah kembali): area sentuh 44 px tanpa menggeser posisi ikon. */
.aks-ikon-tautan {
    display: inline-flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 44px;
    min-height: 44px;
}

.btn-close {
    padding: .5em !important;
}

.aks-sandi {
    border: 0;
    cursor: pointer;
    min-width: 44px;
    justify-content: center;
}

/* Judul halaman memakai h1 (1.3.1, 2.4.6) dengan tampilan judul lama */
.form-login h1 {
    margin-bottom: 21px;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.3px;
}

.profil .heads h1 {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.3px;
    text-align: center;
    line-height: 20px;
}

/* Kaki halaman, tombol Aksesibilitas, panel */
.aks-kaki {
    position: relative;
    clear: both;
    padding: 16px 16px 140px;
    text-align: center;
    font-size: 15px;
}

.aks-kaki ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.aks-kaki li a {
    display: inline-block;
    padding: 8px 4px;
    color: #1B6E57 !important;
}

@media (min-width: 1200px) {
    .aks-kaki {
        padding-bottom: 88px;
    }
}

.aks-tombol {
    position: fixed;
    left: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px 0 12px;
    border: 2px solid #fff;
    border-radius: 24px;
    background: #134E48;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    cursor: pointer;
}

/* Ponsel dengan menu bawah: tombol di atas menu. */
@media (max-width: 1199.98px) {
    body:has(.menu-bottom) .aks-tombol {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* Panel pesan Jakarta Sehat sedang tampil: tombol naik agar tidak menutupi tombol panel. */
body:has(.jks-panel:not([hidden])) .aks-tombol {
    bottom: calc(76px + 120px);
}

@media (min-width: 1200px) {
    body:has(.jks-panel:not([hidden])) .aks-tombol {
        bottom: 136px;
    }
}

.aks-panel {
    margin: auto;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #111;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    text-align: left;
}

.aks-panel::backdrop {
    background: rgba(0, 0, 0, .45);
}

.aks-panel-isi {
    padding: 16px 20px 20px;
    font-size: 17px;
    line-height: 1.45;
}

.aks-panel-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.aks-panel h2 {
    flex: 1 1 12em;
    min-width: 0;
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #111;
}

.aks-panel-ket {
    margin: 4px 0 12px;
    font-size: 15px;
    color: #4B5563;
}

.aks-panel fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.aks-panel legend {
    float: none;
    width: auto;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}

.aks-pilihan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 8px;
}

.aks-pilihan label,
.aks-centang {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 12px;
    border: 1px solid #8A8F98;
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
}

.aks-centang {
    margin-bottom: 8px;
}

.aks-pilihan label:has(input:checked),
.aks-centang:has(input:checked) {
    border: 2px solid #134E48;
    background: #E1F6F4;
    font-weight: 600;
}

.aks-panel input[type="radio"],
.aks-panel input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    accent-color: #134E48;
}

.aks-panel-tutup,
.aks-panel-ulang {
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid #134E48;
    border-radius: 12px;
    background: #fff;
    color: #134E48;
    font-size: 16px;
    font-weight: 600;
}

.aks-panel-aksi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.aks-panel-aksi a {
    color: #1B6E57 !important;
    text-decoration: underline !important;
    padding: 8px 0;
}

.aks-slide-jeda {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    min-height: 36px;
    padding: 0 12px;
    border: 2px solid #fff;
    border-radius: 18px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.aks-slide-jeda:disabled {
    opacity: .85;
}

/* Halaman Pernyataan Aksesibilitas */
.aks-halaman {
    max-width: 760px;
    margin: 0 auto;
    padding: 90px 4px 16px;
    font-size: 17px;
    line-height: 1.6;
    color: #1F2937;
}

.aks-halaman h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}

.aks-halaman h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0 8px;
}

.aks-halaman ul {
    padding-left: 22px;
}

.aks-halaman li {
    margin-bottom: 6px;
}

.aks-halaman a {
    color: #1B6E57;
    text-decoration: underline !important;
}

.aks-halaman kbd {
    background: #1F2937;
    color: #fff;
    font-size: .9em;
}

/* ---------- 5. Pilihan pengguna ---------- */

/* Ukuran teks: zoom memperbesar teks dan ukuran px; tata letak persen tetap mengikuti lebar layar. */
html.aks-teks-1 body {
    zoom: 1.15;
}

html.aks-teks-2 body {
    zoom: 1.3;
}

html.aks-teks-3 body {
    zoom: 1.5;
}

/* Satuan vw/vh ikut diperbesar zoom: batas ukuran panel dibagi faktor zoom agar tetap muat di layar. */
html.aks-teks-1 .aks-panel {
    width: min(440px, calc((100vw - 24px) / 1.15));
    max-height: calc((100vh - 24px) / 1.15);
}

html.aks-teks-2 .aks-panel {
    width: min(440px, calc((100vw - 24px) / 1.3));
    max-height: calc((100vh - 24px) / 1.3);
}

html.aks-teks-3 .aks-panel {
    width: min(440px, calc((100vw - 24px) / 1.5));
    max-height: calc((100vh - 24px) / 1.5);
}

/* Kepala halaman Jakarta Sehat saat teks diperbesar: tombol Kelas Saya turun ke baris berikutnya bila judul sempit. */
html[class*="aks-teks-"] .jks-pita-baris {
    flex-wrap: wrap;
}

html[class*="aks-teks-"] .jks-pita-baris > div {
    flex-basis: 0;
    min-width: 40% !important;
}

/* select2 mengukur lebar dan posisi dengan skrip: kotak mengikuti lebar induk, daftar pilihan (anak langsung body)
   dikembalikan ke zoom 1 lalu hurufnya diperbesar setara. */
html[class*="aks-teks-"] .select2.select2-container {
    width: 100% !important;
}

html.aks-teks-1 body > .select2-container {
    zoom: .8696;
    font-size: 115%;
}

html.aks-teks-2 body > .select2-container {
    zoom: .7692;
    font-size: 130%;
}

html.aks-teks-3 body > .select2-container {
    zoom: .6667;
    font-size: 150%;
}

/* Garis bawah semua tautan */
html.aks-garis a,
html.aks-garis a * {
    text-decoration: underline !important;
}

/* Hentikan animasi dan transisi (juga default bila sistem meminta prefers-reduced-motion) */
html.aks-diam *,
html.aks-diam *::before,
html.aks-diam *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Jarak teks (nilai uji 1.4.12) */
html.aks-spasi body *:not(i):not(svg):not(svg *) {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}

html.aks-spasi body p {
    margin-bottom: 2em !important;
}

/* Kursor besar */
html.aks-kursor,
html.aks-kursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l0 36 9-9 6 14 7-3-6-14 13 0z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.aks-kursor :is(a, button, label, select, summary, [role="button"], .select2-selection, .select2-results__option),
html.aks-kursor :is(a, button, label, select, summary, [role="button"]) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M16 4a4 4 0 0 1 4 4v14l3-1a4 4 0 0 1 3 1l1 0a4 4 0 0 1 4 1a4 4 0 0 1 5 2v10c0 6-5 11-11 11h-3c-4 0-7-2-9-5l-8-11a4 4 0 0 1 6-5l1 1V8a4 4 0 0 1 4-4z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 16 4, pointer !important;
}

/* Kontras tinggi: teks hitam di latar putih, garis hitam; elemen terpilih dan kepala halaman dibalik (putih di hitam). */
html.aks-kontras body {
    background: #fff !important;
    color: #000 !important;
}

html.aks-kontras body :where(:not(svg, svg *, img, video, input[type="checkbox"], input[type="radio"], .btn-close, select, .swal2-icon, .swal2-icon *)) {
    color: #000 !important;
    background-color: #fff !important;
    background-image: none !important;
    border-color: #000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.aks-kontras select {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #000 !important;
}

html.aks-kontras :is(.form-control, .form-select, .btn, button, .jks-tombol, .jks-baris, .jks-chip, .jks-ubin, .jks-pil a, .jks-pil label, .card, .jks-kartu, .jks-kegiatan, .bg-icon, .aks-centang, .aks-pilihan label, .select2-selection, .swal2-popup) {
    border: 2px solid #000 !important;
}

html.aks-kontras a {
    color: #00419E !important;
    text-decoration: underline !important;
}

/* Dibalik (putih di hitam). Spesifisitas sama dengan aturan umum di atas (:where), menang karena letaknya sesudahnya. */
html.aks-kontras body :where(.nav-header, .nav-header *, .jks-pita, .jks-pita *, .aktif, .aktif *, [aria-pressed="true"], [aria-pressed="true"] *, [aria-checked="true"], [aria-checked="true"] *, .jks-pil input:checked + label, .select2-results__option--highlighted, .aks-tombol, .aks-tombol *, .aks-lompat, .aks-slide-jeda, .btn-green, .jks-tombol:not(.jks-tombol-garis):not(:disabled), .swal2-confirm, .aks-pilihan label:has(input:checked), .aks-centang:has(input:checked)) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.aks-kontras :is(.nav-header, .jks-pita) a {
    color: #fff !important;
}

html.aks-kontras body .jks-ruas span {
    background-color: #fff !important;
    opacity: .4;
}

html.aks-kontras body .jks-ruas span.aktif {
    opacity: 1;
}

html.aks-kontras :disabled,
html.aks-kontras [aria-disabled="true"] {
    color: #444 !important;
    border-style: dashed !important;
}

html.aks-kontras :focus-visible {
    outline: 4px solid #000 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 9px #FFD200 !important;
}

html.aks-kontras ::placeholder {
    color: #444 !important;
}

html.aks-kontras .aks-panel::backdrop {
    background: rgba(0, 0, 0, .7);
}

html.aks-kontras .btn-green,
html.aks-kontras .form-login .btn-green {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}