/* Mode Ramah Lansia: ukuran huruf, kontras tinggi, bacakan halaman */

/* Ukuran huruf: memperbesar area konten saja agar menu tetap rapi */
html.ml-ukuran-1 #konten-utama { zoom: 1.15; }
html.ml-ukuran-2 #konten-utama { zoom: 1.3; }
html.ml-ukuran-3 #konten-utama { zoom: 1.5; }
/* Saat diperbesar: container tema jangan lebih lebar dari layar, kata panjang boleh pindah baris */
html[class*="ml-ukuran-"] #konten-utama .container { width: auto !important; max-width: 100%; }
html[class*="ml-ukuran-"] #konten-utama { overflow-wrap: break-word; word-break: break-word; overflow-x: clip; }
/* Lebar tetap dari isi editor jangan melebihi layar */
html[class*="ml-ukuran-"] #konten-utama [style*="width"] { max-width: 100% !important; }
html[class*="ml-ukuran-"] #konten-utama img,
html[class*="ml-ukuran-"] #konten-utama iframe,
html[class*="ml-ukuran-"] #konten-utama table { max-width: 100%; }

/* Kontras tinggi */
html.ml-kontras #konten-utama p,
html.ml-kontras #konten-utama li,
html.ml-kontras #konten-utama td,
html.ml-kontras #konten-utama span,
html.ml-kontras #konten-utama h1,
html.ml-kontras #konten-utama h2,
html.ml-kontras #konten-utama h3,
html.ml-kontras #konten-utama h4,
html.ml-kontras #konten-utama h5 { color: #000 !important; }
html.ml-kontras #konten-utama p,
html.ml-kontras #konten-utama li { line-height: 1.8 !important; font-weight: 500; }
html.ml-kontras #konten-utama a { color: #0033cc !important; text-decoration: underline !important; }
html.ml-kontras #konten-utama img { filter: contrast(1.15); }
html.ml-kontras .navbar-nav > li > a { color: #000 !important; font-weight: 700; }

/* Bagian yang sedang dibacakan */
.ml-dibaca { outline: 3px solid #f0a500; outline-offset: 4px; background: #fff8e1 !important; }

/* Tombol utama */
.ml-tombol {
  position: fixed; left: 16px; bottom: 16px; z-index: 10000;
  display: flex; align-items: center; gap: 8px;
  background: #0b4f8a; color: #fff; border: 3px solid #fff; border-radius: 40px;
  padding: 10px 18px; font-size: 18px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.ml-tombol:hover, .ml-tombol:focus { background: #083a66; outline: 3px solid #f0a500; outline-offset: 2px; }
.ml-tombol .ml-aa { font-size: 22px; font-family: Georgia, serif; }

/* Panel pengaturan */
.ml-panel {
  position: fixed; left: 16px; bottom: 80px; z-index: 10000;
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; color: #111; border-radius: 14px; padding: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 17px; line-height: 1.4;
}
.ml-panel[hidden] { display: none; }
.ml-panel h2 { font-size: 20px; margin: 0 0 4px; color: #0b4f8a; font-weight: 700; }
.ml-panel .ml-sub { font-size: 14px; color: #444; margin: 0 0 14px; }
.ml-panel .ml-label { display: block; font-weight: 700; margin: 12px 0 6px; }
.ml-baris { display: flex; gap: 8px; }
.ml-panel button {
  flex: 1; min-height: 48px; border: 2px solid #0b4f8a; border-radius: 10px;
  background: #fff; color: #0b4f8a; font-size: 17px; font-weight: 700; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.ml-panel button:hover, .ml-panel button:focus { background: #e8f1fa; outline: 3px solid #f0a500; outline-offset: 1px; }
.ml-panel button[aria-pressed="true"] { background: #0b4f8a; color: #fff; }
.ml-panel .ml-ukuran button:nth-child(1) { font-size: 15px; }
.ml-panel .ml-ukuran button:nth-child(2) { font-size: 18px; }
.ml-panel .ml-ukuran button:nth-child(3) { font-size: 21px; }
.ml-panel .ml-ukuran button:nth-child(4) { font-size: 25px; }
.ml-panel .ml-lebar { width: 100%; margin-top: 8px; }
.ml-panel .ml-reset { border-color: #888; color: #444; font-size: 15px; min-height: 40px; margin-top: 14px; }
.ml-panel .ml-tutup {
  position: absolute; top: 8px; right: 8px; flex: none; width: 36px; min-height: 36px;
  border: none; font-size: 24px; color: #444; background: transparent;
}

@media (max-width: 767px) {
  /* Di HP, geser ke atas agar tidak menutupi tombol telepon/WA */
  .ml-tombol { bottom: 104px; left: 10px; padding: 8px 14px; font-size: 16px; }
  .ml-panel { bottom: 156px; left: 10px; max-height: calc(100vh - 176px); overflow-y: auto; }
}

@media print { .ml-tombol, .ml-panel { display: none !important; } }