/**
 * Widget Disabilitas — Modul Aksesibilitas Portable
 * Bahasa: Indonesia (mudah dimaintenance)
 * Tidak butuh backend. Copy folder ini ke public/modules/a11y-widget/
 */

:root {
  --disabilitas-utama: #06615E;
  --disabilitas-utama-tua: #044845;
  --disabilitas-utama-muda: #298b88;
  --disabilitas-bg: #f3f4f6;
  --disabilitas-kartu: #ffffff;
  --disabilitas-teks: #111827;
  --disabilitas-abu: #6b7280;
  --disabilitas-batas: #e5e7eb;
  --disabilitas-lembut: #e6f4f3;
  --disabilitas-garis-lembut: #b7dfdd;
  --disabilitas-bayangan: 0 14px 36px rgba(6, 97, 94, 0.22);
  --disabilitas-z: 99990;
  --disabilitas-ukuran-teks: 100%;
  --disabilitas-tinggi-baris: 1.5;
  --disabilitas-spasi-huruf: normal;
  --disabilitas-spasi-kata: normal;
}

/* ========== Tombol mengambang ========== */
.disabilitas-akar {
  position: fixed;
  left: 16px;
  top: calc(50% + 70px);
  transform: translateY(-50%);
  z-index: var(--disabilitas-z);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--disabilitas-teks);
}

.disabilitas-akar[data-posisi="kanan-tengah"] {
  left: auto;
  right: 16px;
}

.disabilitas-picu {
  height: 54px;
  width: 54px;
  max-width: 54px;
  border-radius: 999px;
  border: 0;
  background: var(--disabilitas-utama);
  color: #fff;
  box-shadow: var(--disabilitas-bayangan);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0 13px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease, padding 0.25s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.disabilitas-picu-ikon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.disabilitas-picu-ikon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.disabilitas-picu-teks {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  margin-left: 0;
  transition: opacity 0.2s ease, max-width 0.25s ease, margin 0.25s ease;
}

.disabilitas-picu:hover,
.disabilitas-picu:focus-visible {
  max-width: 220px;
  width: auto;
  padding: 0 18px 0 13px;
  background: var(--disabilitas-utama-tua);
  outline: 3px solid var(--disabilitas-garis-lembut);
  outline-offset: 2px;
  box-shadow: 0 14px 32px rgba(6, 97, 94, 0.35);
}

.disabilitas-picu:hover .disabilitas-picu-teks,
.disabilitas-picu:focus-visible .disabilitas-picu-teks {
  opacity: 1;
  max-width: 160px;
  margin-left: 10px;
}

.disabilitas-picu[aria-expanded="true"] {
  background: var(--disabilitas-utama-tua);
}

.disabilitas-picu svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* ========== Panel ========== */
.disabilitas-panel {
  position: absolute;
  left: 66px;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, calc(100vw - 90px));
  max-height: min(84vh, 640px);
  overflow: auto;
  background: var(--disabilitas-bg);
  border-radius: 14px;
  box-shadow: var(--disabilitas-bayangan);
  display: none;
}

.disabilitas-akar[data-posisi="kanan-tengah"] .disabilitas-panel {
  left: auto;
  right: 66px;
}

.disabilitas-panel.terbuka {
  display: block;
}

.disabilitas-kepala {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--disabilitas-utama);
  color: #fff;
  padding: 14px 14px 14px 16px;
  border-radius: 14px 14px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.disabilitas-kepala svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 auto;
}

.disabilitas-kepala h2 {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.disabilitas-tutup {
  border: 0;
  background: transparent;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.disabilitas-tutup:hover,
.disabilitas-tutup:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: 2px solid #fff;
}

.disabilitas-isi {
  padding: 12px;
}

.disabilitas-petunjuk {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--disabilitas-abu);
}

.disabilitas-kartu {
  background: var(--disabilitas-kartu);
  border: 1px solid var(--disabilitas-batas);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}

.disabilitas-baris-alih {
  display: flex;
  align-items: center;
  gap: 10px;
}

.disabilitas-baris-alih .disabilitas-ikon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--disabilitas-lembut);
  color: var(--disabilitas-utama);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.disabilitas-baris-alih .disabilitas-teks-blok {
  flex: 1;
  min-width: 0;
}

.disabilitas-baris-alih strong {
  display: block;
  font-size: 0.92rem;
}

.disabilitas-baris-alih small {
  display: block;
  color: var(--disabilitas-abu);
  font-size: 0.75rem;
  margin-top: 2px;
}

.disabilitas-saklar {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.disabilitas-saklar input {
  opacity: 0;
  width: 0;
  height: 0;
}

.disabilitas-saklar span {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.disabilitas-saklar span::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.disabilitas-saklar input:checked + span {
  background: var(--disabilitas-utama);
}

.disabilitas-saklar input:checked + span::after {
  transform: translateX(20px);
}

.disabilitas-label-grup {
  display: block;
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--disabilitas-abu);
}

.disabilitas-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--disabilitas-batas);
  border-radius: 999px;
  padding: 6px 8px;
}

.disabilitas-stepper button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--disabilitas-batas);
  background: #fff;
  color: var(--disabilitas-teks);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.disabilitas-stepper button:hover,
.disabilitas-stepper button:focus-visible {
  border-color: var(--disabilitas-utama);
  color: var(--disabilitas-utama);
  outline: 2px solid var(--disabilitas-garis-lembut);
}

.disabilitas-stepper-nilai {
  font-weight: 800;
  font-size: 0.95rem;
  min-width: 64px;
  text-align: center;
}

.disabilitas-chip-grup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.disabilitas-chip {
  border: 1px solid var(--disabilitas-batas);
  background: #fff;
  color: #4b5563;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}

.disabilitas-chip.aktif {
  background: var(--disabilitas-utama);
  border-color: var(--disabilitas-utama);
  color: #fff;
}

.disabilitas-rata-grup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.disabilitas-rata {
  border: 1px solid var(--disabilitas-batas);
  background: #fff;
  color: #4b5563;
  border-radius: 10px;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
}

.disabilitas-rata .ikon {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.disabilitas-rata .teks {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.disabilitas-rata.aktif {
  background: var(--disabilitas-utama);
  border-color: var(--disabilitas-utama);
  color: #fff;
}

.disabilitas-tombol-daftar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--disabilitas-batas);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--disabilitas-teks);
}

.disabilitas-tombol-daftar .ikon {
  width: 28px;
  text-align: center;
  font-weight: 800;
  color: var(--disabilitas-utama);
}

.disabilitas-tombol-daftar .nama {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}

.disabilitas-tombol-daftar .bulat {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  flex: 0 0 auto;
}

.disabilitas-tombol-daftar.aktif {
  border-color: var(--disabilitas-utama);
  box-shadow: inset 0 0 0 1px var(--disabilitas-utama);
}

.disabilitas-tombol-daftar.aktif .bulat {
  border-color: var(--disabilitas-utama);
  background: radial-gradient(circle at center, var(--disabilitas-utama) 45%, transparent 48%);
}

.disabilitas-aksi {
  margin-top: 8px;
}

.disabilitas-reset {
  width: 100%;
  border: 1px solid var(--disabilitas-garis-lembut);
  background: var(--disabilitas-lembut);
  color: var(--disabilitas-utama);
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  cursor: pointer;
}

.disabilitas-reset:hover,
.disabilitas-reset:focus-visible {
  background: var(--disabilitas-lembut);
  image.png  outline: 2px solid #fca5a5;
}

/* ========== Panduan baca (mask + jendela fokus) ========== */
.disabilitas-panduan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--disabilitas-z) - 2);
  display: none;
}

html.disabilitas-panduan-baca .disabilitas-panduan {
  display: block;
}

.disabilitas-panduan-atas,
.disabilitas-panduan-bawah {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.55);
}

.disabilitas-panduan-jendela {
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  border-top: 3px solid #fbbf24;
  border-bottom: 3px solid #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

/* Widget tidak ikut efek halaman */
.disabilitas-akar,
.disabilitas-akar * {
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

html.disabilitas-mode-gelap .disabilitas-panel,
html.disabilitas-kontras .disabilitas-panel {
  filter: none !important;
}

html.disabilitas-abu-abu .disabilitas-akar {
  filter: none;
}

/* ========== Efek ke halaman ========== */
/* Chromium/Safari: zoom body (ikut elemen px). Firefox: fallback font-size html. */
html.disabilitas-aktif body {
  line-height: var(--disabilitas-tinggi-baris) !important;
  letter-spacing: var(--disabilitas-spasi-huruf) !important;
  word-spacing: var(--disabilitas-spasi-kata) !important;
}

@supports (zoom: 1) {
  html.disabilitas-aktif body {
    zoom: calc(var(--disabilitas-ukuran-teks) / 100%);
  }
  /* Widget dipasang di <html> (saudara body) — tidak ikut zoom/filter body */
}

@supports not (zoom: 1) {
  html.disabilitas-aktif {
    font-size: var(--disabilitas-ukuran-teks) !important;
  }
}

html.disabilitas-aktif p,
html.disabilitas-aktif li,
html.disabilitas-aktif td,
html.disabilitas-aktif th,
html.disabilitas-aktif h1,
html.disabilitas-aktif h2,
html.disabilitas-aktif h3,
html.disabilitas-aktif h4,
html.disabilitas-aktif a,
html.disabilitas-aktif span,
html.disabilitas-aktif .txt,
html.disabilitas-aktif .details-content {
  line-height: var(--disabilitas-tinggi-baris) !important;
  letter-spacing: var(--disabilitas-spasi-huruf) !important;
  word-spacing: var(--disabilitas-spasi-kata) !important;
}

html.disabilitas-rata-kiri body,
html.disabilitas-rata-kiri p,
html.disabilitas-rata-kiri .txt,
html.disabilitas-rata-kiri .details-content { text-align: left !important; }

html.disabilitas-rata-tengah body,
html.disabilitas-rata-tengah p,
html.disabilitas-rata-tengah .txt,
html.disabilitas-rata-tengah .details-content { text-align: center !important; }

html.disabilitas-rata-kanan body,
html.disabilitas-rata-kanan p,
html.disabilitas-rata-kanan .txt,
html.disabilitas-rata-kanan .details-content { text-align: right !important; }

html.disabilitas-rata-penuh body,
html.disabilitas-rata-penuh p,
html.disabilitas-rata-penuh .txt,
html.disabilitas-rata-penuh .details-content { text-align: justify !important; }

html.disabilitas-tebal,
html.disabilitas-tebal body,
html.disabilitas-tebal p,
html.disabilitas-tebal li,
html.disabilitas-tebal a,
html.disabilitas-tebal span,
html.disabilitas-tebal .txt {
  font-weight: 700 !important;
}

html.disabilitas-sorot-tautan a {
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 3px !important;
  font-weight: 800 !important;
  color: #1d4ed8 !important;
  background: rgba(250, 204, 21, 0.35) !important;
  padding: 0 2px;
  border-radius: 2px;
}

/* Mode gelap — kartu putih & teks ikut gelap biar kontras */
html.disabilitas-mode-gelap {
  color-scheme: dark;
  background: #0b1220 !important;
}

html.disabilitas-mode-gelap body {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

html.disabilitas-mode-gelap .main-content,
html.disabilitas-mode-gelap .blog-standard-wrap,
html.disabilitas-mode-gelap .blog-details-wrap,
html.disabilitas-mode-gelap .details-content,
html.disabilitas-mode-gelap .page-banner-brd,
html.disabilitas-mode-gelap header,
html.disabilitas-mode-gelap footer,
html.disabilitas-mode-gelap .navbar,
html.disabilitas-mode-gelap .navbar-area,
html.disabilitas-mode-gelap .mean-container,
html.disabilitas-mode-gelap .footer-widgets-wrap,
html.disabilitas-mode-gelap .sidebar,
html.disabilitas-mode-gelap aside,
html.disabilitas-mode-gelap section,
html.disabilitas-mode-gelap .container,
html.disabilitas-mode-gelap .card,
html.disabilitas-mode-gelap .card-body,
html.disabilitas-mode-gelap .bg-white,
html.disabilitas-mode-gelap .mtd-news-card,
html.disabilitas-mode-gelap .mtd-news-body,
html.disabilitas-mode-gelap .video-news-card,
html.disabilitas-mode-gelap .gpr-widget-card,
html.disabilitas-mode-gelap .balai-map-card,
html.disabilitas-mode-gelap .team-member-inner,
html.disabilitas-mode-gelap .maskot-card,
html.disabilitas-mode-gelap .swiper-slide,
html.disabilitas-mode-gelap .modal-content,
html.disabilitas-mode-gelap .alert-light {
  background-color: #1e293b !important;
  background: #1e293b !important;
  background-image: none !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.disabilitas-mode-gelap .mtd-news-card h3,
html.disabilitas-mode-gelap .mtd-news-body h3,
html.disabilitas-mode-gelap .mtd-news-author,
html.disabilitas-mode-gelap .mtd-news-more {
  color: #f1f5f9 !important;
}

/* Sidebar + share bar di detail berita */
html.disabilitas-mode-gelap .blog-sidebar-wrap,
html.disabilitas-mode-gelap .product-filter-single,
html.disabilitas-mode-gelap .article-share-tags,
html.disabilitas-mode-gelap .blog-details-wrap,
html.disabilitas-mode-gelap .details-content .meta,
html.disabilitas-mode-gelap .main-image ul.meta {
  background-color: #1e293b !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.disabilitas-mode-gelap .product-filter-single h2,
html.disabilitas-mode-gelap .blog-sidebar-wrap h2,
html.disabilitas-mode-gelap .blog-sidebar-wrap h5,
html.disabilitas-mode-gelap .blog-sidebar-wrap h5 a,
html.disabilitas-mode-gelap .category.product-filter-single li a,
html.disabilitas-mode-gelap .recent.product-filter-single .r-posts .d-flex h5 a,
html.disabilitas-mode-gelap .recent.product-filter-single .r-posts .d-flex p,
html.disabilitas-mode-gelap .tags.product-filter-single li a,
html.disabilitas-mode-gelap .article-share-tags li,
html.disabilitas-mode-gelap .article-share-tags .socials li,
html.disabilitas-mode-gelap .article-share-tags li a {
  color: #f1f5f9 !important;
}

html.disabilitas-mode-gelap .tags.product-filter-single li a {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

html.disabilitas-mode-gelap .product-search-filter .frm-group .form-control {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html.disabilitas-mode-gelap .product-search-filter .frm-group .form-control::placeholder {
  color: #94a3b8 !important;
}

html.disabilitas-mode-gelap .article-share-tags .socials li a {
  background-color: #334155 !important;
  color: #5eead4 !important;
  border-color: #475569 !important;
}

html.disabilitas-mode-gelap h1,
html.disabilitas-mode-gelap h2,
html.disabilitas-mode-gelap h3,
html.disabilitas-mode-gelap h4,
html.disabilitas-mode-gelap h5,
html.disabilitas-mode-gelap h6,
html.disabilitas-mode-gelap p,
html.disabilitas-mode-gelap li,
html.disabilitas-mode-gelap span,
html.disabilitas-mode-gelap .txt,
html.disabilitas-mode-gelap .bl-title,
html.disabilitas-mode-gelap .meta,
html.disabilitas-mode-gelap label,
html.disabilitas-mode-gelap .mtd-news-title,
html.disabilitas-mode-gelap .mtd-news-more,
html.disabilitas-mode-gelap .card-title,
html.disabilitas-mode-gelap .card-text,
html.disabilitas-mode-gelap .text-dark,
html.disabilitas-mode-gelap .text-body,
html.disabilitas-mode-gelap .text-muted,
html.disabilitas-mode-gelap .text-black,
html.disabilitas-mode-gelap .text-secondary {
  color: #e2e8f0 !important;
}

html.disabilitas-mode-gelap a,
html.disabilitas-mode-gelap .mtd-news-more,
html.disabilitas-mode-gelap .nav-link {
  color: #5eead4 !important;
}

html.disabilitas-mode-gelap .btn,
html.disabilitas-mode-gelap .btn-default,
html.disabilitas-mode-gelap .buy-btn {
  color: #fff !important;
}

html.disabilitas-mode-gelap img {
  opacity: 0.95;
}

/* Widget tetap terang & di atas semua mode */
html.disabilitas-mode-gelap .disabilitas-akar,
html.disabilitas-kontras .disabilitas-akar,
html.disabilitas-abu-abu .disabilitas-akar {
  filter: none !important;
  color-scheme: light;
}

html.disabilitas-mode-gelap .disabilitas-panel,
html.disabilitas-kontras .disabilitas-panel {
  background: #f3f4f6 !important;
  color: #111827 !important;
  filter: none !important;
}

html.disabilitas-kontras {
  background: #000 !important;
}

html.disabilitas-kontras body,
html.disabilitas-kontras .card,
html.disabilitas-kontras .mtd-news-card,
html.disabilitas-kontras header,
html.disabilitas-kontras footer,
html.disabilitas-kontras section,
html.disabilitas-kontras .container {
  background: #000 !important;
  color: #fff !important;
}

html.disabilitas-kontras a {
  color: #ffe066 !important;
  text-decoration: underline !important;
}

/*
 * Skala abu-abu: filter HANYA di body.
 * Widget dipasang di <html> agar position:fixed tidak “ikut scroll” (bug CSS filter).
 */
html.disabilitas-abu-abu body {
  filter: grayscale(1);
}

html.disabilitas-hentikan-animasi *,
html.disabilitas-hentikan-animasi *::before,
html.disabilitas-hentikan-animasi *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.disabilitas-sembunyikan-gambar img,
html.disabilitas-sembunyikan-gambar picture,
html.disabilitas-sembunyikan-gambar video {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.disabilitas-kursor-besar,
html.disabilitas-kursor-besar * {
  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 fill='%23000' stroke='%23fff' stroke-width='2' d='M8 4v36l9-9 5 14 6-2-5-14 13-1z'/%3E%3C/svg%3E") 4 4, auto !important;
}

html.disabilitas-fokus-tegas *:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 3px !important;
}

html.disabilitas-mode-suara [data-disabilitas-bicara="1"] {
  outline: 2px solid #f59e0b !important;
  background: rgba(251, 191, 36, 0.18) !important;
}

@media (max-width: 575px) {
  .disabilitas-akar { left: 10px; top: calc(50% + 64px); }
  .disabilitas-panel {
    left: 58px;
    width: min(300px, calc(100vw - 74px));
    max-height: 75vh;
  }
}