/* =====================================================================
   AKSESIBILITAS & MODE GELAP
   Dipindahkan dari index.html (SPA lama). Semua fitur di bawah ini
   dikendalikan lewat class pada <html>, yang ditambah/dilepas oleh
   widget mengambang (lihat #a11yRoot sebelum </body>). Pengaturan
   disimpan di localStorage supaya tetap tersimpan walau halaman
   ditutup/dibuka lagi atau berpindah antar halaman.
   ===================================================================== */

/* Font ramah disleksia (OpenDyslexic), dimuat dari CDN publik (Fontsource
   via jsDelivr) - file font hanya benar-benar diunduh browser saat
   class a11y-dyslexia aktif dan ada teks yang memakainya. */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2');
}

/* ---- Ukuran teks (skala seluruh halaman lewat root font-size) ---- */
html.a11y-text-besar { font-size: 113%; }
html.a11y-text-sangat-besar { font-size: 128%; }

/* ---- Font disleksia ---- */
html.a11y-dyslexia body, html.a11y-dyslexia .font-display { font-family: 'OpenDyslexic', 'Plus Jakarta Sans', sans-serif !important; letter-spacing: 0.02em; }

/* ---- Sorot tautan ---- */
html.a11y-highlight-links a { outline: 2px solid #B07F2E !important; outline-offset: 2px; background: #FBF6C9 !important; color: #0B3D2E !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; border-radius: 3px; }
html.dark.a11y-highlight-links a { background: #4A431A !important; color: #FBF6EA !important; }

/* ---- Kurangi animasi ---- */
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

/* ---- Kontras tinggi ---- */
html.a11y-contrast body { background:#fff !important; color:#000 !important; }
html.a11y-contrast .text-ink, html.a11y-contrast .text-slate-300, html.a11y-contrast .text-slate-400,
html.a11y-contrast .text-slate-500, html.a11y-contrast .text-slate-600, html.a11y-contrast .text-slate-700 { color:#000 !important; }
html.a11y-contrast .bg-white, html.a11y-contrast .bg-sand-50, html.a11y-contrast .bg-sand-100 { background:#fff !important; }
html.a11y-contrast .border-line { border-color:#000 !important; border-width:2px !important; }
html.a11y-contrast a, html.a11y-contrast button { text-decoration: underline; }
html.a11y-contrast .shadow-sm, html.a11y-contrast .shadow-xl, html.a11y-contrast .shadow-2xl { box-shadow:none !important; }
html.dark.a11y-contrast body { background:#000 !important; color:#fff !important; }
html.dark.a11y-contrast .text-ink, html.dark.a11y-contrast .text-slate-300, html.dark.a11y-contrast .text-slate-400,
html.dark.a11y-contrast .text-slate-500, html.dark.a11y-contrast .text-slate-600, html.dark.a11y-contrast .text-slate-700 { color:#fff !important; }
html.dark.a11y-contrast .bg-white, html.dark.a11y-contrast .bg-sand-50, html.dark.a11y-contrast .bg-sand-100 { background:#000 !important; }
html.dark.a11y-contrast .border-line { border-color:#fff !important; border-width:2px !important; }

/* ---- Mode gelap ---- */
html.dark body { background: #171F1A; color:#E7F0EA; }
html.dark .bg-white { background-color: #171F1A !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark .bg-sand-50 { background-color: #171F1A !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark .bg-sand-100 { background-color: #171F1A !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark .border-line { border-color: rgba(255,255,255,0.06) !important; }
html.dark .text-ink { color:#EAF3EE !important; }
html.dark .text-slate-300 { color:#B9C9C1 !important; }
html.dark .text-slate-400 { color:#93A89D !important; }
html.dark .text-slate-500 { color:#9FB3A9 !important; }
html.dark .text-slate-600 { color:#B3C4BA !important; }
html.dark .text-slate-700 { color:#D3E0D9 !important; }
html.dark input, html.dark select, html.dark textarea { background-color:#171F1A !important; color:#EAF3EE !important; border-color:transparent !important; }
html.dark ::placeholder { color:#6E8579 !important; }
html.dark ::-webkit-scrollbar-thumb { background:#3FA97B; }
html.dark header.bg-ink { background-color: #0A2E22 !important; }

/* ---- Widget aksesibilitas: tombol mengambang & panel ---- */
.a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 52px; height: 52px; border-radius: 9999px; background: #0B5C45; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 8px 8px 16px rgba(0,0,0,0.28), -4px -4px 10px rgba(255,255,255,0.06); border: none; cursor: pointer; transition: transform .15s ease; }
.a11y-fab:hover { transform: scale(1.06); }
.a11y-backdrop { position: fixed; inset: 0; background: rgba(30,32,26,0.5); z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; overflow-y: auto; }
.a11y-panel { background: #FFFFFF; color:#0B3D2E; border: 1px solid rgba(15,23,42,0.10); border-radius: 20px; width: 100%; max-width: 380px; max-height: calc(100vh - 96px); overflow-y: auto; box-shadow: 8px 8px 18px rgba(184,190,204,0.4), -8px -8px 18px rgba(255,255,255,0.85); }
html.dark .a11y-panel { background:#171F1A; color:#EAF3EE; border-color: rgba(255,255,255,0.08); box-shadow: 10px 10px 22px rgba(0,0,0,0.5), -8px -8px 18px rgba(255,255,255,0.03); }
.a11y-textsize-btn { border: 1px solid rgba(15,23,42,0.10); border-radius: 10px; padding: 10px 4px; font-size: 13px; text-align: center; cursor: pointer; background: #FFFFFF; color:#334; box-shadow: 3px 3px 7px rgba(184,190,204,0.35), -3px -3px 7px rgba(255,255,255,0.8); }
html.dark .a11y-textsize-btn { background:#171F1A; border-color: rgba(255,255,255,0.08); color:#D3E0D9; box-shadow: 4px 4px 8px rgba(0,0,0,0.5), -3px -3px 7px rgba(255,255,255,0.03); }
.a11y-textsize-btn.active { background: #FFFFFF; border-color: #0B5C45; color: #0B5C45; font-weight: 600; box-shadow: inset 3px 3px 7px rgba(184,190,204,0.45), inset -3px -3px 7px rgba(255,255,255,0.8); }
html.dark .a11y-textsize-btn.active { background:#171F1A !important; border-color:#3FA97B; color:#7CC6A3; box-shadow: inset 3px 3px 7px rgba(0,0,0,0.55), inset -3px -3px 7px rgba(255,255,255,0.03) !important; }
.a11y-row { background: #FFFFFF; border: 1px solid rgba(15,23,42,0.08); border-radius: 12px; padding: 12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow: inset 2px 2px 5px rgba(184,190,204,0.25), inset -2px -2px 5px rgba(255,255,255,0.6); }
html.dark .a11y-row { background:#171F1A; border-color: rgba(255,255,255,0.06); box-shadow: inset 3px 3px 7px rgba(0,0,0,0.5), inset -3px -3px 7px rgba(255,255,255,0.03); }

/* =====================================================================
   GRAFIK SVG BUATAN SENDIRI (donut, bar multi-seri, line) - dipindahkan
   dari index.html (SPA lama, dipakai oleh public-app.js). Animasi
   "menggambar" grafik (batang tumbuh, lingkaran terisi, garis bergerak)
   hanya dipicu SEKALI saat kartu grafik pertama kali masuk ke area layar
   (lihat observeChartInView() di public-app.js). Sebelum kartu terlihat,
   elemen grafik disimpan dalam kondisi "belum tergambar" lewat aturan
   default di bawah. Otomatis dinonaktifkan kalau pengguna mengaktifkan
   "Kurangi Animasi" di widget aksesibilitas (aturan .a11y-reduce-motion
   universal di atas sudah menangani ini).
   ===================================================================== */
.chart-card { position: relative; }
.donut-seg { stroke-dasharray: 0 var(--seg-total, 999); transform-origin: center; }
.chart-pop { opacity: 0; transform: scale(.72); transform-origin: center; }
.bar-grow { transform: scaleY(0); transform-origin: bottom; }
.line-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.line-area { opacity: 0; }
.line-dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }

@keyframes donutSegDraw { from { stroke-dasharray: 0 var(--seg-total, 999); } to { stroke-dasharray: var(--seg-len, 0) var(--seg-gap, 999); } }
@keyframes fadeSeg { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes barGrow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
@keyframes dotPop { to { opacity: 1; transform: scale(1); } }

.chart-card.in-view .donut-seg { animation: donutSegDraw .8s cubic-bezier(.21,.9,.32,1) both; }
.chart-card.in-view .chart-pop { animation: popIn .55s cubic-bezier(.21,.9,.32,1) both; }
.chart-card.in-view .bar-grow { animation: barGrow .55s cubic-bezier(.21,.9,.32,1) both; }
.chart-card.in-view .line-draw { animation: lineDraw 1.1s cubic-bezier(.21,.9,.32,1) forwards; }
.chart-card.in-view .line-area { animation: fadeSeg .8s ease .5s forwards; }
.chart-card.in-view .line-dot { animation: dotPop .4s cubic-bezier(.21,.9,.32,1) forwards; }