/* Font mushaf self-host (KFGQPC Uthmanic Script HAFS — King Fahd Complex, distribusi bebas) */
@font-face {
  font-family: "KFGQPC Uthmanic Script HAFS";
  src: url("/static/fonts/UthmanicHafs.woff2") format("woff2");
  font-display: swap;
}
/* SALINAN — sumber kebenaran: tilaqa-hifz-product-package/design/tokens.css (sinkronkan manual saat berubah) */
/* ============================================================
   Tilaqa Hifz — Design Tokens v0.1
   Sumber kebenaran tunggal untuk warna, tipografi, ruang, radius,
   bayangan, dan gerak. Light = "Kertas Mushaf", Dark = "Malam Mihrab".
   ============================================================ */

:root {
  /* ---- Warna inti (light: Kertas Mushaf) ---- */
  --bg: #F7F4EC;            /* latar utama — krem kertas */
  --surface: #FFFDF6;       /* kartu / permukaan terangkat */
  --surface-2: #F1ECDF;     /* permukaan tenggelam (input, track) */
  --line: #E4DDCB;          /* garis pemisah */
  --ink: #221E18;           /* teks utama (hitam hangat) */
  --ink-muted: #6E6759;     /* teks sekunder */
  --ink-faint: #A69E8E;     /* teks nonaktif / placeholder */

  /* ---- Hijau Mihrab (brand primer) ---- */
  --green-900: #0F3B27;
  --green-700: #17573B;     /* teks/isi brand di atas terang */
  --green-600: #1D6B48;     /* aksi utama */
  --green-500: #268759;
  --green-200: #BCDCCA;
  --green-100: #DCEDE2;
  --green-50:  #EFF7F1;

  /* ---- Emas Tazhib (aksen — ornamen & momen pencapaian) ---- */
  --gold-700: #8C6825;
  --gold-600: #A87E2F;      /* teks emas terkecil yang boleh dipakai (>=18px semibold) */
  --gold-500: #C09A45;
  --gold-300: #DCC489;
  --gold-100: #F3E9CF;

  /* ---- Semantik status bacaan (teruji di spike) ---- */
  --benar: var(--green-600);
  --benar-bg: var(--green-100);
  --terlewat: #A05205;      /* kata tidak dikredit */
  --terlewat-bg: #FBEED4;
  --berbeda: #A63446;       /* terdengar berbeda */
  --berbeda-bg: #F9E3E6;
  --murajaah: #2B6E8F;      /* pengulangan — netral, bukan salah */
  --murajaah-bg: #E0F0F7;

  /* ---- Tipografi ---- */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mushaf: "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Amiri Quran", serif;
  --font-arab-ui: "Noto Naskh Arabic", "Scheherazade New", serif;

  --text-caption: 0.75rem;   /* 12 */
  --text-body-s: 0.875rem;   /* 14 */
  --text-body: 1rem;         /* 16 */
  --text-title-s: 1.125rem;  /* 18 */
  --text-title: 1.375rem;    /* 22 */
  --text-display-s: 1.75rem; /* 28 */
  --text-display: 2.125rem;  /* 34 */
  /* Mushaf: 3 ukuran baca, line-height longgar utk harakat */
  --mushaf-s: 1.5rem;  --mushaf-m: 1.875rem;  --mushaf-l: 2.25rem;
  --mushaf-leading: 2.3;

  /* ---- Ruang (basis 4px) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Radius ---- */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Bayangan (hangat, lembut) ---- */
  --shadow-1: 0 1px 3px rgba(34, 30, 24, .07);
  --shadow-2: 0 6px 20px rgba(34, 30, 24, .08);

  /* ---- Gerak ---- */
  --dur-1: 120ms;  /* micro: hover, toggle */
  --dur-2: 200ms;  /* state kata, pill */
  --dur-3: 320ms;  /* panel, halaman */
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ---- Fokus & sentuh ---- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-500);
  --hit-min: 44px;
}

/* ---- Dark: Malam Mihrab ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131A15;
    --surface: #1B231D;
    --surface-2: #212B24;
    --line: #2C382F;
    --ink: #F1EDE1;
    --ink-muted: #A9A292;
    --ink-faint: #6F6A5C;

    --green-600: #3FA274;
    --green-700: #57B78A;
    --green-100: #1E3A2B;
    --green-50: #18291F;

    --gold-600: #D9B96A;
    --gold-500: #C9A653;
    --gold-100: #33301F;

    --benar: #4CB584;      --benar-bg: #1C3A2A;
    --terlewat: #E0A050;   --terlewat-bg: #3A2C15;
    --berbeda: #E58296;    --berbeda-bg: #3D2127;
    --murajaah: #6FB4D4;   --murajaah-bg: #16303D;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, .4);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-500);
  }
}
[data-theme="dark"] {
  --bg: #131A15; --surface: #1B231D; --surface-2: #212B24; --line: #2C382F;
  --ink: #F1EDE1; --ink-muted: #A9A292; --ink-faint: #6F6A5C;
  --green-600: #3FA274; --green-700: #57B78A; --green-100: #1E3A2B; --green-50: #18291F;
  --gold-600: #D9B96A; --gold-500: #C9A653; --gold-100: #33301F;
  --benar: #4CB584; --benar-bg: #1C3A2A;
  --terlewat: #E0A050; --terlewat-bg: #3A2C15;
  --berbeda: #E58296; --berbeda-bg: #3D2127;
  --murajaah: #6FB4D4; --murajaah-bg: #16303D;
  --shadow-1: 0 1px 3px rgba(0,0,0,.35); --shadow-2: 0 6px 20px rgba(0,0,0,.4);
}
[data-theme="light"] {
  --bg: #F7F4EC; --surface: #FFFDF6; --surface-2: #F1ECDF; --line: #E4DDCB;
  --ink: #221E18; --ink-muted: #6E6759; --ink-faint: #A69E8E;
  --green-600: #1D6B48; --green-700: #17573B; --green-100: #DCEDE2; --green-50: #EFF7F1;
  --gold-600: #A87E2F; --gold-500: #C09A45; --gold-100: #F3E9CF;
  --benar: #1D6B48; --benar-bg: #DCEDE2;
  --terlewat: #A05205; --terlewat-bg: #FBEED4;
  --berbeda: #A63446; --berbeda-bg: #F9E3E6;
  --murajaah: #2B6E8F; --murajaah-bg: #E0F0F7;
  --shadow-1: 0 1px 3px rgba(34,30,24,.07); --shadow-2: 0 6px 20px rgba(34,30,24,.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* ============================================================
   Komponen form Tilaqa — konsisten lintas halaman (sesi, beranda,
   pengaturan). Menggantikan tampilan native <select> & checkbox.
   Semua bentuk digambar sendiri (tanpa emoji / icon library).
   ============================================================ */

/* ---- Select ---- */
.t-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; font-size: var(--text-body-s); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 10px 38px 10px 13px; min-height: var(--hit-min);
  cursor: pointer; line-height: 1.2; max-width: 100%;
  /* chevron: dibuat dari dua garis (SVG data-URI, warna --ink-muted #6E6759) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.t-select:hover { border-color: var(--gold-300); }
.t-select:focus-visible { outline: none; border-color: var(--green-600); box-shadow: var(--focus-ring); }
.t-select:disabled { opacity: .5; cursor: default; }
[data-theme="dark"] .t-select,
@media (prefers-color-scheme: dark) { }
/* chevron versi terang teks di dark mode (#A9A292) */
@media (prefers-color-scheme: dark) {
  .t-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9A292' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
[data-theme="dark"] .t-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9A292' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
[data-theme="light"] .t-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ---- Checkbox ---- */
.t-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: var(--text-body-s); color: var(--ink); user-select: none; }
.t-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.t-check .box {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* tanda centang: goresan digambar sebagai path SVG, animasi muncul */
.t-check .box svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--dur-2) var(--ease); }
.t-check input:checked + .box { background: var(--green-600); border-color: var(--green-600); }
.t-check input:checked + .box svg { stroke-dashoffset: 0; }
.t-check input:focus-visible + .box { outline: none; box-shadow: var(--focus-ring); }
.t-check input:disabled + .box { opacity: .5; }
.t-check:hover .box { border-color: var(--green-500); }

/* ---- Input teks/angka (selaras dgn select) ---- */
.t-input {
  font: inherit; font-size: var(--text-body-s); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 10px 12px; min-height: var(--hit-min);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.t-input:hover { border-color: var(--gold-300); }
.t-input:focus-visible { outline: none; border-color: var(--green-600); box-shadow: var(--focus-ring); }

/* ============================================================
   Modal / dialog Tilaqa — overlay lembut, kartu naik-menghalus.
   ============================================================ */
.t-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; background: rgba(34, 30, 24, .42);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3); }
.t-modal.open { opacity: 1; visibility: visible; }
.t-modal-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2); width: min(440px, 100%);
  padding: 24px; transform: translateY(12px) scale(.98); opacity: .6;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease); }
.t-modal.open .t-modal-card { transform: none; opacity: 1; }
.t-modal-card h3 { margin: 0 0 6px; font-size: var(--text-title-s); letter-spacing: -.01em; }
.t-modal-card .t-modal-sub { margin: 0 0 18px; font-size: var(--text-body-s); color: var(--ink-muted); line-height: 1.5; }
.t-modal-aksi { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .t-modal { background: rgba(0, 0, 0, .55); } }
[data-theme="dark"] .t-modal { background: rgba(0, 0, 0, .55); }
[data-theme="light"] .t-modal { background: rgba(34, 30, 24, .42); }