/* =============================================================
   ACCESSIBILITY.CSS — Modul Aksesibilitas
   Kantor Imigrasi Kelas I Non-TPI Jakarta Pusat
   ============================================================= */

/* ── Skip Link ─────────────────────────────────────────────── */
.acc-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #FFD000;
    color: #000;
    font-weight: bold;
    font-size: 1em;
    padding: 10px 20px;
    z-index: 999999;
    border-radius: 0 0 6px 0;
    text-decoration: none;
    transition: top 0.2s;
}
.acc-skip-link:focus {
    top: 0;
}

/* ── Toolbar Toggle Button ─────────────────────────────────── */
#acc-toggle-btn {
    position: fixed;
    left: 18px;
    bottom: 18px;
    transform: scale(1);
    background: linear-gradient(135deg, #11375c, #1a5490);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 58px;
    height: 58px;
    padding: 0;
    cursor: pointer;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0.62em;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(17,55,92,0.45);
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.2s ease;
}
#acc-toggle-btn:hover,
#acc-toggle-btn:focus {
    background: linear-gradient(135deg, #1a5490, #2470b8);
    outline: 3px solid #FFD000;
    transform: scale(1.07);
}
#acc-toggle-btn .acc-icon {
    font-size: 5em;
    line-height: 1;
}
#acc-toggle-btn.acc-hidden {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}
.acc-active-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #2ecc71;
    border: 2px solid #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.acc-active-badge i {
    font-size: 10px;
    color: #fff;
    line-height: 1;
}
#acc-toggle-btn.acc-has-active .acc-active-badge {
    display: flex;
}

/* ── Toolbar Panel ─────────────────────────────────────────── */
#acc-panel {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: 420px;
    max-height: min(640px, calc(100vh - 36px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    z-index: 99998;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    visibility: hidden;
    transform-origin: bottom left;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 17px;
}
#acc-panel-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0 0 18px 18px;
}
#acc-panel.acc-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
}
#acc-panel.acc-dragging {
    transition: none;
    box-shadow: 0 18px 48px rgba(0,0,0,0.35);
    user-select: none;
}
@media (max-width: 480px) {
    #acc-panel { width: auto; }
}

/* ── Panel Header ──────────────────────────────────────────── */
.acc-panel-header {
    background: #0c2b4e;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    border-radius: 18px 18px 0 0;
    cursor: grab;
    touch-action: none;
}
.acc-panel-header:active {
    cursor: grabbing;
}
.acc-panel-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acc-panel-header .acc-drag-handle {
    color: rgba(255,255,255,0.6);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
}
.acc-panel-header h3 {
    margin: 0;
    flex: 1;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: #fff;
}
.acc-panel-shortcut {
    font-weight: 500;
    font-size: 0.8em;
    opacity: 0.85;
}
#acc-close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1em;
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#acc-close-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Baris Bahasa (read-only, ikut bahasa aktif situs) ──────── */
.acc-lang-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f5f7fb;
    border-bottom: 1px solid #eef0f4;
    font-size: 0.85em;
    color: #333;
    flex: 0 0 auto;
}
.acc-lang-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0c2b4e;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Baris Profil Aksesibilitas (collapsible) ───────────────── */
.acc-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eef0f4;
    text-align: left;
    font-size: 0.88em;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    flex: 0 0 auto;
}
.acc-collapse-toggle:hover { background: #f5f7fb; }
.acc-collapse-toggle .acc-tile-icon {
    width: auto;
    height: auto;
    font-size: 1em;
    color: #0c2b4e;
}
.acc-collapse-toggle span:nth-child(2) { flex: 1; }
.acc-collapse-chevron {
    color: #999;
    transition: transform 0.2s;
}
.acc-collapse-toggle[aria-expanded="false"] .acc-collapse-chevron {
    transform: rotate(-90deg);
}
#acc-profiles-section {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.25s ease, padding 0.25s ease;
}
#acc-profiles-section.acc-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ── Section ───────────────────────────────────────────────── */
.acc-section {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.acc-section-title {
    font-size: 0.72em;
    font-weight: bold;
    color: #11375c;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.acc-section-title i {
    font-size: 1.1em;
    color: #1a5490;
}
.acc-field-label {
    font-size: 0.82em;
    color: #555;
    margin-bottom: 6px;
    display: block;
}

/* ── Tile Grid (Profil & Fitur) ────────────────────────────── */
.acc-profiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.acc-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.acc-section-features { padding-top: 16px; }

.acc-tile {
    position: relative;
    background: #fff;
    border: 1.5px solid #e3e7ee;
    border-radius: 12px;
    padding: 14px 6px 12px;
    cursor: pointer;
    text-align: center;
    font-size: 0.72em;
    font-weight: 600;
    color: #3a3f4b !important;
    text-decoration: none !important;
    line-height: 1.25;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.acc-tile:focus, .acc-tile:focus-visible {
    outline: none!important;
}
.acc-profiles .acc-tile { flex-direction: row; text-align: left; padding: 10px 12px; gap: 10px; }
.acc-profiles .acc-tile-icon { margin: 0; }

.acc-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1.9em;
    color: #0c2b4e;
    flex-shrink: 0;
}
.acc-tile-icon-text {
    font-weight: 800;
    font-size: 1.9em;
    line-height: 1;
    position: relative;
}
.acc-tile-plus, .acc-tile-minus {
    font-size: 0.5em;
    vertical-align: super;
    margin-left: 1px;
}

.acc-tile:hover,
.acc-tile:focus-visible {
    border-color: #0c2b4e;
    outline: none;
}
.acc-tile.active,
.acc-tile[aria-pressed="true"] {
    border-color: #0c2b4e;
    color: #0c2b4e;
    box-shadow: 0 0 0 1px #0c2b4e inset;
}
.acc-tile.active .acc-tile-icon,
.acc-tile[aria-pressed="true"] .acc-tile-icon { color: #0c2b4e; }

/* ── Moda Suara: ikon mic diganti gelombang suara animasi saat aktif ── */
.acc-voice-wave {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 26px;
}
#acc-tts-clickread-btn.active .acc-voice-icon-static { display: none; }
#acc-tts-clickread-btn.active .acc-voice-wave { display: flex; }
.acc-voice-wave i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: #0c2b4e;
    height: 6px;
    transition: height 0.15s;
}
/* Bergerak hanya saat narasi benar-benar sedang dibacakan */
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i {
    animation: acc-voice-bounce 0.9s ease-in-out infinite;
}
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i:nth-child(1) { animation-delay: 0s; }
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i:nth-child(2) { animation-delay: 0.12s; }
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i:nth-child(3) { animation-delay: 0.24s; }
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i:nth-child(4) { animation-delay: 0.36s; }
#acc-tts-clickread-btn.acc-speaking .acc-voice-wave i:nth-child(5) { animation-delay: 0.48s; }
@keyframes acc-voice-bounce {
    0%, 100% { height: 6px; }
    50% { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    #acc-tts-clickread-btn.acc-speaking .acc-voice-wave i { animation: none; height: 16px; }
}

/* Multi-step tiles: dot progress indicator, hidden until tile has an active step */
.acc-tile-dots {
    display: none;
    gap: 4px;
    margin-top: 2px;
}
.acc-tile-multi.active .acc-tile-dots {
    display: flex;
}
.acc-tile-dots i {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #e3e7ee;
    transition: background 0.15s;
}
.acc-tile-dots i.on {
    background: #0c2b4e;
}

/* ── Reset & Panduan ───────────────────────────────────────── */
.acc-reset-fixed {
    border-top: 1px solid #f0f0f0;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#acc-reset-btn.acc-reset-btn-full {
    width: 100%;
    padding: 10px 6px;
    background: #0c2b4e;
    border: 1px solid #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    color: #ffffff;
    transition: all 0.2s;
    line-height: 1.3;
}
#acc-reset-btn.acc-reset-btn-full:hover { background: #16304f; color: #fff; border-color: #16304f; }

#acc-guide-btn.acc-guide-btn-full {
    display: block;
    width: 100%;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid #0c2b4e;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    color: #0c2b4e !important;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s;
    line-height: 1.3;
}
#acc-guide-btn.acc-guide-btn-full:hover { background: #0c2b4e; color: #fff !important; }

/* ── Baca Panduan: garis kuning mengikuti posisi vertikal kursor ──── */
#acc-reading-line {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    height: 4px;
    background: #FFD000;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 99991;
}
#acc-reading-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #FFD000;
}

/* ── Masker Bacaan ─────────────────────────────────────────── */
#acc-reading-mask-top,
#acc-reading-mask-bottom {
    display: none;
    position: fixed;
    width: 100%;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
    z-index: 99989;
    left: 0;
}

/* ── TTS Word Highlight ────────────────────────────────────── */
.acc-tts-highlight {
    background: #FFD000 !important;
    color: #000 !important;
    border-radius: 2px;
}

/* =============================================================
   BODY STATE CLASSES
   ============================================================= */

/* ── Perbesar Teks ─────────────────────────────────────────── */
body.acc-font-inc-1 { font-size: 17px !important; }
body.acc-font-inc-2 { font-size: 19px !important; }
body.acc-font-inc-3 { font-size: 21px !important; }
body.acc-font-inc-4 { font-size: 23px !important; }

/* ── Perkecil Teks ─────────────────────────────────────────── */
body.acc-font-dec-1 { font-size: 15px !important; }
body.acc-font-dec-2 { font-size: 14px !important; }
body.acc-font-dec-3 { font-size: 13px !important; }
body.acc-font-dec-4 { font-size: 12px !important; }

body.acc-font-inc-1 p, body.acc-font-inc-1 li, body.acc-font-inc-1 td, body.acc-font-inc-1 span, body.acc-font-inc-1 a,
body.acc-font-inc-2 p, body.acc-font-inc-2 li, body.acc-font-inc-2 td, body.acc-font-inc-2 span, body.acc-font-inc-2 a,
body.acc-font-inc-3 p, body.acc-font-inc-3 li, body.acc-font-inc-3 td, body.acc-font-inc-3 span, body.acc-font-inc-3 a,
body.acc-font-inc-4 p, body.acc-font-inc-4 li, body.acc-font-inc-4 td, body.acc-font-inc-4 span, body.acc-font-inc-4 a,
body.acc-font-dec-1 p, body.acc-font-dec-1 li, body.acc-font-dec-1 td, body.acc-font-dec-1 span, body.acc-font-dec-1 a,
body.acc-font-dec-2 p, body.acc-font-dec-2 li, body.acc-font-dec-2 td, body.acc-font-dec-2 span, body.acc-font-dec-2 a,
body.acc-font-dec-3 p, body.acc-font-dec-3 li, body.acc-font-dec-3 td, body.acc-font-dec-3 span, body.acc-font-dec-3 a,
body.acc-font-dec-4 p, body.acc-font-dec-4 li, body.acc-font-dec-4 td, body.acc-font-dec-4 span, body.acc-font-dec-4 a {
    font-size: 1em !important;
}

/* Panel & toggle button tetap pada skala fontnya sendiri, tidak ikut membesar/mengecil */
body[class*="acc-font-inc-"] #acc-panel, body[class*="acc-font-dec-"] #acc-panel,
body[class*="acc-font-inc-"] #acc-toggle-btn, body[class*="acc-font-dec-"] #acc-toggle-btn {
    font-size: 17px !important;
}
body[class*="acc-font-inc-"] #acc-panel span:not(.acc-tile-icon-text):not(.acc-tile-icon), body[class*="acc-font-dec-"] #acc-panel span:not(.acc-tile-icon-text):not(.acc-tile-icon),
body[class*="acc-font-inc-"] #acc-panel p,    body[class*="acc-font-dec-"] #acc-panel p,
body[class*="acc-font-inc-"] #acc-panel a,    body[class*="acc-font-dec-"] #acc-panel a,
body[class*="acc-font-inc-"] #acc-panel li,   body[class*="acc-font-dec-"] #acc-panel li,
body[class*="acc-font-inc-"] #acc-panel td,   body[class*="acc-font-dec-"] #acc-panel td {
    font-size: unset !important;
}
/* Ikon tile (mic, kejenuhan, dsb.) SELALU tetap 1.9em terlepas dari status Perbesar/Perkecil Teks */
body[class*="acc-font-inc-"] #acc-panel .acc-tile-icon,
body[class*="acc-font-dec-"] #acc-panel .acc-tile-icon,
body[class*="acc-font-inc-"] #acc-panel .acc-tile-icon-text,
body[class*="acc-font-dec-"] #acc-panel .acc-tile-icon-text {
    font-size: 1.9em !important;
}

/* ── Tinggi Garis ──────────────────────────────────────────── */
body.acc-line-height-1 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { line-height: 1.75 !important; }
body.acc-line-height-2 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { line-height: 2 !important; }
body.acc-line-height-3 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { line-height: 2.5 !important; }

/* ── Spasi Teks (Letter Spacing) ────────────────────────────── */
body.acc-letter-spacing-1 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { letter-spacing: 0.04em !important; }
body.acc-letter-spacing-2 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { letter-spacing: 0.08em !important; word-spacing: 0.08em !important; }
body.acc-letter-spacing-3 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { letter-spacing: 0.15em !important; word-spacing: 0.2em !important; }

/* ── Rata Tulisan (Text Align): Kiri, Tengah, Kanan, Kiri-Kanan ─ */
body.acc-align-1 p, body.acc-align-1 li, body.acc-align-1 h1, body.acc-align-1 h2,
body.acc-align-1 h3, body.acc-align-1 h4, body.acc-align-1 h5, body.acc-align-1 h6 { text-align: left !important; }
body.acc-align-2 p, body.acc-align-2 li, body.acc-align-2 h1, body.acc-align-2 h2,
body.acc-align-2 h3, body.acc-align-2 h4, body.acc-align-2 h5, body.acc-align-2 h6 { text-align: center !important; }
body.acc-align-3 p, body.acc-align-3 li, body.acc-align-3 h1, body.acc-align-3 h2,
body.acc-align-3 h3, body.acc-align-3 h4, body.acc-align-3 h5, body.acc-align-3 h6 { text-align: right !important; }
body.acc-align-4 p, body.acc-align-4 li, body.acc-align-4 h1, body.acc-align-4 h2,
body.acc-align-4 h3, body.acc-align-4 h4, body.acc-align-4 h5, body.acc-align-4 h6 { text-align: justify !important; }

/* ── Kejenuhan (Saturation): Rendah, Tinggi, Desaturasi ─────── */
body.acc-saturation-1 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { filter: saturate(0.5) !important; }
body.acc-saturation-2 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { filter: saturate(1.8) !important; }
body.acc-saturation-3 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { filter: saturate(0) !important; }

/* ── Kontras+ (mode eksklusif): Balikan Warna, Kontras Tinggi, Latar Gelap, Latar Terang ─ */
body.acc-contrast-1 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { filter: invert(1) hue-rotate(180deg) !important; }
body.acc-contrast-2 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) { filter: contrast(1.5) !important; }
body.acc-contrast-3 {
    background: #000 !important;
    color: #fff !important;
}
body.acc-contrast-3 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.acc-contrast-3 a  { color: #FFD000 !important; }
body.acc-contrast-3 img { filter: invert(1) contrast(1.2) !important; }
body.acc-contrast-4 {
    background: #fffde7 !important;
    color: #212121 !important;
}
body.acc-contrast-4 *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) {
    background-color: #fffde7 !important;
    color: #212121 !important;
}

/* ── Garis Bawahi Tautan / Sorot Tautan ────────────────────── */
body.acc-links-underline a { text-decoration: underline !important; }
body.acc-links-highlight a {
    text-decoration: underline !important;
    background: #fff9c4 !important;
    color: #000 !important;
    padding: 1px 3px;
    border-radius: 2px;
}

/* ── Ramah Disleksia / Tulisan Dapat Dibaca ─────────────────── */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.otf') format('opentype');
    font-display: swap;
}
body.acc-dyslexic-font,
body.acc-dyslexic-font *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}
body.acc-readable-font,
body.acc-readable-font *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.03em !important;
}

/* ── Kursor: langkah "Kursor Besar" ─────────────────────────── */
body.acc-cursor-big,
body.acc-cursor-big *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *) {
    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='M8 4 L8 40 L18 30 L26 46 L32 43 L24 27 L38 27 Z' fill='%232f6bff' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* ── Keterangan Alat (tooltip judul tile) ────────────────────── */
#acc-panel-body.acc-show-tooltips .acc-tile {
    position: relative;
}
#acc-panel-body.acc-show-tooltips .acc-tile[data-tooltip]:hover::after,
#acc-panel-body.acc-show-tooltips .acc-tile[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.72em;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
}

/* ── Stop Animation ────────────────────────────────────────── */
body.acc-stop-animation *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *),
body.acc-stop-animation *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *)::before,
body.acc-stop-animation *:not(#acc-panel):not(#acc-panel *):not(#acc-toggle-btn):not(#acc-toggle-btn *)::after {
    animation: none !important;
    transition: none !important;
}

/* ── Buta Warna (Color Blind Filter) ───────────────────────── */
body.acc-colorblind {
    filter: saturate(1.6) hue-rotate(-8deg) !important;
}

/* ── Hide Images ───────────────────────────────────────────── */
body.acc-hide-images img,
body.acc-hide-images figure,
body.acc-hide-images .slide-container,
body.acc-hide-images [style*="background-image"] {
    visibility: hidden !important;
}

/* ── Moda Suara: penanda hover (baca saat arahkan kursor) ──── */
body.acc-click-to-read p,
body.acc-click-to-read h1, body.acc-click-to-read h2,
body.acc-click-to-read h3, body.acc-click-to-read h4,
body.acc-click-to-read h5, body.acc-click-to-read h6,
body.acc-click-to-read li, body.acc-click-to-read td, body.acc-click-to-read th,
body.acc-click-to-read blockquote, body.acc-click-to-read a, body.acc-click-to-read label,
body.acc-click-to-read figcaption, body.acc-click-to-read dt, body.acc-click-to-read dd,
body.acc-click-to-read .card, body.acc-click-to-read [class$="-card"],
body.acc-click-to-read [class*=" card-"], body.acc-click-to-read [class*="card-item"],
body.acc-click-to-read .post-image, body.acc-click-to-read .post-content {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%2311375c' opacity='0.85'/%3E%3Ctext x='16' y='21' text-anchor='middle' font-size='16' fill='white'%3E🔊%3C/text%3E%3C/svg%3E") 16 16, pointer !important;
    transition: background 0.15s;
}
body.acc-click-to-read p:hover,
body.acc-click-to-read h1:hover, body.acc-click-to-read h2:hover,
body.acc-click-to-read h3:hover, body.acc-click-to-read h4:hover,
body.acc-click-to-read li:hover, body.acc-click-to-read td:hover, body.acc-click-to-read th:hover,
body.acc-click-to-read a:hover, body.acc-click-to-read label:hover {
    background: rgba(17,55,92,0.07) !important;
    border-radius: 4px;
    outline: 2px dashed #11375c;
}

/* ── TTS Active element highlight ──────────────────────────── */
.acc-tts-reading {
    background: #fff9c4 !important;
    outline: 2px solid #FFD000 !important;
    border-radius: 4px;
    scroll-margin-top: 80px;
}

/* ── Focus Visible (keyboard nav) ─────────────────────────── */
/* body *:focus-visible {
    outline: 3px solid #FFD000 !important;
    outline-offset: 2px !important;
} */

/* ── Scrollbar toolbar ─────────────────────────────────────── */
#acc-panel-body::-webkit-scrollbar { width: 5px; }
#acc-panel-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
#acc-panel-body::-webkit-scrollbar-thumb:hover { background: #11375c; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    #acc-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-height: calc(100vh - 16px);
    }
    #acc-toggle-btn { left: 12px; bottom: 12px; }
}