/** * Kotak alat aksesibilitas (ACC) — kelas diterapkan ke */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Filter / kontras: anak langsung body (panel & pemicu dikecualikan) --- */ html.a11y-grayscale body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) { filter: grayscale(1); } html.a11y-high-contrast body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) { filter: contrast(1.2) brightness(1.05); } html.a11y-invert body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) { filter: invert(1) hue-rotate(180deg); } html.a11y-invert body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) img, html.a11y-invert body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) video, html.a11y-invert body > *:not(.sirida-a11y-trigger):not(.sirida-a11y-backdrop):not(.sirida-a11y-panel) svg { filter: invert(1) hue-rotate(180deg); } /* --- Ukuran teks root --- */ html.a11y-fs-n2 { font-size: 87.5%; } html.a11y-fs-n1 { font-size: 93.75%; } html.a11y-fs-p1 { font-size: 106.25%; } html.a11y-fs-p2 { font-size: 112.5%; } html.a11y-fs-p3 { font-size: 118.75%; } html.a11y-fs-p4 { font-size: 125%; } /* --- Font mudah dibaca --- */ html.a11y-readable body { font-family: "Atkinson Hyperlegible", "Segoe UI", Verdana, sans-serif !important; } /* --- Garis bawah --- */ html.a11y-ul-links body a { text-decoration: underline !important; text-underline-offset: 2px; } html.a11y-ul-headings body h1, html.a11y-ul-headings body h2, html.a11y-ul-headings body h3, html.a11y-ul-headings body h4, html.a11y-ul-headings body h5, html.a11y-ul-headings body h6 { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* --- Fokus keyboard --- */ html.a11y-keyboard body *:focus { outline: 3px solid #c62828 !important; outline-offset: 2px !important; } /* --- Kurangi gerakan (animasi / transisi) --- */ html.a11y-reduce-motion body *, html.a11y-reduce-motion body *::before, html.a11y-reduce-motion body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* --- Zoom tampilan --- */ html.a11y-zoom body { zoom: 1.18; } @supports not (zoom: 1.18) { html.a11y-zoom body { transform: scale(1.12); transform-origin: top left; width: 89%; min-height: 100vh; } } /* --- Kursor besar (data URI di-set dari JS opsional; fallback di bawah) --- */ html.a11y-cursor-w body, html.a11y-cursor-w body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 0 0, auto !important; } html.a11y-cursor-b body, html.a11y-cursor-b body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 0 0, auto !important; } /* --- Panel & pemicu (di luar body filter) --- */ .sirida-a11y-trigger { position: fixed; left: 12px; bottom: 16px; z-index: 10050; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #0d4d4d; color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; } .sirida-a11y-trigger:hover { background: #0a3d3d; transform: scale(1.05); } .sirida-a11y-trigger:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; } .sirida-a11y-trigger svg { width: 26px; height: 26px; } .sirida-a11y-panel { position: fixed; top: 0; left: 0; width: min(360px, 100vw); max-width: 100%; height: 100vh; height: 100dvh; z-index: 10049; background: #fff; border-right: 2px solid #0d4d4d; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; transform: translateX(-102%); transition: transform 0.28s ease; overflow: hidden; } .sirida-a11y-panel.is-open { transform: translateX(0); } .sirida-a11y-panel * { box-sizing: border-box; } .sirida-a11y-panel__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: #0d4d4d; color: #fff; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; } .sirida-a11y-panel__close { width: 36px; height: 36px; border: 0; border-radius: 6px; background: #fff3a0; color: #b71c1c; font-size: 1.35rem; line-height: 1; cursor: pointer; font-weight: 700; } .sirida-a11y-panel__close:hover { background: #ffe082; } .sirida-a11y-panel__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .sirida-a11y-panel__toggles { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 2px solid #0d4d4d; } .sirida-a11y-toggle-row { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fafafa; font-size: 0.8rem; text-align: left; cursor: pointer; color: #263238; } .sirida-a11y-toggle-row.is-on { background: #e8f5e9; border-color: #66bb6a; } .sirida-a11y-toggle-row svg { flex-shrink: 0; width: 22px; height: 22px; } .sirida-a11y-section { border-bottom: 2px solid #0d4d4d; padding: 10px 12px 12px; } .sirida-a11y-section__title { margin: 0 0 10px; text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #c62828; text-transform: uppercase; } .sirida-a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .sirida-a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 88px; padding: 8px 4px; border: 1px solid #b0bec5; border-radius: 4px; background: #fff; font-size: 0.65rem; line-height: 1.25; text-align: center; color: #263238; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .sirida-a11y-btn:hover { background: #eceff1; border-color: #78909c; } .sirida-a11y-btn.is-on { background: #fff8e1; border-color: #ffb300; box-shadow: inset 0 0 0 1px #ffe082; } .sirida-a11y-btn svg { width: 26px; height: 26px; flex-shrink: 0; } .sirida-a11y-reset { display: flex; width: calc(100% - 24px); margin: 12px; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid #b0bec5; border-radius: 6px; background: #fff; font-weight: 700; font-size: 0.8rem; color: #c62828; cursor: pointer; } .sirida-a11y-reset:hover { background: #ffebee; } .sirida-a11y-panel__footer { flex-shrink: 0; padding: 12px 14px; background: #0d4d4d; color: #fff; font-size: 0.78rem; text-align: center; line-height: 1.45; } .sirida-a11y-panel__footer a { color: #fff; text-decoration: underline; font-weight: 600; } .sirida-a11y-backdrop { position: fixed; inset: 0; z-index: 10048; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sirida-a11y-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .sirida-a11y-trigger { left: 20px; bottom: 24px; } }