/* Simak Web — gaya "pop" ala landing pakaisimak (29 Okt 2026, direvisi 29 Okt sore). HANYA web: dimuat bangun.sh setelah css lain;
   aplikasi Tauri tidak memakai berkas ini. Struktur & alur layar tidak diubah, hanya rupa + gerak.
   Bentuk (sudut, bayangan menurun saat ditekan) mengikuti ~/pakaisimak-v11/index.html (.btn-beli, .btn-web).
   Revisi 1: garis TIPIS (1,5 px) dan BUKAN hitam. Setiap komponen punya --wt ("warna tombol"); warna garis dan
   bayangan diturunkan dari --wt (lebih gelap), jadi ganti warna tombol = garis ikut. Semua warna datang dari token
   tema (--aksen, --rekam, --teks, --kartu, …), bukan angka tetap, sehingga terang, gelap, dan tema buatan sendiri sama-sama konsisten.
   Gerak memakai transform/opacity saja; mati di prefers-reduced-motion dan saat tab tersembunyi. */
:root {
  --pop-tebal: 1.5px;
  --pop-geser: 2px;
  --pop-biru: var(--aksen);
  --pop-merah: var(--rekam);
  --pop-kuning: #e7b83a;
  --pop-stabilo: var(--stabilo);
  --pop-teks-isi: #fff; /* teks di atas isi merah/biru: putih di terang, gelap di mode gelap (lihat bawah) */
  /* Cadangan kalau color-mix() tidak didukung: warna gelap statis (bukan hitam). */
  --pop-fb-garis: #6d5f4f; --pop-fb-bayang: #54483b;
  --pop-fb-netral: #b9ac96; --pop-fb-netral-bayang: #d8ccb5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]):not([data-tema-aktif="terang"]) {
    --pop-teks-isi: #2a1311;
    --pop-fb-garis: #9a8f86; --pop-fb-bayang: #6f6862;
    --pop-fb-netral: #5c5c5c; --pop-fb-netral-bayang: #343434;
  }
}
:root[data-tema="gelap"], :root[data-tema-aktif="gelap"] {
  --pop-teks-isi: #2a1311;
  --pop-fb-garis: #9a8f86; --pop-fb-bayang: #6f6862;
  --pop-fb-netral: #5c5c5c; --pop-fb-netral-bayang: #343434;
}

/* Warna tombol → garis & bayangan. --wt diatur per komponen; di bawah ini hanya turunannya. */
.tombol, .kartu-rekam, .aksi-cepat .aksi-mulai, button.rekam, .banner-trial, .saran, .pwa-spanduk {
  --wt: var(--aksen);
  --wt-garis: var(--pop-fb-garis); --wt-bayang: var(--pop-fb-bayang);
}
/* Permukaan netral (dialog, kartu, saklar, panel): garis = teks yang dipucatkan ke warna kartu, bayangan = turunan latar. */
dialog, #live-teks, .kamus-offline, .kartu-kamus, .info-rekaman, .baris-saklar input[type=checkbox], .saklar-kecil input[type=checkbox], .progres.pop-tarik > div, .sumber-transkrip, #dock[data-mode="siap"] button.rekam::before {
  --wt-garis: var(--pop-fb-netral); --wt-bayang: var(--pop-fb-netral-bayang);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tombol, .kartu-rekam, .aksi-cepat .aksi-mulai, button.rekam, .banner-trial, .saran, .pwa-spanduk {
    --wt-garis: color-mix(in srgb, var(--wt) 80%, #000);
    --wt-bayang: color-mix(in srgb, var(--wt) 62%, #000);
  }
  dialog, #live-teks, .kamus-offline, .kartu-kamus, .info-rekaman, .baris-saklar input[type=checkbox], .saklar-kecil input[type=checkbox], .progres.pop-tarik > div, .sumber-transkrip, #dock[data-mode="siap"] button.rekam::before {
    --wt-garis: color-mix(in srgb, var(--teks) 26%, var(--kartu));
    --wt-bayang: color-mix(in srgb, var(--teks) 13%, var(--latar));
  }
}
/* Warna isi per jenis */
.tombol.utama, .simpan-merah, button.rekam, .kartu-rekam { --wt: var(--rekam); }
.tombol.meeting-besar, .banner-trial, .saran { --wt: var(--aksen); }
.aksi-cepat .aksi-mulai { --wt: var(--aksen); }
.aksi-cepat [data-aksi="meeting"] { --wt: var(--rekam); }

/* Latar kertas bertitik (landing: titik 1,2 px tiap 22 px) */
body { background-image: radial-gradient(var(--titik, rgb(70 52 25 / .13)) 1.2px, transparent 1.4px); background-size: 22px 22px; }

/* ---------- Tombol: garis tipis + bayangan kecil = terlihat bisa ditekan ---------- */
.tombol, .kartu-rekam, .aksi-cepat .aksi-mulai {
  cursor: pointer;
  transition: transform var(--pop-cepat, 100ms) ease-out, box-shadow var(--pop-cepat, 100ms) ease-out, background-color .15s, border-color .15s;
}
:root { --pop-cepat: 100ms; }
.tombol {
  min-height: 44px; border: var(--pop-tebal) solid var(--wt-garis); border-radius: 14px; font-weight: 600;
  background: var(--kartu); color: var(--wt); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang);
}
.tombol.utama, .simpan-merah {
  background: var(--wt) !important; color: var(--pop-teks-isi) !important; border: var(--pop-tebal) solid var(--wt-garis) !important;
  box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang) !important;
}
.tombol:hover:not(:disabled):not(:active) { transform: translateY(-1px); }
/* Tekan = turun sebesar bayangan, bayangan hilang */
.tombol:active:not(:disabled) { transform: translateY(var(--pop-geser)); box-shadow: 0 0 0 var(--wt-bayang); }
.tombol.utama:active:not(:disabled), .simpan-merah:active:not(:disabled) { box-shadow: 0 0 0 var(--wt-bayang) !important; }
.tombol:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.tombol:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .kartu-rekam:focus-visible {
  outline: 2px solid var(--aksen); outline-offset: 2px;
}

.kartu-rekam { border: var(--pop-tebal) solid var(--wt-garis); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); }
.kartu-rekam:hover:not(:active) { transform: translateY(-1px); }
.kartu-rekam:active { transform: translateY(var(--pop-geser)); box-shadow: 0 0 0 var(--wt-bayang); }
.kartu-rekam .bulat { color: var(--pop-teks-isi); border: var(--pop-tebal) solid var(--wt-garis); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); }
.aksi-cepat .aksi-mulai { border: var(--pop-tebal) solid var(--wt-garis); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); }
.aksi-cepat .aksi-mulai:active { transform: translateY(var(--pop-geser)); box-shadow: 0 0 0 var(--wt-bayang); }
.aksi-cepat .ikon-aksi { color: var(--pop-teks-isi); }
.pil-saring button b { color: var(--pop-teks-isi); }

/* Panel & kartu bergaris tipis */
dialog, #live-teks { border: var(--pop-tebal) solid var(--wt-garis); }
.saran, .banner-trial { border: var(--pop-tebal) solid var(--wt-garis); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); }
dialog { box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang), 0 24px 50px -16px rgb(0 0 0 / .4); }
/* Panel percobaan & spanduk: teks berkontras di kedua tema (dulu biru gelap tetap di latar gelap) */
.banner-trial { color: var(--aksen); }
.banner-trial .tombol { background: var(--kartu); }
.banner-trial .tombol.utama { background: var(--rekam) !important; --wt: var(--rekam); }
.banner-trial .tombol.utama, .banner-trial .tombol.utama * { text-decoration: none; }

/* Stabilo (sorotan nama di salam): ikut token tema, tidak memutihkan teks di mode gelap */
.stabilo { background: linear-gradient(transparent 52%, var(--pop-stabilo) 52%, var(--pop-stabilo) 92%, transparent 92%); }

/* Garis aksen kiri kartu catatan: dijepit ke dalam supaya tidak terpotong sudut kartu */
.item::before, .item.terpilih::before { left: 6px; width: 3px; border-radius: 3px; top: 14px; bottom: 14px; }
.item { padding-left: 20px; }

/* ---------- Tombol rekam: siap / merekam (merah berdenyut + waktu) / jeda / memproses ---------- */
button.rekam { color: var(--pop-teks-isi); border: var(--pop-tebal) solid var(--wt-garis); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); transition: transform var(--pop-cepat) ease-out, box-shadow var(--pop-cepat) ease-out; }
button.rekam:active { transform: translateY(var(--pop-geser)); box-shadow: 0 0 0 var(--wt-bayang); }
/* Label teks di samping ikon: ikon tidak pernah sendirian */
#dock[data-mode="siap"] button.rekam::before {
  content: "Rekam"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px; border: var(--pop-tebal) solid var(--wt-garis); background: var(--kartu); color: var(--teks);
  font: 600 13px/1.4 var(--sans); white-space: nowrap; pointer-events: none;
}
#dock[data-mode="siap"][data-menulis="1"] button.rekam::before { content: "Memproses…"; }
#dock[data-mode="siap"][data-menulis="1"] button.rekam::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px dashed var(--pop-biru);
  animation: pop-putar 2.4s linear infinite;
}
#dock[data-mode="merekam"] button.rekam { animation: pop-denyut 1.2s ease-in-out infinite; }
#dock[data-mode="merekam"][data-jeda="1"] button.rekam { animation: none; background: var(--pop-kuning); }
#dock[data-mode="merekam"][data-jeda="1"] button.rekam::after { animation: none; opacity: 0; }
#dock[data-mode="merekam"] #dock-status::before { content: "● "; color: var(--pop-merah); }
#dock[data-mode="merekam"][data-jeda="1"] #dock-status::before { content: "❚❚ "; color: var(--pop-kuning); }
#dock-waktu { font-weight: 700; }
@keyframes pop-denyut { 50% { transform: scale(1.06); } }
@keyframes pop-putar { to { transform: rotate(360deg); } }

/* ---------- Saklar dengan knob meluncur ---------- */
.baris-saklar input[type=checkbox], .saklar-kecil input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer; margin: 0 4px 0 0;
  width: 46px; height: 28px; border-radius: 999px; border: var(--pop-tebal) solid var(--wt-garis); background: var(--kartu-2);
  transition: background-color .12s, border-color .12s;
}
.baris-saklar input[type=checkbox]::before, .saklar-kecil input[type=checkbox]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--kartu); border: var(--pop-tebal) solid var(--wt-garis); box-sizing: border-box;
  transition: transform 120ms ease-out;
}
.baris-saklar input[type=checkbox]:checked, .saklar-kecil input[type=checkbox]:checked {
  background: var(--aksen); border-color: color-mix(in srgb, var(--aksen) 80%, #000);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .baris-saklar input[type=checkbox]:checked, .saklar-kecil input[type=checkbox]:checked { border-color: var(--pop-fb-garis); }
}
.baris-saklar input[type=checkbox]:checked::before, .saklar-kecil input[type=checkbox]:checked::before { transform: translateX(18px); }
.baris-saklar input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.baris-saklar { cursor: pointer; min-height: 44px; }

/* ---------- Chip / tab: indikator bergeser masuk ---------- */
.folder-bar button { position: relative; transition: background-color .15s, color .15s, transform var(--pop-cepat); }
.folder-bar button:active { transform: translateY(2px); }
.folder-bar button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px;
  background: var(--pop-merah); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease-out;
}
.folder-bar button.aktif::after { transform: scaleX(1); }

/* ---------- Dialog & lembar: masuk halus (opacity + geser, ≤ 200 ms) ---------- */
dialog[open] { animation: pop-masuk 180ms ease-out; }
dialog[open]::backdrop { animation: pop-pudar 180ms ease-out; }
@keyframes pop-masuk { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop-pudar { from { opacity: 0; } }

/* ---------- Umpan balik simpan/salin: centang kecil di gelembung Moci ---------- */
.gelembung.pop-centang::before {
  content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px;
  border-radius: 50%; background: var(--c-hijau, #3d7a4b); color: #fff; font: 700 12px/1 var(--sans);
  animation: pop-centang 220ms ease-out;
}
@keyframes pop-centang { from { transform: scale(.3); opacity: 0; } }

/* ---------- Label sumber transkrip di tiap rekaman ---------- */
.sumber-transkrip { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--redup); }
.sumber-transkrip[data-sumber="terbaik"] { color: var(--c-hijau, #3d7a4b); }
.sumber-transkrip[data-sumber="menunggu"] { color: var(--pop-merah); }
.kamus-offline { display: grid; gap: 8px; padding: 12px; border: var(--pop-tebal) solid var(--wt-garis); border-radius: 14px; background: var(--kartu); }
.kamus-offline p { margin: 0; }

/* ---------- Kamus suara: kartu Standar / Terbaik, kotak Moci, status rekaman (revisi 2, 30 Okt 2026) ----------
   Garis tipis turunan warna (--wt), bukan hitam; terang, gelap, dan tema buatan sendiri memakai token yang sama. */
.kamus-offline > p { font-size: 13.5px; }
.kartu-kamus { display: grid; gap: 6px; padding: 12px; border: var(--pop-tebal) solid var(--wt-garis); border-radius: 14px; background: var(--kartu-2, var(--kartu)); }
.kartu-kamus.dipakai { --wt: var(--aksen); --wt-garis: var(--pop-fb-garis); --wt-bayang: var(--pop-fb-bayang); box-shadow: 0 var(--pop-geser) 0 var(--wt-bayang); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kartu-kamus.dipakai { --wt-garis: color-mix(in srgb, var(--wt) 80%, #000); --wt-bayang: color-mix(in srgb, var(--wt) 62%, #000); }
  .info-rekaman.gagal { --wt-garis: color-mix(in srgb, var(--rekam) 55%, var(--kartu)); }
}
.kartu-kamus .kk-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kartu-kamus .kk-ringkas { margin: 0; font-weight: 600; }
.kartu-kamus.nonaktif > :not(.kk-alasan):not(.kk-kepala) { opacity: .62; }
.kk-alasan { color: var(--rekam); font-size: 12.5px; }
.kk-aksi .tombol { min-height: 44px; }
.kotak-kamus .kk-kepala { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.kotak-kamus .kk-kepala p { margin: 0; color: var(--teks); font-size: 13.5px; line-height: 1.4; }
.kotak-kamus .kk-aksi { margin-top: 10px; }
.kotak-kamus .progres { margin-top: 10px; }
.kotak-kamus #kamus-atur { margin-top: 8px; }
#kamus-aksi-galat[hidden] { display: none; }
#kamus-aksi-galat { flex-wrap: wrap; }
.info-rekaman { margin-top: 2px; padding: 10px 12px; border: var(--pop-tebal) solid var(--wt-garis); border-radius: 12px; background: var(--kartu-2, var(--kartu)); }

/* ---------- Motion Moci (SVG dari ui/pet.js, satu sumber) ---------- */
/* Merekam: telinga bergerak + gelombang suara + mata fokus */
[data-kondisi="dengar"] .moci .gelombang { display: block; }
[data-kondisi="dengar"] .moci .gelombang path { animation: pop-gelombang 1s ease-out infinite; transform-box: fill-box; transform-origin: left center; }
[data-kondisi="dengar"] .moci .gelombang path:nth-child(2) { animation-delay: .35s; }
[data-kondisi="dengar"] .moci .telinga.kiri { animation: pop-telinga-kiri .9s ease-in-out infinite; }
[data-kondisi="dengar"] .moci .telinga.kanan { animation: pop-telinga-kanan .9s ease-in-out infinite .2s; }
@keyframes pop-gelombang { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.3); } }
@keyframes pop-telinga-kiri { 50% { transform: rotate(-7deg); } }
@keyframes pop-telinga-kanan { 50% { transform: rotate(7deg); } }
/* Proses transkrip: menulis dengan pensil + kepala mengangguk kecil */
[data-kondisi="nulis"] .moci .badan { animation: pop-angguk 1.1s ease-in-out infinite; }
@keyframes pop-angguk { 50% { transform: rotate(3deg) translateY(1px); } }
/* Galat: bingung — telinga turun + tanda tanya */
.pop-bingung .moci .telinga.kiri { transform-box: fill-box; transform-origin: bottom right; transform: rotate(-28deg); }
.pop-bingung .moci .telinga.kanan { transform-box: fill-box; transform-origin: bottom left; transform: rotate(28deg); }
.pop-bingung .moci .mata-buka { transform: translateY(2px) scaleY(.8); animation: none; }
.pop-bingung { position: relative; }
.pop-bingung::after {
  content: "?"; position: absolute; top: -6px; right: -4px; font: 700 22px/1 var(--sans); color: var(--pop-merah);
  animation: pop-tanya 1.2s ease-in-out infinite;
}
@keyframes pop-tanya { 50% { transform: translateY(-4px) rotate(8deg); } }

/* Caption keadaan Moci (teks tetap terbaca walau gerak dimatikan). Moci & caption ditumpuk dengan jarak tetap,
   gambar Moci dijepit ke kotaknya supaya pensil/gelombang tidak pernah menimpa caption (galeri 29 Okt 2026). */
.wadah-moci-beranda:has(> .moci-teks) { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wadah-moci-beranda .moci { overflow: hidden; }
.moci-teks { position: relative; z-index: 1; margin: 0; font: 600 14px/1.3 var(--sans); color: var(--redup); text-align: center; white-space: nowrap; }

/* Layar kosong: Moci mengantuk + ajakan jelas */
.pop-kosong { display: grid; justify-items: center; gap: 4px; text-align: center; }
/* Ukuran dikunci (maks 160 px, di tengah): tanpa batas, Moci memenuhi layar lebar. */
.pop-kosong .moci { width: clamp(80px, 24vw, 120px); max-width: 160px; height: auto; aspect-ratio: 120 / 110; }
.pop-kosong b { font: 700 16px/1.3 var(--sans); color: var(--teks); }

/* Unduh kamus: Moci menarik progress bar, bar terisi sesuai % */
.progres { --p: 0%; }
.progres.pop-tarik { position: relative; padding-top: 34px; }
.progres.pop-tarik > div { height: 14px; border: var(--pop-tebal) solid var(--wt-garis); background: var(--kartu-2); }
.progres.pop-tarik > div::after { background: repeating-linear-gradient(-45deg, var(--pop-merah) 0 10px, #d9614b 10px 20px); }
.progres.pop-tarik > span { font-weight: 600; color: var(--teks); font-variant-numeric: tabular-nums; }
.moci-tarik {
  position: absolute; top: 0; left: clamp(0px, calc(var(--p) - 18px), calc(100% - 38px)); width: 38px; height: 35px;
  transition: left .3s ease-out; pointer-events: none;
}
.moci-tarik .moci { width: 38px; height: 35px; animation: pop-jalan .5s ease-in-out infinite alternate; }
@keyframes pop-jalan { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-3px) rotate(4deg); } }

/* ---------- Gerak berhenti saat tab tersembunyi / pengguna minta gerak dikurangi ---------- */
.tab-sembunyi *, .tab-sembunyi *::before, .tab-sembunyi *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- State tombol pop (revisi 1, putaran Codex): hover · fokus · aktif · disabled, terang & gelap ----------
   Semua turunan --wt lewat color-mix, jadi sama di dua tema dan ikut kalau warna tombol diganti. Hover hanya di perangkat
   yang punya kursor (di HP hover menempel setelah ketuk). Disabled: redup, tanpa bayangan, tanpa gerak. */
.pil-saring button, .aksi-cepat .aksi-mulai, .tombol, .kartu-rekam { --wt-hover: color-mix(in srgb, var(--wt, var(--aksen)) 10%, var(--kartu)); }
.pil-saring button { --wt: var(--rekam); border: var(--pop-tebal) solid var(--wt-garis, var(--pop-fb-garis)); cursor: pointer; transition: transform var(--pop-cepat), background-color .15s, box-shadow var(--pop-cepat); }
.pil-saring button.aktif { background: color-mix(in srgb, var(--wt) 14%, var(--kartu)); color: var(--wt); border-color: color-mix(in srgb, var(--wt) 80%, #000); box-shadow: 0 1px 0 color-mix(in srgb, var(--wt) 62%, #000); }
@media (hover: hover) {
  .tombol:hover:not(:disabled):not(.utama):not(.simpan-merah) { background: var(--wt-hover); }
  .tombol.utama:hover:not(:disabled), .simpan-merah:hover:not(:disabled) { background: color-mix(in srgb, var(--wt) 90%, #000) !important; }
  .pil-saring button:hover:not(.aktif):not(:disabled) { background: var(--wt-hover); }
  .aksi-cepat .aksi-mulai:hover:not(:disabled):not(:active) { transform: translateY(-1px); } /* :active menang atas hover */
  .baris-saklar input[type=checkbox]:hover:not(:disabled):not(:checked) { background: color-mix(in srgb, var(--aksen) 10%, var(--kartu-2)); }
  .baris-saklar input[type=checkbox]:hover:not(:disabled):checked { background: color-mix(in srgb, var(--aksen) 90%, #000); }
}
.pil-saring button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
/* Fokus papan ketik: cincin di luar garis, warna turunan --wt supaya terbaca di terang maupun gelap */
.tombol:focus-visible, .pil-saring button:focus-visible, .aksi-cepat .aksi-mulai:focus-visible, .kartu-rekam:focus-visible,
.baris-saklar input[type=checkbox]:focus-visible {
  outline: 2px solid var(--wt, var(--aksen)); outline-offset: 3px;
}
:root[data-tema="gelap"] .tombol:focus-visible, :root[data-tema="gelap"] .pil-saring button:focus-visible,
:root[data-tema="gelap"] .aksi-cepat .aksi-mulai:focus-visible, :root[data-tema="gelap"] .baris-saklar input[type=checkbox]:focus-visible {
  outline-color: color-mix(in srgb, var(--wt, var(--aksen)) 70%, #fff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .tombol:focus-visible, :root:not([data-tema="terang"]) .pil-saring button:focus-visible,
  :root:not([data-tema="terang"]) .aksi-cepat .aksi-mulai:focus-visible, :root:not([data-tema="terang"]) .baris-saklar input[type=checkbox]:focus-visible {
    outline-color: color-mix(in srgb, var(--wt, var(--aksen)) 70%, #fff);
  }
}
/* Disabled: jelas redup, tanpa bayangan/gerak; warna tombol utama dipudarkan ke kartu (bukan hanya opacity) */
.tombol:disabled, .tombol.utama:disabled, .simpan-merah:disabled, .pil-saring button:disabled, .aksi-cepat .aksi-mulai:disabled, .kartu-rekam:disabled {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none !important; filter: saturate(.6);
}
.tombol.utama:disabled, .simpan-merah:disabled { background: color-mix(in srgb, var(--wt) 55%, var(--kartu)) !important; }
.baris-saklar input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }

/* Kartu kamus (web): pemberitahuan "transkrip belum bisa dipakai" bergaya info biru tenang (seperti .banner-trial), label "Direkomendasikan". */
#kamus-offline > p.kk-info { padding: 8px 12px; border-radius: calc(12px * var(--sudut, 1)); background: var(--aksen-lembut); color: var(--aksen); font-weight: 600; line-height: 1.45; }
.kartu-kamus .kk-judul { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kartu-kamus .kk-label { color: var(--aksen); border-color: var(--aksen-lembut); background: var(--aksen-lembut); }