/* =========================================================
   ACCESSIBILITY WIDGET V4
   Dapur Data Magelang
========================================================= */

@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/OpenDyslexic/OpenDyslexic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   WIDGET
========================================================= */

.accessibility-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* =========================================================
   TOGGLE
========================================================= */

.accessibility-toggle {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #082e21;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.accessibility-toggle:hover {
  background: #ea6226;
  transform: scale(1.06);
}

.accessibility-toggle:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 3px;
}

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

.accessibility-panel {
  position: absolute;
  left: 0;
  bottom: 68px;
  width: 390px;
  max-width: calc(100vw - 28px);
  max-height: 82vh;
  overflow-y: auto;
  padding: 18px;
  background: #fff;
  color: #212529;
  border: 1px solid #e2e6ea;
  border-radius: 18px;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25);
  display: none;
  scrollbar-width: thin;
}

.accessibility-panel.show {
  display: block;
}

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

.accessibility-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.accessibility-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #134c39;
  font-size: 18px;
  font-weight: 700;
}

.accessibility-title i {
  font-size: 20px;
}

.accessibility-subtitle {
  margin-top: 3px;
  color: #6c757d;
  font-size: 11px;
  line-height: 1.4;
}

.accessibility-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f5;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
}

.accessibility-close:hover {
  background: #ea6226;
  color: #fff;
}

.accessibility-close:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

/* =========================================================
   SECTION
========================================================= */

.accessibility-section {
  margin-bottom: 20px;
}

.accessibility-section:last-of-type {
  margin-bottom: 14px;
}

.accessibility-section-title {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
  color: #6c757d;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accessibility-section-title i {
  width: 18px;
  margin-right: 5px;
  font-size: 12px;
}

/* =========================================================
   TTS GRID
========================================================= */

.accessibility-tts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.accessibility-tts-grid button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: #134c39;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.accessibility-tts-grid button:hover {
  background: #ea6226;
}

.accessibility-tts-grid button:active {
  transform: scale(0.98);
}

.accessibility-tts-grid button:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

.accessibility-tts-grid button i {
  font-size: 14px;
}

/* =========================================================
   TTS STATUS
========================================================= */

.accessibility-tts-status {
  margin-top: 8px;
  min-height: 34px;
  padding: 8px 10px;
  background: #f4f6f8;
  border-radius: 8px;
  color: #495057;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 7px;
}

.accessibility-tts-status i {
  flex-shrink: 0;
  font-size: 12px;
}

/* =========================================================
   TTS SELECT
========================================================= */

.accessibility-voice-select {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #212529;
  font-size: 12px;
  cursor: pointer;
}

.accessibility-voice-select:focus {
  border-color: #134c39;
  outline: 3px solid rgba(11, 43, 71, 0.15);
}

/* =========================================================
   SPEED / VOLUME / PITCH
========================================================= */

.accessibility-speed {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accessibility-speed input[type="range"] {
  flex: 1;
  min-width: 0;
}

.accessibility-speed > i {
  flex-shrink: 0;
  font-size: 13px;
  color: #6c757d;
}

.accessibility-speed-value {
  min-width: 42px;
  text-align: right;
  color: #134c39;
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   GENERIC GRID
========================================================= */

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

/* =========================================================
   ACTION
========================================================= */

.accessibility-action {
  min-height: 64px;
  padding: 8px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  color: #212529;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.accessibility-action:hover {
  border-color: #134c39;
  background: #f7f9fb;
}

.accessibility-action:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

.accessibility-action.active {
  border-color: #134c39;
  background: #134c39;
  color: #fff;
}

.accessibility-icon {
  display: block;
  margin: 0;
  font-size: 19px;
}

/* =========================================================
   FONT SIZE
========================================================= */

.accessibility-font-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.accessibility-font-grid button {
  min-height: 48px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #212529;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 600;
}

.accessibility-font-grid button:hover {
  border-color: #134c39;
}

.accessibility-font-grid button:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

.accessibility-font-grid button.active {
  background: #134c39;
  border-color: #134c39;
  color: #fff;
}

.accessibility-font-grid button strong {
  font-size: 17px;
}

.accessibility-font-grid button span {
  font-size: 10px;
}

/* =========================================================
   ALIGNMENT
========================================================= */

.accessibility-align-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.accessibility-align-grid button {
  min-height: 42px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #212529;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.accessibility-align-grid button:hover {
  border-color: #134c39;
}

.accessibility-align-grid button:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

.accessibility-align-grid button.active {
  background: #134c39;
  border-color: #134c39;
  color: #fff;
}

/* =========================================================
   ZOOM
========================================================= */

.accessibility-zoom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.accessibility-zoom-grid button {
  min-height: 44px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
  color: #212529;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.accessibility-zoom-grid button:hover {
  border-color: #134c39;
}

.accessibility-zoom-grid button:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: 2px;
}

.accessibility-zoom-grid button.active {
  background: #134c39;
  color: #fff;
  border-color: #134c39;
}

/* =========================================================
   HEADING NAVIGATION
========================================================= */

.accessibility-heading-list {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 9px;
  background: #fff;
}

.accessibility-heading-item {
  width: 100%;
  display: block;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  color: #333;
  text-align: left;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.4;
}

.accessibility-heading-item:last-child {
  border-bottom: 0;
}

.accessibility-heading-item:hover {
  background: #f1f5f8;
}

.accessibility-heading-item:focus-visible {
  outline: 3px solid #ea6226;
  outline-offset: -3px;
}

.accessibility-heading-item.level-1 {
  padding-left: 10px;
  font-weight: 700;
}

.accessibility-heading-item.level-2 {
  padding-left: 20px;
}

.accessibility-heading-item.level-3 {
  padding-left: 32px;
}

.accessibility-heading-item.level-4 {
  padding-left: 44px;
}

.accessibility-heading-item.level-5 {
  padding-left: 56px;
}

.accessibility-heading-item.level-6 {
  padding-left: 68px;
}

html.a11y-zoom-90 {
  zoom: 0.9 !important;
}
html.a11y-zoom-125 {
  zoom: 1.25 !important;
}
html.a11y-zoom-150 {
  zoom: 1.5 !important;
}

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

.accessibility-reset {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dc3545;
  border-radius: 9px;
  background: #fff;
  color: #dc3545;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.accessibility-reset:hover {
  background: #dc3545;
  color: #fff;
}

.accessibility-reset:focus-visible {
  outline: 3px solid #dc3545;
  outline-offset: 2px;
}

/* =========================================================
   DYSLEXIA
========================================================= */

body.a11y-dyslexia
  :where(
    p,
    li,
    td,
    th,
    label,
    legend,
    blockquote,
    figcaption,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    article,
    section,
    .text,
    .card-text,
    .form-label,
    .form-control,
    .form-select,
    textarea,
    input
  ):not(.accessibility-widget *) {
  font-family: "OpenDyslexic", Arial, sans-serif !important;
  letter-spacing: 0.035em !important;
  word-spacing: 0.08em !important;
  line-height: 1.75 !important;
}

/*
   Fallback untuk elemen teks umum.
   Tidak menggunakan selector * supaya icon font tidak rusak.
*/

body.a11y-dyslexia
  :where(span, div, a, button):not(
    .accessibility-widget *,
    .fa,
    .fas,
    .far,
    .fal,
    .fab,
    .fad,
    [class*="fa-"],
    .material-icons,
    .material-icons-outlined,
    .material-icons-round,
    .material-icons-sharp,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    [class*="glyphicon"],
    [class*="icon-"]
  ) {
  font-family: "OpenDyslexic", Arial, sans-serif !important;
}

/* =========================================================
   READABLE FONT
========================================================= */
body.a11y-readable-font
  :where(
    p,
    li,
    td,
    th,
    label,
    legend,
    blockquote,
    figcaption,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    article,
    section,
    .text,
    .card-text,
    .form-label
  ):not(.accessibility-widget *) {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   UPPERCASE
========================================================= */
body.a11y-uppercase
  :where(
    p,
    li,
    td,
    th,
    label,
    legend,
    blockquote,
    figcaption,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
  ):not(.accessibility-widget *) {
  text-transform: uppercase !important;
}

/* =========================================================
   FONT SIZE
========================================================= */

body.a11y-font-large {
  font-size: 112% !important;
}

body.a11y-font-xlarge {
  font-size: 125% !important;
}

body.a11y-font-xxlarge {
  font-size: 140% !important;
}

/* =========================================================
   TEXT SPACING
========================================================= */
body.a11y-spacing
  :where(p, li, td, th, label, blockquote, figcaption):not(
    .accessibility-widget *
  ) {
  letter-spacing: 0.07em !important;
  word-spacing: 0.15em !important;
  line-height: 1.8 !important;
}

body.a11y-letter-spacing
  :where(p, li, td, th, label, blockquote, figcaption):not(
    .accessibility-widget *
  ) {
  letter-spacing: 0.12em !important;
}

body.a11y-word-spacing
  :where(p, li, td, th, label, blockquote, figcaption):not(
    .accessibility-widget *
  ) {
  word-spacing: 0.2em !important;
}

/* =========================================================
   LINE HEIGHT
========================================================= */

body.a11y-lineheight
  :where(p, li, td, th, label, blockquote, figcaption):not(
    .accessibility-widget *
  ) {
  line-height: 2 !important;
}

/* =========================================================
   ALIGNMENT
========================================================= */

body.a11y-align-left
  :where(p, li, td, th, h1, h2, h3, h4, h5, h6):not(.accessibility-widget *) {
  text-align: left !important;
}

body.a11y-align-center
  :where(p, li, td, th, h1, h2, h3, h4, h5, h6):not(.accessibility-widget *) {
  text-align: center !important;
}

body.a11y-align-right
  :where(p, li, td, th, h1, h2, h3, h4, h5, h6):not(.accessibility-widget *) {
  text-align: right !important;
}

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

body.a11y-high-contrast {
  background: #000 !important;
  color: #fff !important;
}

body.a11y-high-contrast
  :where(
    main,
    section,
    article,
    .card,
    .modal-content,
    .dropdown-menu,
    table,
    td,
    th,
    input,
    textarea,
    select
  ):not(.accessibility-widget *) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.a11y-high-contrast a:not(.accessibility-widget *) {
  color: #ffff00 !important;
}

body.a11y-high-contrast button:not(.accessibility-widget button) {
  border-color: #fff !important;
}

/* =========================================================
   INVERT
========================================================= */

body.a11y-invert {
  filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-invert img,
body.a11y-invert video,
body.a11y-invert iframe {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* =========================================================
   DARK MODE
========================================================= */

body.a11y-dark {
  background: #121212 !important;
  color: #eeeeee !important;
}

body.a11y-dark
  :where(
    main,
    section,
    article,
    .card,
    .modal-content,
    .dropdown-menu,
    .table,
    .form-control,
    .form-select
  ):not(.accessibility-widget *) {
  background-color: #1e1e1e !important;
  color: #eeeeee !important;
  border-color: #444 !important;
}

body.a11y-dark :where(input, textarea, select):not(.accessibility-widget *) {
  background-color: #252525 !important;
  color: #fff !important;
}

body.a11y-dark a:not(.accessibility-widget *) {
  color: #8ecbff !important;
}

body.a11y-dark .accessibility-panel {
  background: #1f1f1f;
  color: #fff;
  border-color: #444;
}

body.a11y-dark .accessibility-title {
  color: #fff;
}

body.a11y-dark .accessibility-action {
  background: #292929;
  color: #fff;
  border-color: #555;
}

body.a11y-dark .accessibility-action:hover {
  background: #333;
}

body.a11y-dark .accessibility-font-grid button,
body.a11y-dark .accessibility-align-grid button,
body.a11y-dark .accessibility-zoom-grid button,
body.a11y-dark .accessibility-voice-select {
  background: #292929;
  color: #fff;
  border-color: #555;
}

body.a11y-dark .accessibility-heading-list,
body.a11y-dark .accessibility-heading-item {
  background: #292929;
  color: #fff;
  border-color: #444;
}

body.a11y-dark .accessibility-tts-status {
  background: #292929;
  color: #ddd;
}

/* =========================================================
   GRAYSCALE
========================================================= */
body.a11y-grayscale {
  filter: grayscale(100%) !important;
}

/* =========================================================
   HIGH SATURATION
========================================================= */
body.a11y-saturation {
  filter: saturate(180%) !important;
}

/* =========================================================
   LARGE CURSOR
========================================================= */
body.a11y-large-cursor,
body.a11y-large-cursor * {
  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='M5 3L41 24L27 27L36 42L28 46L19 30L10 39Z' fill='white' stroke='black' stroke-width='3'/%3E%3C/svg%3E")
      5 3,
    auto !important;
}

/* =========================================================
   EXTRA CURSOR
========================================================= */
body.a11y-extra-cursor,
body.a11y-extra-cursor * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M5 3L55 32L36 36L48 58L37 62L25 40L12 53Z' fill='white' stroke='black' stroke-width='4'/%3E%3C/svg%3E")
      5 3,
    auto !important;
}

/* =========================================================
   LINK HIGHLIGHT
========================================================= */
body.a11y-links a:not(.accessibility-widget a) {
  outline: 2px solid #ea6226 !important;
  outline-offset: 3px !important;
  text-decoration: underline !important;
}

/* =========================================================
   FOCUS
========================================================= */
body.a11y-focus :focus-visible:not(.accessibility-widget *) {
  outline: 3px solid #ea6226 !important;
  outline-offset: 3px !important;
}

/* =========================================================
   HIDE IMAGES
========================================================= */
body.a11y-hide-images img:not(.accessibility-widget img),
body.a11y-hide-images picture:not(.accessibility-widget picture),
body.a11y-hide-images video:not(.accessibility-widget video) {
  visibility: hidden !important;
}

/* =========================================================
   REDUCE MOTION
========================================================= */
body.a11y-reduce-motion *:not(.accessibility-widget *),
body.a11y-reduce-motion *:not(.accessibility-widget *)::before,
body.a11y-reduce-motion *:not(.accessibility-widget *)::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* =========================================================
   READING MODE
========================================================= */
body.a11y-reading {
  background: #f5f1e8 !important;
}

body.a11y-reading main,
body.a11y-reading #main-content,
body.a11y-reading .main-content,
body.a11y-reading .content,
body.a11y-reading .page-content {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fffdf7 !important;
  padding: 30px !important;
  border-radius: 12px;
}

/* =========================================================
   PARAGRAPH HIGHLIGHT
========================================================= */
body.a11y-paragraph-highlight p:hover,
body.a11y-paragraph-highlight li:hover,
body.a11y-paragraph-highlight td:hover,
body.a11y-paragraph-highlight th:hover,
body.a11y-paragraph-highlight blockquote:hover {
  background: rgba(255, 193, 7, 0.18) !important;
  outline: 2px solid rgba(234, 98, 38, 0.35) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   HEADING HIGHLIGHT
========================================================= */
body.a11y-heading-highlight h1:hover,
body.a11y-heading-highlight h2:hover,
body.a11y-heading-highlight h3:hover,
body.a11y-heading-highlight h4:hover,
body.a11y-heading-highlight h5:hover,
body.a11y-heading-highlight h6:hover {
  background: rgba(234, 98, 38, 0.12) !important;
  outline: 2px solid rgba(234, 98, 38, 0.35) !important;
  outline-offset: 4px;
}

/* =========================================================
   TEXT CURSOR
========================================================= */
body.a11y-text-cursor {
  caret-color: #ea6226 !important;
}
body.a11y-text-cursor p::after,
body.a11y-text-cursor li::after,
body.a11y-text-cursor blockquote::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: #ea6226;
  margin-left: 4px;
  vertical-align: middle;
  animation: a11yCaretBlink 1s steps(2, start) infinite;
  -webkit-animation: a11yCaretBlink 1s steps(2, start) infinite;
}

@keyframes a11yCaretBlink {
  50% {
    opacity: 0;
  }
}

/* =========================================================
   DISTRACTION FREE
========================================================= */
body.a11y-distraction-free nav:not(.accessibility-widget nav),
body.a11y-distraction-free aside:not(.accessibility-widget aside),
body.a11y-distraction-free .sidebar:not(.accessibility-widget .sidebar),
body.a11y-distraction-free .navbar:not(.accessibility-widget .navbar),
body.a11y-distraction-free .breadcrumb:not(.accessibility-widget .breadcrumb),
body.a11y-distraction-free footer:not(.accessibility-widget footer),
body.a11y-distraction-free .footer:not(.accessibility-widget .footer) {
  display: none !important;
}

body.a11y-distraction-free main,
body.a11y-distraction-free #main-content,
body.a11y-distraction-free .main-content,
body.a11y-distraction-free .page-content {
  width: 100% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   READING RULER
========================================================= */

.a11y-reading-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 999990;
  display: none;
  background: rgba(255, 193, 7, 0.16);
  border-top: 2px solid rgba(234, 98, 38, 0.7);
  border-bottom: 2px solid rgba(234, 98, 38, 0.7);
  transform: translateY(-17px);
}

body.a11y-ruler .a11y-reading-ruler {
  display: block;
}

/* =========================================================
   READING GUIDE
========================================================= */
.a11y-reading-guide {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999980;
  display: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0,
    rgba(0, 0, 0, 0.55) calc(var(--guide-y, 50%) - 55px),
    transparent calc(var(--guide-y, 50%) - 55px),
    transparent calc(var(--guide-y, 50%) + 55px),
    rgba(0, 0, 0, 0.55) calc(var(--guide-y, 50%) + 55px),
    rgba(0, 0, 0, 0.55) 100%
  );
}

body.a11y-guide .a11y-reading-guide {
  display: block;
}

/* =========================================================
   CURRENT TTS SENTENCE
========================================================= */

.a11y-speaking {
  background: rgba(255, 193, 7, 0.35) !important;
  outline: 2px solid #ea6226 !important;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(234, 98, 38, 0.1);
}

/* =========================================================
   SELECTION POPUP
========================================================= */
.a11y-selection-popup {
  position: fixed;
  z-index: 999997;
  display: none;
  padding: 6px;
  background: #134c39;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
}

.a11y-selection-popup.show {
  display: flex;
}

.a11y-selection-popup button {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.a11y-selection-popup button:hover {
  background: #ea6226;
  border-radius: 6px;
}

/* =========================================================
   SKIP LINK
========================================================= */

.a11y-skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 1000000;
  padding: 10px 15px;
  background: #134c39;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.a11y-skip-link:focus {
  top: 20px;
}

/* =========================================================
   BACK TO TOP
========================================================= */

.a11y-back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999990;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #134c39;
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
}

.a11y-back-top.show {
  display: flex;
}

.a11y-back-top:hover {
  background: #ea6226;
}

/* =========================================================
   FONT AWESOME
========================================================= */
.accessibility-widget i {
  line-height: 1;
}

/* =========================================================
   PREFERS REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .accessibility-widget *,
  .accessibility-widget *::before,
  .accessibility-widget *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media (max-width: 576px) {
  .accessibility-widget {
    left: 14px;
    bottom: 14px;
  }

  .accessibility-panel {
    width: calc(100vw - 28px);
    max-height: 78vh;
    padding: 15px;
  }

  .accessibility-toggle {
    width: 50px;
    height: 50px;
  }

  .accessibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accessibility-font-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accessibility-align-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accessibility-zoom-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accessibility-tts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .a11y-back-top {
    right: 14px;
    bottom: 14px;
  }
}

/* =========================================================
   HEADING NAVIGATION TARGET
========================================================= */
.a11y-heading-navigation-active {
  outline: 3px solid #ea6226 !important;
  outline-offset: 6px !important;
  border-radius: 6px;
  transition:
    outline-color 0.25s ease,
    outline-offset 0.25s ease;
}

/*
 * Memberikan ruang untuk navbar/header sticky.
 * Nilai ini juga membantu browser saat navigasi internal.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 90px;
}