/* ===== Aksesibilitas CSS ===== */ /* Skala font global via CSS variable (langkah -3..+3) */ :root { --a11y-font-scale: 0; } /* Semua ukuran font pakai rem agar ikut skala */ html { font-size: clamp( 0.875rem, calc(1rem + var(--a11y-font-scale) * 0.0625rem), 1.375rem ); line-height: 1.5; } /* Elemen yang tidak mau ikut skala */ .no-scale { font-size: inherit !important; } /* Skip link */ .skip-link { position: absolute; top: -1000px; left: 0; background: #111; color: #fff; padding: 0.5rem 0.75rem; z-index: 10000; } .skip-link:focus { top: 0; } /* Tombol Mengambang (FAB) */ .a11y-fab { position: fixed; top: 50%; left: 1rem; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); background: #0d6efd; color: #fff; font-size: 1.25rem; line-height: 3rem; cursor: pointer; z-index: 9999; } .a11y-fab:focus-visible { outline: 3px solid #ffcd39; outline-offset: 2px; } /* Panel Aksesibilitas */ .a11y-panel { position: fixed; top: 50%; left: 4.5rem; transform: translateY(-50%); width: min(26.25rem, 92vw); background: #fff; color: #111; border-radius: 0.875rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 9998; font-size: 0.875rem; } .a11y-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #f5f5f5; } .a11y-header h2 { font-size: 1rem; margin: 0; } .a11y-close { border: none; background: transparent; font-size: 1.25rem; cursor: pointer; } .a11y-body { padding: 0.75rem 1rem 1rem; } .a11y-group { margin-bottom: 0.75rem; } .a11y-label { display: block; font-weight: 600; margin-bottom: 0.25rem; } .a11y-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; } .a11y-btn, .a11y-toggle, .a11y-reset { border: 1px solid #d0d7de; background: #fff; padding: 0.4rem 0.6rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; } .a11y-btn:focus-visible, .a11y-toggle:focus-visible, .a11y-reset:focus-visible { outline: 3px solid #ffcd39; outline-offset: 2px; } .a11y-toggle[aria-pressed="true"] { background: #0d6efd; color: #fff; border-color: #0d6efd; } .a11y-reset { background: #fff5f5; border-color: #ffc9c9; margin-left: 1.2rem; margin-top: 0.1rem; } /* Fokus ring global */ :focus-visible { outline: 3px solid #ffcd39; outline-offset: 3px; } button, [role="button"], a, input, select, textarea { outline-offset: 2px; } /* ===== States pada ===== */ html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation: none !important; transition: none !important; } html.a11y-dark { color-scheme: dark; background: #0b0e12; color: #e6e6e6; } html.a11y-dark body { background: transparent; } html.a11y-dark .a11y-panel { background: #12161c; color: #e6e6e6; } html.a11y-dark .a11y-header { background: #0f1318; } html.a11y-high-contrast, html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast a { color: #0ff !important; text-decoration: underline; } html.a11y-high-contrast img { filter: contrast(120%); } html.a11y-dyslexia-font { font-family: "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* ===== Responsive (HP) ===== */ @media (max-width: 576px) { .a11y-fab { bottom: 5rem; left: 0.75rem; transform: none; top: 85%; } .a11y-panel { top: auto; bottom: calc(4rem + 4rem); left: 0.75rem; right: 0.75rem; transform: none; width: auto; max-width: none; border-radius: 0.75rem; margin-bottom: env(safe-area-inset-bottom, 0); font-size: 0.8125rem; } .a11y-panel button, .a11y-panel select { padding: 0.25rem 0.5rem; font-size: 0.75rem; } } /* Tata letak */ .a11y-row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .a11y-wrap { flex-wrap: wrap; } .a11y-seg { display: inline-flex; border: 1px solid #d0d7de; border-radius: 0.5rem; overflow: hidden; } .a11y-seg .a11y-btn { border: none; border-right: 1px solid #d0d7de; } .a11y-seg .a11y-btn:last-child { border-right: none; } .a11y-sliders { display: flex; gap: 1rem; flex-wrap: wrap; } .a11y-sliders label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .a11y-select { padding: 0.4rem 0.6rem; border: 1px solid #d0d7de; border-radius: 0.5rem; background: #fff; } .a11y-switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .a11y-small { font-size: 0.85rem; color: #555; } /* Garis baca */ #a11y-mask { position: fixed; left: 0; right: 0; height: 2.2em; top: 40%; transform: translateY(-50%); background: rgba(255, 255, 0, 0.35); pointer-events: none; z-index: 9997; display: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); border-radius: 4px; } html.a11y-reading-mask #a11y-mask { display: block; } /* Pointer besar */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: default; } html.a11y-big-cursor { cursor: url('data:image/svg+xml;utf8,') 1 1, default; } /* Sorot fokus kuat */ html.a11y-focus-strong :focus-visible { outline: 4px solid #ff8c00 !important; outline-offset: 3px !important; } /* Sembunyikan gambar */ html.a11y-hide-images img { visibility: hidden !important; } /* Tema sepia */ html.a11y-sepia { filter: sepia(1); } /* Simulasi buta warna */ html.cvd-deuteranopia { filter: saturate(0.8) hue-rotate(10deg); } html.cvd-protanopia { filter: saturate(0.8) hue-rotate(-10deg); } html.cvd-tritanopia { filter: saturate(0.8) hue-rotate(180deg); } /* visually-hidden */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Grayscale */ html.grayscale { filter: grayscale(1); }