/* =========================================================
LAWAMENA ACCESSIBILITY
========================================================= */

:root {
--a11y-font-scale: 1;
}

/* =========================================================
ACCESSIBILITY BUTTON
========================================================= */

.a11y-toggle {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99990;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #159d91;
color: #ffffff;
font-size: 22px;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
transition: transform 0.2s ease, background 0.2s ease;
}

.a11y-toggle:hover {
transform: scale(1.06);
background: #117f76;
}

.a11y-toggle:focus-visible {
outline: 4px solid #173a42;
outline-offset: 3px;
}

/* =========================================================
PANEL
========================================================= */

.a11y-panel {
position: fixed;
right: 20px;
bottom: 85px;
z-index: 99991;
width: 310px;
max-width: calc(100vw - 30px);
max-height: calc(100vh - 110px);
overflow-y: auto;
padding: 18px;
background: #ffffff;
border: 1px solid #dce9e7;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.97);
pointer-events: none;
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}

.a11y-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}

/* =========================================================
HEADER
========================================================= */

.a11y-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 15px;
}

.a11y-title {
margin: 0;
color: #173a42;
font-size: 18px;
font-weight: 800;
}

.a11y-close {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #edf5f4;
color: #173a42;
cursor: pointer;
font-size: 15px;
}

.a11y-close:hover {
background: #dcebea;
}

.a11y-close:focus-visible {
outline: 3px solid #159d91;
outline-offset: 2px;
}

/* =========================================================
DESCRIPTION
========================================================= */

.a11y-description {
margin: 0 0 15px;
color: #71858a;
font-size: 12px;
line-height: 1.6;
}

/* =========================================================
BUTTON GRID
========================================================= */

.a11y-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 9px;
}

.a11y-option {
min-height: 58px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px;
border: 1px solid #dce9e7;
border-radius: 10px;
background: #ffffff;
color: #173a42;
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: 700;
text-align: center;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}

.a11y-option i {
font-size: 18px;
color: #159d91;
}

.a11y-option:hover {
background: #f1f8f7;
border-color: #159d91;
transform: translateY(-1px);
}

.a11y-option.active {
background: #e5f5f2;
border-color: #159d91;
}

.a11y-option:focus-visible {
outline: 3px solid #173a42;
outline-offset: 2px;
}

/* =========================================================
RESET
========================================================= */

.a11y-reset {
width: 100%;
margin-top: 12px;
padding: 12px;
border: 0;
border-radius: 10px;
background: #173a42;
color: #ffffff;
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 700;
}

.a11y-reset:hover {
background: #102d33;
}

/* =========================================================
FONT SCALE
========================================================= */

html.a11y-font-large {
font-size: 112.5%;
}

html.a11y-font-xlarge {
font-size: 125%;
}

html.a11y-font-small {
font-size: 90%;
}

/* =========================================================
HIGH CONTRAST
========================================================= */

html.a11y-high-contrast body {
background: #000000 !important;
color: #ffffff !important;
}

html.a11y-high-contrast body * {
border-color: #ffffff !important;
}

html.a11y-high-contrast h1,
html.a11y-high-contrast h2,
html.a11y-high-contrast h3,
html.a11y-high-contrast h4,
html.a11y-high-contrast h5,
html.a11y-high-contrast h6,
html.a11y-high-contrast p,
html.a11y-high-contrast span,
html.a11y-high-contrast li,
html.a11y-high-contrast label {
color: #ffffff !important;
}

html.a11y-high-contrast a {
color: #ffff00 !important;
}

html.a11y-high-contrast button {
background: #000000 !important;
color: #ffffff !important;
}

/* =========================================================
GRAYSCALE
========================================================= */

/*
Terapkan filter sekali pada root dokumen. Sebelumnya filter diberikan ke
setiap child body. Pada sejumlah browser mobile hal itu membuat banyak layer
komposit dan dapat menyebabkan tombol fixed aksesibilitas tidak terlihat atau
tidak menerima sentuhan setelah Grayscale diaktifkan.

Kontrol aksesibilitas ikut tampil grayscale ketika mode ini aktif agar tidak
ada elemen yang keluar dari layer filter; fungsi dan posisinya tetap stabil.
*/

html.a11y-grayscale {
filter: grayscale(100%);
}

/* Pertahankan tombol/panel pada layer interaktif tertinggi di perangkat mobile. */

.a11y-toggle,
.a11y-panel {
isolation: isolate;
}

/* =========================================================
HIGHLIGHT LINKS
========================================================= */

html.a11y-highlight-links a {
background: #ffff00 !important;
color: #000000 !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
}

/* =========================================================
LARGE CURSOR
========================================================= */

html.a11y-large-cursor,
html.a11y-large-cursor * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 2 L4 25 L11 18 L16 29 L20 27 L15 16 L25 16 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* =========================================================
TEXT SPACING
========================================================= */

html.a11y-text-spacing body,
html.a11y-text-spacing p,
html.a11y-text-spacing li,
html.a11y-text-spacing span,
html.a11y-text-spacing a,
html.a11y-text-spacing button {
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
line-height: 1.8 !important;
}

/* =========================================================
DISABLE ANIMATION
========================================================= */

html.a11y-no-animation *,
html.a11y-no-animation *::before,
html.a11y-no-animation *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

/* =========================================================
KEYBOARD FOCUS MODE
========================================================= */

html.a11y-focus-mode a:focus,
html.a11y-focus-mode button:focus,
html.a11y-focus-mode input:focus,
html.a11y-focus-mode select:focus,
html.a11y-focus-mode textarea:focus {
outline: 4px solid #ffcc00 !important;
outline-offset: 4px !important;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

.a11y-toggle {
    right: 15px;
    bottom: 15px;
    width: 50px;
    height: 50px;
}

.a11y-panel {
    right: 15px;
    bottom: 78px;
    width: calc(100vw - 30px);
    max-height: calc(100vh - 95px);
    padding: 15px;
}

.a11y-title {
    font-size: 17px;
}

.a11y-option {
    min-height: 55px;
}

}

/* =========================================================
REDUCE MOTION SYSTEM
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

}