/* ==========================================================================
   Suara — tampilan gelap, teks besar, kontras tinggi.
   Dipakai sambil jalan, sering tanpa melihat layar.

   Aturan tata letak (ikut SOP UI/UX Mudahin):
   - App-shell: isi dibungkus lebar maks 28rem, di tengah. Di HP penuh layar,
     di laptop rapi di tengah seperti HP.
   - Zona jempol: aksi utama menempel di bawah, gampang dijangkau jempol.
   - Kepala menempel di atas, jadi status selalu kelihatan saat di-scroll.
   ========================================================================== */

:root {
  --dasar:      #0B0F17;   /* latar halaman */
  --permukaan:  #161C27;   /* kartu, panel */
  --permukaan2: #1E2635;   /* tombol kedua */
  --garis:      #2A3345;
  --emas:       #FCC737;   /* aksi utama (Fresh Auto) */
  --emas-tua:   #E0A800;
  --teks:       #F5F7FA;
  --redup:      #97A3B6;

  --merah:  #EF4444;
  --hijau:  #22C55E;
  --amber:  #FBBF24;

  --lebar: 28rem;          /* setara max-w-md */
  --bawah: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* WAJIB, jangan dihapus.
   Elemen yang disembunyikan lewat atribut `hidden` punya display:none bawaan
   browser — tapi aturan `display: flex` / `display: grid` di bawah lebih kuat
   dan membatalkannya. Tanpa baris ini, layar token dan tombol aksi tetap
   kelihatan padahal seharusnya tersembunyi. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--dasar);
  color: var(--teks);
  /* Inter kalau terpasang, kalau tidak pakai huruf bawaan HP.
     Tidak mengunduh font — biar buka aplikasi tetap seketika. */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Kerangka aplikasi ───────────────────────────────────────────────── */

.aplikasi {
  max-width: var(--lebar);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-inline: 20px;
}

/* ── Kepala ──────────────────────────────────────────────────────────── */

.kepala {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 0 14px;
  background: linear-gradient(var(--dasar) 70%, transparent);
}

.merek {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teks);
}

.lencana {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--permukaan);
  color: var(--redup);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.lencana[data-status="merekam"]   { color: #FFC9C9; border-color: var(--merah); background: #3B1517; }
.lencana[data-status="memproses"] { color: #FDE9A9; border-color: var(--amber); background: #37290A; }
.lencana[data-status="selesai"]   { color: #BBF7D0; border-color: var(--hijau); background: #0E2C1A; }
.lencana[data-status="gagal"]     { color: #FFC9C9; border-color: var(--merah); background: #3B1517; }

/* ── Layar token ─────────────────────────────────────────────────────── */

.token-layar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-bottom: 40px;
}

.token-judul { margin: 0; font-size: 1.4rem; font-weight: 800; }

.token-catatan { margin: 0; color: var(--redup); font-size: 0.95rem; }

.token-catatan code {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.88em;
  color: var(--emas);
}

.token-isian {
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;   /* minimal 16px, biar iOS tidak ikut nge-zoom */
  font-family: inherit;
  color: var(--teks);
  background: var(--permukaan);
  border: 2px solid var(--garis);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.token-isian:focus { border-color: var(--emas); }

/* ── Isi utama ───────────────────────────────────────────────────────── */

.isi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

/* Panggung tombol rekam. Saat belum ada hasil, tombol melayang di tengah
   layar. Begitu hasil muncul, panggung menyusut dan naik ke atas. */
.panggung {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 300px;
  transition: min-height 0.25s ease;
}

.aplikasi[data-ada-hasil="ya"] .panggung {
  flex: 0 0 auto;
  min-height: 0;
  padding-top: 4px;
}

/* ── Tombol rekam ────────────────────────────────────────────────────── */

.rekam {
  position: relative;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--emas);
  color: #16180F;
  box-shadow: 0 14px 34px rgba(252, 199, 55, 0.28);

  /* Wajib: supaya menahan tombol tidak ikut men-scroll halaman, dan tidak
     memunculkan menu tekan-lama atau blok seleksi biru. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.12s ease, background 0.15s, box-shadow 0.2s;
}

/* Efek kenyal saat ditekan. */
.rekam:active { transform: scale(0.95); }

.rekam:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

.rekam-isi {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}

.rekam-ikon {
  width: 54px;
  height: 54px;
  fill: currentColor;
  stroke: currentColor;
}

.rekam-tulisan {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.rekam-waktu {
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Cincin denyut saat merekam. */
.rekam-cincin {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid var(--merah);
  opacity: 0;
  pointer-events: none;
}

/* Sedang merekam */
.aplikasi[data-status="merekam"] .rekam {
  background: var(--merah);
  color: #fff;
  box-shadow: 0 14px 40px rgba(239, 68, 68, 0.42);
  transform: scale(1.03);
}
.aplikasi[data-status="merekam"] .rekam-cincin {
  opacity: 1;
  animation: denyut 1.25s ease-out infinite;
}
.aplikasi[data-status="merekam"] .rekam-ikon { display: none; }

@keyframes denyut {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Sedang memproses */
.aplikasi[data-status="memproses"] .rekam {
  background: var(--permukaan);
  color: var(--emas);
  box-shadow: none;
  cursor: progress;
}
.aplikasi[data-status="memproses"] .rekam-ikon { display: none; }

/* Cincin berputar — dipakai hanya saat memproses. Jangan memutar ikon
   mikrofonnya: kalau diputar, bentuknya jadi tidak karuan. */
.pemutar {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(252, 199, 55, 0.2);
  border-top-color: var(--emas);
  animation: putar 0.8s linear infinite;
}

.aplikasi[data-status="memproses"] .pemutar { display: block; }

@keyframes putar { to { transform: rotate(360deg); } }

.rekam[disabled] { cursor: not-allowed; }

.petunjuk {
  margin: 0;
  text-align: center;
  color: var(--redup);
  font-size: 0.92rem;
  max-width: 22rem;
}

/* ── Kabar (galat / pemberitahuan) ───────────────────────────────────── */

.kabar {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--merah);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kabar[data-nada="info"] { border-left-color: var(--emas); }

.kabar-teks { margin: 0; font-size: 0.98rem; line-height: 1.55; }

.tombol-kabar {
  align-self: flex-start;
  background: var(--permukaan2);
  color: var(--teks);
  border: 1px solid var(--garis);
  padding: 11px 20px;
  font-size: 0.95rem;
}

/* ── Hasil ───────────────────────────────────────────────────────────── */

.hasil { display: flex; flex-direction: column; gap: 10px; }

/* Begitu ada hasil, kotak teks yang mengisi sisa layar — bukan ruang kosong.
   Teks jadi kelihatan lebih banyak tanpa perlu di-scroll. */
.aplikasi[data-ada-hasil="ya"] .hasil { flex: 1; }
.aplikasi[data-ada-hasil="ya"] .teks { flex: 1; }

.hasil-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hasil-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--redup);
}

.tanda-mentah {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FDE9A9;
  background: #37290A;
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 4px 10px;
}

.teks {
  width: 100%;
  min-height: 190px;
  padding: 16px;
  font-family: inherit;
  font-size: 1.05rem;   /* minimal 16px, biar iOS tidak ikut nge-zoom */
  line-height: 1.6;
  color: var(--teks);
  background: var(--permukaan);
  border: 2px solid var(--garis);
  border-radius: 14px;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}

.teks:focus { border-color: var(--emas); }

/* Konfirmasi "sudah disalin". Hijau redup, bukan kotak mencolok — ini kabar
   baik yang sudah diharapkan, bukan peringatan. */
.hasil-catatan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #BBF7D0;
}

.hasil-catatan::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hijau);
}

/* ── Zona jempol ─────────────────────────────────────────────────────── */

.aksi {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr;   /* satu tombol saja: Salin */
  gap: 12px;
  padding: 14px 0 calc(14px + var(--bawah));
  background: linear-gradient(transparent, var(--dasar) 26%);
}

/* ── Tombol umum ─────────────────────────────────────────────────────── */

.tombol {
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  padding: 17px 18px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.15s, background 0.15s;
}

.tombol:active { transform: scale(0.96); }
.tombol:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; }
.tombol[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.tombol-utama {
  background: var(--emas);
  color: #16180F;
  box-shadow: 0 8px 20px rgba(252, 199, 55, 0.22);
}
.tombol-utama:hover { background: var(--emas-tua); }

.tombol-kedua {
  background: var(--permukaan2);
  color: var(--teks);
  border: 1px solid var(--garis);
}

/* ── Roti bakar (pemberitahuan sekilas) ──────────────────────────────── */

.roti {
  position: fixed;
  left: 50%;
  bottom: calc(104px + var(--bawah));
  transform: translateX(-50%);
  z-index: 40;
  background: var(--hijau);
  color: #04210F;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  animation: naik 0.18s ease-out;
  max-width: calc(100vw - 40px);
  text-align: center;
}

.roti[data-nada="galat"] { background: var(--merah); color: #fff; }

@keyframes naik {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Hormati pengaturan kurangi-gerak ────────────────────────────────── */

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

/* ==========================================================================
   Halaman pengaturan — kartu per penyedia, mengikuti pola LMS
   ========================================================================== */

.kembali {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--redup);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 6px 10px 6px 4px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}

.kembali:hover { color: var(--teks); }
.kembali:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; }

/* Judul didorong ke kanan HANYA di halaman yang punya tombol kembali.
   Jangan pernah menulis ini sebagai `.kepala .merek` — halaman rekam ikut
   kena dan judulnya menempel ke lencana status. */
.kembali ~ .merek { margin-left: auto; }

.atur { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }

/* ── Catatan keamanan di atas ─────────────────────────────────────────── */

.atur-catatan {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  background: #0E2C1A;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 14px;
  color: #BBF7D0;
  font-size: 0.88rem;
  line-height: 1.6;
}

.atur-catatan svg { flex: none; margin-top: 1px; color: var(--hijau); }
.atur-catatan code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 5px;
}

.atur-judul {
  margin: 8px 0 -2px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--redup);
}

/* ── Belum ada token ──────────────────────────────────────────────────── */

.atur-blokir {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 20px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 18px;
  margin-top: 20px;
}

.atur-blokir-teks { margin: 0; color: var(--redup); line-height: 1.65; }
.atur-blokir .tombol { text-align: center; text-decoration: none; }

/* ── Kartu penyedia ───────────────────────────────────────────────────── */

.kartu {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 18px;
}

.kartu-kepala { display: flex; align-items: flex-start; gap: 12px; }

.kartu-ikon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dasar);
  color: var(--emas);
}

.kartu-tulisan { min-width: 0; }

.kartu-judul {
  margin: 0 0 3px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--teks);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.kartu-catatan { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--redup); }

.tanda {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.tanda-wajib    { color: #FFC9C9; background: #3B1517; border: 1px solid var(--merah); }
.tanda-opsional { color: var(--redup); background: var(--permukaan2); border: 1px solid var(--garis); }

/* ── Baris status ─────────────────────────────────────────────────────── */

.status { margin: 0; font-size: 0.85rem; font-weight: 700; }
.status-memuat  { color: var(--redup); font-weight: 400; }
.status-kosong  { color: var(--amber); }
.status-ada     { color: var(--hijau); }

.status-topeng {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 400;
  color: var(--redup);
}

.status-sumber { font-weight: 400; color: var(--redup); }

/* ── Kolom isian + tombol mata ────────────────────────────────────────── */

.isian-bungkus { position: relative; display: flex; }

.isian {
  width: 100%;
  padding: 15px 48px 15px 15px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;                /* jangan di bawah 16px — iOS ikut nge-zoom */
  color: var(--teks);
  background: var(--dasar);
  border: 2px solid var(--garis);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.isian::placeholder { font-family: inherit; color: var(--redup); opacity: 0.75; }
.isian:focus { border-color: var(--emas); }

.mata {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--redup);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mata:hover { color: var(--teks); }
.mata:focus-visible { outline: 3px solid var(--emas); outline-offset: 1px; }

/* Kunci sedang terlihat — beri tanda jelas, jangan sampai tidak sadar
   kuncinya terpampang di layar sementara ada orang lain di sebelah. */
.mata[data-tampil="ya"] { color: var(--emas); background: var(--permukaan2); }

/* ── Tombol dalam kartu ───────────────────────────────────────────────── */

.kartu-aksi { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.kartu-aksi .tombol { padding: 14px 18px; font-size: 0.96rem; }
.kartu-aksi .tombol-kedua { padding-left: 24px; padding-right: 24px; }

.tombol[data-sibuk="ya"] { opacity: 0.6; cursor: progress; }

/* ── Hasil tes koneksi ────────────────────────────────────────────────── */

.hasil-uji {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

.hasil-uji::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: currentColor;
}

.hasil-uji[data-nada="ok"]    { color: #BBF7D0; }
.hasil-uji[data-nada="gagal"] { color: #FFC9C9; }

/* ── Tautan ambil key ─────────────────────────────────────────────────── */

.tautan {
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--emas);
  text-decoration: none;
  padding: 2px 0;
}

.tautan:hover { text-decoration: underline; }
.tautan:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; }

/* Sudut kanan halaman rekam: lencana status + jalan masuk ke pengaturan. */
.kepala-kanan { display: flex; align-items: center; gap: 8px; }

.gerigi {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  color: var(--redup);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  -webkit-tap-highlight-color: transparent;
}

.gerigi:hover { color: var(--teks); background: var(--permukaan2); }
.gerigi:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; }

/* Halaman pengaturan tidak punya bilah aksi menempel di bawah, jadi roti
   pemberitahuannya harus turun — kalau tidak, dia menutupi tautan "Ambil key". */
.roti.roti-bawah { bottom: calc(24px + var(--bawah)); }

/* Kaki kartu: tautan ambil key di kiri, hapus di kanan. */
.kartu-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sengaja dibuat kecil dan tidak menyala. Menghapus kunci itu jarang
   dilakukan dan mahal akibatnya — jangan diberi bobot visual setara Simpan. */
.hapus {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--merah);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hapus:hover { text-decoration: underline; }
.hapus:focus-visible { outline: 3px solid var(--merah); outline-offset: 3px; border-radius: 4px; }
.hapus[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Tombol rekam: tekan-mulai / tekan-berhenti ──────────────────────────
   Selama merekam, ikon mikrofon diganti kotak berhenti. Mikrofon berarti
   "bicara"; kotak berarti "hentikan". Memakai mikrofon untuk dua-duanya
   membuat user ragu apakah menekannya akan mulai atau berhenti. */

.rekam-stop {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: currentColor;
}

.aplikasi[data-status="merekam"] .rekam-ikon { display: none; }
.aplikasi[data-status="merekam"] .rekam-stop { display: block; }

/* Tiga baris muat di dalam lingkaran saat merekam: kotak, timer, tulisan. */
.aplikasi[data-status="merekam"] .rekam-isi { gap: 6px; }
.aplikasi[data-status="merekam"] .rekam-waktu { font-size: 1.8rem; }