:root {
    --a-font-scale: 1;
    --a-letter-spacing: normal;
    --a-line-height: normal;
}

body {
    font-size: calc(1rem * var(--a-font-scale));
    letter-spacing: var(--a-letter-spacing);
    line-height: var(--a-line-height);
}

/* =================================================
   PANEL AKSESIBILITAS (ANTI GESER & ANTI EFEK)
================================================= */
.accessibility-wrapper {
    position: fixed;
    inset: auto;
    top: 20%;
    right: 20px;
    z-index: 999999;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    isolation: isolate;
    /* contain: layout style paint; */
    filter: none !important;
}

.accessibility-wrapper *,
.accessibility-panel {
    filter: none !important;
    transform: none !important;
}

/* Floating Button */
.accessibility-fab {
    position: relative;
    display: flex;
    align-items: center;

    width: 60px;
    height: 60px;
    padding: 0;

    border-radius: 50%;
    background: #d32f2f;
    color: #fff;
    border: none;

    font-size: 28px;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    transition: width 0.3s ease, border-radius 0.3s ease;
}

/* label hidden */
.accessibility-fab .label {
    opacity: 0;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase; /* UPPERCASE */
    letter-spacing: 0.5px;

    display: flex;
    align-items: center; /* center vertical */
    justify-content: center; /* center horizontal */

    transition: opacity 0.2s ease;
}

.accessibility-fab .icon {
    position: absolute;
    inset: 0; /* 🔥 center paling stabil */
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    transition: all 0.3s ease;
}

.accessibility-wrapper.open .accessibility-fab {
    width: 320px; /* sejajar panel */
    padding: 0 20px;
    border-radius: 14px;

    justify-content: flex-start;
    gap: 10px;
}

.accessibility-wrapper.open .accessibility-fab .icon {
    position: relative;
    inset: auto;

    width: 28px;
    height: 28px;

    justify-content: flex-start;
}
.accessibility-wrapper.open .accessibility-fab .label {
    opacity: 1;
}

/* Panel */
.accessibility-panel {
    margin-top: 12px;
    width: 320px;
    background: #fff;
    border-radius: 14px;
    padding: 15px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15);

    position: relative;
    z-index: 2;
}

.accessibility-panel .header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
}

.accessibility-panel .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.accessibility-panel button {
    padding: 9px;
    border-radius: 8px;
    border: 1px solid #d32f2f;
    background: #f5f7fa;
    cursor: pointer;
    font-size: 13px;
}

.accessibility-panel button:hover {
    background: #d32f2f;
    color: white;
}

.accessibility-panel .reset {
    margin-top: 10px;
    width: 100%;
    background: #d32f2f;
    color: white;
    border: none;

    white-space: nowrap;
    font-size: 14px;
    text-transform: uppercase; /* UPPERCASE */
    letter-spacing: 0.5px;
    display: flex;
    align-items: center; /* center vertical */
    justify-content: center; /* center horizontal */
}

.accessibility-panel .reset:hover {
    background: #921010;
}

/* =================================================
   TARGET KONTEN (BUKAN PANEL)
================================================= */
body > :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* =================================================
   KONTRAS (3 LEVEL)
================================================= */

/* Medium */
.a-contrast-medium :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    filter: contrast(1.15) saturate(1.05);
}

.a-contrast-medium
    a
    :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    color: #0d47a1 !important;
    text-decoration: underline;
}

/* High */
.a-contrast-high :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    filter: contrast(1.45);
    background-color: #000 !important;
    color: #fff !important;
}

.a-contrast-high p,
.a-contrast-high li,
.a-contrast-high
    span
    :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    color: #fff !important;
}

.a-contrast-high a :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    color: #ffeb3b !important;
    text-decoration: underline;
}

.a-contrast-high
    button
    :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff;
}

/* =================================================
   EFEK LAIN
================================================= */
.a-gray :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    filter: grayscale(1);
}
.a-invert :not(.accessibility-wrapper):not(.accessibility-wrapper *) {
    filter: invert(1) hue-rotate(180deg);
}

.a-links a {
    background: #ffeb3b;
    color: #000 !important;
    padding: 2px 4px;
}

.a-hide-img img {
    visibility: hidden !important;
}

/* =================================================
   KURSOR AKSESIBILITAS
================================================= */
.accessibility-cursor {
    position: fixed;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 235, 59, 0.85);
    border: 1px solid #000;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
}

.a-cursor-hide {
    cursor: none !important;
}

/* =================================================
   TTS HIGHLIGHT
================================================= */
.a-tts-highlight {
    background: #ffeb3b;
    color: #000 !important;
}

body.a-gray .accessibility-wrapper,
body.a-invert .accessibility-wrapper,
body.a-contrast-medium .accessibility-wrapper,
body.a-contrast-high .accessibility-wrapper {
    filter: none !important;
}

/* ===============================
   TOAST ACCESSIBILITY
================================ */
#a11y-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* 🔒 aman dari filter */
    filter: none !important;
    isolation: isolate;
}

.a11y-toast {
    min-width: 280px;
    max-width: 420px;
    background: #1e293b; /* slate-800 */
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;

    animation: toastIn 0.25s ease-out;
}

.a11y-toast.success {
    background: #065f46;
}
.a11y-toast.info {
    background: #1e40af;
}
.a11y-toast.warning {
    background: #92400e;
}

.a11y-toast button {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}